소개

아이소메트릭 투영은 3D 개체를 2D 평면에 나타내는 방법으로, 개체의 세 좌표축(x, y, z)을 따라 측면이 동일하게 단축됩니다. 개체는 수평면에서 30° 각도로 그려지며, 항상 세 면이 시청자에게 보입니다. 동일한 단축 효과는 축에 대한 동일한 스케일링으로 인해 발생합니다. 축 사이의 각도 또한 120°로 동일합니다.

'아이소메트릭'이라는 용어는 '동일한 측정'을 의미하는 그리스어 "isometria"에서 유래했습니다.

아이소메트릭 투영은 이등축 투영 및 삼등축 투영과 함께 축측 투영으로 분류됩니다. 축측 투영은 투영선이 서로 평행한 평행 투영의 한 유형입니다. 원근 투영에서 평행선이 하나의 소실점으로 수렴하는 것과는 달리, 평행 투영에서는 소실점이 존재하지 않으므로 이 평행선은 영원히 평행하게 연장됩니다.

세 가지 축측 투영을 비교하려면 아래 그림을 참조하십시오.

같은 색상의 축선은 동일한 스케일링을 나타냅니다. 또한, 같은 색상의 면은 동일한 단축을 나타냅니다. 처음에 설명했듯이 아이소메트릭 투영에서는 세 좌표축에 대한 스케일링이 동일하므로 모든 면이 동일하게 단축됩니다. 이등축 투영에서는 두 면이 다른 면보다 동일하게 단축되고(두 축은 동일한 스케일링을 가지며, 한 축은 다른 스케일링을 가짐), 삼등축 투영에서는 모든 면이 서로 다르게 단축됩니다(축들이 서로 다른 스케일링을 가짐).

소실점이 존재하지 않기 때문에 평행 투영의 개체는 시청자에 대해 더 크거나 작게 보이지 않습니다. 이는 왜곡을 초래하고 착시를 만들 수 있습니다. 이러한 한계는 특히 아이소메트릭 투영에서 두드러집니다. 아래 아이소메트릭 투영으로 그려진 착시를 살펴보십시오. 뭔가 이상한 점을 발견하셨나요?

시작하기 전에

'상점가'란 무엇인가요? 상점가(商店街, 문자 그대로 '쇼핑 지구')는 일본의 상업 지구 스타일입니다.

상점가에는 식료품과 같은 필수품부터 취미용품점과 같은 특정 상점까지 다양한 상점이 있습니다. 대부분 기차역 근처에 위치해 있습니다. 하지만 관광지 근처에 위치한 특화된 상점들도 있습니다. 지붕이 있는 상점가(아케이드 상점가)는 보통 보행자 전용이지만, 대로변에 있는 지붕 없는 상점가는 교통이 무기한으로 허용되거나 특정 시간에만 허용됩니다.

이 튜토리얼에서는 상점가 환경을 스타일화된 아이소메트릭 일러스트로 그릴 것입니다. 제가 사용할 방법은 아이소메트릭 변형과 아이소메트릭 자를 사용한 직접 아이소메트릭 그리기의 혼합입니다. 시작해봅시다!

아이소메트릭 자

새 문서를 만드세요. 이 튜토리얼을 위해 상당히 큰 캔버스 크기(72dpi에서 3000px x 2000px)를 사용합니다.

그리기 전에 아이소메트릭 자를 먼저 만들어 봅시다. 아이소메트릭 자는 아이소메트릭 투영에서 직접 그릴 때 도움이 될 것입니다. 아이소메트릭 자를 만들려면 [퍼스펙티브 자]를 사용합니다.

새 래스터 레이어를 만드세요. [도구 속성] 팔레트에서 [프로세스]를 [소실점 추가]로 설정하고 [원근 드로잉 방식 변경]을 선택 해제합니다.

