Photoshopでテクスチャを使う3つの方法【初心者向け】現役デザイナーが解説

Photoshopの【テクスチャ】の使い方を初心者向けに紹介する記事。「パターンの定義」「レイヤーマスクの使用」「フィルターギャラリーを使用」の3つの方法を紹介。テクスチャを使うことで紙や布、岩などの質感を表現することが可能。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

監修してくれたメンター

ノマリカ

印刷会社で校閲とDTPオペレーションを5年、Web制作会社でデザイナーを8年、一般企業でWeb担当を1年経験した後、フリーランスのデザイナーとして独立。
伝わりやすくて明快なデザインを得意としている。

テクスチャとは画像の一部、または全体に特殊な効果を入れることによって紙や布、岩などの質感を表現するものです。

Photoshopではさまざまな方法を使ってテクスチャ効果を付けることができます。

目次

 

田島悠介

今日はテクスチャについて勉強しよう。

テクスチャを使うことで、表現の幅が大きく広がるよ。

大石ゆかり

田島メンター!テクスチャって、布や板みたいな模様を入れるやつですよね。

実際にはどうやるんですか~?

田島悠介

Photoshopではいろいろな方法でテクスチャ効果を生み出すことができるよ。

ここでは3つの方法を使って画像にテクスチャを適用してみよう。

大石ゆかり

はい!お願いします!

 

今回は、下記3つの方法をご紹介します。

 

最初の2つの方法は、テクスチャの元になる画像素材を用意し、他の画像にテクスチャとして適用するという流れです。

自分でテクスチャを作成する方法や適用方法を知っておくと、表現の幅が大きく広がりますので、ぜひ覚えておきましょう。

 

パターンの定義を使用する方法

自分で用意した画像からテクスチャのパターンを新たに作成し、塗りつぶしツールで他の画像に適用させる方法です。

まずはテクスチャに使用したい画像を開き、ツールバーの選択ツールを右クリックして「長方形選択ツール」を選びます。

ps_textu_1

 

画像全体を、あるいはテクスチャとして使いたい部分をドラッグして選択範囲を作成します。

ps_textu_2

 

選択範囲を作成した状態で、上部メニューの「編集」から「パターンを定義」をクリックします。

ps_textu_3

 

パターン名を入力して「OK」をクリックします。

ここでは「パターン1」という名前にしてみました。

ps_textu_4

これで新規パターンが追加されました。

 

次に、テクスチャの質感を追加したい画像を開きます。

ここでは背景が透明な以下のイラストを用いて説明します。

ps_textu_5

 

ツールバーのグラデーションツールを右クリックし、「塗りつぶしツール」を選択します。

ps_textu_6

 

すると、Photohsop上部のオプションバーで、塗りつぶしの設定ができるようになりますので、以下の順序で設定してみましょう。

1.まず種類が「描画色」となっている場合は「パターン」に変更します。

2.サムネイルの右の下向き矢印をクリックして、パターンの一覧を表示させます。

3.先ほど新規作成した「パターン1」を選択します。

ps_textu_7

 

さらに、モードを「乗算」にし、不透明度を70%に調整しておきましょう。

ps_textu_8

※モードを乗算に設定し、不透明度を調整することで、イラストの色に馴染む自然なテクスチャを追加できます。

 

上記の設定を済ませた状態で、イラストの上でクリックして塗りつぶします。

ps_textu_8_2

 

これでテクスチャがイラストに追加されました。

ps_textu_9

 

レイヤーマスクを使用する方法

2つ目の方法です。

先ほどとは逆に、まずテクスチャを追加したい画像を開きます。

ここでは背景が透明な以下のイラストを用いて説明します。

ps_textu_10

 

上部メニュー「ファイル」から「配置」を選択します。

※「配置」がない場合は「埋め込みを配置」を選択します。

ps_textu_12

 

テクスチャとして使用したい画像を選択し、「配置」をクリックします。

ps_textu_13

 

これでイラストの上にテクスチャのレイヤーが作成されます。

下の画像ようにイラストがはみ出している場合は、上部メニュー「編集」の「自由変形」などでイラスト全体を覆うように調整します。

ps_textu_14

 

イラスト全体にテクスチャが重なった状態で右クリックし、「配置」を選択します。

ps_textu_15

 

さらに、テクスチャのレイヤーを選択した状態で、イラストのレイヤーを下の「レイヤーマスクを追加」のアイコンまでドラッグします。

ps_textu_17

 

すると、イラストの形状に沿った形で、テクスチャが切り抜かれました。

テクスチャのレイヤーを見ると、レイヤーマスクが追加されているのがわかります。

ps_textu_18

 

ここからテクスチャのレイヤーを調整していきます。

テクスチャレイヤーを選択した状態で、レイヤーパネル上の「通常」という部分を「乗算」に変更し、右隣の不透明度のパーセンテージを下げてみましょう。

イラストとテクスチャがうまく馴染んだら完了です。

ps_textu_19

 

田島悠介

この2つの手順では、あらかじめテクスチャ用の画像を用意する必要があるね。

大石ゆかり

手元にテクスチャ画像がない場合はどうしたらいいんですか~?

田島悠介

Photoshopのフィルターギャラリーからでも、さまざまな効果を適用できるよ。

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

フィルターギャラリーを使用する方法

最後の3つ目は、Photoshopにあらかじめ内蔵されている「フィルターギャラリー」の機能を使用して画像全体にテクスチャ効果を付ける方法です。

ここでは以下の画像を使用します。

ps_textu_20

 

上部メニュー「フィルター」から「フィルターギャラリー」を選択します。

ps_textu_21

 

「テクスチャ」を選択すると、反映できる効果の一覧が表示されます。

今回は「クラッキング」を選び、設定は以下のように調整してみましょう。

ps_textu_22

※「クラッキング」を選択すると、画像内の境界に沿って細かい溝が入り、石膏の表面に画像を描いたような効果を加えることができます。

 

「OK」をクリックすると画像全体にテクスチャ効果が反映されました。

ps_textu_23

 

今回の記事は以上です。

3つのうち、自分ができそうなものから試してみてください。

 

田島悠介

元画像や表現したい効果によって、適用方法やテクスチャの種類をいろいろ使い分けてみよう。

大石ゆかり

テクスチャを使うと全体の印象が大きく変わりますね。

田島悠介

パターンなどに画像を使用する場合は、著作権の問題がないように気をつけようね。

大石ゆかり

分かりました!ありがとうございます!

 

Photoshopを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • Photoshopを調べたけど分かりづらい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

Photoshopの学習や情報収集をしていて、このように思ったことはありませんか?

テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。