今回は珍しくバナー画像の作り方の解説と素材の配布です。

先日、tenhp.comのトップのお問い合わせフォームへのバナーボタンを作りました。
元々、この箇所には（コンバーションを考慮し）簡易フォームをそのまま埋め込む予定でしたが、実装する段階になって場所が狭いため注意書きが書けないとかフォームが小さくなるといった問題があり、結局、公開のリミットに間に合わず、とりあえず「お問い合わせ」と文字リンクを入れて公開し、そのまま5年放置状態だったので、ようやく重い腰をあげた感じです。

バナーを作成するにあたって、まず思いついたのは蔦の絡まった木のボードに文字を書かれてるバナーです。
まず現在のサイトをキャプチャしFirefox上で適当に画像検索した蔦の絡まった木のボードの画像をあたりとして入れてみたがしっくり来ない。
（普段は手書きでラフを描いたりしますが、今回は後付けバナーなのでパソコン上でラフを描く感じで、今のデザインと合うかどうか見ながら作ります。）
そこで白い煉瓦に蔦の絡まるイメージに切り替えたが素材が見つからず作る事にした。

まず蔦のイメージは素材サイトで見つかったがツルがイメージと違うのと使用サイズが小さいので自分で描くことにした。

煉瓦は無料の素材サイトぱくたそにいいのが見つかった。
朽ちたレンガの壁（テクスチャー）
ついでにツタの葉っぱもぱくたそでダウンロードした。
雨に濡れる葉
ダウンロードした画像から葉っぱを2枚トレース（小さいので適当でOK）し、微妙にサイズと色を変更しながら配置する。この時「Firefoxで作らんとillustratorなら散布ブラシで楽なのに」とも思ったが手作業の方が微調整できるので仕上がりがいいと信じて葉っぱを植えていく。
煉瓦は適当なブロックでマスクして、バナーのタイトルはアイアンをくりぬいた感じにしてみた。

という事で本当は「蔦の絡まる煉瓦」の画像素材を配布しようと記事を書いたのですが、2次配布になるかもしれないので煉瓦を外したものを掲載しておきます。
PNGですがFireworksで制作した元データになります。この画像のライセンスはCC0としますのでご自由にお使いください。
蔦の絡まる画像素材