webデザイン

フォトショップで金色(ゴールド)の文字を表現してクオリティの高いロゴを作る方法

金色(ゴールド)ってどーやって描けばいいんだろう?そう思うひとは少なくありません、初めて金色をデザインしようとしてみると結構戸惑います、そもそも金色って本来存在しない色なんですね。

※最新版はこちら ⇒ Photoshopで立体的なGOLD(金色)の文字を作る方法【13:12のスキルアップ動画解説付】

世の中にある金の延べ棒やゴールドアクセサリーなどは光が当たることで輝き、それを見ている私たちが勝手に金色という認識をしているだけ。

ここではデザインで金色(ゴールド)表現するために、黄色や黄土色などの色彩をグラデーションで多様しディティールを加えて【っぽい】ものを作る方法をお伝えします。

フォトショップで金色(ゴールド)のロゴを作るチュートリアル

背景の上に白ろ文字で任意のテキストを入力します。

白文字

少しデザインを加えてレイヤーを統合。

レイヤーデザイン

統合したレイヤーにグラデーションをかけます。画面右下のfxを押し、レイヤースタイルのグラデーションオーバーレイにチェック、グラデーション部分をクリックするとグラデーションエディターが開き調整ができます。

グラデーション

良い感じになるように調整してみよう!グラデーションの調整が自分では難しいひとはdeviantartからグラデーションファイルをダウンロードすることができます。

ゴールドレイヤー

グラデーションをかけたロゴレイヤーを複製し、複製したレイヤーを右クリックしてレイヤースタイルをラスタライズします。

ラスタライズ

グラデーションと合わせて金属の質感を加えたいのでここでは以下のテクスチャーを使用します。コピペ保存して自由(個人使用・商用利用、著作表記義務無し)に使ってください。

テクスチャー

テクスチャー画像をフォトショップで開いたらメインのほうへドラッグして放り込みます。(テクスチャー画像のウインドウはもう使用しないのでこれで閉じてOK)

テクスチャーをドラッグ

最前面にあるテクスチャー画像のレイヤーを右クリックしてクリッピングマスクを作成

クリッピングマスク

すると、ロゴの形にテクスチャー画像が入り込みました。

クリッピングマスクしたレイヤー

テクスチャー画像レイヤーの描画モードを 通常からハードライトに変え 不透明度を40%にするとイメージ画像のように金属チックな印象になると思います。そしたらテクスチャー画像とロゴレイヤーを統合します。

ディティールイメージ

今度は複製元のロゴレイヤーに境界線(5px)のレイヤースタイルを適用し、右クリックしてレイヤーをラスタライズします。

境界線

その複製元のロゴレイヤーに背景色に近い色でグラデーションをかけ、またラスタライズ

境界線グラデーション

さらに、ベベルとエンボスを調整して立体感を出します。

ベベルとエンボス

今ラスタライズした複製元のロゴレイヤーを再度複製し、後ろのレイヤーの描画モードを乗算にします。そして上のレイヤーの描画モードをソフトライト、レイヤー効果をドロップシャドウにして影を付ける。

ドロップシャドウ

現在の状況は、手前のレイヤーは金色後ろのレイヤー(乗算をかけたレイヤーとソフトライトをかけたレイヤー)が立体感を表現し、重なった状態が確認ができているはずです。

重なりイメージ

このように完成したと思いますがいかがでしたでしょうか?

ゴールド完成

初心者のひとには難しく感じてしまうと思いますが、描画モードやレイヤー効果などの使い方に慣れ、質感など付け方のコツを掴むと色々とアレンジがきくようになりどんどんクオリティの高いものが作れるようになるので実践を重ねてみてください。

金色(ゴールド)の文字をアレンジしてみました。

ゴールドアレンジ

合わせて読みたい関連記事:photoshopで3Dの文字を作りたいけど使い方がわからない初心者のためのチュートリアル【CS6】

スリームデザインの無料メールマガジン

ピックアップ記事

  1. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. フォトショップ

    photoshopで顔を明るく立体的な印象を付ける方法。

    photoshopで顔を明るくするにはトーンカーブやレベル補正などで簡…

  2. webデザイン

    Photoshopでネオン管が光っているような文字の作り方を解説

    歓楽街を歩いているとBARやライブハウスなどのネオン看板が夜の街を彩っ…

  3. webデザイン

    最近、123RFとゆー画像素材のストックフォトがめちゃめちゃ安くてハンパない件。

    つい最近までは画像素材を使用する際にはもっぱらiStockとFotol…

  4. フォトショップ

    細部にこだわってポスターデザインを仕上げるためのディティールを詰めるコツ

    ディティールを詰める技術を覚える男性の怪しさが増すような画像を重ね…

  5. webデザイン

    デザインのレイアウトが苦手なひとが今日から得意になってしまう、たった3つの方程式!

    ポスターやホームページのバナー、アイキャッチ画像など人目を引き付けるデ…

  6. webデザイン

    photoshopで雰囲気のあるセピア調に仕上げるプロの技術。

    photoshopで写真をセピア調にするのはすごく簡単。 ⇒ phot…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. Photoshop CCのメニュー文字やツールバーが異常に小…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  3. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…

思考系のおもろい記事

ブログラ
  1. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  2. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  3. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
PAGE TOP