Isometric 일러스트 그리기
아이소메트리
아이소메트리 Isometry 란 투영법의 일종이다. 3차원의 물체를 편면 상에 표현하기 위한 방법으로 x, y, z 세 좌표축이 서로 이루는 각도가 모두 같거나 120도를 이루는 특성을 가진다.
아이소메트리는 제도 분야에서 주로 쓰이며 복잡한 형태나 개념을 쉽게 표현할 수 있다는 장점이 있어 그래픽 분야에서도 널리쓰인다.
입방체를 등축 투영법으로 그린 모습. 모든 모서리의 길이가 같으며, 경계의 모습은 완벽한 6각형을 이루고 있다.
일반적으로 일러스트레이터에서 아이소메트리을 표현하려면 기본 도형의 패스를 잡아 늘려서 만든다. 여기서는Extrude & Bevel을 이용해 더 정확하고 효율적으로 그리는 방법을 소개한다.
Extrude & Bevel 활용법
1.가이드 만들기
30도(반대 방향은 330도) 각도의 라인을 그린 뒤 상단 탭의 View > Guide > Make Guide를 선택해 가이드를 만든다.
2.벡터 라인 3D로 만들기
프론트 뷰에 해당하는 벡터 라인을 그리고 Effect > 3D > Extrude & Bevel를 적용한다. 여기서 완전한 블랙을 적용하면 그림자가 지지 않는다. 아이소메트리가 아닌 일반 투시법을 이용하려면 옵션창에서 Perspective 수치를 조절하면 된다. 이 때 Black 색상이 적용되어있다면 명암이 보이지 않는다.
이펙트가 적용된 벡터는 아직 수정가능하다. 스트로크 굵기나 색상, 벡터 라인이 편집 가능하다. 아래 이미지는 스트로크 굵기, 색상시 편집된 예시이다.
3. 가장자리 라인 만들기
편집이 완료된 벡터의 가장자리 라인을 이용해 아이소메트리을 만들려면 상단 탭의 Object > Expand Appearance를 적용한다. 형태를 Ungroup하면 가장자리 라인을 활용할 수 있다.
Resolve 활용법
Revolve를 이용하면 유기적인 형태를 만들기 편리하다.
원하는 형태의 아웃라인의 한쪽 면만 그리고 Extrude & Bevel 대신 Effect > 3D > Revolve를 선택한다. 기본은 왼쪽 방향으로 회전하지만 옵션에서 오른쪽으로 변경할 수 있다.
Tip. Effect > 3D > Rotate는 기존 벡터에서 면을 만들지 않고 회전만 시킨다.
시각 보정
아이소메트리는 3가지 면이 보이며 모든 선이 평행으로 뒤의 형태가 짧아보이지않는다. 우리의 눈은 원근법에 익숙하기 때문에 아래와 같은 몇가지 시각보정 팁이 필요하다.
중심
원근법에 따라 왼쪽의 물체는 A가 B보다 더 길다. 아이소메트리로 그렸을 때 중심은 원근법으로 그렸을 때와 시각적으로 같은 위치에 표현한다. 위의 아이폰 아이소메트리 목업에서 홈버튼과 상단 스피커 구멍이 실제 중심보다 살짝 오른쪽으로 시각보정된 것을 확인할 수 있다.
사이즈
아이소메트리에서는 원근이 적용되지 않기 때문에 앞 뒤 물체의 사이즈가 같아진다. 하지만 위의 지게차 그림의 예시를 보면 앞 뒤의 바퀴 사이즈가 같으면 뒷 바퀴가 더 커보이는 착시가 일어난다. 따라서 상황에 따라 뒤에 위치한 물체는 더 작게 시각보정할 필요가 있다.
각도
아이소메트리에서는 대칭되는 선이 평행선이라 물체가 어색해 보일 수 있다. 각도를 살짝 틀어줘서 이 문제를 해결할 수 있다. 아래 노트북을 보면 모니터 각도를 살짝 바꿔서 더 자연스러워 보이는걸 확인할 수 있다. 30도 각도 그리드를 항상 유지할 필요는 없다.
볼륨
위의 아이폰 그림에서 오른쪽이 왼쪽보다 더 스타일리시해 보인다.
아이소메트리에서는 항상 3가지 면을 보게된다. 약간의 스타일 테크닉을 사용하지 않으면 멋진 2D일러스트레이션이 아닌 어색한 아날로그 3D렌더링 이미지로 느껴진다.
네거티브 스페이스, 도형의 라인, 텍스쳐, 대비되는 그림자 같은 방법을 쓰도록하자. 되도록이면 메인컬러에서 너무 많은 색상을 사용하지 않는다. 위의 1번처럼 탁하고 명확하지 않아보인다.
이 방법들을 이용하면 시간을 줄일뿐만 아니라 더 전문적인 일러스트레이션처럼 보인다. 아래 예시를 살펴보자.
참고링크 🔗
Last updated
