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

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

관련글 ::

스트림라인 간단 튜토리얼

0. Adobe Streamline [OFFICIAL PAGE]

비트맵 이미지의 색상 경계를 추적하여 벡터 데이터를 생성해내는 프로그램. 쉽게 말해서 사진이나 스캔 받은 그림을 일러스트레이터 패스 데이터로 따내는 기능을 하는 프로그램이다. 일러스트레이터 CS2가 출시되면서 이는 Live Trace라는 기능으로 일러스트레이터로 흡수 통합 되었고, 이후 별도의 어플리케이션으로서의 어도비 스트림라인은 개발이 중단된 상태다.

1. Illustrator 의 Auto Trace

원래 일러스트레이터는 자동추적도구(Auto Trace)를 툴바에 갖고 있었다. 그런데 이 자동 추적 기능은 쉽게 말해서 포토샵의 마술봉 툴이 하는 것 처럼 비트맵 이미지에서 연속된 같은 색상들을 픽셀로 선택하고 그렇게 만들어진 ‘포토샵 선택영역’을 패스로 전환하는 데에 그쳤다. 따라서 아무리 사람눈에 잘 스캔된 이미지라 하더라도 자동추적 기능을 사용하여 복잡한 그림을 패스로 따내는 것은 사용자로 하여금 굉장히 화가 치미는 경험을 제공했던 것이다.

2. Streamline Again

그에 비해 스트림라인은 각각의 색상의 경계값과 허용치를 세부적으로 세팅하여 경계지점에서 주어진 밀도 만큼의 기준점을 생성하고 그 각각의 기준점에서 등거리 지점을 추출하고 연결하여 패스를 만드는 방식이라 한 번에 모든 경계를 찾을 수 있고 스캔 상태가 양호하거나, 그림이 충분히 큰 경우, 너무 심하게 깨지지 않은 JPEG 이미지에 대해서는 만족 가능할 퀄리티의 결과물을 제공한다. 뿐만아니라 스트림라인은 일러스트레이터의 패스 데이터를 그대로 생성해내므로 결과를 복사-붙여넣기를 통해 곧장 일러스트레이터로 옮기는 것도 가능하다.

3. Take it

그렇다면 실제로 사용을 통해 익혀보자. 스트림라인은 굉장히 단순한 구조로 이루어져 있고 크기도 작은 프로그램이다. 그러나 일종의 자동화 툴인 관계로 사용법 자체가 굉장히 낯설게 느껴진다. (네이버 지식 즐~의 대부분의 질문은 스트림라인을 어떻게 설치하는 가에 관한 것이었다)

우선 맨 처음 해야할 것은 변환할 비트맵 이미지를 준비하는 것.
그림을 그려서 스캔 받는 것은 굉장히 귀찮으므로, 인터넷상에서 구해다보자.

구글 검색으로 키스 해링의 그림을 한 번 찾아보는 것은 어떨까.

결국 인터넷에서 다운 받은 이미지는 아래와 같다. (실제 사이즈 그대로 올린다)

이 그림을 확대해보자. 확대하여 곡률이 커지고 완만할수록 스트림라인은 당신을 좋아할 것이다. 주저말고 포토샵을 실행하라. (물론 크기조절과 밝기/대비조절을 할 수 있는 이미지 툴은 어떤 것이든 상관없다. 나도 이런 일로 포토샵을 쓰지는 않는다. 간단한 이미지의 크기 변경, 밝기/대비 조절, 텍스트 삽입과 같은 아주 간단한 작업은IrfanviewFastStone Image Viewer를 쓰는 것을 추천한다. 는 설치파일이 1MB 이내이며, FastStone의 경우에는 덩치는 약간 크지만 ACDSee나 알씨보다는 이백삼십칠만배 정도 낫다고 생각된다.)

이미지 사이즈를 조정해보자

적당히 큰 사이즈를 넣어주자. 너무 크면 곤란하고 대략 몇 배나 커지면 좋을까 싶은 크기.(정말로 알 수 없는 애매한 설명이 아닌가!!) 일반적으로 고만고만한 웹상의 이미지들은 4배 정도로 키워주면 될 듯 하다.

