FireworksでWeb2.0デザインしてみる – Part.5

斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。

  1. まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。

  2. ラインツールで 1px の「硬い線」を斜めに引きます。

    stripes1.gif

  3. 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。

    stripes2.png

  4. 書き出しをすれば画像は完成です。

    stripes3.gif

あとは、css で背景画像と背景色を同時に指定します。

[cc lang="css"]
body { background: #ccc url(/img/stripes.gif); }
[/cc]

斜線の線を変えたい場合は、css の背景色を変えるだけでOK(サンプルページ)。この透過GIF を作っておくだけでいろいろ使いまわせます。とっても便利!

Lucky bag::blog: 背景画像に使える透過 GIF では斜線以外に市松模様やストライプの透過GIF画像が入手できます。いろいろなパターンに応用できそうですね。

FireworksでWeb2.0デザインしてみる – Part.5」への2件のフィードバック

  1. JL

    1~5読ませていただきました!
    今ウェブサイトを作っているのですが
    なかなか参考になるサイトも少ない中で、まさにど真ん中な情報ありがとうございます!!

    (正直めちゃくちゃ感動して、ボタン押しまくりましたが、スパムではないことを願いつつ・・・汗)

    返信
  2. jimbo 投稿作成者

    >JLさん
    お役に立ててこちらとしてもうれしい限りです。
    素敵なサイトを作ってくださいね!

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>