Vectornator에서 아이콘을 디자인하는 방법

아이콘 팩을 판매하여 부수적으로 돈을 벌고 싶습니까? 아니면 본격적인 아이콘 디자이너가 되고 싶습니까?

기본 지식 없이는 성공할 수 없습니다.

이미지 출처: Unsplash

이전 아이콘 작업을 시작하려면 아이콘이 무엇인지 이해해야 합니다. 그거 어디서 났어? 어디로 가고 있습니까? 이것이 중요한 이유는 무엇입니까?

이 기사에서 이러한 모든 사항을 다룰 것입니다. 그런 다음 선택할 수 있는 모든 아이콘 유형을 다룹니다. 당신의 그래픽 디자인 스타일이 무엇이든 당신을 위한 아이콘이 있을 것입니다. 그런 다음 좋은 아이콘 디자인의 원칙에 대해 알아봅니다.

마지막으로 아이콘 비전을 아이콘 현실로 변환하는 데 도움이 되는 단계별 가이드를 제공합니다. 다루어야 할 내용이 많으므로 자세히 살펴보겠습니다!

아이콘이란 무엇입니까?

'휴지통' 아이콘이 삭제된 모든 파일의 위치를 ​​나타내는 방식을 고려하세요. 이 아이콘은 모든 언어, 문화, 모든 연령 및 성별에서 기본적으로 동일한 의미를 갖습니다.

생각해보면 아이콘은 세계에서 가장 보편적인 언어입니다.

아이콘의 역사

모든 라틴계 사람들에게 '아이콘'이라는 단어는 '닮음' 또는 '이미지'를 의미하는 라틴어 'eikṓn'에서 유래했습니다. 현대적인 형태의모든 아이콘은 벡터입니다!

레이어

가장 중요한 팁은 작품에 가져올 새 그래픽 요소에 대해 새 레이어를 만드는 것입니다. 그리드를 추가하고 있습니까? 새 레이어를 만듭니다. 벡터 라인을 추가하고 있습니까? 좋아요. 새 레이어를 만듭니다. 색칠할 시간? 당신은 그것을 추측했습니다.

특히 스케치를 추적할 때 기본 작업을 더 쉽게 볼 수 있도록 벡터 레이어의 투명도를 줄이는 데 도움이 됩니다.

그리드

일부 아티스트는 아이콘이 과대평가되었다고 생각할 수 있지만 그리드는 몇 가지 상황에서 유용합니다.

아이콘 세트를 만드는 경우 그리드가 일관성을 유지하는 데 도움이 됩니다.

이것이 유용한 또 다른 시나리오는 이미 기존 그리드가 있는 플랫폼(iOS 또는 Android)에 대한 아이콘을 생성하는 경우입니다. 예를 들어 머티리얼 시스템 아이콘은 24dp 아이콘 그리드를 사용합니다.

다음은 우리가 제안하는 그리드 유형입니다. 만드는 방법은 간단합니다. Shape Builder 도구를 사용하여 두 개의 사각형을 만듭니다. 하나는 그리드의 최대 높이와 ​​너비이고 다른 하나는 여백을 설정하는 것입니다. 아이콘이 여백의 네 면 모두에 닿을 필요는 없습니다. 그런 다음 대칭선을 그립니다.

더 쉽게 만들려면 여기에서 편리한 멋쟁이 그리드 템플릿을 다운로드할 수 있습니다.

모양 도구

스케치와 마찬가지로 벡터 아트도 나무에서 멀지 않습니다. 역시 같은 기본으로 만들어집니다모양.

Vectornator의 모양 도구를 사용하여 다양한 모양을 쉽게 만들 수 있습니다. 모양을 선택하면 나타나는 슬라이더를 사용하여 다각형의 면 수를 변경할 수 있습니다. 또는 도형을 그린 후 빠른 작업 메뉴를 통해 액세스할 수 있습니다.

모서리를 둥글게 만드는 문제도 있는데 이것이 바로 모서리 반경 기능입니다. 슬라이더 또는 빠른 작업 메뉴를 통해서도 사용할 수 있습니다.

모양의 종횡비를 유지하려면 iPad에서 작업하거나 Shift 키를 누를 때 여분의 손가락으로 캔버스를 잡고 있으면 됩니다.

펜 도구

펜 도구는 마스터하기 가장 쉬운 도구는 아니지만 벡터 디자인에 필수적입니다. 부드러운 곡선을 그리는 데 특히 유용합니다.

그러려면 곡선을 시작하려는 지점에서 캔버스를 탭하고 해당 지점과 연결된 두 개의 핸들이 곡선을 이룰 때까지 펜이나 마우스를 드래그하면 됩니다. 원하는 길이. 그런 다음 탭하고 다시 드래그하여 곡선이 어떻게 형성되는지 확인합니다.

이전에 펜 도구를 사용한 적이 없는 경우 이 지침이 이상하게 들립니다. 그러나 일단 시도해 보면 우리가 의미하는 바를 알게 될 것입니다. 그리고 이 기사 상단에 있는 비디오를 아직 보지 않았다면 꼭 시청하십시오. 이 모든 단계는 시각적으로 더 잘 설명되어 있습니다.

5단계: SVG 내보내기

물론 마지막 단계는 작품을 내보내는 것입니다.

아이콘의 크기가 얼마인지 스스로에게 물어볼 수 있습니다.그것은 정말로 덜 중요합니다. 벡터는 크기에 관계없이 고품질입니다. 아이콘을 만들 때 준수해야 할 주요 규칙 중 하나는 아이콘이 정사각형에 맞아야 한다는 것입니다.

특정 크기로 작업하는 것이 더 편하십니까? 16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 256x256, 512x512와 같은 기본 크기를 사용합니다. 그러나 특히 iOS 또는 Android용 애플리케이션 아이콘을 디자인하는 경우 특정 프로젝트의 지침이나 요구 사항을 항상 확인해야 합니다.

아이콘은 다음과 같은 벡터 디자인 도구에서 지원하는 형식인 SVG 파일입니다. Vectornator.

파일, 내보내기로 이동하고 SVG를 선택합니다. 그리고 그게 다야! 이제 완전히 새로운 원본 아이콘이 생겼습니다.

이 튜토리얼이 도움이 되었기를 바랍니다. 아이콘은 단순해 보이지만 디자인하기는 쉽지 않습니다. 그러나 우리의 모든 지침, 원칙, 요령 및 트릭을 사용하면 전문적으로 작업하는 데 한 단계 더 가까워질 수 있습니다.

당신의 디자인을 우리와 공유하면 우리 소셜 미디어 채널에 당신을 소개할 것입니다! 아래 댓글 섹션에서 이 기사에 대한 귀하의 생각을 빨리 읽어 보시기 바랍니다.

아이콘에 얼마나 많은 정보가 포함되어 있는지 정말 놀랍습니다. 그들이 그것을 얼마나 빨리 전달하는지 훨씬 더 놀랍습니다. 그렇기 때문에 수세기 동안 의사 소통을 위해 아이콘이 사용되었습니다. 가장 먼저 떠오르는 역사적 아이콘은 무엇입니까? 고대 이집트의 상형문자! 그리고 그것은 그들뿐만 아니라 동굴 벽화나 바이킹 룬 문자이기도 합니다. 그것들은 모두 아이콘입니다.

그러나 천년을 맞이하면서 아이콘은 장치를 사용하고 장치와 통신해야 함에 따라 점점 더 눈에 띄게 되었습니다. 아이콘의 최근 역사에 초점을 맞추면 아이콘이 사용자 경험 개념의 발전에 얼마나 많은 영향을 미쳤는지 알 수 있습니다.

첫 번째 폴더부터 자세한 아이콘 역사를 확인하고 싶다면 오늘날 우리가 보는 스큐어모픽 아이콘에 이르기까지 이 놀라운 웹사이트를 확인하십시오.

이미지 출처: FusionGroup

아이콘이 중요한 이유는 무엇입니까?

세상이 점점 더 복잡해지고 복잡해짐에 따라 아이콘은 간단하고 우아하며 빠르게 메시지를 전달하는 데 도움이 되는 우리 삶의 절실한 부분입니다.

앱의 올바른 기능을 찾아야 하는지, 또는 외국 공항에서 화장실을 찾을 때 아이콘을 사용하면 많은 시간을 절약할 수 있습니다. 뿐만 아니라!

모든 교통 표지판은 아이콘입니다. 일본에 있고 특정 지점에서 길을 건널 수 있는지 모른다고 상상해 보십시오. 아이콘은 우리 모두가 필요로 하는 상황에서 말 그대로 생명의 은인입니다.실제로 말하지 않고도 동일한 언어로 의사소통할 수 있습니다.

사용자 인터페이스 디자이너라면 올바른 아이콘을 사용하여 앱의 기능이 전 세계적으로 일관되게 유지되도록 할 수 있습니다.

아이콘은 세상을 통합합니다. .

매우 강력하지 않나요? 이제 이 작은 기호가 얼마나 중요한지 알았으니 디자인을 시작하겠습니다. 많은 아이콘이 만들어졌고 계속 만들어질 것이지만 항상 더 많은 아이콘에 대한 수요가 있을 것입니다. 더 많은 주제, 다양한 색상, 다양한 스타일, 다양한 브랜딩.

자신만의 것을 만들어 야수에게 먹이를 줄 수 있는 방법을 알아보겠습니다.

아이콘 디자인 원칙

제작 과정이 가장 흥미진진하며 우리는 거기에 도달할 것입니다. 하지만 먼저 기억에 남을만한 아이콘을 만들기 위해 아이콘 디자이너가 일반적으로 따르는 몇 가지 기본 원칙을 다룰 필요가 있습니다.

픽셀 완벽함

눈으로 디자인하는 것만으로는 충분하지 않습니다. 잡기 아이콘입니다. 아이콘을 확장 가능하고 반응성이 뛰어나며 실제 장치에 적합하게 만들어야 합니다. 픽셀 격자에 아이콘을 배치하여 흐릿함이 없도록 합니다.

획 너비는 짝수(예: 2픽셀 또는 4픽셀)로 사용하고 아이콘 또는 아이콘 팩 전체에서 일관되게 유지합니다.

다양한 애플리케이션을 위해 아이콘의 크기를 조정하는 경우 디자인에 흐릿함을 가져올 수 있는 하프 픽셀이 남지 않도록 모든 크기에 대해 디자인을 약간 변경해야 할 수 있습니다.이렇게 하면 픽셀을 완벽하게 유지하는 데 도움이 됩니다.

이미지 출처: Icons8 Blog

기하학적 모양

기하학적 모양을 자주 사용하십시오. 아이콘을 디자인할 수 있습니다. 아이콘에 더 강력하고 매력적이며 유기적인 모양을 제공합니다. 또한 가독성도 높아집니다.

각도

직각이 아닌 경우 대부분의 경우 45도 각도를 유지하세요. 결과는 선명하고 완벽한 대각선은 쉽게 인식되는 패턴입니다.

모서리

2픽셀 반경은 아이콘 디자인에서 매우 일반적입니다. 둥근 모서리를 명확하게 정의할 수 있을 만큼 충분히 크지만 디자인이 완전히 새로운 미학을 가질 정도로 모서리를 부드럽게 만들지는 않습니다. 그러나 모든 것은 디자인에 부여하려는 개성에 달려 있습니다.

단지 1픽셀의 얇은 획은 더 뾰족하게 보이고 3픽셀은 매우 둥근 모양을 만들고 0dp 모서리 반경은 매우 선명한 아이콘을 제공합니다. .

이미지 출처: Smashing Magazine

간단하게 유지

아이콘은 한 눈에 메시지를 전달해야 합니다. 그것이 그 목적입니다. 너무 추상적이거나 너무 복잡하면 안 됩니다. 그렇지 않으면 의미를 잃을 수 있기 때문입니다.

이는 구성에도 적용됩니다. 너무 자세히 설명하지 마세요. 효과적인 아이콘 디자인은 작은 크기나 큰 크기로 읽을 수 있어야 합니다.

