완벽한 픽셀 아이콘을 만드는 방법

안녕 얘들 아, 그래서 오늘의 자습서는 다소 다르며 특별한 경우도 있습니다. 왜냐하면 우리는 많은 사람들에게 좌절의 원천이되어 왔을 것이고, 현재 매일 아이콘을 만들고 있습니다.

제목이 충분히 명확하지 않은 경우 다음 순간에 Pixel Perfect Workflow를 준수하기 위해 가능한 한 기술을 습득하고 알아야 할 사항을 모두 보여줌으로써 개선 할 수 있다고 말하겠습니다. 아이콘을 만들 때 당신의 기술.

그렇게 말하면 앉아서 정말 재미있어지기 때문에 편안해집니다.

픽셀 완벽한 개념의 이해

우리가 전체적인 "이야기를하는 방법"에 대해 이야기하기 전에 몇 초간의 시간을 들여서 왜 시도해야하는지 이해하는 데 필요한 몇 가지 개념에 대해 이야기하고 싶습니다. Pixel Perfect 워크 플로우를 준수하십시오.

1. 픽셀

가장 기본적인 개념, 즉 픽셀 의 개념부터 시작해 보겠습니다 . 여러분이 아시다시피, 모든 디스플레이는 모니터의 것이거나 모바일 장치가 픽셀 이라고하는 작은 개별 점으로 구성됩니다 . 그것들은 한때 이미지를 구성하는 가장 작은 주소 지정 가능 요소입니다.

기술적 관점에서 픽셀은 해상도 를 측정하는 데 사용되는 단위이기도합니다. 일반적으로 너비 x 높이 (예 : 1920x1080 픽셀) 로 인용됩니다 . 이제는 작동 방식이 간단합니다. 해상도가 높을수록 이미지를 표시하는 데 사용되는 픽셀 수가 많아 지므로 이미지가 선명하게 보입니다. 낮은 해상도를 사용하고 아이디어를 얻으십시오.

이제 해상도 는 이미지의 크기 (따라서 디테일 수준) 또는 화면에서 표시 할 수있는 최대 출력을 설명하는 데 사용할 수 있기 때문에 다소 까다 롭습니다. 그렇더라도 해상도 는 걱정할 필요가 없습니다. , 적어도 지금은.

단 한 점만 사용하여 구성된 이미지는 거의 볼 수 없으므로 픽셀 자체는 중요하지 않습니다. 좋아, 어쩌면 당신 중 일부는 그랬지만, 진지해, 왜 그걸 원할거야? 픽셀은 픽셀 그리드 내에서 사용될 때 강력한 매개체가됩니다.

1. 2. 픽셀 그리드

픽셀 격자는 이미지를 표시하기 위해 모니터가 사용하는 실제 패브릭이며 수직 및 수평 방향으로 나란히 놓인 많은 수의 픽셀로 구성됩니다.

이제 해상도 와 마찬가지로 픽셀 격자 는 장치의 해상도 (최대 출력)와 이미지 자체의 해상도 (이미지 크기)를 모두 설명하는 데 사용할 수 있으므로 이중 특성을 갖습니다.

그것이 작동하는 방식은 정말 간단합니다 : 이미지를 벡터 또는 래스터로 만들면 Grid의 특정 픽셀 수를 차지합니다. 이는 모니터 자체의 유한 픽셀 격자와 독립적 일 수 있습니다. 즉, 아트웍을 기기의 사양 (최대 해상도)으로 제한 할 필요는 없지만 표시하려는 경우 해당 화면에 맞게 다시 샘플링해야합니다.

Illustrator 자체는 픽셀 격자 를 미리보고 확대하는 기능을 제공 하지만 조금 나중에 추가 할 수 있습니다.

1. 3. "픽셀 완벽한"개념

이제는 이미지가 어떻게 생성되고 표시되는지에 대한 핵심 개념에 대해 간략히 이야기 했으므로 이제는 Pixel Perfect개념 의 의미를 다룰 시간 이며 정확히 무엇을 의미 하는지 알아 보겠습니다 .

그러기 위해서는 기술이 초기 단계 였고, 4K가 아직 가능하다고 생각조차하지 않았던 짧은 시간 안에 다시 돌아 가야 할 것입니다. 저는 Xerox 8010 Star가 태어 났을 때 80 년대에 대해 이야기하고 있으며, 첫 번째 UI (사용자 인터페이스)와 함께 말합니다.

처음으로 우리는 인간이 기계와 상호 작용하는 방식에 대해 재고하기 시작하여 인간과 기계 간의 의사 소통 장벽을 깨기에 충분할만큼 강력한 시각적 상징을 만들었습니다.

이 상징은 데이비드 스미스 (David Smith)와 노엄 콕스 (Norm Cox)가 개발했으며 현재 Icon Design의 모든 토대를 유지하고있는 최초의 아이콘입니다.

이제는 공간 앤티 앨리어싱이 아직 개발되지 않아 모니터가 알파 채널을 사용하여 부드러운 선과 모서리를 표시 할 수 없으므로이 아이콘이 현재보다 훨씬 간단 해졌습니다.

스미스 (Smith)와 콕스 (Cox)는 픽셀 그리드 (Pixel Grid) 에 크게 의존함으로써 시간의 한계를 극복해야했습니다 .

그들은 사각형 그리드를 사용하여 각 아이콘을 만들었 기 때문에 검정색을 사용하여 픽셀을 픽셀 단위로 선택하고 페인팅하여 (색깔있는 모니터가 아직 나오지 않았기 때문에) 그들이했던 방식은 꽤 직설적이었습니다.

이 시점에서 당신은 이야기와 주제 사이의 연결을 볼 수 있습니다. 왜냐하면 " Pixel Perfect " 구절 은 픽셀 그리드 를 사용하여 아이콘의 형태와 구성을 만드는 이 오래된 기술을 고수하는 디자이너의 결정을 반영합니다. 각 그리드에 대한 모양과 선.

결과적으로 각 아이콘은 구성 요소가 픽셀 그리드 에서 전체 픽셀을 차지하도록 신중하게 배치 된 정확한 숫자 값을 사용하기 때문에 더 선명하게 보입니다 .

Pixel Perfect Workflow를위한 Illustrator 조정

개념을 더 잘 이해 했으므로 픽셀의 선명도를 염두에두고 제작할 때 Illustrator의 설정을 최대한 활용할 수있는 방법을 알아 보겠습니다.

조정해야 할 세 가지 기본 설정이 있습니다.

• 키보드 증가
• 단위
• 그리드

2. 1. 키보드 증분 조정

방향키 화살표 키를 사용하여 모양을 움직이면 모양이 어떻게 작동하는지 제어하는 ​​목록에서 첫 번째 설정을 시작해 봅시다.

먼저 편집> 환경 설정으로 이동 한 다음 일반 (또는 Ctrl + K ) 을 클릭하십시오 . 메뉴 섹션을 클릭하자 마자 키보드 증가 값 을 설정하는 옵션을 제공하는 새로운 창이 나타납니다 .

일부 최신 버전의 Illustrator에서는이 설정이 이미 1 px로 설정되어 있지만 값이 다른 경우이를 적절하게 변경해야합니다.

이제 화살표 키를 사용하여 도형을 움직이는 데 익숙하다면이 설정은 마우스를 많이 사용하는 상황에서 매우 정밀한 움직임을 만들 수 있기 때문에 많은 도움이됩니다.

빠른 팁 : 당신의 단위가 표시됩니다 경우 PT 대신 값 픽셀 들 우리는 다음 단계에서 그것을 바꿀 것이기 때문에, 걱정하지 마십시오.

2. 2. 유닛 조정하기

가능한 한 가장 작은 키보드 증분을 사용했는지 확인한 후에 이제 측정 단위를 제어하는 ​​두 번째 설정으로 이동할 수 있습니다.

보시다시피, 개별적으로 설정할 수있는 세 가지 옵션이 있습니다.

• 일반 단위
• 스트로크 유닛
• 유형 단위

각 옵션에 대해 6 가지 측정 단위 (포인트, 피카, 인치, 밀리미터, 센티미터 및 픽셀) 중에서 선택할 수 있지만 우리는 단지 하나 뿐인데 물론 픽셀 입니다.

왜 물어 봐도 될까요? 음, 우리가 디지털 화면에 아이콘을 사용하고 표시하는 대부분의 시간은 물론 픽셀 기반이기 때문에 실제로는 아무런 생각조차 할 수 없습니다.

일반 단위

첫 번째 장군 은 장군 이며, 이름에서 알 수 있듯이 Illustrator 내에서 모양에서부터 Rulers 이상에 이르기까지 대부분의 물건에 대한 단위 측정을 제어합니다 . 기본적으로 Illustrator에서는이를 포인트로 설정 하지만 물론 픽셀로 설정해야합니다 .

스트로크 유닛

두 번째 옵션은 스트로크 우리가 설정 한 모든 우리의 스트로크에 대한 측정 단위를 정의 픽셀 우리 때문에, 일반 및 스트로크 설정이 일치해야합니다.

유형 단위

마지막 옵션은 유형 이 디지털 매체 외부에서 생성 되었기 때문에 완전히 미적인지 여부를 픽셀로 제한 할 수없는 유형 입니다. 따라서 점 에 완전히 의존하므로 유형 을 그대로 두겠습니다.

픽셀 로 설정하려고 시도 할 수도 있지만, 나를 믿으십시오. 도움이되지 않습니다. 12 px 는 12 pt 와 같지 않으므로 측정하기가 더 어려워집니다 .

유닛의 조정이 끝나면 맞춤 그리드 를 설정할 수 있습니다 .

2. 3. 사용자 정의 그리드 설정

그리드 의 설정으로 시작하기 전에 우리 는 먼저 그것이 무엇인지 이해해야합니다.

받는 따르면 메리 엄 - 웹스터 온라인 사전의 그리드 (지도상의 지점을 찾기위한으로) 균일하게 이격 된 수평 및 수직 라인의 "네트워크로서 정의된다.

것은 디자이너의 관점에서 볼 때, 그것이 무엇을하는지 실제로 설명하지 않기 때문에, 그 정의는 다소 모호합니다.

필자의 경우, 그리드 는 필자의 디자인의 구조적 백본이며, 여러 개의 직선 (수직 및 수평) 교차점으로 구성된 2 차원 구조를 기반으로 정확한 공간을 정의하여 설계 내에서 계층과 계층을 설정할 수 있습니다. 윤곽.

글쎄, 그게해야 할 일이지만, 나는 그 기능을 뒤집어서 픽셀 그리드에 내 작품을 쉽게 스냅 할 수있는 정확한 도구로 바꾸어 놓았다 .

나는 그 순간에 대해 더 자세히 설명 할 것이므로 지금은 그냥 설정하겠습니다.

여전히 있다고 가정 환경 설정 열려있는 창을의로 이동 가이드 그리드 섹션과의 우리가 제시하는 옵션에 대해 조금 이야기하자.

"Gridline Every"옵션

격자 선 이름에서 알 수 있듯이이 라인, 일러스트 레이터는 만들기 위해 그립니다 (가 수직 또는 수평)입니다 그리드 . 옵션 자체는 소프트웨어가이 선을 그릴 거리를 제어합니다.

기본적으로, 작가가 설정되어 1,000 픽셀 그리드 선 각각 것을 의미 1,000 PX 는 수직 및 수평 라인을 그리는. 절대 정밀도를 목표로하므로 가능한 한 가장 낮은 설정 인 1 픽셀 로 설정하려고합니다 .

'세분'옵션

