マーカーネット株式会社

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

WEBデザイン

【photoshop】素材なしで手軽にテキストを水彩風にするテクニック!

投稿日:2014年7月30日 更新日:

暑い日が続いておりますが、デザインする時も季節感を演出できたら、より人の目を引くデザインになるかもしれないですね。 ここで夏にふさわしい、テキストを涼しげな水彩風に加工するPhotoshopテクニックをご紹介したいと思います。

STEP1. 加工したい文字をPhotoshopに配置します。

1

STEP2. 文字の上に着色します。

文字の上に新規レイヤーを作成し、ブラシツールで色を付けます。 不透明度を60~80ぐらい設定して、重ねるように着色していくと水彩らしさを表現できます。 ムラのある感じに仕上げるといいですね。
2

STEP3. 文字をクリッピングマスクに使用する

レイヤーパネル上で、テキストと着色したレイヤーの間を Altキー(Macの場合はoption)を押しながらクリックするとクリッピングマスクに適用されます。 これで文字部分だけに着色がされました。 3

STEP4. 文字の色を白に変更します。

文字が黒いままだと、着色レイヤーの不透明度が低い部分が黒が透けてしまい暗くなります。 ここでテキストの色を白に変更します。

STEP5. 指先ツールでにじみ効果を作ります。

5 まずテキストレイアーをラスタライズして画像化します。指先ツールで画像になった文字のフチをなぞってにじみを作ります。 強度は20~30ぐらいに設定すると適度なにじみが作れます。

STEP6. 消しゴムツールで文字を部分的に消します。

より本物の水彩に近い風合いを表現するため、消しゴムツールを使って文字レイヤーを部分的に消します。 不透明度を20~30ぐらいに設定して、色にムラを出します。 6

STEP7.背景に紙素材などを配置して、テキストレイヤーを「焼き込み(リニア)」モードにすると、背景の素材になじんだ感じになります。

7
まるで本当に紙に書いたような、水彩風デザインが完成です。
是非見出しなどのデザインに活用してみてください。

-WEBデザイン

執筆者:


comment

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

関連記事

【2014年総まとめ】今年一番多く使ったWEBフォント

【2014年総まとめ】今年一番多く使ったWEBフォント

こんばんわ~WEBデザイナーのHです。 本日はこの1年間、実際のWEBデザイン制作を通して、一番多く使ったWEBフォント、トップ3をご紹介します。 中には有料のものもありますが、社内で共有することを優 …

【デザイナー必見!】 ロゴデザインをつくるとき役立つ4つのサイトをご紹介

【デザイナー必見!】 ロゴデザインをつくるとき役立つ4つのサイトをご紹介

WEB制作会社というと、ホームページデザインのイメージが強いと思いますが、 マーカーネットではロゴデザインの制作も承っています。 そこで、今回はロゴデザインを作成する際、参考になるサイトについてご紹介 …

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

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

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

ブクマするならコレ! 素材探しで迷わない、商用利用可能な素材サイト

ブクマするならコレ! 素材探しで迷わない、商用利用可能な素材サイト

こんにちは! Webデザイナー初心者のKです! 本日はWeb制作をされている方なら誰しもがぶちあたるであろう、 著作権について、色々と熱く語ります!! ・・というのは、長ーーーくなるので!! 商用利用 …

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

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