Sketch에서 정확한 디자인을위한 10 가지 팁

Sketch를 사용하면 확장 가능한 벡터와 정밀한 픽셀 제어라는 두 가지 장점을 모두 얻을 수 있습니다. Sketch에서 찾을 수있는 도구는 훌륭한 디자인의 기초가되는 날카로운 모서리와 정의되고 균형 잡힌 윤곽을 만드는 데 도움이됩니다.

Sketch는 모양을 픽셀 가장자리에 자동으로 정렬 할 수 있으며 각 픽셀을 미리보고 편집하여 내보내기를 선명하게 할 수있는 기능도 제공합니다. 다양한 화면 크기, 픽셀 밀도 및 사용 가능한 플랫폼에 맞게 자산을 준비 할 때 특히 중요합니다.

벡터 모양으로 작업하고 에셋을 내보낼 때 모든 모양과 레이어가 문서의 픽셀 격자에 정렬되어 있는지 확인하여 분수로 인한 흐릿한 가장자리를 방지 할 수 있습니다.



Inspector를 주시하고 Pixel Fitting 및 Pixel Zoom과 같은 도구를 활용하면 정확한 편집을 쉽게 수행 할 수 있습니다. 이 튜토리얼에서는 완벽한 픽셀로 디자인하는 데 가장 좋아하는 도구를 살펴 봅니다.

슬라이스 도구는 포토샵에서 무엇을합니까?

01. 사전 설정 아트 보드

모바일 용으로 디자인 할 때 항상 다양한 화면 크기와 해상도를 염두에 둡니다. 원래 iPhone 시대에는 화면 크기와 해상도가 하나뿐이었습니다. 1 포인트는 1 픽셀과 같습니다. 오늘날 iPhone의 Retina 디스플레이와 다양한 Android 픽셀 밀도로 인해 상황이 더 복잡해 보입니다.

스케치 디자인 도구

스케치에는 기본 제공되는 일반적인 대지 크기가 있습니다.

그러나 Sketch의 사전 설정된 아트 보드, 약간의 계획 및 간단한 수학을 사용하면 여러 화면 크기 및 픽셀 밀도에 대한 자산을 준비하는 것이 쉽습니다.

02. 1x 디자인

Apple이 첫 번째 Retina iPhone을 출시했을 때 많은 디자이너가 즉시 2 배 해상도로 디자인하기 시작했고, 나중에 생각할 때 레거시 전화의 경우 1 배로 축소했습니다. 그러나 iPhone 6 Plus가 출시되었을 때 문제가되었습니다.

스케치 디자인 도구

여러 해상도로 자산을 내보내는 데 몇 초가 걸립니다.

결국, 2x로 정확한 픽셀을 디자인하면 1.5x로 확대하면 분수 위치가 될 가능성이 있습니다. 많은 디자이너가 1x로 다시 디자인했습니다. 벡터 차원이 2 또는 3으로 조정될 때 소수점 이하 자릿수로 끝나지 않을 것이라는 보장이 있기 때문입니다.

03. 검사관

디자인이 정확한지 여부를 감지하는 첫 번째 방법은 위치 및 크기 값을 인식하는 것입니다. Inspector는 Sketch 문서의 기본 명령 센터입니다. 선택한 모양 또는 레이어에 대한 모든 속성과 세부 정보가 포함됩니다. 분수의 형태로 불완전한 부분을 찾을 수있는 곳입니다.

04. 위치 및 크기 값

분수는 내 보낸 비트 맵 자산에 흐릿한 가장자리가있을 수있는 주된 이유 인 하위 픽셀의 렌더링을 유발합니다. 이를 수동으로 수정할 수 있습니다. 위치 및 크기 값을 전체 숫자로 편집하기 만하면됩니다.

스케치 디자인 도구

분수로 인해 가장자리가 흐릿 해집니다.

그룹 내 셰이프 작업은 지루할 수 있지만 cmd + Click을 사용하면 셰이프를 직접 선택하고 값을 편집 할 수 있습니다.

05. 픽셀 표시

겉보기에 매끄러운 벡터 곡선과 모서리는 기만적 일 수 있습니다. 픽셀 표시를 활성화하면 문서의 모든 개별 픽셀을 볼 수 있습니다. 이 설정은보기>
캔버스> 픽셀 표시 (shift + P).

