지루한 아이콘을 독창적인 걸작으로 빠르게 바꾸는 방법

아이콘은 우리 디자인의 필수적인 부분입니다. 다양한 동작을 나타내는 시각적 단서로서 제품에 고유한 아이덴티티를 부여할 수 있습니다. 그러나 너무 자주 우리는 동일한 아이콘 세트를 다운로드하고 모든 웹사이트의 모든 아이콘을 거의 동일하게 보이게 함으로써 그들의 중요성을 축하하기로 선택합니다. 그렇게 중요한 것을 다루는 방법은 무엇입니까?

이 문제를 해결하기 위해 저는 디자이너가 아이콘에 시각적 깊이를 추가하고 그들이 나타내는 제품에 고유하게 만들 수 있도록 가이드를 만들었습니다. 이 튜토리얼은 영향력 있는 Google Material 디자인에서 크게 영감을 받았습니다.

Google의 머티리얼 디자인 원칙

Google에서 말했듯이 "물질은 은유입니다." 물리적 세계에서 시각적 신호를 차용하고 모든 인터페이스를 표준화하기 위해 새로운 시각적 언어를 만듭니다. 머티리얼 디자인 원칙은 접근 가능하며 인터페이스의 매력과 사용자 경험을 개선하기 위해 빠르게 적용될 수 있습니다.

1. 단순한 기하학적 모양과 과감한 색상 사용

평면 디자인 트렌드는 기본 평면 모양을 기반으로 하는 Material Design에서 영감을 얻었습니다. 아이콘이 나타내는 요소를 가장 잘 나타내는 모양을 신중하게 선택하십시오.

2. 미묘한 음영으로 깊이 추가

그림자는 물체에 비추는 빛의 효과를 자극하기 때문에 눈을 속이고 디자인에 깊이감을 주는 좋은 방법입니다.

자연광은 종종 왼쪽 상단 모서리에서 오는 것처럼 시뮬레이션됩니다.

3. 색상 음영을 사용하여 그림자 바꾸기

각 색상은 시각적 깊이를 시뮬레이션하기 위해 여러 음영으로 사용됩니다. 예를 들어 Gmail 아이콘에서 M 모양에 다양한 빨간색 음영이 사용되었으며 봉투 덮개 아래에는 더 어두운 회색 음영이 사용되었음을 알 수 있습니다.

당신도 할 수 있는 방법: 단계별 데모

Material Design 스타일의 단순화된 버전을 적용하고 각 아이콘에 대해 동일한 색상의 세 가지 음영만 사용하고 일반적인 "긴 그림자" 효과 대신 그림자를 평평하고 짧게 유지합니다.

자원

• 여기에서 Google에서 설정한 전체 무료 아이콘을 확인하세요.

시작하자.

1. 볼트 아이콘

원래 아이콘을 둘로 나누고 상단 부분을 들어 올린 것처럼 보이게 합니다. 두 모양의 교차점에 그림자 효과를 만들어 이를 달성할 수 있습니다. 노란색의 세 가지 음영을 사용합니다. 위쪽은 더 밝고 아래쪽은 더 어둡게 하고 그림자에 가장 어두운 음영을 유지합니다.

2. 채팅 아이콘

원래 아이콘에는 두 개의 거품 사이의 간격에 그림자 효과에 대한 힌트가 있습니다. 여기에서 그림자를 만들 수 있습니다.

아래쪽 모양에서 간격에서 직각을 이루는 점을 선택하고 왼쪽 상단 모서리에 직각이 될 때까지 왼쪽으로 위쪽으로 이동합니다.

상단 거품을 복제하고 사본을 오른쪽 아래로 이동합니다. 복사본과 아래쪽 거품 모양을 선택하고 "패스파인더"를 사용하여 구분을 만들고 이전 복사본과의 교차점만 유지합니다.

이제 파란색의 세 가지 음영을 적용하고 가장 밝은 부분을 위쪽에, 가장 어두운 부분을 중간에, 두 번째로 가장 어두운 부분을 아래쪽에 적용할 수 있습니다.

3. 체크 표시 아이콘

접힌 종이 효과를 만들어 보겠습니다.

아이콘을 복제하고 맨 오른쪽 상단에서 여분의 두 점을 제거한 다음 맨 왼쪽에서 두 조각을 제거합니다.

왼쪽 접기를 복제하고 오른쪽 접기 위로 이동합니다.

두 모양을 교차하여 그림자 효과를 만듭니다. 그런 다음 가장 어두운 부분은 그림자, 두 번째로 어두운 부분은 긴 부분, 위쪽은 밝은 부분을 유지하면서 세 가지 색상을 적용합니다.

4. 깃발 아이콘

