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

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

  • 김다혜

    도식화에 색을 입히려고 하는데요……
    막 페인트통으로 색을 넣으니까…..
    색이 온전하게 다 안들어가고 막
    깨져서 들어가는데 …
    이건 어떻게 고처야 하나요?

  • http://wireframe.tistory.com sooopd

    //김다혜
    깨져서 들어간다고 하시는게 아무래도 몸판과 소매가 한개 오브젝트로 만들어지지 않았거나, 좌우 대칭으로 만든 판이 제대로 이어지지 않아서 중간에 세모형태로 빈곳이 생기는 것을 말씀하시는 거 같습니다.

    강좌를 보시고 찬찬히 따라해보시고 그래도 안되시면 말씀하시는 안되는 부분을 캡쳐하셔서 메일로 보내주시면 회신 드릴게요.

    메일은 sooopd골뱅이쥐메일닷컴으로 보내주세요.

  • 와우

    정말 재밋고 유용해요!
    감사해요!

    • http://sooop.wordpress.com sooopd

      >> 와우 : 도움이 되셨다니 제가 감사하지요~

  • 김민경

    사진 한장 퍼가요

    • http://sooop.wordpress.com sooopd

      퍼가지 마셨으면 하는데요… 이 블로그의 모든 컨텐트는 배타적인 저작권법의 보호를 받습니다.

  • 박수정

    전 한고등학교의 학생인데요 이도식화를연습용으로 쓸려고합니다
    써도 괜찮겠습니까?

    • http://sooop.wordpress.com sooopd

      개인 참고용으로 사용하시는 것은 무관합니다만, 다른 곳에 당 포스팅의 내용의 일부 혹은 전체를 그대로 혹은 수정하여 게시하는 것은 안됩니다. 다만, 여기서 그린 기본 도식화 폼의 ai 파일이 필요하시다면 별도로 보내드릴 수는 있습니다.

  • http://dd hun

    저 연습을 하는데 너무어렵네요 일러파일좀 보내주실수있을까요?

    • http://sooop.wordpress.com sooopd

      죄송해요~ 저도 요즘은 작업을 안해서 파일이 없네요;;

  • 박미연

    일러로 도식화 그릴일이 생겼는데 정말 유용한 정보 감사합니다~
    근데 join할때 첨엔 안되더라구요~일러프로그램상의 에러일수도 있다그래서
    체험판으로 다시 받아서 해보니 어깨점부분은잘 되는데 뾰족한 겨드랑이 부분은 왜
    안되는지…ㅜㅜ주위에 물어볼 사람도 없고…참 답답하네요
    조인이 안되면 저위에 김다혜님 말씀처럼 그렇게 되던데 말이죠~
    바쁘실테지만 답변 주시면 감사하겠습니다 ㅜㅜ

    아!그리고 혹시 도식화그린뒤 색상까지 입히는 작업 강좌는 하실생각 없으신지?ㅎㅎ
    너무 따라하기 쉽게 올려 주셔서 작은 저의 바램이었습니다 ㅎㅎ…(초짜라…)

    • 박미연

      앗…죄송합니다…
      한참 찾아보니 컬러입히는것도 있네요…^^;;
      숙달될때까지 연습해봐야 겠네요~막힘이 없어야 할텐데 말이죠…ㅡㅡ;;

      • http://sooop.wordpress.com sooopd

        제 블로그 검색창에서 ‘일러스트레이터’로 검색해보시면 관련 글들만 보이게 됩니다. 검색 기능이 형편 없는 건 좀 죄송스럽네요.

    • http://sooop.wordpress.com sooopd

      실수로 클릭하거나 복사/붙이기, 이동하기 등의 작업에서 end point 가 떨어져나가서 실제 join 하려는 지점의 점이 3개인 경우가 있을 수 있습니다. arrow 툴로 점을 하나씩 끌어 옮기면서 찾아보시면 될 듯 하네요. 점이 2개인 경우에만 join 이 됩니다.

      • 박미연

        이렇게 빨리 답해주셔서 감사합니다^^
        안그래도 이유가있을꺼 같아서 이리저리 혼자 쇼하다 해냈네요~
        일러는 거의 모른다고 할 수준인데 앞으로 의류 신발 가방 모두
        도식화 작업을 일러로 해야될듯해서 앞이 캄캄합니다…휴~
        가방이나 신발은 도식화 자체를 전혀 그려본적이 없어 감이안옴..ㅋ
        아무튼 이런 강좌를 올려주신 것만으로도 너무 감사합니다.(굽신~)
        캄캄한 저에게 한줄기 빛이 내리는 듯한!!

        아~혹시 죄송한 말씀이지만 제일밑에 청자켓으로 보이는 도식화
        이미지를 혹시 메일로 보내주실 수 있나요? 좀 복잡한걸 연습해
        보려는데 가진 도식화도 없고 떠오르질 않아서요..실력이 워낙
        없는지라ㅜㅜ 불러와서 몇번이고 따라해 보려구용~

        • http://sooop.wordpress.com sooopd

          자켓 도식화 작업은 제가 했지만, 원 디자인은 제 디자인이 아니라 도식화 파일을 드리는 것은 안될 듯 합니다. 강좌 중에서 제가 언급한 부분도 있지만, 일러로 도식화를 그리는 것은 디자이너의 스킬의 일부입니다. 제품을 정확하게 묘사하기 위해서는 실물을 보고 연습하시는 걸 추천해 드리고 싶네요.

        • http://sooop.wordpress.com sooopd

          그런데, 혹시 남기신 성함이 실명이신가요? 왠지 제가 아는 분 이름과 같아서요. 아마 그 분도 의류학과 출신이라 디자인 일 하실 거 같네요.

        • 박미연

          네~실물보고 연습해 봐야겠어요~
          실명이긴 한데 아시는분이 아닐지도^^;;
          유용한 정보 감사합니다.
          간혹 하다가 막히면 제가 귀찮게 해드릴지도 모르겠네요 ㅎㅎ…

        • http://sooop.wordpress.com sooopd

          네 질문은 항상 환영입지요.

  • shs2u

    안녕하세요! 이후의 강좌가 보이질 않네요 ㅠㅠ
    면접에서 일러스트 시험을 본다그래서 연습중인데…
    혹시 이젠 올리지 않으시는 건가요?

    • http://soooprmx.tistory.como sooopd

      추가적인 강좌는 개인적인 시간이 나는 대로 올려보려고 하는데 쉽지가 않네요. 올려진 강좌로 도식화 그리는 요령은 충분히 숙지할 수 있을 듯 합니다. 미리 밝혔듯이 본 강좌는 ‘도식화를 그릴 줄 알고 일러스트레이터도 기본적으로 사용할 수 있는’ 사람을 대상으로 합니다. 일러스트 사용법 관련한 강좌는 계획이 없습니다.

  • http://twitter.com/markdashi jinwoo jeong

    안녕하세요,., 취직준비중에 일러스트 능력을 올려야해서 공부중에 막히는 부분이 많았는데 많은 도움 받아갑니다.. 또 추가적인 강좌 빨리 보고 싶네요,.

    파이팅,~

    • http://soooprmx.com/wp sooop

      죄송하지만 추가적인 강좌는 더 이상 연재가 힘들 듯 합니다. 거의 2~3년 전에 손을 뗀 내용이라. 다만, 다른 궁금한 점이 있으면 댓글이나 메일로 제게 문의 주시면 답변 드릴 수 있는데까지는 도와드리도록 하겠습니다. 취업 준비 잘하세요. 파이팅!

  • Dmsthfdld

    저기..펜툴로 그리다가 아무 설정도 안했는데 갑자기 안먹히는건 왜그러는거죠??뭔가 락이 걸린 것 같은데 도무지 모르겠어요.펜툴로 설정하고 그림을 그리려고 클릭을 하면 경고음만 나네요…왜그런걸까요…

    • http://soooprmx.com/wp sooop

      레이어가 잠겼거나, 포커스된 레이어나 패스가 잠겨있지 않은 지 확인해보세요~

  • 김민준

    티셔츠 목에 시보리 느낌 줄라고 하면 어떻게 해야되요 ? 그리고 고무줄 바지 느낌 낼라고 고무줄 주름 느낌 내고싶은데 브러쉬툴로 만드는 법 좀 가르쳐주실수있나요 ? 둘다 시보리와 그 고무줄 바지 주름

    • http://soooprmx.com/wp sooop

      이 블로그에서 일러스트레이터로 검색해보면 관련 글이 있을 수 있습니다. 주름 느낌은 연필툴로 스케치한 다음, 브러시 스트로크를 변경해주면 되는데, 이 부분은 인터넷을 검색해서 찾아보세요.

  • 오은진

    너무 필요한 일러 강좌 여기서 잘 배우고 있습니다. 감사드려요 ^^
    질문있습니다! 뒷면 포개는 작업 들어가는 부분에서 ‘가장 두껍게 그려진 외곽선 패스 두개’가 뭔지 몰라서 두꺼운 라인을 모두 선택했습다. 이 상태에서 Ctrl+C – Ctrl+F – Shift+X를 따라 하니 보여주시는 샘플처럼 전체가 까맣게 변하는게 아니라, 외곽 라인 따라서만 까맣게 면하고 중간에는 다이아몬드 꼴로 뻥 뚤리게 나와요. 중앙이 색칠이 안되요..;; 어떡하죠??
    참, 저는 CS6를 쓰고 있습니다.

    • http://soooprmx.com/wp sooop

      보통 이런 경우는 최외곽선이 1개 path로 join 되어 있지 않은 경우에 많이 발생합니다. 아마 다이아몬드로 뻥 뚤려서 나온다는 걸 보면 중앙 부분 (뒷목, 아래쪽 헴라인의 가운데) 부분의 두 군데가 각각 왼쪽 패스와 오른쪽 패스로 되어 있는데 이게 연결이 안되어 있다고 보시면 됩니다.

      • 오은진

        답변 감사드려요~
        그럼 최외곽선이 하나의 path로 전체 연결되어야 한다는 건가요??
        제건 다 떨어져 있는데..;; 어떻게 연결 시킬 수 있을까요?

        • http://soooprmx.com/wp sooop

          앞편부터 차근차근 따라하시면서 그려보세요. 1편 글에 전부 설명되어 있습니다.

        • 오은진

          알겠습니다. 다시 차근차근 볼게요~감사합니다~!!