Shift 키를 누르면 소실점이 0°, 45°, 90°(및 대칭각)와 같은 고정 각도로 스냅됩니다. 각도가 고정되어 있음에도 불구하고 원하는 어떤 각도로든 스냅하게 하는 트릭이 있는데, 이 경우에는 30°입니다. 방법은 다음과 같습니다.

자를 위한 새 레이어를 만드세요. [내비게이터 팔레트]에서 캔버스를 60° 회전합니다. Shift 키를 누른 채 자를 수직으로 두 번, 서로 약간의 거리를 두고 그립니다. 소실점이 한 점으로 수렴하도록 두지 마세요. 그렇지 않으면 일반적인 퍼스펙티브 자가 될 것입니다.

캔버스를 다시 회전하되, 이번에는 -60° 회전합니다. Shift 키를 누른 채 자를 수직으로 두 번, 서로 약간의 거리를 두고 다시 그립니다.

그 후에 캔버스 회전을 초기화합니다. 아이소메트릭 자는 이 시점에서 기본적으로 사용할 준비가 되었습니다.

이 트릭이 작동하는 이유는 고정 각도가 캔버스 회전에 따라 움직이지 않기 때문입니다. 따라서 캔버스를 60° 회전한 다음 90° 방향(수직 방향)으로 자를 그리면 90° - 60° = 30°라는 결과를 얻게 됩니다.

[조작] 도구 카테고리의 [오브젝트] 보조 도구를 사용하여 깔끔하게 만드세요. 그 후에 자 레이어를 맨 아래로 이동하고 [모든 레이어에 표시]로 설정합니다.

아이소메트릭 변형

다중 뷰 평면도(정면-측면-상단 뷰)를 아이소메트릭 투영으로 변형할 때 아이소메트릭 스케일을 고려해야 합니다.

다중 뷰 평면도는 일반적으로 실제 길이로 그려지지만, 아이소메트릭 투영에서는 개체가 모든 축에서 실제 길이의 약 82%(정확히는 81.6%)만큼 단축됩니다. 이는 아이소메트릭 투영에서 개체가 모든 축을 중심으로 회전하여 다중 뷰 평면도가 한 번에 개체의 한 면만 보여주는 것과 달리 세 면을 동시에 보여주기 때문입니다. 이러한 회전이 개체에 단축 효과를 일으킵니다.

단축된 길이와 실제 길이 사이의 스케일링을 아이소메트릭 스케일이라고 합니다.

아이소메트릭 투영에서 실제 길이를 사용할 수도 있지만, 다중 뷰 평면도로 다시 변환할 때 그에 따라 스케일을 조정해야 합니다.

큐브의 다중 뷰를 큐브의 아이소메트릭 투영으로 변형하여 이를 시연하겠습니다. 올바른 방향으로 변형하고 있음을 알 수 있도록 상단 뷰에 작은 화살표 기호를 추가합니다.

아이소메트릭 변형을 시작하려면 변형할 뷰를 선택한 다음 Ctrl+T를 누르세요.

[도구 속성] 팔레트에서 [가로세로 비율 유지]와 [벡터 너비 변경]을 선택 해제합니다.

여전히 [도구 속성] 팔레트에서 정면과 측면의 너비를 71, 높이를 82로 설정합니다.

정면 뷰를 수직으로 30° 비틀어(skew)줍니다. 이렇게 하려면 [프로세스]를 [비틀기]로 변경하고 변형 테두리의 오른쪽 또는 왼쪽 핸들을 드래그합니다.

수직으로 드래그하여 수직 평면을 따라 변형되도록 합니다. 이 과정을 돕기 위해 [도구 속성] 팔레트의 [회전 각도]에 주의하십시오.

측면 뷰의 경우, 동일한 과정을 반복하되 수직으로 -30° 비틀어줍니다.

상단 뷰의 경우, 너비를 82로, 높이를 71로 반전시킵니다.

