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. 「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
  2. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  3. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    細部(ディティール)へのこだわりがWEBデザインに差をつける。Photoshop編

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

  2. フォトショップ

    印刷用データを入稿する際に「インキ総使用量を300%以下にしてください」ってマジかっ!?Photos…

    デザインが完成したぁっ~!!ってことで印刷業者さんへデータを送ったら「…

  3. フォトショップ

    色彩のセオリーを理解してphotoshopでポスターを配色するためのコツ

    ベース・メイン・アクセントの配色を身につける背後にいる男性の彩…

  4. フォトショップ

    photoshopでアンディ・ウォーホル風なイラストを作ってみよう。

    ポップアートの旗手と呼ばれるアンディ・ウォーホル風なイラストをphot…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. コピーライティング

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

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. 3分の話

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

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

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