アイソメトリックグリッドベースの3Dレタリングを作成する

著者: John Stephens
作成日: 22 1月 2021
更新日: 19 5月 2024
Anonim
品質アイソメトリックデザインのスキルを学ぶ-イラストレーターアイソメトリックハウスチュートリアル
ビデオ: 品質アイソメトリックデザインのスキルを学ぶ-イラストレーターアイソメトリックハウスチュートリアル

等角投影の原則に基づいて文字を作成することは、現代建築に関する雑誌の特集記事の最近の委託で発見したように、ディスプレイ書体に構造を反映するのに最適な方法です。

コンセプトをさらに進めて、このチュートリアルでは、デザインの基礎となるグリッドを構築するプロセスをガイドし、文字を描画、色付け、照明して3次元の建築シーンを作成する方法を示します。このテクニックの基本を理解したら、それを使用して、スタンドアロンのピースや複雑な繰り返しパターンをすばやく簡単に作成できます。

サポートファイル(2.19MB)をダウンロードするには、ここをクリックしてください

01 このためにIllustratorに直接飛び込まないでください。アイソメトリックグリッドでの作業には精度が必要ですが、鉛筆で紙にいくつかのアイデアをスケッチすることで、達成したいことをより早く感じ取ることができます。画面上で独自の書体を作成する手順に到達したら、1つの文字だけで完全なプロセスを示します。実験して、独自の書体デザインを考え出す方がはるかに優れているからです。


02 アイソメグリッドを作成する方法はたくさんありますが、そのすべてに独自の利点があります。しかし、私にとっては、これが最も簡単な方法です。まず、Illustratorの線ツールを使用して、ページ全体に水平線を描画し、十分な数の線ができるまで数回複製します。次に、すべてを選択し、ツールボックスパネルのせん断アイコンをダブルクリックします。 30度の角度を入力し、縦軸をクリックします。

03 次に、複製をコピーして前面に貼り付け(Ctrl / Cmd + F)、リフレクトツールを選択します。 Shiftキーを押しながら結果を拘束してから、マウスを使用してせん断線を反転します。


04 次に、上記のパターンになるまで、各交差点を通る一連の垂直線を描画します。手っ取り早い方法は、両端に線を引き、ブレンドツールを使用してその間のステップを埋めることです。グリッドを線で描画したら、すべてを選択し、すべての線をガイドに変換して(Ctrl / Cmd + 5)、完成したグリッドを作成します。

