マーカーネット株式会社

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

WEBデザイン WEB制作

【Photoshop マジック】ビンテージ風の素材がさくさくカンタンに作れちゃう!

投稿日:2014年9月19日 更新日:

Webデザインのトレンド手法のひとつとして、「レトロ感」や「ヴィンテージ感」のあるwebデザインがよく見かけます。
素材がなくても、Phoshopを使えば普通の写真もステキな素材になります!
ここで写真をビンテージ風に加工する手順をご紹介します。

STEP.1
加工したい写真をPhotoshopで配置して、ツールバーの「イメージ」→「モード」→「グレースケール]の流れで写真をモノクロに変換します。

STEP.2
背景レイヤーにベクトルマスクを追加して、黒く塗りつぶします。

STEP.3
背景レイヤーの上に新規レイヤーを作成します。
そして左側のツールバーからグラデーションツールを選択して、グラデーションエディターのウィンドウで希望の色を設定します。
グラデーションの調整を終えたら、グラデーションツールで新規レイヤーを塗りつぶします。

4

STEP4.
レイヤーパレットの描画モードを「ソフトライト」に変更すると、セピア調の写真になりました。

STEP5.
さらに背景の上にコピーなどチャッチコピーを配置したら、クラシックな雰囲気のあるビンテージ風の素材が完成しました。

最初の写真と比べると違いがよく分かりますね。

また、グラデーションの色を変えるだけで、また違う雰囲気を表現できます。
IMG_1936_2
ぜひいろいろ試してみてはいかがでしょうか?

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-WEBデザイン, WEB制作

関連記事

adobe photoshop 便利すぎる生成塗りつぶし機能のご紹介!!

adobe photoshop 便利すぎる生成塗りつぶし機能のご紹介!!

こんにちは、デザイナーのAです! 今回はAdobe Photoshopの「生成塗りつぶし」についてご紹介します! 「生成塗りつぶし」は選択した領域を自然に塗りつぶすことができる機能です。 具体的には、 …

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

画面いっぱいに背景写真を敷くWEBデザインが流行っている今日この頃、 見栄えのする写真を探すのもなかなかの一苦労だったりしますよね。 そんな悩めるデザイナーさんたちにオススメしたい、高クオリティな写真 …

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2- どうも、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて紹介していきたいと思います。 C …

クオリティの高い“フリー写真素材サイト”まとめ編!

クオリティの高い“フリー写真素材サイト”まとめ編!

皆さん! こんばんは!! 株式会社マーカーネットでwebデザインを修行をしている新人デザイナーKです。 今回、私が皆さんにご紹介したいのはweb制作は欠かせない「素材」についてです。正確には、クオリテ …

海外で人気のあるPHPのyiiフレームワークを使用してみました。

海外で人気のあるPHPのyiiフレームワークを使用してみました。

海外では、人気のあるPHPのyiiフレームワーク使用してみました。 1. yiiをhttp://www.yiiframework.com/ダウンロードしまして、 ソースコードを任意のwebの公開ディレ …