兼ねてより使ってみたかったAdobe CCの新しいアプリ「Dimension」。
この画像はチュートリアル用の練習作品ですが、本当に数分でこのモックアップが作れてしまいます。IllustratorやPhotoshopで作るよりも最速。
ということで今回は、簡単に3Dモデルやグラフィックが作れる「Dimension」について、簡単に紹介したいと思います。
目次
Adobe Dimensionで出来ること【3Dグラフィック】
今までのグラフィックデザインといえば、IllustratorやPhotoshopを使って作ることがほとんどだったので、立体的なグラフィックを作るには結構な時間と手間、技術が必要でした。3Dソフトを使ってリアルなCGを作ったりするのはCGデザイナーのお仕事だったし、おそらく今も分業のところは多いと思います。
ところが昨今、3Dグラフィックやモデリングを簡単に作れてしまうソフトが登場しました。それがこの「Dimension」です。
Dimensionの存在自体は知っていたものの、実際に何ができるのか、どういう操作方法なのかはよくわからなかったので、時間のあるとき触ってみようくらいの気持ちでインストールだけはしていました。ところが先日のAdobe MAXで活用方法を知ってしまったので、これは使わないわけにはいかないぞと思い、早速3Dを作ってみることに。
ざっくりと触ってみた結果、具体的にDimensionで何ができるのかというと、例えば「モックアップ」「立体文字」「Webデザイン上での3D操作」など、今まで制作が面倒だった3次元のデザインが、かなり手軽に、しかも結構なクオリティで作れることが判明。
さらに、CGソフトといえば数字を打ち込みながら作ったり、計算が必要なイメージでしたが、そこはAdobe製品ということで、かなり感覚的な操作で作れるというのがDimensionの推しポイントなんです。
Dimensionの使い方【基本的な操作方法】
Dimensionは、IllustratorやPhotoshopに比べると機能やツールが少ないので、基本操作は結構単純。とりあえず、頻繁に使う場所をマークしてみました。
画面左側はツール、右側は詳細設定です。
まずは青枠部分から。ここのタブでページを切り替えます。「デザイン」は現在見えている作業ページ、「レンダリング」はプレビューや書き出しができるページです。
次に、黄枠のツール部分。「選択ツール」はオブジェクトの移動や変形、「カメラビュー」はプレビューの角度、「画面移動」では画面上のプレビューを永遠に移動できます。3D空間なので、終わりがない。
そして、赤枠の素材部分。この素材達は、オブジェクトにドラッグ&ドロップすることで簡単に適応させることができます。
「オブジェクト」項目では「基本シェイプ（テキストや簡単な図形）」や「モデル（ボトルや箱などの立体素材）」などの、ベースになる立体が揃っています。
「材質素材」項目では「Adobe標準マテリアル（ガラスなどの材質）」や「Substansマテリアル（さらに豊富な素材）」などの、質感を表す素材が揃っています。
「照明」項目では、「指向性ライト（自然照明）」や「環境光（映り込み照明）」などの、光の入り方を選ぶことができます。
「背景画像」項目の「画像」では、背景を選択できます。
続いて右側の緑枠部分に移ります。ここでは赤枠で選択した素材の詳細設定ができます。
「アピアランス」項目では、追加した効果や素材の表示／非表示や削除、編集などを管理することができます。
その下の「詳細設定」で、さらに細かい設定をつけ加えていくことができます。
色の変更、文字やサイズ、光の高さや位置など、細かく表情を変えることができます。
Dimensionで立体文字を作る【3Dテキスト】
手始めに、Dimensionで立体文字を作ってみました。まずは「基本シェイプ」から「テキスト」を選択し、画面上に立体テキストを出現させます。
デフォルトサンプルでは「Lorem ipsum」という文字が出現します。
画面上のテキストを選択すると、左側に3色の変形ツールが出てきます。矢印の先端をドラッグすれば矢印方向への移動、四角いポイントをドラッグすれば変形、丸いポイントをドラッグすれば3方向に回転します。
文字の変更は、右側の「プロパティ」のすぐ下にあるテキストボックスで行います。
さらに装飾を加えます。左の「Adobe標準マテリアル」から「虹色のメタル」をドラッグ&ドロップでテキストに付け加え、テキストボックスの下からフォントを選び、変更します。
カメラワークを上から目線に変えるとこんな感じ。
文字間や行間、サイズなども調整可能。角の処理は「ベベル」と言うところをONにすれば、角丸や凹凸など様々な形状に変更できます。
立体文字に照明を追加する
ガラスやメタル系の素材は、光の反射によって大きく色の変化が出ます。自然な仕上がりを目指すなら太陽光を入れましょう。「指向性ライト」から太陽を選択。
プロパティで太陽の色や光の強さ、位置などが調整できます。
他にもスタジオで撮影したような3点ライトや映り込みがあるライトなど、いろんなシチュエーションが選べます。
背景画像を追加する【オリジナル画像の読み込み】
テキストができたら、背景を入れてみます。今回はデフォルト画像から砂漠を使ってみました。これもドラッグするだけで追加できます。
砂漠に突き刺さった感じのタイポグラフィに。
背景にオリジナル画像を使いたい場合は、メニューから「ファイル > 読み込み > 画像を背景として読み込み」を選択すればOK。
できたら保存し、レンダリングで書き出しましょう。
Dimensionでレンダリング【画像やWebへの書き出し】
デザインができたら、レンダリングして画像に書き出します。デザインタブからレンダリングタブへ移動。右側にレンダリング設定が表示されるので、ここで書き出し設定を行います。
保存場所は「ローカル（PC内）」と「クラウド（CC）」が選べますが、クラウド保存の場合はアカウントによって「クレジット」と呼ばれる制限があるようです。私は1ヶ月15点のクレジットが使えるみたいなので、高画質保存なら5回まで保存できるらしい。
ローカルならいくらでも保存できますが、書き出しに結構時間がかかります。これはPCのスペックに依存するのかも。
書き出し形式は「PSD（Photoshop形式）」と「PNG」が選べます。編集するならPSD、そのまま使うならPNGでOK。
仕上がりはこんな感じです。
こんな数分で、ここまでリアルに作れちゃいます！
ちなみにWebに埋め込むこともできます。右上の共有ボタンから「3Dシーンを公開 > 公開リンクを作成」で、CC上にアップロードします。同じく右上の共有ボタンから「埋め込みコードをコピー」を選択し、iframeコードをHTMLへ貼り付けるだけ。
こんな感じで共有で立体共有できます！
いろんな使い方ができそうですね。ぜひ皆さんも使ってみてください！