FireworksでWeb2.0デザインしてみる – Part.5
斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。
-
まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。
-
ラインツールで 1px の「硬い線」を斜めに引きます。
-
最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。
-
書き出しをすれば画像は完成です。
あとは、css で背景画像と背景色を同時に指定します。
body { background: #ccc url(/img/stripes.gif); }
斜線の線を変えたい場合は、css の背景色を変えるだけでOK（サンプルページ）。この透過GIF を作っておくだけでいろいろ使いまわせます。とっても便利！
Lucky bag::blog: 背景画像に使える透過 GIF では斜線以外に市松模様やストライプの透過GIF画像が入手できます。いろいろなパターンに応用できそうですね。
About this entry
No Trackbacks
trackback uri:コメントやトラックバックは承認待ちになる場合がありますので、すぐに反映されない場合はしばらくお待ちください。