webデザイン

これで解決っ!photoshopで壁から浮き出るオブジェのような3Dの立体文字を作る方法【CS6】

photoshopの3D機能に慣れてくると、さまざまな表現方法に応用が利きデザインの幅がとても広がります。テーブルの上に置かれた立体文字を表現する場合などであれば結構簡単にコツが掴めます。

関連記事:photoshopで3Dの文字を作るためのチュートリアル

しかし、壁から浮き出たような表現壁に掛っているオブジェのような表現を試みた場合、↓いくら光の方向を調整しても左図のように画面に対して垂直影が落ちてしまい影の方向性が思うようにいかず苦戦する方も多いのではないでしょうか?

テキスト

adobeの公式サイトは相変わらず説明が分かりにくいし、いくら探しても日本語で説明しているサイトが見当たらなかったので、私もめちゃくちゃ苦戦したのですがようやくコツが掴めました。

ここでは可能な限り簡単に説明しますので是非マスターしてみてください。

前半はシェイプ作成の解説なので影の方向性のやり方だけ知りたい方は前半を飛ばしちゃってポイント①ポイント②だけで理解できてしまうと思います。

壁から浮き出る3Dの立体文字を作るチュートリアル

白文字(見やすければ何色でもOK)で任意テキストを入力します。(ここでは木目を活かすため家をイメージするような簡単なデザインを加えてみます)

【※3D機能を使うには解像度を高めに設定しておきます、ここでは画面サイズを幅:2000px 高さ:1333px 解像度:350px/inchで設定してます。】

テキスト

入力したテキストを右クリックしてシェイプに変換をします。(ここではWOODとGRAININGの両方共変換していますが他にもテキストがあればすべて変換です。)

テキスト

続いて、シェイプに変換したテキストを含めた3Dにするすべてのレイヤーを選択し、右クリックでシェイプを統合します。

テキスト

レイヤーがひとつのシェイプとして統合されました。

テキスト

木目の背景画像と、白いシェイプでこのような感じになっています。

テキスト

統合したシェイプに3Dを適用させます。3D 》選択したレイヤーから新規3D押し出しを作成します。

テキスト

シェイプが3Dになったら右下の部分を選択します。

テキスト

上部にマテリアルのウィンドウが開くので球体の右の小さい▼をクリックして木目のマテリアルをダブルクリックしてシェイプ全体に適用させます。

デフォルトでは木目のマテリアルは入っていません、今回は背景の柄と同じ木目のマテリアルを前もって作成しています。新規マテリアルの作成方法はこちらで解説しています。こちらで解説 ⇒ photoshopの3Dでテキストや押し出し部分にテクスチャーを適用するためのマテリアル作成方法。

テキスト

3Dシェイプ全体に木目のマテリアルが適応されました。

テキスト

ポイント①

ここからが超重要ポイント!です、壁から浮き出た表現をするためには影だけを調整しようと考えるのではなく、3Dの立体文字自体を動かしていく必要があるんですね。

右上の3Dモード:のところにある左から2番目の丸に矢印がついているようなアイコンを押して画面上で【X軸を中心に回転】と出てくる位置にカーソルを合わせます。(微妙な位置調整が必要)

テキスト

そしたらクリックしながらぐーっと持ち上げるように3Dシェイプを縦に回転させます。

テキスト

角度が90.0°のところまでもってくると3Dを真下から見たアングルになりました。(逆に左上の別アングルでは真上からの構図が確認できるはず)

テキスト

このままだと押し出し部分が大きいので任意のサイズに縮めます。(ここでは250に設定)

テキスト

すると空中に浮いてしまいました。最終的には壁に張り付いているように表現したいのでシェイプを平面に落とすために オブジェクトをグリッドにスナップ を指定します。

テキスト

平面にピタリと落ちました。

テキスト

ポイント②

そしてここが2つめの超重要ポイント!です、右上の 3Dモード: のところにある一番左の土星ちっくなアイコンを押して画面左下の緑色の矢印をコントロールレバーのような感覚で下に引っ張っぱり平面を画面と並行になるように持ち上げます。

テキスト

画面に対して並行になりました。ようするにこれで解決っ!な訳です。

テキスト

あとは大きさや光の調整をするだけ。大きさを変えたい場合は右上の 3Dモード:真ん中の十字矢印アイコンを押して、画面上の中央で【均等に拡大・縮小】で調整できます。

テキスト

光の調整はライトマークを押してレバーの先でコントロールして具合を調整。

テキスト

今回は元から背景画像にスポットが5つあるデザインなのでそれに合わせて5つの光を当ててみます。右下の電球マーク、さらにその下の四角いアイコンを押すと新規でライトを追加できます、上部の属性で光の強さや影の落とし方などを微調整。

テキスト

背景に合わせて5つの光を設定してみました。

テキスト

ここでレンダリングをかけます。(時間がかかる場合は2~3回してキレイになったと思う時点で画面上をクリックすれば止まるので、それでもOK!)

テキスト

このように仕上がりましたが、いかがでしたでしょうか?

テキスト

壁から浮き出る立体文字をアレンジしてみました。

photoshopで壁から浮き出るオブジェのような3Dの立体文字を作る技術を応用してアレンジすれば、このようなさまざまな作品が作れるようになるので木目やコンクリートに限らず色々な表現に挑戦してみてください!

テキスト

もっと簡単な方法がありました!こちらで解説 ⇒ photoshopで立体を回転させるのはめちゃめちゃ簡単だった、、垂直方向が1分で完成!

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

ピックアップ記事

  1. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…

関連記事

  1. webデザイン

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

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

  2. 3分の話

    クリエイターとは何ぞや!?ということを真剣に考えてみた結果、ちょっとした独り言で終わった話し。

    響がなんかカッコ良いっ!でも「自称クリエイターです。」と、自称を付けて…

  3. webデザイン

    【デザイナー必見】パクリと言われないために類似画像検索で確認しておこう

    作品を創り出す際、クライアント用のデザインや自身のアートに限らず、その…

  4. webデザイン

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

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

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. キュレーション

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

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. 3分の話

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

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