게임 에셋의 PNG 크기를 그대로 유지하면서 외곽선을 포함하려면 고정 크기 아트보드 안에 외곽선이 들어갈 공간을 확보하세요. Mac용 Affinity에서 외곽선이 적용된 전체 아트워크를 경계 안에 맞춘 다음, 지정된 픽셀 크기로 이름이 지정된 아트보드를 내보내세요.

이 작업 흐름은 32 × 32 px 크기의 기하학적 아이콘처럼 작은 벡터 게임 에셋을 준비하는 경우에 적합합니다. 현재 Affinity 데스크톱 도움말 센터에 설명된 컨트롤을 사용합니다. Affinity Designer 2에는 Export Persona라는 별도의 내보내기 작업 영역이 있지만, 현재 Affinity 문서에서는 이를 Slice Studio라고 부릅니다. 아래의 기본 작업 흐름은 현재 데스크톱의 내보내기 대화 상자를 사용합니다. 현재 Affinity 내보내기 문서, Designer 2 Export Persona 문서.

외곽선을 추가해도 무엇을 그대로 유지할 수 있나요?

편집을 시작하기 전에 세 가지 측정값을 구분하세요. 도형의 크기, 외곽선을 포함한 아트워크의 가시 범위, 내보낸 이미지의 픽셀 크기입니다. Affinity의 Stroke 패널에서는 개체 가장자리를 기준으로 안쪽, 가운데, 바깥쪽에 획을 배치할 수 있습니다. 이 정렬 설정에 따라 외곽선이 차지하는 공간이 달라집니다. Stroke 패널.

바깥쪽 획에는 원래 도형 바깥의 공간이 필요합니다. 도형이 이미 출력 경계까지 차 있다면 외곽선 전체를 유지하려면 무언가를 변경해야 합니다. 아트워크 크기를 줄이거나 형태를 바꾸고, 사용 가능한 투명 공간을 활용하거나, 전체 구성을 필요한 출력 크기에 맞게 축소해야 합니다. 획이 경계를 넘어서는 경우 원래 가장자리 위치와 바깥쪽 획 전체, 동일한 출력 경계를 모두 유지하는 것은 기하학적으로 불가능합니다.

Affinity 문서에는 아트보드 경계에 대한 명확한 설명이 있습니다. 아트보드 밖으로 벗어난 개체는 가장자리에서 잘립니다. 따라서 아트보드로 내보내기 크기를 일정하게 유지할 수는 있지만, 경계 밖에 남은 획 부분까지 보존할 수는 없습니다. 아트보드 정보.

공식 내보내기 문서에서는 내보내기 영역을 선택하고 출력 너비와 높이를 변경하는 방법을 설명합니다. 원래 아트워크의 크기와 고정된 이미지 경계를 모두 유지하면서 경계를 벗어난 외곽선을 포함하는 설정은 설명하지 않습니다. 지원되는 방법은 선택한 내보내기 영역 안에 가시 아트워크를 맞추는 것입니다. 내보내기 대화 상자, 내보내기 설정.

요구 사항 적합한 방법 변경되는 항목
실제 바깥쪽 획과 정확한 PNG 크기 유지 고정 아트보드 안으로 도형을 들여놓기 도형 크기 또는 사용 가능한 여백
기존 도형 경계를 가시적인 바깥 경계로 유지 적절한 경우 안쪽 정렬 획 사용 외곽선 배치와 가시적인 채우기 영역
전체 구성의 비율을 유지하면서 목표 출력 크기에 맞추기 내보낸 이미지 크기 조정 내보낸 픽셀에서의 아트워크 크기
여유 공간 없이 아트워크 전체를 원래 크기로 유지 출력 영역 늘리기 내보내기 크기. 고정 크기 요구 사항은 충족하지 않음

32 × 32 px로 내보낼 때 바깥쪽 획을 어떻게 맞추나요?

다음 예제에서는 균일한 2 px 바깥쪽 획이 적용된 축에 평행한 정사각형을 사용합니다. 공간 계산을 명확하게 보여 주기 위해 효과, 가변 너비 획, 모서리 돌출 세부 요소는 사용하지 않습니다.

이 정사각형의 가시 너비는 도형 너비에 양쪽의 획 너비를 더한 값입니다. 따라서 32 px 출력 크기에서는 도형 너비를 32 − 2 − 2 = 28 px로 설정할 수 있습니다. 높이도 같은 계산으로 28 px가 됩니다. 도형을 가운데에 배치하면 도형의 바탕 가장자리와 아트보드 가장자리 사이에 2 px씩 남고, 그 공간을 바깥쪽 획이 차지합니다.

