PhotoshopでWebデザイン

レイヤースタイルとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レイヤースタイルを理解していきます。
講師:
10:13

字幕

ここではレイヤースタイルを見ていきましょう。レイヤースタイルは特定のレイヤーに特殊効果を加えることができる機能です。では「ファイル」>「開く」デスクトップにコピーしたexercise file の中から「Chapter 7」tablet_ styles_starttablet_ stylesこの両方を選択します。Shift を押しながら両方選択して「開く」もしカラーマネージメントを聞かれた場合はそのまま OK を押します。ここにTablet のデザインがあります。片方はこのグロッシーな感じのないもので片方は少し具体的にグロッシーな感じが付いています。この二つは全く同じレイヤーの構成になっています。片方のレイヤーにはfx のマークがついています。これがレイヤースタイルです。このレイヤースタイルの付け方を見ていきましょう。まず一番最初、このタブレットの外枠Tablet と書かれています。これ以外をちょっとを隠しましょうか。他を目のアイコンを隠します。このシンプルな角丸の長方形です。これにアウトラインを付けていきましょう。まずは fx のボタンを押します。これがレイヤースタイルを通過するときのボタンです。 もう一回クリックします。アウトラインは「境界線」という名前で入っています。これをクリック。「レイヤースタイル」のウインドウが出てきました。まずはどれくらいの幅でこのアウトラインを角化ですね。ここにも「プレビュー」が出ています。3px もあれば十分でしょう。見やすいように色を変えます。この tablet の下に銀の板がある感じにしたいので明るめなグレーを選択したいと思います。こんなもんかな。この時に、どこにその線を書くのかを決めることが出来ます。今あったシェイプの外側なのか、内側なのかそれともシェイプの周りの線の上に書くのか今回は外側にしたいと思います。外側でグレーにできたのでこのまま OK ボタンを押します。レイヤースタイルを付けるとレイヤーの右側にfx の文字が入ります。下を見ると、「効果」とあります。この「効果」というのがレイヤースタイルです。その下に「境界線」と入っています。この各名前の左側の絵のアイコンこれももちろん表示非表示のアイコンです。後からこのレイヤースタイルが要らなくなった場合絵のアイコンを隠すか消すことが出来ます。では、fx の右側のこの上を向いた三角形これを押してこの効果を閉じておきましょう。 閉じても効果は変わりません。この方が見やすいですね。次に、Home Button を見ていきましょう。Home Button を見やすくするために下を隠します。Home Button はこういう黒い丸と白い四角い枠で構成されています。非常にシンプルですね。これのこの丸のほうに光沢感を出していきたいと思います。では、下もつけましょうか。黒い丸の方のレイヤーを選択出来たら、レイヤースタイルを加えます。また、この fx のボタンを押してもいいんですが今回は別の方法でいきましょう。レイヤーの名前の右側をダブルクリックします。そうすると、「レイヤースタイル」というウィンドウが出ます。この状態で、どのレイヤースタイルを使うか決めることが出来ます。今回は「グラデーションオーバーレイ」にチェックを入れます。「グラデーションオーバーレイ」はそのシェイプに上から下までグラデーションを加えることが出来ます。今回はこのグラデーション下半分が白、上が黒にしたいのでこの「グラデーション」のところをクリックしてグラデーションを編集していきます。まず、左側が黒ではなくて白がいいのでこれを入れ替えます。後はこの場所をうまいことやって光沢感が出るようにしていきます。 もう少しこっちですかね。真ん中あたりから下にかけてこう白くなっていくのがいいかなと思います。今この白が白すぎるのでこの色を変えていきましょう。白い四角をクリックその後にその「カラー」ですね「カラー」をクリックこれがですね少し落ち着かせましょう。あまり白くてもちょっと気持ちが悪いので軽く反射が入る感じのグレーを選んでいきましょうか。OKOK を押します。こんな感じでいいでしょうOK。次を見ていきましょう。次は Screen ですね。ここです。実際のモニターのところですねスクリーンモニター。ここは上のガラスから距離があるので影を落としていきましょう。Screen のレイヤーを選択してfx のボタンから「シャドウ(内側)」これを選んで内側に影を落としていきます。今ここでは、黒に黒を落としているので結構見難いです。なので、このプレビューを見ましょう。内側に影が落ちています。この角度で、どの方向から光が当たって影が落ちているのかの雰囲気を出すことが出来ます。では左上からにしましょうか。こっちがわから影、光が落ちる感じですね。この時にもし他のレイヤースタイルほかのレイヤーで使われるレイヤースタイルとこの角度を別々にしたい場合「包括光源を使用」を外しておきます。 これを外さないと他のレイヤーで使われるレイヤースタイルとまったく同じ角度が採用されてしまいます。今回は外しておきたいと思います。距離をもう少しとりましょうか。そうするとここを見ましょう。距離を付けると影がもっと長くなります。影を長くして、尚且つこのサイズで影のボケ率を上げていきます。この方がふんわりとした影が落ちます。ではこのくらいにしておきましょうか。少し濃いなと思ったらこの「不透明度」を下げてあげれば影の濃さを変えることが出来ます。更に、あまり知られていないのですがこの画面上でこの影の方向を編集することが出来ます。画面上をクリックすると今影が動いているのがわかりますでしょうか。それと同時にこの距離と角度が動いています。さっきの設定が気に入っているので「120」度くらいの方向から「13」でしたね。これを使っていきたいと思います。こんなもんですかね。ここにはもう一個入れましょうか。このモニターのエッジに光沢のある感じをつけていきたいと思いますので「境界線」をオンにします。「境界線」をクリック1 px でいいので非常に明るい色これぐらいですかね。線を引いておきたいと思います。こうすると、少しエッジが去ってより立体感が増しましたよね。 こんな感じに、複数のレイヤースタイルを加えることも可能です。出来上がったらOK ボタンを押します。またfx はたたんでおきましょう。最後がグロッシーですね。この上の光沢です。Gloss のレイヤーをダブルクリックここでまた「グラデーションオーバーレイ」を加えていきます。チェック入れます。そうすると、上から下にこういう映りこみが入ります。ちょっと強すぎるのでこのグラデーションをまた編集していきましょう。今度はこの両端の黒と白の色ではなくてその透明度を変えていきたいと思います。白のほうの透明度をちと強すぎるので「100」から「50」ぐらいですかね。これぐらいがいいかなと思います。今度は黒のほうの透明度を「0」にしちゃいます。OKそうすると、こんな感じに上からなだらかな光が落ちます。OK を押します。こんな感じにですね簡単にレイヤーに対して効果を付けることが出来ます。このレイヤースタイルの素晴らしい所は非破壊なんですね。実際のレイヤーには一切触っていません。後からこの効果を消したい場合はこの効果目のアイコンを消してあげれば消すことが出来ます。レイヤースタイルを効率よく使用してデザインの幅を広げていきましょう。

PhotoshopでWebデザイン

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

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

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

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

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