透明性と動きを組み合わせた水が入ったガラステキスト は印象的な効果を生み出します。広告バナーやソーシャルメディアグラフィックなどのデジタルプロジェクトに最適で、Photoshopでこのルックを作成してアニメーション化することができます。レイヤースタイル、マスク、タイムラインアニメーションを使用して、リアルな水の入った流れるような動きでテキストを目を引くものにします。このチュートリアルでは、ステップバイステップでアニメーション化された水が入ったガラステキストを作成する方法を紹介します。さぁ、始めましょう！あなたのテキストを生き生きとさせましょう！
1. 新規ドキュメント
まず、幅2090 Px、高さ1000 Pxの新しいドキュメントを作成します。
次に、背景画像を見つけるためにsxc.huに移動します。検索バーに画像番号1327434を入力するだけです。
画像をクリックして、Photoshopドキュメントにドラッグアンドドロップします。
必要に応じて、画像を少し広げる必要があります （Ctrl+T）、そうして作業エリアに収まるようにします。
2. テキストを作成
このエフェクトを適用するテキストを入力します。カラーは#dbdbdb、サイズは300 Px、フォントは"FutonCondensed"を太字で使用します。他の太字のフォントでも問題ありません。ただ、水がよく見えるようにたっぷりのスペースが必要です。
テキストレイヤーを複製して、両方のレイヤーの名前を変更します。下のレイヤーを「unten」、上のレイヤーを「oben」とします。
3. 「unten」レイヤーのレイヤーエフェクト
「unten」レイヤーをダブルクリックして、以下のレイヤースタイルを追加します。
• ドロップシャドウ：
| カラー | #707070 |
| 角度 | 120°、「グローバルライト」を無効にする |
| 距離 | 1 Px |
| サイズ | 10 Px |
• インナーシャドウ：
| 角度 | 「グローバルライト」を無効にする |
| 距離 | 0 Px |
| サイズ | 10 Px |
| 輪郭 | 「Konturen laden」とクリックしてから右側の小さい矢印をクリックし、「wasser-1.shc」を選択して「wasser 1」をロードする |
• フラッターエッジおよびレリーフ：
| サイズ | 10 Px |
| ぼかし | 3 Px |
| シェーディング | 120°、「グローバルライト」を無効にし、高さ11° |
| 輪郭 | 「Konturen laden」とクリックしてから右側の小さい矢印をクリックし、「wasser-2.shc」を選択して「wasser 2」をロードする |
中間結果：
• フラッターエッジおよびレリーフ – 輪郭：
| スムージング | チェックを入れる |
| 輪郭 | 「Konturen laden」とクリックしてから右側の小さい矢印をクリックし、「wasser-3.shc」を選択して「wasser 3」をロードする |
| 領域 | 100% |
中間結果（「oben」レイヤーを一旦オフにしておく必要があります）：
「oben」レイヤーでは、塗りつぶしの不透明度を0%に設定して、後でレイヤーエフェクトのみが透過するようにします。
次に右側に少し離れたところをクリックして「oben」テキストレイヤーをダブルクリックし、次のレイヤーエフェクトを設定します。
• インナーシャドウ：
| 角度 | 「グローバルライト」を無効にする |
| 距離 | 0 Px |
| サイズ | 7 Px |
| 滑らかにする | チェックを入れる |
| 輪郭 | 「ウォーター 4」という輪郭を読み込む、輪郭の矢印をクリックし、次に右側の小さい矢印をクリックして、輪郭を読み込むを選択し、「wasser-4.shc」と選択する |
中間結果:
• 平らなエッジとレリーフ:
| サイズ | 12 Px (後で24 Pxでより立体感を増す実験も可能) |
| ぼかし | 2 Px |
| 影: | 120°「グローバルライト」を無効にし, 高さ16° |
| 輪郭 | 「ウォーター 5」という輪郭を読み込む、輪郭の矢印をクリックし、次に右側の小さい矢印をクリックして、輪郭を読み込むを選択し、「wasser-5.shc」と選択する |
中間結果:
• 平らなエッジとレリーフ - 輪郭:
| 輪郭 | 「ウォーター 6」という輪郭を読み込む、輪郭の矢印をクリックし、次に右側の小さい矢印をクリックして、輪郭を読み込むを選択し、「wasser-6.shc」と選択する |
| 領域 | 100% |
中間結果:
5. 水でテキストを満たす
今度は長方形ツールを取ります…
… そして、テキストの下半分を覆う長方形の形状を描きます。
色は#4594abであるべきです。この新しいレイヤーは、"下"と"上"のテキストレイヤーの間に置かれるべきです。
6. 最初のアンカーポイントを設定する
次に、アンカーポイント追加ツールを取ります…
… 続いて、各文字の外側のエッジにアンカーポイントを設定します。
7. 波を作成する
これを行ったら、文字の内部にさらにアンカーポイントを設定します。
直接選択ツールを使って、それぞれを少し上下に移動させ、波ができるようにします。余分なポイントがある場合、アンカーポイント削除ツールで削除できます。
中間結果:
8. 輪郭を削除する
次に、長方形レイヤーをグリッドに合わせます。 つまり、まずそれを複製し、下側のレイヤーを非表示にし、次にコピーを右クリックしてレイヤーをラスタライズを選択します。
Ctrlキーを押しながら、クリックして「下」のテキストレイヤーのレイヤーパレットのアイコンをクリックして、テキストを選択します。
そして、Ctrl+Shift+I を押して選択を反転させ、再度水形状コピーを選択し、Deleteを押します。その後下の水形状レイヤーを非表示にします。
9. 水に対するレイヤーエフェクトを追加する
そして、水のレイヤーにレイヤーエフェクトを追加するために、ダブルクリックします。これにより、水に実際の水の質感が与えられます。
• ドロップシャドウ:
| 塗りつぶし方法 | 乗算、#4494ab |
| グローバルライト | 無効 |
| 間隔 | 3 Px |
| オーバーフロー | 12 % |
| サイズ | 3 Px |
中間結果:
• 内側シャドウ:
| 塗りつぶし方法 | 乗算、#4494ab |
| 角度 | -75° |
| 間隔 | 0 Px |
| サイズ | 16 Px |
中間結果:
• フラットなエッジとリリーフ:
| サイズ | 9 Px |
| ぼかし | 3 Px |
| 角度 | 120°、"グローバルライト" 無効、高さ 42° |
| 輪郭 | "水" 7 を読み込む、輪郭の矢印をクリックして、次に右側の小さな矢印をクリックし、輪郭の読み込み をクリックして "water-7.shc" を選択する |
| 深度モード | カラーダッジ、#4295ac |
中間結果:
次の設定によって水のテクスチャが生成されます:
• 構造:
| パターン | 9 Px |
| スケーリング | 101 % |
| 深さ | +356 % |
• 光沢:
| 塗りつぶし方法 | 乗算、#4293aa |
| サイズ | 10 Px |
| 輪郭 | 幅広い円錐形、下の内容を参照。 |
中間結果:
水が少し暗いため、カラーオーバーレイ を追加します。そして明るい色が平坦すぎないように、塗りつぶし方法も変更します。指定は次の通りです:
• カラーオーバーレイ:
| 塗りつぶし方法 | ハードライト、#24bce1 |
中間結果:
• グラデーションオーバーレイ:
| 塗りつぶし方法 | ソフトライト |
中間結果:
中間結果拡大:
残りのテキストがただ灰色になりすぎず、ガラス容器のように見えるように、単に"下"レイヤに移動して、塗りつぶしの不透明度 を0% に設定します。
最終結果:
10. バリエーション: ブルーターンの変更
ここでは、テキストから何が可能かについて、いくつかの小さな最適化をひとつひとつ示します。例えば、レイヤーパレットに色相/彩度 調整レイヤーを追加して、水のブルーターンを変更できます…、
これを水形状のレイヤーに対して持っていき、押しながらAltキー を押し、クリック するとクリッピングマスク が作成され、エフェクトが下のレイヤーにのみ影響するようにします。
レバーを少し調整することで水にさらに奥行きを与えることができます。
11. バリエーション：水をアニメーション化する
別のアプローチとして、水レベルを複製する方法があります（前もって 切り抜きマスク を再度 Alt+クリック して適用）フラットエッジとレリーフ にダブルクリックして、レイヤースタイル設定に入りました。
そして、構造 に移動し、奥行き を 280% に変化させます。これにより、水の動きが少し変化します。
次に、水レベルを再度複製して構造を2度目に変更します…
… そして、奥行き の値を 470% に設定します。
次に、ウィンドウ＞アニメーション に移動して アニメーションパネル を呼び出します。
その後、フレームビュー に移るために下のシンボルをクリックします。
今、表示されている下のシンボルを2回クリックして、2つの追加フレームを作成します。
その後、最初のフレームを選択するためにそれをクリックします。
そして、下の2つの水レベルを非表示にします。上側の 切り抜きマスク のみが表示されるようにします。
次に、2番目のフレームを選択し、上下の水レベルを非表示にし、中央のみを表示します。 色相・彩度設定レイヤー を追加します。
同じ操作を3番目のフレームでも行い、下の水レベルのみが表示されるようにします。その後、3つのフレームをすべて選択して 秒 を 0.2 に設定します。
左側で 一度 の隣の三角形をクリックし、無制限 の項目に移動し、アニメーションが一度だけでなく繰り返されるようにします。
再生ボタン をクリックすると、水の動きが表示されます。アニメーションを GIF ファイルとして保存するには、ファイル＞Web およびデバイスに保存 を経由します。
そこで、GIF を選択し、保存 をクリックします。
全体を確認するには、ファイルをブラウザにドラッグ＆ドロップするとより良いです。そこで、再生されます。
以上で、完了しました。このワークショップが楽しかったことを願っています。以下に、アニメーション化された最終結果が再度表示されます:
