Web2.0 アプリケーションライク な背景画像を生成する Background Image Maker
http://lab.rails2u.com/bgmaker/
ウェブサイトのデザインをしているとき、自分はCSSを利用します。そのCSSを書いていて、「ああ、こんな背景画像がほしーな」と思うと、今までは画像編集ソフトでちまちま作ってSCPでサーバにアップして確認し「いやここはもうちょいこうした方が」とまた少しだけ修正してアップして…という繰り返し作業を行ってました。
しかしその作業単調が面倒になってきたため、簡単にWeb2.0っぽいアプリケーションでよく使わるような背景画像をWeb上から作成できるツール、「Background Image Maker」を作ってみました。下のような背景画像を簡単に作成ができます。また先日このページを現在のデザインにリニューアルしたのですが、今使っている背景画像も全部 Background Image Maker を使って作成してます。
使い方は値を適当に弄って「Make」ボタンを押すと画面右側に画像が作成されます。各オプションの意味はこんな感じ。
- Type
- 基本となる背景の種類。四パターンある。
- Margin
- 線を引く隙間。Gradationでは無効。
- LineColor, BackgroundColor
- 線と背景の色。Transparentにチェックを入れることで透過色にする。
- Size
- 大きさ。Autoで気に入らないサイズの場合に変更することを推奨
- Options
- Reverse 回転、反転など
好きな値を入れ「Make」を押すと右側が変更されます。URLには今生成した画像のURL、Imageには生成画像自体、Sample以下に背景画像として使ってみたサンプルが表示されます。また不正な値の場合はエラー画像が表示されます。
で、実際に生成されたURLを使いCSSに
background-image:url('http://lab.rails2u.com/bgmaker/slash.png?margin=3&linecolor=383838&bgcolor=000000');
などと指定すればOK。各種パラメータはURLのqueryを変更することで弄れるので、たとえばもっと間隔をあけたければmarginの値を増やしたり、線の色をちょっと変えたければlinecolorを弄ったり、といったことで行うことができます。
使ってみた感じ、自分で作っておいてなんですが、結構良い感じに背景画像が作成できます。好きなエディタでちょこちょこ値を変更して確認できるのも良いです。これでCSSでデザインしてる人がちょっとでも楽できて、より外観をクールにできたら良いですね。
！注意事項
この Backgrand Image Maker を使ってCSSを作る場合、好みの画像が完成したら最終的には自分のサーバに保存して使ってもらえるとうれしいです。たぶん問題ないと思うのですが、キャッシュを利用してるとはいえ一応動的生成なので、負荷が高くなるとサーバが落ちてしまうかもしれません。またよくrails2u.comのhttpdが落ちてるor落としてるので、画像が突然表示されなくなってしまう可能性もあります。
