【Photoshop】パースの付いた立体文字の作り方for初心者

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

Adobe Photoshop（フォトショップ）でパースの付いた立体文字をゼロから作る方法をフォトショ初心者の方に詳しく解説します。文字ツールで入力した普通の文字を立体的なロゴにできる文字編集テクニックです。

これからPhotoshopを始められる方、ロゴデザインやバナーデザインなどを自作されたい方にオススメのコンテンツですよ。

この記事の目次

何ができるの？

上記の様な立体文字がフォトショップでゼロから作れます。普通に入力した文字の形をお好きなパースで傾け、立体感を付与できます。ロゴ、バナー、チラシデザインなどでよく見かける文字表現が10分程度で簡単に作成できますよ。

パースの付いた文字の作り方

それではPhotoshopでパースの付いた文字を作っていきましょう。
フォトショ初心者の方にも簡単に使いこなせますよ。

Photoshopを導入しましょう

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

お好みのパースをつけて文字を傾ける

STEP.1

文字を入力＆ワープテキスト

[ 文字ツール ] でお好きな文字を入力します。
使用フォント：Cooper Black
サイズ：200pt

※ドキュメントサイズは下記です。
幅1920px x 高さ1080px
解像度：72px/inch

文字ツールで文字を選択した状態で [ ワープテキスト ] をクリックすると文字の形状を複雑にカスタマイズできます。
サンプルは [ 下弦 ] を適用しました。

STEP.2

スマートオブジェクトに変換

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

STEP.3

遠近法ワープで変形

Photoshop画面上部の [ 編集 ] → [ 遠近法ワープ ] をクリックします。

まずはレイアウトモードで文字レイヤーを囲いましょう。

ワープモードで遠近変形しましょう。設定後は画面上部の [ 〇 ] をクリックして確定します。確定後はレイヤー内の [ 遠近法ワープ ] をダブルクリックすると後から遠近感が再調整可能です。

※詳しい使い方はコチラの記事で解説しています。

FINISH

遠近法ワープの完了

以上で文字をパースに沿って変形させる事ができました。スピード感のあるロゴ等にも適している表現ですよ。

[ スマートオブジェクトに変換 ] し、表面用と立体用グループを作成しましょう。

文字に立体感を付与する

STEP.1

レイヤーを複製＆移動

[ Ctrl + J ] (Mac：⌘ + J) でレイヤーを複製し、[ 移動ツール ] をアクティブにし、上下左右のカーソルキーで下方向に1px移動します。

[ Ctrl + J ] → [ 1px移動 ] を複数回繰り返すと左図の様に立体感が付与できます。

位置をズラした例

下方向に1px+左下方向に1px移動させて複製した例です。右上に光源があるような立体感が付与できます。

もちろん右方向に1px+下方向に1pxといった方向でも構いませんよ。

STEP.2

レイヤースタイルを付与

最前面レイヤーを [ カラーオーバーレイ ] で塗り色の変更。下部の立体感を表現しているレイヤーにカラーオーバーレイと [ 境界線 ] を付与した例です。

FINISH

お好みでテクスチャを追加

仕上げにグランジテクスチャの [ Different types overlay texture ] を重ねます。ベクター形式なので使い勝手が抜群！
カラーオーバーレイで汚れを白色にし、不透明度80%にしたら完成です。

お好みで [ ノイズテクスチャ ] を作成して重ねるのもアリですよ。

立体感が出るテキストエフェクトPSD

その他の高品質な立体的な表現ができるテキストエフェクト素材です。全て商用利用可能なPSDですよ！

#01 Melting Text Effect

文字が溶けて流れ落ちるような液体・メルト（溶融）風のデザイン効果を簡単に適用できるテキストエフェクトPSDです。Photoshopなどで編集可能なプリセットで、タイポグラフィに動きや独特のビジュアルインパクトを加えられるので、ポスター・SNS・広告などのグラフィック制作に活用できます。

ダウンロードする

#02 Cutout Text Effect Mockup

文字の中が切り抜かれたように見えるカットアウト表現を特徴とするテキストモックアップ素材です。背景や写真などを文字内に透かして見せることで立体感と奥行きを演出でき、ポスターや広告、ロゴデザインなどのビジュアル制作で魅力的なレイアウトを素早く実現できます。

ダウンロードする

#03 3D Cube Text Design

文字を立体的なキューブ形状で表現した3Dテキストエフェクト素材です。奥行きと構造感のあるビジュアルが特徴で、タイトルやロゴに存在感を与え、広告やキービジュアル制作に適していますよ。

ダウンロードする

#04 Text Effect Mockup

波打ったカットアウト文字が簡単に反映できる編集可能なテキストエフェクト素材です。Photoshop等で文字を入れ替えるだけでプロ並みのビジュアル表現が可能になり、ポスターや広告デザイン制作の時間を大幅に短縮できます。

ダウンロードする

#05 Isometric 3D Text Effect Mockup

文字をアイソメトリック視点で立体的に表現した3Dテキストエフェクト素材です。奥行きと構造感が強調され、洗練された印象を与えるため、広告やタイトル、Webデザインなど幅広いグラフィック制作に適しています。

ダウンロードする

#06 Title 3D Comic Text Effect Mockup

文字を立体的なコミック調3Dデザインで表現できるモックアップPSD素材です。丸みのあるポップな立体文字は視認性が高く、楽しく躍動感のあるタイトルや見出しを手軽に制作でき、広告・SNS・子供向けコンテンツなどに適しています。

ダウンロードする

#07 Folded Text Effect

文字が折り紙や紙を折ったように立体的に表現されるテキストエフェクト素材です。シャープな陰影と構造感が特徴で、洗練された印象を与え、タイトルや広告、デザインアクセントに効果的ですよ。

ダウンロードする

#08 Layered Pages Text Effect Mockup

文字が複数のページやレイヤーを重ねたように立体構造で見せられるテキストエフェクト素材です。層ごとの陰影と重なりで深みと奥行きを演出し、タイトルや見出しに動きとデザイン性が付与可能。編集可能なテンプレートとして、広告やグラフィック制作の表現を豊かにできますよ。

ダウンロードする

#09 Bright Layered Text Effect Mockup

文字を明るくカラフルなレイヤーで重ねた立体的なテキストエフェクトPSD素材です。層ごとの光沢や陰影で鮮やかさと奥行きを演出し、ポスターや広告、SNSビジュアルに華やかで目を引くデザインを簡単に作れます。

ダウンロードする

#10 Space 3D Text Effect Mockup

宇宙を感じさせる背景や浮遊感のある立体文字を特徴とする3Dテキストエフェクトモックアップ素材です。深みのある空間表現で視覚的なインパクトを強め、SF・未来感のある広告やタイトルデザインに使えるテンプレートになっています。

ダウンロードする

高品質なテキストエフェクトPSD

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

文字を様々な質感へあっという間に変身させられるテキストエフェクトのPSD素材です。ロゴデザインや見出し等をはじめとしたクリエイティブに最適ですよ！

おわりに

以上、Photoshop（フォトショップ）でパースの付いた立体的なテキストエフェクトを作る方法でした。ロゴデザインやバナー、SNSやチラシ、ポスターなどに使えるグラフィック作成テクニックです。

ワープテキストや遠近法ワープはフォトショップで文字編集を行う上でよく使います。是非使い方をマスターし、様々なコンテンツ制作にお役立てください。

ではまた！

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

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