【Photoshop】レトロフューチャー風テキストエフェクトの作り方

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

Photoshop（フォトショップ）で1980年代のレトロフューチャー風のロゴテキストの作り方を解説します。

ギラギラとしたクドいデザインのレトロフューチャーテイストのグラフィックが作れます。
フォトショ初心者の方にも再現できるよう、順を追ってテキストエフェクトのメイキングを紹介！

レトロな近未来風の表現をゼロから作成し、Photoshopの使い方をより詳しく学べるコンテンツです。

この記事の目次

何が作れるの？

Photoshop（フォトショップ）を使って上記のようなグラフィックが作れます。
流行のレトロフューチャー系のグラフィックをゼロから作成し、Webデザインや紙面デザインなど、様々なクリエイティブに活用してみませんか？

1980年代風レトロフューチャーロゴの作り方

それではPhotoshopを使って1980年代風のレトロフューチャー系グラフィックの作り方を解説します。
フォトショ初心者の方にも再現できるよう、順を追ってメイキングを解説いたします！

Photoshopを導入しましょう

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

文字にレイヤー効果を追加

STEP.1

文字を入力

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

サンプルの使用フォントは [ Prohibition ] のRegularです。

レイヤーパネルの [ 塗り ] を0%にしましょう。

STEP.2

境界線を追加

[ レイヤースタイルを追加 ] → [ 境界線 ] を追加します。

サイズ：10px　位置：内側
描画モード：通常　不透明度：100%
塗りつぶしタイプ：グラデーション
スタイル：線形　レイヤーに整列にチェック
角度：90°　スケール：100%　方法：クラシック

グラデ①　色：#0058dc
グラデ②　色：#00b1ff

すると左図のような状態になります。

STEP.3

グラデーションオーバーレイを追加

[ レイヤースタイルを追加 ] → [ グラデーションオーバーレイ ] を追加します。

描画モード：乗算　ディザにチェック　不透明度：100%
スタイル：線形　逆方向とシェイプ内で作成にチェック
角度：90°　比率：100%　方法：クラシック

グラデ①　色：#322955　位置：0%
グラデ②　色：#2136a4　位置：10%
グラデ③　色：#2ea7ed　位置：28%
グラデ④　色：#89e7fe　位置：38%
グラデ⑤　色：#ffffff　位置：48%
グラデ⑥　色：#ffffff　位置：52%
グラデ⑦　色：#671578　位置：59%
グラデ⑧　色：#c527d8　位置：80%
グラデ⑨　色：#fce9ff　位置：100%

グラデーションオーバーレイが追加され、文字全体に青・白・紫のグラデーションが設定できました。

FINISH

一旦メインロゴの完成

[ レイヤースタイルを追加 ] → [ ベベルとエンボス ] を追加。

スタイル：エンボスの境界線を描く　テクニック：滑らかに
深さ：150%　方向：上へ
サイズ：8px　ソフト：1px
角度：90°　高度：30°
光沢輪郭：カスタム　アンチエイリアスにチェック
ハイライトのモード：リニアライト　色：#ffffff　不透明度：100%
シャドウのモード：通常　色：#000000 不透明度：0%

文字の周囲に立体的な表現が追加できました。
一旦これで終了、次はパターンオーバーレイ用の素材を作ります。

パターンを作る

パターンを作り、より密度の高いレトロフューチャーを表現します。
無くても問題ないので面倒な方は飛ばしてOK、ただしある方がよりクオリティが高まりますよ。

STEP.1

横長の新規ドキュメントを作成

1000px x 400px 72px/inchの新規ドキュメントを作成します。

※フォトショ未導入の方は事前にフォトプラン公式サイト（月額は最安の1,078円）から入手しておきましょう。

STEP.2

ブラシで線を描く

[ ブラシツール ] を使って左図のような線を描きます。
大体で構いません。

ブラシ先端：ハード円ブラシ
ブラシサイズ：6

