또 다른 차원, 새로운 숙달 – 아이소메트릭 일러스트레이션 튜토리얼

일러스트레이션은 평범한 주제에 활력을 불어넣고 복잡한 아이디어를 시각적으로 명확하게 전달할 수 있다는 면에서 타의 추종을 불허하지만 아이소메트릭 일러스트레이션은 어떻습니까? 그것들은 악명이 높고 시간이 많이 소요되지 않습니까? 이 아이소메트릭 일러스트레이션 튜토리얼은 간단한 6단계로 프로세스를 빠르고 복잡하지 않게 만듭니다.

랜딩 페이지에 활기를 불어넣고 싶으신가요? 지루한 데이터를 시각화하시겠습니까? 단조로운 포장에 펀치를 추가하시겠습니까? 일러스트레이션은 모든 면에서 답입니다.

최근 몇 년 동안 아이소메트릭 일러스트레이션은 2차원 공간에서 3차원 깊이를 표현하는 방식으로 인기를 얻었습니다. 또한 등각 투영 그리드는 일러스트레이션 좌절의 일반적인 원인인 원근감의 환상을 유지할 필요성을 무효화합니다.

Adobe Illustrator에서 전통적인 아이소메트릭 일러스트레이션 프로세스는 지루합니다. 아이소메트릭 그리드를 만들고, 정사각형을 그리고, -30° 기울이고, -30° 회전하고, 계속 반복합니다. 다행히 더 좋은 방법이 있습니다. Illustrator에는 "돌출 및 경사", "회전" 및 "회전"과 같이 등각투영 일러스트레이션을 빠르고 쉽게 만드는 3D 효과가 있습니다.

이 튜토리얼은 "Revolve"를 사용하여 등각 투영 일러스트레이션을 만드는 방법을 보여주지만 통찰력은 Illustrator의 나머지 3D 효과에도 적용됩니다.

고객에게 깊은 인상을 주고 사용자를 즐겁게 하며 아이소메트릭 일러스트레이션의 비밀을 배울 준비가 되셨습니까?

Revolve & Refine: 아이소메트릭 일러스트레이션 튜토리얼

누가 얼음처럼 차가운 음료를 즐기지 않습니까? 라벨이 있는 아이소메트릭 병을 디자인하여 음료의 즐거움을 건배합시다.

*프로 팁: 시작하기 전에 병이 어떻게 생겼는지 알려주는 개체 참조를 찾으세요.

1단계: 병과 액체 그리기

1.1) 새 Adobe Illustrator 문서를 만듭니다.

1.2) 문서에 병 참조를 추가합니다.

1.3) 병과 그 안의 액체의 윤곽을 그립니다.

1.4) 병과 액체를 반으로 나눕니다(아래 참조).

1.5) 병 윤곽의 획 두께는 유리 두께를 정의합니다.

*프로 팁: 아트보드 외부의 아트웍을 복사하여 백업으로 붙여넣습니다.

2단계: 회전 효과 적용

이름에서 알 수 있듯이 "Revolve"는 축을 중심으로 모양을 회전시킵니다. Illustrator에서 "회전" 축의 위치는 수직으로 고정되어 있습니다. 이것이 병의 윤곽을 잡고 반으로 나눈 이유입니다.

*프로 팁: 병 윤곽선이나 액체 개체 모두 채우기 색상으로 그라디언트가 없어야 합니다.

2.1) "회전" 효과를 찾으려면 효과 > 3D > 회전…으로 이동합니다.

2.2) 대화창 상단에 "Position"이라는 필드가 있습니다. "등각 왼쪽"을 선택합니다.

2.3) 각도 – 이것은 개체의 축을 중심으로 회전하는 정도입니다. 180°로 설정하면 병이 수직으로 반으로 나뉩니다. 완전히 회전된 병의 경우 각도를 360°로 설정합니다.

2.4) 오프셋 – 개체의 수직 축에서 오프셋 거리를 제어합니다. "0"을 입력합니다.

2.5) 표면 – 개체의 재질 및 조명 속성을 설정합니다. "음영 없음"을 선택합니다.

