マーカーネット株式会社

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サイトへ

-WEBデザイン, WEB制作

関連記事

WEB制作に便利!CSS3ボタンジェネレーター3選

WEB制作に便利!CSS3ボタンジェネレーター3選

もちろん使わない派の方もいるかもしれませんが、私は便利なツールがあればどんどん使っちゃいます。 WEB制作の時短にもつながる便利なジェネレーターをご紹介します。   「CSS3 Button …

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …

【Illustrator】簡単!マーブル模様の作り方

マーブル模様って、パターンと違って規則性もないし、表現するのは大変ですよね。 アナログで作るのにも道具を引っ張り出すのも面倒・・・失敗するのも怖い・・・ そこで、Illustratorで簡単にマーブル …

WEBトレンド!?パーツの動きに注目!!~素敵サイトの旅 その2~

明けましておめでとうございます。web初心者のKです! 本年もどうぞよろしくお願いいたします。 みなさま、お正月はいかがお過ごしでいたでしょうか? 私はあまりに寒すぎて冬眠できないかな~、と、 食いだ …

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

今日はあんまり面白い記事が見つからなかったので、ちょっと趣向を変えて、日常のWEB制作フローのなかで重宝しているものの中からひとつ紹介します。 WEB制作の業界に限ったことだけではないかもしれませんが …