webデザイン

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

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

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

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

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

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

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

白文字

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

レイヤーデザイン

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

グラデーション

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

ゴールドレイヤー

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

ラスタライズ

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

テクスチャー

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

テクスチャーをドラッグ

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

クリッピングマスク

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

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

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

ディティールイメージ

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

境界線

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

境界線グラデーション

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

ベベルとエンボス

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

ドロップシャドウ

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

重なりイメージ

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

ゴールド完成

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

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

ゴールドアレンジ

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

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

ピックアップ記事

  1. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  5. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…

関連記事

  1. webデザイン

    photoshopで結露のしたたる曇りガラスに指で文字を書いたような表現をするチュートリアル

    雨上がり、車の窓から外を眺めているような表現をするために、photos…

  2. 3分の話

    3分でわかる想像力(創造力)を鍛える方法

    想像力はクリエイティブ(創造的)な仕事をする上でとても重要な要素です、…

  3. webデザイン

    境界線が複雑な模様やイラストを切り取りせずに合成する裏ワザ的フォトショップ【CS6】技術

    フォトショップで画像を合成させるためには、さまざまな切り取り方法がある…

  4. webデザイン

    「コレがやりたかった!」GIFアニメ(動く画像)のPCモックアップ画像の作り方【Photoshop編…

    JPGなどの画像をパソコン画面にはめ込んだモックアップを作りたい場合に…

  5. フォトショップ

    「Photoshopのカラーピッカーがおかしい、、」いつもと色が違う時の対処法

    Photoshopで色を変更しようと思ってカラーピッカーを開くと、知ら…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. 3分の話

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

    「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
  3. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
PAGE TOP