ストライプ素材の新しい作り方。素敵だけど作るのは以外に面倒!ジェネレーターで作ってダウンロード!そのままサイト制作にも使用できます!

背景や、バナー、ボタンデザインにさりげなく使われているピンストライプってよくありますよね。

けどストライプの色や太さを変えていちいちシームレスのパターンやスウォッチを作るのは結構手間です。

icons-ai

オススメのストライプジェネレーターを紹介します。

単色のストライプはもちろん、

StripeGenerator00

複数色のストライプ(需要は少ないかもしれませんが)も簡単に作れ、

StripeGenerator01

WEB素材としてすぐに使える画像形式でダウンロードできます。

サイト名:
Stripe Generator
サイトリンク:
http://www.stripegenerator.com/

ストライプジェネレーターの使い方

StripeGenerator02

ストライプ・余白の幅を調整

StripeGenerator03

Stripe size と spacing を調整すると、右のプレビューに矢印アイコンが出るので、クリックすると再読み込みでデザインに反映されます。
これは他の数値を調整した後も同じことなので、いちいちクリックするのは面倒と言えば面倒ですが。

StripeGenerator04

stripe color(s) ストライプの色を追加

StripeGenerator05

ちょっとテキストが小さいのでわかりにくいですが、add color で色を追加でき、removeで追加した色を削除できます。この部分で、複数色のストライプを作ることができるんですね。

background style 背景やシャドウの設定

StripeGenerator06

ストライプにシャドウを加えたり、背景をグラデーションにすることもできます。
※背景をグラデにするとちょっとややこしいですし、再利用しづらいですね。

1.シンプルなストライプを作って画像をダウンロード
2.イラレならスウォッチに追加・フォトショならパターンを定義するなどして、デザインに使う
3.グラデーションはイラレのアプアランスやフォトショ等、別レイヤーで加える

とした方が、自由度が高いと思います。

background color 背景色の変更

StripeGenerator07

background color(s)で背景色を変更します。
(s)なのは、背景をグラデーションにすると2色選択できるようになるからです。

stripe orientation ストライプの角度を変更

ストライプの角度も変更できるのはすごいですね。これ、自分で作ろうと思ったらけっこう面倒!

StripeGenerator08

他の人が作ったパターンを参考にする

StripeGenerator09

Your Stripes のタブをクリックすると、色んな人が作ったストライプを参考にできます!

ダウンロード

StripeGenerator10

「ダウンロード」をクリックすると、作ったストライプ画像をPNG形式でダウンロードすることができます。

他にも、
「open fullscreen preview」で全画面表示を確認できたり、「Tiled」のチェックをはずすと実際の保存サイズで表示させたりも可能です。

ちなみに、僕はボタンやバナー画像を作るときは白黒で作って、フォトショやイラレで透明度を変えたり、乗算・スクリーンにして使ったりしています。

そうすると色の微調整をフォトショ・イラレで行えるのでいちいちジェネレーターでストライプを作り直す必要もありませんからね!ご参考までに!

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • 具体的なエラー画面などがある場合は画像を添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)