マーカーネット株式会社

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

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

関連記事

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(3)

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(3)

こんにちは、デザイナーのAです。 以前、いいデザインと悪いデザインの見分け方についてご紹介いたしました。 いいデザインと悪いデザインの見分け方 その(1) いいデザインと悪いデザインの見分け方 その( …

【2014年のWEBデザイン!】流行するカラー&廃りそうなスタイル

【2014年のWEBデザイン!】流行するカラー&廃りそうなスタイル

2013年も気が付けば残り1週間。早いものですね~(しみじみ) WEBの業界は流行り廃りが激しいもので、 デザインに限って見ても、この1年間でもさまざまな動きがありましたね。 2014年、WEBデザイ …

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

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

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

CSS3のセレクタは幾つもありますよね。 今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。 E:first-child 親要素の最初の子要素であるE要素に適用 E:fi …

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。 今回使用するjavascriptは「zoom.js」になります。 【これまでの関連記事】 面白い動きや便利な機 …