Photoshop, uiux, 網頁/動畫, 網頁設計

Photoshop安裝Zeplin外掛套件,並將設計好的版型匯入到Zeplin的專案

梅干2018/05/31
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
  有在使用Sketch的朋友,應該對於Zeplin不感陌生,透過Zeplin可以讓視覺設計師,與工程師有良好的溝通管道,同時工程師在進行套版時,也能依照設計所設計的版型,甚至當有任何問題時,無論是工程師還是PM也可以直接在Zeplin中加入註冊,如此一來設計師,就能快速的了解要修改與調整的地方。
  而Zeplin目前支援Sketch與Photoshop,因此無論是APP開發還是Web,Zeplin都支援,而今天梅干要來分享,如何將Zeplin的外掛安裝到Photoshop中,讓Photoshop設計好的版型,也能同步到Zeplin中,讓前端工程師或切版人員,可以透過Zeplin進行套版與對位,才不會每次套完都大走鐘,至於要怎將Photoshop中的版型同步到Zeplin中,現在就一塊來看看吧!
Zeplin
網站名稱:Zeplin
網站性質:免費版限單一專案
網站連結:https://zeplin.io/

Step1
首先到Zeplin註冊好帳號後,再下載Zeplin的應用程式,安裝完畢並啟用,再輸入當初所註冊的帳密。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step2
登入後,再點上方的「Zeplin / Photoshop Integation / Install Plugin」選項。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step3
接著關閉Photoshop,就會開始進行安裝。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step4
當安裝完畢後,再由Zeplin中,先建立一個新的專案。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step5
接著選擇專案的類型。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step6
這樣就建立完畢了。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step7
這時回到Photoshop,需將設計好的版型,放到工具區域中,再將要同步到Zeplin的工作區選取起來。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step8
接著選擇 「視窗 / 延伸功能 / Zeplin」選項。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step9
再點黃色鈕。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step10
再按Import鈕。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step11
這時就會開始進版型的上傳。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step12
上傳完畢後,就會開啟Zeplin,這時Zeplin也會開始進行同步。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step13
當同步好後,再將工程師與邀請至專案中,就可看到這些畫面,而當工程師在套版時,除了可點選版型區塊,知道各CSS的資訊外,還有一個相當棒的功能,那就是點下方的圖示。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step14
這時版型就會變成半透明視窗。
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中
Step15
接著就可蓋到套完版的頁面上方,檢查看看是否有一致,如此一來就可知道,套完版後,與當初視覺所設計的是否有一致,因此有了Zeplin真的超方便的喔!
梅問題-Photoshop安裝Zeplin外掛套件,並將製作好的版型匯入到Zeplin的專案中