색상간의 경계가 분명하면 분명할수록 육안으로 보아도 깨끗한 외곽선이 드러나고, 그래야만 스트림라인에서 선이 잘못 나갈 확률도 줄일 수 있다. 이것은 sharpen 계열보다는 레벨조절이나 밝기/대비 조절을 통해 손쉽게 할 수 있다.

오리지널의 레벨상태는 다음과 같았는데

세밀한 막대 그래프 아래의 삼각형 슬라이더들을 이리 저리 움직여서 깨끗한 그림을 탈바꿈 시키자

그리고 이 이미지를 저장한다. 단 저장은 jpg 포맷이 아니라 pcx나 tiff 포맷을 사용한다.(☆)

이제 비로소 스트림라인을 구동할 타이밍이 되었다.

아까 저장한 TIF 파일을 불러온다. 굉장히 크기가 클 것인데, 일러스트레이터와 마찬가지로
Ctrl+Alt+Space 키를 몇 번 눌러서 축소를 시켜 볼 수가 있다.
(그림이 실제로 축소되는 것은 아니고 미리보기만 축소된다)

먼저 converting에 관련한 세팅을 해보도록하자.

conversion 세팅창에서는 이른바 ‘정확도’에 관련한 설정을 할 수 있다.
그러니까 얼마나 자주 포인트를 만들 것인가. 얼마나 원래 그림에 밀착하는 패스를 만들 것인가하는 것을 설정해 주는 부분인데, 결론인 즉슨, 거친 그림이 나오는가, 매끈한 그림이 나오는가, 심지어는 매끈하다 못해 뭉뚱그려져버리는 그림이 나오는가가 이 부분에 달려 있는 것이다. 이부분에 대해서는 정답이 없다. 이미지 상태나 원하는 결과에 따라 달라질 수 있으므로 이것 저것 세팅값을 바꿔가면서 시행착오를 겪어보는 수 밖에 없다. 다만 그림에서 색상을 노랗게 표시한 부분을 주로 만져주면 된다는 안내만 해드리겠다.

다음은 칼라 흑백 설정인데. 이 그림은 흰색, 검은색, 붉은색의 3칼라로 이루어져 있으므로 설정을 해주어야 한다. (스트림라인의 기본 설정값은 흑백이다. 그야말로 완전히 흰점과 완전히 검은점만 인정해주겠다는 것이다)

여기서는 원본 이미지의 상태가 그런대로 괜찮아서 다행이다. 일단 Limited Color를 선택하고 컬러수를 3으로 제한한다.
그럼 끝난다.

모든 설정이 끝났으면 Ctrl-R을 눌러 컨버팅을 시작한다. 이미지 크기나 상태, 색상수, 시스템사양에 따라 다르지만 생각보다 쉽게 뭔가 빨리 지나간다.

Ctrl-A를 눌러 전체 선택을 하면 뭔가 일러스트레이터로 패스를 선택한 것 같은 기분이 든다.
이것을 복사-붙여넣기로 일러스트레이터로 옮길 수도 있지만, 이 글에서는 아직 일러스트레이터를 구동한 적이 없으므로 일단은 저장을 한다. 이미지를 저장하는 것이 아니라, 패스를 저장할 것이기 때문에 Save arts as… 를 선택하여 일러스트레이터 포맷으로 저장한다. 이때 원본 비트맵 이미지는 함께 저장되지 않는다.

그리고 아래 마지막 이미지는 여태의 결과물을 일러스트레이터에서 불려들여 놓은 것을 캡쳐한 그림이다.

정말 쉽고 간단하지 않은가!!

설정만 잘하면 아래와 같은 ‘그려서는 엄두도 못낼’ 이미지도 만들 수가 있었다.
이렇게 훌륭한 기능이 있는 프로그램의 존재를 알려주신 마롭에게 완전 감사 드리며 오늘의 강좌를 마친다.

Pulished 20060416 by sooop for studio somuch.

☆ 포토샵이나 다른 이미지 관련 프로그램에서 BLUR 효과를 사용해서 그림을 아주 약간 흐리게 만든다음 최고화질의 jpg로 저장하면 용량이 약간 줄어들어 있는 것을 확인할 수 있다. jpg는 바로 이런 식으로 ‘이색상간의 경계를 뭉개는 방식’을 통해 이미지 화질을 훼손하게 된다. 그런 이유로 스트림라인은 jpg 파일을 불러오지 않는 것 같다.

