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 파일을 불러오지 않는 것 같다.

20090228 :: 일러스트레이터에서 폰트 샘플 열어보기

font preview in illustrator

일러스트레이터에서 이런 저런 도안 작업을 하면서 어떤 글꼴을 쓸까 고민하게 되는 일이 많습니다. 문구를 적어 놓고 아염없이 폰트를 바꿔보는 일도 많지만, 설치된 폰트가 수백개에 달하는 상황이라면 이런 작업도 만만치 않습니다. 디자이너에 따라서는 폰트 샘플표를 종이에 출력해 놓고 쓰는 경우도 많은데요, 이런 경우에도 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에 대해서는 다음 기회에 한 번 설명하도록 하지요. (폰트를 많이 사용해야하는 디자이너들에게는 필수입니다. 유료이지만 결코 돈이 아깝지 않지요!)