【Photoshop】立体感のあるヴィンテージ風ロゴの作り方

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

Photoshop（フォトショップ）で1970年代のアメリカンヴィンテージな雰囲気の立体感なロゴをゼロから作る方法をフォトショ初心者の方に詳しく解説します。

文字の差し替えが容易なテキストエフェクトなのでロゴや見出しデザイン、バナーやチラシなどの各種ビジュアル素材として非常に便利！Photoshopを使った汎用的なクリエイティブテクニックがゼロから学習できるコンテンツですよ。

この記事の目次

何ができるの？

上記の様なロゴがPhotoshopを使ってゼロから作れます。フォトショップでよく使う操作を網羅的に活用したテキストエフェクトメイキングなので、フォトショスキルを向上させたい方にもオススメです。

立体的なヴィンテージ系ロゴの作り方

1970年代のアメリカンヴィンテージな雰囲気の立体的なロゴをゼロから作る方法を解説します。フォトショ初心者の方でも順に進めていけば完成しますよ！

Photoshopを導入しましょう

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

ベースの立体文字を作成①

STEP.1

新規ドキュメントを作成

Photoshopで新規ドキュメントを作成します。サンプルは下記サイズを設定しました。

横幅：2000px
高さ：1200px
解像度：72pixel/inch
カラーモード：RGB

STEP.2

ベースの文字を入力

[ 文字ツール ] でお好きな文字を入力します。サンプルで使用しているフォントは [ DIN Condensed Variable ] です。[ バリアブルフォント ] なので文字の太さが自在に編集できますよ。

文字サイズ：450pt

入力した文字は [ スマートオブジェクトに変換 ] しておきましょう。

[ Ctrl + J ] (Mac：⌘ + J) でレイヤーを複製し、レイヤー名を変更します。上から順に「表面の立体用」、「表面の色用」、「メイン」、「影用」としました。

メインと影用は [ Ctrl + G] (Mac：⌘ + G) でグループ化し、一時的にメインのみ表示、その他レイヤーは非表示にします。

STEP.3

メイン文字の質感設定

メインレイヤーをアクティブにし、レイヤーパネル下部の [ fx ] → [ カラーオーバーレイ ] を追加します。

下記カラーオーバーレイの詳細設定です。
描画モード：通常
カラー：#6f5530
不透明度：100%

レイヤースタイルの左メニューから [ ベベルとエンボス ] を追加します。(見つからない場合はレイヤースタイルの画面左下の [ fx ] から追加。)

スタイル：ベベル(内側)　テクニック：滑らかに
深さ：1000%　方向：上へ　サイズ：0px
ソフト：0px　角度：80°　高度：50°
光沢輪郭：線形　ハイライトのモード：通常
カラー：#ffffff　不透明度：100%
シャドウのモード：焼き込みカラー
カラー：#312e36　不透明度：55%
設定後は右上の [ OK ] をクリック。

すると文字の色と境界に質感が付与できました。

STEP.4

メイン文字を立体的にする

レイヤースタイルを追加したメインの文字を [ Ctrl + J ] (Mac：⌘ + J) でコピー後、[ V ] を押して [ 移動ツール ] に変更。
Enterキー右下にある [ ↑ ] と [ ← ] を押すと左上に1px移動できます。

コピーしたレイヤーを更にコピーして移動…を繰り返しましょう。

すると左図の様な立体感のある文字表現ができました。サンプルはコピーと移動の動作を19回繰り返し、20pxの長さを表現しました。

この立体表現の作り方はコチラの記事でも詳しく解説しています。

FINISH

影を作成

影用レイヤーをアクティブにします。STEP.4の立体文字の作成と同じ要領でレイヤーをコピーし、[ V ] で [ 移動ツール ] に変更後、Enterキー右下の [ → ] と [ ↓ ] を押して右下方向に1px移動します。

同じ動作を好きなだけ繰り返しましょう。

影の完成です。19回同じ動作を繰り返し、20pxの影を作成しました。

影グループの不透明度は15%に変更しています。

ベースの立体文字を作成②

STEP.1

表面の色を設定

「表面の色用レイヤー」をアクティブにし、[ 移動ツール ] で最前面の文字と同じ位置に合わせます。

レイヤーパネル下部の [ fx ] → [ カラーオーバーレイ ] を追加します。

下記カラーオーバーレイの詳細設定です。
描画モード：スクリーン
カラー：#cb8d57
不透明度：100%

レイヤースタイル左メニューから [ グラデーションオーバーレイ ] を追加します。

描画モード：通常　不透明度：25%
グラデーション：白黒のグラデーション
スタイル：線形　シェイプ内で作成にチェック
角度：90°　比率：100%
方法：クラシック

立体文字表面の色が変更できました。

STEP.2

表面の色を設定

「表面の立体用」レイヤーをアクティブにし、[ 移動ツール ] で最前面の文字と同じ位置に合わせます。

レイヤーパネル右上の [ 塗り ] を [ 0% ] にしましょう。（レイヤーが何も無いように見えますが問題ありません。）

レイヤーパネル下部の [ fx ] → [ 境界線 ] を追加。

下記境界線の詳細設定です。
サイズ：5px　位置：内側
描画モード：通常　不透明度：100%
塗りつぶしタイプ：カラー
カラー：#b4a08a

レイヤースタイル左メニューから [ シャドウ(内側) ] を追加します。

描画モード：通常　カラー：#322b1e
不透明度：65%　角度：120°
距離：14px　チョーク：45%
サイズ：10px

レイヤーパネル下部の [ fx ] → [ カラーオーバーレイ ] を追加します。

下記カラーオーバーレイの詳細設定です。
描画モード：乗算
カラー：#8da6c8
不透明度：100%

