こんにちはハカセです。
本日は「すごいバナー」の作り方をご紹介します。

随分久しぶりの更新ですが、その辺は置いといて話を進めます。

何がすごいかは良く分かりませんが、

とりあえずインパクトはあるかな…。

デモ

Photoshopでバナーの画像を作る

いきなりですがPhotoshopで実際のバナーの素材を作っていきます。

新規書類 今回は300ピクセル×300ピクセルで作ります。

背景は黒にしておきます。

楕円形ツールで丸を作って中央に配置。

パスを複製して通常のパスを作る

何のこっちゃわからないかも知れませんが後の工程で必要になるパスを作ります。
パスウインドウでパスを複製してシェイプから通常のパスを作ります。

パスを元に炎の元になる円を描く

新規レイヤーを作って、そのレイヤーが選択された状態でパスも選択し、
ブラシツールを選びます。

ブラシサイズ40px硬さ0流量20%で赤っぽい色を選んで
パスウインドウ下部の赤丸の部分をクリック。
そうすると選んだブラシでパスに沿って線が描かれます。

次にブラシサイズを小さめにして（20px位？）
オレンジっぽい色を選び再度線を描きます。

さらに小さめのブラシサイズにして今度は黄色、
更に小さくして白と線を描きます。

出来上がったのはこんな感じ

指先ツールで炎を描いていく

今度は指先ツールを選択して強さを大きさ15px、
70％位にして先ほど描いた線を ニュイっとこすります。

ニュイニュイこすると何かいい感じに炎っぽくなりました。

うまくいくまで何度か繰り返しても良いですが、
細かいことは気にせずとりあえず良しとします。

バナーの本体を作る

次は最初に作った円形を利用して、グラデと光彩の
レイヤー効果を加えてバナーのベースを作ります。

ここまで出来たらあとはテキストを打ち込んで、
レイアウト調整と若干のドロップシャドウでちょっとだけそれっぽくします。

これでバナーのデザインは完成しました。このまま使っても良いですが
それでは「すごいバナー」ではありませんので、ここからが本番です。

出来た画像をパーツごとに書き出す

まずは画像の書き出しなのですが、後の炎とバナー本体を別々に書き出すので、
「画像アセット」っていう機能を使います。

まずはバナー本体のレイヤーをグループ化。
レイヤーウィンドウで選択して（ctrl+クリックで複数選択出来ます）
ctrl+Gでグループ化出来ます。

グループ名をcircle.pngとします。
これがこのまま書き出されるファイル名になるので、
半角英数で入力して下さい。

今度は炎部分のレイヤーの名前をfire.pngに変更します。

変更し終わったら、ファイル→生成→画像アセットを選択します。

Photoshopの書類自体も保存して、保存した場所を見てみて下さい。
「保存した名前-assets」ってフォルダが出来ているはずです。

その中にfire.pngとcircle.pngが出来ています。ちょー便利！

でもこのままだと書きだされた画像のサイズが違っていて
ピッタリ重ねるのに微調整が必要になり、超面倒くさいです。

なので両方の画像を書類サイズと同じにしちゃいましょう。
circle.pngのレイヤーフォルダを選んでctrl+Aで全てを選択、
レイヤーウィンドウ下部の赤丸部分をクリックしてマスクを追加します。

同様にfire.pngにもマスクを追加しましょう。

書類を保存したら先ほどの「保存した名前-assets」を確認してみましょう。 なんということでしょう画像のサイズが300px×300pxになっているでは無いですか。
これで位置調整が楽になりました。

これで準備は整いました。次はHTMLとCSSです。

HTMLとCSSでバナーに動きを与える

HTMLはシンプル

<div id="sugoban">
<img id="fire" src="fire.png">
<a href=""><img id="circle" src="circle.png"></a>
<!-- /#sugoban -->
</div>

HTMLはこれだけ、sugobanというIDのdiv要素の中に画像を2つとも読み込んで、
circle.pngの方にリンクを貼ります。

CSSはtransformとkeyframesを使う

@-webkit-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes spin {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#sugo_box {
background: #000;
}

#sugoban {
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
}
#sugoban #fire, #sugoban #circle {
position: absolute;
}
#sugoban #fire {
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
#sugoban #circle:hover {
-webkit-animation: spin 0.5s linear infinite;
-moz-animation: spin 0.5s linear infinite;
animation: spin 0.5s linear infinite;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}

CSSはちょっと複雑で、transform: rotateってのを使って回転させて、
keyframesってのを使ってアニメーションさせてます。

-360degの部分の-を取ると時計回りになります。

ブラウザごとの設定をするベンダープレフィックスってのをつけてるので 同じ様な記述が並んで長くなってますが、色んなブラウザに対応するために仕方がないのです…

背景は黒のほうが映えるので、bodyに背景黒を指定していますがお好みで。

どうです？すごいでしょ？

CSSを使用していますし、PNGで書き出す事が前提なので、楽天の店舗で使用する際はGOLDの利用が必須となりますが、とりあえずインパクトが欲しいセール時などに使ってみてはいかがでしょうか。

とりあえず現場からは以上です。