マーカーネット株式会社

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

WEBサービス WEBデザイン WEB制作

【WEBデザインレシピ】 暑い夏にヒヤッとするホラーなデザインの作り方

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

もうすぐ夏がきますね!
今年は冷夏という噂も耳にしますが、日本の各地でちらほら真夏日が記録されていたりして…
そこで今日は夏の暑さも吹き飛ぶ!?ホラーデザインの簡単レシピをご紹介させていただきます。

01
この女性の写真が…ものの数分で

02

こんな感じになっちゃいます。

まずはダークな雰囲気づくりのため、写真を切り抜いて背景を黒にします。

写真の切り抜き方法について

http://threem-design.com/web-design/photoshop/synthesis/


03

photoshopのフィルターなど色々試してみてください!

04

肌色がちょっと健康的なので、色相彩度の彩度をぐんと落としてみます。
不穏な感じがしてきましたね。。。

05

さらにテクスチャーでザラッとした質感や、ホラー系アイテムでアクセントをつけます。
オーバーレイなどの描画モード・透明度などを調節し、メインの写真に被せてみると面白い効果が生まれたりしますので、
ぜひお試しください。

ホラー系テクスチャ

http://photoshopvip.net/archives/52627

血飛沫素材

http://www.pixiv.net/member_illust.php?mode=medium&illust_id=35860461

フォント

http://www.fontspace.com/search/?q=horror

http://photoshopvip.net/archives/52993

02

完成です!
いかがでしたでしょうか。
ニッチなデザインかもしれませんが、
これから夏のイベントなどでお役立ていただければと思います!!

-WEBサービス, WEBデザイン, WEB制作

執筆者:


comment

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

関連記事

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

【今までにご紹介したJSの一覧】 面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成! 面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作 …

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

以前ご紹介しました面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!の応用編になります。 前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラ …

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

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

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …

CSS3のみで吹き出しを作成してみました!上下左右どこでも大丈夫!

凝ったデザインなどには吹き出しなどを作成したりします。 ですが、内容を画像ではなくテキストにしたい場合があると思います。 吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよ …