Facebookのカバー画像を工夫する

以下の内容、具体的な数値などは最新のものではありません。いずれ更新します。

Facebook、ほんと、ころころと仕様や機能が変わってついていくのが大変なのですが、いつのまにか「タイムライン」なる時系列のイベント表示が標準になってしまったようですね。おまけに、タイトル部分の「カバー画像」なんてものも設定できるようになり、自分らしい「テーマ画像」を貼り付けろなんてことも言ってくるように。

これ、実際に貼ってみたのですが、大きなサイズの画像を設定すると適当にトリムされたうえ、さらに拡大されたみたいになってボケるし、かといって、ちょっと見た限りでは「サイズ＊＊なら綺麗に出ます」みたいな指示も無い。一体どうなってるんだ？と思ったら、こんな説明が見つかりました。

Facebookカバー画像を作る人のためのリンク集

http://arris.jp/blog/2011/12/19/facebook-cover/

で、この中にある、このサイトにPhotoshop用のテンプレートがありましたので、早速使ってみました。

Zuck Adds a Milestone to the Social Timeline

http://www.digitalsurgeons.com/blog/news/f8_facebook_timeline/

テンプレートファイルは、ページの下の方、「In the meantime..」と書かれた見出しの下に「put your cover image here.」という白地画像をクリックするとダウンロードできる、「fb_cover_template2.psd」です。私が持っているPhotoshop Elements 9で出来るファイルと同じ拡張子ですが、たぶんPhotoshop（Elementsじゃない）のものなんでしょうね。開けるかな？と思ってダブルクリックしたら、Photoshop Elementsで開けたのでそのまま作業を進めました。なお、ファイルに入っている文字のフォントが無いため、警告がでますがそのまま進めて問題ありません（どのみち文字データは使いませんから）。

以下では、実際にこれを使ってちょっと凝ったカバー画像を作ってみる手順を紹介します。なお、ツールとして上記のようにPhotoshop Elementsを利用しますが、このソフトの使い方や、レイヤーなどの考え方などについては説明しませんのであしからず。あくまで、ある程度こうしたツールを使ったことがある方を読み手として想定した上での内容になります。

Adobe Photoshop Elements 10 日本語版 Windows/Macintosh版 (Elements 11への無償アップグレード対象 2012/12/24まで)

[rakuten:goodwill:10172405:detail]

どんなのを目指すか

まず、どんなものを作るかをイメージしましょう。

カバー画像の左下には、アイコン画像がかぶるように配置されます。上記のリンク先にこの「カバー画像」と「アイコン」がつながったようになっているものがあったので、それを作ってみましょう。

もとにする画像はこれにします。左下に顔が来ているのがポイント。

できあがりはこんな感じを目指しましょう。

テンプレートをダウンロードして開く

ここからテンプレートファイルをダウンロードして、Photoshop Elementsで開いてください。ここでの操作は、Photoshop Elements 9で説明します（2012年1月時点での最新版はバージョン10です）。私自身、このソフトの使い方に習熟しているわけではないので、「もっと簡単にできるよ」とかあるかもしれませんがご容赦ください。

Zuck Adds a Milestone to the Social Timeline

http://www.digitalsurgeons.com/blog/news/f8_facebook_timeline/

テンプレートを開くとこんな感じになっています。

赤で囲った部分がカバー画像の描画エリア。グレーの部分はPhotoshop Elementsにおける背景になっており、白抜き（put your cover image here.と書かれた部分）がカンバスになります。カンバスサイズは高さ(height)314、幅(width)851ピクセルです。このサイズの画像をカバーに指定すれば、拡大縮小されることなく、そのままの画質でFacebookのプロフィールページに表示されるようです。

で、このテンプレートの左下にある、濃い水色の四角部分が、Facebookのプロフィール画面でアイコンが表示されるエリアです。テンプレートでは下が切れていますが、実際は縦横136ピクセルの正方形になります。

要するに、元画像のこの部分（濃い水色部分）を綺麗に切り出してアイコンにすれば、カバー画像とアイコンがつながったプロフィール画面を作れるわけです。

画像を当てはめてみる

では、テンプレートに画像を当てはめてみます。テンプレートは

• アイコン部分のマスクシェイプ
• 説明書き（Instructions）
• 描画レイヤー
• 背景

