前端切圖兩種方法整理


之前自己轉賬了一篇文章《切圖 — Photoshop(轉載)》,里面關於切圖的工具、方法和讀取的信息,已經寫得很詳細了。

現在簡單總結一下自己整理的兩個切圖的方法(個人覺得完全夠用了)

工具:Photoshop CC 2018

方法一、傳統切圖:

  • 快捷鍵:C

選擇切片工具

 

用切片工具在切出想要的切片

 

存儲切片

  • 路徑:文件 - 導出 - 存儲為Web所用格式
  • 快捷鍵:Ctrl + Shift + Alt + S
  • 保存選項:(可看上面轉載文章)

最后,保存選項,選擇 “所有用戶的切片”,切出來結果如下

 

 方法二、精准切圖:

比較喜歡這個方法,畢竟懶人方法,還精准,高效。

有時候部分圖片會加一些類似陰影的特效,手工切不太切得出效果,精准切圖解決起來就很方便

首先:

打開 “編輯 - 首選項 - 增效工具” (Ctrl + K + 曾效工具) , 再 “啟用生成器”

 

再選擇 “文件 - 生成 - 圖像資源”

最后,在准備生成切片的圖層或組上,修改名稱后綴。如下,原 “title” 文件改成 “title.png”

就會在當前,視覺稿目錄下生成一個“視覺稿名稱-assets”的文件夾,里面就有“title.png”了。

 

 最后的最后,轉載一下這篇文章《PS教程|自動生成圖像資源終極指南》,后綴名可以控制圖片格式(jpg、png、gif),圖片質量(png24,jpg50%)等。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM