PhotoshopでWebデザイン

金属風にしてみる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
金属調のスタイルを作成して、スタイルの使い回し方法をみていきます。
講師:
07:37

字幕

ここでは、レイヤースタイルを使って金属調のボタンを作っていきたいと思います。割と iPhone とかのOS が出てから金属調のルックを作るのが人気になっています。今回は新規ドキュメントで適当に600 X 600 の正方形ドキュメントを作ってここに「シェイプツール」の「楕円形ツール」を使って丸いボタンを描いていきたいと思います。Shift を押しながらクリックドラッグで適当にグレーの円を描きます。この円を真ん中に配置したい時こんな感じにも出来ます。ロックされている背景レイヤーとShift を押しながら両方を選択します。真ん中、真ん中ロックされているレイヤーは動かないので真ん中に持っていくことは簡単にできます。楕円形ダブルクリックで「レイヤースタイル」を呼び出します。「グラデーションオーバーレイ」をチェック入れます。普通だと、こんな感じに上から下にグラデーションがかかるんですが「スタイル」を「角度」に切り替えてあげます。そうすると、こういうグラデーションが円を描くように配置されます。この状態でこのグラデーションを編集していきましょう。「グラデーションエディター」を開いてここに沢山グラデーションの下をクリックしていくと色を加える箱を足すことが出来ます。 この状態でこの各箱をクリックして何かこのグレースケールの色を埋めていってあげます。何か金属っぽくなってきているかと思うのですが。何か今回は色をたしてもいいんですが白黒で描いていきたいと思います。間隔を変えたい場合はこの箱を動かせば移動できます。あと三つですね。この数とかもすごく適当です。適当に作ってます。偶にはちよっと暗い色があってもいいですかね。これぐらいの明るさでこれぐらいかな。こんなもんですかね。こんな感じにしたとします。ちょっと一番内側で同じ色にしましょうか。何かそれっぽいですね。金属っぽい調子が出来て来ています。後は微調整しながら自分の好きな色を出していく感じですね。この辺もちょっと暗い方がリアルなんじゃないかなとか差があった方がいいかなというのを自分で考えて見ていきます。つまんないのはこの辺ですかね。では、こんな感じでいいでしょう。出来ました。この金属の円盤に厚みを付けていきましょう。「シャドウ(内側)」をつかいましょうか。これでこのあたりにハイライトが加わるように見せていきたいと思います。「通常」に持ちかえてちょっと明るめのグレートーンで「サイズ」はこんなもんですかね。ちょっと「チョーク」してあげて「距離」はこれぐらいあればいいかな。 次に枠を付けましょうか。「境界線」でちょっと暗めのグレー立体感に重みを付けていきましょう。こんな感じでしょうか。この上にボタンの要素を足していきます。またシェイプレイヤーにシェイプツールに持ち替えて適当なシェイプこれでいいでしょう。クリックドラッグShift を押しながらでプロポーションを保てます。これも背景と一緒に選択して真ん中へ、真ん中へちょっと大きかったですね。Command/Ctrl + T でCommand/Ctrl + T でサイズを変えてあげます。おっと失礼これぐらいですね。これに立体感をたしていきます。「シャドウ(内側)」で内側に影をたしていきたいと思います。金属を削りだすとこっち側か光ると思うのでドロップシャドウをたしてこれをこの「包括光源」をなしにして白にして「ソフトライト」にしてあげてちょっとうすくしてこんな感じに右下あたりがホワッと立体的に光るようにしています。サイズを「7」ぐらいでいいですかね.距離を縮めて、「3」ぐらいですかね。もっと立体的になってきましたね。この中の色をちょっと変えたいのでアイコンをダブルクリックします。ちょっと暗めにしましょうか。この影とかハイライトの部分は「不透明度」を変えずにここだけ変えていきたいのでこっちではなくてこの下の塗りのほうを下げていきます。 そうすると、少し一番下のテクスチャが見えてきました。こんな感じですかね。立体的なボタンが作成できました。

PhotoshopでWebデザイン

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

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

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

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

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