jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.5

斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。 まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。 ラインツールで 1px の「硬い線」を斜めに引きます。 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。 書き出しをすれば画像は完成です。 あとは、css で背景画像と背景色を同時に指定します。

[mitsuse]

背景に射線

[cu39]

汎用ストライプ

[idoya]

背景に写真を描く

[nibushibu]

CSSで色を帰られるストライプ画像の作り方。なるほどこれは便利です。

[aratako0]

斜線の背景の作り方。透過PNGをうまく使って、CSSのみで色合いを変更する。

[lomo_lomo]

斜線の背景画像の作り方

[s_tsu]

背景に写真を描く

[ulysses_powers]

Fireworksで透明斜線背景画像尾を作成