본문 바로가기

포토샵제플린3

[제플린]zeplin -각각의 이미지 포토샵에서 제플린으로 내보내는 방법 포토샵에서 제플린을 내보내기 위해서는 작업 전 새로만들기 문서에서 "아트보드"를 체크 후 새 문서를 만들어야한다. 만약 그림속 페이스북 버튼을 내보내고 싶다면.. 페이스북 버튼 레이어를 클릭한다. - 레이어명이 곧 이미지명이 되기 때문에 잘 정리해 놓아야 한다. 내보내고 싶은 이미지를 클릭 후 제플린 창에서 mark as asset 버튼을 누른다. mark as asset 버튼 누른 이미지는 파일명 앞에 -e-가 붙는다. Export selected artboard to Zeplin을 클릭하면 제플린 상에 이미지가 생성된다. 내보낸 관련 이미지를 제플린 화면상에서 클릭하면 우측 상단 Assets란에서 이미지를 확인 할 수 있다. 모바일 이미지는 png를 다운받아서 사용하면 된다. ( 각 hdpi/mdpi.. 2020. 6. 30.
[제플린]zeplin - 디자인 모바일, 웹 가이드 프로그램 사용방법- 작업한 시안 제플린으로 보내는 방법 이전과정에서 제플린을 설치했다면, 스케치에서 작업한 시안을 내보내는 방법은 다음과 같다. 우선 원하는 시안을 드래그해서 선택 후 플러그인->제플린-> Export Selected를 누르면 제플린에 가이드 화면이 추출 된다. 만약 포토샵에서 하고 싶다면 우선 포토샵 화면에서 레이어를 생성할때 원하는 사이즈 입력 후 아트보드 부분에 체크를 해야한다. 그런 후에 시안 작업을 해야 한다. 그런후 window-> extensions->zeplin을 클릭 후 뜨는 화면에서 원하는 설정 후 공유하면 추출 된다. 제플린에 내보내기 하면 제플린에서 시안을 확인 할 수 있고 이미지 영역을 클릭하면 해당 부분 가이드를 확인 할 수 있다. 색상이나 px 값을 확인 할 수 있다. 개발자 분들은 개발 코드도 확인이 가능하다. 화.. 2019. 9. 10.
[제플린]zeplin - 디자인 모바일, 웹 가이드 프로그램 사용방법 모바일 작업에서 개발자와의 협업을 위한 디자인 가이드 작업은 필수이다. 제플린이 나오기 이전에는 수작업으로 가이드를 ppt로 문서화 해야했기 때문에 시간도 많이 들었고 그에 따라 야근도 많이 했던 기억이 난다. 하지만 제플린이 나오면서 가이드 작업이 굉장히 쉬워지고 편리해졌다. 제플린은 스케치, 포토샵, XD, Figma 에서 작업 후 가이드를 추출할 수 있다. https://zeplin.io/ Zeplin Connected space for product teams. Handoff designs and styleguides with accurate specs, assets, code snippets—automatically. zeplin.io 우선 제플린을 이용하기 위해서는 회원가입을 해야한다. 회원가.. 2019. 9. 10.