상기 중간 격자 선마다 되는 거리 조절 작가가 라인을 추가의 세분 이들 라인들 사이에서 낙하 구간의 수를 제어한다. 기본적으로 4로 설정 되지만 1 로 낮추기를 원할 것 입니다.

이제 이러한 설정을 사용하면 픽셀 격자 와 1 : 1의 비율로 있는 매우 정확한 그리드 를 설정하게됩니다 . 이는 그리드에 맞추기 옵션 을 사용할 수 있기 때문에 중요합니다. 그러면 셰이프가 그리드에 스냅되어 현재 픽셀 그리드 와 완벽하게 일치하도록 축소됩니다 .

이 시점에서 우리는 Illustrator 의 설정을 거의 완료했습니다. 즉, 모든 작업이 실제로 이루어지는 실제 워크 플로에 대해 조금만 이야기 할 수 있습니다.

워크 플로우

지금까지는 Illustrator의 설정으로 모든 것을 제대로 설정했는지 확인했습니다. 지금부터는 실제 워크 플로에 대해 이야기하고 적절한 문서를 설정하는 방법부터 살펴 보겠습니다.

3. 1. 적절한 문서 설정

Pixel Perfect Workflow 를 시작할 때 새 문서 를 만드는 과정은 다른 단계와 마찬가지로 중요합니다. 모든 작업이 원활하게 진행되도록하기 위해 설정해야 할 몇 가지 작업이 있기 때문입니다.

즉,주의해야 할 주요 설정을 신속하게 살펴 보겠습니다.

문서의 프로필

가장 먼저주의해야 할 것은 문서에 대해 설정 한 프로파일 입니다. 아시다시피 Illustrator 는 인쇄 및 웹 관련 아트웍 모두에 사용할 수 있으며 선택한 프로필에 따라 문서를 자동으로 설정하는 옵션을 제공합니다.

대부분의 경우, 생성하려는 아이콘이 웹에서 사용되기 때문에 항상 프로파일 이 적절하게 설정되어 있는지 확인해야합니다 .

빠른 팁 : 사용 가능한 다른 설정 (예 : 해상도, 방향 등)을 변경하면 Illustrator에서 프로파일을 [사용자 정의]로 설정하지만 웹 프로파일의 등록 정보는 계속 유지됩니다.

문서의 너비와 높이

올바른 프로파일을 선택한 후에는 문서 의 너비 와 높이 가 정수 값을 사용하여 선언 되었는지 확인해야합니다 . 800x600 픽셀

쉼표로 구분 된 값은 800,65x600,49 픽셀이 아닙니다.

그렇지 않으면 아트 보드 가 픽셀 격자 에 스냅되지 않아 일부 애셋 픽셀이 불완전 해집니다.

이것은 대개 Artboard 자체가 전체 픽셀을 차지하지 않기 때문에 아트 보드 의 중앙에 맞춰 지도록 할 수 없기 때문에 작은 흰색을 남겨 둡니다. 비어있는 공간.

이 문제의 신속한 해결 방법은 대지 도구 (Shift + O) 를 사용하여 대지의 너비 및 높이 값을 정수 로 변경 한 다음 마우스를 사용하여 픽셀 격자 에 다시 스냅 할 수 있도록 마우스로 끕니다 .

단위

이 옵션은 일반적으로 프로필을 설정할 때 픽셀로 조정 되지만, 특히 실수로 설정을 유지할 수 있기 때문에 웹 및 인쇄용으로 사용하려는 다른 프로젝트에서 작업 한 경우 항상 다시 확인해야합니다 다른 것.

새 개체를 픽셀 격자에 맞추기

이 시점에서 현재 숨겨져 있는 고급 탭 이 있음을 발견했을 것입니다 .

이를 변경하려면 작은 오른쪽 화살표를 왼쪽 클릭하기 만하면 Illustrator 에서 여러 가지 옵션을 제공합니다.

