PhotoshopでWebデザイン

レティナディスプレイ用の画像の作り方

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レティナディスプレイ用に画像を書き出す方法をみていきます。
講師:
03:32

字幕

Retina ディスプレイ用の画像の書き出しについて、見ていきたいと思います。最近、Retina ディスプレイに対応したデバイスが増えています。iPhone とか iPad とかMacBook Pro ですね。そういったデバイスRetina ディスプレイのデバイスに対応したウェブサイトをRetina ディスプレイで見ると画像がクリスプ、シャープですよね。凄いきれいに表示されます。ただ、Retina ディスプレイに対応してないウェブサイトをRetina ディスプレイから見ると粗く、ざらついた感じに表示されます。これはどういう仕組みで動いているかというとRetina ディスプレイに対応したウェブサイトは画像を 2 つ隠し持ってます。一つの画像に対して2 つ持っています。一つは 1 倍のサイズもう一つは 2 倍のRetina 用の画像を隠し持っています。では、どういうワークフローでこの 2 倍の画像を作っていくのか、見ていきましょう。初めから 2 倍のサイズで全ての画像を作り始めても構いません。もし、後からこの 1 倍サイズを 2 倍にする場合はちょっと注意が必要です。2 倍にしても画質が劣化しないレイヤーはテキストレイヤー、文字のレイヤーあとはこの「シェイプツール」で作ったシェイプレイヤーあとはこのバックグラウンドですね。 一色塗りの全部一色で塗られた背景、バックグラウンド若しくは、このスマートオブジェクトこれは内包しているのはAI ファイルです。Adobe Illustrator のAI ファイルを内包しています。この場合はベクターなので後から 2 倍にしても画質が下がる事はありません。もしこのスマートオブジェクトが内包しているものがピクセルの画像の場合2 倍にした後のサイズよりも大きい必要があります。どういうことかというとスマートオブジェクトにする際2 倍のサイズよりも大きいものを用意すす必要があります。では、2 倍にする方法を見ていきましょう。「イメージ」>「画像解像度...」を選択します。一番最初は、単位がpixel になっているかと思います。若しくは inch かな。これを「%」に切り替えます。「200」と打ってあげましょう。そうすると2 倍のサイズに変わります。OK。画質が荒れてないのがわかるかと思います。Web 用に書き出しましょう。「ファイル」>「Web 用に保存...」まずは、この 2 倍にした方を保存していきます。「保存...」ボタンを押してこんな風に名前を付けます。「@」の後に「2x」「2x」と書きます。 「保存」もう一回 「ファイル」>「Web 用に保存...」今度は半分にしてオリジナルのサイズですね元々のサイズで保存していきたいと思います。「保存...」ボタンを押します。今度は「@2x」は付けずに普通に保存します。こんな感じに保存をすることでRetina 版の 2 倍のサイズと通常のディスプレイ用の 1 倍サイズを作ることができました。あとは、コーディングしてくれる人にこの 2 つの画像を渡すか若しくは自分でコードする場合はこの 2 つの画像を埋め込んでCSS 若しくは JavaScript で切り替えられるようにしてあげます。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。