1. 고정 출력 영역 설정

Vector Studio에서 File > New를 선택합니다. Document units를 픽셀로, Page width와 Page height를 32 px로 설정하고 Artboards를 활성화합니다. 에셋 주변을 투명하게 유지해야 한다면 Transparent background를 활성화합니다. 이 예제에서는 72 DPI를 사용한 다음 Create Document를 클릭합니다. Affinity의 새 문서 도움말에 이러한 문서 설정이 설명되어 있습니다. 새 문서 만들기.

기존 문서에 내보내기 전용 아트보드를 추가하려면 Artboard Tool에서 새 아트보드의 W와 H를 설정하고 Insert Artboard를 선택합니다. 선택한 아트워크에 맞춰 아트보드 크기를 조정하지 말고 필요한 픽셀 크기를 직접 입력하세요. Artboard Tool.

2. 바탕 도형의 크기와 획 설정

정사각형을 만들거나 선택합니다. Window > General > Transform을 열고 W: 28 px, H: 28 px를 입력합니다. 이 패널에서는 정확한 크기와 변형 기준점을 설정할 수 있습니다. 정사각형을 가운데에 배치해 바탕 가장자리가 아트보드 가장자리에서 2 px 안쪽에 오도록 합니다. Transform 패널.

Window > Vector > Stroke를 엽니다. 실선 획을 선택하고 Width: 2 px를 입력한 다음 Align Stroke Outside를 선택합니다. 이 간단한 예제에서는 둥근 조인을 사용합니다. Affinity 문서에서는 Stroke 패널의 정렬, 너비, 조인 설정을 설명합니다. Stroke 패널.

기존 아트워크의 크기를 조정할 때는 획이 어떻게 변하는지 확인하세요. Scale with Object는 닫힌 도형의 크기와 함께 획 너비도 바뀔지를 결정합니다. Transform 패널의 Scale Override를 사용하면 획 너비를 포함한 속성이 함께 배율 조정되도록 설정할 수도 있습니다. 크기를 조정한 후에는 획 너비가 그대로라고 가정하지 말고 원하는 2 px인지 다시 확인하세요. 획 배율 설정, Transform의 Scale Override.

3. 가시 범위 전체 확인

이제 28 px 정사각형과 바깥쪽 획을 합친 크기는 각 방향으로 32 px입니다. 이는 설명된 예제에 대한 기하학적 계산이지, 실제로 측정한 내보내기 결과는 아닙니다. 외곽선 주위에 투명 여백을 두려면 그 공간도 확보하세요. 각 면에 1 px 여백을 두면 정사각형의 허용 크기는 26 × 26 px로 줄어듭니다.

모든 에셋에 같은 계산을 무조건 적용하지 마세요. Affinity의 마이터 조인은 뾰족한 모서리에서 돌출될 수 있고, 캡 설정은 선 끝에 영향을 줍니다. 복잡한 실루엣은 전체 외곽선을 살펴봐야 하며, 특히 모서리와 끝부분을 확인해야 합니다. 단순한 너비 계산은 규칙적인 도형을 다룰 때 출발점으로 활용할 수 있습니다. 획 조인과 캡.

크기를 바꾸지 않고 아트보드를 어떻게 내보내나요?

File > Export > Export를 선택한 다음 PNG 프리셋을 선택합니다. Area를 이름이 지정된 아트보드로 설정합니다. Affinity에서는 이 항목과 겹치는 레이어까지 포함하는 Selection Area, 선택하지 않은 겹치는 레이어를 제외하는 Selection Only를 구분합니다. 이름이 지정된 아트보드를 선택하면 내보내기 영역을 명확하게 지정할 수 있습니다. 내보내기 대화 상자.

출력 너비와 높이를 확인합니다. 이 예제에서는 둘 다 32 px여야 합니다. Affinity에서는 다른 크기를 설정할 수 있으며 Lock aspect ratio 옵션도 제공합니다. 아트워크가 여전히 아트보드 밖으로 나가는 문제를 출력 크기 변경으로 해결하지 말고, 먼저 경계 안에 외곽선을 맞추세요. 내보내기 설정.