비틀기 변형은 개체를 수직으로 비틀 때만 각도를 표시하므로 상단 뷰를 90° 회전해야 합니다. 이것이 이전 단계에서 값을 반전시켜야 하는 이유이기도 합니다.

그 후에 수직으로 30° 비틀어줍니다.

그런 다음 -60° 회전합니다.

그 후에 이것들을 큐브로 조립합니다. 변형 과정이 완료되었습니다.

너비를 71로 설정하는 이유에 대해서는 아래 설명을 살펴보세요.

비틀기 변형은 비틀기 방향의 선 길이를 변경하지 않으므로, z축에서 개체의 스케일링된 높이인 82%를 그대로 사용할 수 있습니다. 비틀기 변형은 비틀기 방향이 아닌 선의 길이만 변경합니다. 우리는 길이가 원래 길이의 정확히 82%로 변경되기를 원합니다. 이를 위해 간단한 삼각법을 사용해야 합니다.

이와 같이 배열하면 빗변(h)이 실제 길이의 82%이고 b가 변형할 스케일링된 너비인 삼각형을 얻습니다. 아이소메트릭 투영은 수평면에서 30° 각도로 기울어져 있으므로, 코사인 30°를 사용하여 b의 길이를 얻을 수 있습니다.

cos 30° = b/h

b = cos 30° * h

b = 0.866 * 82

b = 71.014

스케일링된 너비 값은 약 71%입니다.

개별 건물/상점 그리기

이 튜토리얼에서는 주요 초점으로 여섯 개의 상점을 그릴 것입니다. 꽃집, 서점, 라면집, 우동집, 취미용품점, 그리고 베이커리 및 커피숍(모두 같은 건물을 공유)입니다. 이 상점들을 선택한 이유는 일러스트의 테마에 잘 어울릴 것이라고 생각했기 때문입니다.

너무 압도적이지 않도록, 모든 건물을 동시에 그리는 대신 한 번에 하나씩 그립니다. 또한, 건물을 하나의 선화로 직접 그리는 것보다 하나씩 그리는 것이 상대적으로 쉽다는 것을 알게 되었습니다(적어도 이 튜토리얼에서는).

 

 

1. 꽃집

저는 주로 정면도만 그리는 데 그리드를 사용합니다. 그리드를 사용하려면 [보기] → [그리드]를 클릭하고 [그리드에 스냅]을 선택하여 선 스냅을 활성화합니다. [그리드/자 설정…]에서 [간격]을 30px로, [분할 수]를 1, 2, 4, 8로 설정합니다. 30px 값은 벽의 두께와 건물의 높이에 대한 기본 단위로 사용됩니다. [분할 수]는 세부 수준에 따라 증가합니다. 예를 들어, 주요 벽은 [분할 수]를 “1”로, 창문은 “8”로 그립니다. 일러스트레이션에서 실제로 필요하지 않으므로 [분할 수]를 8보다 크게 설정하지 않습니다.

먼저 상점의 정면도만 그립니다. 정면도는 아이소메트릭 변형의 기본으로 사용되며 스케치 역할도 합니다. 주로 [도형] 도구에서 [직선] 및 [사각형] 보조 도구를 사용하여 4 브러시 크기로 벡터 레이어에 그립니다. 그리기 전에 아이소메트릭 자를 숨깁니다.

레이어를 효과적으로 관리하기 위해 건물을 각 부분별로 분리하여 별도의 벡터 레이어에 그립니다. 주요 부분은 "주요 건물" 또는 건물의 일반적인 모양, "창문", "문", "간판", "그늘", 그리고 지붕을 사용하는 경우 "지붕"입니다. 특정 건물에만 있는 일부 부품도 자체 벡터 레이어에 그려집니다. 그런 다음 [레이어 속성]의 [레이어 색]을 사용하여 각 부분을 다르게 색칠하고 폴더로 그룹화합니다.

창문과 측면 간판과 같은 재사용 가능한 부분은 한 번만 그립니다.

