Page 2 of 5 「共有ボタン」作成編
先ずは枠線と背景を作成します…
システム標準の画像ソフトで充分です…
当サイトの例ですので…お好きなサイズ、色でどうぞ…サンプルは2倍サイズです…
右端ボタン用
21x21 #c0c0c0 に 20x20 #f3f3f3 を重ねて保存
左端ボタン、挟まれるボタン用
21x21 #c0c0c0 に 20x19 #f3f3f3 を右寄せで重ねて保存
右端ボタンの背景が横 1px 狭くなりますが…
後でネガティブマージンを設定しなくて済むので気にしない方向で…
この2種類の画像を並べると枠線と背景になります…
次にボタンを設置したいソーシャルブックマークサイトの…
配布しているボタン画像を入手します…サイズは 16x16 です…
オリジナルアイコン配布サイトの画像を使う場合は著作権に注意してください…
ロールオーバーで画像を切り替えるためにマウス OFF 時の画像を作成します…
入手した画像を画像ソフトでグレースケール化して…
適宜カラーチェンジャーで色を調整します…
右端ボタンに配置するソーシャルブックマークサイトを決めて…
設置したいソーシャルブックマークサイト全てのマウス ON / OFF 個別画像を…
最初に作った枠線、背景画像の任意の位置に重ねて作成します…
「共有ボタン」全体の四隅を角丸にしたい場合は 21x21 の透過画像に…
右端ボタン、左端ボタンを重ねて…
背景消しゴムでそれぞれ右端、左端上下を 1px 四方消して保存して…
透過左端ボタン、透過なしの挟まれるボタン、透過右端ボタンの3種類を使います…
次項では画像をロールオーバーさせるための CSS Sprites を設定します…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