20071112 :: 일러스트레이터 CS2에서 자바스크립트 사용하기

*일전에 공개했던 글인데 DB를 날려먹은 후 큰 맘 먹고 다시 작성합니다

일러스트레이터 CS2가 나온지도 어느덧 2년하고도반정도가 지났습니다. 일러스트레이터CS2는 10.0 버전으로부터 CS로의 버전업과는 비교가 안될만큼 겉이나 속에서 많은 변화가 있었습니다. 그리고 이러한 많은 발전은 무거운 덩치에도 불구하고 숩을 9.0 사용자에서 CS2 사용자로 이끈 원동력이 되었습니다. 그것은 다름아닌 자바스크립트를 지원한다는 것이지요. 이는 포토샵과는 다른 일러스트레이터만의 특성 덕분에 정말 간단한 방법으로 노가다를 줄일 수 있게 되었습니다. 물론 포토샵CS2도 자바스크립트를 지원합니다만, 아무래도 HTML의 자바스크립트에 좀더 익숙하다보니 일러스트레이터의 자바스크립트가 훨씬 사용하기 쉽긴 쉽습니다.

문제는 주로 ‘디자이너’들이 사용하는 툴이다보니 아무도 일러스트레이터 자바 스크립트에는 관심을 가지지 않더란 말이지요. 없으면 만드는 것이지요. 최소한 정품에 포함된 자바스크립트 가이드에는 객체에 대한 레퍼런스가 포함되어 있어서 가이드를 참고하면서 코드를 작성하는 것은 그리 어렵지 않았습니다.

어쨌든 일러스트레이터에서 자바 스크립트를 사용하는 것이 어떤 이익이 있는가에 대해 먼저 살펴보도록하겠습니다.

일러스트레이터에서의 자동화 방법

포토샵의 액션은 매우 유명하지요. 일종의 매크로처럼 효과나 특정 작업을 기록하여 반복해서 쓸 수 있도록 하는 기능입니다. 특히 이러한 액션을 드롭릿(Droplet)으로 만들어 놓으면 파일을 드롭릿에 끌어다 놓는 것만으로도 자동으로 포토샵을 실행시켜 해당 액션을 적용하도록 할 수도 있습니다. 참고로 이러한 복수개의 파일을 변환하고 가공하는 방법을 더욱 편리하고 집약적으로 수행할 수 있도록 포토샵CS2에서는 image processor라는 자바스크립트를 지원합니다. (file 메뉴의 automation 항목을 잘 들여다보세요)

이러한 액션팔레트는 일러스트레이터에도 벌써 이전부터 존재해왔습니다. 다만 많이 안썼을 뿐이지요. 왜냐하면 일러스트레이터는 필터를 여러 번 적용하는 것처럼 단순 작업을 반복하기가 그리 빈번히 필요치 않기 때문입니다.

그리고, 일러스트레이터는 자바스크립트 (뿐만아니라 VB 스크립트와 Apple 스크립트도 지원합니다) 지원합니다 이러한 스크립트를 이용한 방법은 액션과 약간의 차이가 있으며, 또한 강력합니다.

기본적으로 액션은 기록된 매크로를 재생하는 방식을 사용합니다. 즉 사용자가 일러스트레이터의 UI를 이용하여, 메뉴의 항목을 선택하고 특정한 기능을 선택하여 적용하는 등의 일련의 작업을 그대로 녹화했다가 다른 상황에서 똑같이 재현하여 반복적인 작업을 단순화 하는 것이 그 핵심입니다.

이에 비해서 자바스크립트는 내부 자바스크립트 해석기에 의해서 작동되며 여기에는 사용자의 커서 움직임이나 키보드 단축키가 개입되지 않습니다. 하지만 스크립트는 등록된 액션을 호출하여 그대로 사용할 수도 있습니다. 또한 특정한 조건에 의해서 분기를 하거나, 조건을 만족하는 동안 반복문을 실행하는 등 우리가 알고 있는 기본적인 프로그래밍 로직에 의해 구동합니다. 따라서 사용하기에 따라서는 액션으로는 처리할 수 없었던 엄청난 작업들을 단 몇십… (차마 몇 줄이라고는 말 못하겠군요)줄의 코드만으로 처리할 수도 있습니다.