가장자리를 반올림하여 시작한 다음 깃발의 밑부분을 추출합니다.

접는 효과를 만들려면 대각선으로 교차하는 두 개의 선을 그립니다. "Pathfinder"를 사용하여 깃발 모양을 선으로 나누고 기본 회색을 유지하면서 깃발에 녹색 음영 3개를 적용합니다.

5. 하트 아이콘

하트 아이콘을 복제합니다.

모양의 왼쪽 절반을 분리합니다.

오른쪽 상단 지점에서 오는 대각선을 아래쪽으로 그립니다.

결과 모양을 하트와 겹친 다음 오른쪽으로 이동하여 그림자 모양을 뺍니다. 핑크의 세 가지 음영을 적용하십시오.

6. 산 아이콘

원래 아이콘 내부의 빈 공간은 그림자를 배치할 수 있는 위치를 나타냅니다.

각 선택에서 두 개의 삼각형 모양을 만듭니다.

더 작은 복사본을 오른쪽으로 이동하고 결과 교차를 그림자 모양으로 추출합니다.

가장 밝은 부분을 왼쪽으로, 두 번째로 밝은 부분을 큰 삼각형으로, 가장 어두운 부분을 가운데로 유지하여 세 가지 브라운 음영을 적용합니다. 약간의 모서리 반경을 적용하여 결과를 부드럽게 합니다.

7. 사람 아이콘

왼쪽 인물의 아랫부분을 선택하여 복제합니다. 그 사본을 오른쪽에 있는 사람과 맞춥니다. 이제 3개의 겹치는 모양을 선택하고 "패스파인더" 패널에서 "나누기" 도구를 적용합니다. 이제 색상을 구현하여 마무리합니다.

8. 플로팅 스퀘어 아이콘

아래쪽 모양을 선택하고 중간 상단 점을 다이아몬드처럼 보일 때까지 위쪽으로 이동합니다.

위쪽 다이아몬드 모양을 복제하고 복사본을 10 또는 20픽셀 아래로 이동합니다.

두 개의 아래쪽 모양을 선택하고 "패스파인더" 패널에서 "나누기" 도구를 적용합니다.

결과 교차 모양에서 두 개의 아래쪽 부분만 유지하고 추가 점을 삭제합니다.

중간에 가장 어두운 부분을 할당하면서 빨간색의 세 가지 음영을 적용하여 마무리합니다.

9. 문자 아이콘

"직접 선택 도구(A)"로 봉투 모양의 두 번째 높은 지점을 선택합니다.

"펜 도구"를 사용하여 세그먼트의 오른쪽에 점을 추가합니다.

이제 추가 점이 있으므로 두 개의 위쪽 점을 들어 올리고 그림과 같이 오른쪽과 왼쪽으로 이동하여 음수 공간을 종이처럼 보이도록 모양을 변경할 수 있습니다.

모든 것을 선택하고 "패스파인더" 패널에서 분할을 적용합니다. 상단의 종이 모양을 봉투에서 분리한 다음, 종이 위에 봉투 부분을 복제하여 그림자 모양을 오려낸 후 파란색 3색 음영을 적용합니다.

10. 케이크 아이콘

케이크 바닥 부분의 복제된 버전을 분리합니다.

왼쪽과 오른쪽 가장자리를 안쪽으로 이동하여 너비를 좁힙니다.

결과 모양을 원래 아이콘 위로 이동하고 더 높은 점을 확장하여 착빙 모양과 겹치도록 합니다.

"패스 파인더"로 겹치는 모든 모양의 분할을 만들고 이전에 만든 좁은 케이크 바닥 옆의 여분의 점을 제거하십시오.

아이싱과 양초에는 연한 오렌지색, 베이스에는 더 어두운 섀도우, 불꽃 모양과 그림자 가장자리에는 더 어두운 오렌지색을 바르면 케이크가 완성됩니다.

아이콘 세트의 모양과 느낌 개선

Material의 스타일로 아이콘을 만드는 것은 간단하게 달성할 수 있습니다. 사려 깊은 기하학적 모양, 대담한 색조 및 그림자 효과의 좋은 조합만 있으면 됩니다.

좋은 소식은 이 튜토리얼에서 했던 것처럼 처음부터 모든 아이콘을 만들 필요가 없다는 것입니다. 기존의 무료 플랫 아이콘에서 시작하여 방금 배운 간단한 기술을 적용할 수 있습니다.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 디자인 원칙과 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 디자인의 게슈탈트 원리 탐구
• Adobe XD vs. Sketch – 어떤 UX 도구가 당신에게 적합합니까?
• 최고의 디자이너가 사용하는 10가지 UX 결과물