Category: デザイン

だいたい10年くらいイラレ触ってたのに今更気付いたので
お恥ずかしながら自分用の備忘録としてかきます。

こういうよくあるボタンを描いた時、
ボタンの枠で中央揃えしても文字のバウンディングボックスでかくて下が広くなっちゃうんだよな〜
一旦アウトライン化して位置図るか〜…🤔

という旧石器時代みたいな方法で毎度描いてたのですが

令和のイラレは進化していた！！！！

やってみよう

1. [キーオブジェクトに整列]にしておく
2. 整列パネルの右上メニューにある [字形の境界に整列] → [ポイント文字] にチェックを入れる
3. ボタンの枠をキーオブジェクトにして[垂直方向に整列]

すると…

いい感じに中央揃えになってる！！ Thank you Adobe…

キーオブジェクトをアイコンにすれば、
アイコン付きの文字列も天地中央揃えでキレイに揃います。

イラレは日々進化している

いやこれほんと全デザイナーが待ってたやつ…！一体いつ実装されたんだ！？
と思ったら2020年8月にアプデで実装されてたんですね

機能の概要 | Illustrator |（2020 年 8 月リリース）

イラレは常に進化し続けているのに、
自分は最初に覚えた知識のままアップデートできてないなと実感した日でした。日々勉強！おしまい！！

ここ数年3Dの作品をよく見かけるようになり、
やってみたくても中々ハードルが高くて躊躇していたのですが…
普段使ってるPhotoshopで3Dつくれるらしいぞ → 実際にやってみた！ので記事にしてみました。

用意するもの

• Adobe Illustrator（作画）
• Adobe Photoshop（3D作画）
• Adobe Dimension（3D出力）

CreativeCroud課金者なら上記ぜんぶインストールできます
(※ちなみにPhotoshopでパス書く場合はIllustrator不要です)

主な流れとしては、
① Illustratorでパス書く
② Photoshopで3Dにする
③ Dimensionで3Dを編集する
の3工程です。

早速やっていこう

今回は私のキャラクター「おもち」を3Dにしたいと思います。

おもちです。白くてまるい。足が4本、角が3本あります。

1. パスデータをつくろう

Illustratorを起動してペンツールでキャラクターのシルエットのパスを書きます。
（※ Photoshopでパス描ける方はIllustrator使わなくてOKです）

パスを描くときは3Dにした際のガタつきを減らすため、
なるべくアンカーポイントを減らし、左右対称にするとよい感じです。
また、丸いシルエットにするためコーナーを角丸にしておきます。
(色は後で変更するのでわかりやすいよう水色にしています)

保存形式はaiでOK。体と顔パーツは別のaiファイルにしておきます。

2. Photoshopで読み込んで3Dにする

先ほど作成したaiファイルをPhotoshopで読み込みます。
解像度は300dpi、カラーモードはRGBカラーにしましょう。
(RGBカラー以外だと3D作成できません)

読み込み後はレイヤーを選択し、
メニューバーの[3D]→[選択したレイヤーから新規3D押し出しを作成]を選択します。
図がなんとなく3Dぽくなって、3Dメニューが出ます。

3Dメニューのレイヤー1を選択し、プロパティのシェイププリセットからピロー効果を選択します。すると何だか表面がぷっくりします。

次はプロパティのキャップに移動し
変数を[フロントとバック]、膨張の角度を[90°]強さは[20%]に設定します。
強さを上げるとふくらみが強くなります。

好みのふくらみ加減になったら、座標→座標を初期化をクリックして座標位置をリセットしておきます。

ここまでできたら書き出しましょう。
メニューバーの[3D]→[3Dレイヤーを書き出し]を選択します。
3Dファイル形式を[Wavefront|OBJ]に変更して保存します。

同じ工程で顔パーツも作成します。
すべてのパーツができたら、次はDimentionで3Dデータを編集します。

3. Dimentionで3Dを編集する

