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

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

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

icons-ai

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

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

StripeGenerator00

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

StripeGenerator01

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

サイト名:
Stripe Generator
サイトリンク:

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

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」のチェックをはずすと実際の保存サイズで表示させたりも可能です。

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です