『123RF』のようなサイトでは、高品質で商用利用もできる画像素材を購入することができます。絵が描けない人の強い味方です！
→【ヘッダーやメニューボタンにおすすめ】高品質・商用利用可能な画像素材を購入できる『123RF』の使い方。裏技的なお得な購入方法も発見！？（ギフトコードなど）
※素材を使用する時は、必ず利用規約を確認してください。特に、商用利用、クレジット、加工についてはよくご確認ください。
ダウンロードしてきた画像をそのまま使うと、他のユーザーと被る恐れがありますが、ちょっと手を加えるだけでもオリジナリティを出すことができます。
この記事では、参考までに、僕が画像素材をヘッダーに加工するまでの手順を公開します！
ヘッダー画像のメイキング
①ベースとなる画像素材を用意する。
今回は、先ほどご紹介した『123RF』の画像素材を利用します。
②お好みで色調補正する。
モニターによって色の見え方が違うので、複数のモニター（PCとスマホなど）でチェックすることをおすすめします。
参考：パソコンでは灰色、スマホでは黄色に見える！？ モニターごとに発色が違う問題
③元画像ではなく、２で色調補正した後の画像の、「色相」だけを変えたバージョンを作る。
※RGB（赤緑青のバランス）の色調補正ではなく、HSV（色相・彩度・明度のバランス）の色調補正を使うとよいです。HSVの中のHが色相です。
④２と３をグラデーションにした画像を作る。
やり方は、こちらの記事をご覧ください。
→無料ソフトで画像をだんだん透明になるグラデーションにする方法
昔の記事（「絵が描けなくてもOK！ ホームページのタイトルロゴとバナーの作り方」）でもグラデーションをおすすめしていましたが、グラデーションにしておけば何となくいい感じになって便利ですよ！
もちろん、グラデーションは必須ではありませんので、③④は飛ばしても構いません。
逆に、こだわるなら、いくつか作って⑤の後で比較してもいいでしょう。
僕も、このようにいくつかグラデーションを作り、透けさせて重ねたりして微調整しました。
（この画像の後、さらにもう１つ作って、最終的にはそれと重ねました）
⑤ヘッダー画像のサイズに合わせて、好きな部分を切り抜く。
※画像が大きければ、適当に縮小してから切り抜いてください。ただし、縦横比を変えると模様のバランスが崩れることがありますのでご注意ください。
※Twitterのヘッダー画像の推奨サイズは1500px×500px、YouTubeのチャンネルアートの推奨サイズは2560px×1440pxです。YouTubeの方は、これだと大きくて適合素材を探すのが大変かも知れません。その場合は、最小アップロードサイズの2048px×1152pxでもいいと思います。
※TwitterとYouTubeのヘッダーについては、画像の上下が自動的にトリミングされて見えなくなりますので、見せたい模様や文字は真ん中に来るようにしてください。
2018.02.16 追記
Twitterの上下トリミングの件と、ヘッダー画像を綺麗にUPする方法に関しては、別途詳しい記事を書きました。
→【配布あり】Twitterのヘッダーの「切れる部分」「アイコンで隠れる部分」が一目で分かる枠を作りました！ ヘッダーとアイコンを無劣化でUPする方法もご紹介！
※切り抜き方法はソフトによって違うので、お手数ですが各自お調べください。
僕は自作の「型」を使って切り抜いています。ここにUPしておきますので、ご自由にご利用ください。
⑥お好みで文字を入れる。
文字は、白い影をつけておくと、光っているみたいで綺麗になります。
また、若干透けさせると馴染みます。
実際にヘッダーを設定してみた
※スマホ版
◆YouTube
※スマホ版
◆ファンティア
※オリジナルヘッダー設定前
◆自分のサイト
※この画像については少し明るさを変えています。
※以前のヘッダー
HPのヘッダーについては、現在アンケート開催中です！
よろしければご回答ください。
【アンケート】Re:I本館PC版のヘッダー画像を変更しました。前のヘッダーの方が好きだったという方が多ければ戻しますので、よろしければアンケートにご回答ください。比較用画像はこのツイートにリプライの形でつけます。
－ 夢前 黎@BGM・SE・声の素材配布中！ (@Rei_Yumesaki) 2017年4月12日
スポンサーリンク
