런처아이콘 디자인 - leoncheoaikon dijain

1. iOS 스타일가이드 확인

1) iOS Human Interface Guidelines

## 스타일가이드 주소

URL : developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/

App Icon - Icons and Images - iOS - Human Interface Guidelines - Apple Developer

App Icon Every app needs a beautiful and memorable icon that attracts attention in the App Store and stands out on the Home screen. Your icon is the first opportunity to communicate, at a glance, your app’s purpose. It also appears throughout the system,

developer.apple.com

2) iOS 앱아이콘 크기

출처 : https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/

장치	아이콘 크기
iPhone(아이폰)	180px × 180px (60pt × 60pt @ 3x) 120px × 120px (60pt × 60pt @ 2x)
iPad Pro	167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini	152px × 152px (76pt ×76pt @ 3x)
앱스토어	1024px × 1024px (1024pt × 1024pt @ 1x)

- 기기장치마다 다른 크기의 아이콘을 제공

- 1024px로 제작 후 사이즈에 맞게 저장

- 스포트라이트, 설정 및 알림 아이콘은 작기 때문에(최소 40px) 작은 환경에서도 아이콘이 잘 보이게 제작

## 스포트라이트, 설정 및 알림 아이콘

출처 : https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/

3) iOS 앱아이콘 속성

속성	값
체제(확장자)	PNG
색 공간	P3(광역색상), sRGB(색상) 또는 Gray Gamma 2.2(회색조)를 표시합니다. - 색상관리 참조 developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
레이어	투명도(opacity)없이 평평하게 작업
해상도	이미지 크기와 해상도는 기기장치별로 다양하니 각각 확인
모양	둥근 모서리가 없는 정사각형 - 애플 기기들이 알아서 모서리 둥글게 잘라줌

4) iOS 앱아이콘 제작 주의 사항

## 단순하게 제작

- 앱의 본질을 찾아 포인트가 되는 단일 요소를 찾아 단순한 모양으로 표현하세요. 아이콘의 내용이나 모양이 지나치게 복잡하면 작은 크기에서는 식별이 어려울 수 있습니다.

## 초점이 되는 포인트를 한개로 제공

- 주의를 끌고 앱을 명확하게 식별할 수 있는 지점을 중앙으로 한개 잡으세요.

## 한눈에 이해되는 아이콘으로 디자인

- 사람들이 아이콘이 무엇을 나타내는지 파악하기 위해 시간을 들여 분석할 필요가 없어야 합니다. 예를 들어 메인 앱 아이콘은 일반적으로 메일과 연결된 봉투를 사용합니다. 메타포에 맞는 디자인을 사용하면 이해도 쉽고 금방 앱을 선택할 수 있습니다.

## 배경을 단순하게 유지하고 투명성을 피하기

- 아이콘이 불투명한지 확인하고, 배경을 너무 어지럽게 사용하지 마세요. 주변의 다른 앱 아이콘을 압도하지 않도록 간단한 배경을 제공합니다.

## 필수이거나 로고의 일부일때만 단어를 사용

- 홈화면의 아이콘 아래에 앱 이름이 표시됩니다. 이름을 반복하거나, 재생되는 앱으로 표시시 불필요한 단어를 포함하지 마세요. 디자인에 텍스트가 포함도니 경우 앱에서 제공하는 실제 콘텐츠와 관련된 단어를 강조하세요.

## 사진, 스크린샷, 인터페이스 요소를 미포함

- 작은 크기에서 사진은 세부 정보를 알아보기가 쉽지 않습니다. 스크린 샷은 앱 아이콘에 비해 너무 복작하며 일반적으로 앱의 목적을 전달하는데 도움이 되지 않습니다.

## Apple에서 사용되는 앱아이콘 사용금지

- 애플 제품에 기본적으로 내장되어 있는 앱아이콘은 저작권으로 보호되며, 아이콘이나 이미지로 복제할 수 없습니다.

## 인터페이스 전체에 앱 아이콘을 배치하지 말 것

- 앱 전체에서 다른 용도로 사용되는 아이콘을 보는 것은 혼란스러울 수 있습니다. 대신 아이콘의 색 구송표를 통합하는 것이 좋습니다.

## 다른 배경 화면에 대해 아이콘을 테스트

- 사람들이 홈 화면에 어떤 배경 화면을 선택할지 예측할 수 없으므로 밝은 색상이나 어두운 색상으로 앱을 테스트하지 마세요. 다른 사진에서 실제 어떻게 보이는지 확인하세요. 동적인 배경을 가진 실제 장치에서도 테스트를 해보세요.

## 아이콘 모서리를 정사각형으로 유지합니다.

- 시스템은 아이콘 모서리를 자동으로 둥글게하는 마스크가 적용됩니다. 그리고 잘 맞추려해서 미묘하게 맞지 않을 수 있으므로 정사각형을 유지해서 처리해주세요.

2. iOS 앱아이콘을 포토샵으로 제작

1) 1024px × 1024px로 새창만들기

- 앱스토어에 올리는 사이즈가 가장 크기 때문에 그 사이즈로 작업

새창 단축키 : [ctrl]+[n]

2) 모서리 둥근 사각형 제작

- 가로 : 1024px, 세로 : 1024px, 모서리 둥글기 220px로 설정

- 원래 모서리 둥글기는 하지 않아도 기계장치가 잘 마스크 처리해주나 디자인적으로 보기 위해 제작

- 포토샵에서 모서리 둥근 사각형선택

- 창에 클릭하면 정확한 사이즈로 제작 가능

- 이때 면의 색은 #26ccfc으로 처리했습니다.

3) Smart Object로 변경

- 모서리가 둥근 사각형 레이어에서 마우스 오른쪽을 누릅니다.

- [Convert to Smart Object]를 선택합니다.

- 그럼 아래와 같은 아이콘이 뜹니다.

- 이름을 [app1024]로 변경했습니다.

- 그리고 썸네일을 더블클릭 눌러줍니다.

- 그럼 스마트 오브젝트 내부로 들어가게 됩니다.

4) Smart Object 내부에 나머지 모양 채우기

- 스마트 오브젝트를 더블클릭해서 안으로 들어오면 [*.psb]라는 것 안으로 들어오게 됩니다.

- 내부에 테두리와 토끼를 흰색으로 그려봤습니다.

- 다 그리면 psb파일을 [X버튼]눌러서 닫고 저장해주세요.

- X버튼을 누르면 이런 창이 뜹니다.

- 이때 [yes]버튼을 누르고 저장해줍니다.

5) iOS의 각각 크기에 맞는 사이즈로 변경

- 위에서 스타일가이드를 살펴보았듯이, 필요한 사이즈는 180, 120, 167, 152 등이 있습니다.

- [canvas size]로 옆으로 더 넓어지도록 저장합니다.

- 단축키는 [Ctrl]+[alt]+[c]

- [ctrl]+[j]를 눌러 레이어 복사 후 필요한 사이즈별로 복제한 후 사이즈를 줄입니다.

6) Smart Object내부로 들어가서 모양 한번에 변경

- 어떤 스마트오브젝트중 한개를 더블클릭해서 들어가서 모양을 변경후 저장해줍니다.

- 그럼 모든 오브젝트의 이미지가 변경되는 것을 확인할 수 있습니다.

7) 각각 이미지들을 슬라이스해서 자르기

- 툴박스의 slice툴을 이용해서 필요한 곳을 선택해서 슬라이스 처리해줍니다.

8) 필요한 이미지만 png로 저장

- [save for web]에서 필요한 부분만 [shift]키를 누릅니다.

- 그리고 저장시 [all slices]가 아닌 [selected slices]를 누릅니다.

3. 기기별 사이즈로 잘라주는 사이트

- url : appiconmaker.co/

4. 안드로이드 스타일가이드

1) iOS Human Interface Guidelines

## 스타일가이드 주소

- URL : material.io/design/platform-guidance/android-icons.html#usage

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

## iconography 주소

- URL : material.io/design/iconography/product-icons.html#design-principles

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

2) 아이콘 크기

- 아이콘을 만들 때 400 % (192 x 192 dp)로보고 편집하면 가장자리가 4dp로 표시됩니다. 이 비율을 유지하면 원본에 대한 모든 변경 사항이 비례 적으로 확대 또는 축소되어 배율이 100 % (48dp)로 돌아 왔을 때 날카로운 가장자리와 올바른 정렬을 유지합니다.