Sketch、Zeplin 與 Slices 切圖

by | 2 月 5, 2019

整理基礎知識與實作步驟,上圖為文末的切圖範例動畫。

這篇寫寫Sketch和Zeplin的協作流程。

適合聽過Zeplin這個軟體,但具體如何使用、和我一樣覺得有點模糊的讀者們;畢竟不是所有人都能從設計或工程角度實戰參與、但還是想知道呀呀~

每每聽到切圖,都會很好奇整個過程是怎麼走的?

趁著假日來動手做一遍,目標是聽到切圖、腦袋能出現些微的輪廓。

Zeplin簡介

Zeplin是現在網頁設計、APP設計,幫助設計師和工程師協作的軟體/平台。

設計師從Sketch上傳設計稿後,相關標注同步完成,工程師可以透過頁面瞭解各個參數、以及下載需要使用的圖片檔案;對於客戶、產品經理、專案經理,也能透過Comment功能即時反饋,理解需要調整的頁面。

可參考官方的三分鐘影片。

Zeplin:建立新專案

註冊完帳號、電腦裝好Zeplin APP後,我們開始建立第一個專案。

有三種專案可以選擇Web/iOS/Android,差別在對應的標注單位不同,像是iOS使用pt、Android則是dp。

這邊選iOS專案。

進到下個頁面,左邊是各設計軟體上傳的步驟,有Sketch、Adobe XD、Figma、Photoshop CC;右上角可以替專案命名。

安裝Zeplin同時會裝好Sketch對應Plugin,等等可以從Plugin直接上傳。

Sketch:建立練習檔案

專注在流程,直接選Prototyping Tutorial當範例節省時間。

Sketch:上傳設計檔案到Zeplin

儲存檔案後,全選所有 Artboard (Cmd+Shift+A),上方選單Plugins > Zeplin > Export Selected。

選擇剛剛建立的Project,等待上傳完成。

可以對指定圖片右鍵建立Section、Tag,方便快速篩選。

Zeplin:圖片素材下載(Export Assets)

我們在Zeplin裡,點擊夕陽這張圖,會發現右邊沒有素材可以下載 Q_Q

工程師做到一半可能就會卡住,聊天室就會出現啊這邊沒有切到記得補啊。

回到Sketch,點擊圖片,觀察到右下角的Make Exportable是反灰的。

我們點擊Make Exportable後,在右上角+號再點兩下、把2x, 3x加上。

單選Watch List這塊Artboard上傳。

圖片素材就可以下載囉ヽ(●´∀`●)ノ~

紅框處為1x, 2x, 3x尺寸區別。

Sketch:Slices切圖工具

切片就是從既有的畫板切出一個圖層。

我們從Flaticon下載這張夕陽圖,選128px尺寸。

擺在橋上,把剛剛兩個人蓋住

說是太陽看久一直覺得像發育很好的荷包蛋呢。

注意到Make Exportable是反灰的,我們上傳到Zeplin。

點選圖片,目前是無法下載的。

從選單叫出Slice工具,拿出我們的小刀。

移到圖片會偵測到太陽,點擊直接切圖;但如果是要這樣輸出,剛剛直接點選圖片就可以了,不用特別切。

虛線看不清楚,讀心放個特寫圖。

我們選擇大一點的範圍,注意到切下去連背景都涵蓋進去了。

重點。

重點中的重點。

到左邊的圖層,把剛剛切片的範圍,和sunrise這張太陽圖群組起來;右邊會出現Export group contents only,勾選起來就會得到透明背景了。

開關Export group contents only選項,切換是否涵蓋剛剛切出的背景。

上傳Zeplin,就可以取得剛剛切出來的圖片大小囉(๑´ㅂ`๑)/

延伸閱讀

與工程師的協作之路-工具篇(Zeplin)-2019 iT 邦幫忙鐵人賽

網友分享協作流程,很適合從來沒用過Zeplin的讀者瞭解。

吳 致賢

吳 致賢

擁有 App/Web 開發經驗的軟體 PM,從 0 到 1 執行過 20 個以上全客製專案,包含悠遊付、friDay 影音等。關於我的簡歷點此

Recent Posts

時尚與穿搭,啟蒙我審美的影片

時尚與穿搭,啟蒙我審美的影片

在 YouTube 與 bilibili 看了超過一百部關於時尚、穿搭、服飾主題的影片,整理出幾個精選,希望讓讀者們從比較有趣的角度瞭解:)