Adobe Illustrator에서 모양 툴을 사용하여 벡터 모양을 신속하게 결합하고 향후 디지털 프로젝트에 사용할 인상적인 아이콘을 디자인하는 방법을 살펴보세요.
필요한 사항
앱에서 연습
이 샘플 프로젝트에서는 소셜 미디어 프로필 이미지나 디지털 이력서에서 포트폴리오로 연결하는 버튼으로 사용할 카메라 아이콘을 디자인해 봅니다.
1
프로젝트 설정
Illustrator를 실행하고 새로 만들기 버튼을 클릭하거나 Ctrl+N(Windows) 또는 Command+N(macOS)을 누릅니다. 웹 탭을 선택하고 오른쪽에서 폭과 높이를 400 px 로 입력합니다. 팁: 아이콘을 디자인할 때 정사각형으로 작업하는 것이 유용합니다.
제작을 클릭합니다.
2
기본 모양 그리기
먼저 카메라 본체를 그립니다.
툴 패널에서 사각형 툴을 선택합니다. 대지에서 클릭하고 드래그하여 사각형을 그립니다.
그림과 같이 큰 사각형 위에 또 다른 작은 사각형을 겹쳐 그립니다.
고급 안내선을 참조하면 2개 사각형의 중앙을 정렬할 수 있습니다. 수직의 마젠타 색상 안내선이 표시될 때까지 큰 사각형 위로 작은 사각형의 가운데 위젯(가운데에 있는 원)을 드래그합니다.
사각형 툴을 길게 눌러 다른 모양이 표시되면 원형 툴을 선택합니다. 정원을 나타내는 십자형 안내선이 원 안에 표시될 때까지 원을 드래그합니다. 적절한 크기가 되면 커서를 놓습니다.
팁
: 원형의 종횡비를 유지하고 크기를 조절하려면 Shift 키를 누른 상태에서 모퉁이 위젯을 드래그합니다.
필요한 경우 가운데 위젯을 드래그하여 큰 사각형 안에서 원의 위치를 변경합니다.
이제 렌즈 모양을 만듭니다.
원형 툴이 선택된 상태에서 가운데 단어가 표시될 때까지 큰 사각형 위로 마우스를 가져갑니다. Alt(Windows) 또는 Option(macOS)을 누른 상태에서 중앙에서 드래그하여 원을 그립니다. 십자형 안내선을 보면서 원이 적당한 크기가 되면 커서를 놓습니다.
화면의 가장자리에 작은 원을 그립니다. 작은 원의 가운데를 클릭하고 큰 원 위로 드래그하여 교차 영역 또는 가운데 단어가 표시되면 커서를 놓습니다.
3
모양 결합
이 단계에서는 사각형 모양을 결합합니다.
V를 눌러 선택 툴을 선택합니다. 큰 사각형을 클릭한 다음 Shift 키를 누른 상태에서 작은 사각형을 클릭하여 사각형을 모두 선택합니다. 도형 구성 툴을 선택하고 그림과 같이 두 사각형을 연결하는 선을 드래그합니다.
4
색상 추가
이제 모양에 칠 색상과 다양한 획 속성을 적용합니다.
V를 눌러 선택 툴로 전환합니다. 카메라 본체가 선택된 상태에서 속성 패널에서 모양 아래에 있는 칠 색상 견본을 클릭합니다. 오른쪽에서 견본 옵션을 선택하고 견본 패널에서 색상을 클릭한 다음 획 견본을 클릭하고 없음을 선택하여 획을 제거합니다.
플래시 원에도 칠은 흰색으로, 획은 없음으로 설정합니다.
렌즈에 색상을 적용하려면 먼저 바깥쪽 원을 선택한 다음 Shift 키를 누른 상태에서 두 번째 원도 클릭하여 선택합니다. 칠은 없음으로, 획은 흰색으로 설정합니다. 획 두께를 5pt로 높입니다.
5
마무리하기
모양의 모서리를 둥글게 하면 세련된 느낌을 줍니다.
카메라 본체를 선택합니다. A를 눌러 직접 선택 툴로 전환하고 둥근 모퉁이 위젯을 드래그하여 한 번에 모든 모퉁이를 둥글게 만듭니다.
6
웹 출력용으로 저장
대지에 맞게 아이콘 크기를 변경하려면 선택 > 모두를 선택하여 전체 아이콘을 선택합니다. V를 눌러 선택 툴로 전환합니다. Alt+Shift(Windows) 또는 Option+Shift(macOS)를 누른 상태에서 모퉁이 핸들을 드래그하여 원형의 종횡비를 유지하면서 중앙을 기준으로 크기를 변경합니다. 마지막으로 아이콘의 가운데를 드래그하여 위치를 변경합니다.
파일 > 저장을 선택합니다. 프로젝트의 고유한 이름을 입력하여 Adobe Illustrator (AI) 포맷으로 저장합니다. 파일은 Illustrator에서 언제든지 편집할 수 있습니다.
온라인으로 게시할 최종 버전을 저장하려면 파일> 내보내기> 화면에 맞게 내보내기를 선택합니다. 내보낼 위치를 선택하고 PNG 포맷을 선택합니다.
팁: 내보내기 전에 대지 크기를 변경할 수 있습니다. 크기 조절 드롭다운 메뉴에서 폭 또는 높이를 선택하고 새로운 크기를 입력합니다.
톱니바퀴 모양의 아이콘을 클릭하고 앤티 앨리어싱 드롭다운 메뉴에서 아트 최적화(수퍼샘플링)를 선택합니다. 설정값 저장을 클릭한 다음 대지 내보내기를 클릭합니다.
You can control how Adobe websites use cookies and similar technologies by making choices below. But note that if you disable cookies and similar technologies entirely, Adobe websites may not function properly.
Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage and local shared objects, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.
You can make choices in the menu below about what cookies and other technologies you want us to use on Adobe sites when you visit them from this browser. You can always change those choices later by clicking on the Cookie Preferences link at the bottom of the page.
If enabled:
We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
We won’t be able to remember you from session to session so the experience may not be tailored to your interests
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you
General information
You can control how Adobe websites use cookies and similar technologies by making choices below. But note that if you disable cookies and similar technologies entirely, Adobe websites may not function properly.
Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.
You can make choices in the menu below about what cookies and other technologies you want us to use on Adobe sites when you visit them from this browser. You can always change those choices later by clicking on the Cookie Preferences link at the bottom of the page.
If enabled:
We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
We won’t be able to remember you from session to session so the experience may not be tailored to your interests
We’ll still count your use of our site and services
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you
Operate the site and core servicesOperate site and measure engagement
Always active
These cookies are required, and they are used to enable the site and related services core functionality. Without them the site could not operate, so they cannot be disabled.
These cookies enable the site and related services’ core functionality and collect statistics about user engagement, such as counting active use to help us understand trends. These cookies cannot be disabled.
Measure performance
These cookies are used to analyze site usage to measure and improve performance. Without them Adobe cannot know what content is most valued and how often unique visitors return to the site, making it hard to improve information we offer to you.
These cookies are used to analyze site usage to measure and improve performance. Without them Adobe cannot know what content is most valued, making it hard to improve information we offer to you.
Extend functionality
These cookies are used to enhance the functionality of Adobe sites such as remembering your settings and preferences to deliver a personalized experience; for example, your username, your repeated visits, preferred language, your country, or any other saved preference.
Personalize advertising
These cookies are used to enable Adobe and our partners to serve ads more relevant to your interests. Without them you will still see ads, but they might not be as relevant to you.
Personalize advertising
These cookies are used to enable Adobe and our partners to serve ads more relevant to your interests. Without them you will still see ads, but they might not be as relevant to you.