UI設(shè)計為什么要切圖，所謂的切圖是用什么工具切？

時間：2024-02-16 02:35:01 | 來源：網(wǎng)站運營

時間：2024-02-16 02:35:01 來源：網(wǎng)站運營

UI設(shè)計為什么要切圖，所謂的切圖是用什么工具切？：切圖是指將設(shè)計稿切成便于制作網(wǎng)頁或 App 的圖片，通常是前端工程師還原設(shè)計稿必不可少的一步。

簡單來講，前端工程師拿到設(shè)計師交付的設(shè)計稿，通常是從設(shè)計軟件中導(dǎo)出整個頁面，這樣頁面中包含的元素就會「黏連」在一起，不方便前端開工程師進(jìn)行開發(fā)。

此時，為了把黏連在同一張圖片中的元素分開，就需要用到切圖。

---

想對設(shè)計稿進(jìn)行切圖，皮仔推薦你使用完全免費的在線切圖工具——Pixso。

Pixso，一款基于瀏覽器的在線設(shè)計工具，集合了原型、UI、交互、切圖、標(biāo)注與交付功能，支持導(dǎo)入來自 Ps、Figma、Sketch、Xd、Axure 等的設(shè)計文件，可實現(xiàn)用一款軟件對多種設(shè)計文件進(jìn)行切圖，不需要為不同的設(shè)計文件而到處尋找切圖工具了。

在瀏覽器打開 Pixso 官網(wǎng) pixso.cn ，點擊右上角的「免費使用」進(jìn)入 Pixso 工作臺，接著點擊工作臺頂部的「導(dǎo)入文件」，在打開的窗口，可將需要切圖的文件上傳到 Pixso 中。

將文件導(dǎo)入 Pixso 后，點擊頂部工具欄的加號 + ，在展開的面板，選擇其中的「切片」工具，快捷鍵為 S。

在需要導(dǎo)出切圖的元素上方繪制一個切片，如下圖的藍(lán)色框框。

用鼠標(biāo)拖拽移動切片區(qū)域四周的控件，可以自由調(diào)整切片的大小。

調(diào)整好切片的大小后，在選中切片的情況下，點擊導(dǎo)出右側(cè)的加號 + ，配置切圖的導(dǎo)出選項，默認(rèn)導(dǎo)出 PNG 格式的 1 倍圖，點擊下方的「縮略圖」，可以在導(dǎo)出前預(yù)覽切圖的效果。

如果你想同時導(dǎo)出不同分辨率的切圖，可以再次點擊導(dǎo)出右側(cè)的加號 + ，添加另外一個導(dǎo)出選項，配置相應(yīng)的分辨率或圖片格式。

如果你覺得手動配置切圖的導(dǎo)出選項比較麻煩的話，可以點擊「導(dǎo)出」選項右上角的設(shè)置按鈕，在彈出的面板，可以看到 Pixso 提供了 3 種導(dǎo)出預(yù)設(shè)——iOS 預(yù)設(shè)、Android 預(yù)設(shè)和 Web 預(yù)設(shè)。

至于到底要選哪一種預(yù)設(shè)，可以根據(jù)切圖最終使用的場景選擇。

選擇其中一種預(yù)設(shè)后，下方會自動添加預(yù)設(shè)中包含的多種導(dǎo)出配置，如下圖右側(cè)的面板，是 Android 預(yù)設(shè)包含的 5 種導(dǎo)出配置，從 1 倍 ~ 4 倍分辨率不等，不同分辨率的切圖對應(yīng)不同的后綴名，方便前端工程師可以通過文件名稱識別不同倍率的切圖。

此外，如果擔(dān)心導(dǎo)出的切圖體積太大，可以啟用下方的「圖片壓縮」，從右側(cè)的選項選擇一種壓縮強(qiáng)度，即可在導(dǎo)出切圖的同時，對圖片進(jìn)行壓縮，減少切圖占用的空間。

當(dāng)我們在設(shè)計稿多處都添加了切片，并且都配置好導(dǎo)出選項后，我們可以將右側(cè)的面板切換到「標(biāo)注」選項卡，點擊下方的「切圖」子選項，再選擇「查看當(dāng)前頁面所有切圖」。

此時右側(cè)面板就會列出設(shè)計稿包含的所有切圖，勾選底部的「復(fù)選框」，可以選中所有的切圖，再點擊右側(cè)的「導(dǎo)出」按鈕，就可以將所有的切圖批量導(dǎo)出到本地。

? Pixso 個人版完全免費

使用在線設(shè)計軟件 Pixso 進(jìn)行切圖，既能兼容多種設(shè)計文件，更重要的是，Pixso 對個人用戶完全免費，現(xiàn)在前往 Pixso 官網(wǎng)注冊賬號，可以享受到 Pixso 會員的所有權(quán)益：無限文件數(shù)量、無協(xié)作者人數(shù)限制、無限云存儲空間、3000+ 免費設(shè)計資源任你用等，滿足個人和小型團(tuán)隊在線設(shè)計協(xié)作需求，免費享受豐富設(shè)計資源和高效協(xié)作體驗！







碼字不易，如果對你有幫助的話，請別忘了賞個【三連】或是【關(guān)注】我哦，關(guān)注不迷路！

我是皮仔 @Pixso協(xié)同設(shè)計，那我們下次再見咯。