PhotoshopでWebデザイン

より奇麗なベベルをつける

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レイヤーに立体感をつける方法をみていきます。
講師:
07:24

字幕

レイヤースタイルを使ってレイヤーを立体的にしていく方法を見ていきましょう。ボタンでよく使います。「ファイル」] >「新規」今回は小さく、「幅:400」で「高さ:100」としましょうか。ここにまず長方形でタ―とボタンになり得そうな四角を描いていきます。色は適当にオレンジにしましょうか。これを真ん中に配置したいのでCtrl /Command+ A で全体を選択して真ん中へ、真ん中へを押します。Ctrl /Command+ D で選択を解除します。この長方形にレイヤースタイルを加えていきましょう。右側をダブルクリック色々方法があります。まず、「べベルとエンボス」これにオンをしてあげると一瞬で立体感がでます。この「べベルとエンボス」の項目の「深さ」これを変えてあげるとこんな感じにどれくらいの影の強さハイライトの強さというのを変えることが出来ます。更に、このサイズを変えてあげるとギューッとこうキットカットみたいにだんだん角が丸くなっていきます。後はこのボケの「ソフトネス」ですね。影の落ち方を変えられます。こんな感じに、立体的なボタンを簡単に作れます。ここでは「べベルとエンボス」を使わずにほかのところを使って立体的にしていく方法を見ていきたいと思います。 まずは「境界線」これはこのシェイプの外側とか内側とか中央とかそういうところに線を引くためのものです。では、内側にしましょうか。「内側」にして色を選択します。この時に、このオレンジと全く同じ色を選択したいのでここをクリックします。そうすると自分の色が選べます。そのままこの丸の位置から下がっていくと少し影色が選択できます。OKまずはですねこの「シャドウ(内側)」と「光彩(内側)」これを使っていきましょう。シャドウとか光彩というのはただの名前です。「シャドウ」をオンにして別に内側に暗い色を落とす必要もありません。例えば描画モードを「スクリーン」にして色を明るい色にしてあげれば別にシャドウという感じでもないですよね。内側に色を乗っけるのがこの「シャドウ(内側)」です。今回はこの「シャドウ(内側)」をこのシェイプの立体に使用したいと思うので左上にこういう感じで配置していきます。「スクリーン」にして「不透明度」をこれぐらいですかね。「チョーク」を上げてあげて影をはっきりさせます。距離もほんの少しでいいでしょう。取りあえずこれで作っておきます。次にこの下側、右側に影がほしいので今度は「光彩」という名前のものを使って影を付けていきたいと思います。 これも単純に内側に色を塗る為のものです。クリックしてチェック入れます。デフォルトでは「スクリーン」で黄色い色は内側に入るようになっています。これを「乗算」にして色を濃い色にします。まずはこのオレンジの色を選んで自群から探ります。濃い色にしていきます。OKあとはこの「不透明度」をいじるだけで影の濃さを付けることが出来ます。「シャドウ(内側)」に戻りましょうか。今これは白を選んでいますが白をやめて、このオレンジから少し明るい方向に行きたいと思います。オレンジの左側に移動してこの辺をクリックします。そうすると、オレンジ色の中で明るい色が作れます。この方がリアルですね。OKこんな感じに、’立体感のあるボタンが簡単に作れました。このように、レイヤースタイルのシャドウの内側はただ名前でどっち側に何色を乗っけるかということを選ぶことが出来ます。では、この上に文字を書いていきましょうか。レイヤーの fx を一旦隠します。この辺にCLICK にしましょうか。クリック、C-L-Y-C-KCLICK全部選択して少し文字を大きくしましょう。もう少し太い方がうれしいのでこれを bolt に切り替えます。フォントは Helvetica を使用しています。 真ん中あたりに持っていきます。この CLICK の文字にも少し立体感を加えましょうか。CLICK の右側をダブルクリックします。またレイヤースタイルを開いて今度はどれにしましょうか。ドロップシャドウを使っていきましょうか。「不透明度」を下げて「包括光源」なしでこう上からかかる感じにしたいと思います。距離を「1」か「2」ですね。ほんの少しだけ「1」にしましょう。「サイズ」も「1」で「スプレッド」、これをこのくらいですかね。こうすると、ちょっと CLICK がへこんだ感じがしませんでしょうか?こんな感じのテクニックで文字をへこませていきます。OK ボタンを押します。こんな感じに、簡単に立体感のあるボタンを作ることが出来ました。もしこの立体感を編集したい場合は両方とも fx を開いて各編集したい項目レイヤースタイルをダブルクリックしてあげれば簡単に編集を加えることが出来ます。このようにレイヤースタイルを駆使することで簡単に立体感のあるボタンを作成することが出来ます。では次はもう少し違った質感調整をレイヤースタイルを使って見てきたいと思います。

PhotoshopでWebデザイン

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

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

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

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

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