【ロゴ】フォントでつくる!透明アクリルの押し出し文字

【ロゴ】フォントでつくる!透明アクリルの押し出し文字

【Photoshop講座】このレッスンは、難しい「3D 機能」を使わない簡単な方法です。入力した好みのフォントから、透明アクリルの立体効果をつくり出すことができます。ポップでキュートなロゴを作成しましょう。



ぼかしの軌跡を利用する!
オブジェクトのシルエットに[ぼかし(移動)]を適用すると、移動した距離にぼかしの軌跡が残ります。これに[輪郭検出]を適用すると、ぼかしの軌跡がはっきりして、3D ソフトで作成したような押し出しが表現できます。といっても、これだけでは不十分なので、不透明な部分や表面が反射している様子を加えていきましょう。

3D 機能を使わず押し出し文字をつくる

これから行う操作は、入力したテキストから、難しい「3D 機能」を使わずに、立体的な効果を加える方法です。使用するフォントは任意で設定しますが、作例とは違うピクセルサイズの画像では、フィルターの効果が発揮できないことがあります。透明アクリルの質感が十分に発揮できる、太い書体を選んでください。
画像にテキストを入力→3D 機能を使わず押し出し文字をつくる

ベースのフォントを入力する

素材画像をダウンロードして開きます。素材画像は、[幅 : 1280 pixel]、[高さ : 720 pixel] 、[解像度 : 300 pixel/inch]、[モード : RGB カラー] を使用しています。
素材画像を開く
素材画像を開く
どんな画像にも対応!
背景に敷く画像は、工法とは直接関係しません。濃いエッジ部分と対比できる明るい素材なら、どんな画像にも対応できます。もちろん、白地でもかまいません。
白地カンバスで作成した例
白地カンバスで作成した例
[レイヤー] パネルで、[新規グループを作成] をクリックして、[グループ 1] を作成します。
[グループ 1] を作成
[グループ 1] を作成
オブジェクトをひとつにまとめる!
このレッスンは、複数のレイヤーで構成するので、オブジェクトをひとつにまとめる、グループを作成しておきましょう。
[新規レイヤーを作成] をクリックして、[レイヤー 1] を作成します。
[レイヤー 1] を作成
[レイヤー 1] を作成
[ツール] パネルで、[横書き文字ツール] を選択します。
[横書き文字ツール] を選択
[横書き文字ツール] を選択
オプションバーで、任意のフォントを設定し、[フォントサイズを設定] に「140 pt」を入力します。
[アンチエイリアスを設定] に [滑らかに] を選択します。
[アンチエイリアスを設定] に [滑らかに] を選択
[アンチエイリアスを設定] に [滑らかに] を選択
任意のフォントを設定!
作例では、「CheerScript」を設定していますが、フォント環境はご使用のパソコンによって異なります。リスト表示される任意のフォントを設定してください。[整列オプション] 、[テキストカラーを設定] は、直接的な影響がないため、任意で行なってください。
ドキュメント内をクリックして、ポイントテキストで文字を入力します。すべての文字が入力できたら、[enter] キーを押して、入力を確定します。
文字を入力
文字を入力
テキストをシェイプに変換!
作例では省略しますが、文字と文字のつなぎ目に修正を加えるため、テキストをシェイプに変換します。修正する必要がない場合は、テキストレーヤーのままでも OK です。テキストレイヤー、シェイプレイヤー、ピクセルレイヤー、いずれも工法は同じです。それぞれを読み換えてください。
文字と文字のつなぎ目に修正を加える → テキストをシェイプに変換
[レイヤー] パネルで、テキストレイヤー、または、シェイプレイヤーを選択します。レイヤーが選択されていることを、必ず確認してください。
シェイプレイヤーを選択
シェイプレイヤーを選択
[編集] メニューから、[変形] → [回転] を選択、または、[command (Ctrl)] + [T] キーを押して、変形のバウンディングボックスを表示します。
バウンディングボックスの外側をドラッグして、文字列を反時計回りに回転します。オブジェクトの回転ができたら、[enter] キーを押して変形を確定します。
変形のバウンディングボックスを表示 → 文字列を反時計回りに回転
回転で押し出し効果を強調!
押し出しの効果には、立体化したオブジェクトの側面が必要です。文字列を少しだけ回転させておくと、その懐が広くなり、擬似的な遠近感との馴染みもよくなるので、押し出し効果をより強調することができます。
このレッスンの動画を配信中!
【Photoshop講座】フォントでつくる!透明アクリルの押し出し文字
サムネールをクリックすると、YouTube 動画にリンクします。

