facebookをオシャレに!つながったデザインのカバー+プロフィール画像の作り方

facebookページを作るにあたって、カバーとプロフィールの画像が一体になっているデザインに超憧れました。自分のページを作りがてら、Photoshopで使えるテンプレートを作ったのでご紹介します。
追記(2014/6/13)
2014年6月頃より、facebookのデザインが新しくなったため、以下のテンプレートでは一体化できなくなってしまいました。こちらで新しいテンプレートがDLできます!
こんなデザインにしたい!
リンク先を見て頂くと、すごく素敵なカバー+プロフィールですよね。私もこれがやりたくて四苦八苦しました。

画像サイズはこんな感じなのですが、このプロフィール画像が曲者で、実際の表示は125pxなのに、アップロードするときは180px以上なくちゃいけないという…。普通にカバーを851px*315pxで作ってしまうと、プロフィール画像をいくつにしていいのかわかりませんよね…。。
テンプレートを用意しました!

プロフィール画像が丁度180pxになるように出来ています。こちらにお好きなようにはめ込んで、最終的にカバー画像だけを縮小すれば完璧!(な、はずw)
ダウンロード
中身はpsdファイルです。クレジット表記もバックリンクも要りません!お好きに使ってくださいー。
2014/6/26 追記
こちらのDLは終了しました。
使い方
プロフィール画像

まずは953px*435px、解像度72px/inchの画像サイズでお好きなようにデザインします。ダウンロードしたテンプレートにはめ込んで、赤枠に収まるように調整してください。

[プロフィール画像]という名前のレイヤーをアクティブにして、[選択範囲]→[選択範囲を読み込む]と、180px*180pxの赤枠内が選択されますので、[イメージ]→[切り抜き]を行います。

枠を非表示にすれば、プロフィール画像の完成!アップロードの際画像が荒れるので、jpg保存するときは画質は7(中)くらいが一番綺麗に見えるみたいです。
カバー画像

切り抜き前まで戻って、今度は[カバー画像]という名前のレイヤーをアクティブにして、[選択範囲]→[選択範囲を読み込む]で範囲選択して、[イメージ]→[切り抜き]ます。

枠を非表示にして、[解像度]→[画像解像度]で851px*315pxにします。(縦横比を固定したまま、片方変えればぴったりになるはずです)

これも、画質は7(中)でjpg保存しましょう!
それぞれアップロードして確認
いかがでしたでしょうか?たぶん大丈夫だと思うんですが…。お好きに微調整などしてみてくださいね!
また、facebookの仕様変更で画像サイズが今後変更されることも有りうるので、とりあえず2012/8/7現在ということにさせておいてください。
2件のコメント
テンプレート頂きましたm(_ _)m
とっても見やすくて分かりやすくて
「いいね!」です\(o⌒∇⌒o)/
これからもちょくちょく覗かせてもらいます♪
luzさん、「いいね!」ありがとうございます!
お役に立てて光栄ですー、またいらしてくださいね(*´∀`*)
コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)
YouTubeでQ&Aコンテンツを企画しています
運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。