PhotoshopでWebデザイン

スプライトをまとめる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
用意したソーシャルアイコンをスプライト画像としてまとめていきます。
講師:
03:17

字幕

スプライト画像にアイコンを配置していきたいと思います。Chapter 10 のexercise ファイルの中にこの icons.psd はあります。中に Google+ とかTwitter のアイコンが入っています。これを、先ほど作ったこの空のテンプレートに配置していきたいと思います。まず全部のレイヤーを選択します。Shift+クリックですね。このアイコンをクリック・ドラッグでまず、名前のところに持っていきます。Shift を押したままカンバスの上に来てShift と一緒に離します。そうするとこんな感じに全てのレイヤーがこちらのドキュメントに移動できました。ではアイコンを配置していきましょう。まずはTwitter からいきましょうか。「自動選択」をなしにしておけば簡単に、上のレイヤーを触ってもTwitter を触ることができます。この状態で持っていってあげると簡単にスナップします。ガイドは引いてあるので、そこに沿う感じでアイコンがぴったり配置されます。もしされない場合は「表示」>「スナップ」にチェックが入ってるかどうかを確認しましょう。次にいきます。Facebook を配置。次も、クリック・ドラッグで配置。 次も、クリック・ドラッグ。最後に、Google+ もクリック・ドラッグと。簡単に配置できました。配置できましたらこの 5 つのアイコンをグループ化します。Ctrl/Command+G でグループ化します。下にもコピーが欲しいのでこのグループごとをコピーします。グループレイヤー、選択してCtrl/Command+Jコピーできました。コピーできた方を移動したいので「自動選択」をオンにしてグループになってるのを確認します。下に持っていってあげるときれいにスナップでくっ付きます。では、こちらが上でこちらが下ですね。順番を逆にしましょうか。では、こちら側をグレースケールとしましょう。Grayscaleこちら側をColor としましょうか。では、グレースケールにした方を灰色にモノトーンに変えていきたいと思います。まず、「選択ツール」に持ち替えて上のアイコンのあたりを選択します。これですね。「調整レイヤー」>「白黒...」をクリックします。そうすると白黒のパレットが開いて選択した範囲だけマスクで切り抜かれて白黒にしてくれます。できました。マウスが乗った方がこのカラーの方マウスが乗る前がこの白黒ですね。 こんな感じにスプライトを作っていきます。

PhotoshopでWebデザイン

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

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

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

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

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