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

まずはPSDダウンロード（852KB）

【ステップ1】

編集＞新規（幅800px：高さ800px、解像度：72px）で新規ファイル作成。

【ステップ2】

まず背景をグレー（色：#333333）で塗りつぶします。

その背景レイヤーの上に、新規レイヤー（レイヤー名：Background）を作り、「黒」で塗りつぶし、レイヤー＞「塗り」を0%にします。

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

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

【ステップ3】

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

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

【ステップ4】

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

選択範囲＞選択範囲を変更＞縮小：25pxを選択

【ステップ5】

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

【ステップ6】

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

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

ドロップシャドウ

シャドウ（内側）

ベベルとエンボス

カラーオーバーレイ

レイヤースタイルの結果

【ステップ7】

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

【ステップ8】

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

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

グラデーション結果

【ステップ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）の部分を少し茶色で着色します。

【ステップ10】

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

"Elements"フォルダ内に、

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

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

【ステップ11】

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

【ステップ12】

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

光彩（外側）

光彩（内側）

境界線

レイヤースタイルの結果

【ステップ13】

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

【ステップ14】

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

【ステップ15】

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

【ステップ16】

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

【ステップ17】

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

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

レイヤースタイルの結果

【ステップ18】

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

【ステップ19】

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

ドロップシャドウ

シャドウ（内側）

光彩（内側）

ベベルとエンボス

ベベルとエンボス＞輪郭

カラーオーバーレイ

レイヤースタイルの結果

【ステップ20】

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

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

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

【ステップ21】

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

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

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

【ステップ22】

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

【完成】

別バージョン（グリーン）

レイヤーの一番上に、レーダー部分と同じサイズ（直径：430px）で、

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

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

PSDダウンロード（852KB）

和訳原文："Radar Icon in Photoshop"