정면도 완성.

그 후에 위 아이소메트릭 변형 방법을 사용하여 정면도를 변형합니다.

아이소메트릭 자를 켜세요. 4 브러시 크기의 [직선] 보조 도구를 사용하여 건물 구조를 그립니다.

창문과 문의 선이 너무 복잡해 보이므로, 부품에 3D 느낌을 줄 수 있을 만큼 일부를 지웁니다. 이를 위해 [벡터] 지우개를 사용합니다.

다른 부분 뒤에 숨겨진 부분을 지웁니다.

레이어를 새 레이어 폴더로 이동합니다. 그런 다음 그 위에 새 레이어를 추가하고 검은색으로 채운 후 [아래 레이어에 클리핑]으로 설정합니다. 이렇게 하면 전체 선화가 검은색이 됩니다. 이 후에 선화와 색을 선택하여 Shift+Alt+E([레이어]→[선택 레이어 통합])를 눌러 병합하거나, 그대로 두어도 됩니다.

건물 색상을 위한 새 래스터 레이어를 선화 아래에 만듭니다. 색상을 칠하려면 [채우기] 도구 카테고리의 [다른 레이어 참조] 보조 도구를 사용합니다. [영역 확대/축소]를 활성화하고 2로 설정합니다. 이 상점의 색상을 다른 건물과 차별화되도록 독특하게 만듭니다. 저는 이 상점의 이미지 색상으로 아쿠아 그린을 사용합니다.

그 후에 가게 이름과 측면 간판 텍스트를 추가합니다.

또 다른 세부 사항으로 에어컨 팬을 그립니다. 이 그림은 나중에 다른 건물에도 재사용될 수 있습니다.

이것이 꽃집이므로, 추가적인 세부 사항으로 가게 앞에 꽃과 화분을 그립니다. 둥근 화분을 그리려면 위와 동일한 방법을 사용합니다.

내장된 꽃 브러시를 사용하여 꽃과 식물을 각각의 래스터 레이어에 그립니다. [레이어 속성] 팔레트를 사용하여 레이어에 1px 검은색 윤곽선을 설정하고 안티앨리어싱을 끕니다. 그린 후에 레이어를 래스터화하고 [필터]→[흐림]→[매끄럽게]를 사용하여 부드럽게 합니다.

다양성을 위해 육면체 화분을 그립니다. 육면체 화분을 그리려면 [다각형] 도구를 육각형으로 설정하여 사용할 수 있습니다. 정육각형은 아이소메트릭 큐브의 윤곽선을 가지고 있기 때문에 이것이 작동합니다. 정육각형 선은 아이소메트릭 드로잉에서 축 사이의 정확한 각도인 120°로 기울어져 있습니다.

추가 세부 사항을 위해 더 많은 화분을 그립니다.

상점이 완성되었습니다.

여기에 있는 모든 그림은 이 상점과 동일한 방법으로 그려졌습니다.

 

 

2. 서점

이전 튜토리얼에서 그렸던 서점을 아이소메트릭 투영으로 다시 그기로 결정했습니다. 이 상점은 독립적인 그림이 아니라 더 큰 일러스트레이션의 일부가 될 것이기 때문에 (일부 세부 사항이 생략되어) 완전히 동일하지는 않습니다.

이 그림에서는 꽃집에서 사용했던 창문과 측면 간판을 재사용합니다.

그 후에 그림에 색을 추가합니다. 이 상점의 이미지 색상으로 파란색 테마를 사용합니다.

그림 완성.

 

 

3. 라면집

보통 많은 라면집 앞에 노렌(暖簾)이 걸려 있는 것을 볼 수 있으므로, 이 상점의 세부 사항으로 그림에 추가합니다.

이 그림에서도 꽃집에서 사용했던 문, 창문, 측면 간판을 재사용합니다.

