ホームページを作る人のネタ帳

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

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

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

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


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

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

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

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

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


ダウンロードしたpngファイルを開きます。
パターンの定義:フォトショップ

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

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

パターン

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

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

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


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

014.jpg

塗りつぶしたストライプレイヤーをいじると完成します。
@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply