예쁘고 멋진 앱 아이콘 만들기 위한 8단계 공개

예쁘고 멋진 앱 아이콘 만들기 위한 8단계를 소개합니다.

아이콘은 작은 요소이지만 사용자가 애플리케이션을 만났을 때 가장 먼저 볼 수 있는 아이콘으로, 첫인상이 오랫동안 지속될 수 있습니다.

따라서 제품이 매력적이고 명확하며 설득력 있는 아이콘을 갖는 것은 매우 중요합니다. 하지만 어떻게 하면 그것에 도달할 수 있을까요? 저는 어도비 일러스트레이터 뿐만 아니라 펜과 종이를 사용하여 이러한 단계들을 통과하는 데 있어서 저의 지식을 공유하고자 합니다.

앱 아이콘 만들기 위한 8단계 소개

저는 10년 이상을 아이콘 디자이너로 일했고, 지금도 가끔 어플리케이션 아이콘을 만들고 있기 때문에 제 경험이 유용하고 제 팁 중 일부를 작업에 사용할 수 있을 것입니다. 예를 들어, 위험한 날씨 상황(폭풍이나 허리케인 등)에 대해 경고하고 상황에 따라 재산을 보장할 것을 제안하는 가상의 보험 중심 응용 프로그램 “Weather Event”의 아이콘을 만들어 보겠습니다.

1단계: 응용프로그램 연구

가장 흥미로운 부분인 그림을 그리기 전에, 여러분이 저와 같다면 몇 가지 필요한 단계를 통과해야 합니다.우리가 뭘 그릴지 알아야 하니까 그렇죠? 그래서 우선 우리는 다음을 이해해야 합니다.

  • 애플리케이션이 수행하는 작업
  • 누가 그걸 무슨 이유로 사용하나?

이러한 단계는 매우 중요합니다. 이 정보가 없으면 대상 사용자가 인식할 수 있고 사용자가 통신해야 할 내용을 전달하는 아이콘을 만들 수 없습니다. 우리의 경우, 날씨 상황에 따라 필요한 때에 맞춰 자신의 재산을 보장하는 데 관심이 있는 사람들이 애플리케이션을 사용하게 될 것입니다.

2단계: 비유 찾기

최상의 경우, 은유는 응용 프로그램의 목적을 반영해야 합니다. “날씨 이벤트”는 아주 간단하게 들립니다. 아이콘에 어떤 종류의 날씨 상태를 나타내는 것과 위험 알림을 나타내는 것 그리고 아마도 보험을 나타내는 것이 포함되어야 한다는 것은 분명합니다.

초기 아이디어는 태양, 구름, 우산, 허리케인(날씨의 경우), 메시지/말풍선, 번개, 경고 삼각형(이벤트의 경우), 손, 집, 우산, 구명부이, 방패(보험의 경우)였습니다. 동료들과 브레인스토밍을 한 후, 우리는 더 깊은 추상화 단계로 가서 더 많은 비유를 얻었습니다.

이제 우리는 많은 아이디어를 선택할 수 있습니다.우리는 스케치를 통해 많은 가능한 조합을 할 수 있고, 그 후에 우리는 무엇이 가장 적합한지 결정할 수 있습니다.

3단계: 스타일 정의

스케치에 들어가기 전 어떤 스타일을 사용할지 정하는 것이 좋습니다.최종 결과에 가까운 스케치를 고객에게 보여주기 때문에 나중에 반복을 줄일 수 있습니다. 아이콘 스타일이 너무 많아서 모두 설명할 수 없지만, 매우 일반적인 경우 아이콘 스타일은 아이콘을 만드는 데 사용된 세부 사항, 색상, 예술적 기법, 효과 및 관점에 따라 그룹으로 나눌 수 있습니다.

모바일 앱 아이콘을 만들 예정이니, 재료 디자인이나 iOS 스타일을 고수해 보자, 디테일은 중간 정도, 효과는 제한적으로 사용하는 것을 의미합니다.두 OS 모두에 적합한 것을 만들어 봅시다.

4단계: 스케치

처음에는 어떤 것이 시각적 관점에서 더 잘 보이고 어떤 것이 응용 프로그램의 목적을 가장 잘 설명하는지 분명하지 않기 때문에 여러 가지 아이디어를 스케치하는 것은 항상 좋습니다. 고객이 마지막에 무엇을 기대해야 하는지 이해할 수 있도록 도와주기 때문에 스케치가 아이디어를 자세히 설명할 때 더 좋습니다.

제가 처음에 대략적인 개념들을 가지고 있다가 그것들을 결합한 것을 볼 수 있습니다.스케치를 하기 전에 화려한 우산을 구상하는 것이 정말 마음에 들었지만, 그것이 훨씬 더 적합한 비유이기 때문에 결국 번개와 함께 하기로 결정했습니다.

이제 스케치가 준비되었지만 렌더링 작업을 진행하기 전에 주변 환경을 설정해야 합니다.

5단계: 작업 공간 설정

예술가들이 작품을 만들기 전에 캔버스, 붓, 고통을 준비하는 것처럼, 우리는 디지털 도구를 적절하게 설정해야 합니다.보통 Adobe Illustrator에서 플랫한 앱 아이콘을 만들지만 작업 공간은 다음과 같습니다. 표준 일러스트레이터 팔레트 및 설정을 제외하고 일반적인 경우 다음과 같은 내용이 있습니다.

  1. 모든 아이콘 크기(Android, iOS)의 아트보드 (위 이미지 참조)
  2. 그리드, 스캔된 스케치 및 아이콘의 빈 레이어로 레이어를 구분합니다.
  3. iOS 색상의 폴더를 스와치합니다.
  4. 소재 색상은 별도 팔레트.

이 정도면 안드로이드나 iOS용 애플리케이션 아이콘을 만들 수 있습니다.

6단계: 렌더링

그것은 가장 노동집약적이면서도 매우 감정적인 부분입니다.그리고 나는 그것을 몇 단계로 나눌 것입니다.

6.1 벡터라이징

이 단계에서는 펜 도구로 기본 모양을 만듭니다.도형은 스케치를 정확하게 반복할 필요가 없습니다.그리드나 더 나은 구성에 따라 조정하는 것이 더 좋을 때도 있습니다.마지막으로, 저는 다음과 같은 것이 있습니다.

6.2 착색

OS가 하나로 제한되는 것이 아니기 때문에 이번에는 재료 색상을 아이콘에 사용하려고 합니다. 재료 팔레트에 더 많은 색상이 포함되어 있고 이를 적용하여 멋진 효과, 부드러운 그라디언트 및 매우 상세한 아이콘에 대한 충분한 대비를 만들 수 있기 때문입니다. 또한 올바른 방향으로 진행되어 가고 있는지 확인하기 위해 여러 가지 색상 조합을 시도해 보는 것이 좋습니다.

6.3 효과 적용

이제 아이콘에 완성된 느낌을 주기 위해 몇 가지 효과를 더 적용합니다. 그림자와 종이 두께를 재현하기 위한 획입니다.

7단계: 크기 조정

래스터 요소가 없는 백터 형식의 앱 아이콘이 있더라도 수동으로 크기를 조정하는 것이 좋습니다. 1024×1024에서 512×512 픽셀, 180×180 픽셀까지 축소할 때는 그렇게 중요하지 않습니다. 하지만 작은 사이즈의 경우에는 차이가 확연합니다. 특히 도면을 확대/축소할 경우 크기 조정을 위한 체크리스트는 다음과 같습니다.

  1. 작은 요소를 작은 크기로 줄여라. 그렇지 않으면 지저분하고 바삭바삭하지 않은 것처럼 보일 것입니다.
  2. 획을 조정/제거합니다.
  3. 큰 해상도의 앱 아이콘을 먼저 만든 경우 효과(예: 드롭 그림자)를 축소합니다.
  4. 색상 대비를 더 많이 하십시오.
  5. 모든 경로의 모든 키 포인트가 픽셀 그리드 안에 있는지 확인합니다(조정하지 않을 경우).

8단계: 활용하기

앱 아이콘 만들기 모든 과정이 끝났다면 드디어 결과물을 활용할 수 있게 되었습니다. 고객에게 완성된 앱 아이콘을 보여주거나 드리블(dribbble.com)에 올리기도 합니다. 하지만 작품을 멋진 액자에 담아 선보일 수 있도록 해주세요. 왜냐하면 제품의 좋은 면을 공개하고 다른 사람들이 당신만큼 그것을 좋아하게 만드는 것이 매우 중요하기 때문입니다.