아이콘 디자인을위한 최고의 워크 플로우 : 큰 시작 또는 작은 시작?

여러 크기로 제공해야하는 아이콘을 디자인 할 때 더 작은 크기로 시작한 다음 더 큰 크기로 확장합니까? 아니면 큰 규모로 시작하고 축소합니까?

두 가지 장점이 있습니다. 워크 플로를 개선하려고하므로 다른 사람들의 의견이 도움이 될 것입니다. 크기가 관련된 Mac 또는 Windows 아이콘을 디자인한다고 가정 해 봅시다. 크기는 대부분 정확한 배수입니다.

OS X의 경우 표준 앱 아이콘 크기 는 다음과 같습니다.

• 16x16, 32x32, 128x128, 256x256, 512x512 및 1024x1024.

Windows 7의 경우 표준 앱 아이콘 크기 는 다음과 같습니다.

• 16x16, 32x32, 48x48, 64x64 및 256x256.

iOS의 표준 앱 아이콘 크기 는 다음과 같습니다.

• 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 및 1024x1024.

Android의 경우 표준 앱 아이콘 크기 는 다음과 같습니다.

• 36x36, 48x48, 72x72, 96x96 및 512x512.

iOS 및 Android의 경우 아이콘 크기가 약간 우연히 발생하며 스케일도 관련이 없으므로 디자인 격자에 대한 영리함이 덜 중요합니다. 여러 크기의 픽셀 경계에 맞는 좌표를 찾을 가능성이 적기 때문입니다.

방법 1 : 축소

1. 레이어 스타일과 같은 벡터 및 생성 된 효과를 사용하여 아이콘을 가장 큰 크기 (보통 1024x1024)로 디자인하십시오.

2. 문서를 복제하고 축소하여 더 작은 크기를 만듭니다.

3. 필요한 부분을 조정하고 최종 이미지를 저장하십시오.

훌륭하지만 여러 크기에서 작동하는 그리드에 요소를 정렬 할 수있는 기회가 없습니다. 굵은 격자 선을 사용하면 약간 도움이 될 것 같습니다. 예를 들어, 16px 격자가있는 1024 × 1024 문서는 스냅 포인트가 64 × 64 크기의 픽셀 스냅 가장자리를 제공함을 의미합니다. 아이디어는 세부적으로 디자인하고 더 작은 크기의 그리드에 맞추는 것이므로 중요한 위치에 부딪칩니다.

방법 2 : 확장

1. 레이어 스타일과 같은 벡터 및 생성 된 효과를 사용하여 아이콘을 최소 또는 가장 작은 크기 (종종 32x32 또는 64x64)로 디자인하십시오. 일반적으로 16x16에는 세부 정보가 충분하지 않아 시작점으로 사용할 수 없습니다.

2. 문서를 복제하고 확장하여 더 큰 크기를 만들고, 작은 크기를 위해 축소합니다.

3. 필요한 부분을 조정하고 최종 이미지를 저장하십시오.

이것은 상세하지 않은 간단한 아이콘으로 이어지는 경향이 있으므로 이런 식으로 일하는 것을 좋아하지 않습니다.

방법 3 : 확장 및 축소

1. 레이어 스타일과 같은 벡터 및 생성 된 효과를 사용하여 더 작은 크기 (대개 32x32 또는 64x64)로 거친 디자인을 만듭니다.

2. 문서를 가장 큰 크기로 확장하고 세부 사항을 추가하십시오. 아이콘이 다듬어지고 대부분의 디테일이 추가되는 지점입니다.

3. 모든 작은 크기에 맞게 문서를 복제하고 축소합니다.

4. 필요한 부분을 조정하고 최종 이미지를 저장하십시오.

이것은 다른 방법의 장단점이있는 가장 좋은 방법 인 것 같습니다. 약간 관련이있는 점은 일반적으로 iOS 아이콘을 912 × 912로 디자인한다는 것을 의미합니다. 왜냐하면 iPhone의 Retina가 아닌 아이콘 크기 57 × 57의 16 배이기 때문입니다.

여러 크기로 제공해야하는 아이콘을 디자인하는 더 좋은 방법이 있습니까?

최소한의 노력으로 최상의 결과를 얻는 것이 목표입니다.

