webデザイン

photoshopでまるで本物の油絵タッチに仕上げるためのフィルター&塗り方講座。

photoshopで油絵タッチに仕上げるために、まず ↓ のように風景写真を絵画風にします。

絵画風に加工

絵画風の加工はこちらで解説 ⇒ ここまでできる!photoshopで風景写真をまるで絵画風に加工するフィルターテクニック(油彩・水彩)編。

絵画風の風景画像を油絵タッチに仕上げるチュートリアル

絵画風画像を開く。

絵画風画像を開く

油彩ちっくなテクスチャーを開きドラッグして放り込む

テクスチャーを放り込む

テクスチャーのサイズを調整して描画モードを焼き込みカラーに変更。

焼き込みカラー

テクスチャーレイヤーの色相・彩度を調整、ここでは彩度・メイド共に+50でがっつり上げました。調整した後にレイヤーを統合して1枚の画像にする(背景)。

統合

背景を複製しマスクをかけ背景と複製レイヤーの間に新規レイヤーを作成して白で塗る

複製マスク

油絵特有のマチエールっぽさを表現する工程

グランジ感をかもし出すために、でこぼこした風合いのテクスチャー画像を開き、選択範囲 》すべてを選択 する。

でこぼこテクスチャー

複製レイヤーのマスク部分をAltを押しながらクリック(画面が切り替わる)。

画面切り替え

選択してあるでこぼこテクスチャーをドラッグしながら放り込む

放り込む

マスク部分にでこぼこテクスチャーが入り込んだのを確認。(テクスチャーのウインドウは閉じてOK)

マスク確認

レイヤー部分をクリックして表示を切り替える。

表示切り替え

今度はAlt無しでマスク部分をクリックし明るさ・コントラストを調整

明るさ・コントラスト

調整し終わったレイヤーと白レイヤーを一旦非表示し、もうひとつ別のニュアンスのものを作成する。

先ほどの工程と同様に、背景を複製してマスクをかけ間に新規レイヤー白を作成する。

複製

複製レイヤーのマスク部分をAltを押しながらクリックして画面を切り替えグランジ感のある別のテクスチャーを開く。

グランジテクスチャー

テクスチャーをすべて選択したら、ドラッグして放り込む

放り込む

マスク部分にテクスチャーが入り込んだのを確認。

マスク確認

レイヤー部分をクリックし表示させたら、マスク部分をAlt無しでクリックして明るさ・コントラストを調整

明るさ・コントラストを調整

まだ明るすぎるようなら必要に応じてレイヤーを複製

レイヤー複製

先に作成したレイヤーと白レイヤーを表示させ統合今作成したレイヤー3つも統合

双方統合

統合した最前面のレイヤーにマスクをかけ、反転で黒にする(この時点でこのレイヤーは表示されていないことになっている。)

マスク黒

黒のマスク部分をニュアンスを確認しながらブラシなどで白く塗る(塗った部分が表示されるため、下のマチエールレイヤーとニュアンスを混ぜ合わせる作業)

マスクブラシ

最後に全体の色味を調整(今回は#5d4f51の色で新規レイヤーを作成し描画モードをソフトライトに変更)

ソフトライト

photoshopで本物の油絵タッチっぽく完成

油絵タッチ完成

合わせて読みたい関連記事:ひと味違うHDR風のディティールを表現する所要時間3分のフォトショップ技術

スリームデザインの無料メールマガジン

ピックアップ記事

  1. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  2. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  3. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…

関連記事

  1. webデザイン

    ヘッダーデザインの役割に応じた文章表現の考え方と構成方法。Photoshop編

    魅せる伝えるヘッダーデザインを作成する5つの工程の4番目、ここでは④ …

  2. webデザイン

    「コレがやりたかった!」GIFアニメ(動く画像)のPCモックアップ画像の作り方【Photoshop編…

    JPGなどの画像をパソコン画面にはめ込んだモックアップを作りたい場合に…

  3. webデザイン

    ブロガー必見!パソコン画面のはめ込み画像がわずか10秒で作れるMockDropが便利すぎた。

    ブログを書いているとパソコン画面の"はめ込み画像"を作りたい場合があり…

  4. webデザイン

    初心者でも簡単!GIMPをダウンロードしてインストール方法。

    GIMP公式サイトへGOっ!【Download GIMP バージョン】…

  5. webデザイン

    わずか3秒っ!Photoshopで文字を中央に配置する方法

    Photoshopで文字や図形などを画像の中央(上下左右バッチリ均等)…

  6. webデザイン

    photoshopで映画タイトルロゴのようなメタリックでカッコ良い文字を作るチュートリアル!

    スパイダーマンやアイアンマンなどいかにもMARVELの映画で出てきそう…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  2. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…
  3. Photoshopを使って動画をGIFアニメーション(動く画…

思考系のおもろい記事

ブログラ
  1. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
PAGE TOP