Adobe Dimensionを起動して、ファイル→開くで先ほど作成した体パーツの.objファイルを読み込みます。
その後、顔パーツの.objファイルを上にドラッグしてパーツが2つ並ぶように配置します。

ここから軌道カメラツールなどを駆使しつつ顔パーツを体パーツに埋め込みます。

↑軌道カメラツール。ぐるぐる回る

↑パンツール。近寄ったり離れたりする

遠近ツール。手前に寄せたり遠ざけたりする

カメラツールをいじりすぎて位置がごちゃごちゃになってしまったら
メニューバーのカメラ→ホームビューに切り替え(または⌘B)で初期位置に戻しつつがんばります。

顔パーツを選択し、緑色の矢印を選択して十字キー↑を連打。顔の位置を少しずつ上げます。
位置が定まったら次は赤色の矢印を選択して少しずつ横に移動させます。

カメラの視点を上に持っていき、顔パーツが半分埋め込むまれるよう調節します。
納得のいく位置に調整できたら、最後に顔パーツと体パーツをグループ化しておきます。

3Dの組み立てが完成したら後は質感と色を変えます。

マットな質感にしたいので、本体パーツをクリックして
スターターアセットの中にある[Adobe標準マテリアル]から[艶消し]を選びます。
プロパティのベースカラーを白色(RGB 255,255,255)に変更します。
顔パーツも艶消しの黒色(RGB 20,20,20)にしました。

ここまでできたら、あとは背景を合成してみます。

4. 背景を敷いてみる

右上のシーンメニュー内にある[環境]を選択すると、
環境プロパティがいじれるようになるので、ここで好きな背景画像をおきます。

背景を置いた後、アクションから
☑️ カンバスサイズを変更→画像の縦横比
☑️ ライトを作成→抽象
☑️ カメラのパースを合わせる にチェックを入れOKボタンを押します。

すると勝手に位置やライティングを調整して、背景に合うよういい感じに仕上げてくれます。すごい。
あとはお好みで位置や大きさなどを微調整しましょう。

完成したら、デザインメニュー横のレンダリングを選択し、
画質や書き出し形式を好きなものに設定して書き出します。

完成！！

レンダリングしたものがこれになります。
路地裏で猫ちゃんに遭遇したみたいでかわいい~！！

あとがき

Dimensionは今回初めて触ったのですが思ったより直感的に触れてなんとかなりました。
パッケージデザインのモックアップを作るのに適しているそうなので
次回はそっちでも遊んでみたいと思います。

そしてこの記事を書いている間に気がついたのですが、
実は近日中にPhotoshopから3D機能が削除されるみたいです。えっ…？？

Photoshop の 3D 機能 | 廃止された 3D 機能に関するよくある質問

Photoshop22.2を使用すれば引き続き3Dを使えるみたいなんですが、
まさかこんなタイミングで削除のお知らせを見るとは…

やっぱりBlenderから逃げるなということなんですかね？あぁ〜〜…


Figmaにはボタンなどのコンポーネントをまとめて管理できるVariantsと呼ばれる機能があるのですが
これを実際に使ってみたところとっても便利だったので覚書として書きました。
ちなみに昨年追加された機能なのでちょっと今更感ありますが、ご参考になればと思います。

Variantsってなに？

Webデザインでよく使うアイテムは大体コンポーネント化して使っていると思いますが、
その中でもボタンやリストなど「ぱっと見同じデザインだけど色やアイコンの有無でバリエーションがあるもの」
をひとつのグループにして管理できるよ！というのがVariantsです。

やってみよう

まずはボタンのコンポーネントを作成します。
Variantsは複数管理の機能ですので、コンポーネントを2つ以上つくり、コンポーネント化しておきます。

例として赤と青のボタンを作りました。

次はコンポーネントに名前をつけます。
名前をつける際は、ボタンのデザイン規則を意識してつけます。

今回つくったのは赤いボタンと青いボタンなので、
それぞれButton / Red、Button / Blue と付けました。規則は/で区切りましょう。

名前を付け終わったら、
Variantで管理したいコンポーネントをすべて選択し、Conbine as variantsを押します。

これでVariants化できました。

ちゃんとVariants化できたか確認してみましょう。

配置したボタンを選択すると右メニューに[Property1]が追加されてます。
(この名称はVariantsのところから後で変更できます)

このプルダウンを選択すると…

ボタンを切り替えることができました！👏

これを活用すれば、たくさんのデザインをVariantsで管理できます。

ちなみにドロップダウンではなくスイッチで切り替えもできます。

スイッチ切り替えにしたい場合は名前をつける際にon/offまたはtrue/falseにしましょう。
私はアイコンのあり/なしで使ってます。

[Variants]は使えるシーンがちょっと限られる機能ですが、
便利ですのでぜひ使ってみてください。

Adode XDは日々成長する子なので毎月アップデートがあるのですが
そのアプデ内容を公式ブログ以外あまり触れてないのでは…？
という気がするので、またAdobe XDのこと書きます！！！！

先月6月19日に界隈の一部で”神アプデ”と称される、
とある機能が実装されました。
それは『オブジェクトの位置を固定』することができる機能です。

これによりプレビューやウェブ共有した状態でスクロールしても
ヘッダーやフッター、背景画像などが動かないよう固定でき、
よりサイトイメージがつかみやすくなるそうですよ！

これも使い方はすごく簡単で

• 固定したいオブジェクトを選択する
  (ロゴや装飾など細かなパーツがある場合は、あらかじめ1つにまとめてグループ化しておくと◎)
• 右メニュー部分にある「位置を固定」にチェック

これだけで固定ヘッダーの完成！！！！アラマァ〜〜簡単！！
あとはプレビューして動作を確認して、オワリッ！！

ただし固定するときの注意点ですが、スクロールしたときの重なりは
左メニューに表示されてる「レイヤーの順番」で決まるので
ヘッダーレイヤーより上にメインコンテンツレイヤーがあると
スクロールした時にヘッダーをさっくり貫通してしまうので気をつけましょう

↓「ヘッダー」と「ページ上部へジャンプする矢印ボタン」と「背景画像」を固定してパララックスもどきを作りました。
ヘッダーと矢印ボタンレイヤーは上に、背景画像レイヤーは下に置いてます。

これで先方に「本番だとこの部分は動かないようになってます」なんていちいち説明しなくてもオッケ〜〜！！！
よりリアリティが増したサイトデザインに先方もニッコリ！！
打ち合わせもトントン拍子で進んで早く家に帰れる！！

みんなもAdobe XDで最高の夏、手に入れようぜ！！

白を基調としたシンプルなサイトデザインにしたはいいものの、
なんとなく間延びしてるというか寂しい気がするし余白を埋めたくて
ちょっとした背景パターンを敷きたい時ありますね？ね？

そんな時にAdobeXDの機能のひとつ「リピートグリッド」を使って
背景パターンを敷き詰めるとマァ〜便利!っていう以下、覚書です

リピートグリッド とは？
任意のオブジェクトをすきなだけ繰り返せる便利な機能
コロコロスタンプみたいな感じ(小学生並みの例え)

使い方はとても簡単
- 楕円形ツールを使いフィールドに1pxの丸をドロー
- 右のリピートグリッドをクリックしてターンエンド

あとはパターンを敷きたいエリアを伸ばすだけでドット罫線が敷けます アラ〜簡単!

ドットの間をクリックすると縦・横それぞれ間隔調整ができるので
間隔を狭めて細かなパターンにもできますし、
エリアの縦幅と間隔を狭めて横にぐいっと引けば
区切りによくある点線ラインとしても活用できます

ただ、ドットや斜線などのかんたんなパターンはXD上でつくれますが
アラベスク模様など図形として複雑なパターンを敷きたいときは
illustratorなどでつくってからXD上に持って来てリピートさせたほうがいいと思います
XDにもベジェ曲線ツールはありますが、illustratorのように図を描くのに特化はしていないので…