· 

同人サイトバナーの作り方(初心者向け)

自分でいろいろ試行錯誤して作ってみたので、

次回、作るときに忘れないように記事にしてみます(同人サイトバナーを初めて作る人向けです)。

 

同人サイト(イラストサイト等)バナーの標準サイズは200×40ピクセルです。

 

今回はこの200×40ピクセルのバナーを作ってみます。

※一口にバナーといっても用途によっていろいろサイズがあるので、自分が必要なサイズを調べてから作りましょう!

 

完成図↓

 

①バナーの元になる絵を用意しよう!

自分が描いた絵で使えるものがあったら、それを使うのが一番早いです。

私は、今までの絵のストックを探したのですが、バナーにぴったりなものがなかったので、

今回は新しく作ることにしました。

ペンタブ出して新しく絵を描くのが面倒(←)だったので、

今回はマウス一本で行きます。

  • MikuMikuDanceでモデルを適切な位置に配置・画像出力

 

画像の真ん中あたりしか使わないので、今回は顔周辺しかいじってません。

動画制作用のサイズ(854×480ピクセル)をそのまま出力しました。

※「ファイル→画像ファイルに出力」から画像出力できます。

 

②形を整えよう!

作った画像をバナーの比率に合わせて切り出します。

今回作るバナーサイズは200×40ピクセルより、横:縦=5:1す。

そこで、①の画像(854×480ピクセル)を、850×170ピクセルで切り出すことにします

私はMicrosoft Officeを切り出しにいつも使ってますが、

画像が切り抜ければソフトは何を使っても構いません。

 

1.「画像の編集」を選択

2.「トリミング」を選択


 

3. 適切なサイズ(今回は850×170ピクセル)に切り抜く

 

4. 完成!

せっかく表情作ったのに、この段階でほぼ隠れて残念。

ちなみにその後の作業で完全に隠れます…。

 

 


③バナーをデザインしよう!

絵を切り抜くだけではバナーとして味気ないので、枠と文字を入れて見栄えを良くします。

ここでは画像加工用のソフト(Photoshop Elements)を使います。

バナーの形式はgif・jpg・pngのいずれかを選んでください(今回はjpgで出力)。

1. Photoshop Elementsを起動

 

②で作った画像をそのまま起動すると画像が背景になっていて編集できないので、

まずは背景をレイヤー化します。

 

2. 背景のレイヤー化(「背景からレイヤーへ」を選択)

3. レイヤーをコピー(「レイヤーを複製」を選択)


 

4.「 スタイルエフェクト」の「レイヤースタイル」で「ネオン」を選択

 

コピーした最上段のレイヤーを枠にします。

「ダークブルー(オン)」を選択して青色の枠を付けました。

枠の中央は透明になるので、下に置いている元の画像が透けて見えます。

5. 「スタイルエフェクト」の「レイヤースタイル」で「光彩(内側)」を選択

 

太(ノイズ)を選択しました。青色の枠の内側に白い枠が付きました。

 

6. 文字を乗せる

i.「横書き文字ツール」を選択

ii. サイト名を打ち込む


 

文字はなるべく大きめの方が良いです。ここでは90ptにしました。

今は画像が大きいので文字は見やすいですが、このあと縮小するので見づらくなります。

色は後から調整できるので無難な白にしています。

 

7. 文字レイヤーを加工

i.「レイヤーを複製」を選択

ii.「レイヤーのラスタライズ」を選択(最上段レイヤー)


 

文字レイヤーのままだと細かい調整が出来ないので、加工可能な形式に変えます。

 

iii. 「スタイルエフェクト」の「レイヤースタイル」で「ネオン」を選択

 

下にある元の文字レイヤー(Tマーク)を隠します(目玉マークをクリックして消す)。

最上段のラスタライズされたレイヤーに加工を施します。

今回は「オレンジ(オン)」を選択しました。白かった文字にオレンジの枠が付きました。

更に、文字の大きさも微調整します。

 

8. 保存

i.「ファイル」→「別名で保存」を選択

ii. ファイル形式を選択(jpg・png)


 

保存形式はjpgかpng。私はjpgにしたけど、あとから色々なサイトを巡回したらpng派の方が多かった…。

 

④バナーの大きさを調整→完成!

最後にバナーの大きさを調整します。

ここまで来たらあと一息で完成です。頑張りましょう!

i.「画像の編集」を選択

ii.「サイズ変更」を選択


 

iii.「拡大または縮小率」を選択(1回目)

850×170ピクセル→400×80ピクセル

(元の大きさから47%に縮小)

 

iv. 「拡大または縮小率」を選択(2回目)

 

400×80ピクセル→200×40ピクセル

(更に半分に縮小)


 

今回は中途半端なサイズで作ってしまい、

一気に200×40ピクセルに縮小出来なかったので間に一段階挟んでいます。

 

完成です!お疲れ様でした!

そんなこんなで、私はこんな感じでバナーを作りました。

一から手作りしたい人の参考になればと思います。