태그 보관물: 일러스트레이터

20071105 – 일러스트레이터로 도식화 그리기 02

기본 티셔츠 – 2

관련글 :: 20071022 :: 일러스트레이터로 도식화그리기 01 – v.0.7

지난 시간에 우리는 일러스트레이터로 기본적인 티셔츠의 형태를 구성하는 방법을 살펴보면서 기본적인 조작방법과 Stroke 팔레트의 사용법, Reflect 툴의 사용법 등을 살펴보았습니다. 또한 그와 관련하여 펜툴을 다루는 법과 펜툴 연습을 위해, 혹은 비트맵 이미지와의 합성을 위해 비트맵 이미지를 불러오는 방법에 대해서도 조금 살펴보았습니다. 잠깐 다른 소리하느라고 옆으로 치워두었던 도식화 그리기를 마무리해보도록 하겠습니다.

오브젝트의 순서

지난 시간에 reflect(0)를 사용해 반쪽짜리 그림을 복사하여 온전한 그림을 만드는 부분까지 설명을 했습니다만, 감질나게도 그렇게하면 도식화가 어떻게 되는지까지는 보여드리질 않았습니다. 뭐 일종의 떡밥이지요. 지난 강좌를 열심히 따라해보았다면 아래와 같은 결과물을 얻을 수 있습니다.

2007-11-05_061.png

사실 저 부분으로 도식화는 ‘거의’ 완성이라 볼 수도 있습니다만, 원래 도식화는 앞/뒤가 한쌍이어야 하지 않겠습니까. 하여, 이번에는 뒷면을 좀 만들어볼까 합니다.음… 그것도 약간 스마트하게요.

먼저 한가지 알아두어야 할 점이 있습니다. 포토샵과 일러스트레이터의 큰 차이점 중의 하나인데요, 일러스트레이터의 패스는 각각이 레이어 속에서 ‘높이’ (z-index) 값을 가집니다. 다시 말해 포토샵의 레이어와 같이 일러스트레이터도 레이어가 있습니다. 따라서 위에 보이고 싶은 레이어를 위로 가져올 수도 있고, 반대로 바닥쪽에 깔고 싶은 레이어를 아래로 가져갈 수도 있습니다. 이렇게 레이어간의 상하 이동 이외에도 같은 레이어 아래에서도 패스들은 각각의 높이값을 가지고 차곡 차곡 쌓여갑니다. 일반적으로 패스는 그리는 순서대로 아래에서 위로 차곡 차곡 쌓여가게 됩니다.

2007-11-05_062.png

이런 이야기를 하는 이유는 레이어를 복사하지 않고 하나의 레이어에서 모든 작업을 하기 위해서 입니다. 물론 레이어 자체를 복사해서 뒷면을 따로 만드는 방법이 있습니다만, Group의 개념을 좀 설명해보려고 일부러 이런 말씀을 드리는 겁니다. 또한 일러스트레이터 CS2부터는 그룹으로 묶인 오브젝트들을 더블클릭하는 것만으로도 따로 그룹을 풀지 않고서도 그룹 내의 패스들을 수정하고 순서를 바꾸는 등의 작업을 하는 것이 가능합니다.

뒷면을 만들기 전에 해야할 작업이 하나 있습니다. 통상 도식화는 앞, 뒤를 그린 다음 별도의 그림으로 위치시키지 않고 약간 포개 놓습니다. 우리는 앞선 작업에서 색을 채우지 않는 패스로만 그림을 그렸기 때문에 포개 놓는다면 뒷면이 전부 비쳐보이게 됩니다. 이부분을 가려줄 녀석을 만들어 보겠습니다.

사실 이미 다 만들어 놓은 상태입니다. 가장 두껍게 그려진 외곽선 패스 두개를 선택합니다. 하나를 선택하고 나머지 하나는 시프트키를 누른 상태에서 선택하면 함께 선택이 됩니다.Ctrl+C를 눌러 두 패스를 복사합니다. 그런 다음 Ctrl+F를 누릅니다. Ctrl+F는 Paste front… 기능입니다. 방금 복사한 패스를 정확히 같은 위치에, ‘올려 놓게’ 됩니다. 그런다음 Shift+X를 누릅니다. 당황하지 마세요 방금 복사한 외곽선이 까맣게 변하게 됩니다. 이 새까만 녀셕을 컬러팔레트에서 흰색으로 지정해줍니다. (설마 흰색으로 지정하는 방법을 모르시는건 아니겠죠?)

