【Photoshop】溶解した不気味ロゴのテキストエフェクトメイキング

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）で文字が溶解したサイケデリックで不気味なテキストエフェクトを作る方法をフォトショ初心者の方に詳しく解説します。ロゴデザイン、Webサイトやバナー・チラシなどのメインビジュアル等、幅広い用途に活用できます。

フォトショップの様々な機能を網羅的に活用して作るテキストエフェクトなので、更にフォトショップを上達させたい方向けの学習素材としてもオススメですよ。

この記事の目次

何ができるの？

上記のようにPhotoshopを使って単なる文字を溶けた不気味な質感に変更できます。
一度作ってしまえば文字内容やフォントの変更も一瞬で可能ですよ！

溶解したロゴの作り方

Photoshopを使った溶解した不気味なテキストエフェクトを作る方法を解説します。
フォトショップ初心者の方でも再現可能な内容ですよ！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

ベースとなる文字を作成

STEP.1

文字を入力

新規ドキュメントを作成し、背景を黒色で塗りつぶします。（塗りつぶしの方法はコチラの記事で詳しく解説しています。）
次に [ 文字ツール ] でお好きな文字を入力します。

入力した文字レイヤーは右クリックメニューから [ スマートオブジェクトに変換 ] しておきましょう。

STEP.2

レイヤー効果を付与

[ レイヤー効果 ] → [ グラデーションオーバーレイ ] を適用します。

サンプルのグラデーションは下記設定です。
カラー①：#0272d4
カラー②：#fe00ad

すると文字に左図の様なグラデーションが追加できます。色の設定はお好みで調整して下さい。

STEP.3

各種フィルターを追加

[ フィルター ] → [ ぼかしギャラリー ] → [ パスのぼかし ] を適用します。

速度：115%
テイパー：25%
ぼかし（中央）にチェック

※ぼかし具合はお好みで調整して下さい。

[ フィルター ] → [ 変形 ] → [ 波形 ] を適用します。

波数：6
波長　最小：998　最大：999
振幅　最小：1　最大：50
比率　水平：100%　垂直：100%
種類：正弦波

設定後は [ OK ] をクリック。

[ フィルター ] → [ ぼかし ] → [ ぼかし(ガウス) ] を適用します。

半径：23.0pixel
※ぼかし具合はサンプルのぼけ具合と合わせて都度調整して下さい。

設定後は [ OK ] をクリック。

FINISH

ゆがみフィルターで歪ませる

[ フィルター ] → [ ゆがみ ] を適用。

ゆがみの設定画面が開きます。
左メニュー上部にある [ 前方ワープツール ] で文字をお好みで歪ませましょう。
※ゆがみ詳しい使い方はコチラの記事で解説しております。

設定後は [ OK ] をクリックしましょう。

するともやっと歪んだ文字が作成されます。
ゆがみの使い方には少しコツが必要なので、[ 再構築ツール ] も活用しながらお好みの形状にして下さい。

以上でベースとなる文字レイヤーの完成です。

文字レイヤーを重ねる

STEP.1

文字エフェクトのコピー①

先に作成したベースとなるスマートオブジェクトを [ Ctrl + J ] (Mac：⌘ + J) でコピーしましょう。

不透明度：80%
塗り：0%

レイヤー内のぼかし(ガウス)をダブルクリックし、下記設定に変更。

半径：12.0pixel

グラデーションオーバーレイを削除し、[ レイヤー効果 ] → [ カラーオーバーレイ ] を追加します。

描画モード：ビビッドライト
カラー：#58dde9

レイヤー内にある [ スマートフィルター ] の [ ゆがみ ] は左図のように控えめに調整しています。

すると左図の様な見た目になります。単体の文字より複雑で不気味な雰囲気になりましたね。

お好みで [ レイヤーマスク ] を追加し、文字の下部を [ グラデーションツール ] でマスクするのもアリですよ。

STEP.2

文字エフェクトのコピー②

STEP.1でコピーしたレイヤーを [ Ctrl + J ] (Mac：⌘ + J) でコピーしましょう。

不透明度：60%
塗り：0%

[ カラーオーバーレイ ] の設定を変更します。

描画モード：覆い焼きカラー
カラー：#ff0072
不透明度：90%

ゆがみの形状は左図の様に変更しました。
お好みで形状をカスタマイズして下さい。

レイヤーマスクを追加し、文字上部だけ表示されるように変更しました。すると文字上部にほんのりとオーラを追加する事ができます。

STEP.3

文字エフェクトのコピー③

STEP.2でコピーしたレイヤーを [ Ctrl + J ] (Mac：⌘ + J) でコピーしましょう。

不透明度：65%
塗り：0%

[ カラーオーバーレイ ] の設定を変更します。

描画モード：覆い焼きカラー
カラー：#b637d6
不透明度：80%

ぼかし(ガウス)をダブルクリックし、下記設定に変更しましょう。

半径：8.5pixel

ゆがみの形状です。サンプルはかなり控えめに歪ませていますが、お好みで調整して下さい。

左図の様な仕上がりになりました。レイヤーマスクの設定は入れていません。
溶けたような文字でサイケデリックな雰囲気が出てきましたね。

