背景や、バナー、ボタンデザインにさりげなく使われているピンストライプってよくありますよね。
けどストライプの色や太さを変えていちいちシームレスのパターンやスウォッチを作るのは結構手間です。
オススメのストライプジェネレーターを紹介します。
単色のストライプはもちろん、
複数色のストライプ（需要は少ないかもしれませんが）も簡単に作れ、
WEB素材としてすぐに使える画像形式でダウンロードできます。
- サイト名：
- Stripe Generator
- サイトリンク：
- [browser-shot width=”600″ url=”http://www.stripegenerator.com/”]
目次
ストライプジェネレーターの使い方
ストライプ・余白の幅を調整
Stripe size と spacing を調整すると、右のプレビューに矢印アイコンが出るので、クリックすると再読み込みでデザインに反映されます。
これは他の数値を調整した後も同じことなので、いちいちクリックするのは面倒と言えば面倒ですが。
stripe color(s) ストライプの色を追加
ちょっとテキストが小さいのでわかりにくいですが、add color で色を追加でき、removeで追加した色を削除できます。この部分で、複数色のストライプを作ることができるんですね。
background style 背景やシャドウの設定
ストライプにシャドウを加えたり、背景をグラデーションにすることもできます。
※背景をグラデにするとちょっとややこしいですし、再利用しづらいですね。
１．シンプルなストライプを作って画像をダウンロード
２．イラレならスウォッチに追加・フォトショならパターンを定義するなどして、デザインに使う
３．グラデーションはイラレのアプアランスやフォトショ等、別レイヤーで加える
とした方が、自由度が高いと思います。
background color 背景色の変更
background color(s)で背景色を変更します。
(s)なのは、背景をグラデーションにすると２色選択できるようになるからです。
stripe orientation ストライプの角度を変更
ストライプの角度も変更できるのはすごいですね。これ、自分で作ろうと思ったらけっこう面倒！
他の人が作ったパターンを参考にする
Your Stripes のタブをクリックすると、色んな人が作ったストライプを参考にできます！
ダウンロード
「ダウンロード」をクリックすると、作ったストライプ画像をPNG形式でダウンロードすることができます。
他にも、
「open fullscreen preview」で全画面表示を確認できたり、「Tiled」のチェックをはずすと実際の保存サイズで表示させたりも可能です。
ちなみに、僕はボタンやバナー画像を作るときは白黒で作って、フォトショやイラレで透明度を変えたり、乗算・スクリーンにして使ったりしています。
そうすると色の微調整をフォトショ・イラレで行えるのでいちいちジェネレーターでストライプを作り直す必要もありませんからね！ご参考までに！