이 상점의 이미지 색상으로 노란색 테마를 사용합니다. 노렌의 경우 라면집은 보통 빨간색이므로 그 색상도 사용합니다.

그림 완성.

 

 

4. 우동집

우동집도 보통 앞면에 노렌이 걸려 있습니다. 다양성을 위해 짧은 노렌을 사용하고 가게 앞에 자동 판매기 두 대를 추가합니다. 또한 이전 상점들과 다르게 보이도록 두 개의 패널 문과 두 개의 패널 창문을 사용합니다.

라면집처럼 노란색 테마를 이미지 색상으로 사용하지만, 이번에는 노렌에 흰색을 사용합니다.

그림 완성.

 

 

5. 취미용품점

다양성을 위해 이 상점을 두 층이 아닌 세 층으로 만듭니다. 또한 입구에는 거대한 단일 창문을 사용합니다.

여기서는 꽃집과 우동집의 창문과 측면 간판을 재사용합니다.

서점과 차별화하기 위해 하늘색과 회색 테마를 이미지 색상으로 사용합니다. 옥상 간판에는 동일한 아이소메트릭 변형 방법을 사용하여 간단한 광고 목업 디자인을 추가합니다.

그림 완성.

 

 

6. 빵집 및 커피숍

이 두 상점은 같은 건물을 공유합니다. 건물은 3층으로 되어 있으며, 처음 두 층만 상점으로 사용됩니다. 빵집은 1층에, 커피숍은 2층에 위치합니다.

정면도를 복제하고 [편집] → [변형] → [좌우 반전...]을 사용하여 좌우 반전합니다. 그 후에 건물 구조를 대략적으로 그립니다.

옥상이 너무 비어있는 것 같아서 서비스 층을 추가합니다. 원래 정면도의 일부는 아니지만 아이소메트릭 자를 사용하여 쉽게 그릴 수 있습니다.

여기서도 꽃집과 우동집의 창문을 재사용합니다. 나머지 부품은 이 상점의 원래 정면도에서 가져왔습니다.

시청자를 향하는 창문의 경우 높이만 82로 스케일링하면 됩니다. 너비가 어떤 축에도 위치하지 않으므로 단축되지 않기 때문입니다.

이미지 색상으로 갈색 테마를 사용합니다. 빵집에는 갈색을, 커피숍에는 더 진한 갈색을 사용합니다. 둘 다 제품의 색상을 나타냅니다.

그림 완성.

상점가 문 그리기

실생활에서 대부분의 상점가는 고유한 문을 가지고 있으므로, 일러스트레이션에 하나를 추가하기로 결정했습니다.

문은 최소한 1차선 도로의 너비와 3층 건물의 높이로 만듭니다. 대부분의 문 디자인이 대칭이기 때문에 그릴 때 [대칭자]를 사용하고 [선 수]를 2로 설정합니다.

문의 디자인을 최대한 독특하게 만드세요.

그 후에 제목 간판에 텍스트를 추가합니다. 결과는 SF 영화에 나올 법한 문처럼 보입니다.

문을 완성하려면 위와 동일한 방법을 사용하되, 이번에는 -30° 비틀어줍니다.

그 후에 문의 색상을 추가합니다. 위 제목 간판에는 파란색을, 나머지 부분에는 회색-검은색을 사용합니다.

기타 소품 그리기 (가로등 및 신호등)

관리를 용이하게 하기 위해 가로등과 신호등을 나중에 직접 그리는 대신 별도로 그립니다.

앞면과 뒷면 가로등의 그리기 과정입니다.

신호등의 그리기 과정입니다.

보통 지붕 없는 상점가에는 전봇대가 많이 보이지만, 주요 상점의 초점을 방해할 것이라고 생각하여 여기서는 추가하지 않기로 결정했습니다.

건물 배치하기

먼저, 상점가 문, 각 건물, 소품 레이어를 각각의 레이어로 병합합니다.

