퍼블리싱, 개발과 연관되어 디자인 PSD를 효율적이게 공유하기 위한 툴이 바로 제플린이다. 기본적인 사용방법은 처음로 한번 사용했음에도 굉장히 조작이 쉬워 사용 방법을 간단하게 공유하고자 한다.
① 먼저 링크를 참고하여 제플린 설치 및 로그인하여 실행한다. (https://support.zeplin.io/en/articles/244698-downloading-mac-and-windows-apps)
Downloading Mac and Windows apps
Links to download Zeplin's Mac and Windows apps
support.zeplin.io
② 제플린 실행이 되면, 좌측 상단에 탭을 클릭, Help > Install Abobe Photoshop plugin 을 클릭하여 포토샵에 플러그인을 설치한다. (*플러그인 설치 시 포토샵은 OFF 상태여야 함)
*제플린 프로젝트 생성시 Web으로 선택해야 단위가 px로 출력이 된다.
③ 제플린 프러그인 설치가 완료되면, 포토샵 실행 후 상단메뉴의 Window → Extensions → Zeplin을 클릭한다.
④ 포토샵 우측 패널에 제플린 아이콘이 생성. 제플린에 보내고자 하는 파일을 연 후 Export Selected artboards to Zeplin을 버튼을 누른다.
⑤ 여기서 유의할 사항은, 제플린에 보낼 psd파일은 최초 생성시 위에 표시한 Artboards 체크가 되어 있어야 제플린에 연동이 되니 꼭 잊지 말자. 체크체크.😊
⑥ 제플린에 Importing 되고 있는 포토샵 psd 파일. 제플린의 작업보드에 알맞은 설정값을 선택 후 진행된다.
⑦ 제플린 실행 창에 Artboard 목록이 섬네일로 보이고 이를 클릭하여, Importing한 Artboard로 이동한다.
⑧ 펼쳐진 작업물의 디자인 요소 하나 하나를 클릭하면, 작업한 디자인의 스타일(CSS) 정보가 우측 패널에 보인다. 그렇게 때문에 디자인 시안에 따른 퍼블리싱과 개발 시 편리하게 참고를 할 수 있다. 그에 따른 HTML CSS 태그도 편리하게 복붙 할 수 있도록 세팅되어 있는 것을 확인할 수 있다.
본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :)
"당신의 하루가 별보다 빛나길"
'그래픽 툴 > Photoshop' 카테고리의 다른 글
| [상위버전] 포토샵 CC Photoshop 자유 변형 Free Transform + Shift 수정하는 방법 (0) | 2023.02.24 |
|---|---|
| 포토샵(Photoshop) 텍스트 문자 드래그 및 작성시 그리프 확장창 제거하는 방법 (0) | 2022.01.15 |
| 포토샵(Photoshop) CC 파일 내 텍스트 찾기 및 일괄변경, 바꾸기 방법 (0) | 2021.07.28 |
| Adobe creative cloud 앱 다운로드 설치 시 한글에서 영문으로 언어 설정 변경하는 방법! (0) | 2021.04.24 |
| 포토샵(Photoshop) 작업창 스크롤시 부드러운 움직임 효과 적용 및 없애는 방법 (0) | 2021.01.06 |