나름 팁, 붓펜으로 내 손 글씨를 일러 소스로 만들어보자

[Sesshou]

이거 전에 2018년도에 일상 끄적이던 글에 나오던 그림들과 글씨들이지만, 그 때 방법을 안 적었었죠.
네... 다 까보고 왔습니다. 치밀하지요. ㅎㅎㅎㅎㅎㅎ 
이거 방법만 안다면 일러 초보라도 재밌는 손 글씨 붓펜 사서 간단히 만들 수 있구요.
요런걸로 바로 조합형 캘리 폰트같은걸 만들 수도 있는겁니다. 

가끔 일러 강좌처럼 알려주는 다른 카페에 그 방법을 세밀하게 강의용으로 적어준 적이 있었습니다.
그거를 또 스스로 백업을 다 했죠. 일러 팁도 사실 배울 수 있으면 싶다... 이 요청들도 사실 있기에
이젠 이거 한 번 까보면 어떤가 싶어서 가지고 옵니다. 실험 좋아하는 성향이라 얻어걸린거예요.
그런데 그냥 일러 프로그램 기본 기능 가지고 한거라서 특별한 팁이 아니라, 뭐 펜툴 기똥차게 
요리조리 잘 그리고 이게 아니라, 진짜 일러스트레이터 자체 기능만 잘 숙지하고 사용한다면
저 아니라도 누구라도 이거 아하 하고 쓰셨을겁니다.

저는 요거 기능으로 지금도 뭘 하느냐? 상세이미지 만들 때 상품 기능 요약하기 좋은게 아이콘같이
단순화시킨 도형인데, 그리자니 시간 걸리고 어떻게 할까 급 망설여집니다. 컴퓨터용 헤드셋이었다...
그러면 소리 잘 들리는거 강조해야하니까 나팔에서 소리나는 그림... 그릴려니 좀 귀찮은지요.
그럴 땐 구글 번역 페이지 하나와 구글을 엽니다. 저는 네이버 안 써요. 네이버는 한국꺼만 주로 나오고
거기에서도 네이버 카페, 블로그 등 자기네 회사 서비스 한정 범위에서만 주로 찾으니 자료가 별로예요.
큰 물에서 놀아야죠. 그래서 전 구글 선호합니다. 메가폰을 영어로 뭐라 하느냐, 좌측엔 한글로 쓰고
우켠에 영어로 번역되게 해 두고 누릅니다. 뭐라고 영어 나오죠? 그거를 구글 검색창에 넣고
뒤에 icon png를 더 붙입니다. 그럼 그 형태가 초 단순화 된 그냥 먹선으로 단순화해서 그린 그림이
무지많이도 검색됩니다. 그 중 하나 큰거를 캡쳐하죠. 기왕이면 한 가지 색상, 검정으로 된게 좋습니다.
그 캡쳐도구로 캡쳐한 그림을 일러 화면 열고 붙여넣기 준 후, 요 방법으로 바로 아이콘 1초면 되요.
그러구서 제가 색상 바꾸건 뒤에 동그라미를 넣던 그러면 깔끔한 아이콘이 상세 페이지에
기능 설명하는 단락에 넣기가 좋아진 형태로 금방 만들어집니다.

이 방법을 그런 저런 용도로 응용해 보시기 바랍니다.
아. 굵고 진한 검정 펜을 쓰세요. 볼펜같은건 선을 자동으로 잡아내기 어렵답니다.

---

붓펜으로 내 손 글씨를 일러 소스로 만들어보자

---

실제 준비물 : 붓펜 (혹은 진한 매직이나 진하게 나오는 네임펜도 됨),
                  그리고 하얀 종이, 사진 찍을 핸드폰

컴퓨터 안의 준비물 : 어도비 일러스트레이터 깔려 있을 것
                           카카오톡 PC버전이 컴에 깔려 있거나,
                           네이트온 PC버전이 컴에 깔려 있거나,
                           네이버 라인이라던지...
                           여하간 폰에도 해당 앱이 있고, 컴퓨터에도 그 프로그램이 깔려있어서 로그인 되야함.

                           그리고 내 컴퓨터 속의 보조프로그램 안의 캡쳐도구 꺼내둘 것(은근 많이 씀)

                           아래 그림에서 동그라미 친거 처음 것이 보조프로그램 속의 캡쳐도구 입니다.

* 이 강좌에 사용된 프로그램 : 어도비 일러, 포토샵 둘 다 CS6입니다. (포토샵은 안 쓸 수 있습니다)

---

안녕하세요 뇨뇨입니다.
저는 어렵고 딱딱한 이론보다는, 직접 해 보면서 익숙해지는 쪽으로 가려고 합니다.
취미로 배워가고 알아가는거라도, 만약에 저처럼 디자이너로 다시 출사표를 던질 적에
아... 저도 경력 단절 여성이었으나, 국가의 지원을 더 받은건 없고, 취미로 해 오던게 절 살렸거든요.
그래서 이 중에서도 분명히 나도 나중에 저렇게 가보고싶다~~ 하시는 분 계실거 같기도 해요.
그럼 실제 직장에서의 실전 위주이되, 어렵지 않은 것들이거나 해볼만한 그런 것을 적어두면
편지지로 이쁜거 만들어서 글 적어도 좋기는 좋지만, 내가 내 명함을 디자인해서 만들어보고
온라인 업체에 어떻게해서 포토샵이나 일러로 만든 파일로 그걸 주문하는가 등등...
이런걸 알려드리고싶어요 보다 실속있게.
친한 사람이 뭔가 작은 사업을 하나 꾸린다고 연락이 왔을 때, 저는 그 부부의 명함을 만들어줬습니다.
생각보다 명함이라는게 비용이 알고보면 많이 안 나갑니다. 몰라서 다 맡겨버리면 비싸지는거고
만들어서 파일 직접 줄 수 있으면 정말로 명함 하나 맞출 돈으로 여러 사람 해 주고도
큰 돈 안 들였는데 꽤 의미있고 좋은 선물도 할 수 있어집니다.
저는 그런걸 여러분과 같이 해 보고싶네요.
기왕이면 내가 취미로 배운 솜씨로 누군가에게 의미있을 선물을 만들어 줄 수 있다면 멋질거 같지않나요.

요번 강의는 어디서 방법을 본게 아니라, 실험하고 응용하는걸 좋아하던 제가
우연찮게 얻어걸린 방법으로 매번 재미를 보는 방법입니다.
여튼 원래부터 일러스트레이터에 깔린 기본적인 기능입니다.
딱 간단한 방법만 제시하겠습니다. 따라서 하기만하면 만들어지게끔 말입니다.
중간에 좀 어려우신 분들도 있으실겁니다. 따라하시다가 어디서부터 막힌다 싶으시면
밑에 댓글로 남겨주세요. 그러면 아실 때까지 가이드 해 드리는걸로 하겠습니다.


그렇지만 왜 흰 종이에 붓펜으로 했느냐? 복잡한 칼라사진 딱 던지고 그거 누르시면 인식 안 됩니다.
가장 기본적인게 흑백, 일러스트레이터의 툴바 끝의 칠색과 선색은 백과 흑이죠.
즉 밝고 어두움만 있는 전형적인 명도대비의 구조를 띠는게 추출이 잘 되곤 합니다.
사람이 일일히 선 따는 것처럼 대단한 붓터치를 다 발려낼거라고 기대하시면 안 되시고
개괄적인 글자 형태는 따라와주므로, 간판 중에서 글자만 상자처럼 생긴 간판 있죠?
채널간판이라고 하는 그런 것을 만들 적에, 바로 이런 기능이 참 쓸만합니다.
채널 간판 사진은 요런거... 밤에 불도 들어오구요. 너무 복잡하면 벤딩이라고 꺾어주는걸 못해요.
그래서 가장 기본적인 검정과 흰색만으로도 필요한걸 만들어내는 과정을 한 번 해 보는겁니다.

채널간판

중급을 달아둔 이유는요...일러스트레이터의 원래 가진 기능을 이용하는거라 사실은 초급입니다만
내 폰으로 사진을 찍는거까지는 되는데, 이걸 어떻게 컴퓨터로 넣어버리는가가 어려우실 수도 있습니다.
바로 그... 폰 속의 사진을 컴퓨터 속에 넣는 부분이 어려울 수 있다는 의미에서 그래서 총평이 중급입니다.

CS6 아닌 다른 버전에도 이 기능은 있었습니다. 아니 CS 이전의 일러 10 버전에서도 있긴 했습니다만

부르는 명칭이 달랐습니다. 자동 추적 기능이라고 Auto Tracing이던가 그랬을겁니다.

그럼 이번 이야기를 시작합니다.

* 캘리그라피(Caligrphy) : 자신만의 손글씨. 특히 서예와같은 자유로운 형태를 말함   
                                 드라마나 영화의 제목, 고급스런 상품의 이름에 많이 사용

---

1) 폰으로 내 글씨를 찍어보세요.

무슨 현수막 만들 일이 있었습니다. 의뢰한 고객이 특별히 저 문구가 들어갔으면 하신다면서
붓글씨로 쓴 캘리그라피 사진을 보내왔습니다. 캘리그라피... 부탁해서 만들면 이거 비싸거든요.

유명 작가는 비쌉니다.
그럼 뭐 손글씨나 붓글씨 느낌이 나는 폰트로 하면 어떠느냐 했더니, 자기가 사진 보낸거만 강조합니다.
즉 캘리, 손글씨로 해 달라는 얘기죠 한 마디로. 뭐 그럼 힘 있겠습니까 고객이 원하시는데. 하면 됩니다.

그래서 이면지에 무수히도 썼습니다.

원래의 제 글씨랑은 조금 다르게, 어디를 강조했다가 등등 낙서 많이 했구요.
요거 하나를 건졌습니다. 요게 폰으로 찍은 사진이어요. 그런데 일러스트레이터는 컴퓨터 속에 있지요?
그럼 이 사진을 일러가 깔린 컴퓨터로 보내야하는데... 복잡하고 어려운건 사실은 아닙니다.
폰 충전기 케이블을 연결해서 빼내는게 더 까다로울 수 있지만, 그게 익숙하심 그걸로 하셔도 되셔요.

가장 익숙한게 폰과 컴에 똑같이 깔려있는 프로그램을 이용해서, 

나에게 메세지 보내기 기능으로 뽑아내는거죠.

저는 카카오톡으로 예를 들겠습니다.
다음 검색창에서 [카카오톡 PC]만 써도 촤라라란~ 하고 쫙 나오죠. 하나 들어갑니다.

요렇게하면 카카오톡 PC버전를 내려받고 설치하고 내 계정 인증해서 폰하고 연동 가능한게 싹 나옵니다.
이번 회차를 하실 적에는 이렇게 컴용 카톡이 아예 깔려있다면 - 하는게 전제라면 전제입니다.
폰 속의 사진을 컴퓨터 속으로 타인의 도움 없이 직접 넣으시는게 되시면 패스하셔도 됩니다.
컴퓨터에 깔아둔 프로그램에서 바로 그 폰으로 막 지금 찍은 사진이 필요한거거든요.

아무튼 저렇게 촛점을 잘 맞춰서 찍습니다.
폰으로 사진 찍으실 때, 내 눈이 안 보여서... 아뇨아뇨.
찍으시기 전에 화면에 잠시 검지를 천천히 닿게 해 보셔요. 검지가 닿은 부분부터 촛점 맞춰질겁니다.
어느 폰이나 사실 터치폰이면 다 되는 기능입니다. 눈이 아니라 손동작 한 번 더 하면 촛점 잘 맞는답니다.

기왕이면 선명해야 이게 잘 나온답니다. 촛점이 너무 안 맞으면 컴퓨터는 사람처럼 인지하질 못한다죠.

---

2) 일러스트레이터에 사진을 데려온 후 '만든 후 확장'을 누르기

일러에 사진을 가져오는 방법은 사실 여러가지 입니다. 간략히 정리합니다.

ⓐ 일러를 먼저 이렇게 켜고, 열기를 누르면... 그 때 사진을 찾아서 일러로 여는거 있죠?
    비추천, 저는 안 합니다 잘. 
    왜냐하면 스와치 팔레트... 색색이로 된 물감 상자같은거에
    검정하고 하양만 남고 싹 다 없어집니다.

ⓑ 아니면 '가져오기' 영문판의 Import라는게 있는데요.
    일러 화면 상단의 맨 좌측, 파일 메뉴에서 가져오기 혹은 import를 선택 후
    사진을 고르면 되긴 됩니다.
    그러나 요게 Embed라는걸 누르느냐 아니느냐, 포함시키느냐 마느냐에 따라,

    사진이 로딩이 안 될 수도 있습니다.
    엠베디드, 포함시킨다는 것은 사진 위의 엑박 표시를 없애주면서

    일러파일 하나 속에 사진을 같이 저장한다는 의미죠.

ⓒ 저는 요걸 많이 합니다. 캡쳐도구를 그래서 준비했습니다.

    컴 카톡을 열어서 나 자신과의 대화창을 눌러 사진을 보이게 합니다.
    그걸 컴퓨터 캡쳐도구로 캡쳐한 후에 일러에 가서 붙여넣기 하는겁니다.

    캡쳐도구로 캡쳐할 부분 뜬 후 Ctrl+V로 붙이면 간단. 훌륭하죠.

일단은 사진 찍은걸 내 폰의 갤러리로 가서 공유 표시 눌러줘야죠.

그러구서 어디로 공유하겠느냐... 나오면 카카오톡 아이콘이 나올 때까지 기다려보셔요.

카카오톡 아이콘을 선택하면, 내 카톡 친구 목록이 뜹니다.
그 사람들 말고... 나 자신의 계정이 보이실거예요. 보낸다고 하시고 확인하시면

내 폰 카톡과 컴 카톡이 까꿍소리 냅니다.

컴퓨터 버전 카톡을 열어서 내 프로필 냅다 더블 클릭. 나 자신과의 대화창 여셨죠?
거기서 좀 전에 폰으로 보냈던 그 사진을 터치하세요. 사진만 보는 창이 따로 크게 나올거예요.
전 그 순간에 캡쳐 도구로 원하는 부분을 캡쳐해서 일러스트레이터에 붙여넣기를 한답니다.

이게 제일 편해요.

요렇게 사진 불어들이신 후에 아래 사진처럼 '만든 후 확장'을 눌러주심 일단 반은 성공.
저걸 누르기 전에는 한 장의 통짜 사진인거지만, 만든 후 확장을 누르면

사진의 일부 색만 추출하면서 고게 벡터가 되죠.
벡터 그래픽이라는게 바로 인쇄소에서 쓰는 인쇄용 파일인 일러같은 형태의 파일입니다.

요 개념은 패스하셔도 되요. 

↓만약에 일러 영문판이시면 요 그림같은걸 오브젝트(Object) 메뉴에서 소급해서 들어가세요.

회사는 일러 CS6 한글판이고, 집에서는 CS6 영문판을 사용중입니다. 저는 원래 영문판이 익숙한 편이구요.

이미지 트레이스(Image Trace), 거기서 메이크 앤드 익스팬드(Make and Expand)가
바로 윗 그림인 한글판하고 똑같은거라고 보심 되겠습니다.

