webデザイン

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

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

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

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

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

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

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

白文字

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

レイヤーデザイン

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

グラデーション

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

ゴールドレイヤー

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

ラスタライズ

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

テクスチャー

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

テクスチャーをドラッグ

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

クリッピングマスク

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

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

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

ディティールイメージ

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

境界線

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

境界線グラデーション

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

ベベルとエンボス

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

ドロップシャドウ

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

重なりイメージ

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

ゴールド完成

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

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

ゴールドアレンジ

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

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

ピックアップ記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  2. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ

関連記事

  1. フォトショップ

    photoshopで肌をなめらかでキレイに仕上げるとっておきの方法。

    photoshopで肌をなめらかに仕上げたいと思った場合にはぼかしを使…

  2. webデザイン

    ヘッダーデザインの配色がチグハグになってしまうなら色彩を統一しよう。Photoshop編

    魅せる伝えるヘッダーデザインを作成する5つの工程の3番目、ここでは③ …

  3. webデザイン

    えっ!?この画像動いてるし…妙に不思議なシネマグラフをPhotoshopで作ってみよう。

    一見何気ない画像かと思いきや、画像の一部分をループして動かすことで不思…

  4. webデザイン

    ヘッダーデザインの役割に応じた文章表現の考え方と構成方法。Photoshop編

    魅せる伝えるヘッダーデザインを作成する5つの工程の4番目、ここでは④ …

  5. webデザイン

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

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

  6. webデザイン

    ちょっとした裏技!?Photoshopで文字を切り抜いて影を付けるレイヤーマスクの活用方法

    前面に紙や壁があることを想定し、文字の形に切り抜いて影を付けたい場合に…

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

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

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

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  3. SNS

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

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. キュレーション

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