メニュー

WP版キャラチョコブック

Chocobanditz ONLINE

ページトップ

ページボトム

メニュー

Chocobanditz ONLINE

閉じる

DESIGN Photoshop UIデザイン

Photoshopで手軽にアナログ風のテイストを表現する方法!

投稿日:2014年5月4日 更新日:

dez_002_img_main

皆さんこんにちわ、キャラチョコブックです。

Web用のアイコンを作っていて、フラットデザインのアイコンにほんの少し
だけハンドメイドのようなアナログ感が欲しくなり、
アイコンにアナログ風のテイストを加える方法を調べてみました。

そこでこの記事では、キャラチョコブックが調べて試した
Photoshopで手軽にアナログ風のテイストを表現する方法をご紹介します。

スポンサーリンク

Photoshopで手軽にアナログ風のテイストを表現する

目次

  1. 01 方法1.「カットアウト」フィルタを使って版画風のテイストを表現する
  2. 02 方法2.テクスチャ素材を重ねてグランジ感を表現する
  3. 03 まとめ

01 方法1.「カットアウト」フィルタを使って版画風のテイストを表現する

dez_002_img01_1

 

[手順1-1]

最初に「カットアウト」フィルタの効果を上げるため、フィルタを適用したいレ
イヤーをLabカラーモードに変更します。

[イメージ]→[モード]→[Labカラー]を選択

dez_002_img01_2

 

[手順1-2]

「チャンネル」パレットで(L):明度チャンネルを選択します。

dez_002_img01_3

 

[手順1-3]

明度チャンネルを選択した状態で、
フィルタメニューから、「カットアウト」フィルタを選択します。

[フィルタ]→[フィルターギャラリー]を選択

dez_002_img01_4

 

[アーティスティック]→[カットアウト]を選択、欲しいイメージに合わせお好み
で設定値を調整します。

dez_002_img01_5

 

02 方法2.テクスチャ素材を重ねてグランジ感を表現する

dez_002_img02_1

 

グランジ感を出したいレイヤーの上に、お好みのテクスチャ素材レイヤーを
配置し、不透明度を調整します。

キャラチョコブックはパターン素材で塗りつぶしたレイヤーを配置しました。
適当なテクスチャ画像やパターン素材をお持ちでない方は、”グランジ 素材”
などで検索し探してみると良いです。

参考:
背景デザインなどに活用したい無料グランジテクスチャ素材30セットまとめ

[手順2-1]

パターン素材で塗りつぶしたレイヤーを作成します。

[レイヤー]→[新規塗りつぶしレイヤー]→[パターン]を選択

dez_002_img02_2

 

[手順2-2]

「レイヤー」パレットで不透明度を調整します。

dez_002_img02_3

03 まとめ

今回は扱う題材がアイコンということで視認性を考慮したうえで、上記の方法を
選択し、設定値を調整して適用しました。

Photoshopでアナログ風のテイストを表現する方法は他にもあると思うので、
ご自身の求めるイメージに合わせて方法を組み合わせたり、設定値を調整して
みましょう!

以上

この記事では、
Photoshopで手軽にアナログ風のテイストを表現する方法をご紹介しました。

スポンサーリンク

-DESIGN, Photoshop, UIデザイン

執筆者:


comment

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

MadiaMarkerメディアマーカー

Maerchen_Diverグッズ