Photoshopでテクスチャを使う3つの方法【初心者向け】現役デザイナーが解説
Photoshopの【テクスチャ】の使い方を初心者向けに紹介する記事。「パターンの定義」「レイヤーマスクの使用」「フィルターギャラリーを使用」の3つの方法を紹介。テクスチャを使うことで紙や布、岩などの質感を表現することが可能。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
ノマリカ
伝わりやすくて明快なデザインを得意としている。
テクスチャとは画像の一部、または全体に特殊な効果を入れることによって紙や布、岩などの質感を表現するものです。
Photoshopではさまざまな方法を使ってテクスチャ効果を付けることができます。
目次
今日はテクスチャについて勉強しよう。
テクスチャを使うことで、表現の幅が大きく広がるよ。
田島メンター！テクスチャって、布や板みたいな模様を入れるやつですよね。
実際にはどうやるんですか～？
Photoshopではいろいろな方法でテクスチャ効果を生み出すことができるよ。
ここでは3つの方法を使って画像にテクスチャを適用してみよう。
はい！お願いします！
今回は、下記3つの方法をご紹介します。
最初の2つの方法は、テクスチャの元になる画像素材を用意し、他の画像にテクスチャとして適用するという流れです。
自分でテクスチャを作成する方法や適用方法を知っておくと、表現の幅が大きく広がりますので、ぜひ覚えておきましょう。
パターンの定義を使用する方法
自分で用意した画像からテクスチャのパターンを新たに作成し、塗りつぶしツールで他の画像に適用させる方法です。
まずはテクスチャに使用したい画像を開き、ツールバーの選択ツールを右クリックして「長方形選択ツール」を選びます。
画像全体を、あるいはテクスチャとして使いたい部分をドラッグして選択範囲を作成します。
選択範囲を作成した状態で、上部メニューの「編集」から「パターンを定義」をクリックします。
パターン名を入力して「OK」をクリックします。
ここでは「パターン1」という名前にしてみました。
これで新規パターンが追加されました。
次に、テクスチャの質感を追加したい画像を開きます。
ここでは背景が透明な以下のイラストを用いて説明します。
ツールバーのグラデーションツールを右クリックし、「塗りつぶしツール」を選択します。
すると、Photohsop上部のオプションバーで、塗りつぶしの設定ができるようになりますので、以下の順序で設定してみましょう。
1．まず種類が「描画色」となっている場合は「パターン」に変更します。
2．サムネイルの右の下向き矢印をクリックして、パターンの一覧を表示させます。
3．先ほど新規作成した「パターン1」を選択します。
さらに、モードを「乗算」にし、不透明度を70％に調整しておきましょう。
※モードを乗算に設定し、不透明度を調整することで、イラストの色に馴染む自然なテクスチャを追加できます。
上記の設定を済ませた状態で、イラストの上でクリックして塗りつぶします。
これでテクスチャがイラストに追加されました。
レイヤーマスクを使用する方法
2つ目の方法です。
先ほどとは逆に、まずテクスチャを追加したい画像を開きます。
ここでは背景が透明な以下のイラストを用いて説明します。
上部メニュー「ファイル」から「配置」を選択します。
※「配置」がない場合は「埋め込みを配置」を選択します。
テクスチャとして使用したい画像を選択し、「配置」をクリックします。
これでイラストの上にテクスチャのレイヤーが作成されます。
下の画像ようにイラストがはみ出している場合は、上部メニュー「編集」の「自由変形」などでイラスト全体を覆うように調整します。
イラスト全体にテクスチャが重なった状態で右クリックし、「配置」を選択します。
さらに、テクスチャのレイヤーを選択した状態で、イラストのレイヤーを下の「レイヤーマスクを追加」のアイコンまでドラッグします。
すると、イラストの形状に沿った形で、テクスチャが切り抜かれました。
テクスチャのレイヤーを見ると、レイヤーマスクが追加されているのがわかります。
ここからテクスチャのレイヤーを調整していきます。
テクスチャレイヤーを選択した状態で、レイヤーパネル上の「通常」という部分を「乗算」に変更し、右隣の不透明度のパーセンテージを下げてみましょう。
イラストとテクスチャがうまく馴染んだら完了です。
この2つの手順では、あらかじめテクスチャ用の画像を用意する必要があるね。
手元にテクスチャ画像がない場合はどうしたらいいんですか～？
Photoshopのフィルターギャラリーからでも、さまざまな効果を適用できるよ。
フィルターギャラリーを使用する方法
最後の3つ目は、Photoshopにあらかじめ内蔵されている「フィルターギャラリー」の機能を使用して画像全体にテクスチャ効果を付ける方法です。
ここでは以下の画像を使用します。
上部メニュー「フィルター」から「フィルターギャラリー」を選択します。
「テクスチャ」を選択すると、反映できる効果の一覧が表示されます。
今回は「クラッキング」を選び、設定は以下のように調整してみましょう。
※「クラッキング」を選択すると、画像内の境界に沿って細かい溝が入り、石膏の表面に画像を描いたような効果を加えることができます。
「OK」をクリックすると画像全体にテクスチャ効果が反映されました。
今回の記事は以上です。
3つのうち、自分ができそうなものから試してみてください。
元画像や表現したい効果によって、適用方法やテクスチャの種類をいろいろ使い分けてみよう。
テクスチャを使うと全体の印象が大きく変わりますね。
パターンなどに画像を使用する場合は、著作権の問題がないように気をつけようね。
分かりました！ありがとうございます！
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料体験
に参加してみませんか？
初心者でも最短1時間で学習が体験できるカリキュラム、現役エンジニアに何でも相談できるカウンセリング、無制限のチャット質問サービス
が
すべて無料で体験
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
Photoshopを学習中の方へ
これで解説は終了です、お疲れさまでした。
- Photoshopを調べたけど分かりづらい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？
テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
