Illustratorで作るUX Design
Photoshopのチュートリアルは膨大にあるけどUX DesignとかインターフェイスなんかのデザインはIllustratorがおすすめ。どちらもこだわればスキル次第で写真と区別がつかないほどのものを作れる。あとはアプリの特性次第。UIを作る場合Illustratorの方が圧倒的に速い。ベクターなのでサイズや形状の修正も可能。配置もありInDesignとも連携がとれますよと。
ということでチュートリアル。最近まともなネタも書いてなかったので軽く書いてみる。軽くなのでさっくりボタン。Illustratorでデジタルデバイスに出力して使う場合気を付けるのはpx。それなりのアプリになると書き出し画像が1,000超えるけどパーツであればちょっとしたものなのでpxに小数点がでないように作る。それだけ。
まず背景。この辺は適当に。適当にチュートリアル用に作ったのであれですがちゃんと作るならテクスチャはビットマップで配置した方がいいです。無駄にパスが増えると重くなり効率が悪いです。テクスチャがIllustratorであればAI作成, PSビットマップ出力, AIに配置。
長方形を書いてスタイライズから角丸6pxを適用。同じくスタイライズから光彩の内側で黒、乗算を適用。
3pxずつ(width,heightでいうと6pxずつ)小さい長方形を配置。スタイライズから角丸適用。角丸は外側のオブジェクトと同じ値ではRが不自然なので5.5px。ボタンの下地なのでグラデーションも適用。
立体を強調するためにテカリを入れる。下地で作成したパスを2回コピペして片方を1px下にずらし、パスファインダで重なりあっていない部分の上部1pxのボーダーを作成。グラデを0度でかけると立体的に。グラデや不透明度は適当に調整。
また同じように下地をコピペ。グラデーションメッシュでテカリを追加。真ん中の一番下のポイントだけ白に、ほかは黒に。描画スクリーンで不透明度を調整。グラデーションメッシュでなくてもいいけど単純なものであってもグラデーションメッシュは便利。ちょっとしたものだけにポイントもそれほど増えない。
下地をコピペ。Illustrator上部メニューからオブジェクト、アピアランスを分解で角丸のアウトライン化。下側の角丸部分のアンカーやポイントを削除して下側を直角に。下地の上部半分にテカリを入れる。個人的にはこのテカリはやり過ぎが嫌い。テカテカすぎるのは品がない低クオリティの趣味悪すぎカスな感じ。ただのボタン、インターフェイスのくせにケバケバしい。控えめが吉。でも主張しすぎず控えすぎず。
文字入れ。立体感を出すための下地側なので黒系。
文字入れ2。先程の文字と1px程度ずらす。若干馴染ませるために色や不透明度をちょっとだけ調整して背景と馴染ませる。
完成。Photoshopで作るより早くできる。クオリティもスキルと時間次第でどうにでも。同じスキル同じ時間ないであればIllustratorのが早く再利用も可。
ちなみにチュートリアルでさっくり作ったものなので全部同じAIファイル上で作成。自分は以前Photoshopばかりで完結させてたけどIllustrator覚えるとかなりいい。最初Illustratorでグラデーションてどうやるの？とか聞いてたレベルだけどｗ
