スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > フォトショップでウォーターテキストエフェクトを作る方法

フォトショップでウォーターテキストエフェクトを作る方法

投稿日:2016年03月04日   ソフトウェア:Photoshop

このチュートリアルではPhotoshopでウォーターテキストエフェクトのチュートリアルをご紹介します。

Step1:はじめに

今日はフォトショップで作るウォーターテキストエフェクトの使い方を解説します。

今回のチュートリアルはベーシックレイヤーエフェクトだけで上級テクニックは使用しません。なのでフォトショップビギナー向けの解説になっています。ではレイヤーオプションの僅かな変化で、どのくらいリキッドテキストエフェクトが違ってくるのかをお見せします。

Typography Sketchbooks
Thinking with Type
Typography Workbook
Little Book of Lettering
Typography Essentials: 100 Design Principles for Working with Type
The Elements of Typographic Style
Designing with Type
Type Rules!: The Designer's Guide to Professional Typography
The Anatomy of Type

このテクニックは異なったテクスチャや表面で水滴を作り出すように、様々なオブジェクトに適用させることができます。

今回のチュートリアルでは「Jane Austen」というフリーのフォントを使用します。

ではウォーターテキストエフェクトのチュートリアルを始めましょう。最終的にはこのような感じに仕上げます。

はじめに





Step2:ウォーターテキストの設定

まず初めに420 x 240 pxのキャンバスを作り、そこを#006699の色で満たします。では白色でテキストを書いてみましょう。

ウォーターテキストの設定

テキストレイヤーのオプションパネルを開き、下のようにセッティングを出します。

1.まずはドロップシャドウを設定します。

ウォーターテキストの設定

2.次にシャドウ(内側)を設定します。

ウォーターテキストの設定

3.光彩(内側)を調整します。

ウォーターテキストの設定

4.べベルとエンボスを調整します。

ウォーターテキストの設定

5.カラーオーバーレイをセットします。色は#ccffffです。

ウォーターテキストの設定

ホワイトテキストレイヤーを不透明6%にセットするとこんな感じになると思います。

ウォーターテキストの設定



Step3:水滴を加える

新しいレイヤーを作成し水滴をテキストの周りに加えます。そしてテキストレイヤーから「レイヤースタイルをコピー」を選択し、新しく作ったレイヤーにペーストします。貼り付けたレイヤーにべベルとエンボスを調整することを考慮したうえで露出します。 包括光源を90で、角度を75度にして使用します。

では水をこぼしていきます。あなたの書いたレイヤーとホワイトカラーで書いた水滴をラスタライズしてください。

水滴を加える



Step4:完成

ここからもう少しだけバックグラウンドに手を加えてリアルっぽさを追加していきます。テキストの下に新しいレイヤーを作成し、水滴とカラーを白にした30pxのブラシで線を書きます。「フィルタ」>「ノイズ」>「ノイズ」を加える を60%で単色で均一にセットします。そしてこのレイヤーの不透明を4%-6%に設定します。違うカラーやテクスチャを使用して異なった結果を試してみるのもいいと思います。

完成



引用:Web Design Library 著者:bizarotrips.com 翻訳:山下



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング