ps CC自動切圖與前端CSS代碼

2023-11-18 17:50:15 來源/作者: / 己有:2人學習過

右擊圖層面板上的圖層,選擇“復制 CSS”,或點擊菜單“圖層->復制 CSS”;

多個圖層的批量獲取,請選擇多個圖層,執(zhí)行 Ctrl+G,將所選圖層轉為圖層組。然后在該組上右擊,選擇“復制 CSS”,即可批量獲取 CSS 代碼。

智能對象暫不支持“復制 CSS”功能,您可以柵格化該圖層再來使用。

當前的版本的此功能,包含了很多冗余信息和不太友好的寫法,可能不是大家真正需要的。于是 ISUX 前端團隊改進了這個功能,您可以下載“PhotoshopCopyCSS”來增強 Photoshop CC 自帶的“復制 CSS”功能,提升 CSS 代碼的真正采用率;目前的優(yōu)化有:

* 自動識別 CSS Sprite 圖片,獲取 background-position 信息; * 自動識別是否圖標; * 優(yōu)化 CSS3 漸變、文字、邊框、陰影等 CSS 代碼; * 優(yōu)化 RGB 顏色值成 十六進制顏色; * 去除冗余 CSS 屬性,如 position, z-index, left, top 等。

您也可以反饋更好的建議,讓這個功能真正為大家所用。

圖層管理

前端開發(fā)同學接手的 psd 文檔,往往有大量圖層,我們需要對其進行整理。例如刪除空白、鎖定、文本等圖層。我們還可以通過圖層類型、名稱、效果、屬性等條件進行快速定位圖層。

Photoshop CC自動切圖與前端CSS代碼 Photoshop CC自動切圖與前端CSS代碼

Photoshop CC自動切圖與前端CSS代碼 Photoshop CC自動切圖與前端CSS代碼

使用此功能可以很方便定位到當前選定圖層,非常適合含有大量圖層的 psd 文檔。

另外隔離圖層也是個很不錯的功能。開啟隔離圖層功能之后,我們可以通過移動選擇工具,點選畫布上的內容,找出我們需要的圖層將其整理成一個獨立的 psd 文件。

Photoshop CC自動切圖與前端CSS代碼
WebP 插件

WebP 是 Google 為減少數據量、加速網絡傳輸的目的而開發(fā)的圖片格式。特別適合移動端圖片的傳輸。大大節(jié)省帶寬,目前只有 Google Chrome 瀏覽器對其原生支持。

Photoshop CC 的 Mac OS 版自帶輸出 WebP 功能。Windows 下您可以下載此插件來輸出 WebP 格式。安裝后,可以在 Photoshop 菜單“文件->另存為” 對話框中選擇“WebP格式圖片”。

WebP for Photoshop v0.5b5, 16 December 2013 Mac | Win

動作條件

Photoshop CC 新增了動作條件,可以根據不同條件執(zhí)行命令或其他動作。

Photoshop CC自動切圖與前端CSS代碼
智能參考線/使用圖層顏色

這兩個功能并不是 Photoshop CC 的新功能。為什么要在這里說呢,因為它能輔助我們一秒居中對齊、一秒貼邊,這個非常實用。另外也建議設計師使用圖層顏色來標出改動位置,這樣前端開發(fā)同學便能快速定位圖層。

Photoshop CC自動切圖與前端CSS代碼

 

Photoshop CC自動切圖與前端CSS代碼