PxCook(像素大廚)是面向設計師的一款免費、交互流暢、全平臺支持的標注切圖工具軟件。它支持對PS、Sketch設計元素尺寸、元素距離、文本樣式、顏色的智能標注，支持智能切圖。

以下，就會著重展示PxCook的支持平臺、核心功能與流暢體驗。

支持的平臺(Window和Mac OS)

PxCook支持Windows操作系統和Mac OS

支持的工具類型(PS和Sketch均支持)

·PS：

需要把psd文件拖拽到PxCook工具中，PxCook將會在工具內解析psd文件，以便智能標注。而切圖需要在PS中打開遠程連接，通過PxCook的浮窗實現切圖

·Sketch：

在Sketch中，點擊“導出當前畫板到PxCook”后會自動啟動PxCook，并顯示出Sketch中對應的畫板內容，依舊在PxCook中標注。

流暢的體驗

(一) 元素之間自動標注——拖、放

需要做的只是一拖一放，就是這么簡單，就自動生成了。

將psd拖拽到PxCook中，Pxcook就會讀取psd的所有信息，接下來，以圖中的im聊天場景為例，無論是元素間，元素與邊框間的距離標注，都只需要簡單的 拖、放，就自動生成了。

(二) 包含關系的自動標注——仍然是拖和放

PxCook能獲取psd的所有信息，包括從屬關系。如圖示中的文字框，距離氣泡欄的距離也能通過一樣的操作——拖、放而自動生成。

當元素太小，拖動也很不方便時，可以先后點選兩個元素，然后再點擊頂部測量內距的按鈕就嫩自動生成上下左右的距離標注。

(三) 元素的外部尺寸標注——一個按鈕，一次點擊

快速標記一個元素的尺寸，可以選中它，點擊圖示按鈕就好，依然會自動生成。

對于用慣了拖 放的用戶，像上圖中繼續橫向或縱向拖放也是可以的。

(四) 字體的自動標記——一個按鈕，一次點擊

PxCook對此的解決辦法是，點一下選中文字框，再點一下就能自動生成。生成的字體字號等標注，是可以拖動重新擺放位置的。

·這里有一個精心打造的細節：在Ps里有些用戶習慣對圖層使用顏色疊加來修改文本顏色，甚至文本圖層外還會套著有顏色疊加的組。這些在PxCook中都不是問題，PxCook可以通過各種嵌套和顏色疊加關系，將最終的文本顏色解析并標注出來。

(五) 支持各種單位自由轉換——px dp pt

考慮到面向不同手機操作系統的設計師用到的單位不同，PxCook可以自動切換單位，點擊切換，所有標注都輕松同步更換~。存在于應用頂部的按鈕～如下圖：

(六) 內部尺寸標記方法二，選中點擊

還是最簡單的操作，選中、點擊,直接解決了尺寸標記在內部的需求

其他PxCook的功能還包括：

1. 自動識別出來的標注數字支持自己手動改數值。

2. 智能識別PSD更新，當你遭遇改稿調整時，之前的自動標注會自動更新，終于不用再改一遍標注了！

3. 自動吸附：標注過程中可以針對圖像內突出顏色進行自動吸附。

4. 軟件設置：在設置面板中可以進行如：標注字號、標注自動對齊、滾輪、即數字精確度等設置。

5. 定制標注樣式：可以定制每個標注的顏色，標簽位置等樣式。

6. 顏色模式設置：目前支持#Hex, argb, rgba三種顏色模式。

7. 自動備份功能。

還有很多值得期待，因為我們一直在迭代更新……

開發小團隊寫在最后：PxCook作為設計師貼心的切圖標注工具，在前端&UI設計領域一直被口口相傳。翻開更新日志歷史，"提升體驗，場景設計…"等好幾百條更新記錄靜靜的躺在那里，并不急著告訴我們PxCook已走過了兩個年頭。真正令人印象深刻的，其實是在兩年反復打磨中未曾間斷的喜悅：開發小匠featherJ陸續完成了對Windows、MacOS操作系統都支持的1.x版本、對PS、Sketch也都支持的2.x版本；產品小匠來蘇水也無數次于種子群的深度交流中，將產品需求提煉的日趨完善……慢慢的，一切工作都讓我們越發有底氣的發出聲音—— “希望更多設計師能看到PxCook，使用PxCook，愉快完成設計的最后一個環節。”

再次強調PxCook是一款免費的智能標注切圖軟件，免費。

喜歡這篇文章的設計師們，歡迎移步PxCook官網點擊下載(使用前，請先在左側官網內安裝Adobe AIR)我們也會通過官方公眾號： PxCook? 定期發布效率工具和日常更新

有任何使用問題或建議都可以加入官方q群：661255798?提問^^

總結

以上是生活随笔為你收集整理的像素大厨标注如何导出Html,每个设计师都在用的UI标注工具UI切图软件——PxCook像素大厨...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。