【ヘッダー画像メイキング】画像素材を加工して、いい感じのヘッダーを作ろう!(Twitter、YouTube、HP等)
2017年04月15日

【ヘッダー画像メイキング】画像素材を加工して、いい感じのヘッダーを作ろう!(Twitter、YouTube、HP等)

自分のホームページにしても、TwitterやYouTubeなどの自分のアカウントが持てるサイトにしても、印象に残るヘッダー画像を設定することができれば、集客やブランディングの一助になるでしょう。

123RF』のようなサイトでは、高品質で商用利用もできる画像素材を購入することができます。絵が描けない人の強い味方です!

【ヘッダーやメニューボタンにおすすめ】高品質・商用利用可能な画像素材を購入できる『123RF』の使い方。裏技的なお得な購入方法も発見!?(ギフトコードなど)

※素材を使用する時は、必ず利用規約を確認してください。特に、商用利用、クレジット、加工についてはよくご確認ください。

ダウンロードしてきた画像をそのまま使うと、他のユーザーと被る恐れがありますが、ちょっと手を加えるだけでもオリジナリティを出すことができます。
この記事では、参考までに、僕が画像素材をヘッダーに加工するまでの手順を公開します!


ヘッダー画像のメイキング


@ベースとなる画像素材を用意する。


20170415-header-01.jpg

今回は、先ほどご紹介した『123RF』の画像素材を利用します。


Aお好みで色調補正する。


20170415-header-02.jpg

モニターによって色の見え方が違うので、複数のモニター(PCとスマホなど)でチェックすることをおすすめします。

参考:パソコンでは灰色、スマホでは黄色に見える!? モニターごとに発色が違う問題


B元画像ではなく、2で色調補正した後の画像の、「色相」だけを変えたバージョンを作る。


20170415-header-03.jpg

※RGB(赤緑青のバランス)の色調補正ではなく、HSV(色相・彩度・明度のバランス)の色調補正を使うとよいです。HSVの中のHが色相です。


C2と3をグラデーションにした画像を作る。


20170415-header-04.jpg

やり方は、こちらの記事をご覧ください。
無料ソフトで画像をだんだん透明になるグラデーションにする方法

昔の記事(「絵が描けなくてもOK! ホームページのタイトルロゴとバナーの作り方」)でもグラデーションをおすすめしていましたが、グラデーションにしておけば何となくいい感じになって便利ですよ!

もちろん、グラデーションは必須ではありませんので、BCは飛ばしても構いません。
逆に、こだわるなら、いくつか作ってDの後で比較してもいいでしょう。

僕も、このようにいくつかグラデーションを作り、透けさせて重ねたりして微調整しました。

20170415-header-05.jpg
(この画像の後、さらにもう1つ作って、最終的にはそれと重ねました)


Dヘッダー画像のサイズに合わせて、好きな部分を切り抜く。


20170415-header-06.jpg

※画像が大きければ、適当に縮小してから切り抜いてください。ただし、縦横比を変えると模様のバランスが崩れることがありますのでご注意ください。

※Twitterのヘッダー画像の推奨サイズは1500px×500px、YouTubeのチャンネルアートの推奨サイズは2560px×1440pxです。YouTubeの方は、これだと大きくて適合素材を探すのが大変かも知れません。その場合は、最小アップロードサイズの2048px×1152pxでもいいと思います。

※TwitterとYouTubeのヘッダーについては、画像の上下が自動的にトリミングされて見えなくなりますので、見せたい模様や文字は真ん中に来るようにしてください。

※切り抜き方法はソフトによって違うので、お手数ですが各自お調べください。
僕は自作の「型」を使って切り抜いています。ここにUPしておきますので、ご自由にご利用ください。

1500×500(Twitter用)
20170415-header-07-1500-500.png

2048×1152(YouTube用)
20170415-header-08-2048-1152.png

850×190(HPのヘッダー用)
20170415-header-09-850-190.png


Eお好みで文字を入れる。


20170415-header-10-logo1.jpg

文字は、白い影をつけておくと、光っているみたいで綺麗になります。
また、若干透けさせると馴染みます。


実際にヘッダーを設定してみた


◆Twitter
20170415-header-12-Twitter.jpg

※スマホ版
20170415-header-13-Twitter-s.jpg


◆YouTube
20170415-header-14-YouTube.jpg

※スマホ版
20170415-header-15-YouTube-s.jpg


◆ファンティア
20170415-header-16-Fantia.jpg

※オリジナルヘッダー設定前
20170415-header-17-Fantia-p.jpg


◆自分のサイト
20170415-header-18-HP.png

※Jimdoの仕様なのか、PNG画像をヘッダーにしたら少し元画像よりも暗く表示されることに気づいたので、この画像については少し明るさを変えています。

※以前のヘッダー
20170415-header-19-HP-p.png


HPのヘッダーについては、現在アンケート開催中です!
よろしければご回答ください。
スポンサーリンク
【ヘッダー画像メイキング】画像素材を加工して、いい感じのヘッダーを作ろう!(Twitter、YouTube、HP等)
先月の人気記事 TOP5