creatersnest9

Photoshop初心者に知ってほしい!テクスチャってなに?どうやって使うの?


デザインをする上で、質感が欲しいと思うときがあると思います。
Photoshopの便利な機能の一つ、テクスチャを使いこなして、デザインに質感をプラスしましょう。
簡単に出来る上に、ワンランク上のデザインに仕上がりますので、是非マスターしてください。

テクスチャの基本

テクスチャとは、画像に紙や布などの質感を表現することができるものです。
Photoshopではさまざまな方法を使ってテクスチャ効果を付けることができますので、自分に合った方法を
見つけましょう。

パターンとして適用させる

テクスチャを、パターンとして登録して適用させる方法です。
パターンの登録をしなければなりませんので、少々面倒だと思う方もいらっしゃるとは思いますが、
パターンは一度登録してしまうといつでも使用することが可能になるため、使用頻度の高いテクスチャには
おすすめです。

 

テクスチャを用意

まずは、テクスチャを用意します。

テクスチャを切り抜く

テクスチャに使用したい箇所を切り抜きます。

 

パターンを定義を選択

切り抜いたテクスチャを、パターン定義としてPhotoshopに登録します。
画面上部メニューの「編集」をクリックし、「パターン定義」を選択します。

 

パターン名の設定

クリックすると、パターン定義登録パネルが出てきますので、パターン名を設定しましょう。
パターン名は、自由に決められますので、後々分かるように設定することをおすすめします。
OKを押すと、画面に変化はありませんが、パターン登録されました。

 

設定するオブジェクト

実際にテクスチャを設定してみましょう。
例として、青色の吹き出しオブジェクトに、テクスチャを設定します。

 

レイヤースタイルでテクスチャを選択

レイヤーパネルの上でダブルクリックをすると、レイヤースタイルパネルが表示されますので、左側のメニューより
「テクスチャ」にチェックを入れます。
パターンの下向きの三角ボタンを押すと、先程のパターンが登録されていることが分かります。
※この時、同時にべベルとエンボスにもチェックが入りますので、立体感を出したくない場合は、設定を調整して
ください。

 

テクスチャの適用

パターン登録したテクスチャを適用することができました。

 クリッピングマスクを使用する

テクスチャをレイヤーのまま、クリッピングマスクを用いて、オブジェクトに適用させる方法です。
直接オブジェクトを編集しませんので、別のテクスチャへの変更もしやすいと思います。
レイヤーとして適用するので、レイヤーは2枚になり、移動する時やサイズ、解像度には注意が必要です。

 

テクスチャを適用させたい画像を用意

まずは、テクスチャレイヤーを適用させたい画像を用意します。
文字でも図形でも手書きの図形でも可能です。

 

テクスチャのレイヤーを上へ

テクスチャを、適用させたい画像レイヤーの上に配置します。

 

クリッピングマスクを作成

切り抜きしたい画像のレイヤー上で右クリック→「クリッピングマスクを作成」を選択します。

 

描画モードを乗算に変更

テクスチャの描画モードを「乗算」に設定します。
分かりやすく、テクスチャを適用させるオブジェクトの色を赤色に変更してみました。
画像にテクスチャの質感を適用することが分かると思います。

レイヤーが2枚になっていますので、移動する際などは特に気を付けましょう。

フィルターギャラリーから適用させる

Photoshopには、フィルターという機能があり、その機能の中にもテクスチャというものがあります。
この機能は、スマートオブジェクトではなく、ラスタライズされたレイヤーに適用されますので、後々に編集作業が
発生する場合は、あまりおすすめ出来ません。

 

tec05

まずは、テクスチャを適用させたい画像を用意します。
ここでは画像全体にテクスチャを適用させますが、ラスタライズされたレイヤー毎にテクスチャを適用させることが
可能です。

 

tec06

画面上部のメニュー「フィルター」をクリックし、「フィルターギャラリー」を選択します。

 

tec07

メニューのテクスチャをクリックし、お好みのテクスチャを選択します。
今回は、「粒状」をかけてみますので、選択してOKボタンをクリックします。

 

tec08

画像に粒状の質感を適用することができました。

 

まとめ

テクスチャを適用する際の、3種類の方法をご紹介しましたが、いかがだったでしょうか。
それぞれに、メリット・デメリットがありますので、自分に合った方法を試してみてください。
デザインをする上で、テクスチャを使用した方が、より凝ったワンランク上のデザインになりますので、是非
マスターしましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【デザイナー必見!】Photoshopでの作業をラクにしてくれる便利なアクションまとめ