マーカーネット株式会社

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

WEBデザイン WEB制作

【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザ

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

img00

Webデザインを制作する中で、写真素材を使用することが多々あります。
これらの素材にひと手間加えることで、写真の魅力がグッと加わったり、
サイトの印象を変えることができたり、ポイントにもなったりしますよね。

そこで!
今回はPhotoshopで写真をカンタンにイラスト風・水彩風・レトロ風に加工する方法を
紹介されているページをご紹介します。
※実際に試してみたので、元画像と比較しながらご覧下さい!
↓元画像
img01



▼イラスト風に加工

掲載元:http://photoshop76.blog.fc2.com/blog-entry-32.html

↓実際にやってみるとこんな感じ
img02

デッサンで描いたようなタッチにすることができます。
顔写真を似顔絵風にしたい!という時に便利そうですね。



▼水彩風に加工

掲載元:http://www.webcreatorbox.com/inspiration/watercolor-web-design/

↓実際にやってみるとこんな感じ
img03

水彩ブラシツールを使用すると、格段に水彩っぽさが上がります。
挿絵をこのように加工することで、ちょっとしたアクセントになるかもしれませんね。



▼レトロ風に加工

掲載元:http://designers-tips.com/archives/6013

↓実際にやってみるとこんな感じ
img04

クラフト感のあるサイトデザインと相性が良さそうな加工法ですね。
風景写真と組み合わせることでポストカードのようなイメージにもなりそうです。

 

画像加工でデザインにアクセントを加えたい!という方は
この機会に是非、試してみてはいかがでしょうか?
一度やってみると、なかなか発見があって面白いのでオススメです。

-WEBデザイン, WEB制作

執筆者:


comment

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

関連記事

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

STEP1. まず加工したい写真素材をPhotoshopで開きます。 STEP2. 背景の写真レイヤーの上に文字を入力し配置します。 STEP3. レイヤーパレット上でテキストのレイヤーを右クリックし …

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …

WEBサイトの配色に迷った時の必見サイト!をご紹介。

WEBサイトの配色に迷った時の必見サイト!をご紹介。 http://www.markernet.co.jp/blog/2015/08/10/post-5960/ Facebook

【Fireworks】写真の上の文字を読みやすくする方法

こんばんは、新人Aです。   今日は、写真に文字を乗せるときに読みやすくする工夫についてお話します! たとえばこんな写真。 綺麗な夜景ですが、暗い空と明るいライトアップのコントラストで白い文 …

覚えたいんだから~!Photoshopのショートカット編

覚えたいんだから~!Photoshopのショートカット編 http://www.markernet.co.jp/blog/2015/07/02/post-5630/ Facebook