文章彙整

【網頁設計輔助工具Zeplin】使用Photoshop發布與Assets應用

Astral WebBy Astral Web 8 months agoNo Comments
首頁  /  網頁視覺設計  /  Photoshop教學  /  輔助工具Zeplin  /  【網頁設計輔助工具Zeplin】使用Photoshop發布與Assets應用

今天 Astral Web 要與大家分享將設計稿使用 Photoshop 發布至 Zeplin 與 Assets 的應用,一起來看看如何製作吧!

※本教學需先對 Photoshop 操作有基本認識

  1. 先到Zeplin官網加入會員
    https://zeplin.io/


  2. 接著下載、安裝桌面版App並登入
    https://support.zeplin.io/quick-start/downloading-mac-and-windows-apps

  3. 在 Zeplin 介面中點擊 Create 來創建一個專案資料夾,並選擇需要的格式

  4. 接著點選主選單 > Help > Install Photoshop plugin
    安裝 Zeplin 套件至 Photoshop

  5. 我們到 Photoshop 中開啟設計稿

  6. 選擇 視窗 > 延伸功能 > Zeplin

  7. 如果你所製作的方式不是使用工作區域的話,就不能直接發布至 Zeplin

  8. 因此我們使用工作區域工具

  9. 繪製好範圍後,選擇工作區域圖層,Zeplin 視窗就會出現可發佈的選項

  10. 發佈的頁面名稱會根據你工作區域的名稱來命名

  11. 點擊 Export selected artboards to Zeplin
    將工作區域發布至Zeplin

  12. 選擇剛剛建立好的專案資料夾,並點擊 Import

  13. 這樣就上傳成功囉

  14. 如果我們要將某個區塊讓夥伴能在 Zeplin 中下載
    就能使用 Zeplin 的 Assets 功能

  15. 首先在 Photoshop 圖層中點選我們要的物件

  16. 在 Zeplin 中會出現 Mark as asset 選項

  17. 點擊後,圖層的名稱產生變化代表已經做好分割

  18. 接著將工作區域再次發布到 Zeplin

  19. 這樣在 Assets 視窗中就能下載

  20. 如果要針對特定區域,例如頁首

  21. 就針對頁首的資料夾做 Mark as asset

  22. 這樣就完成囉!

以上為本次的介紹,如有設計需求歡迎聯繫我們。

如對本系列有興趣可以參考其他篇,以及訂閱電子報或追蹤我們的粉絲專頁唷!

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Categories:
  輔助工具ZeplinPhotoshop教學

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。