webデザイン

「これって写真だったの?」人物写真をphotoshopで手書き風の水彩画ちっくに仕上げるチュートリアル

ここでは人物写真を、鉛筆画のような加工絵具の表現2つの工程を混ぜ合わせることで水彩画ちっくに仕上げる方法をお伝えします。

手書き風の水彩画チュートリアル

人物写真を開きます。(今回は2800×2500pixelの大きめの画像を使用)

和装

鉛筆画のような輪郭線画像を作成する。作成手順はこちら ⇒ photoshopで鉛筆画のような加工をしたいけどフィルターの輪郭検出じゃ納得できないという人のためのチュートリアル

鉛筆画

鉛筆画レイヤーは非表示にし、背景を複製したら顔や手の肌の部分を残し切り取る(肌質を別に表現したいため)

肌切り取り

顔レイヤーを非表示にし、背景をまた複製

複製

フィルターのぼかし(表面)をかけ印象を確認しながら調整。

ぼかし(表面)

続けて、こんどはフィルターの油彩でニュアンスをつける。

油彩

フィルターでぼかしニュアンスを付けたレイヤーを複製し、彩度を落とし階調を反転させぼかし(ガウス)をかける。

モノクロ

描画モードをオーバーレイにすると印象がガラっと変わり絵画風になってきました。

絵画風

ここで一旦、非表示にしていた鉛筆画レイヤーを表示させ、描画モードを焼き込みカラーに変更し、全体像とディティールを確認。

確認

今度は、切り取ってあった顔レイヤーを表示させフィルターのぼかし(表面)をベタ塗りちっくになるよう強めにかける。

顔ぼかし

さらに肌の質感をなめらかに仕上げる。

なめらかに

顔が沈んでしまわないようにトーンを上げるため、顔レイヤーを複製描画モードをスクリーンに変更明るくなりすぎたら不透明度で調整

トーンを上げる

ここで鉛筆画レイヤー以外をすべて統合し ↓ のように3つのレイヤーで構成させる。(この時点で画面は真っ白になっているはず)

レイヤー構成

黒で塗りつぶしたマスク部分にカラーを白でブラシをかける、するとなぞった部分に画像が現れます。水彩画に適したフリーブラシはbittboxでダウンロードして使用。

ブラシ

ブラシの種類を変えながら不透明度・流量などを調整し感覚で描いて水彩画完成!

完成した水彩画

水彩画をちょこっとアレンジ

また、鉛筆画レイヤーの描画モードを焼き込みカラーから乗算に変更すると・・

乗算

背景に和紙のテクスチャーを挿入し、ひと味違がった印象に仕上げることも可能です。

合わせて読みたい関連記事:ここまでできる!photoshopで風景写真をまるで絵画風に加工するフィルターテクニック(油彩・水彩)編。

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

ピックアップ記事

  1. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  2. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    【デザイナー必見】パクリと言われないために類似画像検索で確認しておこう

    作品を創り出す際、クライアント用のデザインや自身のアートに限らず、その…

  2. webデザイン

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

    photoshopで油絵タッチに仕上げるために、まず ↓ のように風景…

  3. 3分の話

    クリエイターとは何ぞや!?ということを真剣に考えてみた結果、ちょっとした独り言で終わった話し。

    響がなんかカッコ良いっ!でも「自称クリエイターです。」と、自称を付けて…

  4. webデザイン

    photoshopで普通のノイズを加えるだけじゃ満足できない人にはNoise Texture Gen…

    通常、画像にザラっとしたノイズを加える場合には ↓ のようにフィルター…

  5. webデザイン

    フォトショップでフワフワ・フサフサな動物の毛を表現するブラシの上手な活用方法。

    フォトショップのブラシを上手に活用するとさまざまな表現が可能になります…

  6. webデザイン

    フォトショップで金色(ゴールド)の文字を表現してクオリティの高いロゴを作る方法

    金色(ゴールド)ってどーやって描けばいいんだろう?そう思うひとは少なく…

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

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

最近の記事

  1. Photoshop CCのメニュー文字やツールバーが異常に小…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  3. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…

思考系のおもろい記事

ブログラ
  1. フォトショップ

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

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

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. SNS

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

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
PAGE TOP