マーカーネット株式会社

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

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

関連記事

全部無料!?写真をアートに加工できる【オススメ無料アプリ3選!】

こんにちは!デザイナーAです。 WEB制作時にサイトに掲載する画像を写真ではなく、お洒落なイラストにしたい…! でも制作費用は極力抑えたい~!!そんな方にオススメな写真をイラスト風に加工できるアプリを …

【デザインに一工夫】ちょっと変わったアイコン素材サイト3選

【デザインに一工夫】ちょっと変わったアイコン素材サイト3選

日頃WEBデザインの仕事に携わる関係上、素材サイト巡りをすることがよくあります。 その中で、最近面白いなと思ったサイトをご紹介したいと思います。   ヒューマンピクトグラム2.0 http: …

【Illustrator】アーガイル模様の作り方

みなさまこんにちは、新人Aです。 今日はまたIllustratorを使って、パターンのお話を。 以前は七宝柄、タータンチェックときて・・・今日はアーガイル柄を作りたいと思います。 アーガイル柄といえば …

背景に動画を取り入れたWEBデザイン

背景に動画を取り入れたWEBデザイン

動画を取り入れたWEBサイト。 大分主流となってきて、見かける頻度も一段と増えました。 動画 = 重い という概念もどこへやら。。 最近のWEB動画はとても軽い。 背景として動画を入れ、飽きさせること …

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

デザインの幅が広がる!クオリティの高いイラストサイトまとめ http://www.markernet.co.jp/blog/2015/08/07/post-5940/ Facebook