べた塗りマスクでラスタライズする

[レイヤー] パネルで、[レイヤーの表示 / 非表示] をクリックして、テキストレイヤー、またはシェイプレイヤーを非表示にします。
レイヤーサムネールを [command (Ctrl)] キーを押しながらクリックして、文字列の選択範囲を作成します。
[command (Ctrl)] + クリック
[command (Ctrl)] + クリック
文字列の選択範囲が作成されたことを確認します。
文字列の選択範囲を確認
文字列の選択範囲を確認
[レイヤー] パネルで、[塗りつぶしまたは調整レイヤーを新規作成] をクリックし、メニューから、[べた塗り] を選択して、[べた塗り 1] を作成します。
[べた塗り 1] を作成
[べた塗り 1] を作成
[カラーピッカー] ダイアログで、新しい色に [H : 336°/ S : 100% / B : 77%] を設定して、[OK] をクリックします。
[カラーピッカー] ダイアログを設定
[カラーピッカー] ダイアログを設定
[べた塗り 1] で、テキストレイヤー、またはシェイプレイヤーがラスタライズできました。
[べた塗り 1] でラスタライズできた
[べた塗り 1] でラスタライズできた
ラスタライズとは?
ラスタライズとは、ベクトル画像をビットマップ画像に変換する操作です。テキストレイヤーやシェイプレイヤーは、その塗りの領域を、数式で定義された、直線と曲線の集まりで表します。
ベクトル画像は、ハッキリした塗り分けを得意としますが、曖昧で細かい表現は苦手です。ビットマップ画像に変換すると、色情報が小さなピクセル単位に分散されるので、ノイズやぼかしなどの加工が柔軟に行えます。
[レイヤー] パネルで、[べた塗り 1] レイヤーマスクを選択します。レイヤーマスクが選択されていることを、必ず確認してください。
[べた塗り 1] レイヤーマスクを選択
[べた塗り 1] レイヤーマスクを選択
[フィルター] メニューから、[ぼかし] → [ぼかし (移動)] を選択します。[ぼかし (移動)] ダイアログで、[角度] に「-60」°、[距離] に「40」pixel を設定して、[OK] をクリックします。
[ぼかし (移動)] ダイアログを設定
[ぼかし (移動)] ダイアログを設定
[レイヤー] パネルで、描画モードに [ハードライト] を選択します。
[ハードライト] を選択
[ハードライト] を選択
ベースの文字列を、べた塗りマスクに変換してラスタライズし、空の背景と合成することができました。
文字列をぼかす → [ハードライト] で背景と合成
色の印象を担うレイヤー!
べた塗りマスクで、ラスタライズした文字列は、色の印象を担う重要なレイヤーです。透明アクリルの質感では、光が屈折するレンズのような表現が必要なため、背景がそのまま透けて見えるのではなく、明るさやカラーが強調されるような工夫をします。
基本がわかる動画を配信中!
チャンネル登録をお願いします!

境界線のべた塗りマスクを作成する

[レイヤー] パネルで、[塗りつぶしまたは調整レイヤーを新規作成] をクリックし、メニューから、[べた塗り] を選択して、[べた塗り 2] を作成します。
[べた塗り 2] を作成
[べた塗り 2] を作成
[カラーピッカー] ダイアログで、新しい色に [H : 336°/ S : 100% / B : 77%] を設定して、[OK] をクリックします。作例では、[べた塗り 1] と同じ色を設定しました。
[カラーピッカー] ダイアログを設定
[カラーピッカー] ダイアログを設定
[レイヤー] パネルで、[べた塗り 2] レイヤーマスクサムネールを [option (Alt)] キーを押しながらクリックして、ドキュメントウィンドウをレイヤーマスクモードに切り替えます。
[option (Alt)] + クリック
[option (Alt)] + クリック
ベースの文字列のレイヤーサムネールを [command (Ctrl)] + クリックします。
[command (Ctrl)] + クリック
[command (Ctrl)] + クリック
レイヤーマスクモードで、文字列の選択範囲を確認します。
文字列の選択範囲を確認
文字列の選択範囲を確認
[ツール] パネルで、[描画色と背景色を入れ替える] をクリックして、描画色にブラックを設定します。
描画色と背景色を入れ替える
描画色と背景色を入れ替える
[編集] メニューから、[境界線を描く] を選択します。[境界線を描く] ダイアログで、[幅] に「12 px」、[位置] に [内側] を選択して、[OK] をクリックします。
[境界線を描く] ダイアログを設定
[境界線を描く] ダイアログを設定
境界線が描けたら、[command (Ctrl)] + [D] キーを押して、選択を解除します。
文字列の境界線が描けた
文字列の境界線が描けた
境界線はアクリル板の厚み!
作例でイメージするのは、中身が空洞なった鋳型です。透明アクリルの質感を表現するには、この板状の厚みが不可欠です。側面から透けて見える厚みは、文字列を強調する役目も果たします。バランスのいい境界線を設定しましょう。
基本がわかる動画を配信中!
チャンネル登録をお願いします!

