webデザイン

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

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

合わせて読みたい関連記事:これで解決っ!photoshopで壁から浮き出るオブジェのような3Dの立体文字を作る方法【CS6】

しかし、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. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…

関連記事

  1. webデザイン

    photoshopで縁取りを応用し素人っぽさから一歩抜け出すスゴ技を伝授。

    photoshopで文字などをデザインする際、レイヤースタイルの境界線…

  2. フォトショップ

    白銀比ツールを活用したphotoshopでポスターレイアウトをするためのコツ

    黄金比・白銀比ツールを使いこなす構成要素に必要な画像素材を適当…

  3. webデザイン

    photoshopで結露のしたたる曇りガラスに指で文字を書いたような表現をするチュートリアル

    雨上がり、車の窓から外を眺めているような表現をするために、photos…

  4. 3分の話

    PhotoshopでGIFアニメーションをトゥイーンで作って保存する方法。

    Photoshopではタイムラインを使うことで動的なGIFアニメーショ…

  5. webデザイン

    Photoshopを使って動画をGIFアニメーション(動く画像)に変換する方法

    「ブログの記事内に"動きのある画像"を貼りたい」ときがありますが、実は…

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

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

最近の記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  2. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…
  3. Photoshopを使って動画をGIFアニメーション(動く画…

思考系のおもろい記事

ブログラ
  1. SEO

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

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

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

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

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