バナー画像を追加 サムネールからアップまで

お店の集客ツール活用支援をアピールするために
ホームページにバナー画像を追加しようと思う。
サムネールというのは頭の中に思いついたアイディアやレイアウトなどを
簡単に紙に書き留めたものです。

サムネール
サムネール

サムネールでだいたいこんな感じと決めておいて、あとは作りながら修正します。
イラストレーターで作り始めます。
サイズは940×300pxですからガイドラインを引いておきます。
左側に文字を入れ、右側に挿し絵を描いて入れていきます。ほとんどサムネールのままですね。

 
色を少し変更する事にしました。背景をロゴと同じ色に。黄色を入れて目立つように。並べて本当にこれでいいか比較検討します。

 

 

 

 

 

決まったデーターをPhotoshopに持っていき(コピー&ペースト)画像にします。Photoshopで940×300pxの新規画面を開いて、イラストレーターのデーターをコピペします。これをpng形式で保存すればホームページに張り込む画像ができ上がり。あとはhtmlを修正して画像と一緒にサーバーにアップ、ホバーなどの後処理を施せば終わりです。

画像ボタンにホバーを設定するCSS

こんなにカンタンとは思わなかったのでメモ。

html

<a href=”http://magic-design.org/html/about.html class menu”><img src=”../img/global_02.gif”></a>

css

a.menu:hover{

opacity:0.6;

filter:alpha(opacity=60);}

a.menu:hoverってのがみそでした。こんな使い方出来るんだ。面白いね。

Proudly powered by WordPress | テーマ: Baskerville 2 by Anders Noren

ページ先頭へ ↑