표시되는 내용은 이미지를 PNG로 내 보낸 다음 확대하는 것과 같습니다. 100 % 확대 (실제 크기) 일 때는이 두 모드간에 차이가 없지만 더 확대하면 픽셀이 표시됩니다.

06. 픽셀 격자 표시

내보낼 때 디자인이 어떻게 보일지에 대한 힌트를 원하지만 큰 흐릿한 픽셀을보고 싶지 않다면 픽셀 확대 / 축소가 당신의 친구입니다. 보기> 캔버스> 픽셀 격자 표시 (Shift + X)로 이동하여 픽셀 격자 표시가 활성화되었는지 확인합니다.

포토샵에서 초상화를 그리는 방법

픽셀 그리드 표시를 사용하면 보이지 않는 낮은 대비의 퍼지 픽셀을 구분할 수 있습니다. 픽셀 표시와 결합하면 픽셀 격자와 정렬되지 않는 모든 가장자리가 표시됩니다.

07. 가장 가까운 픽셀 가장자리로 반올림

Sketch에서 가장 숨겨진 기능으로 불리는 Round to Nearest Pixel Edge는 많은 픽셀 정렬 결함을 해결합니다. 하위 픽셀 값이있는 벡터 모양을 찾으면 모양을 선택한 다음 레이어> 가장 가까운 픽셀 가장자리로 라운드를 선택할 수 있습니다.

스케치 디자인 도구

편집 모드의 픽셀 반올림 기본 설정

Sketch는 가장자리를 픽셀 격자에 자동으로 정렬합니다. 이것은 위치 및 크기 값 모두에 적용됩니다. 이 기능은 특히 아이콘을 가져올 때 디자인의 일관성을 유지하는 빠른 방법을 제공합니다.

08. 벡터 포인트 편집

모양이 원하는대로 정렬되지 않은 경우 모양을 선택하고 도구 모음에서 편집을 클릭하여 개별 벡터 포인트를 편집 할 수 있습니다. 그러면 Inspector에서 벡터 편집 옵션이 나타나며, 여기서 네 가지 포인트 모드 사이를 전환하고 픽셀 반올림 기본 설정을 선택할 수 있습니다.

09. 전체 픽셀로 반올림

픽셀 정밀도는 필요할 때 유용하지만 스스로 제한 할 필요는 없습니다. 예를 들어 작은 아이콘을 디자인 할 때 포인트 이동의 완전한 자유를 위해 픽셀 반올림 기본 설정을 비활성화 할 수 있습니다. 그러나 모양의 가장자리가 일관되도록하려면 원형에서 전체 (또는 절반) 픽셀을 활성화하면 도움이됩니다.

10. 픽셀 피팅

처음부터 픽셀 정밀도를 보장하는 글로벌 설정은 Sketch> Preferences ...> General 탭> Pixel Fitting에있는 Pixel Fitting 설정입니다. 이 환경 설정을 사용하면 삽입하거나 크기를 조정하는 모든 레이어가 전체 픽셀 가장자리에 놓이게됩니다 (회전 제외).

스케치 디자인 도구

Sketch의 일반 기본 설정에서 픽셀 피팅 옵션을 찾을 수 있습니다.

픽셀 그리드의 자유도가 부족하여 불만족스러운 경우 필요한 경우 픽셀 피팅을 비활성화 할 수 있습니다.

모든 그래픽 디자이너가 알아야 할 사항

픽셀 완벽을위한 디자인은 많은 디자이너에게 중요한 관행입니다. 이러한 종류의 정밀도는 특히 깨끗하고 선명한 렌더링을 위해 미래에 대비 한 설계를 원할 때 먼 길을갑니다. 그럼에도 불구하고 완전한 자유 이동을 원할 때이 규칙을 확실히 어길 수 있습니다.

이것이 제가 Sketch에 대해 좋아하는 것입니다. 유연성과 정밀한 픽셀 제어의 독특한 조화를 제공합니다. Sketch를 사용해 보지 않았다면 지금 무료 평가판을 다운로드하십시오.

이 기사는 원래 넷 매거진 문제 278.