피그마 아이콘 만들기 | Boolean·Pen Tool로 직접 제작하기 - 피그마 강좌 2-4 — Transcript

Full transcript

1. 0:00UI를 만들다 보면 화살표나 플러스
2. 0:03체크처럼 작은 아이콘이 계속
3. 0:05필요하죠. 복잡한 일러스트라면 별도의
4. 0:08벡터 2를 사용하는게 좋겠지만
5. 0:10기본적인 UI 아이콘은 피그마
6. 0:12안에서도 충분히 만들 수가 있어요.
7. 0:14핵심은 여러 도형을 합치고 빼고
8. 0:16겹치는 부분만 남기는 이런 패스파인더
9. 0:19기능을 사용할 건데요. 여기에네
10. 0:21가지를 기준으로 먼저 한번 만들어
11. 0:23보겠습니다. 여기에 있는 각각의 도형
12. 0:25있죠? 세 개의 도형을 하나로 합칠
13. 0:27수가 있는데요. 동시에 잡아 준
14. 0:29상태에서 오른쪽에 쓰셀렉티드라고 되어
15. 0:33있죠. 여기이 도형 아이콘이
16. 0:34있습니다.이 오른쪽에 있는 화살표를
17. 0:36클릭하면 다섯 가지에 대한 기능을
18. 0:39알려 줘요.이 기능들을 오늘 살펴볼
19. 0:41건데 가장 기본적인게 유니온이에요.
20. 0:43합치는 거죠. 여기를 클릭해 보면
21. 0:46도형이 하나로 합쳐집니다. 이렇게
22. 0:49합쳤을 때 왼쪽에 레이어를 한번
23. 0:51볼게요. 그러면 도형이 하나의
24. 0:53레이어로 합쳐져 있지만 왼쪽에
25. 0:55화살표가 있습니다. 여기 눌러 보면
26. 0:57아래에 하나씩 있죠? 합쳐진
27. 1:00오브젝트이지만 안쪽에 있는 요소들을
28. 1:02잡고 하나씩 이렇게 이동을 할 수가
29. 1:05있어요. 동시에 잡아서 정렬 기능
30. 1:07있죠?
31. 1:09같은 간격으로 정렬하는 기능도 제공을
32. 1:11하고 있습니다. 그리고 더 이상의
33. 1:14수정이 없을 것 같다라고 했을 때는
34. 1:16우측 상단에서 플래튼 있죠? 다섯
35. 1:19번째 있는이 플래튼을 적용해 주면 더
36. 1:22이상의 화살표가 없이 그냥 하나의
37. 1:23도형으로 이렇게 합쳐져 있습니다.
38. 1:26이런 기능을 통해서 아이콘을 만드는
39. 1:27건데요. 두 번째도 한번 해 볼게요.
40. 1:29여기에 있는이 체크 아이콘 같은 거랑
41. 1:32뒤에 있는 말풍선 같은 화살표 있죠?
42. 1:35이거 두 개에 대해서 선택을 해 준
43. 1:37상태에서 이번에도 오른쪽에 클릭을 해
44. 1:40줍니다. 그다음은 서트랙트인데요.
45. 1:42위쪽 도형으로 아래쪽 도형을 빼는
46. 1:44기능이에요. 한번 눌러 보면 위에
47. 1:46있던 체크를 기준으로 아래 있는
48. 1:49도형을 빼는 부분입니다. 이런 체크
49. 1:51아이콘이 들어간 말풍선 아이콘이
50. 1:53만들어지는 거예요. 여기에서도 플랫
51. 1:55처리를 안 하면 각각 조정할 수가
52. 1:57있어요. 크기를 더 줄이거나 키우거나
53. 2:02아니면 배치를 좀 조정하고 더블
54. 2:04클릭하면 에디트 모드가 들어가지죠.
55. 2:08이렇게 키보드를 통해서 체크를 좀 더
56. 2:10길게 하고 싶다 했을 때 이런 조정도
57. 2:13가능합니다. 그다음은 눈 아이콘 같은
58. 2:16걸 만들 건데요. 여기에 세 개의
59. 2:18도형이 있죠. 위에 아래 그리고
60. 2:20가운데. 가운데가 이제 눈동자에 대한
61. 2:22부분이고요. 위아래 두 개를 선택한
62. 2:24상태에서 이번에도 세 번째
63. 2:27인터섹트라는 부분을 클릭을 해
64. 2:29줄게요. 그러면 서로 겹치는 그
65. 2:31교집합 부분 있죠? 그 부분만 남기는
66. 2:34기능이에요. 그래서 이런 눈 같은
67. 2:36모양이 만들어지죠. 조금 전에 우리가
68. 2:38썼던 것처럼 가운데 있는 것까지
69. 2:40클릭한 상태에서 다시 한번 서트랙트를
70. 2:43하면 안쪽이 파인 이런 눈 아이콘이
71. 2:45되겠죠. 지금은 필로 되어 있지만
72. 2:47휠을 끄고 스트로크를 하게 되면 이런
73. 2:50식의 눈동자 아이콘을 만들 수가
74. 2:52있습니다. 이번에는 위에 있는 도형과
75. 2:55뒤에 있는 도형 그리고 가운데 있는
76. 2:57도형 이렇게 총 세 개가 있는데요.
77. 2:59세 가지를 동시에 잡고네 번째에 있는
78. 3:02익스클루드를 할 건데요. 서로 겹친
79. 3:04부분을 제외한 나머지만 남기는
80. 3:06거예요. 겹치는 교집판만 뺀다라는
81. 3:09건데 지금 위에 있는 요소와 아래
82. 3:11있는 요소는 겹치는 부분이 없잖아요.
83. 3:14그래서이 둘은 겹친 부분이 빠지는게
84. 3:16없기 때문에 유니온이랑 동일하게
85. 3:18적용이 될 거고요.이 아래 요소는
86. 3:20뒤에 있는 요소와 겹치기 때문에
87. 3:22빠지게 되겠죠. 그래서 동시에 잡은
88. 3:24상태에서 익스클l루를 누르면 이런
89. 3:27카메라 아이콘이 완성이 되는 겁니다.
90. 3:29뭐 이런 기능들의 이름을 외우기보다는
91. 3:31실제 도형을 여러분이 겹쳐 놓고
92. 3:33하나씩 눌러 보면서 차이를 이해를
93. 3:35하시면서 아 이렇게 쓸 수 있구나라고
94. 3:38익히는게 중요합니다. 여기에 세
95. 3:40가지를 제가 예시로 뒀는데 한번
96. 3:42만들어 보면 좋을 거 같아요. 크게
97. 3:44어렵진 않습니다. 도형을 5 눌러서
98. 3:47동그라미를 만들고요. 이때 필이
99. 3:49아니라 스트로크에다가
100. 3:52값을 주면 되겠죠. L 눌러서 쭉
101. 3:54드래그. 그리고이 두 가지 선택한
102. 3:56상태에서 오른쪽에서 유니온을 하면
103. 3:59합쳐집니다. 각각의 두께는 선택을 한
104. 4:03상태에서 여기서 조정을 하시면
105. 4:05되겠죠. 이렇게. 그다음은 이런
106. 4:07메일에다가 별이 있는 걸 한번 만들어
107. 4:09볼 건데요. 생각보다 어렵지 않아요.
108. 4:12네모 눌러서 그려 줍니다. 여기에서
109. 4:14테두리의 마우스를 가져다 대면
110. 4:16레디우스가 0이라고 되어 있죠.
111. 4:18오른쪽에도 코너 레디우스라는 값을
112. 4:20조정하실 수 있고 여기서도 직접
113. 4:22클릭해서 드래그하실 수도 있어요.
114. 4:24저는 2로 해 놓고 여기도 필을
115. 4:27스트로크로 바꿔 볼게요. 이때
116. 4:29포지션이 인사이드니까 센터로 해서
117. 4:32한번 해 보겠습니다. 그다음은 라인을
118. 4:35가운데로 한번 쭉 그려 줄게요. 뭐
119. 4:37펜툴로 해도 되지만 라인으로 해 준
120. 4:39다음에 더블 클릭하면 딱 정 가운데를
121. 4:42찍을 수가 있게 돼요. 클릭하면 펜이
122. 4:45추가가 됐죠. 선택한 상태에서
123. 4:47키보드로 아래로 내려보면 이렇게
124. 4:49아래로 꺾인게 보입니다. 배치만 좀
125. 4:52조정을 해 보면 되겠죠? 그러면 여기
126. 4:54위에처럼 이만큼의 여백을 먼저 둬야
127. 4:57되겠죠? 그럴 때도 더블 클릭하면
128. 4:59편집이 가능하거든요. 이때 기준이
129. 5:01되는 부분을 누르고 여기도 플러스
130. 5:03누르면 각각의 그 점이 추가가 됐죠.
131. 5:07외곽 부분을 선택한 상태에서 딜리트를
132. 5:09눌러 주면 이만큼이 사라집니다.
133. 5:12그래서 ESC 눌러서 편집 모드를
134. 5:14나가 주면 이런 모양이 만들어지죠.
135. 5:16마지막으로는 별에 대한 도형을 한번
136. 5:18만들어 볼 거예요. 스타 눌러서 클릭
137. 5:21드래그 해서 여기서도 필 대신에
138. 5:23스트로크를 하면 되겠죠. 위에 있는
139. 5:25도형과 좀 다른 구간이 이런 모양이
140. 5:28좀 다르잖아요. 별 같은 경우는 여기
141. 5:31모양을 바꿀 수 있었던 거
142. 5:32기억하시죠? 여기 안쪽에서도 레이시오
143. 5:35값을 조정하면서 좀 부드러워 보이는
144. 5:37별로 만들 수도 있어요. 그리고
145. 5:39조정을 한 다음에 크기를 살짝만
146. 5:42조정을 해 볼게요. 됐네요. 그리고이
147. 5:44전체적으로 선택을 한 상태에서
148. 5:46스트로크 부분에서 여기 옵션이
149. 5:49있었죠? 스트로크 세팅에서 조인
150. 5:51부분을 맨 끝에 있는 둥근값으로
151. 5:54변형을 하면 끝에가 뾰족하지 않는
152. 5:55아이콘으로 처리가 가능합니다.
153. 5:58마지막으로는 이런 모양을 할 건데요.
154. 6:00이런 것도 쉬워요. 이번에도 별로
155. 6:02클릭해서 드래그를 할 건데요.
156. 6:04여기에서 카운트 부분이 5로 되어
157. 6:06있는데이 마우스 부분에서 꼭지점을
158. 6:09선택하면 카운트 5라고 되어 있죠.
159. 6:11여기서 클릭해서 위로 올려 주면
160. 6:13카운트가 늘어나요. 12 정도로 해
161. 6:16볼까요? 12 정도로 하고 가운데
162. 6:19레이시오 부분도 쭉 늘려 줍니다.
163. 6:2180% 정도로 하면 얼추 비슷하죠?
164. 6:24끝에 이제 꼭짓점을 이렇게 1로
165. 6:27조정하면 전체적으로 둥근 느낌이
166. 6:29만들어집니다. 이제 가운데 있던이
167. 6:31체크만 만들면 되겠죠? 체크는
168. 6:34쉬워요. 클릭해서 펜툴로 대략 이렇게
169. 6:37만들어 두고요. 니은 같은 걸 만들어
170. 6:40주는 거죠. 두께를 조정하고요.
171. 6:42그다음에 얘를 이렇게 45도 돌려
172. 6:45주면 끝납니다. 두 개 동시에
173. 6:47잡고요. 여기서 서트랙트 있죠?
174. 6:50하면은 바로 이렇게 적용이 됩니다.
175. 6:53나머지도 두께에 대해서 다 통일을
176. 6:55시키겠다 하면은 두께를 조정하고
177. 6:58여기서 커맨드 옵션 누르면 아웃라인
178. 7:01처리가 돼요. 아 이때 위에 눌러서
179. 7:03플래튼 처리를 해 줄게요. 그러면
180. 7:05하나의 도형처럼 처리가 됩니다.
181. 7:07여기도 마찬가지로 커맨드 E 2
182. 7:09눌러도 돼요. 이런 식으로 오늘
183. 7:12패스파인더 기능이랑 펜툴 이런 것들을
184. 7:14활용해서 아이콘을 만드는 걸 해
185. 7:17봤는데요. 생각보다 간단하죠? 다음
186. 7:19영상에서는 레이아웃 가이드라는 기능을
187. 7:21사용해서 컬럼과 그리드 기준을
188. 7:24잡아보는 시간을 가져 볼게요.