フリーランスデザイナーが自由なライフスタイルを実現するための新しいブログの活用法や個性的がほとばしるブログにするためのPhotoshopを使ったデザインのチュートリアルなどを公開中~。

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分のフィルター活用テクニック。

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

関連記事

Wordpress日本語テーマのまとめ
個別ブログ相談会
photoshop日本語チュートリアル
ブログラ

スリームデザインの出版書籍情報

photoshopの本

fotoliaデザインコンテスト大賞受賞作品の解説

tenコレクションデザインコンテスト

スリームデザインおすすめの書籍

本 本本 本

スリームデザインとソーシャルで繋がろう!

 
 
 

カテゴリー