デザインをもっと楽しく!WEBデザイナーの皆様にとって役に立つ情報をお届けいたします! おしゃれなボタンの作り方やテクスチャの使い方、制作関連のおすすめサイトなどの情報が満載! | フォトショッパーフォトショッパー

必見!登録しておくととにかく便利な「斜めストライプ」のパターン


デザインを引き締める斜めストライプ

単調になりがちなデザインを引き締める斜めストライプ

こんにちは、おぎしおです。
今日は登録しておくととにかく便利な「斜めストライプ」のパターンをご紹介したいと思います。
斜めのラインを引いたパターンは、バナーの背景に設定したり、キャンペーンページのボタンの上に載せたりと、単調になりがちなデザインを引き締める存在としてとっても重宝します。
ちなみに、当サイトの左カラム小見出しもこの「斜めストライプ」を設定しています!

パターンファイルを保存しよう!

今回の記事を書くにあたって、配布用のパターンファイルを作ってみました。
こちらからファイルを保存できます(※再配布はNGですが、それ以外の制約は特にありません)。保存したファイルをphotoshopで開くと、パターンが自動的に登録されます。
使い方はいたってシンプル。パターンファイルをphotoshopで開いて、レイヤーやパスを右クリックし、レイヤー効果→パターンオーバーレイでパターンを乗せるだけです。
とはいえ、せっかくなのでいくつか使用方法を掲載してみようと思います。

さっそくパターンファイルを使ってみよう

1,そのままのせる

一番シンプルな方法です。パターンをそのままシェイプの上にパターンを乗せるだけです。

シェイプを用意

まずはシェイプを用意します。角丸長方形ツールなどでお好みのサイズのシェイプを作成したら、シェイプレイヤーを右クリックします。シェイプのカラーは#14A5FFで設定してみました。

パターンオーバーレイを設定

次に、パターンオーバーレイを設定します。こちらのブログで配布中のパターン(stripes.pat)をphotoshopで開くと、パターンが自動的に保存されます。保存されたパターンを、パターンオーバーレイの画面で設定します。

パターンが設定されました

パターンが設定されました!

2,ラインを薄くしてのせる

パターンは#FFFFFFで作成しているので、少しコントラストが強いので、パターンを薄くして乗せてみましょう。

シェイプを用意

先ほどと同様、シェイプを用意します。パターンオーバーレイの設定を変更していきます。レイヤー効果→パターンオーバーレイで、保存されたパターンを設定し、パターンの不透明度を30%くらいに下げてみます。

背景になじんできます

ストライプが背景になじんできます。

3,違う色を乗せる

最後に、シェイプの色以外の色を乗せる方法です。
先ほどまでのように“シェイプに直接レイヤー効果を設定してストライプを表現する”ということができないので、斜めストライプをラスタライズする必要が出てきます。

シェイプを用意

シェイプを用意します。今回はシェイプの上にストライプのレイヤーを作りたいので、シェイプを複製します。上のシェイプの塗りを「0%」で設定します。

レイヤー効果を付けていきます

塗りを「0%」にしたシェイプにストライプのレイヤー効果を付けていきます。パターンオーバーレイでパターンを設定します。

シェイプをラスタライズ

パターンオーバーレイを設定したシェイプをラスタライズします。レイヤーを右クリックし「スマートオブジェクトに変換」をクリックし、次に「レイヤーをラスタライズ」をクリックします。

カラーを設定していきます

スマートオブジェクトに変換したレイヤーにカラーを設定していきます。
レイヤーを右クリック→レイヤー効果→カラーオーバーレイで色を設定します。今回は#A9FFA3で設定しました。

カラーが設定されました

斜めストライプにカラーが設定されました!

まとめ

いかがでしたでしょうか。今回配布したストライプのパターンは、いろんな場面で活躍する優れもののパターンファイルです。
また、今回は画像データでストライプを実現する方法をご紹介しましたが「ファイル容量を小さくしたいから、h2タグ下の背景にcssでストライプを実装したい」という方もいると思いますので、次回は「斜めストライプ」をcssで実装する方法をご紹介していこうと思います。
ぜひphotoshopでパターン登録してデザインに活用してみてくださいね!


Comment

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

新着