자바스크립트의 설치와 사용

일러스트레이터에서 자바스크립트를 사용하기 위해서는 다음과 같은 과정이 필요합니다.

1. 자바 스크립트 파일 작성하기

자바 스크립트 파일을 작성합니다. 다들 작성을 해야하는 건 아닙니다 웹을 뒤져보면 그럴싸한 스크립트를 또 구할 수 있겠지요. 아무튼 이러한 원본 스크립트 파일이 필요합니다. 스크립트 파일은 메모장으로도 작성할 수 있으며, .js의 확장자를 갖습니다. 다른 텍스트 에디터를 사용하여도 좋습니다만, 문자 인코딩은 ANSI를 사용하여야 하며, 파일 어느곳에도 한글, 한자, 일본어등의 비라틴문자(NonLatin Character)가 사용되어서는 안됩니다. 이는 주석에도 해당되어, 한글로 주석을 달아도 해석기가 작동하지 않아 일러스트레이터는 그냥 스크립트 파일 자체를 무시해버립니다.

2. 자바스크립트 파일 설치하기

일러스트레이터가 설치된 폴더(일반적으로 C:\Program Files\Adobe\IllustratorCS2\)아래에 있는 Preset\Scripts 폴더에 해당 js 파일을 복사해 넣으면 설치가 됩니다. 이렇게 이 폴더에 설치한 파일은 일러스트레이터가 구동할 때 인식되어 File 메뉴의 Scripts… 항목의 하위 메뉴로 나타나게 됩니다.

3. 자바스크립트 사용하기

자바스크립트 파일을 사용하기 위해서는 File > Scripts… 메뉴에서 이미 설치된 파일을 사용해도 됩니다만, 만약 스크립트 파일을 다른 곳에 모아두었다면 Other Sripts… 항목을 선택하여 실행할 수도 있습니다.

이로써 간단히 일러스트레이터에서 자바스크립트를 설치하고 사용하는 방법에 관해 알아보았습니다. 다음 글에서는 실제 작성된 자바스크립트가 어떻게 실행되는지를 살펴보며, 이를 통해 특정 폴더의 ai 파일들을 한꺼번에 jpg 파일로 변환하는 방법에 대해 살펴보겠습니다.

20071202 :: 일러스트레이터 도식화 – 패턴브러시

오늘은 간단하게 끝날 수 있는 패턴 브러시에 대한 부분을, 그것 마저도 한 번 간단하게 살펴보는 시간을 갖도록 하겠습니다. 일러스트레이터의 브러시는 포토샵의 브러시와는 많이 다릅니다. 포토샵의 브러시가 일정한 비트맵 이미지를 비교적 짧은 간격 동안 반복해서 찍는 것으로 붓질을 표시한다고 하면, 일러스트레이터는 계산에 의해 미리 지정된 브러시를 구부리겨나 늘려서 보여주기 때문입니다. 이런 브러시의 특성을 잘 이해한다면 많은 작업들을 대단히 쉽게 마무리 할 수 있게 된다고 강력히 주장하는 바입니다 .

패턴브러시 실전

별  어려울 것이 없으니 바로 실전으로 들어가 보겠습니다. 오늘 패턴 브러시를 통해 그려볼 것은, 아직까지 한 번도 강좌를 준비하면서 제대로 그려보지 않았던 Tee의 가장 중요한 부속이라 할 수 있는 Rib입니다.

2007-12-03_113.png

먼저 위의 스크린샷을 보면 놀랄만큼 깔끔한 선으로 일정하게 목의 Rib을 그린 것을 볼 수 있습니다. 펜툴로도 저렇게 그릴 수는 있겠지만, 그런 용자가 되기 보다는 저라면 조금 더 간단하고 빠른 방법을 찾아보겠습니다. 그래서 생각한 것이 패턴 브러시입니다. 패턴브러시는 말 그대로, 일정한 객체를 패턴으로 삼아 그것을 반복적으로 그려서 선을 만드는 것입니다. 그리고 이런 ‘철길’과 같은 부분은 패턴브러시에서 가장 표현하기가 만만한 부분입니다.

