自動(dòng)切圖（含WebP卧檐、SVG格式）：
前端開(kāi)發(fā)人員經(jīng)常需要將很多圖層切出成獨(dú)立的圖片切蟋。有了自動(dòng)切圖功能，無(wú)需花更多時(shí)間來(lái)切圖了滚停。只需在圖層名后添加相應(yīng)格式后綴（如.png)沃粗，即可自動(dòng)輸出所需格式的圖片。
請(qǐng)保持菜單“編輯->首選項(xiàng)->增效工具”中的“生成器”為啟用狀態(tài)键畴；
依次點(diǎn)擊菜單“文件->生成->圖像資源”最盅，確認(rèn)該菜單項(xiàng)已被勾選突雪；
Photoshop CC自動(dòng)切圖與前端CSS代碼
Photoshop CC自動(dòng)切圖與前端CSS代碼
試著修改某個(gè)圖層命名(如 iTunes.png)，然后檢查當(dāng)前 psd 文件所在目錄下的“文件名-assets” 的目錄涡贱，打開(kāi)此目錄咏删，發(fā)現(xiàn) iTunes.png 已經(jīng)躺在里面了。
Photoshop CC自動(dòng)切圖與前端CSS代碼
常用技巧：
@2x Retina 圖片的輸出问词，在圖層前添加 200% 即可督函，如 200% logo@2x.png ;
開(kāi)啟 WebP、SVG 格式的自動(dòng)輸出： 新建 generator.json 文件激挪，內(nèi)容如下：
{ "generator-assets": { "svg-enabled": true, "webp-enabled": true }}
將此配置文件拷貝至： Windows: (Win+R后輸入 %USERPROFILE% )目錄下辰狡，如 C:\Users\xxx Mac OS: $HOME 如“Macintosh HD>Users>xxx” 目錄下 WebP 輸出暫只支持 Mac OS。
復(fù)制 CSS
Photoshop CC 終于推出了“復(fù)制CSS” 功能垄分。它能讓開(kāi)發(fā)人員快速獲取形狀的 CSS 代碼宛篇。其實(shí)不少設(shè)計(jì)師也很想學(xué)習(xí) CSS，有了這個(gè)功能薄湿，可以讓這些愛(ài)學(xué)習(xí)的設(shè)計(jì)師熟悉 CSS 代碼與圖形的對(duì)應(yīng)關(guān)系叫倍；
Photoshop CC自動(dòng)切圖與前端CSS代碼,PS教程,思緣教程網(wǎng)
右擊圖層面板上的圖層，選擇“復(fù)制 CSS”豺瘤，或點(diǎn)擊菜單“圖層->復(fù)制 CSS”段标；
多個(gè)圖層的批量獲取，請(qǐng)選擇多個(gè)圖層炉奴，執(zhí)行 Ctrl+G逼庞，將所選圖層轉(zhuǎn)為圖層組。然后在該組上右擊瞻赶，選擇“復(fù)制 CSS”赛糟，即可批量獲取 CSS 代碼。
智能對(duì)象暫不支持“復(fù)制 CSS”功能砸逊，您可以柵格化該圖層再來(lái)使用璧南。
當(dāng)前的版本的此功能，包含了很多冗余信息和不太友好的寫(xiě)法师逸，可能不是大家真正需要的司倚。于是 ISUX 前端團(tuán)隊(duì)改進(jìn)了這個(gè)功能，您可以下載“PhotoshopCopyCSS”來(lái)增強(qiáng) Photoshop CC 自帶的“復(fù)制 CSS”功能篓像，提升 CSS 代碼的真正采用率动知；目前的優(yōu)化有：
自動(dòng)識(shí)別 CSS Sprite 圖片，獲取 background-position 信息员辩；自動(dòng)識(shí)別是否圖標(biāo)盒粮；優(yōu)化 CSS3 漸變、文字奠滑、邊框丹皱、陰影等 CSS 代碼妒穴；優(yōu)化 RGB 顏色值成 十六進(jìn)制顏色；去除冗余 CSS 屬性摊崭，如 position, z-index, left, top 等讼油。
您也可以反饋更好的建議，讓這個(gè)功能真正為大家所用呢簸。
圖層管理
前端開(kāi)發(fā)同學(xué)接手的 psd 文檔汁讼，往往有大量圖層，我們需要對(duì)其進(jìn)行整理阔墩。例如刪除空白嘿架、鎖定、文本等圖層啸箫。我們還可以通過(guò)圖層類(lèi)型耸彪、名稱(chēng)、效果忘苛、屬性等條件進(jìn)行快速定位圖層蝉娜。
Photoshop CC自動(dòng)切圖與前端CSS代碼
Photoshop CC自動(dòng)切圖與前端CSS代碼
Photoshop CC自動(dòng)切圖與前端CSS代碼
Photoshop CC自動(dòng)切圖與前端CSS代碼
使用此功能可以很方便定位到當(dāng)前選定圖層，非常適合含有大量圖層的 psd 文檔扎唾。
另外隔離圖層也是個(gè)很不錯(cuò)的功能召川。開(kāi)啟隔離圖層功能之后，我們可以通過(guò)移動(dòng)選擇工具胸遇，點(diǎn)選畫(huà)布上的內(nèi)容荧呐，找出我們需要的圖層將其整理成一個(gè)獨(dú)立的 psd 文件。
WebP 插件
WebP 是 Google 為減少數(shù)據(jù)量纸镊、加速網(wǎng)絡(luò)傳輸?shù)哪康亩_(kāi)發(fā)的圖片格式倍阐。特別適合移動(dòng)端圖片的傳輸。大大節(jié)省帶寬逗威，目前只有 Google Chrome 瀏覽器對(duì)其原生支持峰搪。
Photoshop CC 的 Mac OS 版自帶輸出 WebP 功能。Windows 下您可以下載此插件來(lái)輸出 WebP 格式凯旭。安裝后概耻，可以在 Photoshop 菜單“文件->另存為” 對(duì)話框中選擇“WebP格式圖片”。
WebP for Photoshopv0.5b5, 16 December 2013Mac|Win
動(dòng)作條件
Photoshop CC 新增了動(dòng)作條件罐呼，可以根據(jù)不同條件執(zhí)行命令或其他動(dòng)作鞠柄。
Photoshop CC自動(dòng)切圖與前端CSS代碼
智能參考線/使用圖層顏色
這兩個(gè)功能并不是 Photoshop CC 的新功能。為什么要在這里說(shuō)呢弄贿，因?yàn)樗茌o助我們一秒居中對(duì)齊春锋、一秒貼邊矫膨，這個(gè)非常實(shí)用差凹。另外也建議設(shè)計(jì)師使用圖層顏色來(lái)標(biāo)出改動(dòng)位置期奔，這樣前端開(kāi)發(fā)同學(xué)便能快速定位圖層。
Photoshop CC自動(dòng)切圖與前端CSS代碼
