2012
8
07

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

facebookページを作るにあたって、カバーとプロフィールの画像が一体になっているデザインに超憧れました。自分のページを作りがてら、Photoshopで使えるテンプレートを作ったのでご紹介します。


重要な追記(2014/6/13)

2014年6月頃より、facebookのデザインが新しくなったため、以下のテンプレートでは一体化できなくなってしまいました。こちらで新しいテンプレートがDLできます!

こんなデザインにしたい!

リンク先を見て頂くと、すごく素敵なカバー+プロフィールですよね。私もこれがやりたくて四苦八苦しました。

120807-1

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

テンプレートを用意しました!

120807-2

プロフィール画像が丁度180pxになるように出来ています。こちらにお好きなようにはめ込んで、最終的にカバー画像だけを縮小すれば完璧!(な、はずw)

ダウンロード

中身はpsdファイルです。クレジット表記もバックリンクも要りません!お好きに使ってくださいー。

2014/6/26 追記

こちらのDLは終了しました。

使い方

プロフィール画像

120807-3

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

120807-4

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

120807-5

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

カバー画像

120807-6

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

120807-7

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

120807-8

これも、画質は7(中)でjpg保存しましょう!

それぞれアップロードして確認

いかがでしたでしょうか?たぶん大丈夫だと思うんですが…。お好きに微調整などしてみてくださいね!

また、facebookの仕様変更で画像サイズが今後変更されることも有りうるので、とりあえず2012/8/7現在ということにさせておいてください。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2012/08/07
更新日:2014/06/26


2件のコメント

  • luz
    2013年9月14日 10:40 PM

    テンプレート頂きましたm(_ _)m

    とっても見やすくて分かりやすくて

    「いいね!」です\(o⌒∇⌒o)/

    これからもちょくちょく覗かせてもらいます♪

     

    • *you
      2013年9月17日 9:20 AM

      luzさん、「いいね!」ありがとうございます!
      お役に立てて光栄ですー、またいらしてくださいね(*´∀`*)

コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top