マーカーネット株式会社

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

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

関連記事

デザイナーなら必ず見ておきたいWEBデザイン(可愛い系統)

デザイナーなら必ず見ておきたいWEBデザイン(可愛い系統)

資生堂のマシェリ公式HP http://www.shiseido.co.jp/macherie/index.html リボンのあしらいと女性が好みそうなお花やフルーツなどをモチーフにしていて、 沢山の …

Photoshopの、これだけは押さえておきたい便利機能!!

こんばんは! webデザイナーのKです。 しばらくマーカブログに登場できなかったのですが、 みなさま、いかがお過ごしでしょうか? 私はパソコンの不具合、というドキドキハラハラな出来事がありました。 お …

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

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

色のイメージとWEBサイト【ピンク・紫編】

こんにちは、新人Aです。 おととい、昨日とWEBサイトの配色についてお話しました! 【黄色・赤編】【青・緑編】の次は・・・ 今日は【ピンク・紫編】でお届けしようかと思います! 【ピンク】 ちふれ ht …

さまざまなレイアウトの工夫その①

さまざまなレイアウトの工夫その①

キレイなウェブ制作のためには色んな要素が必要となります。「フォント」「色」「レイアウト」「写真」「バランス」「テーマ」等々!今回はその中でも「レイアウト」ついて少し説明させていただきたいと思います。で …