マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン WEB制作

普通の写真も一風変わった感じに!【Photoshopで写真をミニチュア風に加工】

投稿日:2014年6月24日 更新日:

デザインする時、「この素材写真イマイチだなー」と思ったことありませんか?
ここで普通の写真をミニチュア風に加工するPhotoshopの小技をご紹介します。

STEP1
まず加工する写真をPhotoshopで開いて、レイヤーパレットで背景レイヤーをダブルクリックして背景をレイヤーに変換します。
step2

STEP2
メニューバーの「イメージ」→「色調補正」→「色相・彩度」を選択し彩度を上げます。
数字は40~60ぐらいが目安です。
step3

STEP3
サイドメニューの一番下にある「クイックマスクモードで編集」をクリックしてから、グラデーションツールを選択します。
グラデーションの色は下のように設定して、画像を縦になぞります。
色が付いたところがボカさない部分となります。写真の構図などバランスを見て調整していきましょう。

step4
step5

STEP4
グラデーションの調整が終わったら、STEP3と同じ「クイックマス」のボタンをクリックすると、クイックマスク編集モードから解除できます。(ショートカットキー「Q」でもできます。)
画面に戻るとぼかす範囲を示す点線が表示されます。その状態でメニューから「フィルタ」→「ぼかし」→「ぼかし(レンズ)」を選択します。

step6

STEP5
「ぼかし(レンズ)」の編集ウィンドウで、半径のバーをスライドさせるとボケの適用がプレビューに反映されます。
ここでぼかしの強弱を調整します。
step7_2
調整完了しましたら「OK」ボタンを押して編集ウィンドウを閉じます。
以上で、加工の手順は完了です。
出来上がった写真はこんな感じになります!

step8
ただの5ステップで作れちゃう、一味違ったミニチュア風写真加工。
サイトのメインビジュアルをデザインする時、是非この小技を活用してみてはいかがでしょうか。

-WEBデザイン, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

表現の幅を広げる!!AEプラグイン

こんにちは、先日自宅で自分の映像作品を会社に行く前にレンダリングし、仕事が終わって見てみると半分もレンダリングが進んでいなく絶望を味わった新米デザイナー・ムービー担当Iです。 こった映像を作成するには …

背景に動画を取り入れたWEBデザイン

背景に動画を取り入れたWEBデザイン

動画を取り入れたWEBサイト。 大分主流となってきて、見かける頻度も一段と増えました。 動画 = 重い という概念もどこへやら。。 最近のWEB動画はとても軽い。 背景として動画を入れ、飽きさせること …

【2014年総まとめ】今年一番多く使ったWEBフォント

【2014年総まとめ】今年一番多く使ったWEBフォント

こんばんわ~WEBデザイナーのHです。 本日はこの1年間、実際のWEBデザイン制作を通して、一番多く使ったWEBフォント、トップ3をご紹介します。 中には有料のものもありますが、社内で共有することを優 …

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

「CSSを設定したのに効かない!?」っていうことありますよね。 その場合、一概には言えませんが、もしかしたらCSSの書き方が原因かもしれません。 下記を参考に、CSSを書き直せば直る可能性もぐっと高ま …

【Illustrator】アーガイル模様の作り方

みなさまこんにちは、新人Aです。 今日はまたIllustratorを使って、パターンのお話を。 以前は七宝柄、タータンチェックときて・・・今日はアーガイル柄を作りたいと思います。 アーガイル柄といえば …