下半分を塗りつぶします。
[ 塗りつぶしツール ] を使うと簡単ですよ。

STEP.3

レイヤーマスクを追加

[ レイヤーマスクを追加 ] をクリックします。

左図のようにマスクします。ブラシツールやグラデーションツールを使ってマスクしましょう。

サンプルは下記ブラシでマスクしています。
ブラシ先端：ソフト円ブラシ
ブラシサイズ：200

FINISH

パターンを定義する

背景を無しにし、作成したパターンオブジェクトのみ表示させます。

[ 編集 ] → [ パターンを定義 ] をクリックします。
[ パターン名 ] にお好きな名称を入力し、[ OK ] をクリックしたら完成です。

作成したパターンのPSDは名前を付けて保存し、閉じます。

パターンオーバーレイを追加

STEP.1

レイヤースタイルを追加

文字オブジェクトに [ レイヤースタイルを追加 ] → [ パターンオーバーレイ ] を追加します。

STEP.2

パターンを設定

描画モード：乗算
不透明度：94%
パターン：先ほど登録したパターン
角度：0°
比率：130%（適宜調整）
レイヤーにリンクにチェック

FINISH

完成

すると文字の中央辺りに黒い波線の境界が追加されます。
これでレトロフューチャー風のメインロゴが完成しました。

背景透過のロゴ

背景透過のロゴが欲しい方は、背景を非表示にした状態で [ Ctrl + Alt + S ] → [ ファイルの種類をPNG ] にして書き出すと便利です。(Mac：Command + Option + S)
Webや紙面など、ロゴを使いたい媒体にご活用ください。

サブテキストを追加

STEP.1

文字を入力

サブテキスト用の文字オブジェクトを作成します。

[ 文字ツール ] でお好きな文字を入力。
色：#ff1abc

サンプルのフォントは [ Sarah Script ] を使いました。

STEP.2

光彩(外側)を追加

文字オブジェクトに [ レイヤースタイルを追加 ] → [ 光彩(外側) ] を追加します。

描画モード：スクリーン　不透明度：50%
ノイズ：0%　色：#ff1abc
テクニック：さらにソフトに　スプレッド：0%　サイズ：25px
輪郭：線形　範囲：50%　適用度：0%

STEP.3

シャドウ(内側)を追加

[ レイヤースタイルを追加 ] → [ シャドウ(内側) ] を追加します。

描画モード：焼き込み（リニア）　色：#3650be　不透明度：50%
角度：-90°　包括光源を使用にチェック
距離：5px　チョーク：0%　サイズ：10px
輪郭：線形　ノイズ：0%

すると左図のような状態になります。

FINISH

ベベルとエンボス

[ レイヤースタイルを追加 ] → [ ベベルとエンボス ] を追加。

スタイル：ベベル（内側）　テクニック：滑らかに
深さ：700%　方向：上へ　サイズ：8px　ソフト：2px
角度：90°　高度：40°　光沢輪郭：カスタム
アンチエイリアスにチェック
ハイライトのモード：ハードライト　色：#ffffff　不透明度：100%
シャドウのモード：通常　色：#000000　不透明度：0%

サブテキストの質感ができました。
レトロな印象を感じさせるデザインですね。

質感もそうですが、選択する書体が重要です。
[ Sarah Script ] はレトロな雰囲気を簡単に出せますよ。

背景を追加したら完成

STEP.1

ベースの背景を作成

背景を作成しましょう。
ベタ塗りレイヤーに [ グラデーションオーバーレイ ] を追加。

グラデ①　色：#24228c　位置：0%
グラデ②　色：#000000　位置：100%

スタイルを [ 円形 ] にすると左図のような表現が可能です。

STEP.2

パースグリッドを作成

[ ツールパネル ] → [ ラインツール ] でパースグリッドのデザインパーツを作成します。

線の色：#c233cc　塗り：無し
線の太さ：4px

STEP.3

黒い山を作成

