20090810 :: 티셔츠에 올리는 나만의 그림, 사진

티셔츠 도식화를 일러스트레이터로 그리는 과정을 강좌로 소개하고 있다보니 각 종 검색 엔진에서 ‘티셔츠’로만 검색해도 본 블로그가 노출이 되는 듯 합니다. (어차피 검색 순위는 저~ 아래 겠지만요 ㅎㅎ) 그래서인지 유입 검색어 중에 ‘티셔츠에 사진 올리는 법’이 종종 눈에 띕니다. 요즘 같은 무더운 여름날, 아침잠을 설쳐 졸려서인지 눈이 부어오르는 착각을 느끼면서 오늘은 티셔츠에 그림이나 사진을 올리는 법에 대해 살짝 알아보고자 합니다.

티셔츠에 프린트는 어떻게 올라가는 것일까?

중학교 미술 시간에 판화의 기법을 배우는데 (요즘은 잘 모르겠습니다. 중학교 졸업한게 이제 기억도 잘 안나네요) 그 중에 실크 스크린이라는 게 있습니다. 진짜 실크로 찍는게 아니라 아주 눈이 고운 망을 통해서 염료가 내려가는 방식으로 그림이 찍히는 것이지요. 인쇄에서도 이와 유사한 오프셋 인쇄라는 게 있기는 합니다. 일반적으로 티셔츠에는 나염이라는 방법으로 프린트를 찍게 됩니다. 여기서 나염은 일반적인 프린트를 제작하는 방법이고, 그 절차는 우리가 미술 시간에 배운 ‘실크 스크린’과 매우 유사합니다. 하지만 이런 나염을 만들기 위해서는 색상의 가지수마다 틀을 만들어야 해서 단가가 올라가는 요인이 됩니다. 물론 틀은 한 번 만들어 놓으면 얼마든지 쓰고 또 쓸 수 있기 때문에 대량 생산 하는 옷들에는 많이 쓰일 수 있습니다. 통상 1~5도 사이의 색상을 쓰는 프린트는 이렇게 만들어집니다.

판을 만드는 비용 자체가 가격 구조에 부담이 (티셔츠는 굉장히 간단한 과정을 거쳐 봉제가 되므로) 될 수 있기에 이보다 더 색상을 많이 쓰는 경우에는 ‘원색 분해’라는 방식을 사용합니다. 프린터나 신문에서 사용하는 컬러 사진의 인쇄 방식과 유사한 방법으로 원색 및 별색과 망점 처리된 판을 만들어서 사용하지요. 색감이 완벽히 재현이 안되는 경우가 있기는 합니다.

여러분이 하고 싶어하는 것은 전사 프린트에요

많은 분들이 궁금해하시는 사진의 경우에는 어떨까요? 사진의 경우에는 몇 백개가 된다하더라도 표현하기 어려운 정교한 색차가 있습니다. 이런 경우에는 전사 프린트를 하게 됩니다. 전사 프린트는 전사 용지에 좌/우가 바뀐 그림을 출력한 다음, 옷감에 출력된 프린트를 엎어서 프레스기로 눌러서 그림을 옷에 통째로 찍어내는 방식입니다. 전사 프린트 하는 자체가 수량에 따라 계속 비용이 발생하는 문제가 있어서 원가가 높은 부담이 있지요. 하지만 개인이  자신의 옷에 그림을 프린트 하고 싶다면 이런 방식이 가장 좋은 방법이기는 합니다. 방식 자체는 어린 시절에 많이 했던 판박이 스티커랑 똑같은 원리라고 할 수 있어요.

이러한 전사 프린트는 사실 집에서도 할 수 있지요. 별도의 장비가 필요한 것은 아니고 특수한 코팅이 되어 있는 전사 용지를 사서 거기다 잉크젯 프린터를 사용해서 그림을 (반드시 좌우가 반대로 되도록!) 출력해서 옷에다 대고 다림질을 하면 됩니다. 보다 깔끔한 작업을 원하시면 평판 프레스기를 사용해도 된답니다. 근데 평판 프레스기는 좀 비싸요. A4 사이즈를 커버할 수 있는 프레스는 약 50만원 정도 하는데, 좀 크기가 큰 남자티셔츠 같은 경우는 A4 한장으로는 그림이 안나오기때문에 B4 사이즈의 평판 프레스를 써야 하는데, 이게 무겁기도 엄청 무겁고 100만원이 넘어가는 (마치 크고 아름다운…) 기계입니다.

