webサイトのアイキャッチ画像の作り方 [Cool Web Window]

Top ＞ webコラム＞素敵なサイトを作るために＞ webサイトのアイキャッチ画像の作り方

webサイトのアイキャッチ画像の作り方

大きなサイズの画像を作成しているとき｢写真素材の横幅が足りなくて困った！｣
そんな経験はありませんか？私はよくあります。
そのようなときに便利な、写真素材をフルに生かすテクニックを紹介します。

一般的なwebサイトの横幅は大抵800px以上。それに合うような大きな写真は値段もかなりよいもので、なかなか手が出ませんよね。自身で撮った写真を使用する場合はよいのですが、なかなかイメージするものを撮れない場合もあります。

そこで、640pxの大きさの写真素材から、800pxのサイトの上部によくあるアイキャッチ画像をPhotoshopを使って作ってみたいと思います。

手元にウェディング用の写真があったので、これをゼクシィのサイトを参考に作り変えてみます。

シンプルウエディング特集-ゼクシィｎｅｔ

ちなみに使った写真はこちらです。

１．足りない部分は思い切って違う異なる色で塗りつぶす

これが一番手っ取り早いです。ないところは仕方がないので雰囲気に合った色で塗りつぶしてしまいましょう。一見無茶のようですがキャッチコピーを書く場合には有効です。

どんな色で塗りつぶしていいかわからない場合もあるでしょう。そのときは、写真の一部から色をピックアップするか、例にとった写真のように面積の大きい色がある場合はその色と相性のいい色を使います。といっても難しいので、自動に相性のいい色を選んでくれるツールを使います。

写真の一部から色をピックアップする場合は、写真からカラーパレットを作ってくれるツールが便利です。自動に作成されたカラーパレットから1色選んでみましょう。

また、1つの色と相性の色を選ぶツールは次のようなものがあります。

２．足りない部分を同系色で補う

足りない部分は、写真と同系色の背景で塗りつぶすという手もあります。その際、境界線がはっきりしてしまうので、ぼかすとしっくりしきます。ぼかし方は以下のとおり。

メニューパレットから｢グラデーションツール｣を選びます。
グラデーションエディタの｢描写色から透明に｣を選びます。
描写色を写真と同系色にしてグラデーションをかけます。一気にせず何度もしっくりするまでグラデーションを重ねます。

３．写真の一部を伸ばして補う

足りない部分を写真の一部を引き伸ばして埋めるという裏技もあります。ただし、これは結構テクニックというか慣れが必要でもあります。

引き伸ばしたい部分を選択ツールで選んでコピーし、画像を引き伸ばします。本来なら下図のように水平に引き伸ばせばよいのですが、この写真の場合、背景の遠近がはっきりしているため、水平に引き伸ばしたら不自然に見えてしまいます。

よって下図のように｢編集→変形→自由な形に｣でうまく遠近感を出します。
このままでは境界線がくっきりしすぎているので、引き伸ばした画像にレイヤーマスクをかけ、境界線部分にグラデーションをかけます。黒色を描画色、白色を背景色に設定して、下図の矢印のようにカーソルを移動させてグラデをかけます。マスクは黒い色が見えず、白色が見えるようになります。
以上のことでも十分なのですが、さらにしっくりさせるために、引き伸ばした画像の一番端の色を選択して、端から内側に対してグラデーションをかけます。レイヤーマスクを使ってもよいですし、透明グラデを使ってもよいです。下図では透明グラデで矢印のように茶色から透明にグラデーションをかけています。

４．写真を複数使う

写真を数枚並べて統一感のある画像にしてみましょう。手持ちの写真をいろいろ重ねてみましょう。このあたりはインスピレーションです（笑）。

５．写真を切り取る

例えば人物の写真を使用する際に、人はきちんと収まるのだけど背景がどうしても横幅に足りないという場合なら、いっそのこと人物だけ切り取ってしまいましょう。画像の切り取りはPhotoshopを使用する場合、様々な方法があるのですが、私は基本的に｢パスツール｣で切り取ります。パスツールで人物の輪郭を丁寧にトレースします。正直すごく面倒なのですが一番きれいに切り取ることができます。面倒くさがらず丁寧にすることが大切です。

あとはいろいろコラージュなどしてみるのも楽しいです。