FINISH

文字エフェクトのコピー④

STEP.3でコピーしたレイヤーを [ Ctrl + J ] (Mac：⌘ + J) でコピーしましょう。

不透明度：90%
塗り：0%

[ カラーオーバーレイ ] の設定を変更します。

描画モード：ビビッドライト
カラー：#c70000
不透明度：30%

ぼかし(ガウス)をダブルクリックし、下記設定に変更。

半径：3.5pixel

ゆがみフィルターの形状です。少し大きめに歪ませて動きを付けています。コチラもお好みで調整して下さい。

以上で溶解したテキストエフェクトの形状が完成しました。複雑に色が重なり合い、サイケデリック風の不気味な雰囲気に仕上がりましたね。

質感付与と調整

STEP.1

ノイズテクスチャを追加

コチラの記事で作り方を解説しているノイズテクスチャを準備します。

描画モード：オーバーレイ
不透明度：40%

ノイズテクスチャレイヤーを [ Ctrl + J ] (Mac：⌘ + J) でコピーします。

描画モード：覆い焼き(リニア) – 加算
不透明度：20%

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ レベル補正 ] を追加します。

シャドウ入力レベル：0
中間調入力レベル：0.5
ハイライト入力レベル：255

※覆い焼き(リニア) – 加算にしたノイズテクスチャにクリップしておきましょう。

STEP.2

テキストエフェクト全体を補正

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ レベル補正 ] を追加します。

シャドウ入力レベル：10
中間調入力レベル：1
ハイライト入力レベル：240

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ トーンカーブ ] を追加します。

カーブの形状は左図のように明るい個所はより明るく、暗い個所はより暗くなるよう設定しています。

FINISH

テキストエフェクトの完成

以上でサイケデリックな世界観の溶けたようなテキストエフェクトが完成しました。

ロックバンドのジャケットロゴやサイバーパンク系SFのロゴ、そしてWebサイトやバナー、紙面デザインなど、様々なクリエイティブのグラフィックとして活用できますよ。

更に高品質なサイケデリックエフェクト

上記で紹介したテキストエフェクトをより発展させた高品質なエフェクトPSD素材です。
全て商用利用可能ですよ！

#01 Liquid Trails Text Effect

まるでゴーストのようなロゴが作れるテキストエフェクトです。不気味でサイケデリックなロゴやタイポグラフィがあっという間に作成できます。

ダウンロードする

#02 Liquid Psychedelic Text Effect

虹色の水のような、まるで覚せい剤を摂取した人が見ているような世界が再現できるテキストエフェクトです。難易度の高い不定形のロゴが簡単に作れます。

ダウンロードする

#03 Melting Text Effect

溶けているような文字が作成できるテキストエフェクトです。昔のモニタのようなテクスチャが良い感じですね。

ダウンロードする

#04 Fire Text Effect

非常に高品質でカッコいい炎の文字が作れるテキストエフェクトです。色を変えるとサイケデリック調の世界観にできますよ。

ダウンロードする

#05 Holographic Texture Text Effect Mockup Bundle

ホログラムの質感が再現できるテキストエフェクトです。21種類もの高品質なテクスチャが収録されており、パターン作成に困る事がありませんよ。

ダウンロードする

画像を大変身させられるエフェクト

【Photoshop】高品質＆商用可能なテキストエフェクト【PSD素材】

Photoshop初心者の方でもプロの仕事が短時間で再現できるエフェクトPSDです。難しい加工を画像を差し替えるだけで実現できるチート素材、全て商用利用可能！

テキストエフェクトの作り方まとめ

Photoshopでテキストエフェクトをゼロから自作する方法、そして1分で超高品質で商用利用可能なテキストエフェクトが作れるPSD素材の使い方と作例を解説しています。
ロゴデザイン、Webデザイン、バナーデザイン、各種DTPデザイン、UIデザイン、ポートフォリオ制作等。幅広いクリエイティブに活用できる内容です。

1分で高品質なエフェクトが作れるPSD

1分で超高品質なテキストエフェクトが作れるPSD素材です。
全て商用利用可能！
劇的にクリエイティブを効率化できる素材を活用してみませんか？

様々なテキストエフェクトのPSD素材

【Photoshop】高品質＆商用可能なテキストエフェクト【PSD素材】

Photoshopで使える商用利用可能で高品質な様々なテキストエフェクトのPSD素材を厳選しました。1分でプロクオリティの作品が作れるチート素材ですよ。

テキストエフェクトを自作

Photoshopを使いこなして様々な質感のテキストエフェクトを作る方法を解説しています。
気になるサムネイル画像をクリックすればメイキング記事にジャンプします。

おわりに

以上、Photoshop（フォトショップ）で文字が溶解したようなサイケデリック風テキストエフェクトのメイキングについてでした。

文字レイヤーをスマートオブジェクト化してから効果を加える事で、後から文字の変更が容易になります。一度作ってしまえば文字内容やフォントデザインの変更も一瞬！

ロゴデザインやWebサイトやバナー等のメインビジュアルなど、使いどころの多いテキストエフェクトなので是非お試しください。

ではまた！