アクリルの質感をつくる

[フィルター] メニューから、[ぼかし] → [ぼかし (移動)] を選択します。[ぼかし (移動)] ダイアログで、[角度] に「-60」°、[距離] に「40」pixel を設定して、[OK] をクリックします。この設定値は、[べた塗り 1] と同じにしてください。
[ぼかし (移動)] ダイアログを設定
[ぼかし (移動)] ダイアログを設定
境界線をぼかすことができました。
境界線をぼかすことができた
境界線をぼかすことができた
[フィルター] メニューから、[表現手法] → [輪郭検出] を選択して適用します。
[輪郭検出] が適用できたら、[command (Ctrl)] + [I] キーを押して、階調を反転します。
[輪郭検出] を適用 → 階調を反転
[レイヤー] パネルで、[べた塗り 2] レイヤーサムネールを選択して、ドキュメントウィンドウを通常の画像描画モードに戻します。
[べた塗り 2] を選択
[べた塗り 2] を選択
描画モードに [乗算] を選択します。
描画モードに [乗算] を選択
描画モードに [乗算] を選択
境界線の輪郭が合成できた
境界線の輪郭が合成できた
[レイヤー] パネルで、[べた塗り 2] を [新規レイヤーを作成] にドラッグして、レイヤーを複製します。作例では、4枚のレイヤーを複製して、効果の強さを調整しました。
[べた塗り 2] を複製
[べた塗り 2] を複製
4枚のレイヤーを複製
4枚のレイヤーを複製
レイヤーを複製することにより、アクリルの質感をつくることができました。
アクリルの質感をつくることができた
アクリルの質感をつくることができた
枚数を増やすほど濃くなる!
[べた塗り 2] を複製する効果は、背景色、設定色により異なります。描画モードを [乗算] に設定しているので、枚数を増やすほど色が濃くなります。塗りつぶし調整レイヤーは、設定後も編集できるので、ベースと違う色を設定しても、面白い効果がつくり出せるでしょう。
基本がわかる動画を配信中!
チャンネル登録をお願いします!

最前面に文字列を配置する

[レイヤー] パネルで、テキストレイヤー、またはシェイプレイヤーを [新規レイヤーを作成] にドラッグして複製します。
シェイプレイヤーを複製
シェイプレイヤーを複製
複製したレイヤーのコピーを [グループ 1] 内の最前面へドラッグして移動します。
[グループ 1] 内の最前面へドラッグして移動
[グループ 1] 内の最前面へドラッグして移動
[レイヤー] パネルで、[レイヤーを表示 / 非表示] をクリックして、レイヤーを表示します。
[レイヤーを表示 / 非表示] をクリック
[レイヤーを表示 / 非表示] をクリック
[ツール] パネルで、[移動ツール] を選択します。
[移動ツール] を選択
[移動ツール] を選択
表示した文字列を、斜め左上へドラッグして移動し、境界線の位置に合わせて配置します。スマートガイドを参考にしてください。
文字列を斜め左上へドラッグ → 境界線の位置に合わせて配置
最前面に効果をつけるための文字列が配置できました。
最前面に文字列を配置できた
最前面に文字列を配置できた
ベースの文字列は温存?
使用していないベースの文字列は、特定の位置をキープさせておくために温存しています。
ベースの文字列を、そのまま最前面へ移動して、境界線の位置に合わせてもかまいません。

最前面に反射光をつける

