切圖工具/插件介紹
- 2019 年 12 月 4 日
- 筆記
本文作者：IMWeb moonye 原文出處：IMWeb社區 未經同意，禁止轉載
切圖工具
切圖插件
這裡的插件都是ps的插件，比較小巧，易於安裝和適用，並且很靈活
cutterman
是一款運行在photoshop中的插件，能夠自動將你需要的圖層進行輸出，以替代傳統的手工 "導出web所用格式" 以及使用切片工具進行挨個切圖的繁瑣流程。 它支援各種各樣的圖片尺寸、格式、形態輸出，方便你在pc、ios、Android等端上使用。 它不需要你記住一堆的語法、規則，純點擊操作，方便、快捷，易於上手 點擊下載
css3ps
也是很好用的一個photoshop插件，選中需要的圖層，然後點擊插件的按鈕，自動會生成圖層上覆蓋的樣式。包括漸變、邊框、陰影、文本相關、背景、背景色、圓角。再也不用自己寫這些值或者一個一個設置調整了。生成的樣式會在一個新的網頁中打開。（其實我更希望它能夠直接生成到剪切板中）
其實phtotshop cc版本裡面自帶了複製css的功能，可以將圖層的css樣式複製到剪切板中，粘貼即可使用，但用的時候發現會有不少冗餘的樣式再裡面，還需手動清理，還是有點麻煩， 感興趣的同學可以試試
SLICY
是一款類似cutterman的工具，可選圖層、組導出，可導出不同尺寸。目前只能在mac上使用，方便導出自己需要的圖片。 點擊官網
PSD to HTML
PSD to HTML看說明挺屌的一個軟體，但是沒法試用，有興趣的同學可以買來試試。不貴，49美刀，恩，買不起。
在線切圖軟體
這裡介紹的都是一些免費的軟體，付費的還是挺貴的，用不起。 他們可以上傳一些小的psd文件（估計20M左右，上傳40M的頁面會掛掉），在線幫忙切圖，生成html和css。
psdtoweb 號稱是目前為止最自動化的切圖軟體，對源文件要求也不多，整個過程操作非常easy，最大可以上傳80MB文件。試了下小的文件可以，30MB左右文件上傳成功後在解析的時候會卡住，而且切圖後的標籤主要是div和img，不太理想。
psd2html converter 這個感覺還挺不錯的，自動生成html和css。自動化程度比較高，支援一些簡單的配置，容易上手，也可以預覽查看源碼，切圖出來的標籤也多樣化些，可以自動動手試試。當然，如果要下載程式碼，每個psd對應的資源下載是需要3.5刀。
PSD 2 CSS Online 試了下，10MB左右的psd文件可以處理，大一些的文件無法上傳成功。小psd處理的結果也是不太理想，div和img標籤佔主要的。
jadii 看著比較方便和高大上的一個網站，操作流程也極其簡單。然而，好像哪裡不對，上傳psd後網站返回的html和css均是空的。mark下，有機會再上去看看。
專業的切圖網站
psd2html是一個在線的網站，承接任務，人工切圖的。沒試過，應該很專業，人家也很貴啊，還不如自己切。土豪們隨意。
小結
- 自動化高的軟體，在訂製上就少。而如何布局、區分標籤、處理dom層次等這類較複雜的東西，目前的軟體無法做到。這樣軟體生成的東西最終還是會要使用者根據自己的需求來改一遍。是自己切圖好還是由軟體切好自己來重構，沒具體比較。個人更傾向前一種。使用好一個小的插件就能夠很好的提升效率
- 切圖軟體是小的比較靈活實用，大的在處理能力上還是有所限制。即便是收費的軟體，也沒有看到有很受推崇的軟體
- 軟體在使用的時候，對源文件psd是有要求的，譬如源文件的圖層命名、分組、圖層劃分方式等。這個工作最好是由一個人來完成，兩人協作中間需要有明確的協議
