digilog.blog

スポンサーサイト

--/--/--(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ストライプ画像ジェネレータを実際に使ってみた

2008/01/24(木)
Stripe Generatorイメージ
既に色んなところで紹介されているが、このブログの素材を作るにあたって、エントリータイトルの背景画像をこのサイトで作ってみたので、実際の使用感や操作法を書いておこうと思います。
誰でも簡単にストライプ画像が作れる

使ったサイトはこちら
Stripegenerator.com

まずトップページにアクセスすると、いきなり色々といじれそうなパラメータが登場する。
以下は実際にストライプ柄の背景を作った時の流れ。

stripe size
これは、その名の通り『シマシマ』の幅を決めるパラメーター。1=1pxになる。
(stripe sizeは5に設定)

spacing
次はコレ。こっちもその名の通り、スペースの間隔をどのくらい空けるかを決めるもの。
(spacingは3に設定)

stripe color(s)
続いて『シマシマの色』を決定する。何故(s)が付いているかというと、[add color]をクリックすると色を追加出来るからだ。追加した色の横には[remove]というリンクが現れ、いらなくなったら消去する事が出来る。
例えば、背景色を白にして、【stripe color(s)】に赤と青の二色を設定すると、『赤→白→青→白→赤…』というような理髪店の看板みたいなストライプが出来上がる。この機能によって、複雑なパターンのストライプを作り出す事が出来る。
(今回はシンプルに一色にしました。カラーコードは[#ccccff])

background style
次は、ストライプ柄の【spacing】の部分の塗り方の設定が出来る。塗りつぶしたり、グラデーションにしたり出来る。
(今回は塗り潰しを指定しました)

shadow
そしてこれは、ストライプに影を付けてくれる機能!痒いところに手が届く機能ですな!
(残念ながら今回は使わなかったので0)

background color(s)
ここで背景色(シマシマじゃない方の色)を設定する。ここにも(s)が出て来るのだが。これは、【background style】でグラデーションを選んだ場合に、何色から何色に変化するのかを決められるためだ。
(今回は初期設定のまま白一色。カラーコード[#ffffff])

stripe orientation
まぁ画像を見ていただくと分かる通り、どんな感じでストライプを表示するかを決める事が出来る。

リロード
ある程度設定が出来たら、画像をリロードしてみましょう。
この生成されたストラプ画像をクリックすると、今設定されているパラメータの通りに表示されるので、気に入るまで何度も微調整していきましょう!
気に入ったストライプ柄が完成したら、【download】ボタンをクリックします。画像ファイルを直接入手することが出来るので、これをデスクトップか何処かに保存して、自分のサーバーにアップすればOK!


このサービスの良い所は、登録や煩わしい操作を一切せずに、誰でも簡単にストライプ画像を作れる点。そして、たかがシマシマ模様だろと思っていたストライプ柄も、簡単な操作で細かい設定が出来るおかげで、思いがけずに格好いいパターンが出来上がってしまう点でしょう。
ストライプ柄サンプル
こんなのも作ってみた!

ホームページの素材作りに活躍しそうなサイトでした。
■コメント
コメント投稿
URL:
コメント:
PASS:
秘密: 管理人のみに公開
 

プロフィール

管理人:LOSTMAN
東京でWebディレクターをやっています。独学で楽しみながら興味のあることを投稿していきます。

タグキーワード

関連サイト

HTML講座
CSS講座
SEO講座
無料素材・画像
HOME
[ FC2 ID ]
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。