제품 아이콘을 만드는 것은 언뜻 보이는 것만큼 어렵지 않습니다. 첫 번째 Android 앱 아이콘을 처음부터 디자인하는 방법에 대해 자세히 알아보세요!
앱이 배포되는 마켓플레이스나 서비스에 관계없이 해당 앱 아이콘은 잠재 사용자가 가장 먼저 눈에 띄는 것입니다. 새로운 사용자를 끌어들이려고 할 때 첫인상이 가장 중요합니다. 즉, 아이콘은 모든 애플리케이션의 핵심 구성 요소입니다. 그리고 앱의 의도에 관계없이 아름다운 애플리케이션 아이콘을 만드는 것은 모든 앱 개발 단계에서 중요한 부분이어야 합니다. 많은 기술 애플리케이션 개발자들이 그래픽을 전담 디자이너에게 맡기지만, 디자인의 기본을 이해하고 적용하는 것은 실험과 재주만 있다면 누구나 할 수 있는 일입니다. 분석. 앱 아이콘도 예외는 아닙니다!
이 가이드에서는 오픈 소스 소프트웨어를 사용하여 샘플 Android 앱용 적응형 아이콘을 만드는 방법을 안내합니다. 최종 결과가 필요한 형식이 아닐 수도 있지만 여기에서 논의된 많은 디자인 팁은 여러 플랫폼에서 적용됩니다.
Android Oreo를 통해 "적응형 아이콘"이 출시된 후 앱 아이콘은 세 가지 기본 레이어로 구성될 수 있습니다. 불투명한 배경 레이어, 전경 레이어 ~와 함께 투명성 지원, 그리고 마스크 아이콘의 모양을 정의합니다. 이 모든 레이어의 크기는 108 x 108dp이지만 사용자는 내부 72 x 72dp만 볼 수 있습니다. 상단의 마스크로 잘려진 다른 영역은 아이콘이 동적으로 표시되도록 UI 내의 특수 효과에 사용됩니다. 초보 분들을 위해, DP 또는 디스플레이 독립적 픽셀 안드로이드의 모든 인터페이스를 측정하는 단위로, 160dpi 디스플레이의 1픽셀.)
Google의 Nick Butcher가 66dp 서클에 대해 이야기합니다. 마스크가 자를 수 없는 아이콘 중앙에 있는 "안전 지대"를 말합니다. 나중에 실제 디자인을 시작할 때 아이콘 디자인의 주요 요소가 여기에 놓이게 됩니다. 이 33dp 반경을 초과하는 항목은 모양 마스크가 켜져 있는 동안 아이콘에 표시되지 않을 수 있습니다.
UI 크기 조정으로 인해 아이콘은 벡터 이미지인 것이 더 낫기 때문에 아이콘을 만들려면 벡터 그래픽 편집기가 필요합니다. 잉크스케이프 는 오픈 소스이며 더 비싼 소프트웨어에 대한 훌륭한 대안이므로 이 튜토리얼의 목적에 따라 선택됩니다. 프로젝트 파일도 디자인했어요 여기에서 사용 가능 안전 지대와 Google의 자체 디자인 키라인이 표시되어 있고 아이콘 모양을 미리 볼 수 있는 멋진 레이어 마스크가 있습니다.
Inkscape에서 프로젝트 파일을 열고 채우기 및 획 (시프트+Ctrl+F), PNG 이미지 내보내기 (Shift+Ctrl+E) 및 레이어 (Shift+Ctrl+L) 패널이 열리면 시작할 준비가 되었습니다. 레이어 패널은 프로젝트의 핵심이 있는 곳입니다. 전경 그리고 배경 제목 구성 요소를 수용하기 위한 레이어 지침 그리고 마스크 참고용으로 켜고 끌 수 있도록(옆에 있는 작은 눈 아이콘을 클릭하여) 표시됩니다.
아이콘은 앱의 아이덴티티를 표현한 것입니다. 따라서 앱의 성격 특성과 Android와 같은 플랫폼별 디자인 지침을 모두 통합해야 합니다. 머티리얼 디자인 언어가 제공해야 하는 것. 시연을 위해 Material 요소를 사용하는 날씨 앱을 작업하고 있다고 가정해 보겠습니다. 우리는 고전적인 태양과 구름 모티브를 사용하여 사용자에게 앱의 목적을 알리고 약간의 내용을 넣을 수 있습니다. Android 환경에 잘 어울리도록 그림자와 기하학을 사용하여 이 기본 디자인을 회전해 보세요.
배경
중앙에 푸른 하늘과 노란 태양으로 구성된 배경 설정부터 시작하겠습니다. 선회 마스크 보이지 않는 경우 선택하여 표시합니다. 배경 레이어, 전체 캔버스를 직사각형과 정사각형 만들기 도구(F4)를 사용하여 직사각형의 채우기 색상을 설정합니다. 채우기 및 획 에 따라 64B5F6FF(연한 파란색)로 소재 색상 팔레트. 그런 다음 원, 타원 및 호 만들기 (F5) 도구를 사용하고 Shift와 Ctrl을 누른 채 키라인 중앙에서 두 번째로 큰 원까지 원을 그리고 색상을 FFEE58FF로 설정하면 따뜻한 작은 태양이 나옵니다. 모든 종류의 디자인에서 기본 기하학을 고수하는 것은 항상 좋은 일이며, 특히 Android의 디자인 언어는 단순성을 장려합니다. 머티리얼 지침을 준수하기 위해 태양에 미묘한 그림자도 제공합니다. 필터 → 그림자 및 광선 → 그림자 적용.
전경
에 온다 전경, 다른 원의 원주에서 원을 그려 태양 주위에 구름 그룹을 그리고 모두 EEEEEEFF의 채우기 색상을 지정합니다. 그런 다음 여러 개체를 마우스 오른쪽 버튼으로 클릭하고 선택하여 원을 적절하게 그룹화합니다. 그룹, 그리고 결국 얻은 두 개의 최종 모양에 대해 그림자 생성기를 실행합니다. 선회 지침 보이지 않고 전환됨 전경 그리고 배경 또는 날씨 앱 아이콘의 구성 레이어를 볼 수 있습니다. 앱 아이콘을 홈 화면으로 드래그하면 구름이 정지해 있는 태양을 향해 쏟아질 것입니다!
결과
마스크 이제 표시되도록 설정하고 조정할 수 있습니다. 노드별 경로 편집 (F2) 다양한 모양 마스크를 시도하고 시뮬레이션합니다. 또한 다음을 사용하여 두 레이어를 별도로 내보낼 수 있습니다. PNG 이미지 내보내기 사용법을 위한 패널 안드로이드 스튜디오에서, 그리고 함께 구글 플레이 아이콘.
제품 아이콘을 만드는 동안 애플리케이션의 목적을 가장 추상적인 시각적 형태로 추출하고 간단한 기하학을 사용하여 표현하는 것이 항상 좋은 습관입니다. 디자인의 구성 요소가 단순할수록 일반적으로 더 좋고 안정적으로 작동하며 이는 그래픽 디자인에서도 마찬가지입니다. 대부분의 경우 전경에는 개체 모양이 있고 배경에는 단색이나 패턴이 있습니다(또는 그 반대)는 잘 작동하지만 예제의 경우처럼 느껴지면 다른 객체 레이어를 사용할 수 있습니다. 필요한; 그림자를 너무 많이 쌓거나 사용하면 아이콘 디자인이 복잡해집니다.
공식 머티리얼 인터페이스에서 아이콘 디자인에 대한 자세한 내용을 읽을 수 있습니다. 소재 웹사이트에서 아이콘 디자인에 사용할 무료 시스템 아이콘을 가져옵니다. 같은 웹사이트.