<span class="mt-enclosure mt-enclosure-image" /><img alt="グラデ背景画像を生成してくれる「Gradcolor」" src="http://web-marketing.zako.org/images/Gradcolor.jpg" width="514" height="204" style="" /></span><p>自分のサイトをちょちょっと作りたいとき、背景画像やヘッダー画像にグラデをかけたいけど、フォトショップを使いこなすのは面倒だ。そんな方も多いのでは？</p><p>そんな人に便利そうなのが今回ご紹介する、サイトの背景画像に最適なグラデーション画像ジェネレーターです。</p>

<!--more-->
<h3 class="header-label">グラデーションの背景画像を作成する「Gradcolor」</h3>
<p>「<a class="web-site-link" href="http://gradcolor.com/" onclick="window.open('http://gradcolor.com/'); return false;">GRADCOLOR</a>」は、<strong>指定したサイズと色のグラデーション画像を作成してくれる</strong>サービス。最大3色までのグラデーションを作成することが可能です。</p>

<h4 class="header-label">「Gradcolor」の特徴</h4>
<ul>
<li>背景画像に最適なグラデーション画像を作成</li>
<li>背景指定用のCSSも同時に作成</li>
<li>背景指定時のプレビューも可能</li>
</ul>
<dl class="head-line">
<dt>設定画面</dt>
<dd><a rel="nofollow facebox" href="http://lh5.ggpht.com/_fRSz8mJZTZY/SX25cCLvLdI/AAAAAAAARHI/Sck96j40un8/s800/gradcolor-1.jpg"><img src="http://lh5.ggpht.com/_fRSz8mJZTZY/SX25cCLvLdI/AAAAAAAARHI/Sck96j40un8/s400/gradcolor-1.jpg" /></a></dd>
<dd>↑1画面で色合いや幅と高さ、グラデーションの向き、横リピートか縦横リピートを設定できます。</dd>
<dt>画像とCSSを作成</dt>
<dd> <a rel="nofollow facebox" href="http://lh6.ggpht.com/_fRSz8mJZTZY/SX262HTYXvI/AAAAAAAARHo/25v5JvdPLTc/s800/gradcolor-2.jpg"><img src="http://lh6.ggpht.com/_fRSz8mJZTZY/SX262HTYXvI/AAAAAAAARHo/25v5JvdPLTc/s400/gradcolor-2.jpg" /></a></dd>
<dd> ↑画像とともにCSSも作成されるので便利です。</dd>
<dt>背景画像設定時のプレビュー画面</dt>
<dd> <a rel="nofollow facebox" href="http://lh3.ggpht.com/_fRSz8mJZTZY/SX27uOSZD8I/AAAAAAAARII/3_3nzfC3zlc/s800/%E5%85%A8%E7%94%BB%E9%9D%A2%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%2020090126%20223302.jpg"><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/SX27uOSZD8I/AAAAAAAARII/3_3nzfC3zlc/s400/%E5%85%A8%E7%94%BB%E9%9D%A2%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%2020090126%20223302.jpg" /></a></dd>
<dd> 「CLICK HERE TO SEE IT ON FULL SCREEN (repeat effect)」のリンクをクリックすると、背景指定時のプレビューを確認することができます。</dd>
<dt>サンプルグラデーション集</dt>
<dd> <a rel="nofollow facebox" href="http://lh4.ggpht.com/_fRSz8mJZTZY/SX28dMves8I/AAAAAAAARIo/l9LKXt-rHG8/s800/%E5%85%A8%E7%94%BB%E9%9D%A2%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%2020090126%20223629.jpg"><img src="http://lh4.ggpht.com/_fRSz8mJZTZY/SX28dMves8I/AAAAAAAARIo/l9LKXt-rHG8/s400/%E5%85%A8%E7%94%BB%E9%9D%A2%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%2020090126%20223629.jpg" /></a></dd>
<dd> サンプルをそのまま使用することも可能。サンプル集ページは→<a class="web-site-link" href="http://gradcolor.com/?seeallpictures=yes" onclick="window.open('http://gradcolor.com/?seeallpictures=yes'); return false;">Gradient color creator - GRADCOLOR</a></dd>
</dl><p>興味のある方は<a class="web-site-link" href="http://gradcolor.com/" onclick="window.open('http://gradcolor.com/'); return false;">GRADCOLOR</a>へどうぞ。</p><p>シンプルだけど、WEB2.0調のストライプを作成するものはあれど、グラデーションってあまりなかったですね。 最近は背景画像がシンプルなグラデーションになっている傾向にあるようなので、重宝しそうです。</p><p>リピート効果のCSSも一緒に出してくれるのもポイント。CSSに慣れていなくても横リピートなんかがカンタンに設定できて便利ですよね。</p><p>Via:<a class="web-site-link" href="http://delicious.com/url/f2231b4fa8d80735ce85f8c1c7f8e030" onclick="window.open('http://delicious.com/url/f2231b4fa8d80735ce85f8c1c7f8e030'); return false;">Delicious</a></p>