webデザイン

photoshopで3Dの文字を作りたいけど使い方がわからない初心者のためのチュートリアル【CS6】

photoshopは常に進化し続けて最近のものでは3D機能これがもーハンパないっ!ほんの数年前まで立体を表現するためには、自力でそれらしく見えるよう四苦八苦しながらえらく時間をかけていた記憶があります。

しかし、photoshop【CS6】の3D機能を用いれば超簡単&短時間!ここでは思わず手に取れそうな立体的文字の作り方を解説しますので基本をここでしっかり覚えちゃいましょう!

photoshop【CS6】で3Dの立体文字を作るチュートリアル

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

新規ウィンドウ

背景用の画像をドラッグして入れます。

ミーティング画像

テーブルと同じような色でテキストを入力。

文字入力

今入力したテキストレイヤーに3D機能をかけます。3D 》選択したレイヤーから新規3D押し出しを作成

立体

すると以下のように見事に立体になりました。

3D

ここから調整していきます。まず右下、3D内一番上の【環境】を指定し、上の属性の【左のアイコン】を指定します。プレビュー画面左下の【緑矢印】を上下左右に調整してテーブルの平面にうまく合わせます。(慣れるまではちょっとコツがいるかも)

水平を調整

今度は右下、3D内のテキスト(ここではMEETING)を指定し、上の属性の【Tアイコン】を指定し、下のシェイププリセットのベベル(輪郭あり)を指定。

ベベル

続いて、属性アイコンを2つ右の(扇に矢印が付いてるようなヤツ)を指定して、ベベルの幅を15%に、輪郭を線形(斜めにまっすぐ)に変更します。

調整

次は、テーブルに立体文字が反射しているような描写を付ける作業。さっきと同様にまず右下、3D内一番上の【環境】を指定し、上の属性の【左のアイコン】を指定します。グリッドの反射の不透明度を40%に調整します。

その、すぐ下の立体マークのようなアイコンでレンダリングをかける。

レンダリングは終了するまで時間がかかるので、私の場合は全体に2~3回かかってある程度キレイになったところで止めて次の作業に進めてしまいます。(レンダリング中でも画面のどこかでクリックすると止まります)

レンダリング"

レンダリングすると画像が鮮明になり、テーブルの写り込みが ↓ 画像のように見えるようになるはずです。そしたら作成した3Dレイヤーを右クリックしてラスタライズします。

ラスタライズ

最後にラスタライズしたレイヤーの写り込み部分を選択ツールでぼかし60pxで切り抜く。

ぼかし切り取り

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

photoshopで3D完成

今回は、photoshop【cs6】で3Dの文字を作る方法を紹介しましたが、3D機能の使い方としては基本なのでこれをしっかりとマスターしちゃいましょう!

そうすればいろいろなケースで応用が利き作業効率の向上だけでなく、どんどんとクオリティの高い作品作りが可能になること間違い無しです!

3Dの立体文字をアレンジしてみました。

3Dアレンジデザイン

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

ピックアップ記事

  1. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  3. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…

関連記事

  1. webデザイン

    Photoshopユーザー必見!無料になったNik Collectionのヤバすぎる使い方

    Photoshopでクオリティの高い加工が可能なプラグインのNik C…

  2. webデザイン

    ひと味違うHDR風のディティールを表現する所要時間3分のフォトショップ技術

    HDRとはハイダイナミックレンジの略で最近ではiphoneカメラにも搭…

  3. webデザイン

    Photoshopで文字に影を付ける”3つの方法”を知っておくだけで表現の幅…

    Photoshopで文字に影を付けるには、レイヤースタイルのドロップシ…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. フォトショップ

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

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. webデザイン

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

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

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