PhotoshopでWebデザイン

イメージジェネレーターの使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
イメージジェネレーターを使う際のレイヤーの名前の付け方と書き出され方をみていきます。
講師:
03:50

字幕

Photoshop CC から入った非常にパワフルな画像の書き出し方法を見ていきたいと思います。画像アセットの生成です。例えば、こういうレイヤー数の多いドキュメントがあるとします。それで、各レイヤーを別々の画像ファイルフォーマット例えば JPEG、PNG、GIF別々で書き出したいサイズも別々にしたいという事はよくあります。一番最後の背景はこの一番大きいドキュメントサイズLOG IN と SIGN UP のボタンはボタンのサイズでこのテキストレイヤーはこのテキストの周りを囲むようなサイズで書き出したいとします。その時に「スライスツール」を使ったり各レイヤーを別名で保存してもいいんですが結構面倒くさいです。画像の生成を見ていきましょう。使い方は非常に簡単です。「ファイル」>「生成」>「画像アセット」にチェックを入れます。この状態で各レイヤーに特殊なルールに従って名前を付けていきます。例えば、一番下のレイヤーこれを JPEG にしたいと思います。bluebg という名前でJPEG にしたい場合bluebg.jpg として名前をつけます。そうするとオリジナルのドキュメントのある場所この場合、Chapter 9 のimage assets の中にこの psd が入ってるんですがそこに自動的にフォルダが生成されて中に bluebg.jpg というJPEG ファイルが作られています。 例えば、この Green の BGこれを 2 種類の方法で書き出したいと思います。一つは PNG、一つは JPEG。そういう場合はこんな感じに書きます。greenbg.jpg でカンマで挟んであげてgreenbg.pngとします。そうるすと自動的にこのフォルダの中にgreenbg.jpg と png2 種類生成されています。非常に速いですよね。このファンクション画像のクオリティーもコントロールできます。例えばredbg.jpg画質は80%にしたい、そういう場合はjpg の後に「8」と加えます。そすると 80% の画質でredbg.jpg を生成してくれます。次に、この LOG IN とSIGN UP のボタンですね。こういう風にフォルダにまとまってる場合も大丈夫です。フォルダ名に .jpg とか .png を付けて行きます。では、ここでは PNG にしましょう。signup.png でEnterそうすると別々のサイズこの BG とは違うサイズでちゃんと書き出してくれてます。もし、Retina 用の SIGN UP のこの 2 倍のボタンも欲しい場合はこんな感じに書きます。この後にカンマをはさんであげて「200%」のサイズでsignup@2x.png とします。 Enterそうすると、自動的に Retina 用の「@2x」のサイズを作ってくれています。2倍サイズですよね。非常に簡単でパワフルです。ぜひ、この画像の生成をワークフローに取り入れていきましょう。

PhotoshopでWebデザイン

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

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

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

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

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