미리캔버스에서 공개 되는 요소는 아래와 같은 사항을 참조하여 제작되어야 합니다.
일러스트 포맷 설정조건
| SVG | PNG |
|
용량이 150KB를 넘지 않는 벡터 소스(EPS, AI)는 |
용량이 100KB를 초과하는 벡터 또는 비트맵 소스(JPG/PNG/PSD)는 PNG 파일 포맷으로 저장합니다. |
SVG 요소 제작방법
SGV는 벡터 요소이며, Abobe Illustrator를 사용하여 제작합니다. 선 오브젝트를 면으로 변경하여,
모든 오브젝트가 면으로만 구성되어 있어야 합니다.
1) 일러스트레이터에서 새 문서를 만듭니다.
2500 x 2500px / RGB / 72dpi
2) 아트보드에 벡터 요소를 만듭니다.
3) Object > Artboard > Fit to Artwork Bounds(아트보드의 크기를 요소에 맞게 자동으로 맞춰주는 기능)을
클릭합니다.
4) 레이어에 있는 모든 객체를 선택해 Group(그룹)으로 만들어 준 후 저장합니다.
* 주의사항
SVG 요소 내에 있는 비슷한 계열의 색상은 모두 한 색상으로 통일해야 합니다.
5) CSS 속성을 반드시 프레젠테이션 속성으로 선택하고 확인을 클릭합니다.
* SVG 요소 색상 정리 TIP !
미리캔버스에 SVG 요소를 등록 할 경우, 사용자가 색상을 커스터마이징 할 수 있도록 설정해 주어야 합니다.
위와 같은 작업을 색상 정리라고 칭합니다.
1) 명암이 들어간 부분은 블랙(#000000), 밝기가 들어간 부분은 화이트(#FFFFFF)로 처리 후,
투명도(Opacity)로 세기를 조절합니다.
2) 레이어에 있는 모든 객체를 Group(그룹) 한 후 저장 합니다.
SVG 요소 제작시 주의 사항
1) 인물 SVG 요소는 피부 색상을 변경 할 수 있도록 제작 해야 합니다.
2) 앞서 설정한 명암(#000000) 및 밝기(#FFFFFF)가 들어간 부분은 색상을 변경 할 수 없도록 색상
잠금 설정을 해야 합니다.
3) SVG 요소는 최대 5개의 컬러 사용을 권장합니다.
4) 흰색(#FFFFFF), #353840 색상 사용을 자제하여 주시기 바랍니다.
#FFFFFF 색상, #353840 사용시 미리캔버스 에디터 배경 색상과 동일해, 요소 리스트에서 형태가
보이지 않습니다.
* SVG 요소 크랙 제거 TIP !
SVG를 제작할 시, 객체 색상의 경계에 실선(=크랙)이 보일 수 있습니다.
크랙 예시)
1) 객체 전체를 선택하여 다른 레이어에 복사합니다.
2) 패스파인더의 합치기로 하나의 객체로 만들어 줍니다.
3) 크랙이 보이는 영역 아래에 객체를 깔아줍니다.
4) 미리캔버스 에디터에서 배경 > 단색배경 > 검은색을 선택한 후, 크랙이 보이는지 확인합니다.
PNG 요소 제작방법
PNG는 비트맵 요소이며, Adobe Photoshop을 사용하여 제작합니다.
1) Adobe Photoshop에서 새 문서를 만듭니다.
9800 x 9800px / RGB / 120dpi / 배경투명화(Transparent) 설정
2) 새문서에서 요소를 제작하거나, 일러스트에서 제작한 요소를 복사+붙여넣기로 불러옵니다.
붙여넣기 옵션: Smart Object 선택
3) Crop 툴을 사용해 아트보드 크기를 요소 크기에 맞춥니다.
4) File > Save As > PNG 포맷 선택 후, 저장합니다.
Smallest / Slow & None 옵션을 선택한 후 확인을 클릭합니다.
PNG 요소 제작시 주의 사항
1) #FFFFFF, #353840 색상 사용시 미리캔버스 에디터 배경 색상과 동일해, 요소 리스트에서 형태가
보이지 않습니다.
2) Ctrl(Cmd) + U + Lightness(명도)를 -5 ~ -3 으로 설정해주시기 바랍니다.