가정에 대한 약간의 수정 : Windows와 Mac은 16의 배수를 사용하지만 같은 비율로 확장되지 않습니다. Vista / 7 표준 크기는 16 ² , 32 ² , 48 ² , 256 ² 입니다. OS X은 16 ² , 32 ² , 128 ² , 512 ² (+ HiDPI 버전)입니다. 더 복잡하게 만들기 위해 Windows Vista / 7 기본 확대 / 축소 수준은 16 ² , 48 ² , 96 ² , 256 ^{2 인} 것으로 보이며 2px만큼 작은 단위로 행복하게 확장됩니다. 모든 줌 레벨에서 특정 픽셀 그리드에 대해 걱정할 필요가 없다는 점을 제외하고는 워크 플로에 큰 차이를 두지 않아야합니다.

크기를 크게 조정하지 않는다는 점에서 워크 플로가 다릅니다. 각 크기 수준마다 새로운 이미지가 생성되며 정확히 동일한 레이아웃을 재활용하지 않습니다.

내가 시작하는 크기는 플랫폼에 따라 결정됩니다. Windows 용으로 디자인하면 48x48에서 시작합니다. (이에 대한 과학적 근거는 없지만 기본 Windows 7 확대 / 축소 수준은 48x48 인 "중간"입니다. Vista, OS X, iPhone, iPad 및 Android 아이콘도이 크기에 가깝게 떨어 지므로 편리하고 편리합니다. 편안.)

완전히 완성 된 아이콘은이 크기로 완성되며 패밀리의 다른 아이콘에 대한 참조입니다. 데스크톱 응용 프로그램을 수행하는 경우 Windows의 기본 수준에 맞게 16x, 96x 및 256x의 다른 버전을 만듭니다 (Mac의 경우 자연스럽지 않은 경우). 96x는 일반적으로 48x와 매우 유사합니다.

256x 버전은 완전히 새로운 작품이 될 것입니다. 훨씬 더 자세한 내용 (텍스처링 배경 요소와 같은 작은 경우에도). 더 작은 버전에 맞지 않는 모든 세부 사항이 추가됩니다. 누군가가 거대한 아이콘을 얻기 위해 화면에 전화를 걸면 그들이 보는 것에 만족해야합니다.

16x 버전도 새로운 작품입니다. 아주 작은 세부 사항. 더 큰 버전과 동일한 색상 팔레트로 로고 또는 매우 간단한 아이콘을 식별합니다. 이 크기에서 나는 어떤 것을 아름답게 만들려고 시도하지 않고 바로 알아볼 수 있습니다.

따라서 적어도 동일한 이미지를 가지거나 모든 크기에서 동일한 기본 레이아웃을 사용하려는 의도로 스케일 업하거나 축소하는 것은 중요하지 않습니다. 나는 그것이 도시로 운전하는 것처럼 생각합니다. 먼 거리에서 작지만 식별 가능한 스카이 라인입니다. 가까이 다가가 건물을 고르기 시작합니다. 그럼 당신은있어 에서 IT 및 세부 사항과 차원의 모든 느낌. 각 거리마다 다르게 보였지만 크기에서 크기로 부드럽게 전환되어 온 가족이 해체되지 않습니다.

확실히 큰 규모로 시작하고 축소합니다. 디자이너가 내 소프트웨어의 아이콘을 디자인하도록 할 때마다 아이콘이 더 큰 모양으로 표시되는 것을 선호하고 작은 크기로 제거하거나 강조 할 기능을 결정할 수 있습니다. 작은 요소를 제거하기 전에 아이콘의 내용을 알아야합니다. glyfx 아이콘 에는 동일한 디자인의 크고 작은 아이콘을 해석하는 방법에 대한 좋은 예가 있습니다.

글쎄, 나는 가장 작은 밀도를 위해 모든 것을 만들고 그것을 확장하는 것을 선호합니다. 앱의 전체 레이아웃을 디자인하는 경우 그리드를 사용하면 작업이 훨씬 쉬워지고 개체를 더 작은 그리드로 이동하기 때문에 많은 두통을 줄일 수 있습니다.

워크 플로는 다음과 같습니다. 1. Photoshop에서 가장 작은 dpi로 레이아웃을 만들고 Illustrator에서 아이콘을 계속 만듭니다. 벡터 이미지는 확대에 문제가 없기 때문입니다. 2. 각각의 아이콘 / 객체 등을 만들 때, 동시에 모든 스케일 업 버전을 생성하고 (물론 레이아웃에서보기 좋게 결정될 때) 최종 png를 프로그래머에게 건네줍니다.

iOS를 먼저 시작했다는 점에 유의해야합니다.