別の次元、新しい習得–アイソメトリックイラストレーションチュートリアル

イラストは、普通の被写体にエネルギーを与え、複雑なアイデアを視覚的に明瞭に伝える能力において比類のないものですが、アイソメトリックイラストはどうですか？ 彼らは悪名高いほど困難で時間のかかるものではありませんか？ 6つの簡単なステップで、このアイソメ図のチュートリアルにより、プロセスが迅速かつ簡単になります。

ランディングページを活気づける必要がありますか？ 退屈なデータを視覚化しますか？ 当たり障りのないパッケージにパンチを追加しますか？ イラストはあらゆる面での答えです。

近年、等角図は二次元空間で三次元の奥行きを表現する方法で人気を博しています。 さらに、アイソメトリックグリッドは、イラストのフラストレーションの一般的な原因である遠近法の錯覚を維持する必要をなくします。

Adobe Illustratorでは、従来のアイソメ図のプロセスは面倒です。 アイソメグリッドを作成し、正方形を描き、-30°傾斜させ、-30°回転させます。 幸いなことに、もっと良い方法があります。 Illustratorには、アイソメ図をすばやく簡単に作成する3D効果があります。「押し出しと斜角」、「回転」、「回転」です。

このチュートリアルでは、「Revolve」を使用してアイソメイラストを作成する方法を示しますが、洞察はIllustratorの残りの3D効果にも適用されます。

クライアントを感動させ、ユーザーを喜ばせ、アイソメトリックイラストレーションの秘密を学ぶ準備はできていますか？

Revolve＆Refine：アイソメイラストチュートリアル

氷のように冷たい飲み物を楽しんでいないのは誰ですか？ ラベル付きのアイソメトリックボトルをデザインして、液体のリフレッシュの喜びを乾杯しましょう。

*上級者向けのヒント：開始する前に、ボトルがどのように見えるかを通知するオブジェクト参照を見つけてください。

ステップ1：ボトルと液体を描画します

1.1）新しいAdobeIllustratorドキュメントを作成します。

1.2）ドキュメントにボトル参照を追加します。

1.3）ボトルとその中の液体の輪郭を描きます。

1.4）ボトルと液体を半分に分割します（以下を参照）。

1.5）ボトルの輪郭のストロークの厚さは、ガラスの厚さを定義します。

*上級者向けのヒント：バックアップとしてアートワークをアートボードの外にコピーして貼り付けます。

ステップ2：回転効果を適用する

名前が示すように、「Revolve」はその軸を中心に形状を回転させます。 Illustratorでは、「回転」軸の位置は垂直方向に固定されています。 これが、ボトルの輪郭が描かれ、半分に分割された理由です。

*上級者向けのヒント：ボトルの輪郭も液体オブジェクトも、塗りつぶしの色としてグラデーションを使用しないでください。

2.1）「Revolve」エフェクトを見つけるには、「Effect>3D>Revolve…」に移動します。

2.2）ダイアログウィンドウの上部に、「Position」というラベルの付いたフィールドがあります。 「IsometricLeft」を選択します。

2.3）角度–これはオブジェクトの軸の周りの回転の程度です。 180°に設定すると、ボトルが垂直に半分に分割されます。 完全に回転するボトルの角度を360°に設定します。

2.4）オフセット–オブジェクトの垂直軸からのオフセット距離を制御します。 「0」を入力します。

2.5）サーフェス–オブジェクトのマテリアルと照明のプロパティを設定します。 「シェーディングなし」を選択します。

タダ！ 液体のアイソメトリックボトル。 リラックスして、リラックスして、待ってください。 そのボトルにはラベルが必要です。

*上級者向けのヒント：ラベルが作成されるまで、ボトルの「外観の拡大」機能を使用しないでください。

ステップ3：ラベルを準備する

3.1）ボトルを使用してラベルの寸法を定義します。

3.2）下の例の画像では、ボディラベルの高さは明らかですが、表面が軸に平行でないため、ネックラベルの高さは明確ではありません。 おおよその高さで十分です。

3.3）ラベルの長さは、円周の式2πrを使用して計算されます。

3.4）満足のいくラベルがデザインされたら、両方のラベルをシンボルに変換します。 「シンボル」パレットは、「ウィンドウ」>「シンボル」の下にあります。

3.5）ラベルデザインを個別にパレットにドラッグアンドドロップして、シンボルを作成します。

*注： IllustratorとSketchのシンボルは同じように機能します。

ステップ4：ラベルをボトルにマッピングする

「外観の拡大」機能を使用してボトルがベクトル化されていない限り、ボトルは完全に編集可能です。

4.1）ボトルを選択し、「外観」パレットを表示します：ウィンドウ>外観

4.2）次に、「3D Revolve」を選択すると、前のダイアログボックスが表示されます。

4.3）デザインをボトルにマッピングするには、左下のオプション「マップアート」をクリックします。

4.4）これにより、ボトルの記号を選択して調整することができます。

4.5）シンボルが正しい表面に一致していることを確認してください（以下を参照）。

4.6）「Scaleto Fit」をクリックすると、ラベルがボトルにマッピングされます。

4.7）ネックラベルについても同じ手順に従います。

ステップ5：乱雑なファイルを避ける

5.1）次に、「外観の拡張」機能を使用して、ボトルをベジェ曲線に変換します。オブジェクト>外観の拡張

Illustratorは、主に3Dオブジェクトの操作を目的としたものではありません。 オブジェクトの外観を拡張すると、3Dオブジェクトのような錯覚を与える小さな要素のグループ化されたコレクションが作成されます。

5.2）物事を整頓するために、要素を「パスファインダー」または「シェイプビルダー」ツールと組み合わせます（以下を参照）。

*上級者向けのヒント：オブジェクトを結合すると、不要なアンカーポイントが作成されます。 [オブジェクト]>[パス]>[簡略化]に移動して、それらを減らします。 Illustratorを定期的に使用する場合は、VectorScribeプラグインとそのポイント削除ツールを強くお勧めします。

ステップ6：色とグラデーションで生命を追加する

最後のステップとして、色とグラデーションでボトルに命を吹き込みます。 ここで、個々の芸術性が発揮されます。 反射、ハイライト、シャドウを追加してリアルな外観にするか、ストロークと簡略化されたカラーパレットを使用してよりグラフィックな雰囲気にします。 強固な基盤により、スタイルの可能性は無限に広がります。

アイソメイラストに乾杯！

アイソメトリックイラストは、幅広いデザインプロジェクトに深み、次元、個性をもたらします。 このチュートリアルで概説されている原則を使用して、より等角投影の可能性を探り、Illustratorの他の3D効果である「回転」と「押し出しと斜角」を試すことを忘れないでください。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

Toptal Designブログでさらに読む：

• ビジュアルシェルフライフ–Webデザインのイラストが古くなる理由
• 描画スキルなしでカスタムイラストをデザインするためのステップバイステップガイド
• 新しい現実：VR、AR、MR、そしてデザインの未来
• Designer's Edge –Photoshopプラグインの概要
• 進化する絵文字：メッセージングの新しい顔のためのデザイン