[ ペンツール ] で背景の黒い山を作成します。
塗り：#000000
線：無し

FINISH

完成

メインの文字オブジェクトに [ レイヤースタイルを追加 ] → [ 光彩(外側) ] を追加します。

描画モード：スクリーン　不透明度：20%
ノイズ：0%　色：#abb5ff
テクニック：さらにソフトに　スプレッド：0%　サイズ：35px
輪郭：線形　範囲：50%　適用度：0%

以上でレトロフューチャー風のロゴデザインが完成しました。
基本的にレイヤー効果の掛け合わせでレトロフューチャー風の表現は可能！

まだPhotoshopを導入されていない方はフォトプラン公式サイト（月額は最安の1,078円）から入手しておきましょう。

更に高品質なレトロフューチャーエフェクトのPSD

上記で解説したレトロフューチャー表現を更に発展させた高品質なエフェクトPSDです。
全て商用可能！
フォトショ初心者の方でも文字を差し替えるだけでサンプルのようなプロ品質が出せるチートアイテム！
超短時間で高品質な作品制作を効率的に行いたい方にオススメですよ。

#01 Classic 80’s Retro Font Styles

1980年代のレトロなテキストエフェクトが作れるPSDです。文字を差し替えるだけなので作業時間は数分！

ダウンロードする

#02 Retro 80’s Style Logo Text Effect Mockup

ギラギラしたレトロフューチャー風のロゴが作れるテキストエフェクトPSDです。立体的な素敵ですね。

ダウンロードする

#03 Violet Future Text Style

紫色の派手なレトロフューチャー風ロゴが作れるテキストエフェクトです。ロゴデザイン、背景デザイン、全て揃っているので誰でもあっという間に高品質なグラフィックが作れますよ。

ダウンロードする

#04 Cyberpunk Style Text Effect

グリッチエフェクトが加えられたレトロフューチャー風のテキストエフェクトです。

ダウンロードする

#05 Cyberpunk and Cutout Effect

画像をAKIRAのようなサイバーパンク風の世界観にできるエフェクトPSDです。原色バリバリのパンチの効いたグラフィックが一瞬で作成できますよ。

ダウンロードする

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

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

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

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

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

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

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

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

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

良質な素材をもっと見る

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

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

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

おわりに

以上、Photoshop（フォトショップ）で1980年代風のレトロフューチャーロゴを作る方法についてでした。

レイヤー効果を組合わせる事でレトロ感溢れるデザインが作れます。
文字の差し替えや色変更など、後から簡単に編集できるのもレイヤー効果の強みですよ。

流行のレトロフューチャー系デザインを自作し、Webデザインやバナーデザイン、紙面デザイン等に活用して下さい。

ではまた！

【Photoshop】サイバーパンク風の加工をお手軽にする方法

【Photoshop】1980年代のレトロ風カットアウト表現の作り方

テキストエフェクトを自作してみよう

テキストを様々な質感に変える事ができるテキストエフェクトを自作してみませんか？
よりハイレベルなPhotoshopの使い方を学習する事ができます。

【Photoshop】アメコミ風ロゴのテキストエフェクトを作ってみよう

【Photoshop】燃えさかる炎のテキストエフェクトPSD

【Photoshop】ハチミツのような質感のテキストエフェクトの作り方

【Photoshop】レトロフューチャー風テキストエフェクトの作り方

【Photoshop】テキストをネオンサイン風にする方法を徹底解説【フォトショ初心者】

【Photoshop】レイヤースタイルでポップなロゴを作る方法【フォトショ初心者】

【Photoshop】フォトショでゴールド風（黄金風）効果の作り方

【Photoshop】シルバー（銀）効果の作り方を徹底解説

InDesignは活用されていますか？

Photoshopだけでなく、InDesign（インデザイン）も活用されていますか？
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はInDesign公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート40選はコチラ！

Photoshopの操作方法

フォトショ基本操作