【Photoshop】WEBデザインで簡単に質感が出せる、便利な背景パターンの作成方法・1

「パターンオーバーレイ」で簡単に、WEBデザインに質感を出して豪華にしよう!

WEBデザインをしていると、背景テクスチャなどの質感を出したい時があります。そんな時に便利なのが、「Photoshop」にある機能の「レイヤースタイル:パターンオーバーレイ」ですね。この便利な「パターンオーバーレイ」の使い方をご紹介したいと思います。

【Photoshop】WEBデザインで簡単に質感が出せる、便利な背景パターンの作成方法・1

「パターンオーバーレイ」の使い方

1)イラストやベタ地、シェイプなどのレイヤーで、右クリックで「レイヤー効果」を開きます。(図ではブラシで塗ったものになります)

057-pattern-flow01

2)「パターンオーバーレイ」を選択します。

057-pattern-flow01

3)「パターン」の画像を選びます。

057-pattern-flow01

4)「不透明度」を変えたり、「描画モード」選んで、調整します。

057-pattern-flow01

5)「OK」を押せば、反映されています。

057-pattern-flow01

なお、画像変更や追加調整は後から何度でもできます。

「パターンオーバーレイ」用に好きなパターンを登録する

パターンオーバーレイの使い方はとても簡単ですが、やっぱりデフォルトのパターンだと、正直あまり使えるものがありませんよね。その場合は、自分の好きなパターンを登録してしまえばいのです!

1)Photoshopでパターンを用意します。
(※注意)サイズは何pxでも、正方形でなくても大丈夫ですが、「連続したパターン」になるデザインでないといけません。

057-pattern-flow01

2)メニューの「編集」>「パターンを定義」を選択します。

057-pattern-flow01

3)名前は適当で大丈夫です。OKを押します。

057-pattern-flow01

これで、完了です。早速、パターンを使用してみましょう。

057-pattern-flow01

きちんとパターンになっていますね。「描画モード」を「スクリーン」にすると、もともとの地色のパターンになります。

057-pattern-flow01

簡単に色変更や、パターンの細かさまで調節できるので、本当に便利ですよ!

テクスチュア・パターンを自作する!コツは「連続したパターン」になるデザインに

「パターンオーバーレイ」の使い方は簡単なのですが、この登録用のパターンデザインを自分で作成するのは、けっこうコツがいりますね。テキスタイルデザイナーが制作するような、連続したパターンを用意します。

「送り(繰り返し・リピート)」がどこか確認する

無料素材など既にデザインされたパターンを使用する場合は、「送り(繰り返し・リピート)」がどこか把握し、そこで切り取って「パターン登録」します。たとえば、この麻の葉なら、図の赤枠部分です。このデザインが縦と横方向に、連続して繋がっています。これがパターンの「送り(繰り返し・リピート)」になります。なお、正方形でなくても「パターン登録」はできます。デザインによって「送り」のサイズは違ってきます。

057-pattern-flow01

また、「パターンオーバーレイ」で色調整もできますが、色数がたくさん指定したい場合は、あらかじめパターン登録する前に着色しましょう。何種類かのカラーリングでパターン素材を作っておくと便利ですね!

完全自作の場合は「送り(繰り返し・リピート)」のあるデザインを作成する

次は、パターンを自分で作る方法をご紹介したいと思います。が、記事が長くなりますので、続きは次の記事でご紹介したいと思います。ぜひ、参考にしてみてくださいね!

【Photoshop】WEBデザインで簡単に質感が出せる、便利な背景パターンの作成方法・2→

あなたもフリーランスはじめませんか?

フリーランスのデザインのお仕事探しのお手伝いをしてくれるサイトです。専門のエージェントも!登録は無料なので、まずは気軽に登録してみてくださいね。
※デザインのお仕事を見てみる⇒レバテッククリエイター

あわせて読みたい

コメントを残す

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