【Photoshop】周囲の環境が映りこんだメタリックなロゴの作り方

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

Photoshop（フォトショップ）でクロームやシルバーのようなメタリックな質感に周囲の環境が映りこんだロゴをゼロから作る方法をフォトショ初心者の方に分かりやすく解説します。

Photoshopの基礎的な機能を活用し、リアルな質感を簡単に再現できます。
フォトショップ初心者の方でも順に進めていけば再現できる内容です。

これからPhotoshopを学ばれる方、フォトショ経験の浅い方にもオススメのコンテンツですよ！

この記事の目次

何ができるの？

左図のようにメタリックな質感のロゴに周囲の環境が反射して映りこんだ表現が作れます。
一度エフェクトを作ればロゴや環境は後から簡単に変更可能。

制作の難易度は低め、Photoshopを使った質感制作テクニックの基本が学習できます。

手軽にできる髪色の変更方法

それではPhotoshopでメタリックな質感に反射した環境を映りこませる方法を解説します。
順に進めていけばフォトショ初心者の方にも再現できる内容です。

Photoshopを導入しましょう

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

背景を作る

STEP.1

新規ドキュメントを作成

Photoshopを開いて新規ドキュメントを作成します。
サンプルのサイズは下記です。
幅：3000px
高さ：2000px
解像度：300

STEP.2

背景を塗りつぶす

背景を塗りつぶします。

[ 塗りつぶしツール ] や [ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ べた塗り ] で塗りつぶせます。

サンプルの色は#484848です。

STEP.3

テクスチャを配置

お好みのテクスチャを準備します。

サンプルはコチラの高品質なコンクリートのテクスチャを活用しました。

テクスチャをドラッグ＆ドロップすると配置できます。
不透明度：80%

FINISH

グラデーションで立体感を付与する

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

グラデーション：次図参照
スタイル：線形　角度：115°
比率：100%　選択範囲内で作成
方法：知覚的

グラデーションの詳細設定です。

左から順に
グラデ①　位置：0%　色：#272729　不透明度：100%
グラデ②　位置：100%　色：#e3e3ec　不透明度：20%

レイヤーの描画モード：オーバーレイ
不透明度：50%

すると平面的だったテクスチャに少し立体感を付与する事ができました。
以上で背景の完成です。

ロゴの質感を作る

STEP.1

ロゴを配置

ロゴを準備し、ドキュメントに配置します。
サンプルのロゴ色は#282828です。

なお、商用利用可能で高品質なロゴはコチラの記事で解説しています。

配置したロゴは [ スマートオブジェクトに変換 ] します。

[ Ctrl + J ] (Mac：Command + J) でロゴのレイヤーをコピーし、左図のように計3つ作成。レイヤー名を変更しておきましょう。

STEP.2

影を設定

影レイヤーをクリックしてアクティブにします。
[ フィルター ] → [ ぼかし ] → [ ぼかし(移動) ] を適用します。

角度：-45°
距離：50pixel

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

半径：7.0pixel

レイヤーの描画モード：オーバーレイ
不透明度：35%

すると左図のように落ち影の表現が追加できました。

STEP.3

ベースを設定

ベースレイヤーをクリックしてアクティブにします。
[ レイヤースタイルを追加 ] → [ ベベルとエンボス ] をクリック。

スタイル：ベベル(内側)　テクニック：滑らかに
深さ：790%　方向：下へ　サイズ：0px　ソフト：0px
角度：-135°　高度：30°　光沢輪郭：線形
ハイライトのモード：覆い焼き(リニア) – 加算　色：#ffffff　不透明度：75%
シャドウのモード：乗算　色：#000000　不透明度：75%

[ レイヤースタイルを追加 ] → [ シャドウ(内側) ] をクリック。

描画モード：乗算　色：#000000　不透明度：35%
角度：90°　距離：8px　チョーク：45%　サイズ：10px
輪郭：線形　ノイズ：0%

[ レイヤースタイルを追加 ] → [ カラーオーバーレイ ] をクリックしましょう。

描画モード：通常
色：#141414
不透明度：50%

すると左図のようにロゴのベースが作れました。

STEP.4

反射を設定①

反射レイヤーをクリックしてアクティブにします。
[ レイヤースタイルを追加 ] → [ ベベルとエンボス ] をクリック。

スタイル：エンボス　テクニック：滑らかに
深さ：500%　方向：下へ　サイズ：3px　ソフト：0px
角度：45°　高度：0°　光沢輪郭：線形
ハイライトのモード：覆い焼き(リニア) – 加算　色：#ffffff　不透明度：15%
シャドウのモード：乗算　色：#000000　不透明度：70%

[ レイヤースタイルを追加 ] → [ 光彩(内側) ] をクリック。

描画モード：カラー比較(明)　不透明度：50%　ノイズ：0%　色：#d3d3d3
テクニック：さらにソフトに　ソース：エッジ　チョーク：0%　サイズ：10px
輪郭：線形　範囲：70%　適用度：0%

