チュートリアル：photoshopで手軽にストライプ模様をつける方法

ホームページを作る人ならストライプを華麗に使いこなしている人もいます。
今回この記事によって、Web2.0っぽいストライブデザインをフォトショップのデザインの中に自由に使えるようになります。

あと上の参考画像。
よりによって筆者、水色ストライブを作ってしまってちょっとダサいので、作るときは皆さんのセンスでかっこいいデザインに仕上げてください・・・。

まずは以下のサイトからストライプ模様を手に入れましょう

まるで囲われた部分を同じようにしてみましょう。
Stripe Generator

慣れてくれば同じようにする必要なんてありません。
上のつまみが線の幅で２番目のつまみが線と線の間の幅を表しています。

※注意点はこれ

いざダウンロードしようとした時にこのメッセージが画面上部に現れます。
これを解除すると、今まで決めた設定が全てなくなります。

なので、一番最初にダウンロードボタンを押して、このメッセージが出てきたら解除。もう一度設定する事で２度目は正常にダウンロードできます。

ダウンロードした画像を開き、パターンの定義をする

ダウンロードしたpngファイルを開きます。


ファイルを開いたらそのまま編集→パターンを定義の順に選び、定義します。


今度は塗りつぶしツールにして、画面左上にある赤で囲われた部分をパターンにします。




パターンの種類に、今追加したストライプが入っています。


これを選ぶ事で今後塗りつぶすもの全てにストライプを使用することができるようになりました。

グラデーションにストライプ模様

レイヤーをつくり、グラデーションのかかった画像を作ります。
その上にレイヤーを新規作成して今定義されたパターンで塗りつぶします。



塗りつぶしたストライプレイヤーをいじると完成します。