[レイヤー] パネルで、テキストレイヤー、またはシェイプレイヤーの右端空きスペースをダブルクリックします。
空きスペースをダブルクリック
空きスペースをダブルクリック
[レイヤースタイル] ダイアログで、[レイヤー効果] → [高度な合成] セクションの [塗りの不透明度] に「0」% を入力します。
[塗りの不透明度] に「0」% を入力
[塗りの不透明度] に「0」% を入力
[スタイル] メニューから、[ベベルとエンボス] を選択します。
[ベベルとエンボス] → [構造] セクションを設定します。
[陰影] セクションを設定します。
[ベベルとエンボス] を設定
[ベベルとエンボス] を設定
【設定値】
● [スタイル] に [ベベル (内側)] を選択
● [テクニック] に [滑らかに] を選択
● [深さ] に「100」% を入力
● [方向] に [上へ] を選択
● [サイズ] に「4」px を入力
● [ソフト] に「0」px を入力
● [包括光源を使用] オフ
● [角度] に「120」°を入力
● [高度] に「75」°を入力
● [光沢輪郭] に [線形] を選択
● [アンチエイリアス] オフ
● [ハイライトのモード] に [スクリーン] を選択
● [不透明度] に「90」% を入力
● [シャドウのモード] に [乗算] を選択
● [不透明度] に「0」% を入力
ハイライトのみの効果!
[ベベルとエンボス] の設定は、本来の立体的な効果ではなく、最前面の文字列のエッジに、ハイライトをつけるために行います。透明アクリルの質感では、ハイライトの幅を狭めて、強めにすることがポイントです。ハイライトの幅は、[構造] セクションの [サイズ] と、[陰影] セクションの [高度] に影響します。
適用前 → エッジにハイライトをつける
[スタイル] メニューから、[シャドウ (内側)] を選択します。
[シャドウ (内側)] → [構造] セクションを設定します。
[シャドウ (内側)] を設定
[シャドウ (内側)] を設定
【設定値】
● [描画モード] に [スクリーン] を選択
● [シャドウのカラーを設定] をクリック → 以下のカラーを設定
● [不透明度] に「25」% を入力
● [包括光源を使用] オフ
● [角度] に「-60」°を入力
● [距離] に「4」px を入力
● [チョーク] に「0」% を入力
● [サイズ] に「2」px を入力
[カラーピッカー] ダイアログを設定
[カラーピッカー] ダイアログを設定
環境光を意識する!
[シャドウ (内側)] の設定は、エッジのハイライトの反対方向を、強調するために行います。作例では、背景に敷いている青空の環境光を意識し、[構造] セクションの [シャドウのカラーを設定] に、少し青みがかった明るいグレーを設定しています。
適用前 → エッジに環境光をつける
[スタイル] メニューから、[グラデーションオーバーレイ] を選択します。
[グラデーションオーバーレイ] → [グラデーション] セクションを設定します。
[グラデーションオーバーレイ] を設定
[グラデーションオーバーレイ] を設定
【設定値】
● [描画モード] に [スクリーン] を選択
● [ディザ] オン
● [不透明度] に「100」% を入力
● [クリックでグラデーションを編集] をクリック → 以下のグラデーションを設定
● [スタイル] に [線形] を選択
● [シェイプ内で作成] オン
● [角度] に「117」°を入力
● [比率] に「100」% を入力
[グラデーションエディター] ダイアログを設定
[グラデーションエディター] ダイアログを設定
【設定値】
[位置 : 0%] [不透明度 : 30%]
[位置 : 54%] [不透明度 : 40%]
[位置 : 55%] [不透明度 : 50%]
[位置 : 100%] [不透明度 : 70%]
[位置 : 0%] [H : 0° / S : 0% / B : 100%]
[位置 : 100%] [H : 0° / S : 0% / B : 100%]
すべての設定ができたら、[レイヤースタイル] ダイアログで、[OK] をクリックします。透明アクリルの押し出し文字が完成しました。
透明アクリルの押し出し文字が完成した
透明アクリルの押し出し文字が完成した
反射光の映り込みを設定!
[グラデーションオーバーレイ] の設定は、反射光の映り込みを設定するために行います。[グラデーション] の設定は、明るい部分と、暗い部分を、際立たせることがポイントです。[角度] は、対象の文字列に合わせて、調整してください。
適用前 → 最前面に反射光をつける

スポンサード リンク