Photoshop|レーダーのアイコンを作成する日本語チュートリアル

Radar-40.jpg

Photoshop(フォトショップ)で、レーダー探知機のアイコンを作るチュートリアル。

飛行機や潜水艦の操縦室にありそうなレーダーです。

主に「ベベル」&「覆い焼き」2種類の描画モードと、各ステップでのレイヤースタイルの設定で構成されています。

 

まずはPSDダウンロード(852KB)

【ステップ1】

編集>新規(幅800px:高さ800px、解像度:72px)で新規ファイル作成。

Radar-01.jpg

【ステップ2】

まず背景をグレー(色:#333333)で塗りつぶします。

Radar-02.jpg

その背景レイヤーの上に、新規レイヤー(レイヤー名:Background)を作り、「黒」で塗りつぶし、レイヤー>「塗り」を0%にします。

そして下図のようにレイヤースタイルを追加します。

パターンオーバーレイ
描画モード:ソフトライト
パターン:今回は自作の「パンチングメタル」を使いました。ダウンロードはこちら

Radar-03.jpg

【ステップ3】

ツールパレット>楕円形ツール(U)で、キャンバスの真ん中に直径:500pxの正円を描きます。(レイヤー名:Circle)

※この時、下図のように縦と横にそれぞれ、ガイドを引いておくと良いでしょう。

Radar-04.jpg

【ステップ4】

"Circle"レイヤー上で、選択範囲をアクティブ(⌘ or Ctrl + クリック )にします。

選択範囲>選択範囲を変更>縮小:25pxを選択

Radar-05.jpg

【ステップ5】

 レイヤー>レイヤーマスク>「選択範囲をマスク」を選択

Radar-06.jpg

【ステップ6】

下図のようにレイヤースタイルを追加して、円の淵にメタリックのエフェクトをかけます。

ここで使うレイヤー効果は、「ドロップシャドウ」「シャドウ(内側)」「ベベルとエンボス」「カラーオーバーレイ」の4種類です。

ドロップシャドウ

Radar-07.jpg

シャドウ(内側)

Radar-08.jpg

ベベルとエンボス

Radar-09.jpg

カラーオーバーレイ

Radar-10.jpg

レイヤースタイルの結果

Radar-11.jpg

【ステップ7】

楕円形ツール(U)で、キャンバスの真ん中に直径:450pxの正円(色:黒 #000000)を描きます。(レイヤー名:Radar_base)

Radar-12.jpg

【ステップ8】

"Radar_base"レイヤーをコピーし、1つ上に複製レイヤー(名前:Radar_grade1)を作ります。
それを直径:430pxの正円に自由変形させ、キャンバスの真ん中に配置します。
下図のようにレイヤースタイルを追加します。

グラデーションオーバーレイ
グラデーション:左から #7a5511 - #180f00

Radar-13.jpg

グラデーション結果

Radar-14.jpg

【ステップ9】

下図を参考に適当な場所に(1)〜(2)の効果を加えます。

(1)"Radar_grade1"レイヤーの上に、新規レイヤー(名前:Radar_grade2)を作り、"Radar_grade1"レイヤーと同じサイズ(直径:430px)でマスクします。

ブラシツール(U)>マスター直径:450px位、色:#7a5511で、(1)の部分を明るくします。

(2)次に"Radar_grade2"レイヤーの上に、新規レイヤー(名前:Side-grade)を作り、不透明度を40%にします。
【ステップ5】と同じ選択範囲をアクティブにして、マスクします。

ブラシツール(U)>マスター直径:450px位、色:#7a5511で、レーダーの枠上部(2)の部分を少し茶色で着色します。

Radar-15.jpg

【ステップ10】

レイヤーパレットで新規フォルダ(名前:Elements)を追加し、描画モードを「覆い焼きカラー」にします。
また、"Radar_grade2"レイヤーと同じサイズ(直径:430px)で、フォルダごとマスクします。

"Elements"フォルダ内に、

ラインツール(U)で2〜3pxの白い線を描きます。(レイヤー名:h_line)
フィルタ>ぼかし>ぼかし(ガウス)0.7pxで白線を少しぼかし、不透明度を70%に変更。
この白線レイヤーを複製して90度回転させます。(レイヤー名:v_line)

Radar-16.jpg

新規レイヤー(レイヤー名:Lighten)を追加して、盤面を明るく調整します。

Radar-17.jpg

【ステップ11】

楕円形ツール(U)で下図のように、キャンバスの真ん中に正円を描きます。
ここでの色は、後で変更するので気にせず進みます。
(レイヤー名:Circle_big、Circle_small)

Radar-18.jpg

【ステップ12】

レイヤーパレット上で【ステップ11】で描いた、それぞれの円レイヤーの「塗り」を0%にして、下図のようにレイヤースタイルを追加します。

光彩(外側)

Radar-19.jpg

光彩(内側)

Radar-20.jpg

境界線

Radar-21.jpg

レイヤースタイルの結果

Radar-22.jpg

【ステップ13】

"Elements"フォルダ内に、新規レイヤー(レイヤー名:Object)を追加し、下図のようにブラシツール(U)で数カ所ソフトな「点」を描きます。

Radar-23.jpg

【ステップ14】

下図のように、レーダーの十字ラインに「目盛り」を追加して、よりリアル感を演出します。

Radar-24.jpg

【ステップ15】

"Elements"フォルダ内に、下図のように長方形ツール(U)で白い長方形を描き、円の中心を軸に45°回転させます。(レイヤー名:Sonar_line)

Radar-25.jpg

【ステップ16】

"Elements"フォルダの上に、下図のようにペンツール(P)で正円4分の1(90°)+45°が隠れるように「白」で描きます。(レイヤー名:Sonar)

Radar-26.jpg

【ステップ17】

レイヤーパレットで、"Sonar"レイヤーを下記に設定してから、レイヤースタイルを追加します。

描画モード:スクリーン、塗り:0%

Radar-27.jpg

レイヤースタイルの結果

Radar-28.jpg

【ステップ18】

【ステップ3】〜【ステップ5】と同じ要領で、レーダーの「ガラス部分」と「黒フチ」の間に、ラインの縁取り(下図の緑)を追加します。(レイヤー名:Inner_border)

Radar-29.jpg

【ステップ19】

ラインの縁取りに、下図のようにレイヤースタイルを追加して、リアルなメタリックに仕上げて行きます。

ドロップシャドウ

Radar-30.jpg

シャドウ(内側)

Radar-31.jpg

光彩(内側)

Radar-32.jpg

ベベルとエンボス

Radar-33.jpg

ベベルとエンボス>輪郭

Radar-34.jpg

カラーオーバーレイ

Radar-35.jpg

レイヤースタイルの結果

Radar-36.jpg

【ステップ20】

次にレーダー部分にガラスの反射を描きます。

"Inner_border"レイヤーの上に、新規フォルダ(Glass reflection)を作り、その中のレイヤーを、レーダー部分と同じサイズ(直径:430px)を白で塗りつぶします。
レイヤーパレットの「塗り」を0%にしてから、楕円形選択ツール(M)で下図のようにガラスの下半分を選択し、フォルダにレイヤー>レイヤーマスク>「選択範囲をマスク」を選びます。

次にレイヤースタイルを追加します。

Radar-37.jpg

【ステップ21】

レーダーの盤面部分で作ったフォルダとレイヤー(Element、Rader_grade1&2)を複製して統合します。(レイヤー名:Glow)

ぼかしを加え、レイヤーの設定を変えることで、グロー感がより引き立ちます。

フィルタ>ぼかし>ぼかし(ガウス)半径:4px
レイヤーの「塗り」を不透明度:50%に変更。

Radar-38.jpg

【ステップ22】

消しゴムツール(E)で下図の選択範囲を少し消すと、レーダーのガラスにより光沢感と奥行きがでます。

Radar-39.jpg

【完成】

Radar-40.jpg

別バージョン(グリーン)

レイヤーの一番上に、レーダー部分と同じサイズ(直径:430px)で、

新規調整レイヤー>色相・彩度

を追加したら、好みの色に調整してバリエーションを増やしてみましょう!

Radar-41.jpg

PSDダウンロード(852KB)

和訳原文:"Radar Icon in Photoshop"

関連記事はこちら

UP↑

トラックバック(0)

このブログ記事を参照しているブログ一覧: Photoshop|レーダーのアイコンを作成する日本語チュートリアル

このブログ記事に対するトラックバックURL: http://weska.xsrv.jp/mtos/mt-tb.cgi/342

コメントする

アーカイブ

2011年10月

            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

プロフィール

ダイナマイト・ドラマー

名前:ダイナマイト・ドラマー
職業:Webデザイナー
好物:牛のたたきとビール