Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

Photoshop(フォトショップ)でfacebookアイコンを作る方法

Photoshop(フォトショップ)でfacebookアイコンを作る方法

Photoshop(フォトショップ)でfacebookアイコンを作る方法

海外の記事を参考にfacebookのアイコンをphotoshopで作る方法です。少し手間は掛かりますが、やってることは基本的なことの繰り返しでした。

こちらの記事を参考にさせて頂きました。

Photoshop(フォトショップ)でfacebookアイコンを作る方法

まず背景を作成
まず背景を作成まず始めに背景を作成します。ここでは、カンバスサイズを幅468px高さ200pxで新規作成を行っています。背景作成といっても、レイヤースタイルの設定を上記のように行えばOKです。(レイヤースタイルパネルを表示させるには、最初に表示される背景レイヤーをダブルクリックすればOKです)
アイコンの大枠を作成
アイコンの大枠を作成新規レイヤーを追加し、「角丸長方形ツール」を選択します。丸みを7mmに設定し、角丸を描きます。次に作成した角丸に対してレイヤースタイルの設定を行っていきます。

ドロップシャドウの設定レイヤーをダブルクリックして、レイヤースタイルパネルを立ち上げ、まずドロップシャドウの設定を行います。

シャドウ(内側)の設定シャドウ(内側)の設定を行います。

グラデーションオーバーレイの設定グラデーションオーバーレイの設定を行います。

パターンオーバーレイの設定パターンオーバーレイの設定を行います。
アイコンの左側の処理
アイコンの左側の処理手順2で作成した「角丸長方形」のレイヤーをCtrl+クリックして角丸長方形の選択範囲をとります。その後、選択範囲を取った状態で新規レイヤーを作成します。「長方形選択ツール」に持ち替え、「現在の選択範囲との共有範囲」アイコン(四角が2つ重なったアイコン)をクリックした後、左側を選択します。これで左側部分の選択範囲を取ることができました。

黒く塗りつぶす選択範囲が取れたら黒で塗りつぶしておきます。その後下記の通りレイヤースタイルの設定を行っていきます。

グラデーションオーバーレイの設定グラデーションオーバーレイの設定を行います。

パターンオーバーレイの設定パターンオーバーレイの設定を行います。

これらの設定の後、Ctrl+Tで1pxほど上下・左を縮小してやるといいと思います。
色が変わる境目の処理
色が変わる境目の処理色が変わる境目を立体的に窪んだように見せてやります。上記は色の境目部分を拡大した図ですが、色の境目となる部分に3本の線を引きます。(3色塗りつぶします。)左から少し薄い・薄い・濃い青の順です。
fの文字の入力
fの文字の入力facebookのfの文字を入力します。フォントはデフォルトで入っているArialを選択します。このテキストレイヤーに対してレイヤースタイルの設定を行います。

ドロップシャドウの設定ドロップシャドウの設定を行います。

シャドウ内側を設定シャドウ内側を設定します。
仕上げ
仕上げ手順2で作成した角丸長方形のレイヤーを再びCtrl+クリックし、選択範囲を取ります。選択範囲を取ったまま、新規レイヤーを作成します。「楕円形選択ツール」に持ち替えて、「現在の選択範囲との共有範囲」アイコン(四角が2つ重なったアイコン)をクリックした後、上側を選択します。その後、白で塗りつぶし、不透明度を10%にすれば完成です。
白で塗りつぶし、不透明度を10%

完成完成です。

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

コメントを投稿

Name:
Mail:
URL:
この情報を登録しますか?

Photoshop(フォトショップ)でfacebookアイコンを作る方法の前後の記事

前の記事は「Facebookにブログの更新情報を自動で表示させる方法

次の記事は「Google Web Fontsを試してみました

関連する情報

              

楽してプロっぽいデザイン|Forty-n-FiveBlog ホームへ戻る

検索

最近のエントリー

カテゴリー

月別アーカイブ

タグクラウド

管理人紹介

ポートフォリオサイト|Forty-N-Five

フィードを取得

フィードを取得する

スポンサードリンク

運営SHOP

健康美人30代から始める美と健康は、MovableTypeを使用して制作した通販サイトです。

健康美人30代から始める美と健康 もてもてSHOP NOLOOKS 和彩

元気をくれた本

「夢をかなえるゾウ」この本に出会えて良かったとホントに良かった思います。Webには関係ないですが、これからの人生を楽しくしてくれる本です。ガネーシャどうもありがとう(笑)

Copyright Forty - N - Five. All rights reserved.