아이콘에서 개념을 전달하는 데 도움이 되지 않는 불필요한 세부 정보는 제거하세요.대신 무겁고 시끄럽게 만드세요.

여백

같은 맥락에서 여백을 활용하여 디자인에 숨 쉴 공간을 더 많이 제공하세요. 그러면 아이콘이 의미를 더 빨리 전달하는 데 도움이 됩니다.

관점

관점은 아이콘만큼 작은 것에서 읽기 어렵습니다. 항상 디자인 대상을 똑바로 보도록 하세요.

아이콘 일관성 유지

아이콘 팩은 전체적으로 일관성 있게 보여야 하므로 획 두께가 , 획 모서리, 색상 팔레트, 복잡한 세부 수준, 간격 및 스타일 요소는 전체 아이콘 세트에서 동일하게 유지됩니다.

따라서 첫 번째 아이콘에 2픽셀 획을 사용하는 경우 끝까지 사용하십시오.

그러나 줄 사이를 읽지 마십시오. 아이콘의 너비나 높이가 정확히 같을 필요는 없습니다. 대신 균일한 시각적 가중치를 보장하기 위해 개별적으로 크기를 조정해야 합니다.

시각적 가중치는 특정 공통 요소가 다른 요소보다 무겁게 나타날 수 있다는 개념입니다. 마치 어두운 요소가 밝은 요소보다 무겁게 느껴집니다. 정확한 과학이 아니며 개인의 인식과 많은 관련이 있습니다.

따라서 이러한 힘을 측정할 수 있는 도구가 없습니다. 아이콘을 일렬로 정렬할 때는 눈과 직감을 믿으세요.

출처: Designoxy

Personality

아이콘 성격. 다양한 전문 아이콘 세트가 있습니다.예술가로서 눈에 띄어야 합니다. 자신만의 그림 스타일이나 고유한 색상 팔레트로 그렇게 할 수 있습니다.

마찬가지로 구식 릴 카메라로 영화를 표현하는 것과 같은 구식 은유를 피하십시오. 물론 프로젝트에 필요한 경우는 예외입니다. 최신 상태를 유지하고 다른 사람이 생각 없이 한 작업을 반복하지 마십시오.

이제 모든 원칙을 다루었으므로 아이콘 디자인에 필요한 5단계를 모두 살펴보겠습니다.

출처: Designoxy

1단계: 연구

창의적인 프로젝트의 기초가 아닐까요? 특정 아이디어를 표현하기 위해 어떤 아이콘을 디자인해야 하는지 파악해야 합니다.

어린이용 앱, 대학 또는 회사를 위한 것인가요? 당신의 디자인은 그것을 전달해야 합니다.

‍객체 자체를 나타내는 아이콘을 만들어야 하는 경우 매우 쉽습니다. 하지만 '일상'을 나타내는 추상적인 아이콘을 만들어야 한다면 어떻게 해야 할까요? 여기에서 생각의 모자를 쓰고 가능한 기호를 브레인스토밍해야 합니다.당신이 사용할 수있는. 아이콘의 본질이나 의미를 묘사하기 위해 생각할 수 있는 모든 연관성을 적어 두십시오.

사전, 동의어 사전, 단어 연관성 또는 Google 검색을 사용하여 필요한 것을 더 잘 이해할 수 있을 뿐만 아니라 묘사할 뿐만 아니라 영감을 얻기도 합니다. 생각보다 어렵지만, 추상적인 개념의 아이디어를 순식간에 의미를 전달하는 공통 객체로 단순화해야 합니다.

영감에 대해 말하자면, 표현할 방법을 찾지 못하더라도 낙담하지 마세요. 방망이에서 바로 아이콘의 개념. 필요한 시각적 자극을 제공할 수 있는 많은 아이콘 디자인이 있습니다.

가장 큰 플랫폼 중 하나는 Icon Finder이며, 이 플랫폼의 환상적인 점은 아이콘을 검색할 수 있다는 것입니다. 다양한 방법.

2단계: 스타일 정의

