丸だけで!Photoshopで3Dモデルを作ろう-前編-

タイトル画像

こんにちは。
Webデザイン見習いになったみゃむです。
今回はPhotoshopとDimensionで3D素材を使ったグラフィックを作ります。

瓶詰め夜空
こちらは2018年7月12日にAdobe本社で行われた
Dimensionのユーザーグループのミーティングで
ご紹介させていただいたこちらの作品のレシピになります。

ミーティングの模様はこちらからご覧いただけます。

最初にDimensionグループの発起人である樋口デザインの樋口泰行さん (@higuchidesign)のセッション。
まだDimensionを使ったことがない方にも分かりやすく機能を紹介されていました。
次にDimensionをデザインの現場でもよく使っていらっしゃるという
doki doki DESIGN&PRODUCEの兼重 遥さんのセッション。
実際の業務での使用例を解説していらっしゃいました。
ボトルの蓋だけ使うというアイディアは目から鱗でした!
そして最後に私の方から投稿した作品の紹介を手短にさせていただきました。

制作の意図

ミーティング内でも触れているのですが、
Dimensionは用意された3D素材に テクスチャを貼ったり、
背景といい感じに合成するためのアプリです。
3D素材が無ければ始まらないアプリなのです。

では欲しい3Dモデルのデータがなかったらどうするのか。
答えは簡単、作ってしまえばいいのです。
でも3Dソフトなんて持ってないし難しそう。。と思いますよね。
実は我らがPhotoshopで3Dデータを作れてしまうのです!
しかも今回の素材は丸1個描ければできちゃいます!

ただしペンツールが無理なく使える方はもっと違うやり方もあります。
そのやり方はまた次回。

Photoshopで3Dデータを作るのは過去記事でも触れていますので、
併せてお読みいただけると幸いです。
ブログタイトル Photoshopで3D PDFを書き出そう

パーツの内訳け

今回制作するのは瓶のフタ、瓶本体、瓶の足の3つのパーツです。
このうちフタと足をPhotoshopでモデリングします。
瓶本体は外部サイトから素材を借りてDimensionで合成します。

瓶の足を作ろう

1.まずは瓶の足を作っていきましょう。
Photoshopを起動したら、ファイル/新規で
1,000px×1,000pxのカンバスを用意します。解像度は300で。

できましたら楕円形ツールで正円を描いてください。
Shiftを押しながらドラッグすると正円になりますよ。
色は何でもいいです。

正円を描く

2.ではこのまま3D/選択したレイヤーから新規3D押し出しを作成をクリックしてください。

3D押し出しを新規作成

「3D レイヤーを作成しようとしています。3D ワークスペースに切り替えますか?」
というダイアログが出るので「はい」を押してください。

ダイアログが出ます

すると3Dデータを作成するための画面に切り替わります。

左上のウィンドウはオブジェクトを真上から見た状態です。
横からだけでなく、このウィンドウも見ながらの作業となります。
この画面に切り替えると、先ほどの丸が自動的に円柱のように押し出されています。
この押し出し方を切り替えることで、様々な形を作ることができるのです。

3.では3Dパネルのシーンを選択した状態で
属性パネルのシェイププリセットの下向き矢印をクリックします。

パネルの説明

その中から「ベベルフレーム」を選びます。
各プリセットにカーソルを当てると名称が出ますので、
そちらを見ながら選ぶと良いです。

シェイププリセット

すると丸のフチにが段々になりました。

 

4.そのまま属性パネルの上部にある小さなボタンを「キャップ」に切り替えます。
辺数のプルダウンをフロントにしているのを確認して
輪郭のパネルを「くぼみー深く」にします。

属性パネルのキャップ

すると段々だったふちが滑らかな曲線に変わりました。
俯瞰で見てみるとよく分かりますね。

ではこれをもう少し整えていきましょう。

属性パネルの「ベベルの幅」を50%くらいに増やしてください。
すると手前側に細い部分が伸びてきます。

キャップの形状の変化

次に属性パネルのボタンを「メッシュ」に切り替えて、
「押し出しの深さ」を50px程に減らしてください。
上から見た状態を見ながらだとよく分かります。
この画像くらいになりましたらあと一息です。

ベベルの変更

5.移動ツールに切り替えてオブジェクトの真下あたりにカーソルを持っていきます。
X軸を中心に回転という文章が出てきましたらそこでクリックして、
手前側が上になるように一気に-90°回転させます。

オブジェクトを回転させる

オブジェクトを起こすGIF動画

6.ではこちらを3D書き出ししていきましょう。
メニューバーの3Dから3Dレイヤーを書き出しを選び、
3Dファイル形式を「wavefrontOBJ」にして保存してください。
このOBJファイルがDimensionで扱える3Dデータの形式です。

OBJ書き出し
これで1つ目のパーツが完成しました。

フタの部分を作る

1.蓋の部分も基本的には足の作り方と同じです。
足の3の工程まで同じように進めてください。

3D押し出しの画面

2.属性パネルのボタンを「キャップ」に切り替え、辺数はフロントのまま。
輪郭のパネルを「角丸ステップ」にします。

属性パネル

このままですとトップの部分が凹んでしまいますので輪郭をカスタマイズします。

輪郭の真下にある山のシルエットのようなところをクリックすると、
形を変更することができます。
一番右側のアンカーを山なりになるように上に上げてください。

輪郭の修正

ベベルの目安

分かりにくいので動画でどうぞ。

輪郭を修正するGIF動画

こうすることでトップの部分の凹みが取れました。
次にベベルの幅を50%くらいにして高さを出しましょう。

ベベルの高さを調整

 

3.次は背面にせり出ている部分を修正します。
足の時と同じように、属性パネルのボタンを「メッシュ」に切り替えて、
押し出しの深さ」を50px程に減らしてください。

押し出しの深さの調整

フタは少し末広がりな形にしたいので、属性パネルを
「変形」に切り替えて テーパーを100%から105%くらいにしましょう。

テーパーをつける

できましたらこれも足の時と同じように
オブジェクトを-90°回転させて起こします。

オブジェクトを起こす
あとはOBJ書き出しをしてフタのモデリングも終了になります。
お疲れ様でした。

長くなってしまいましたので続きは後半で!

おまけ
めちゃめちゃ早回しのフタのモデリングからDimensionで合成するGIF動画です。
早いですが流れとしてはこんな感じで進めます。

PhotoshopからでDimensionのGIF動画

 

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA