대화상자 아이콘

대화상자 아이콘은 사용자에게 상호작용을 요청하는 팝업 대화상자에 표시됩니다. 어두운 배경에서 눈에 띄기 위해 밝은 그라데이션과 내부 그림자를 사용합니다.

밀도별 아이콘 집합 제공에 설명된 대로 저밀도, 중밀도, 고밀도 화면에 별도의 아이콘 집합을 만들어야 합니다. 이렇게 하면 애플리케이션을 설치할 수 있는 다양한 기기에서 아이콘이 올바르게 표시됩니다. 각 밀도에 권장되는 완성된 아이콘 크기의 목록은 표 1을 참고하세요. 또한 여러 아이콘 세트를 사용하는 방법에 관한 제안사항은 디자이너를 위한 도움말을 참고하세요.

표 1. 일반화된 세 가지 화면 밀도별로 완성된 대화상자 아이콘 크기 요약

ldpi (120dpi)
(저밀도 화면)
mdpi (160dpi)
(중밀도 화면)
hdpi (240dpi)
(고밀도 화면)
xhdpi (320dpi)
(초고밀도 화면)
대화상자 아이콘 크기 24 x 24 px 32 x 32 px 48 x 48 px 64 x 64 px

최종 아트는 투명한 PNG 파일로 내보내야 합니다. 배경색을 포함하지 마세요.

Adobe Photoshop에서 아이콘을 만들기 위한 템플릿은 Icon Templates Pack에서 사용할 수 있습니다.

모든 Android 버전

다음 가이드라인에서는 모든 버전의 Android 플랫폼에 맞춰 대화상자 아이콘을 디자인하는 방법을 설명합니다.

구조

  • 대화상자 아이콘에는 1픽셀의 safeframe이 있습니다. 기본 도형은 SafeFrame 내에 맞아야 하지만 둥근 도형의 앤티앨리어싱은 Safeframe과 겹칠 수 있습니다.
  • 이 페이지에 지정된 모든 크기는 Adobe Photoshop의 32x32 픽셀 아트보드 크기를 기준으로 합니다. Photoshop 템플릿 내부의 경계 상자 주위에 1픽셀의 패딩을 유지합니다.
대화상자 아이콘 구조 뷰

그림 1. 대화상자 아이콘의 Safeframe 및 채우기 경사. 아이콘 크기는 32x32입니다.

빛, 효과 및 그림자

대화상자 아이콘은 평평하고 사진이 정면으로 표시됩니다. 어두운 배경에서 눈에 띄기 위해 밝은 그라데이션과 내부 그림자를 사용하여 구성됩니다.

대화상자 아이콘의 빛, 효과, 그림자 뷰

그림 2. 대화상자 아이콘의 빛, 효과 및 그림자

1.앞부분:경사 오버레이 | 각도 90°
맨 아래: r 223 | g 223 | b 223
맨 위: r 249 | g 249 | b 249
맨 아래 색상 위치: 0%
맨 위 색상 위치: 75%
2.내부 그림자:검은색 | 25% 불투명도 |
각도 -90° 거리 1픽셀 | 크기 0픽셀

단계별 안내

  1. Adobe Illustrator와 같은 도구를 사용하여 기본 도형을 만듭니다.
  2. 도형을 Adobe Photoshop과 같은 도구로 가져와서 배경이 투명한 32x32픽셀 이미지에 맞게 조정합니다.
  3. 적절한 필터를 위해 그림 2의 효과를 추가합니다.
  4. 투명도가 사용된 PNG 파일로 32x32 아이콘을 내보냅니다.