八王子〜多摩〜町田エリアのデザイン日記
八王子〜多摩〜相模原〜町田エリアで活動中のデザイン事務所
「グラッドワークス」の日常(と仕事)を書き綴るブログです。
<< May 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
<< ウェブ制作の大きな障害が無くなるかも?IEのアップグレード自動配信 | main | 某TV番組情報誌付きのダイレクトメール >>
PhotoshopによるFacebookタイムライン用カバー画像制作
うれしくもあり、悩むところでもある「カバー写真」
Facebookのタイムラインがスタートしました。すでに全世界で大勢のFacebookユーザーの皆さんが設定されています。自らの誕生から現在までを時系列で表示できてなかなか面白いのですが、問題はページトップに表示されることになる「カバー写真」をどうするか?これまでのプロフィール画像より遥かに広大な、幅850ピクセル×高さ315ピクセルの面積が使えてしまうのは、うれしくもあり、悩むところでもある訳で。
「デザインと写真撮影の合わせワザ」がグラッドワークスのウリだと思っているので、自分で撮影した画像をデザインして使う事に決めました。

以下、Photoshopによるカバー画像制作の工程です。
Photoshopを使っていない人には意味不明な単語が頻出しますがご了承くださいませ。m(_ _)m


まずは土台作り
まずは既にタイムラインを設定済の方の個人ページ画面をキャプチャさせていただいて、Photoshopで開き、画像部分を設定します。

カバー画像制作1.jpg

黄緑色の部分が問題の「カバー写真」部分です。
ガイドを引いて計測してみると、何度測っても、幅は851ピクセルある。。。850ピクセルじゃないのか?
左下のオレンジ色の部分は顔写真の入る部分です。1辺125ピクセルの正方形。白いフチの部分も含めて別レイヤーにしておきます。


デザイン開始
ちょうどクリスマスシーズンという事もあり、先日撮影して来た表参道イルミネーションの写真を配置しました。

カバー画像制作2.jpg

先ほど塗っておいた黄緑色のエリアを自動選択ツールで範囲指定してクイックマスクを作成。
画像とマスクのリンクを切っておけば画像のトリミングは自由に変更できます。トリミング位置が決定したらアンシャープマスクをかけてシャープネスを維持します。


画像下にひしめいているクルマは渋滞しているみたいでいまいちな印象なので、木目画像で隠して…

カバー画像制作3.jpg

クリスマスらしく、西欧風味な飾り罫でデコレーション。
スクリプト系のエレガントな書体を使用してメインの英文を書き込みます。


仕上げと書出し
イルミネーションの色に合わせて、文字に発光しているような効果を掛けます。

カバー画像制作4.jpg

周囲の飾り罫もくどくならない程度に少しだけシャドウを付けて立体的にしました。
背景のイルミネーション写真の色調も整えます。


カメラ(ニコンD700)の画像を切り抜いてから配置。こちらもアンシャープマスク掛けて、イルミネーションの色調に馴染むようにアンバー系の色調に補正。背景に埋没しないように少し発光の効果を掛けます。

カバー画像制作5.jpg

木目画像の上にも挨拶文を書き込み、こちらもシャドウ等の立体的な処理をかけます。
デザインの基本は「揃えること」なので、イルミネーションの電球色LEDの色に合わせ、全体をアンバー系の色調にまとめて行きます。


キャプションなどの文字を書き込んで、ひとまずデザインは完成です。

カバー画像制作6.jpg


完成したら、画像を切り出します。幅851ピクセル×高さ315ピクセルのスライスを切って、別レイヤーにしておいた顔写真の入る場所は非表示にして80%のjpg画像で書き出して完成…となります。

カバー画像制作7.jpg

サイズが公称値(?)と1ピクセル違うのが少々心配でしたが、全く問題なく使用できました。
クリスマスが過ぎたら多少アレンジして年内はこの画像を使う予定です。(^-^)

JUGEMテーマ:PC関連


ホームページ制作のグラッドワークス 写真撮影からデザインワークまでトータルサポート
手頃な料金で、美しく、分かりやすいウェブサイトを。「デザインと写真の合わせ技」による、本格的なクオリティのホームページをご提供致します。広告宣伝ツールのレベルアップをお考えの方は、ぜひご相談ください。
印刷物&ウェブデザインと写真撮影のグラッドワークス
Related Posts Plugin for WordPress, Blogger...
人気ブログランキング参加中です!
  • 人気ブログランキングへ
  • 人気ブログランキングへ