【Photoshop】真っ二つに切り裂いたテキストエフェクトの作り方

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

Photoshop（フォトショップ）で鋭いナイフで真っ二つに切り裂いたような表現ができるテキストエフェクトの作り方をフォトショ初心者の方に解説します。

タイトルデザイン、見出しデザイン、Webデザイン、バナーデザイン、紙面デザイン等。
Photoshopを使ったデザインを彩る素材として活用できるテクニックです。

これからフォトショップを始められる方、更にフォトショの使い方を知りたい方にオススメ！
Photoshopの操作を網羅的に学習できるコンテンツです。

この記事の目次

何ができるの？

当記事のチュートリアルを実践すると、上記のように文字やオブジェクトをナイフで切り裂いたような表現ができます。
一度テキストエフェクトを作ってしまえば後から簡単に文字やオブジェクトの変更が可能！

ロゴデザインや見出し、バナーのデザイン素材など、様々なクリエイティブに応用できます。

ナイフで切り裂いたようなテキストエフェクトの作り方

それではPhotoshopを使ったナイフで切り裂いたようなテキストエフェクトの作り方を解説します。
フォトショ初心者の方にも再現できるよう、詳しく解説いたします！

Photoshopを導入しましょう

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

STEP.1

文字を入力

キャンバスサイズは下記です。
幅：1920px　高さ：1080px　解像度：72px/inch

[ 文字ツール ] で好きな文字を入力します。

サンプルの文字は「Roboto Condensed Bold」を使用。
文字サイズ：500px

レイヤーパネルを確認します。
※非表示の場合は [ F7 ] で表示できます。

文字レイヤーを右クリックし [ スマートオブジェクトに変換 ] を適用します。

[ Ctrl + J ] (Mac：Command + J) でレイヤーをコピーし、計3つのスマートオブジェクトを用意します。
名称は下から順に文字①、文字②、文字③としています。

STEP.2

ペンツールでシェイプを作成

[ ペンツール ] でスライスしたい部分のシェイプを作成します。
直線なのでクリックでアンカーポイントを追加しましょう。

ツールモードを [ シェイプ ] にしておくのを忘れずに！

左図のように3つのシェイプを作成します。
分かりやすい様それぞれ色を変えていますが、何色でも構いません。

STEP.3

レイヤーマスクを追加

[ Ctrl ] (Mac：Command) を押しながらレイヤーサムネールをクリックすると対象シェイプの形で選択範囲が作成されます。

文字①をアクティブにし、[ レイヤーマスクを追加 ] をクリックしましょう。

なお、[ Ctrl + D ] (Mac：Command + D) で選択範囲を解除できます。

同様の手順で文字②、文字③に対してそれぞれのシェイプでレイヤーマスクを追加。

シェイプレイヤーは非表示にしておきましょう。

STEP.4

位置を調整する

文字①をアクティブにし、[ Ctrl +T ] (Mac：Command + T) で自由変形します。

バウンディングボックス外側をドラッグし、少し回転させて位置を離します。

文字②、文字③も同様に回転・移動させ、好みの位置に調整しましょう。

STEP.5

グラデーションを追加

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ グラデーション ] を追加。

文字①に対して [ クリッピングマスクを作成 ] を適用します。

スタイル：線形
角度：155°
比率：100%
選択範囲内で作成にチェック
方法：知覚的

グラデーションの設定です。
左から順に
グラデ①　色：#ffffff　位置：0%
グラデ②　色：#ffffff　位置：69%
グラデ③　色：#afaeae　位置：100%

※値は適宜調整してください。

左上にうっすらグレーが被るようなグラデーションに設定します。

レイヤー②、レイヤー③にもグラデーションを追加し、左図のような状態を作成します。

平面的だった絵に立体感が付与されました。

お好みで背景を追加します。

STEP.6

ドロップシャドウを追加

[ レイヤースタイルを追加 ] → [ ドロップシャドウ ] を追加。

描画モード：乗算　色：#000e08
不透明度：35%　角度：145°
距離：19px　スプレッド：0%　サイズ：21px

お好みで調整してください。

すると左図のように各文字要素にドロップシャドウが追加されました。

FINISH