05 まだ行っていない場合は、スマートガイド(Ctrl / Cmd + U)をオンにし、ポイントにスナップ(Ctrl / Cmd + Alt + ")を有効にして、正確な位置を取得できるようにします。文字を作成するために、一連の文字を作成します。 30度の線に沿った立方体。塗りつぶしなしで作業しながら、立方体の各辺を別々に描画します。


06 それぞれの面を描いたら、それらを組み合わせて最初の立方体を作成します。文字の見た目によっては、後で表示して使用したい場合があるため、非表示の面を含めるようにしてください。この時点で、光源を定義するためにいくつかの基本的なシェーディングを追加する価値があります。光源を左下から入射するように選択しました。これにより、上部の平面が暗くなり、右側の平面のグラデーションが中程度になり、左側の平面がかなり明るくなります。

07 キューブを複製して再配置することにより、最初の文字の作成を開始します。ここで、スマートガイドとスナップツーポイントが役立ちます。光源を定義すると、文字をより明確に視覚化できるようになります。

08 文字の形に満足したら、さらに高度な色を追加し始めます。ここでは完璧なリアリズムを求めているわけではないので、美的効果のためにルールを少し破ることができます。たとえば、実際には顔全体に1つのグラデーションしかないという事実にもかかわらず、関心を引くために各立方体に中程度から軽いグラデーションを維持しました。

09 次に、文字をより建物のようにします。まず、前面の一部を削除して、背後にあるものを明らかにします。これらの背面を少し暗い色合いに着色して、深みを増します。透明度パレットで青のグラデーションを追加して不透明度を調整してウィンドウを作成したり、底面に緑のグラデーションを追加して芝生の領域を作成したりすることもできます。色やテクスチャを自由に試して、土、舗装、モノブロッキングなど、考えられるあらゆるものを作成してください。草はフラットカラーを使用していますが、たとえばフィルムグレインを使用してテクスチャを追加することもできます。

10 基本文字が完成したら、30度のグリッドに沿っていくつかの影を描き、構造物の高さを示します。影を描くときは、単に白にフェードするのではなく、不透明度を使用してフェードを表します。より自然な外観と、問題なく下に背景色を追加できるようになります。また、シャドウは黒ではなく、キャストされる色の濃い色合いであることを忘れないでください。したがって、たとえば草に影を落とす場合は、黒から白ではなく、濃い緑からクリアにする必要があります。

11 文字にある程度のスケールを与えるには、別の認識可能な要素を追加する必要があります。この場合、建物を扱っているので、シーンに人を追加するのは理にかなっています。再び30度のグリッド線上に、ラフなシルエットと一致する影を描きます。

12 フィギュアの選択肢が少なくなったら、シーンに追加し始めます。繰り返しになりますが、影の色が一致していることを確認し、窓の内側や床の間など、興味を引く位置に影を配置してみてください。

13 前と同じように続けて、他の文字を描き始めます。興味深い構成を探し、バリエーションのために同じ文字をレンダリングするさまざまな方法があるかどうかを確認します。たとえば、大きな芝生を追加することもできます。読みやすさをあまり妨げない限り、先に進んで使用してください。

14 必要な文字をすべて描いたら、ソースを配置します。また、レトロフューチャーな雰囲気を出すために、フィルムグレインを少量追加します。次に、説明する単語を追加して、それらがどのように一緒に見えるかを確認します。これは、文字の1つがシーケンス内で完全に機能していないことに気付く可能性があるポイントであり、小さな改善を行うチャンスです。

15 最終段階は、画像に必要な構図について考えることです。この例では、アイソメトリックスタイルを継続したいので、グリッド上で30度の角度に沿って文字を配置しました。これは作品にクールな誤った視点を与えます。前と同じように、単語を好きなように実験して配置することができます-千鳥、降順、またはまっすぐ。遊んで、何が最もよく見えるかを確認してください。最後に、背景にグラデーションを追加して、ピースを接地し、光源を強調します。また、レトロフューチャーな雰囲気を出すために、フィルムグレインを少量追加します。

私たちの出版物
ゲーミフィケーションに関するプロのガイド
発見する

ゲーミフィケーションに関するプロのガイド

この記事は、ウェブデザイナーと開発者向けの世界で最も売れている雑誌である.netマガジンの228号に最初に掲載されました。ゲーム自体の外でゲームの仕組みを適用する手法であるゲーミフィケーションは、2011年に好調でした。技術調査会社のGartnerは、「モノのインターネット」や「ビッグデータ」とともに「誇大広告サイクル」に追加しました。オックスフォード辞書は、ほぼ2011年のWord of the...
2016年の最高のフリーランスポートフォリオの6つ
発見する

2016年の最高のフリーランスポートフォリオの6つ

まず、1つのことを明確にすることから始めましょう。フリーランサーとして、ベル、ホイッスル、視差スクロール効果を備えた、非常に印象的なポートフォリオサイトを用意する必要はありません。結局のところ、そこに投稿する作業がすべてです。結局のところ、最も有名なデザイナーの何人かがBehanceのようなクッキーカッターサービスを使用してポートフォリオを提示できれば、他の人ができない理由はありません。とはいえ、...
この見事なオーダーメイドの3Dプリントギターに畏敬の念を抱くでしょう
発見する

この見事なオーダーメイドの3Dプリントギターに畏敬の念を抱くでしょう

3Dプリントがどのように主流になるのか、以前から聞いていました。高い野心からハイストリートまで、最新世代の手頃な価格のプリンターは新しい扉と機会を開きます。Michael William はこのテクノロジーを採用し、それを使用して、特注のエレキギターを所有するという彼の野心を達成しました。 15年以上前にウィリアムズは自分のギターをデザインしましたが、ロックスターとして作ってギターメーカーが作って...