포토샵에서 제플린으로 이미지 내보내기

포토샵에서 제플린으로 파일을 이동하는 방법에 대해서 알아보도록 하겠다.

제플린에 연동하기 위해서는 포토샵 아트보드에서 작업을 해야 하는데, 아트 보드는 한 파일 안에 여러 장의 이미지를 다양한 사이즈로 만들어 한눈에 보면서 작업할 수 있게 해주는 기능이다.

 

1. File > New > 새로 만들기 문서에서 " Artboards"를 체크 후 새 문서를 만들어야 한다.

 

2. 다양한 화면을 디자인하는 앱이나 카드뉴스 디자인을 손쉽게 구성하는 파일이 만들어진다.

 

3. 예시로 카메라 아이콘을 제플린으로 내보내 보겠다. 벡터로 만든 카메라 아이콘 레이어를 클릭한다. 레이어명이 곧 이미지명이 되기 때문에 잘 정리해 놓아야 한다.

 

4. 내보내고 싶은 이미지 레이어 선택 후 제플린 창에서 Mark as asset 버튼을 누른다.

 

5. mark as asset 버튼 누른 이미지는 파일명 앞에 -e-가 붙는 것을 알 수 있다.

 

6. 제플린 창에서 Export selected artboard to Zeplin을 클릭 후 Import 버튼을 누른다.

 

7. 제플린 상에 카메라 이미지가 생성되고, 클릭하면 우측 상단 Assets란에서 이미지를 확인할 수 있다.

 

PNG, JPG, WebP 이미지 등으로 다운로드하여서 사용하면 된다.