---

3) '만든 후 확장'을 눌렀다면, 그 뒤에 패스파인더(Pathfinder)에서 요걸 누르세요.

네, 저거요. 빨강줄 쳐둔거. 한 번만 누르고 땡 마시고
두 번 세 번 정도 마구 눌러주셔서 확실하게 칼로 금 그어놔야 잘 떨어질 수 있습니다.
요거 요거 아주 대박이죠.

영문판 사용자라면 패스파인더(Pathfinder) 팔레트에서
역시 다 쪼개진 그림, 표시해 둔 그것에 슬 마우스 올리면 저런 풍선 도움말이 나오는데
'디바이드(Divide)'라는 아이콘을 눌러주면 칼집을 내서 쏵 갈라주겠다는 의미가 되니,
사용하시는 일러스트레이터에서 영문판 한글판같은 언어를 보실게 아니라,

저 색칠한 그림 형태를 보시면 되겠습니다.

뭔 소리냐구요? 네... 저거를 흑색 백색을 따로따로 칼집 넣어준다의 개념입니다.
그래야 검정거만 남기고 흰거는 없애서, 내 글씨만 딱 발려지는게 되니까요.

이게 원래 일러의 내장된 기능이지만, 만능이 아닙니다.

칼라풀한거 안 되고 밝고 어두움만 분간합니다.
빨강이지만 어두운데 그거랑 검정 있다? 다르게 인식 못하고 그냥 통짜로 따낼겁니다 아마도.

해 보심 알아요.
구찮을 때, 캘리그라피는 붓의 궤적이 나오다보니 펜툴을 아주 잘 다루면 몰라도

선 따는게 쉽진 않거든요. 바로 그럴 때를 위한 기능입니다만,

후처리... 마지막 공정을 잘 해야만 제대로 나와줍니다.
칼집만 내어줬다고 똑 떨어지지 않다보니

'느덜은 그룹 짓지들 말여.' 하고 Ctrl+Shift+G를 눌러줍니다.
저거는 그룹을 해제한다는 것의 단축키 입니다.

쉬프트가 빠지면 Ctrl+G가 그룹으로 묶는다는 단축키구요.
종종 제가 단축키들을 이렇게 적을겁니다.

이런건 그냥 자주 쓰셔서 저절로 익혀지시면 좋답니다.
그래픽 프로그램이던 워드 프로그램이던 컴퓨터는 결국 단축키 사용이거든요.

어느걸 어떻게 금방 꺼내 쓰느냐...
기왕이면 자주 나오는건, 정말 이 프로그램 배우셔서 뭐 하실 생각이시면 외우시라고 해 두겠습니다.

자... 글자 주변에 파란 점점이가 있다는건 펜툴로 궤적을 따낸거같은... 딱 일러스러워진거죠.
이걸 뼈대만 나오게해서 확인해 봐도 마찬가지 입니다. '만든 후 확장'을 누르는 순간 일어난 마법이랄까요.

이렇게 뼈대만 나오게 확인하는 것은 '보기' 메뉴에 사실은 있습니다.

맨 위의 [보기(V)] 누르시면 '윤곽선 보기' 라는 것이 나오는데,

저는 이 단축키를 외우고서 수시로 점검시에 습관처럼 누릅니다.
Ctrl+Y를 누르시면 저런 허연색, 딱 캐드화면스런 일정한 선만 나오는데,
한 번 더 Ctrl+Y를 하면 색깔도 선 굵기도 다 다르게 살아있는 원래 그림 세계가 됩니다.
확인을 하는 습관은 중요합니다. 파일을 인쇄소 보내기 전에, 실수한 것이 없는지는 봐야하니 말입니다.

---

4) 툴박스의 하얀 선택툴로, 바깥 사진 외곽만 택해서 지워본다.

네, 하얀걸로 저 부분만 찍어서 Del키 눌러 여우같이 제거해 줍니다.