設定後は画面右上の [ OK ] をクリック。

FINISH

テキストエフェクトのベースが完成

レイヤーの最背面に [ べた塗り ] を作成します。
カラー：#d4af68

以上で文字の設定が完了しました。レイヤースタイルを使ってアメリカンヴィンテージな雰囲気の立体的な文字表現が作れました。

文字を変更したい時は？

文字を変更したい時はレイヤーを開き、レイヤーサムネールをダブルクリックします。するとPSBの別タブが開くのでお好きな文字に変更後、上書き保存するとテキストエフェクトの文字が差し変わりますよ。

ヴィンテージな質感を付与する

STEP.1

ノイズテクスチャを作成

黒色の [ べた塗り ] を作成後、[ スマートオブジェクトに変換 ] します。

※先に作成したレイヤーは整理してグループ化しておきましょう。

Photoshop画面上部の [ フィルター ] → [ ノイズ ] → [ ノイズを加える ] をクリック。

量：75%
分布方法：ガウス分布
グレースケールノイズにチェック

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

レイヤーの描画モードを [ ソフトライト ] にし、不透明度を [ 30% ] にしたらノイズの追加完了です。ザラっとした質感が付与できました。

※ノイズテクスチャの作り方はコチラの記事で詳しく解説しています。

STEP.2

紙の焼け感を表現

STEP.1と同様に黒ベタを作成し、レイヤーマスクサムネールをアクティブにします。

描画色を黒にして [ ソフト円ブラシ ] でマスクを調整します。左図の様に画面の端だけ黒ベタが表示されるようにしましょう。

最後にレイヤーの描画モードは [ オーバーレイ ] 、不透明度は [ 20% ] に変更して馴染ませましょう。

FINISH

テクスチャを追加して完成

テクスチャを追加します。サンプルは [ Dark Grunge Concrete Texture with Rough Grainy Surface ] を使用しました。

レイヤーの描画モードを [ オーバーレイ ] 、不透明度を [ 40% ] に変更したら質感付与の完成です。

1970年代のアメリカンヴィンテージな雰囲気のロゴです。ロゴデザイン、見出しなどのタイポグラフィとして。Webサイトやバナー、チラシのビジュアルとしてなど、様々なクリエイティブ素材に活用可能。

一度作ってしまえば文字の変更なども簡単にできるので使い勝手バツグンですよ。

更に高品質なテキストエフェクト素材

さらに高品質なヴィンテージ系テキストエフェクトのPSD素材です。
もちろん全て商用利用が可能なので安心してご活用いただけます。

#01 Retro Text Effect Mockup Bundle

4種類のレトロな雰囲気のテキストエフェクトが収録されたお得なPSD形式のモックアップ素材です。レトロ系で汎用的に使えるデザインのロゴがあっという間に作れますよ。

ダウンロード

#02 Vintage Stamp Distressed Text Effect Mockup

かすれたスタンプの質感が再現できるヴィンテージテキストエフェクトのPSDモックアップ素材です。スマートオブジェクトの中身を差し替えるだけで文字やアイコン等を左図の様な質感にできます。

ダウンロード

#03 Old Vintage Hollywood Film Title Text Effect

古いハリウッド映画のタイトルの様な表現ができるテキストエフェクト素材です。非常にいい感じのレトロな質感がたまりませんね。ロゴや見出し、バナー、チラシのメインビジュアルなど。様々なコンテンツに流用可能ですよ。

ダウンロード

#04 Colorful Retro Text Effect

立体的で斜線がデザインされたレトロ感溢れるロゴが作れるテキストエフェクト素材です。PSD形式なので編集が非常に容易！質感の違う背景画像が2種類収録されていますよ。

ダウンロード

#05 Horror Retro Comic Text Effect Mockup

古いホラー系のアメコミ風のタイトルロゴが作れるテキストエフェクト素材です。スマートオブジェクト内の素材を差し替えるだけなので1分あればデザインが完成しますよ。

ダウンロード

#06 Retro Vintage Hollywood Movie Title Text Effect

古い白黒映画のタイトルの様な世界観でグラフィックが作れるテキストエフェクト素材です。ザラザラしたフィルムの質感などが忠実に再現できますよ。

ダウンロード

#07 Title 3D Comic Text Effect Mockup

古いヒーロー物のアメコミでありがちなタイトルロゴが再現できるテキストエフェクトのPSD素材です。吹き出し素材や背景の古い紙のテクスチャなども収録されているので、様々な制作に流用可能ですよ。

ダウンロード

#08 Bold Distressed Text Effect

古紙に印刷されたインクの滲みが再現できるテキストエフェクト素材です。じわっとした文字の感じが非常にリアルですね。

ダウンロード

#09 Vintage Retro Text Effects Mockup Bundle

1960年代、1970年代、1980年代のデザイントレンドを反映したテキストエフェクト素材です。各時代を象徴する典型的なデザインでロゴが作れますよ。

ダウンロード

#10 Eighties Space Text Effect Mockup

1980年代に流行したサイバーパンク風の世界観でロゴが作れるテキストエフェクト素材です。グラデーションの色や質感などが当時を彷彿させます。

ダウンロード

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

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

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

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

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

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

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

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

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

良質な素材をもっと見る

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

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

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

おわりに

以上、Photoshop（フォトショップ）で1970年代のアメリカンヴィンテージな雰囲気の立体感なロゴをゼロから作る方法でした。

一度作ってしまえば文字の差し替えが容易なテキストエフェクトなのでロゴや見出しデザイン、バナーやチラシなどの各種ビジュアル素材を作成する上で非常に便利です。同じ要領で質感を変えると様々なテキストエフェクトの作成ができるので、ぜひお試しください！

ではまた！

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

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