文字色を調整したら完成

文字パーツをグループ化します。

[ 塗りつぶしまたは調整レイヤーを新規追加 ] → [ べた塗り ] を追加し、好きな色を設定。
その後レイヤーグループに [ クリッピングマスクを作成 ] を適用します。

すると文字全体の色味を変更できました。
以上でナイフで切り裂いたようなテキストエフェクトが完成しました。

スマートオブジェクトのレイヤーサムネールをダブルクリックすると文字オブジェクトが入ったPSBが別ウィンドウで開きます。

お好みの書体、文字列に変更して上書き保存すると元PSDの文字変更が可能。
未導入の方はフォトプラン公式サイト（月額は最安の1,180円）から入手できますよ。

テキストや画像を加工してみよう

写真や画像、テキストをゼロから加工する方法を解説しています。
Photoshop初心者の方でも再現できるよう、順を追って解説いたします！

【Photoshop】様々なテキストエフェクトをゼロから作ってみよう

【Photoshop】フォトエフェクトをゼロから作ってみよう

絵に動きを付けるエフェクト

先に紹介したスライス表現を更に発展させたエフェクトPSD素材です。
全て商用利用可能！
好きな画像やテキストに適用するとあっという間に再現できる便利な素材ばかりですよ。

#01 Laser Cut Text Effect

高熱のレーザーで文字を切り裂いたような表現ができるテキストエフェクトです。映画のタイトルロゴのような高品質な加工が誰でも超短時間で実現できます。

ダウンロードする

#02 Metallic Sliced Text Effect

重厚感のあるメタル素材で作られたテキストが熱いレーザーで切り裂かれている表現ができるテキストエフェクトです。スチームパンク、メタルな表現に最適な高品質素材です。

ダウンロードする

#03 Sliced Glitch text Effect

スライス表現とグリッチエフェクトと合わせたテキストエフェクトです。エラー表現などに適したPSD素材です。

ダウンロードする

#04 Sliced Text Effect

日本刀のような鋭い剣で一刀両断したような表現ができるテキストエフェクトPSDです。文字を差し替えるだけ、Photoshop初心者の方でもあっという間にサンプルのような仕上がりが再現できます。

ダウンロードする

#05 Blue 3D Text Effect Mockup

まるでSF映画のタイトルロゴのような表現ができるテキストエフェクトPSDです。スライスされた切り口にSF感溢れる青い光が追加できます。

ダウンロードする

#06 Sliced Action Scene Text Effect

グランジ加工されたテキストをV字でカットしたような表現ができるテキストエフェクトPSDです。アメリカの大作ドラマのロゴのようで非常にカッコいいですね。

ダウンロードする

#07 Sliced Text Effect

単にスライスしただけでなく、ぼかし表現も追加できるエフェクトPSDです。文字や画像など、お好きな素材に適用できます。

ダウンロードする

#08 Sliced Watercolor Smudge Effect

画像をリアルで高品質な水彩に加工し、尚且つ何重にもスライスされた表現ができるエフェクトPSDです。水彩エフェクトとして、スライスエフェクトとして、どちらの用途でも使えますよ。

ダウンロードする

#09 Modern Poster Design Photo Effect

対象物を波線でカットし、ずらしたような表現ができるエフェクトPSDです。ポスターデザインなど、メインビジュアル作成に最適なPSD素材です。

ダウンロードする

その他スライステキストエフェクト

【Photoshop】バラバラにスライスした文字が作れるテキストエフェクトPSD素材

商用利用可能で高品質なスライス系テキストエフェクトのPSD素材を20点厳選しました。併せてチェックされてみませんか？

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）で鋭いナイフでスパッと真っ二つに切り裂いたような表現ができるテキストエフェクトの作り方についてでした。

ベースとなる文字はスマートオブジェクトに変換しておくのがポイントです。
後から文字変更を行う際、一つ変更するだけで全てが一括で差し変わるので非常に便利！

タイトルデザイン、見出しデザイン、Webデザイン、バナーデザイン、紙面デザイン等、Photoshopを使ったデザイン制作に是非ご活用ください。

また、noteで当記事で作成したサンプルPSDを配布しております。

ではまた！

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

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