그 후에 상점가처럼 보이도록 배치합니다. 이 건물들이 일러스트레이션의 초점이 될 것이므로, 시청자의 시선을 사로잡도록 배치해야 합니다.

그런 다음 주요 도로와 보도를 그립니다.

그 후에 보도 윤곽선에 도로 배수구를 그립니다.

더 많은 세부 사항을 그리고 주요 교차로에 횡단보도 두 개를 추가합니다.

그 후에 [다른 레이어 참조] 보조 도구를 사용하여 거리를 색칠합니다. 보도에는 연어색-주황색을, 도로에는 노란빛이 도는 연회색을 선택합니다.

거리를 덜 밋밋하게 만들기 위해 자전거 도로를 그립니다.

그 후에 소품들을 상점들을 너무 가리지 않도록 배치합니다.

배경 건물을 추가합니다. 다른 건물을 재사용하거나 원한다면 직접 그릴 수도 있습니다. 저는 다른 건물을 재사용하고 배경 건물에 맞게 다시 그리는 것을 선택했습니다.

배경 건물을 색칠하여 주요 상점가 건물로부터 시청자의 주의를 분산시키지 않도록 합니다.

마지막으로 일러스트레이션에 문 그림을 추가합니다.

아이소메트릭 자를 끈 상태로 배치 완료.

마무리

이 일러스트레이션에서는 건물과 개체로 향하는 빛의 광선이 평행하다고 가정합니다. 이는 투영된 그림자도 평행하다는 것을 의미합니다.

시각화를 위해 아래 이미지를 살펴보세요. 개체로 향하는 빛의 광선(빨간색 선)은 30°로 설정되어 있고, 그림자 가장자리(검은색 선)는 y축과 평행합니다.

주요 일러스트레이션 위에 레이어 폴더를 만드세요. 불투명도를 90%로, 모드를 [곱하기]로 설정합니다. 해당 레이어 폴더 안에 새 래스터 레이어를 만듭니다. 이 레이어가 우리의 주요 그림자 레이어가 될 것입니다.

개체에 의해 가려진 빛의 광선을 따라 그림자를 그립니다. 불투명한 둥근 브러시나 심지어 직선 보조 도구를 사용하여 그릴 수 있습니다. 그림자 색상으로는 회색-파란색을 사용합니다.

문의 경우, 제목 간판에 그림자를 그리지 않아 좀 더 돋보이게 합니다.

사실감을 더하기 위해 빵집과 커피숍의 수평 부분에 대한 그림자를 다른 래스터 레이어에 더 옅은 불투명도로 그립니다. 이는 수평 부분이 광원에 의해 완전히 비춰지지 않으며, 주 그림자 안에 완전히 들어가지도 않기 때문입니다.

그림자 레이어의 배치입니다.

그 후에 환경에 대한 조명 효과를 만들어 봅시다.

그림자 레이어 폴더를 복제하고 불투명도를 100%로, 모드를 [표준]으로 다시 설정합니다. 레이어 폴더를 마우스 오른쪽 버튼으로 클릭하고 [선택 레이어 통합]을 선택하여 복제된 레이어 폴더를 통합합니다.

결과 레이어를 [필터] → [흐림] → [가우시안 흐림...]을 사용하여 20만큼 흐리게 합니다.

통합된 레이어를 선택합니다. 그런 다음 그림자 레이어 폴더의 폴더 아이콘을 Ctrl+클릭합니다. 이렇게 하면 해당 레이어를 기반으로 선택 영역이 생성됩니다. 그 후에 Delete 키를 누릅니다.

선택 영역을 해제합니다. 색상을 선택한 다음 [편집]→[그리기 색으로 변환(H)]을 사용하여 레이어 색상을 주황색으로 변경합니다. 조명 효과 불투명도를 20%로 설정합니다.

일러스트레이션이 완성되었습니다.

이 튜토리얼이 유용하기를 바랍니다. 읽어주셔서 감사합니다!