PhotoshopでWebデザイン

ドロップシャドウをつける

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ドロップシャドーの付け方をみていきます。
講師:
03:11

字幕

レイヤースタイルのドロップシャドウを見ていきましょう。「ファイル」>「新規」新規で今回は「幅:800」、「高さ:500 」でドキュメントを作成していきます。OK でここに長方形ツールを使ってまずは白色で大きい四角を描いていきます。今白い背景の上に白い四角が来ているのでよく見えません。影を付けていきましょう。長方形のレイヤーを選択してfx のボタンを押します。「ドロップシャドウ」がこの一番下にあります。ここをクリックします。こうすると簡単に影を落とすことが出来ます。今プレビューにチェックが入っているので画面上をマウスでクリックドラッグするだけで簡単にどの方向にどのくらいの距離で影を落とすのか画面を見ながら設定することが出来ます。さらに、この影をもう少し柔らかい感じにしたい場合はこの「サイズ」でこのぼかしの具合を足していきます。もしこの影が濃いなと思ったらこの「不透明度」、これを下げてあげると影を薄くできます。影が出来ました。では OK ボタンを押します。ではこの長方形の上に別の長方形を描いていきましょうか。クリックドラッグで長方形を描きます。今回は色を青にしましょうか。こんな感じに、簡単に写真のフレームのような効果を得ることが出来ました。 またこの影なんですが最近では、画像ファイルのサイズを軽くするために画像にはこの影を含めずにこの中の長方形のこの絵だけを書き出すと言うのが最近の主流になっています。そして影はコーダーのほうでCSS として付け加えます。どういうことかプログラムで影を落とすという感じですね、絵ではなくて。なのでいつでもこういう風に効果このドロップシャドウの効果を外せる必要が出てきています。さらに、このドロップシャドウのところをダブルクリックするとどれぐらいのサイズのボケ率でどれぐらいの距離でどれぐらいの薄さの影を作ってあるのか一目瞭然です。これを伝えてあげればコーダー側でコーダーのほうでCSS を使って影を落とすことが出来ます。Web デザインにおいて影を使う場合はこのレイヤースタイルがお勧めになっています。

PhotoshopでWebデザイン

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

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

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

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

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