WEBデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

-WEBデザイン

関連記事

デザイナーの常識!? いいデザインと悪いデザインの見分け方 スマホサイト編

デザイナーの常識!? いいデザインと悪いデザインの見分け方 スマホサイト編

こんにちは、デザイナーのAです。 いいデザインと悪いデザインの見分け方 その(1) いいデザインと悪いデザインの見分け方 その(2) いいデザインと悪いデザインの見分け方 その(3) これまで、いいデ …

サイトリニューアル!する?しない?

サイトリニューアル!する?しない?

こんにちは。web制作初心者のKです! さてさて、今日は初心者の私がサイトを制作するうえで、 「サイトリニューアルの判断材料のひとつ」をお話したいと思います! これは、「BtoC(消費者向け)サイトの …

【Illustrator】多角形を使った簡単な花形の作り方

【Illustrator】多角形を使った簡単な花形の作り方

みなさまこんばんは、新人Aです。 今日は、多角形を使って一瞬でお花の形にする方法をお話しようと思います! 数値をずらすだけで形が簡単に変わるので、とってもおすすめです。 WEBサイト制作事業 WEBサ …

【Fireworks】Flashなしで簡単に作れるGifアニメーション

【Fireworks】Flashなしで簡単に作れるGifアニメーション

サイトにちょっとした動きがほしい時、Flashを使わず、Fireworksでも簡単にGifアニメーションを作成できます。 ここで画面読込中のローディングアニメーションを作る手順をご紹介したいと思います …

デザインで役立つ!参考サイトまとめ

デザインで役立つ!参考サイトまとめ

こんちには、デザイナーのHです。 今回は、自分自身が良く参考にしているwebサイト全体の参考サイトではなく、パーツのデザインにフォーカスを当て、いくつかご紹介します。 目次1 Parts. &#821 …