2007-10-01_023.png

흰색으로 칠을하면 당연히 아무것도 안 보이는 상태가 됩니다. (사실 외곽선 오브젝트가 밖으로 살짝 비쳐보이긴 할 겁니다.) 이 흰색 오브젝트는 바닥에 깔려서 밑에 오게 될 뒷면 그림이 비치지 않는 역할을 하는 것이 되므로 맨 아래로 보내겠습니다. 이 때는 Ctrl+Shift+[를 눌러줍니다. 그럼 처음의 그림과 같은 모양이 되지만 속이 하얗게 채워진 방어막을 하나 깔고 있는 형상이 됩니다. 전체를 선택해서 Ctrl+G를 눌러 그룹으로 묶어줍니다. 앞서 그렇게 복잡하게 가위로 패스를 오리고 붙이고 난리 부르스를 추었던 이유가 이걸 쉽게 만들기 위해서 입니다. 물론 해당 패스를 복사하지 않고 선의 내부를 흰색으로 채워도 비슷한 결과를 얻을 수 있지만, 색을 채움으로 인해 원래 선의 굵기가 잠식 당할 수도 있거니와, 추가적인 작업시에 굉장히 거슬리는 경우가 생길 수는 있습니다. 하지만 굳이 (조금 편하므로) 그렇게 하시겠다면 말리지는 않겠습니다.

다시 설명입니다.

방금 눌렀던 Ctrl+Shift+[ 키는 선택한 오브젝트를 맨 아래로 보내는 역할을 합니다. 반대로 Ctrl+Shift+]를 누른다면 선택한 오브젝트가 현재 레이어 상에서 가장 위쪽으로 올라오게 되겠지요. 한칸만 올리고 내릴 때는 Ctrl+[, Ctrl+]을 사용합니다. 사실 센스가 조금 있으신 분이라면 직관적으로 요렇게 될 것이라고 예상하셨을 거예요.

그룹의 개념

위에서도 말씀드렸지만 일러스트레이터는 같은 레이어 상의 선, 면과 같은 객체들이 레이어에 소속이 되어 있기는 하지만 각각의 패스가 모두 id를 가지고 있는 개별 구성원인 셈입니다. 반대로 포토샵에서의 레이어는 그야말로 투명셀로판지와 똑같은 개념으로 같은 레이어 상에 그려진 모든 픽셀은 레이어와 뗄레야 뗄 수 없는 관계가 됩니다. 따라서 레이어를 추가적으로 사용하지 않더라도 충분히 순서를 섞어서 다른 분위기의 그림을 만들 수 있습니다. 위에서 보았던 팔레트 툴의 스크린샷만 보아도 얼마나 많은 패스가 있을까요? 31개의 패스를 이미 그린 셈입니다. 이것을 팔레트툴 상에서 깔끔하게 Group1로 묶어버렸군요. 이제 앞면 그룹을 선택해서 오른쪽으로 조금 옮겨 사본을 하나 만듭니다. 지난 시간에 했던 것과 마찬가지로 오른쪽으로 이동하면서 Alt 키를 눌러주면 쉽게 복사가 됩니다. 사본은 새로 그려졌으니 앞면의 위로 올라오겠지요? 이걸 사본을 앞면으로 써도 좋고, 뒷면으로 만들고 싶다면 (즉, 밑으로 내록 싶다면) Ctrl+Shift+[를 눌러주시면 되겠습니다.

2007-10-01_025.png

이제, 만들어진 복사본을 그룹을 풀거나 (Shift+Ctrl+G) 아니면 그룹을 더블 클릭하여 그룹 개체 편집모드로 진입하여 목선을 고쳐그리고, 어깨선을 지우는 것만 하면 뒷면을 쉽게 완성할 수 있습니다.

먼저 왼쪽에 있는 ‘앞판’은 지금 뒷판을 수정하는데 있어서 별 다른 도움이 되지 않습니다. 그렇다고 걸리적 거리는 걸 지워버릴 수도 없으니 잠깐 안보이는대로 숨겨 놓겠습니다. 지난 시간에 Ctrl+2가 객체를 잠그는 기능을 한다고 했는데, Ctrl+3은 화면에서 숨겨버리는 기능을 합니다. 앞판을 한번 숨겨보겠습니다. 앞판을 선택하고 Ctrl+3을 누릅니다. 그럼 숨겨진 객체를 다시 보이게 하는 건 어떤 키를 눌러야할까요? 센스쟁이라면 답을 알겁니다. 뭐 여러분의 센스를 무시해서 그런 건 아니지만 Ctrl+Alt+3을 누르면 아까 숨겼던 앞판이 보일 거라고 귀띔해드릴게요.

앞판을 숨겼으면 홀가분한 마음으로 뒷판을 수정해보겠습니다. 뒷판의 그룹을 너저분하게 푸는 것을 지양하고 그저 더블클릭만 한 번 해보겠습니다.

2007-11-05_064.png

위의 그림과 같이 그룹의 주위에 테두리가 생깁니다. 이 상태에서는 그룹내의 패스들을 개별적으로 선택하거나, 수정하고 이동이 가능해집니다. 뒷면을 위한 안내선을 뽑아봅니다. 아래 그림을 보시면 어떻게 그리려고 하는 건지 쉽게 이해가 가실 겁니다.

2007-11-05_065.png

앞쪽의 Rib선과 만나는 지점에서 뒷목의 Rib선이 이어지도록 수평방향의 안내선을 하나 만들고, 중심을 관통하는 안내선을 하나 만듭니다. 이제 스마트 가이드를 이용하여 intersection에서 선을 그리기만 하면 뒷 목선 그리는 건 일도 아니겠지요?

2007-11-05_066.png

또한 매우 친절한 스크린샷과 같이 바닥의 배경, 목선, 어깨선을 삭제합니다. 그런다음 뒷목에 들어갈 라인을 실선과 점선 모두 그려넣어줍니다. 이때 계속해서 그룹 편집 상태인지 확인해봅니다. 그룹 편집 상태가 해제되었다면 (빈바닥을 찍거나하면 쉽게 해제됩니다.) 그룹의 아무 선이나 더블클릭해서 활성화한 상태에서 작업해줍니다.

결국 뒷면의 형태가 쉽게 그려졌습니다.

2007-11-05_067.png

음, 그렇다고 아직 끝난게 아닙니다. 음, 뭐가 이리 복잡하냐구요? 복잡한가요? 처음이라 그렇지 조금만 익숙해지면 여기까지 그리는게 손이 펜을 잡고 그리는 속도를 이미 넘어섰다고 봅니다. 조금만 더 힘을 내어 봅시다. 일단 기본적인 부분은 통과했네요. 이제 Rib의 이빨 모양 라인을 조금 그려 넣고, 주름이 지는 소매, 암홀 부위에 자연스러운 선을 그려주는 방법을 시도해보고, 심지어는 ‘무려 칼라’도 입혀보는 것만 하면 왠지 어려운 듯한 일러스트레이터의 기본 테크닉은 거의 익히게 된다고 봅니다. 물론 아직 브러시를 만드는 것은 해보지 않았지만, 곧 다음 강좌에서 익히게 될 브러시 사용법만 조금 안다면 아래와 같은좀 빡센 도식화를 그리는 것도 충분히 지금껏 배운 걸로 가능하게 됩니다. (불행히도 패스의 숫자는 747개나 되지만요. 으흐흐)

2007-11-05_063.png

그럼, 다음 시간까지 연습들 많이 하시길~

20071029 :: 일러스트레이터로 도식화 그리기 – 펜툴

펜툴을 알자

펜툴은 일러스트레이터의 기본이자 완성이라 할 수 있는 부분입니다. 기본적으로 모든 객체의 외형(shape)은 패스(path)로 이루어집니다. 또한 이러한 패스는 기본적인 베지어 곡선의 조합으로 만들어집니다. 베지어 곡선에 대한 이야기는 여기서 자세하게 할 수도, 할 필요도 없으니 간단하게 언급하고 넘어가도록 하겠습니다.

2007-10-25_046.png

먼저 위의 그림을 보도록 하겠습니다. 왼쪽의 포인트에서 곡선이 시작됩니다. 두 포인트 사이는 그림에서 보이는 그대로 직선이 아니라 곡선으로 연결됩니다. 첫번째 시작 포인트에서 뻗어나오는 부분은 포인트에서 뻗어나온 핸들(앵커포인트라고도 하지만 쉽게 핸들이라고 하겠습니다.)만큼 ‘당겨져서’ 곡선의 형상으로 ‘휘어’ 그려집니다. 반대편 끝나는 포인트에서도 핸들의 위치만큼 편향되어 3차곡선 (고등학교때 배운 3차 함수 모양의 곡선)의 형태를 그리게 됩니다. 이것이 가장 기본적인 단위의 베지어 곡선이며, 이를 이이 붙여서 패스를 만들게 됩니다.

펜툴 상태에서 마우스 버튼을 누르면 포인트를 찍게 됩니다. 손가락을 떼지 않고 마우스를 끌면 마우스를 따라 핸들이 뻗어나옵니다. 이러한 원리로 베지어 곡선을 그릴 수 있고 포인트를 추가해 나감에 따라, 또 핸들을 형성해줌에 따라 여러 형태로 자유로운 곡선을 그려나갈 수 있겠습니다. 그럼 몇 가지 유형에 맞추어 곡선을 그리는 방법을 알아보도록 하겠습니다.

유형 1

2007-10-25_048.png

가장 기본적인 곡선입니다. 핸들이 없는 정점에서 시작하여, 두 번째 지점에서 핸들을 만들어 곡선을 만듭니다. 현재 스크린샷에서는 화살표가 있는 방향으로만 핸들이 표시되어 있지만 실제적으로는 핸들이 있는 포인트를 기준으로 양쪽으로 똑같은 길이의 핸들이 만들어져 있습니다. 종점의 역할을 하는 세 번째 정점을 만들면 역시 두번째 포인트에서 뻗어나온 핸들의 영향으로 곡선으로 마무리됩니다.

여기에서 알 수 있는 것은 시작점이 아닌 끝나는 점에서 핸들을 뽑는 것이 원하는 형태의 곡선을 만들기가 쉽다는 것입니다. 시작점에서 핸들을 만들어 곡률을 정해놓으면 다음 포인트를 찍기 전에는 곡선의 형태를 예측하기기 쉽지 않으니까요 .

유형 2

2007-10-25_049.png

시작점에서부터 핸들을 만들어 곡선을 그리는 경우입니다. 두번째 점에서 핸들을 만들면 같은 길이의 핸들이 반대방향으로 뻗어나와 함께 움직입니다. 이는 세번째 점으로 이어질 때에 완전하게 완만한 곡선을 만들기 위함입니다. 그리고 세 번째 지점에서도 핸들을 뻗어 곡선의 형태를 마무리하고 있습니다.

유형 3

2007-10-25_047.png

늘 완만한 곡선만 그릴 수는 없습니다. 곡선으로 휘어지다가도 날카롭게 코너를 만드는 부분이 특히나 도식화에서는 아주 높은 빈도로 발생하는 경우라 볼 수 있습니다. 기본적으로 직선으로 연결되는 지점에서는 그냥 한번의 클릭으로 포인트를 찍게되면 위의 그림처럼 뾰족한 코너가 됩니다. 그리고 이어지는 다음의 부분은 매우 중요한 부분이니 눈 한번 비비고 잘 살펴보시기 바랍니다.

2007-10-25_050.png

앞서도 말씀드렸지만 곡선을 연속적으로 만드는 경우 핸들은 포인트를 기준으로 양쪽 방향으로 균일하게 만들게 됩니다. 이때 핸들을 끌었다가 놓은 후 방금 전에 찍었던 포인트에 다시 펜툴 커서를 갖다 대면 위의 그림에서와 같이 커서옆에 꺽쇠표시(^)가 나타납니다. 이 때 클릭을 한 번 해주면 바깥쪽으로 뻗어나온 핸들만 초기화되어 사라집니다.

2007-10-25_051.png

따라서 계속 패스를 그려나가보면 위의 그림처럼 방금 다시 찍은 포인트는 뾰족한 코너 포인트가 되어 있는 것을 알 수 있습니다. 이것이 펜툴 사용의 기본이자 정수가 되는 부분이라 하겠습니다. 남은 것은 거의 눈의 속도로 손이 따라갈 수 있을만큼 연습에 연습을 거듭하는 것만 남았습니다. 이후 소개해드릴 이미지를 깔아놓고 트레이싱하는 법을 이용하여 핸드폰이나 자동차와 같은 곡선과 직선이 적절히 혼합되며, 그리 복잡하지 않은 형태를 따라 그리는 것을 반복해 보는 것이 좋습니다.

관련글 ::