2007-12-03_114.png

위의 그림을 보겠습니다. 우선,  Rib의 폭정도되는 길이로, 아래위로 수직인 선을 하나 긋습니다. 실제 Rib의 선을 표현할 정도의 굵기로 만듭니다. 여기서는 0.5pt를 사용하였습니다. 이렇게 만든 선 조각을 브러시 팔레트로 드래그해서 던져 넣습니다. 그럼 아래와 같이, 이 오브젝트를 브러시로 등록하겠냐는 대화상자가 나타납니다.

2007-12-03_115.png

우리는 이 녀석을 패턴 브러시로 등록할 것이니까, ‘New Pattern Brush’로 지정하고 OK 버튼을 누릅니다.  곧이어, 브러시의 속성을 지정하는 창이 나타납니다.

2007-12-03_116.png

먼저 세로로 반듯한 선분이 브러시 조각으로 제대로 등록되었나 확인합니다. 전체 선의 부분은 가로 방향이지만  우리가 그려놓은 선분은 세로 방향입니다. 그래야 그리는 방향에 수직으로 짧은 선들이 그려질 것입니다. 그리고 spacing은 이러한 선이 그려지는 간격입니다. 200%로 좀 넉넉한 간격을 두고 그려질 수 있도록 해 봅시다. 그런다음 펜툴을 사용하여 가로 선(?)들이 그려질 부분을 그립니다. 여기서 기억할 것은 패턴 브러시는 언제나 원래 패스의 중심을 통과하도록 만들어집니다. 따라서 새로 그리는 펜툴 라인이 Rib 경계선의 중심에 가도록 그리면 됩니다. (이러한 작업이 좀 힘들어 보이면 아예 통째로 패턴브러시로 만드는 방법도 있겠죠?)

2007-12-03_117.png

이제, 선을 그렸으니, 여기에 패턴브러시를 적용해 보겠습니다.브러시 팔레트에서 방금 만든 브러시를 클릭만 해주면 됩니다.

2007-12-03_121.png

음, 그런데 간격이 너무 촘촘해서 좀 보기 징그럽습니다. 간격을 좀 넓혀 보겠습니다.

2007-12-03_120.png

브러시 팔레트로 가서 방금 만든 브러시를 더블 클릭합니다. 그럼 아까의 브러시 속성창이 다시 나타납니다. (이번 강좌는 특별히 일러스트레이터 9 버전으로 만들었습니다.)

2007-12-03_118.png

Spacing 값을 팍팍 늘려서 400%를 주었습니다. 확인을 누르면 대화 상자가 하나 더 생깁니다. 이 대화상자는 브러시 속성을 변경했을 때, 이미 해당 브러시를 적용한 패스가 있는 경우에 변경된 브러시 속성을 적용할 것인지 여부를 묻습니다. 우리는 어떻게 변했는지 확인도 할겸, Apply Stroke를 선택합니다.

2007-12-03_119.png

확인을 해보니 나름 간격이 한결 나아진 듯 합니다. 이제 늘 하던 방식대로 이 라인을 반대편으로 대칭 복사해봅니다.

2007-12-03_122.png

음, 그랬더니 가운데 부분이 뻥 뚫려서 보기가 좀 그렇습니다. 브러시는 객체 단위로 적용이 되므로두 개의 객체를 하나로 합쳐주면 자연스럽게 해결되는 문제입니다.  Direct Selection Tool(A)을 이용해 가운데 접점을 선택해주고 join 시킵니다.

2007-12-03_124.png

이제, 잘 해결되었습니다. 이러한 패턴 브러시를 잘 이용하면 지퍼의 이빨,더블 스티치나 삼중, 사중의 스티치, 절개선 위를 더블 스티치로 눌러 박은 효과를 쉽게 표현할 수 있습니다. 당연히 곡선으로 휘어지는 두 개의 선이 일정한 간격을 유지할수 있겠지요. 우선 더블 스티치를 가지고 조금  장난을 해 보았습니다. 이번 강좌와 똑같은 방법으로 구현한 것이니, 다들 한 번씩 해보시기 바랍니다.

2007-12-03_125.png