타다! 액체가 있는 아이소메트릭 병입니다. 휴식을 취하고 긴장을 풀고 기다릴 시간입니다! 그 병에는 라벨이 필요합니다.

*Pro Tip: 라벨이 생성될 때까지 병에 "Expand Appearance" 기능을 사용하지 마십시오.

3단계: 라벨 준비

3.1) 병을 사용하여 라벨 치수를 정의합니다.

3.2) 아래의 예시 이미지에서 바디 라벨의 높이는 분명한데 넥 라벨의 높이는 면이 축과 평행하지 않기 때문에 명확하지 않습니다. 대략적인 높이는 충분합니다.

3.3) 라벨 길이는 원주 공식 2πr을 사용하여 계산됩니다.

3.4) 만족스러운 라벨이 디자인되면 두 라벨을 모두 기호로 변환합니다. "심볼" 팔레트는 창 > 심볼 아래에 있습니다.

3.5) 라벨 디자인을 팔레트에 개별적으로 끌어다 놓아 심볼을 생성합니다.

*참고: Illustrator 및 Sketch의 기호는 유사하게 작동합니다.

4단계: 라벨을 병에 매핑

병이 "Expand Appearance" 기능을 사용하여 벡터화되지 않은 한 완전히 편집할 수 있습니다.

4.1) 병을 선택하고 "모양" 팔레트를 표시합니다. 창 > 모양

4.2) 그런 다음 "3D Revolve"를 선택하면 이전 대화 상자가 나타납니다.

4.3) 디자인을 병에 매핑하려면 왼쪽 하단 옵션인 "Map Art"를 클릭합니다.

4.4) 이를 통해 병의 기호를 선택하고 조정할 수 있습니다.

4.5) 기호가 올바른 표면과 일치하는지 확인하십시오(아래 참조).

4.6) "Scale to Fit"을 클릭하면 라벨이 병에 매핑됩니다.

4.7) 목 라벨에 대해 동일한 단계를 따릅니다.

5단계: 지저분한 파일 피하기

5.1) 이제 "Expand Appearance" 기능을 사용하여 병을 Bezier 곡선으로 바꿀 차례입니다. Object > Expand Appearance

Illustrator는 주로 3D 개체 조작을 위한 것이 아닙니다. 개체의 모양을 확장하면 3D 개체의 환상을 주는 더 작은 요소의 그룹화된 컬렉션이 만들어집니다.

5.2) 깔끔하게 유지하려면 요소를 "Pathfinder" 또는 "Shape Builder" 도구와 결합합니다(아래 참조).

*프로 팁: 개체를 결합하면 원치 않는 기준점이 생성됩니다. 개체 > 경로 > 단순화로 이동하여 줄입니다. Illustrator를 정기적으로 사용하는 사람들에게는 VectorScribe 플러그인과 포인트 제거 도구를 적극 권장합니다.

6단계: 색상과 그라디언트로 생명을 더하다

마지막 단계에서는 색상과 그라디언트로 병에 생기를 불어넣습니다. 여기서 개인의 예술성이 발휘됩니다. 사실적인 모양을 위해 반사, 하이라이트 및 그림자를 추가하거나 보다 그래픽적인 분위기를 위해 획과 단순화된 색상 팔레트를 사용하십시오. 견고한 기초와 함께 스타일의 가능성은 무궁무진합니다.

아이소메트릭 일러스트레이션에 건배!

아이소메트릭 일러스트레이션은 다양한 디자인 프로젝트에 깊이, 차원, 개성을 부여합니다. 이 튜토리얼에 설명된 원칙을 사용하여 더 많은 등각 투영 가능성을 탐색하고 Illustrator의 다른 3D 효과인 "회전" 및 "돌출 및 경사"를 시도하는 것을 잊지 마십시오.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 시각적 유효 기간 – 웹 디자인 일러스트레이션이 오래된 이유
• 드로잉 기술 없이 맞춤형 일러스트레이션을 디자인하는 단계별 가이드
• 새로운 현실: VR, AR, MR 및 디자인의 미래
• Designer's Edge – Photoshop 플러그인 개요
• 진화하는 이모티콘: 메시징의 새로운 얼굴을 위한 디자인