Web 2.0的アイコン作成方法/フォトショップ使い方

Photoshop（フォトショップ）でWeb 2.0的アイコンを作る方法のチュートリアルです。（英語版Photoshop）
Web 2.0的っていうのはよく分かりませんが、Youtubeで公開されているタイトルから拾いました。

先生のサイトで使っているアイコンを制作する場合を例に解説されています。

　

　

動画ではMacを利用していますが、windowsでもメニューやツールの位置は概ね同じだと思います。

今回は、内容が英語であること以上にスピードが早いため手順を追って進めていくことは困難かもしれません。
そのため、windows版Photoshopを例に以下で詳しく解説します。
解説は、動画の流れに沿っていますので動画を別画面で開き、下記の解説と並行して作業を行って下さい。（別画面を開くには、動画を再生後、もう一度動画をクリックしてください。YouTubeが開きます）

【動画 53秒あたりから作業開始】

◆ 新規画面を開きます。
◆ 反射テクニックを使うため、背景は濃い色で塗りつぶします。
◆ 左ツールバーより「角丸長方形ツール」を指定します。
◆ 上部にある「丸み」を30pxにします。

＜補足＞
※丸み指定部分並びの左から２番目のシェイプレイヤーが選択されて内場合は、クリックして選択しておいて下さい。
※描画色を白、背景色を黒にしておいて下さい。

◆ Shiftを押しながら右下にドラッグします。
◆ メニューバーのレイヤーから「レイヤースタイル」⇒「グラデーションオーバーレイ」を選択
◆ グラデーション（不透明度の下）をクリックし、グラデーションエディタを開きます
◆ スライダー左下のポイントをダブルクリック
◆ 暗い赤を指定します。
◆ スライダー右下のポイントをダブルクリック
◆ 明るい赤を指定します。
◆ スライダーの下を適当なところでクリックしてポイント追加する
◆ 追加したポイントをスライダーの中心あたりに合わせ、ダブルクリック
◆ 先ほど適用した暗い赤、明るい赤の中間程度の色を指定します
◆ OKでクリックしてグラデーションエディタを閉じます
◆ グラデーションオーバーレイの角度を120度に合わせます
　　そうすると、左上から右下に向かって明るい赤、中間の赤、濃い赤のグラデーションになります。

◆ 左のスタイルで「光彩（内側）」をクリック
◆ 光彩の描画モードから「オーバーレイ」を選択
◆ カラー設定（ノイズの下）をクリックし、白を指定します
◆ 画質の「範囲」を16％程度まで下げる
◆ エレメントの「サイズ」を3ptにする
◆ OKをクリックしてレイヤースタイル画面を閉じます

アイコンの上部にナイスなハイライトを加えます
◆ Ctrlを押しながらシェイプレイヤーの右ボックスをクリックします
◆ ハイライト用に新しい新規レイヤーを作成します（レイヤーの下、ゴミ箱マーク左横のアイコンをクリック）
◆ 左ツールバーより「楕円形選択ツール」を指定します。
◆ alt と Shift を同時に押しながら、アイコン上部を動画のようにドラッグします
　　失敗したら Ctrlを押しながら Z で失敗前に戻って下さい。

◆ するとアイコンに重なった部分のみ選択されます
◆ 左ツールバーより「グラデーションツール」を指定します。
◆ 上部のグラデーション編集ボックスをクリックし、「グラーデーションエディタ」を表示させます。
◆ プリセットから「白から透明」になっているボックスをクリックします
◆ 動画に習い、Shiftを押しながら上から下にドラッグします
◆ Ctrl を押しながら D で選択を解除します
◆ レイヤーの不透明度を50％にします

反射部分を作ります
◆ ハイライト部分とアイコンのレイヤーをShiftを押したままクリックします（２つのレイヤーが擬似的にくっついた状態になります）
◆ アイコンを Altを押しながら下にドラッグします（コピーされます）
◆ Ctrlを押しながら E でコピーしたアイコンのベース部分とハイライト部分を結合させます
◆ 編集⇒変形で「垂直方向に反転」を指定します（するとアイコンがひっくり返ります）
◆ 動画に習って、コピーしたアイコンの位置を下にずらしラインを合わせます
◆ レイヤー下の左から３番目にあるボタンをクリックし、コピーしたアイコンにレイヤーマスクを追加します
◆ 描画色が白、背景色が黒になっていることを確認し、グラデーションツールを指定します
◆ 上部のグラデーション編集ボックスをクリックし、「グラーデーションエディタ」を表示させます。
◆ プリセットから「白から黒」になっているボックスをクリックします
◆ コピーしたアイコン部分をShiftを押しながら上から下に向かってドラッグします
◆ 不透明度を35％にする

以上で完成です。
あとは、アイコンにすきな文字を入れるなどして、ホームページのデザインに使って下さい。

※Photoshopのバージョンは、CS以上をおすすめします。古いバージョンの場合、処理や手順が異なる場合があります。あしからずご了承下さい。