Facebookページのカバー画像の設定で手間取ったので、テンプレート作りました

タイムライン

Facebookページのカバー画像の設定で手間取ったので、テンプレート作りました

バリスタ

に選定していただきました。✌('ω')✌

わかりにくい仕様やで、ほんま。

とうとうつかみました。

Facebookページのカバー写真のサイズを教えてください。 | Facebookヘルプセンター

Facebookページのプロフィール写真のサイズを教えてください。 | Facebookヘルプセンター

今まで何となくで設定していたんですが、これを機にいろいろ検証してみた結果、現時点でのテンプレートが完成しました。

【Facebook】思わず感心する、クリエイティブなタイムラインカバーデザイン – NAVER まとめ

こういうのでよく見る背景とプロフィールが連動しているカバーを作ろうとすると、一手間かかるのですが、その一手間をテンプレート可してみました。

設定のポイントは

カバー画像よりも、プロフィール画像の方にあって。

表示されるサイズは縦160px横160pxなんですが、書き出す時は縦180px横180pxで書き出さないといけないという、この微妙なズレにあります。

2013-5-10-01

実際表示されるのは赤い部分だけなんですが、書き出す時は青い部分まで必要と言うことです。

この切り抜かれる領域まで計算してカバー画像を作らないとダメだったんですね。

この自作のテンプレートを使って書き出した画像は以下です。

fbc01-01

fbc02-02

実際にこれらの画像を使って、Facebookページで設定した場合。

こういう表示になって、プロフィール用に書き出した画像の青い部分は切り抜かれてしまって表示されません。

IllustratorCS6のテンプレート

ということで、誰がつかうんやという感じですが、メモがてら張っておきますので、使えそうな人だけ使って下さい。

最後に書き出しのポイント

ヘルプにも載っているんですが、書き出しの形式はjpgよりもpng形式の方が綺麗みたいです。

この辺も忘れずに憶えておくといいかもしれませんね。

いやー、適当にやるとダメですね、ともかく、謎仕様に関してはつかむことが出来たので、誰かの役に立てば幸いです。

はい。

文:シンタロヲフレッシュ

一緒に読んで欲しい記事

前の記事(Previous)
DribbleにアップされたPSD形式でダウンロード出来る超上質データを集めたサイト「Psddd」が勉強になりすぎる!
次の記事(Next)
モック作りだけじゃなく、ブログのアイキャッチにも助かるiOS7のPSDデータがナイス!