제플린 (XD, Photoshop에서 내보내기)

Zeplin

제플린(Zeplin)은 디자이너 및 개발자를 위한 공동 작업 응용 프로그램입니다. 제플린은 스케치 또는 포토샵과 연동하여 자동으로 작업한 결과물을 이미지 파일 Asset과 디자인 가이드로 생성해 줍니다.

https://zeplin.io/

Zeplin

 

1. 다운 및 설치

아래 사이트에서 본인의 운영체계와 맞는 설치 프로그램을 다운 받아 설치하고 로그인 합니다.

https://support.zeplin.io/en/articles/244698-downloading-mac-and-windows-apps

Downloading Mac and Windows apps

 

2. 프로젝트 생성하기

제플린을 사용하려면 하나 이상의 프로젝트가 필요합니다. 프로젝트를 생성합니다.

 

3. 포토샵, XD에서 작업물 내보내기

XD의 경우

제플린으로 내보내고 싶은 아트보드를 선택 후

[파일 > 내보내기 > Zeplin] 선택

 

프로젝트 선택 후 Export 하기

 

제플린으로 xd 디자인이 들어왔습니다.

오브젝트를 클릭해 보시면 오브젝트에 대한 설명이 오른쪽에 표시됩니다.

 

Photoshop의 경우

레이어가 Artboard로 되어 있어야 내보내기가 된다

1. [레이어 패널]에서 내보내고 싶은 레이어를 선택 한 후 오른쪽 클릭 후 [Artbord from Layers...]를 클릭 해 Artboard로 변환

 

2. [Window > Extensions > Zeplin] 선택 해 Zeplin 패널을 오픈

 

3. 내보내고 싶은 [Artboard] 폴더 선택 후 [Zeplin패널 > Export selected artboards to Zeplin]을 클릭

 

4. 제플린 프로젝트 선택 후 [Import] 선택

 

5. 제플린으로 파일 내보내기 완료

 

 

4. Windows에 Photoshop 플러그인 설치

⚠️ Photoshop CC 2015 이상을 실행하고 있는지 확인하십시오.

일반적으로 Zeplin을 실행하면 Photoshop 플러그인이 자동으로 설치됩니다.

그렇지 않은 경우 Zeplin의 상단 메뉴에서 설치할 수 있습니다 . "도움말> Photoshop 플러그인 설치"

수동으로 설치

메뉴에서 설치가되지 않으면 플러그인을 수동으로 설치해보세요. 플러그인과 패널의 두 가지를 설치해야합니다.

플러그인 :

• 여기 에서 플러그인을 다운로드 하십시오 .
• 압축을 풀고라는 폴더를 복사합니다 io.zeplin.photoshop-plugin.
• Photoshop Plug-ins\Generator  폴더 아래에 붙여 넣습니다 .

마지막으로 패널 :

• 여기 에서 패널을 다운로드 하십시오 .
• 압축을 풀고라는 폴더를 복사합니다 io.zeplin.photoshop-panel.
• Win + R을 %APPDATA%\Adobe\CEP\extensions누르고를 입력 한 다음 Enter 키를 누릅니다. ( CEP  폴더가없는 경우 수동으로 생성 할 수 있습니다.)
• 공개 된 탐색기 창에 붙여 넣습니다.

이제 Photoshop을 다시 시작하면 상단 메뉴에 "창> 확장> Zeplin"패널이 표시됩니다.