webデザイン

photoshopで映画タイトルロゴのようなメタリックでカッコ良い文字を作るチュートリアル!

スパイダーマンやアイアンマンなどいかにもMARVELの映画で出てきそうなメタリックなタイトルロゴをphotoshopで作りたいひとのために、10分程度の工程で説明します。

今回は、前回の記事で紹介した金色(ゴールド)の文字を表現する方法と、フォトショップCS6の3D機能の使い方を応用してみたので、基本を知りたい方は先に以下の関連記事を参考にしてもらえると分かりやすいと思います。

関連記事:フォトショップで金色の文字を表現してロゴを作る方法
関連記事:photoshopで3Dの文字を作りたい初心者のためのチュートリアル

メタリックなロゴを作るチュートリアル

【※サイズ/解像度 幅:2000px 高さ:1333px 解像度:350px/inch】

メタリックな背景の上に任意のテキストを入力します。

テキスト入力

PHOTOSHOPのテキストレイヤーを複製し、元のレイヤーの目のマークを外して非表示にしときます。

テキストをコピー

複製したPHOTOSHOPテキストに3Dを適用。 

3D

テキストの色が違ってしまう場合は、任意のカラーを抽出して適用します。(この時点で3Dによる光が当たっている状態なので若干明るめになっているはず。)

テキストカラー変更

シェイププリセットでピロー膨張を選ぶ。

シェイププリセット

属性の左から3番目のアイコンを押して、ベベルと膨張を調整します。

調整

必要に応じて光の追加、調整をします。(感覚的なのでセンスで!)

光の調整

ここで一度レンダリングをかけます。

レンダリング

レンダリングを止めたら3Dのレイヤーをラスタライズします。

ラスタライズ

ラスタライズしたレイヤーを複製して描画モードを乗算にし不透明度を30%にします。

ラスタライズを複製して乗算

乗算にしたレイヤーをさらに複製し、今度は乗算からスクリーンに変え選択ツールで下半分をバッツリ切り取ります。

コピーしてスクリーンを切り取る

ここではあえてプリミティブに3D機能を使わない方法で立体感を出します。非表示にしていた元のPHOTOSHOPレイヤーを表示して移動ツールで下に下げます。

元のテキストを移動

レイヤースタイルに↓画像のような色合いのグラデーションをかけます。

グラデーション

グラデーションをかけたら、すかさずレイヤースタイルをラスタライズ

スタイルをラスタライズ

フォトショップで金色(ゴールド)の文字を表現してロゴを作る方法でも使用した↓のテクスチャーを使用するのでコピペしてフォトショプで開く。

テクスチャー

開いたテクスチャーを移動ツールでドラッグして放り込みます。

テクスチャーをドラッグ

サイズが小さいのでテクスチャーを複製して移動して結合します。

テクスチャーを複製結合

結合したらクリッピングマスクを作成します。

クリッピングマスク

描画モードを覆い焼きカラーに変更。

覆い焼きカラー

元のPHOTOSHOPレイヤードロップシャドウで影を付けます。

ドロップシャドウ

最後にPHOTOSHOPレイヤーの角度のある部分を選択ツールで選択して暗く調整します。

暗さ調整

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

メタリックロゴ完成

photoshopでメタリックな立体的ロゴが作れると、WEBデザインに限らずパンフレットやポスターなどにもいろいろと活用できるのでクリエイティブな範囲が広がりますね!

メタリックなタイトルロゴを応用すると。

ロゴと素材を組み合わせてレイアウトし映画のポスター的な感じでデザインしてみます。

素材

関連記事:写真素材を購入するならiStockとFotoliaの2サイトチェックで万事OKっ!

今回メタリックなロゴを作成する過程で立体部分を下方向に押し出しましたが、ポスターなどで使用する際、左↓図のように上部に配置する分には問題ありませんが、右↓図のような中心より下部に配置しようとすると違和感が出ます。

押し出し部分の方向

上記のようなケースでは立体的なロゴをどこに配置するかでその形や表現の仕方を変える必要が出てしまう訳ですね。

修正、調整などの2度手間を回避するためにも全体のレイアウトがある程度決まった状態で具体的に作り込んでいくよう癖付けしておきましょう。

今回は中心より下部に配置したいので、ロゴの押し出し部分を上方向にもっていき写り込みを表現することで空間を出してみました、これで見る人の視線を中心に集めることが可能になり、その分目に留まりやすくなったと思います。

映画ポスター

↑のポスターを3ステップでガラっと印象を変えアメコミ風に加工する方法はこちら⇒フォトショップでアメコミ風に加工する所要時間たった3分のフィルター活用テクニック。

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

ピックアップ記事

  1. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  2. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    これは知らないと損!背景が透明なPNG画像の輪郭をなじませるPhotoshopの使えるテクニック《動…

    人物と背景を合成したい場合、予め人物の背景を透明にしたままでPNG画像…

  2. フォトショップ

    1クリックで完了っ!Photoshopで文字を「縦書き」する方法&英字・数字の応用編

    Photoshopで"すでに横書きで入力されている文字"を「縦書き」に…

  3. webデザイン

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

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

  4. webデザイン

    初心者でも簡単!GIMPをダウンロードしてインストール方法。

    GIMP公式サイトへGOっ!【Download GIMP バージョン】…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  2. webデザイン

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

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

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

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