webデザイン

photoshopで雰囲気のあるセピア調に仕上げるプロの技術。

photoshopで写真をセピア調にするのはすごく簡単。 ⇒ photoshopで写真をセピア調にする一番簡単な方法! だけど、単調になりすぎて人物などの場合は生気が感じられなくなってしまったり。。

それに、最近では写真加工アプリなども進化してるので単純にセピア調にするぐらいならわざわざphotoshop使わなくても・・そんな時代だからこそ、僕らデザイナーはそれぞれの感性を十分に発揮して人間にしかできない個性的な作品を生み出さないとならない。

セピアの比較

ということで、ここではphotoshopを使用したデザイナーを目指すひと向けに、雰囲気のあるセピア調に仕上げるプロの技術をシェアしたいと思います。参考にできる部分だけ吸収してあなたにしかできない個性的なセピア調の作品を作れるようになりましょう。

雰囲気のあるセピア調に仕上げよう。

今回はディティールにこだわりたいので解像度が高く、サイズの大きめの画像を使用します

元画像

背景を3つ複製しておく。(※重要:画像を加工する際には背景となっている元画像はいじらないように複製したものを加工する癖をつけておこう!後で必要になったりするため。

レイヤーの複製

複製した一つ目のレイヤーの彩度を落とし不透明度を70%にする

彩度を落とす

複製した二つ目のレイヤーにハイパスをかける

ハイパスをかける

ハイパスの半径を調整

半径を調整

描画モードをオーバーレイに変更。

オーバーレイ

複製した三つ目のレイヤーの彩度を落とし階調の反転をする

階調の反転

同じくオーバーレイをかけ不透明度を50%に落とす。

オーバーレイ

画像全体にレンズフィルターを適用させる。

レンズフィルター

属性で色や適用量を調整。(画面を確認しながらセンスで!)

適用量

さらにトーンカーブも適用させ微調整。

トーンカーブ

雰囲気が出たところですべてのレイヤーを一旦非表示(目のマークを消す)にしておく

生気を取り戻すためのひと手間。

ここから、少し沈んでしまった人物の生気を取り戻したいので肌の部分を抽出します。

背景をまた、3つほど複製。(※このような追加でニュアンスを付け足したい場合などに、加工していない元画像が必要になる。

複製した一つ目のレイヤーに色域指定する

色域指定

スポイトで肌の明るい部分を指定し、許容量を調整

許容量を調整

選択範囲を反転させて切り抜く

切り抜く

続いて、複製した二つ目のレイヤーに今度は肌の暗めの部分の色域指定をする

肌の暗めの部分の色域指定

選択範囲を反転させて切り抜くと色域指定した明るい部分と暗い部分の合算が表示されているのを確認したらレイヤーを統合

レイヤーを統合

肌以外の不要な部分を切り抜く。切り抜き方法はこちらを参考にしてね。 ⇒ これで完璧っ!5種類のphotoshop切り抜き方法。 (今回はぼかしをかけるので神経質にならずざっくり切り取っても全然OK)

不要な部分の切り抜き

背景を切り取ったら、描画モードをソフトライトに変更しぼかしをかける

ソフトライト

さらに、複製した三つ目のレイヤーで青いドレス部分の色域指定をする

ドレス部分の色域指定

選択範囲を反転し切り取ったら、同じく描画モードをソフトライトに変更し不透明度を80%に落とす

ソフトライト

レンズフィルターを肌やドレスにも適用させるため上に移動させる

最後に全体的に色味を統一させるため、任意の色(セピア系)の新規レイヤーを作成し、描画モードをソフトライトに変更

レンズフィルターの移動

生気を失わず雰囲気のあるセピア調に仕上がったと思いますがいかがでしたでしょうか

今回は、複数のレイヤーで構成してあるのでそれぞれの不透明度や色味を変更することで微調整が可能です、後はあなたのセンスでバッチリ仕上げよう♪

微調整

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

ピックアップ記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. 「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
  3. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    画像の上をカーソルでなぞってビフォアーアフターイメージを実装させるワードプレスプラグインBefore…

    当スリームデザインのブログではフォトショップ技術などを紹介しており、加…

  2. webデザイン

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

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

  3. フォトショップ

    photoshopで肌をなめらかでキレイに仕上げるとっておきの方法。

    photoshopで肌をなめらかに仕上げたいと思った場合にはぼかしを使…

  4. webデザイン

    ちょっとした裏技!?Photoshopで文字を切り抜いて影を付けるレイヤーマスクの活用方法

    前面に紙や壁があることを想定し、文字の形に切り抜いて影を付けたい場合に…

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」のWEB…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  2. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  4. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. webデザイン

    「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
PAGE TOP