그러면 더러 미음이나 이응 속의 내부가 안 따지고 남은 경우가 있어요.

저도 늘상 그러거든요. 예를 들면 '인'이라는 글자 이응이 안 따졌다?
그 '인' 글자를 다 검정 화살표툴로 선택 후,

패스파인더의 아까 그 나누기를 몇 번 쿡쿡쿡 눌러보세요.
잘 보시면 그걸 누를 때 사진이었던 이것이 미묘하게 변하는걸 보실 수 있는데

고럴 때 이응 속의 하양을 이번엔 이 사진처럼 흰색 선택툴로 찍어보세요.

고것만 잡힌다면 찍으시고 Del 키. 그럼 간단하죠.

---

사실은 말로 길게 풀어놔서 그렇지, 해 보면 순식간에 되는 기능이긴 합니다.
CS3이나 CS5에도 저런 기능 있느냐구요? 그럼요, 그냥 일러10에서도 했었다고 했잖습니까.

다는 아니더라도 밝고 어두움의 차이가 큰 명도대비가 있는 그림은 간단히 이런게 추출이 됩니다.
일러로 만들어둔건 그냥 ai 파일로 저장하시고, 포토샵에서 새 파일 여신 후에
일러에서 만든 내 글자들을 검은 화살표로 선택하시고 Ctrl+C로 복사 명령 주신 후에
포토샵의 새 도화지에서 Ctrl+V를 해 보세요. 들어옵니다 당연히.
고급개체로 할거냐, 픽셀로 할거냐... 저는 항상 픽셀로 합니다. 요게 가장 나아요.
그러구서 기본 배경인 하얀색을 포토샵의 레이어 팔레트 눈을 꺼주세요. 그러고서 Ctrl+Shift+S로
다른 이름 저장(= Save As) 하시게 되면 PNG 파일로도 배경 없이 투명한 형태로도 만들 수 있습니다.


요렇게 간략하게 만든 캘리그라피로 더러는 현수막도 만들구요, 아님... 포장 디자인에도 쓰구요,
그리고 저만의 클립아트랄까, 자그마한 그런 이미지도 만들 수 있습니다.

[Sesshou]

'신협구포국수'는 기존 '구포국수'라는 상품을 신협 폐쇄몰인 씨유몰이라는데서
자체 상품인 PB상품으로 만들어 납품해 달라는 오더가 있었습니다.
'신협'이라는 글씨를 기존의 '구포국수' 캘리그라피와 어울리게 캘리로 써야되는겁니다.

요 상품은 이 카페 왔던 당시 다녔다는 그 제 뒤통수 쳤었단 큰 유통회사에서 만들었습니다.
지금도 나가는지는 제가 신협몰 가입을 안 해서 모릅니다만 여튼 상품 인쇄에도 괜찮죠.
그리고 저거는 붓펜이 아니라, 벼루 가져와서 먹 갈고 직접 붓으로 누런 크라프트지로 된
그런 연습장에 무수히 그리고 썼던 글자 중에서 가장 나은걸 직원들에게도 묻고해서
저 글자들을 골라 조합시킨겁니다. 붓이라서 갈라지는 그런 거친 선이 붓글씨답게 있죠.

현수막은 그냥 붓펜으로 한 겁니다. 차이가 있죠? 가감하시면 되겠습니다.
글씨라고 생각하면 나는 악필이니 뭐니... 됐구요. 그냥 잘 그려본다고 생각하고
먹물 묻혀서 신나게 찍찍 그리면 됩니다.

왜 서류봉트스런 크라프트지 연습장이냐? 아는 서예가가 초심자들이 붓글씨 연습할 때
번지는 화선지보다는 스스로의 글씨를 보기가 좋을거라고 하셔서 써 봤더니 좋더군요.
다이소나 문방구에 가서 보시면 저런거 팔아요.

[정광수]

우와...좋은 정보 정말 감사합니다. ^^