우리가 특히 관심을 가지고있는 것은 새로운 객체를 픽셀 그리드 에 맞추는 것입니다. 왜냐하면 모든 새로 만든 객체가 픽셀 그리드에 모서리를 맞추도록 지시 하므로 모든 것이 가능한 한 날카 롭습니다.

유닛 과 마찬가지로 ,이 옵션은 웹 프로파일 을 선택하면 자동으로 설정 되어야하지만, 직접 체크해야합니다.

3. 2. 정수 값 사용하기

픽셀 완벽한 워크 플로우는 모든 오프 전체 픽셀 차지 모양 생성 할 수있는 기능에 관한 픽셀 그리드 . 보통 문제는 디자이너 가 셰이프 의 Width 및 Height 값 을 무시하는 경향이 있다는 것입니다. 대부분의 경우 이전의 "클릭 앤 드래그"방법을 사용하여 셰이프 의 Width 및 Height 값을 생성하기 때문입니다.

무슨 일 것입니다 일러스트 레이터가 불가능 그들이 떨어져 전체 픽셀 점유 할 수있게하는, 쉼표로 구분 된 값을 사용하여 이러한 개체를 만들고 픽셀 격자를 .

이를 보완하기 위해 소프트웨어는 안티 앨리어싱 효과를 적용하여 가득 차 있지 않은 픽셀을 채 웁니다. 물론 줌인하면 모양이 흐릿하게 보입니다.

적어도 비밀 은 변형 패널 에서 너비 및 높이 값 필드 를 항상주의 깊게 살펴보고 아래에서 픽셀을 완전히 차지하는 모양을 만들도록 시도하는 것입니다.

3. 변형 패널의 "픽셀 격자에 정렬"옵션 사용하기

이제이 시점에서 내 패널에 몇 가지 추가 옵션이 있으며, 그 중 하나는 픽셀 격자에 정렬입니다.

이름에서 알 수 있듯이이 함수는 Decimal Width 및 Height 값을 전체 로 반올림 하여 생성 된 모든 객체를 Pixel Grid로다시 스냅하는 데 도움이 됩니다.

그것을 사용하려면, 당신은 단순히 당신의 모양을 선택하고, 그것을 활성화하기 위해 눌러야 만합니다.

Illustrator 는 Pixel Grid 자체 와 관련하여 모양의 위치를보고 값을 대략적으로 계산 하므로 약간의 작업이 필요 합니다.

모든면의 픽셀이 잘못 정렬되면 (이전 이미지 참조) 폭 과 높이 값을 가장 작은 이웃으로 반올림합니다 (이 경우 16 및 14 픽셀이므로 모양을 중앙으로 축소합니다).

셰이프의 양쪽에 픽셀이 잘못 정렬 된 경우 모양 의 표면을 픽셀 격자 ( 이 경우 17 및 15 픽셀) 에 스냅 할 때까지 너비및 높이 값을 반올림하여 반올림합니다 .

빠른 팁 : 모든 변형 패널의 옵션을 보려면 오른쪽 아래에있는 작은 아래쪽 코너를 클릭하고 표시 옵션을 활성화해야합니다.

3. 픽셀 미리보기 모드

픽셀 미리보기 모드는 아마 하나 그렇지 않으면 당신은 당신이 당신의 디자인을 레이어에 사용하고있는 실제 직물을 볼 수 있기 때문에, 완벽한 픽셀 아이콘을 다루는 가장 중요한 도구입니다.

이 기능을 사용하면 어떤 모양이 픽셀 격자에 완벽하게 정렬되어 있는지, 어떤 모양을 조정해야하는지 쉽게 알 수 있습니다 .

기본적으로 Illustrator 는 비활성화되어 있지만 보기 메뉴 로 가서 픽셀 미리보기를 클릭 하거나 Alt + Ctrl + Y 키보드 단축키 를 사용하여 쉽게 Illustrator 를 켤 수 있습니다 .

