Stripe Generator

デザインの仕事をしていると、

ストライプを使ったデザインをする機会が非常に多い事に気が付きます。
 

特に最近のWebサイトは、パーツデザインの一部にストライプを利用している

ことが多く見られます。

例えば・・・

セブンイレブン・ジャパン

左側の「トップページメニュー」のところにストライプを利用しています。

NTTドコモ

右下のローカルナビゲーションのところにストライプを利用しています。

トヨタ自動車

グローバルナビゲーションにストライプを利用しています。

Ken Schoolでも、グローバルナビゲーションやバナーなどに

ストライプを利用したデザインがあります。

デザインの中で多用されるストライプですが、

Photoshopで作ろうと思うと意外に手間がかかります。
 

そこで今回はストライプを作るのに非常に便利な

「Stripe Generator 2.0 beta」をご紹介します。

http://www.stripegenerator.com/

●Stripe Generatorの使い方

まずstripe sizeとspacingで線の「太さ」と「間隔」を決めます。

単位はピクセルです。

値を変更すると右側のpreviewに矢印が表示されます。

※クリックすると更新されます。

次にストライプの色を設定します。

今度はbackground style（単色かグラデーションを設定）、

shadow（ストライプの影）、background color(s)（背景の色）の設定をします。

最後にstripe orienationでストライプの方向を決定します。

好みのストライプが完成したら、downloadボタンを押し、

任意の場所に保存をしましょう。

今度はPhotoshopを立ち上げ、Stripe Generatorで作った画像を開きます。
 

小さな画像に保存されているので、「編集メニュー」→「パターンを定義」で

パターン登録し、ストライプを作りたい画像を選び「編集メニュー」→「塗りつぶし」で

パターンを作成してください。

ここから先は必要に応じてマスクをかけたり、

文字を書いたりなどしてデザインとして仕上げていきます。

今後はこのストライプを利用したデザインも紹介していこうと思います。

乞うご期待！

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでグラフィックデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html