아이콘 디자인은 정말 재미있습니다! 선택할 수 있는 스타일이 너무 많아서 더욱 즐겁습니다.

• 윤곽선 아이콘 은 윤곽선에서만 만들어집니다. 이것은 초보자가 시작하기에 가장 쉬운 스타일이므로 모든 초보 아이콘 디자이너에게 권장합니다.

• 손으로 그린 ​​아이콘 는 외곽선이 있는 형태의 아이콘이지만 손으로 ​​그린 ​​듯한 느낌을 줍니다.

• 채워진 아이콘 에는 색상이 포함되어 있습니다. , 음영, 그라디언트 및 그 모든 재미있는 것들. 그러나 매우 구체적인아이콘을 채우기 위해 선택한 방법에 따라 하위 범주.

• 글리프 아이콘 은 단색으로 채워집니다.

• 플랫 아이콘 은 이름에서 알 수 있듯이 음영, 그림자 또는 그라디언트가 최소이거나 전혀 없다는 점에서 플랫 디자인 원칙을 존중합니다.

• 스큐어모픽 아이콘 (3D ​​아이콘이라고도 함)은 실제 아이콘을 모방하도록 설계되었습니다.

자신을 미니멀리스트, 플랫 디자이너라고 생각하시나요, 아니면 스큐어모픽 디자인을 좋아하시나요? 귀하의 선호도와 상관없이 귀하의 이름이 적힌 아이콘 스타일이 있습니다.

하지만 아이콘을 디자인할 때 자신의 개인 스타일만 고려할 수는 없습니다. 결정은 아이콘이 표시될 인터페이스 유형(예: Apple iOS 또는 Material)에 대한 일반적인 요구 사항과 디자인 중인 특정 UI 레이아웃의 스타일 선택에 따라 달라집니다. 결정, 결정.

3단계: 스케치

간단하거나 복잡한 모든 디자인은 가장 단순한 모양으로 시작합니다.

시작하는 것이 중요합니다. 아이콘을 작업하는 동안 좋은 그리드와 레이아웃을 유지하십시오. 쉽게 시작할 수 있도록 아이콘 그리드 파일을 다운로드하세요.

스케치할 때 아이콘 콘텐츠를 만들기 위해 사용해야 하는 주요 모양을 이해하세요. 이러한 기본 모양을 이해하기 위해 참조 이미지를 사용하거나 간단히 스케치를 시작할 수 있습니다.예를 들어 아이스크림 아이콘을 스케치하는 경우 원뿔에는 삼각형을 사용하고 국자와 드립에는 타원형을 사용할 것임을 알고 있습니다.

자신의 공책에서 스케치하도록 선택할 수 있지만 Procreate는 디지털 방식으로 스케치할 수 있는 놀라운 픽셀 기반 일러스트레이션 도구입니다. 그리고 거기에서 파일을 Vectornator와 같은 벡터 디자인 소프트웨어로 직접 가져와서 아이콘에 생명을 불어넣을 수 있습니다.

이 단계에서 다음을 나타내는 색 구성표를 선택해야 합니다. 아이콘의 캐릭터 또는 아이콘 시리즈의 테마. 아티스트로서의 스타일을 정의하는 고유한 색상 팔레트를 만드는 방법을 설명하는 전체 기사가 있습니다. 하지만 기본 사항은 다음과 같습니다.

• 아이콘 팩 전체에서 색상이 일관되게 유지되는지 확인하세요.
• 모든 색상이 밝은 배경과 어두운 배경 모두에서 보이는지 확인하세요.
• 색상이 서로 대비되는지 확인하세요. 아이콘을 회색조로 변환하여 확인할 수 있습니다. 색상이 그레이스케일에서 대조되면 다른 환경에서도 대조됩니다.
• 색상 이론은 여러분의 친구입니다. 따뜻한 색조와 차가운 색조를 선택하여 스토리를 전달합니다.
• 색상을 사용하여 하나의 초점 색상만 선택하여 시각적 계층 구조를 정의합니다.

4단계: 벡터화

스케치를 마친 후에는 아이콘을 벡터화할 차례입니다. 하지 않은 경우