빠른 팁 :  이 미리보기 모드를 활성화하면 Illustrator는보기 메뉴에서 그 옆에 약간의 확인 표시를 추가하고 문서의 이름 탭 내에 간단한 설명을 추가하여 활성화되어 있음을 나타냅니다.

이제 픽셀 미리보기 모드만으로는 이름에서 알 수 있듯이 작업 아래에있는 픽셀 구조를 보여주기위한보기 모드에 불과하므로 그다지 강력하지는 않습니다.

진정한 마법 은 다음 순간에 볼 수있는 것처럼 Pixel Snap 옵션 과 함께 사용하면 발생합니다 .

5. 픽셀에 맞추기 옵션

는 IF 픽셀 미리보기 픽셀 관점에서 아트 워크를 볼 수는 스냅 픽셀 옵션을 사용하면 사용자가 만든 각각의 모든 모양, 완벽에 끼워 질 수 있도록하는 데 도움이 픽셀 격자 .

이제 Illustrator 에서는 기본적으로 Illustrator 가 비활성화되어 있지만 보기 메뉴로 이동하여 클릭하면 활성 상태가되거나 Shift + Control + " 키보드 단축키를 사용할 수 있습니다 .

이 기능을 사용하면 Illustrator 에서 동일한 방법으로 도형을 만드는 일반적인 미리보기 모드와 비교할 때 Pixel Grid에 항상 완벽하게 정렬되어 있기 때문에 클릭하고 드래그하여 아이콘의 구성 도형을 쉽게 만들 수 있다는 이점이 있습니다 쉼표로 구분 된 값으로 항상 모양이 정렬되지 않게합니다.

동일한 클릭 및 드래그 방법을 사용하여 대부분의 모양의 길이와 높이를 조정할 수 있으며 계속해서 픽셀 격자에 완벽하게 스냅됩니다. 이는 지속적으로 조정되므로 나에게 인상적인 기능입니다. 내 아이콘은 내가 맞을 때까지.

픽셀 미리보기 모드가 광고 소재의 흐름을 방해 하는 경우 해당 픽셀 미리보기 모드를 사용 중지하고 격자에 맞춤 옵션을 선택하는 것이 좋습니다.

3. 그리드에 맞추기 옵션

픽셀 미리보기 모드가 특별히 마음에 들지 않으면 몇 단계 전에 설정 한 사용자 정의 그리드 를 항상 의지 할 수 있습니다. 이 정밀도는 Illustrator에 지시 하는 한 Pixel Grid 와 똑같이 작동합니다 당신의 모양을 그것에 맞추기 위해서.

이제 여러분 중 일부 는 Pixel Preview 모드 를 끝내면 Snap to Pixel 옵션이 Snap to Grid 로 변환되는 것을 보았을 것입니다 .

기본적으로 활성화되어 있지 않지만 켜기 만하면 픽셀 1과 똑같이 동작하여 그리는 각 도형이 픽셀 격자에 완벽하게 정렬되도록합니다 .

가능한 한 가장 낮은 값을 사용하여 그리드 를 설정했기 때문에 이러한 상황이 발생했음을 기억하십시오 . 우리는 기본 사용한다면 그리드 일러스트 레이터가 함께 제공을하고 우리의 모양은 전혀 다른 스냅 것 픽셀에 스냅 이후, 옵션을 눈금 선 및 세분이 그들에게 그런 식으로 행동 할 것입니다.

줄 바꿈

그래서 거기에 당신이 알아야 할 모든 정보가 있습니다. 당신의 아이콘이 선명한 픽셀로 보이도록 만들어야합니다. 이제 예제가 아이콘과 관련되어 있지만 원리와 도구가 동일하게 작동하기 때문에 모든 정보를 사용하여 일러스트레이션에서 Ui 프로젝트에 이르기까지 다른 이미지를 만들 수 있습니다.

즉,이 자습서가 도움이 되었기를 바랍니다. 질문이 있으시면 주석 섹션을 작성하고 최대한 빨리 알려 드리겠습니다