포토샵(Photoshop) 제플린(Zeplin) 사용 방법

 

안녕하세요. 요즘에는 제플린으로 작업도 많이 하고, 또 제플린 사용하는 퍼블리셔를 우대하는 곳도 많더라고요 :)

저도 공부할겸, 포토샵과 제플린을 사용하는 방법을 알아보겠습니다.

첫 번째로 제플린 홈페이지에 들어가서 다운로드하여줍니다 :)

zeplin.io/

홈페이지 하단에 보시면 다운로드 받을수 있는 링크가 있어요!

컴퓨터에 맞는 파일을 다운로드 받아주시면 됩니다

 

*중요한 건*

install이 다운로드되면 install Photoshop Plugin을 함께 설치할 거냐는 안내문구가 나오는데 꼭 함께 설치해주세요!

 

 

그리고 다운로드가 완료되면, 창 > 확장 프로그램 > Zeplin을 활성화해주세요 :)

영문일 때는 Windows > Extensions > Zeplin을 활성화시켜주세요!

 

 

포토샵에서 제플린을 사용하려면 웹/모바일 탭에서 작업을 해주셔야 해요! :) 

 

그럼 제플린으로 내보내기 버튼을 클릭해줍니다!

 

그리고 제플린에서 해당 버튼을 클릭하면 팝업창이 뜨는데

작업할 타입을 선택해주고 확인을 눌러주세요!

 

 

그럼 제플린 화면이 아래와 같아지고, 포토샵 제플린 창에 가져온 기창이 활성화됩니다!

 

해당 탭을 눌러서 import 시켜주시면 됩니다.

 

그럼 제플린에서 포토샵의 작업내용을 가져옵니다 :)

import 로딩을 기다려줍니다! 

포토샵에서 제플린으로 가져오는 건 시간이 좀 걸린다고 해요 :(

 

 

성공적으로 import 되었습니다!

 

그럼 폰트 사이즈, 간격 등을 바로 볼 수 있고 css도 알려주네요!!