Photoshop(フォトショップ)でfacebookアイコンを作る方法
海外の記事を参考にfacebookのアイコンをphotoshopで作る方法です。少し手間は掛かりますが、やってることは基本的なことの繰り返しでした。
こちらの記事を参考にさせて頂きました。
- まず背景を作成
- まず始めに背景を作成します。ここでは、カンバスサイズを幅468px高さ200pxで新規作成を行っています。背景作成といっても、レイヤースタイルの設定を上記のように行えばOKです。(レイヤースタイルパネルを表示させるには、最初に表示される背景レイヤーをダブルクリックすればOKです)
- アイコンの大枠を作成
- 新規レイヤーを追加し、「角丸長方形ツール」を選択します。丸みを7mmに設定し、角丸を描きます。次に作成した角丸に対してレイヤースタイルの設定を行っていきます。
レイヤーをダブルクリックして、レイヤースタイルパネルを立ち上げ、まずドロップシャドウの設定を行います。
シャドウ(内側)の設定を行います。
グラデーションオーバーレイの設定を行います。
パターンオーバーレイの設定を行います。 - アイコンの左側の処理
- 手順2で作成した「角丸長方形」のレイヤーをCtrl+クリックして角丸長方形の選択範囲をとります。その後、選択範囲を取った状態で新規レイヤーを作成します。「長方形選択ツール」に持ち替え、「現在の選択範囲との共有範囲」アイコン(四角が2つ重なったアイコン)をクリックした後、左側を選択します。これで左側部分の選択範囲を取ることができました。
選択範囲が取れたら黒で塗りつぶしておきます。その後下記の通りレイヤースタイルの設定を行っていきます。
グラデーションオーバーレイの設定を行います。
パターンオーバーレイの設定を行います。
これらの設定の後、Ctrl+Tで1pxほど上下・左を縮小してやるといいと思います。 - 色が変わる境目の処理
- 色が変わる境目を立体的に窪んだように見せてやります。上記は色の境目部分を拡大した図ですが、色の境目となる部分に3本の線を引きます。(3色塗りつぶします。)左から少し薄い・薄い・濃い青の順です。
- fの文字の入力
- facebookのfの文字を入力します。フォントはデフォルトで入っているArialを選択します。このテキストレイヤーに対してレイヤースタイルの設定を行います。
ドロップシャドウの設定を行います。
シャドウ内側を設定します。 - 仕上げ
- 手順2で作成した角丸長方形のレイヤーを再びCtrl+クリックし、選択範囲を取ります。選択範囲を取ったまま、新規レイヤーを作成します。「楕円形選択ツール」に持ち替えて、「現在の選択範囲との共有範囲」アイコン(四角が2つ重なったアイコン)をクリックした後、上側を選択します。その後、白で塗りつぶし、不透明度を10%にすれば完成です。
完成です。
Photoshop(フォトショップ)でfacebookアイコンを作る方法