[ レイヤースタイルを追加 ] → [ グラデーションオーバーレイ ] をクリック。

描画モード：覆い焼きカラー　不透明度：38%　グラデーション：次図参照
スタイル：線形　シェイプ内で作成にチェック
角度：90°　比率：100%　方法：クラシック

左から順にグラデーションの設定です。

グラデ①　色：#4b4b4b　位置：0%　不透明度：100%
グラデ②　色：#ffffff　位置：100%　不透明度：100%

レイヤーの塗り：50%

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

FINISH

反射を設定②

ロゴの反射の設定を行います。
[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ グラデーション ] を追加。

グラデーション：次図参照
スタイル：線形　角度：135°　比率150%
選択範囲内で作成にチェック　方法：クラシック

左から順にグラデーションの設定です。

グラデ①　色：#495152　位置：5%　不透明度：100%
グラデ②　色：#f5f5f5　位置：85%　不透明度：100%

反射レイヤーにクリップします。
レイヤーの描画モード：スクリーン
不透明度：60%

反射させたい環境画像を準備し読み込みます。
サンプル画像はコチラの素材を活用しました。

スマートオブジェクトに変換し、左図のようにクリッピングマスクで重ねましょう。

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

以上でPhotoshopでメタリックな質感に周囲の環境を反射させたロゴが作れました。

画像やロゴも後から簡単に差し替える事ができます。

スマートオブジェクトにしておくと編集が楽

スマートオブジェクトのレイヤーサムネールをダブルクリックすると別ウィンドウでPSBファイルが開きます。
お好きなロゴや環境テクスチャに差し替えると別デザインへ簡単に変更できますよ。

高品質なロゴのモックアップ

様々な質感のロゴが作れるモックアップPSD素材です。
全て商用利用可能！
非常に高度なPhotoshopのテクニックを駆使したロゴが誰でも一瞬で作れるチート素材ですよ。

#01 Snow and Ice Text Effect

凍てつく氷のようなロゴが作れるテキストエフェクトのPSD素材です。好きな文字や図形に適用するだけでサンプルのような仕上がりにできる優れもの！背景の吹雪の量も変更可能ですよ。

ダウンロード

#02 Old Gold Text Effect Mockup

古びた黄金の質感が作れるテキストエフェクトPSDです。ざらりとしたテクスチャ感や渋い黄金の色味など、非常に高品質な仕上がりです。

ダウンロード

#03 3D Glossy Metal Logo Sign Mockup on Dark Wall

立体的で艶のあるメタリックな質感のロゴが作れるテキストエフェクトです。Photoshopで編集可能なレイヤー分けされた扱いやすいPSD素材ですよ。

ダウンロード

#04 Shiny Chrome Text Effect

車のエンブレムのような高級感のある輝くクロームような質感が再現できるテキストエフェクトPSDです。ロゴや見出し、バナーや各種デザインの文字など、幅広い用途で活用できる汎用素材の一つです。

ダウンロード

#05 Wood Burn Text Effect Mockup

木に焼き印をしたような質感が再現できるテキストエフェクトPSDです。見ての通り細部まで非常にリアルな仕上がりです。長辺が7045pxもあるので大型い印刷にも耐えられる品質ですよ。

ダウンロード

#06 Grunge Text Effect Mockup

4種類のグランジ表現ができるテキストエフェクトです。グランジはデザイン制作で頻繁に使う表現なので是非持っておきたい素材の一つですね。

ダウンロード

#07 Comic Text Effect Mockup Bundle with Graphic Elements

アメコミのセリフに使われるような質感がサクッと作れるテキストエフェクトPSDです。テキストだけでなく、フキダシ素材も複数収録されているので汎用性抜群！

ダウンロード

#08 Neon Sign Mockup

妖しく光るネオンの光が再現できるテキストエフェクトPSDです。バーなどのネオンサインを再現するのに最適な素材ですよ。

ダウンロード

様々なエフェクトPSD

商用利用可能で高品質な様々なエフェクトPSDを厳選しました。併せてチェックされてみませんか？

【Photoshop】写真を全く違うグラフィックに変える高品質なエフェクト50選【商用可】

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

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

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

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

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

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

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

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

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

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

良質な素材をもっと見る

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

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

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

おわりに

以上、Photoshop（フォトショップ）でメタリックな質感に周囲の環境が反射したロゴの作り方でした。

いい感じのオフィスやお店のサインボードに使われているような質感のロゴが簡単に再現できます。
一度エフェクトを作成してしまえば後から簡単にロゴや環境テクスチャの変更が可能！

初歩的なPhotoshopの知識のみで作れるのでフォトショ初心者の方にもオススメなチュートリアルです。
ロゴモックアップとしても活用できるので是非お試しください！

ではまた！

写真の雰囲気を激変させよう

写真の雰囲気を激変させるチュートリアル集です。
フォトショの中級～上級テクニックを網羅的に学習できます。