스케치로 아이콘 그리기
스케치로 그리니까 참 깔끔하죠?
본문은 이끼마우스님(https://brunch.co.kr/@ultra0034)에게 배운 내용을 토대로 작성되었습니다.
0. 도입
어느땐가부터 스케치라는 프로그램이 혜성같이 등장하면서... 줄곧 일러스트레이터에서 아이콘을 그려왔던 저도 화면뿐만 아니라 아이콘도 스케치에서 그리는 편이 보다 정확한 아이콘으로 표현되지 않을까란 고민을 줄곧 해왔었습니다. 하지만 바쁘고, 일은 자꾸 밀려오고, 아이콘은 자꾸 만들어야되고, 그러는 와중에 스타일도 맞춰야 해서 여간 쉽지가 않았어요. 에이, 그냥 일러스트레이터에서 만들고 끌어와버렷..! 패스파인더..! 하면서 익숙함의 노예가 되었죠.
하지만 편하기만 했던 일러스트레이터에서, 아이콘을 만들어 스케치로 가져오면 꼭 이놈의 미묘한 소숫점이 생기고만 마는 것입니다. 사실 UI 표현에 있어서는 별 문제가 되진 않는 것 같지만. 어쨋든 정수로 바로 잡아야 할 것만 같고, 이 미묘한 소숫점이 거슬리기도 하고, 어쨋든 언젠가는 스케치에서 아이콘을 만들어야 할 것만 같아 자문을 구하게 됐습니다. 스케치에서 아이콘을 그리고 싶은데, 어떻게 하면 '잘' 그릴 수 있을까요?
1. 셋팅
1) 상단 툴바에서 -> 우측마우스를 눌러 Customize Toolbar 에 들어갑니다.
본인이 자주 쓰는 것들을 툴바버튼 쪽으로 끌어다 놓으면 끝.
아이콘제작에 있어서, 저는 아래 버튼들을 자주 사용하게 되어 추가로 툴바로 끌어다 놓았습니다.
도형 툴 관련 - Triangle - 삼각형 / Polygon - 다각형
도형 편집 툴 관련 - Outlines - 선을 면으로 바꿔줌 / Flatten - 도형 Union 혹은 Subtract 등 도형과 도형들을 편집 한 후 형을 완전히 합쳐줌 / Scissors - 가위,패스를 자를때 유용 / Scale - 오브젝트를 다 그린 후 크기조정은 무조건 Scale에서.
아트보드 관련 - Round To Pixel - 픽셀 소숫점으로 위치한 것들을 정수위치로 옮겨줌 / Show Pixels - 아이콘을 제작한 뒤 픽셀이었을 때 어떤부분이 안티-엘리언스 되는지 보여줌 / Show Grid - 아트보드 내 그리드가 어떻게 나오는지 보여줌.
2) 아트보드 내 그리드 셋팅을 위해
상단 툴바에서 '>>' 버튼을 클릭 -> View -> Grid Settings 에 들어가
Grid Block Size : 1px
Thick lines every : 1 blocks 로 바꿔준 뒤,
Show Grid버튼을 눌러 그리드를 활성화 시킨 상태에서 작업합니다.
아이콘의 정확한 한픽셀 한픽셀을 위해서요.
2. 도형의 조합 한끗차이
1) 일러스트레이터와 공통점
기본적인 도형의 편집은 일러스트레이터랑 비슷해서
사각형과 원을 그린 후 두 오브젝트를 선택해 Subtract 해주면 도형이 구멍이 뚫린 것을 연출해 줄 수 있습니다. 그리고 도형과 도형들(카메라의 경우 전체를 감싸는 프레임과 상단 프레임)을 Union 해주면 요소가 합쳐져 보인 것을 확인할 수 있어요.
2) 일러스트레이터와 차이점
- 오브젝트들을 Subtract 해주거나 Union 해주더라도 Flatten 해주지 않으면 도형 요소 내 '순서'나 '설정값'(Union / Subtract / Intersect / Difference) 수정이 가능합니다.
- 또한 Flatten을 하게되면 회전값과 플립상태를 무력화 해주게 됩니다.
예1) Flatten 하기전 / 한 후
- 오브젝트들의 정확한 픽셀 위치값을 잡아주기 위해 더미오브젝트의 사용이 필요할 수 있습니다.
예2) 정확한 위치값을 위한 더미오브젝트
- 또한 안경 아이콘의 경우 뚫린 원의 위치가 프레임오브젝트보다 아래에 위치하게 된다면 아래와 같은 오류가 발생 할 수 있습니다. 오브젝트들을 Union 했을 때 이러한 오류가 발생한다면 오브젝트 세부사항을 열어 오브젝트들의 순서 및 설정값을 수정해야하는 일이 있을 수 있습니다.
예3) Union 했더니 오류가 발생, 이럴 땐 오브젝트 순서를 편집하여야 해야한다.
3. 'Center'로 바꾸어야 할 때.
1) 일러스트레이터와 공통점
Inline / Center / Outline 이었을 때 라운딩 처리하는 방식은 동일합니다.
(Inline 이었을 때 외부내부 라운딩 없음, Center 였을 때 외부 및 라인자체 라운딩 적용)
2) 일러스트레이터와 차이점
- border로 아이콘을 그려야 할 때면 저도 Center로 표현했을 때 선이 2/1. 즉 0.5 두께로 처리되는 것을 피하기 위해 Inline 으로만 제작을 했었습니다. 하지만 아이콘을 그릴 때의 경우엔 Center로 하느냐, Inline으로 하느냐에 따라 표현방법의 차이뿐만 아니라 오브젝트 자체에 오류가 나고 안나고의 차이까지 있었습니다.
예) border를 inline으로 해준 뒤
Scissors로 윗면을 자르고 Outlines(면처리) 해줬더니 아래와 같이 오류가 남.
- 또한 이렇게 border 값을 Center로 표현해서 아이콘을 만들었을 경우, Outlines을 해버리면 위치값(x,y)좌표가 소숫점으로 떨어질 것입니다. 이것을 정수로 수정하는것이 마무리입니다.
예) border의 width 값이 1이고 Center인 경우 -> 위치값을 정수로 수정하여야 함.
border - Center 처리
outline 하여 면으로 처리해주었더니 위치값이 소숫점으로 변하였다.
위치값 소숫점을 정수로 수정해주어야 함!4. Group 처리.
마무리했을 때 위치값 및 오브젝트의 width 나 height 값이 정수로 표현되지 않는 아이콘은 Group으로 마무리하여야 합니다. 그러지 않으면 추후 아이콘을 움직였을 때 위치값이 정수로 표현되지 않거나 Scale 했을 때도 정수로 마무리 되지 않습니다.
5. 응용해보기
위에 설명한 것을 딱지아이콘을 예시로 알려드리겠습니다.
1) 사각형 오브젝트를 두개그린후 Union 하고, 가운데 원을 그려 Subtract처리 해줍니다.
2) border - inline 로 바꿔주고 Outline 처리 해줍니다.
3) 아래딱지를 위한 사각형을 그린 후, Shift를 누른 상태에서 아랫면에 중앙포인트를 넣어줍니다.
4) 중앙포인트를 일정포인트 위로 올리고,
마찬가지로 border - Center로 바꿔준 후, Scissors(가위)로 윗면을 잘라주고 Outline 처리 해줍니다.
5) 아래 오브젝트를 정수에 맞게 조정합니다.
6) 두 오브젝트를 Union 해준 후 Flatten, 위치값이나 너비,높이 값이 소숫점이라면 Group처리(command+G)까지 해주면 완료입니다.
6. Show Pixels
어쨋든 표현되는 값은 픽셀값이므로, 툴바의 Show Pixels을 눌러 픽셀값이었을때 깔끔하게 떨어지는 것 까지 확인하면 완벽!
다양한 아이콘들을 세부적으로 파서 연구해보며 그려보면
스케치에서도 일러스트레이터 못지않은, 정확한 수치의 아이콘을 그릴 수 있을 것 같습니다! :)
+ 181212 '무한루프'아이콘을 그리는 과정을 덧붙입니다.
번외) 무한루프 아이콘 그리기.
1. Ractangle 과 Oval 도형을 이용해 아래와 같은 쉐잎을 그려준 후 Union 해줍니다.
2. Border 를 Center로 지정, Width는 4로 지정하여 넣어줍니다.
3. 회전각도에 -45를 지정 한 후 Scissors 툴을 이용하여 비워줘야 할 line을 지워줍니다.
4. 아래같은 모양이 되었으면 Edge를 Round로 지정해줍니다.
5. 쉐잎을 복사한 후 Horizontal / Vertical 회전해줍니다.
6. 라인이 붙을 수 있도록 위치를 맞춰줍니다.
7. Border를 Fill 로 바꾸기위해 선택한 후 Outlines 해주고
Union -> Flatten 하여 마무리합니다.
8. 위치값이 소숫점으로 맞지 않는 부분을 정리하여 주면 완성입니다.
+ 181224 클립아이콘 그리는 과정을 덧붙입니다.
번외) 클립아이콘 그리기
1. 각각 다른 크기의 Ractangle 을 그린 후 둥근 사각형이 될 수 있도록 Radius 값을 줍니다.
2. Border 로 전환해줍니다.
3. 옵션값을 Center 로 바꿔줍니다. 저는 width값을 2로 지정해줬습니다.
4. Scissor를 이용하여 가장 큰 도형의 상단 border를 지워줍니다.
5. 중간크기의 도형 아래 border를 지워줍니다.
6. 마지막으로 제일 작은 도형의 상단 border를 지워줍니다.
7. Ends값을 round로 바꿔줍니다.
8. Union > Flatten 하면 마무리됩니다.
감사합니다. :)
