Photoshopが苦手な画像はIllustratorで作ろう。Photoshopが苦手な画像はIllustratorで作ろう。コンソール風画面の作り方2017-12-09Photoshopが苦手な画像はIllustratorで作ろう。IllustratorのテクニックスポンサーリンクPhotoshopでは作成するのが苦手な画像でも、Illustratorであれば簡単に作成できることがあります。図形を多用した画像などもその一つです。今回はゲーム制作で使われることも多いコンソール風の画面の作例を紹介します。Photoshopは使えるけどIllustratorは苦手だなあ、という方がおられましたら、上の画像をPhotoshopだけで作れるか試していただければと思います。できないことはないと思いますが、非常に面倒です。切り抜き用のオブジェクトを作成するPthotoshopで仕上げ作業。Illustratorが使えるとデザインの幅が広がるスポンサーリンクイラストレーターで図形の作成Illustratorで複合パスを使用して複数の円を作成まずはIllustratorで円を作成します。この円がこの後に作成していく図形の基準になります。最初に作成した円を縮小して二つの円を作成します。縮小で作成してもいいですし、パスのオフセットでもいいでしょう。Illustratorのパスのオフセットというのは、選択したパスから指定した距離に新しいパスを作成する機能です。オブジェクト→パス→パスのオフセットと選択して実行します。拡大縮小だと最初のパスから「120%拡大」というような割り合いでの指定しかできませんが、パスのオフセットであれば、選択したパスから10pixel外側に新しいパスを作成、というような指定ができます。文字の外側に装飾のために、一回り大きいパスを作成するときなどに役立ちます。円の場合は拡大縮小しても形が変わらないので、拡大縮小の方が手っ取り早いでしょう。真ん中の二つのパスを複合パスに変換します。複合パスはオブジェクト→複合パス→作成と選択して作成することができます。Command(Ctrl)+8のショートカットがあるので、こちらを覚えたほうが良いですね。複合パスは二つのパスを一つのパスとして扱う方法です。一つのパスになるので、円を二つを選択して複合パスに変換したときは、ドーナツ状のオブジェクトになります。同じようにして複数の円と複合パスによる厚みのある円を作成しました。切り抜き用のオブジェクトを作成する切り抜き用のオブジェクトを作成していきます。分かりやすいように対象の図形以外は非表示にしました。赤い線が切り抜き用のオブジェクトを作成するためのパスです。最初に作成した円の中心から上方向に向かって真っ直ぐなパスを作成します。円の中心を起点として、60度の角度で回転コピーして6つの線を作成します。線のパスを連結して三角形の図形になったパスを作成します。パスの連結はオブジェクト→パス→連結でできます。切り抜き用のオブジェクトが完成したら、パスファインダタブから「形状エリアを交差」をクリックして、交差している部分のみのオブジェクトを作成します。左上部分だけの交差を表示するとこんな感じです。重なり合ったところだけをパスとして残す機能ですね。同じように残りの二つも「形状エリアを交差」で作成します。他の図形も同じようにして作成します。上記の画像は交差した部分を図形として残したのではなく、交差した部分を削除したオブジェクトです。パスファインダパレットの「形状エリアから前面オブジェクトで型抜き」で作成することができます。上記の作業を繰り返して、残りのオブジェクトも作成しました。スポンサーリンクPthotoshopで仕上げ作業。背景を作成Photoshopで背景を作成します。IllustratorからPhotoshop形式で画像を書き出します。このときにレイヤーパレットから「レイヤーに分配(シーケンス)」を実行しておきましょう。全てのオブジェクトがレイヤーに分配されるので、Photoshopで読み込んだあとに、オブジェクトが一つのレイヤーに統合されてしまって編集できない、という状態を防ぐことができます。Photoshopで24x24の画像を作成し、上記のように上と左側にだけ線を引きます。上記の画像は分かりやすいように400%ほど拡大してあります。背景のレイヤーにレイヤースタイルを適用します。パターンオーバーレイから先ほど作成したパターンを選択します。ユーザーの注視点を中央に持ってきたいので、グラデーションを設定します。レイヤースタイルのグラデーションオーバーレイを使用します。いくつかのオブジェクトの透明度を変更させて完成です。実際のゲーム開発だと、モード選択画面などの背景に使われるようなイメージでしょうか。SF系のゲームでないとイメージに合わないので、使われるゲームが限られてきますが。Illustratorが使えるとデザインの幅が広がるゲーム会社のデザイナーでもIllustratorが使える人は限られています。使うのはUI(ユーザーインターフェイス)デザイナーですね。Station検索してみたらプラチナさんのデザイナーの記事を見つけました。UIデザインを手がけておられるようです。逆に全く使わないというデザイナーさんも多くいます。印刷物やWebを扱うデザイナーさんだと必須なのですが、ゲーム系だとベクター画像を扱うことが少ないので、Illustratorを使えなくても何とかなったりします。Illustratorが使えると表現の幅が広がるのでお薦めです。いう図形タイプの画像はPhotoshopで作成するのが苦手なので、相互補完しながら作業するといいかと思います。15:12Photoshopが苦手な画像はIllustratorで作ろう。ヶ月)アイコンは生後6ヶ月の頃の自分自身です。嫁さん曰く「旦那さんの人生最大のモテ期」だそうですwゲームや映像を作る会社に勤務しています。ブログではゲームや読書、マンガ、ライフハック、戦国、思い出話などの日常を書いています。大阪駅一番ホームの謎。(2)注目記事スポンサーリンクスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。