Adobe Illustrator CC에서 모양 툴을 사용하여 벡터 모양을 신속하게 결합하고 향후 디지털 프로젝트에 사용할 인상적인 아이콘을 디자인하는 방법을 살펴봅니다.
icon-design-main

이 샘플 프로젝트에서는 소셜 미디어 프로필 이미지나 디지털 이력서에서 포트폴리오로 연결하는 버튼으로 사용할 카메라 아이콘을 디자인해 봅니다.

icon-design-intro

프로젝트 설정

Illustrator를 실행하고 새로 만들기 버튼을 클릭하거나 Ctrl+N(Windows) 또는 Command+N(macOS)을 누릅니다. 웹 탭을 선택하고 오른쪽에서 폭과 높이를 400 px로 입력합니다. 팁: 아이콘을 디자인할 때 정사각형으로 작업하는 것이 유용합니다.

제작을 클릭합니다.

icon-design-fig1

기본 모양 그리기

먼저 카메라 본체를 그립니다.

툴 패널에서 사각형 툴을 선택합니다. 대지에서 클릭하고 드래그하여 사각형을 그립니다.

그림과 같이 큰 사각형 위에 또 다른 작은 사각형을 겹쳐 그립니다. 

고급 안내선을 참조하면 2개 사각형의 중앙을 정렬할 수 있습니다. 수직의 마젠타 색상 안내선이 표시될 때까지 큰 사각형 위로 작은 사각형의 가운데 위젯(가운데에 있는 원)을 드래그합니다.

Illustrator에서 고급 안내선을 사용하는 방법에 대한 자세한 내용

icon-design-fig2a

다음으로 플래시를 추가합니다.

사각형 툴을 길게 눌러 다른 모양이 표시되면 원형 툴을 선택합니다. 정원을 나타내는 십자형 안내선이 원 안에 표시될 때까지 원을 드래그합니다. 적절한 크기가 되면 커서를 놓습니다.

: 원형의 종횡비를 유지하고 크기를 조절하려면 Shift 키를 누른 상태에서 모퉁이 위젯을 드래그합니다.

필요한 경우 가운데 위젯을 드래그하여 큰 사각형 안에서 원의 위치를 변경합니다.

icon-design-fig2b

이제 렌즈 모양을 만듭니다.

원형 툴이 선택된 상태에서 가운데 단어가 표시될 때까지 큰 사각형 위로 마우스를 가져갑니다. Alt(Windows) 또는 Option(macOS)을 누른 상태에서 중앙에서 드래그하여 원을 그립니다. 십자형 안내선을 보면서 원이 적당한 크기가 되면 커서를 놓습니다.

화면의 가장자리에 작은 원을 그립니다. 작은 원의 가운데를 클릭하고 큰 원 위로 드래그하여 교차 영역 또는 가운데 단어가 표시되면 커서를 놓습니다.

icon-design-fig2c

모양 결합

이 단계에서는 사각형 모양을 결합합니다.

V를 눌러 선택 툴을 선택합니다. 큰 사각형을 클릭한 다음 Shift 키를 누른 상태에서 작은 사각형을 클릭하여 사각형을 모두 선택합니다. 도형 구성 툴을 선택하고 그림과 같이 두 사각형을 연결하는 선을 드래그합니다.

icon-design-fig3

색상 추가  

이제 모양에 칠 색상과 다양한 획 속성을 적용합니다.

V를 눌러 선택 툴로 전환합니다. 카메라 본체가 선택된 상태에서 속성 패널에서 모양 아래에 있는 칠 색상 견본을 클릭합니다. 오른쪽에서 견본 옵션을 선택하고 견본 패널에서 색상을 클릭한 다음 획 견본을 클릭하고 없음을 선택하여 획을 제거합니다.

플래시 원에도 칠은 흰색으로, 획은 없음으로 설정합니다.

렌즈에 색상을 적용하려면 먼저 바깥쪽 원을 선택한 다음 Shift 키를 누른 상태에서 두 번째 원도 클릭하여 선택합니다. 칠은 없음으로, 획은 흰색으로 설정합니다. 획 두께를 5pt로 높입니다.

icon-design-fig4

마무리하기

모양의 모서리를 둥글게 하면 세련된 느낌을 줍니다.

카메라 본체를 선택합니다. A를 눌러 직접 선택 툴로 전환하고 둥근 모퉁이 위젯을 드래그하여 한 번에 모든 모퉁이를 둥글게 만듭니다.

icon-design-fig5

웹 출력용으로 저장

대지에 맞게 아이콘 크기를 변경하려면 선택 > 모두를 선택하여 전체 아이콘을 선택합니다. V를 눌러 선택 툴로 전환합니다. Alt+Shift(Windows) 또는 Option+Shift(macOS)를 누른 상태에서 모퉁이 핸들을 드래그하여 원형의 종횡비를 유지하면서 중앙을 기준으로 크기를 변경합니다. 마지막으로 아이콘의 가운데를 드래그하여 위치를 변경합니다.

icon-design-fig6a

파일 > 저장을 선택합니다. 프로젝트의 고유한 이름을 입력하여 Adobe Illustrator (AI) 포맷으로 저장합니다. 파일은 Illustrator에서 언제든지 편집할 수 있습니다.

온라인으로 게시할 최종 버전을 저장하려면 파일> 내보내기> 화면에 맞게 내보내기를 선택합니다. 내보낼 위치를 선택하고 PNG 포맷을 선택합니다.

팁: 내보내기 전에 대지 크기를 변경할 수 있습니다. 크기 조절 드롭다운 메뉴에서 폭 또는 높이를 선택하고 새로운 크기를 입력합니다.

톱니바퀴 모양의 아이콘을 클릭하고 앤티 앨리어싱 드롭다운 메뉴에서 아트 최적화(수퍼샘플링)를 선택합니다. 설정값 저장을 클릭한 다음 대지 내보내기를 클릭합니다.

icon-design-fig6b

즐거운 시간이 되셨기를 바랍니다. 아트웍을 웹용으로 저장하는 방법은 웹 및 앱 디자인용으로 에셋 내보내기를 살펴보십시오. 

09/10/2018
Jing Wei
이 페이지가 도움이 되었습니까?