이런 일반 전사 외에도 승화 염료를 사용하여 옷감에다 직접 전사를 할 수 있는 장비도 있어요. 염료 승화 방식의 프린터들이 있습니다. 물론 이것도 100만원 가까이 하는 고가의 제품들입니다. 그냥 집에서 다리미로 미는게 제일 좋겠군요…

그런데 이러한 전사 방식은 그 내구성이 매우 약합니다. 물에 몇 번 빨아주면 그림에 금이 가기 시작하고 얼마지나지 않아 깨끗한 건 아닌데 그냥 원래 옷으로 돌아오지요. 아주 아주 오래 전에 초등학교 입학선물로 전사 티셔츠를 선물받은게 있었는데, 입학식날 수돗가에서 물을 먹다 가슴에 물이 튀니 도날드 덕 아저씨 얼굴에 금이 쩍쩍 생겨서 얼마나 놀랬는지… 그게 아직까지도 기억에 선명히 남네요.

마우스로만 만드는 나만의 티셔츠

사실 커스텀 티셔츠는 미국에서는 이미 온/오프라인에서 많은 관심을 받고 있습니다. 벌써 3~4년 전부터 웹 상에서 그림을 그려서 자신만의 티셔츠를 받아보는 그런 서비스는 계속 있어왔지요. pixeltees.com 라는 곳도 사실은 이 블로그에서 아주 오래 오래 전에 소개를 한 번 한 적이 있습니다. 웹 상에서 마치 싸이월드 그림판처럼 아주 간단한 툴을 써서 그림을 그리거나, 도트를 찍어서 이미지를 만드는 형태로 자신만의 티셔츠를 디자인할 수 있습니다. 자신의 디자인으로 티셔츠를 만들어서 주문할 수도 있으며, 그저 티셔츠 디자인을 저장하여 팔리는 만큼 수익을 분배하는 시스템도 (이는 최근에 추가된 사업 모델인 듯 하네요) 있습니다. 이 곳에서 자신만의 티셔츠를 구매하는 가격은 15달러가량으로 사실 이 정도면 왠만한 캐주얼 브랜드에서 살 수 있는 티셔츠와 가격이 별반 다르지 않아 보입니다. 물론 원단의 질을 가늠할 수 없고, 아마 국내에서는 배송비가 더 비싸고 말거라는 아쉬운 점이 있네요. 전 사실 돈 만 있으면 염료 승화 전사기 몇 대 사다가 이런 사업 무척 하고 싶은데 말이죠. 아무튼 이곳은 전사 프린터를 사용하는 듯 하네요. 사용 가능한 컬러의 수가 꽤 많고, 그리기에 따라서는 디테일한 그림을 만들 수도 있을 듯 합니다. 사실 실제 이렇게 제작된 티셔츠의 실물 사진을 볼 수가 없으니 조금 아쉽기는 합니다만, 그래도 이렇게 자신의 노력이 옷으로 만들어지는 짜릿한 쾌감을 디자이너가 되기위한 개고생을 하지 않고 저렴한 가격에 맛 볼 수 있다는 건 정말이지 괜찮은 취미 생활이 될 수도 있을 듯 하거든요.

스트림라인 간단 튜토리얼

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

20090627 :: 일러스트레이터에서 화면에서 보이는 선이 프린터로 출력되지 않을 때

오랜만에 일러스트레이터 글입니다. 일러스트레이터로 작업하여 도식화등을 그리면 맨 마지막에는 hard copy를 만들기 위해서 프린터로 출력을 하게 됩니다. 그런데, 간혹 멀쩡히 그려지는 가느다란 라인이 종이에 출력된 그림에서는 그려지지 않는 황당한 경험을 해보신 적이 한 두 번씩은 있습니다.

제 경험에 비추어 볼 때 라인의 굵기가 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보다는 가늘게 인식할 수 있습니다. (워낙에 가느다란 선이라 그냥 감성적으로 그렇게 느끼게 된다는 이야기입니다.)