저장하기 전에 내보내기 미리보기를 확인합니다. Mac에서는 ⌘1로 100%, ⌘2로 200% 미리보기를 표시합니다. 네 가장자리에서 외곽선이 잘린 부분이 없는지, 의도한 투명 여백이 있는지 확인합니다. 그런 다음 Ask for Location을 선택하고 Export를 클릭합니다. 파일 이름과 저장 위치를 지정한 다음 Save를 클릭합니다. 내보내기 대화 상자와 Mac 미리보기 단축키.

마지막으로 저장된 PNG를 열어 픽셀 크기와 실루엣 전체를 확인합니다. 너비와 높이가 맞는다고 해서 획이 제대로 들어갔다는 뜻은 아닙니다. 이미지가 잘렸어도 크기는 정확히 32 × 32 px일 수 있습니다.

슬라이스로도 같은 고정 크기 결과를 얻을 수 있나요?

네, 내보내기 영역을 명확히 지정하면 됩니다. Affinity 문서에서는 슬라이스 동작 두 가지를 설명합니다. Export Layers 패널 항목에서 만든 슬라이스는 해당 항목의 범위에 맞춰 자동으로 크기가 설정되고 그 레이어 콘텐츠를 내보냅니다. 직접 그린 슬라이스는 해당 영역 안에 있는 모든 표시 레이어의 콘텐츠를 포함합니다. Slice Studio를 사용해 내보내기.

고정 내보내기 영역을 만들려면 Slice Studio에서 Slice Tool을 선택하고 준비된 아트워크 주변에 영역을 드래그합니다. 함께 제공되는 Transform 패널에서 슬라이스의 정확한 크기와 위치를 설정합니다. 슬라이스의 내보내기 옵션에서 PNG를 선택한 뒤 필요한 슬라이스를 내보냅니다. 아트보드 안에 맞출 때와 마찬가지로 전체 획이 슬라이스 사각형 안에 들어가야 합니다. 슬라이스 내보내기.

1x가 항상 문서의 픽셀 크기를 뜻한다고 가정하지 말고 표시된 내보내기 해상도를 확인하세요. Affinity 문서에서는 슬라이스 배율과 문서 DPI의 관계를 설명합니다. 72 DPI에서는 64 × 64 px 예제가 1x로 64 × 64 px로 내보내지지만, 144 DPI에서는 1x로 32 × 32 px로 내보내집니다. 이는 획 배치와 별개의 크기 설정 문제입니다. 슬라이스 크기와 DPI.

결과가 여전히 잘못되면 무엇을 바꿔야 하나요?

문제를 보고 다음 편집 항목을 선택하세요.

  • PNG 크기는 맞지만 외곽선이 잘림: 전체 획이 아트보드나 슬라이스 안에 들어가도록 아트워크를 이동하거나 줄입니다.
  • 아트워크를 바꾸면 PNG 크기도 달라짐: 선택 영역이나 개체 크기에 맞춰 자동으로 조정되는 슬라이스를 내보내는지 확인합니다. 고정된 경계를 원한다면 이름이 지정된 아트보드나 크기를 정확히 설정한 수동 슬라이스를 사용합니다.
  • 크기를 조정한 뒤 외곽선 두께가 바뀜: Scale with Object와 Transform의 Scale Override를 확인한 다음 원하는 획 너비를 다시 설정합니다.
  • 외곽선은 들어가지만 에셋이 작아 보임: 더 큰 구성을 목표 크기에 맞추면서 내보내기 너비와 높이로 크기를 조정했는지 확인합니다.
  • 뾰족한 모서리만 잘림: 전체 구성의 크기를 바꾸기 전에 조인 스타일과 마이터 돌출을 확인합니다.

이 점검 항목은 아트보드 잘림, 슬라이스 범위, 획 배율 조정, 내보내기 크기 조정에 관해 문서화된 차이를 따릅니다. 각각 원인이 다르므로 획 정렬만 바꿔서는 모든 내보내기 크기 문제를 해결할 수 없습니다. 아트보드 경계, 슬라이스 동작, 획 컨트롤, 내보내기 크기.

게임 에셋을 반복해서 제작할 때는 먼저 필요한 픽셀 경계를 설정하고 그 안에 외곽선 공간을 배정하세요. 해당 모양이 중요하다면 바깥쪽 정렬을 유지하고, 공간을 만들기 위해 바탕 아트워크를 조정한 다음 고정된 영역을 내보냅니다. 그러면 파일 크기는 요청한 대로 유지하면서 획 전체가 렌더링될 공간을 확보할 수 있습니다.

출처