PhotoshopでレスポンシブWebデザイン!

レイヤーパネルからの画像書き出し

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Photoshop CC 2015で強化された画像書き出し方法を詳しく見ていきます。スライスを切ることもなく、レイヤーパネルからグループかレイヤーごとに書き出し可能な、素早く便利な方法です。
講師:
07:00

字幕

このレッスンではPhotoshop CC 2015 で強化された画像書き出し方法を詳しく見ていきます。スライスを切ることなくレイヤーパネルからレイヤーかレイヤーグループごとに書き出し可能なすばやく便利な方法です。新しい画像書き出しはレイヤーパネルを使って行います。書き出す前に少し下ごしらえをしておきましょう。一枚で書き出したいレイヤー、例えばこちらの花の写真のようなものは何もせずにこのままで構いません。しかしこちらのアイコンのように、二つのパーツから構成されているけれども一つの画像として書き出したい場合にはこのようにレイヤーグループにまとめて二つのレイヤーを入れておいてください。レイヤー名・グループ名は書き出した時のファイル名になりますので半角英数でつけておいてください。二単語以上から構成される場合は、間をハイフン、もしくはアンダースコアでつないでおくほうが、書き出した後の手間が省けます。ここまでレイヤーパネルの中の下ごしらえが終わりましたら、書き出すレイヤーを選択していきます。離れた場所にある複数のレイヤーを選択したい時にはキーボードの CommandWindows は Ctrl を押しながら書き出したいレイヤーを選びます。 ここでは4つのレイヤーを選択しました。では選択したどれかのレイヤー上で右クリックします。レイヤーパネルからの書き出しに使うメニューはこちらの二つです。PNG としてクイック書き出し、もしくは書き出し形式です。まずは PNG としてクイック書き出しを選択してみます。書き出し先のフォルダを指定して開くを押します。これだけで今選択した 4 つのレイヤーが書き出されました。このファイル名がそれぞれ元々つけていたレイヤーの名前になっていることを確認してください。レイヤー名に2 bite の文字を使ったり、半角空き、全角空きを使っているとファイル名を変更しなくてはいけませんのでレイヤー名やレイヤーグループ名を半角英数空き無しの状態でつけておくことが最もシンプルで簡単な方法です。先ほどご覧いただいた PNG としてクイック書き出しですが、この PNG の部分の設定を変更して他の画像形式にすることもできます。変更する方法はメニューバーの「ファイル」から「書き出し」 「書き出し」の環境設定を選択してください。左上に PNG というドロップダウンメニューがありますので、開いて希望の画像形式に変えます。もし JPEG を選択した場合は画質を変更することも可能です。 右上の OK をクリックしますと、レイヤー上で右クリックしたときの画像形式がJPEG に変わりました。それではもう一つの形式、レイヤーパネル上でレイヤーを右クリックした時に表示される書き出し形式を選択してみましょう。書き出し形式を選択しますとダイアログボックスが表示されます。この時それぞれのレイヤーに対して、個別のファイル形式を選択することができます。写真のレイヤーは JPEG の方が軽いファイルになるというのであればJPEG を選択、ロゴマークとかアイコンは遠めな部分を生かしたいのでPNG で透明部分を保持したままの設定にしておきます。そして左上に「すべてのスケール」こちらは今書き出そうとしている画像すべてに高密度ディスプレイ用の拡大書き出しの設定をすることができます。デフォルトでは一倍になっていると思いますが、右上のプラスアイコンをクリックすると、Latina ディスプレイ用の 2x2倍のサイズも指定するというように追加することが可能です。これらの設定が終わりましたら右下の「すべてを書き出し」をクリックしてください。また保存先のフォルダを聞かれますので、新規のフォルダを作ります。そしてこの中に書き出し。 今作った 002 のフォルダの中に一倍の画像@1x とそれから 2x指定したものの二倍のサイズの画像と全ての画像について二種類ずつ原寸大、二倍がセットで書き出されています。Photoshop CC 2015 から用意された新しいレイヤーパネルを使った画像書き出し方法はスライスを切る手間が無く非常に簡単になっていることが分かります。また画像の圧縮エンジンが書き換えられましたので、従来の方式よりも切り出された画像が軽くなるケースが多いのでこちらも着目してください。なお従来の形式を使いたい方のために今でも一応メニューバーの「ファイル」>「書き出し」から「ウェブ用に保存(従来)」というメニューで昔ながらの書き出し方法も残されています。以上このレッスンではPhotoshop CC 2015 で強化されたレイヤーパネルからの画像書き出し方法をご紹介しました。

PhotoshopでレスポンシブWebデザイン!

モバイルデバイスにおいてWebを適切に表示させるための仕組みであるレスポンシブWebデザインは、すべてのWebデザイナーにとってもはや必須の取り組むべきテーマです。また最近ではPhotoshopでも美しいカンプを簡単に作れるようになりました。このコースではレスポンシブWebデザインのカンプをPhotoshopで効率的に作成するテクニックを具体的に説明します。

2時間16分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年03月02日

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

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

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