というレイヤー構成になっています。カバー画像として使いたい画像は、描画レイヤーに配置してください。説明書きレイヤーは邪魔なので非表示にしてしまってかまいません。
マスクシェイプ（濃い水色の四角があるレイヤー）も、画像の位置調整に邪魔であれば消してかまいません。テンプレートには、カンバスや中心線、アイコンエリアを表すために水色のガイド線が入れてありますので、別に最初からあるレイヤーを非表示にしても、作業には支障ありません。

実際に画像を当てはめると、こんな感じになります。

左下のアイコン部分、このテンプレートは最初から黄色のグローエフェクトがかかっていて、黄色に光る感じになっています。これが嫌な場合、シェイプを右クリックして表示されるメニューから「レイヤースタイルを編集」を選択し、下図の設定画面で輪郭の表現を指定してください（画像をはっきりさせるために、背景部分をグレーから黒に変えてあります）。

で、この画像をJPEG形式で保存します。保存は[ファイル]-[別名で保存]を選択し、JPEG形式を指定、画質とファイル名を指定して実施してください。出来た画像は、Facebookのカバーとしてアップロードします。

カバー画像を開いているPhotoshop Elementsは、次のアイコン作成で利用するのでそのままにしておいてください。

カバー画像に当てはまるアイコンを作る

次に、カバー画像からアイコンを作ります。先ほどのカバー画像を開いているPhotoshop Elementsで、左下のアイコン位置を表すシェイプのレイヤーを非表示にし、カンバスサイズを上辺を基点にして380〜400くらいまで広げてください。

カンバスサイズの設定変更は、[イメージ]-[サイズ変更]-[カンバスサイズ]で表示されるダイアログから行います。下図のように、「基準位置」の表示で上の矢印をクリックすると、「上辺から、高さとして指定した長さまで広げる/切り出す」という指定になります。その状態で、高さ表示の単位を「pixel」に切り替え、初期状態の314ピクセルを380か400くらいに変更し、OKを押してください。

カンバスサイズを広げると、こんな感じになります。

アイコン表示エリアとしてマスクされていた部分の下、背景として切られていた部分が見えました。

次に、アイコン表示エリアとなっていた左下の部分だけを切り出して、アイコン用の新しい画像として新しいカンバスに貼り付けます。アイコン表示エリアには水色のガイド線がありますので、それにそって範囲選択し、「切り取り」でカット、Ctrl+Nで新しい画像をつくってそこに貼り付ければOKです。このとき、なるべく縦に長めに切っておいてください（このあと、横幅に合わせてアイコン用画像をカットします）。

貼り付けた画像のカンバスサイズを、また上辺を基準にして「136ピクセル」にカットしてください。

これで、カバー画像の一部を切り出したアイコンの完成…と言いたいところですが、Facebookのなんだか判らない仕様のため、もう1手間手順が必要です。Facebookのアイコンは、実際に表示されるサイズは136ピクセル以下（実際は枠部分があるのでもう少し小さい）なのですが、アップロードする画像は1辺180ピクセル無いとエラーになるのです。従って、この縦横136ピクセルの画像を、180ピクセルに引き伸ばす必要があります。今度はカンバスではなく、[イメージ]-[サイズ変更]-[画像解像度]で表示されるダイアログを利用します。下図のように「縦横費を固定」にチェックを入れた状態で、「ピクセル数」の縦横を180に指定してください。

これで、アップロード可能＆カバー画像とフィットするアイコンの完成です。縦横180ピクセルの画像をJPEGとして保存して、アイコン画像としてアップロードしてください。

課題

この手順では以下の問題が残っています。

• 最終的にアイコンの拡大(手作業)と縮小(Facebook側で実施)が行われるため、画質的にあまりよろしくない。
• アイコン表示には実際は白い枠線が入ることから、テンプレートの水色ガイド線に沿って切り出すと数ピクセルの誤差が出る。

サンプルとして例示した画像は屋外の雑草が生えた斜面ですので、少々の誤差があってもあまり気になりませんが、シンプルな幾何学模様などの場合は、ズレが目立つかもしれません。このあたりは、枠線部分のサイズを測って切り出しを調整するなどの手間を掛ければなんとかクリア出来るかと思いますが、ここではそこまでの作業は割愛させていただきます。

Photoshop Elements 10 スーパーリファレンス for Windows & Macintosh