icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

目次

1時間でできる無料体験!

 

田島悠介

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

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

大石ゆかり

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

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

田島悠介

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つのうち、自分ができそうなものから試してみてください。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは?

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困ったときに、質問や相談できる相手がいるため挫折しなかった
  • ・プロとして必要なスキルのみを深く学べたので無駄がなかった
  • ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか?

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

Photoshopを学習中の方へ

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

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

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

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」

こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する