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

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

오브젝트의 순서

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

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

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

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

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

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

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

다시 설명입니다.

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

그룹의 개념

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

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

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

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

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

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

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

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

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

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

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

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

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

유형 1

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

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

유형 2

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

유형 3

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

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

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

관련글 ::

• 20071029 :: 일러스트레이터에서 트레이싱하기

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

1. Illustrator 의 Auto Trace

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

2. Streamline Again

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

3. Take it

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

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

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

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

이 그림을 확대해보자. 확대하여 곡률이 커지고 완만할수록 스트림라인은 당신을 좋아할 것이다. 주저말고 포토샵을 실행하라. (물론 크기조절과 밝기/대비조절을 할 수 있는 이미지 툴은 어떤 것이든 상관없다. 나도 이런 일로 포토샵을 쓰지는 않는다. 간단한 이미지의 크기 변경, 밝기/대비 조절, 텍스트 삽입과 같은 아주 간단한 작업은Irfanview나 FastStone 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 파일을 불러오지 않는 것 같다.

일러스트레이터 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 파일로 변환하는 방법에 대해 살펴보겠습니다.

패턴브러시 실전

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

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

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

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

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

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

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

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

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

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

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

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

제 경험에 비추어 볼 때 라인의 굵기가 0.25pt 정도가 되면 인쇄할 때 보이지 않게 됩니다. 오늘은 왜 이런 모니터와 프린터에서 출력될 수 있는 한계가 다른지, 그리고 이러한 문제를 해결하는 방법은 무엇이 있는지 알아보겠습니다.

해상도

먼저 우리가 알아야 할 것은 해상도에 대한 개념입니다. 일상적으로 어마어마하게 자주 듣는 이야기이지만 한 번 정확하게 그 뜻을 짚고 넘어가야하겠습니다. 위키 백과에서는 ‘해상도’란 단어를 다음과 같이 정의하고 있군요.

해상도(解像度)는 어느 일정한 단위 안에서 얼마나 더 자세하게 그 내용을 표현하는가를 나타내는 용어이다. 주로 컴퓨터 디스플레이 모니터, 디지털 텔레비전, 또는 프린터의 출력에 쓰인다.

즉, 해상도란 정해진 공간 속에 얼마나 더 많은 점을 찍을 수 있는지에 대한 일정의 ‘점’의 밀집도를 말합니다. 거꾸로 보자면 ‘하나의 점이 얼마나 작은가’를 말한다고 볼 수 있지요. 해상도에 대해서 이해가 되었다면 다음 문제를 한 번 생각해 봅시다.  화면 해상도는 800×600, 1024×768 등으로 변경이 가능한데, 모니터의 크기가 정해져있다면 해상도를 변경할 때 마다 동일한 크기의 화면 속에 더 많은 점이 찍히거나 더 적은 점이 찍힙니다. 통상 해상도를 낮게 변경할수록 고해상도에서는 작게 보이던 아이콘이나 글씨가 (물론 그 만큼 입자는 거칠어 보이지만) 크게 보이게 되지요.

이러한 해상도의 단위로는 dpi(dot per inch)를 씁니다. 1인치 길이 속에 점을 몇 개나 찍을 수 있는지를  나타내는 지표입니다. 우리는 흔히 프린터의 출력 품질을 비교할 때 많이 사용하지요. 통상의 프린터들은 600dpi 정도의 해상도를 기본적으로  그려냅니다. 그래서 화면에 비해 엄청나게 세밀한 표현이 가능합니다. 이에 비해 우리가 사용하는 컴퓨터 모니터의 해상도는 많이 낮습니다. 통상 72dpi 정도로 추정하고 있었지만 요즘은 도트 피치(픽셀과 픽셀 사이의 거리)가 줄어들고 있어서 이보다는 높은 해상도를 지원하는 것으로 알고 있습니다.

pt : 포인트

다음은 포인트에 대해 알아보겠습니다. 포인트는 폰트의 크기를 나타낼 때 많이 사용하는데요, 단위는 pt를 씁니다. 포인트는 화면 해상도와는 달리 절대적인 수치 단위입니다. 1인치를 72등분한 크기로 실제로 1pt는 0.3527777….. 밀리미터입니다. 일러스트레이터에서 사용하는 라인의 굵기에 대한 단위도 바로 이 포인트 단위를 씁니다.

일러스트레이터의 해상도

일러스트레이터는 기본적으로 작업하는 아트웍의 해상도를 200dpi로 가정하고 동작합니다. 이 정도의 해상도로 작업하여 출력하게 되면 비록 프린터의 해상도가 600dpi나 그 이상이더라도 매끈하게  그려내는데는 큰 문제가 없기 때문입니다. 일러스트레이터에서 작성된 그림은 벡터 이미지이며, 여러분도 잘 알고 계시듯이 이러한 벡터 이미지는 확대하거나 축소하더라도 입자가 거칠어지거나 (앨리어싱) 그림이 깨지는 문제가 생기지 않지요. 즉 지름이 4cm인 원을 일러스트레이터에서 그려서 프린터에 출력하게 되면 일러스트레이터는 이 동그라미가 600dpi 해상도에서 깨지지 않도록 고해상도 모드로 래스터화하여 프린터로 전송합니다.

0.25pt 정도되는 가느다란 선이 프린터로 출력되지 않는 이유는 무엇인지 생각해보겠습니다.

우선 프린터의 해상도가 600dpi라고 가정하면 프린터가 찍는 가장 작은 점의 크기는  0.00424mm 가량 됩니다. 그리고 0.25pt는 밀리미터로 0.00882mm로 환산됩니다. 따라서 600dpi 프린터에서는 점 2개를 찍으면 0.25pt 짜리 점을 실제로는 찍을 수 있습니다. 그런데 문제는 일러스트레이터입니다. 일러스트레이터는  기본적으로 200dpi 환경에서 동작하며, 라인의 굵기를 200dpi로 한정합니다. 이 때 0.25pt(0.0088mm)는 200dpi 환경에서는 점 하나(0.0127mm) 보다 작은 크기가 됩니다. 화면에서는 이러한 라인을 벡터로 처리하기 때문에 문제가 되지 않습니다. 데이터가 존재하니 충분히 화면을 확대하면 라인을 그려내면 그만이지만 200dpi로 환산하는 과정에서 0.25pt 굵기의 라인은 그 굵기가 1개 점 보다 작기 때문에 올바르게 래스터화(rasterization)되지 못하고 누락될 수 있습니다. 이로 인해 0.25pt짜리 라인(폭 0.088mm)은 프린터로 넘겨지는 데이터에서는 빠지게 됩니다. 일단 해당 그림을 pdf로 출력해본다면 pdf 리더에서는 0.25pt로 그려진 라인을 볼 수는 있습니다. (이걸 프린터로 출력해보면 답을 알 수 있을 것도 같은데 불행히도 제게는 지금 프린터가 없습니다.)

요약하면 일러스트레이터가 프린터로 보낼 수 있는 최대 해상도 혹은 프린터가 메모리상에서 처리할 수 있는 이미지의 해상도보다 0.25pt의 라인이 더 가늘기 때문인 것으로 보입니다.

우회하기

이를 직접적으로 해결할 수 있는 방안은 없는 듯 합니다. 프린터 고급 설정 같은 곳에서 dpi를 최대로 높여보아도 동일한 결과를 보게 될 것이며, 일러스트레이터 자체는 벡터 방식의 프로그램이라 설정 같은 곳에서 화면 해상도를 바꿀 수 있는 옵션이 전혀 없기 때문입니다.

대신, 이를 우회하는 방안을 알려드리겠습니다.이는 실제로 일러스트레이터에서 화면 스케일에 비해 지나치게 가는 선들을 렌더링하는 방법을 그대로 응용한 것입니다. 0.25pt로 그려진 라인을 모두 선택하여 0.5pt 굵기로 바꿉니다. 그런 다음 그 라인의 색상을 원래 색보다 흐린 컬러로 바꿔줍니다. 원래 선이 검은색이라면 회색으로, 빨간색이라면 핑크색으로 바꿔서 출력합니다. (흑백으로 출력한다면 그냥 검정을 회색으로 바꾸는게 좋겠죠) 그러면 선을 출력되지만 0.5pt의 원래 선보다는 흐리게 그려져서 약한 느낌이 들게 됩니다. 그럼 보는 사람도 원래 0.5pt보다는 가늘게 인식할 수 있습니다. (워낙에 가느다란 선이라 그냥 감성적으로 그렇게 느끼게 된다는 이야기입니다.)

저는 지금은 다른 분야에 종사하고 있지만, 최근까지는 실무 디자이너로 경력을 쌓고 있었습니다. 사실 블로그나 미니홈피 등에서 디자이너를 말하면 그래픽 분야를 흔히들 떠올리시는데, 저는 패션 쪽에서 일하고 있었습니다. 요즘은 포토샵이나 일러스트레이터 등으로 도식화를 그리는 분들이 적지 않습니다. 사실 실무에서는 얼마나 활용하시는지는 잘 모르겠습니다. 가장 큰 이유는 강좌 글에서도 언급했듯이 ‘생산성이 떨어지는 것이 사실’이기 때문입니다. 손으로 그리는 것보다 깔끔하고 이쁜 그림을 그릴 수 있는 것은 분명 장점이지만, 하루에 열 개, 스무 개를 그릴 수 있는 사람이 컴퓨터로 작업하느라 다섯 개도 채 그리지 못한다면 그것은 컴퓨터 사용을 업무에 적용할만한 좋은 근거가 되지 못하기 때문입니다.

저는 사실 수전증도 조금 있고 부주의한 성격 탓에 좋은 퀄리티의 그림을 손으로 그리기 힘들었고, 어쩌다 잘 그려도 번지거나 묻어나기 일쑤였던 관계로 조심스럽게 ‘일러스트레이터로 작업지시서를 그려도 좋겠느냐’는 허락을 디자인실에 구했었고, 물론 손으로 그리는 속도를 컴퓨터를 통해 그리는 것이 따라잡을 때까지는 계속해서 실무 작업은 수작업으로 진행하고 심야/주말 등의 시간을 할애하여 이 글을 읽는 분들이 상상하기 힘들만큼의 노력을 투자했습니다.

제 강좌는 단순히 ‘일러스트레이터를 다루는 법’에 대해 이야기하는 것이 아니라 ‘일러스트레이터로 도식화를 그리는 방법’에 대해 이야기하고 있습니다. 즉, 어떻게 사용해도 좋을 툴을 작업 속도 및 효율성을 가장 극대화할 수 있는 방법으로 사용하는 부분을 다루고자 했습니다. 물론 실무에서 컴퓨터를 이용하여 작업을 하시는 현업 디자이너 분들은 많이 계십니다만, 정작 이 분들도 ‘일러스트레이터 사용법’에 대해서는 학원 등을 통해서 배울 수 있었겠지만 ‘일러스트레이터로 도식화를 그리는 법’에 대해서는 혼자 깨우치셔야 했을 것입니다. 최소한 제가 컴퓨터를 펜처럼 사용하기 위해 결심하고 계획하고 노력하는 그 때에는, 그리고 실제로 실무에서 사용하던 그 때에는 정작 필요한 일러스트레이터 스킬에 대해 교육 받을 수 있는 기관은 없었습니다.

최근 들어서는 관련 서적들이 나오고 있는 것으로 알고 있습니다만, 이러한 내용을 다루고 있는 블로그는 거의 전무한 관계로 저의 보잘 것 없는 글이 ‘일러스트레이터 도식화’로 검색하는 거의 모든 포털 및 검색 엔진의 검색 결과의 상위 결과 혹은 유일한 결과로 표시되고 있습니다. 그냥 따라해보면 되는 것 같은 보잘 것 없는 글이지만, 저 스스로는 그 몇 개의 포스팅을 내걸기 위해 일년이 넘는 시간을 투자했다고 해도 과언은 아닙니다.

그럼에도 불구하고 제 블로그의 글을 무단으로 퍼 가시는 분들이 꽤 있습니다. 특히 관련한 학과 생들이나 고등학생 분들이 관심 있으니까 카페로 퍼나르시는 것… 그리고 그런 욕구가 일 수 있는 점은 잘 알고 있습니다. 하지만 저는 제 블로그의 모든 글에 대해 커먼라이센스를 적용하는 것이 아닌 카피라이트를 적용하고 있습니다. (인용 이미지가 극히 적고 거의 텍스트로 때우는 것도 그러한 이유에 기인하는 것이기도 합니다.) 즉, 제 글을 짤라다가 인용하거나 퍼가는 행위를 일체 금하고 있습니다.

통상 커먼라이센스를 블로그에 걸어두신 분들은 ‘내 글은 이런 이런 조건(다양하긴 하지만 일반적으로 비영리/변경금지/동일조건을 그 조건으로 합니다)에 대해서는 퍼다가 날라서 사용해도 좋음’이라는 선언을 미리하시는 것입니다. 다만 제 블로그의 모든 컨텐트들은 그러한 커먼라이센스의 적용을 받지 않습니다. 모든 컨텐트는 그 컨텐트가 생성되는 시점부터 제게 모든 권리가 귀속됩니다. 그리고 저는 그것을 전체 혹은 일부라도 잘라다 다른 곳으로 붙이거나 글을 통째로 퍼가는 행위에 대해서 허락하지 않겠다는 것입니다. 즉 글을 퍼가시고자 하는 여러분들이 ‘퍼갈게요’라고 한다고 해서 끝나는 문제가 아니라는 말씀을 드리고 싶습니다. (그리고 퍼 가봐야 그림은 아마 안나올 것입니다.)

제 글이 도움이 된다고 생각하시는 분들은 그저 그 글의 제목을 마우스 오른쪽으로 클릭했을 때 ‘링크 복사’ 항목을 선택하셔서 해당 글의 영구 주소(permanent link)를 복사하시고 그 링크를 사용해서 해당 글을 다른 곳에 소개해 주시는 선에서 만족해 주셨으면 합니다. 설치형 블로그를 우연히 시작하게 되었지만, 그리고 겉으로는 어느 정도 방치되는 것처럼 보이지만, 저는 제 블로그에 그래도 상당한 애정을 가지고 있어서 제 숨이 붙어있는 한은 어떻게든 이 블로그와 도메인을 유지할 생각입니다. 따라서 나중에 찾지 못하는 글이 될 가능성도 향후 몇 십년 동안에는 일어나지 않을 것이라는 점에 대해서는 저를 믿어주시고 그렇게 해 주셨으면 좋겠습니다.

요즘은 제가 많이 바빠서 검색 링크를 역으로 타고 들어가서 해당 카페나 블로그에 일일이 삭제 요청을 하지는 못합니다. 그러니부디 제 글을 가지고 싶으시면 글 주소를 통해 링크를 걸어두시거나 즐겨찾기하셔서 두고 두고 이용하는 방법을 통해 활용해 주시기를 간곡히 부탁 드립니다.

주절대는 긴 글 읽어주셔서 감사합니다. 조만간 이 글은 About 페이지로 옮기도록 하겠습니다. 좋은 하루 되세요.

실장님 : A 씨 이번 패턴 꽤 이쁜데요?

A : 감사합니다. 허허.

실장님 : 음 그런데 이 요소요소가 너무 굵직한거 같아. 이거 간격은 그대로 두고, 크기만 좀 줄여서 다시 보여 줄 수 있죠?

A : 네? (음 그걸 새로 하려면 흐음흐음…)

실장님 : A씨는 컴퓨터로 작업하니까 금방 할 거 아녜요. 이거 다시 해서 한 번 봅시다.

자리로 돌아오는 A씨 조차도 그건 굉장히 간단한 일이라고 생각했다. 기본 형태가 되는 모티프를 세 개 정도 작업해서 이들을 각각 Ctrl+D 신공으로 무진장 많이 복사해서 만들었으니까. 하지만 막상 그게 생각만큼 간단한 일이 아니라는 것을 깨달았다. Ctrl+D 신공도 결국은 노가다 아니던가.

그러니까 간격은 그대로 두고

표현상 ‘패턴’이라는 말을 쓰기는 했지만, 실제 일러스트레이터상의 ‘패턴 스와치’를 말하는 것이 아닙니다. 간단한 예제를 아래에서 살펴보도록 하겠습니다.

예를 들어서 이렇게 만들어 놓은 화면이 있다고 하겠습니다. 이는 꼭지가 5개인 별과 꼭지가 6개인 별을 기본으로 삼아 만든 두 가지 모티브를 반복적으로 복사하여 만든 패턴입니다. 이 때 중요한 것은 각각의 모티프는 최초 작업 후 ‘그룹’으로 묶어서 복사했다는 사실입니다. 그룹으로 묶여져 있지 않으면 오늘 소개할 팁은 제대로 의도했던 결과를 보여주지 않습니다.

위의 대화에서 실장님은 저 별들의 모양은 이쁘지만, 크기가 너무 크니 간격은 유지하고 각각의 별의 사이즈만 작게 만들어서 다시 작업해보라고 하셨지요. 아마도 A씨는 전체를 선택해서 Scale.. 명령을 쓰려고 시도할지도 모릅니다.

별 전체를 선택한 다음 scale 명령을 써서 크기를 줄이면 어떻게 될까요? 그냥 UI 상에서 바로 축소하는 것과 다를 바가 없습니다. 모두의 예상대로 아래 그림처럼 별과 별 사이의 공백도 같이 줄어든축소판이 되고 맙니다.

오늘 소개할 스크립트는 이러한 문제를 해결하기 위해 고민하다가 (사실 이 문제로 일러스트레이터 자바스크립트를 공부하기 시작했더랬습니다.) 머리가 빠져온 A씨를 구원해줄 스크립트입니다.

우선 아래에서 필요한 스크립트 원본을 다운로드 받습니다.

▶ 스크립트 다운로드 : ScaleEACH.js

스크립트를 실행하기 전에 우선 크기를 줄일 별을 모두 선택합니다. 그런 다음 해당 스크립트를 실행하면 아래와 같이 확대/축소를 할 비율을 입력받는 창이 나타납니다.

50이라고 입력합니다. 해당 숫자는 50%로 인식되어 각각의 별은 크기가 50%로 축소됩니다. 결국 아래와 같은 모양이 되겠지요.

원하는 크기가 아니라면 몇 번이고 반복하여 스크립트를 실행하면서 크기를 조절해보면 됩니다. 다만 처음에 생각했던 Ctrl+D 신공으로만 해결하려 했다면 아마 끝없는 노가다와의 싸움을 해야할 지 모르는 일입니다.

요즘은 일러스트레이터는 커녕 포토샵도 열어보지 않고 있어서 전혀 그림 같은 걸 올릴 건더기가 없어서 한참 팽팽 놀고 있던 백수 시절에 그렸던 그림 두 점 부끄럽지만 올려봅니다. (사실 예전에 싸이에 올렸던 거 재탕임) 일러스트레이터로만 작업했던 것들인데, 조만간 심기 일전 하여 도식화 강좌 후속편이나, 프린트용 아트웍 만드는 강좌도 좀 만들어 볼까 생각만 하고 있습니다. 아무튼 꽤 빠른 시간 내에 일러스트레이터 관련 포스팅을 재개할까 합니다.

이건 한 참 손이 굳었을 때 연습 삼아 휘갈 긴 것

그리고, 다음날 좀 풀린 손으로 작업한 것 한 점

브러시를 이용해서 작업한 그림들입니다. 딱딱한 도식화만 그리다가, 심심풀이로 한 장 두 장 그리게 되었는데, 펜툴로 스케치하는 법에 대해 조만간 포스트 하나 올리도록 하겠습니다. 그럼 안녕~

일러스트레이터에서 이런 저런 도안 작업을 하면서 어떤 글꼴을 쓸까 고민하게 되는 일이 많습니다. 문구를 적어 놓고 아염없이 폰트를 바꿔보는 일도 많지만, 설치된 폰트가 수백개에 달하는 상황이라면 이런 작업도 만만치 않습니다. 디자이너에 따라서는 폰트 샘플표를 종이에 출력해 놓고 쓰는 경우도 많은데요, 이런 경우에도 ABCDEF… 만 써 있는 문구와 원하는 문구가 써 있는 경우의 느낌이 다른 경우도 많기 때문에 참고하기가 쉽지 않지요.

그래서 만든 일러스트레이터 폰트 미리보기 파일입니다.

자바스크립트를 실행하기 위해서는 illustrator cs 이상이 필요합니다. (cs2인지는 잘 모르겠네요)

다음 링크를 클릭하여 자바 스크립트 파일을 다운로드 받아 일러스트레이터가 설치된 폴더 아래에 presets/scripts 폴더에 저장합니다.
(다운로드 : http://cid-9a2a1991fc5129b7.skydrive.live.com/self.aspx/%ea%b3%b5%ec%9a%a9/preview%7C_all%7C_font.js)

해당 스크립트를 실행하면, 문구를 입력하는 창이 보입니다. (디폴트로는 soooprmx가 입력되어 있습니다.) 문구를 입력한 후 확인을 입력하면, 새로운 파일을 하나 생성하고(저장은 하지 않습니다) 입력된 문구를 사용하여, 모든 폰트로 텍스트를 생성하여 찍어 냅니다. 원하는 느낌의 문구가 보이면 복사해서 따다 붙이면 되겠지요.

그리고, 폰트를 많이 설치해서 사용하는 것은 아무래도 시스템 자원을 그만큼 많이 사용한다는 것이니, 여전히 부담스럽기는 합니다. 그런 경우에는 typograf라는 툴을 추천합니다. typograf에 대해서는 다음 기회에 한 번 설명하도록 하지요. (폰트를 많이 사용해야하는 디자이너들에게는 필수입니다. 유료이지만 결코 돈이 아깝지 않지요!)