前言：當設計師通過photoshop工具設計完設計稿導出psd文件時，我們前端工程師該如何進行切圖轉換成網頁的所需的圖片呢，接下來講講如何利用photoshop工具快速簡潔的切圖，因為ps工具用到的行業很多，涉及到的各個行業，所以有一些快捷的面板可以隱藏掉。前端工程師只顯示適合面板和元素就可以了。

目標：自己能夠使用photoshop從設計師提供的psd中獲取網頁前端開發過程中所需要的資源

一：首先：先了解大致了解一下，當前流行的設計稿尺寸以及工具，如下對應表

? ?渠道UI ? ? ? ? ? ? ? ? ? ? ? 設計工具 ? ? ? ? ? ? ? ? ? 基礎尺寸

? app（安卓）? ? ? ? ? ? ? sketch ? ? ? ? ? ? ? ? ? ? ? ? 720px?

? 微信，IOS ? ? ? ? ? ? ? ? ? sketch,ps ? ? ? ? ? ? ? ? ? 640px

?pc? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ps? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1920px,1600px.，1024px..

? ? ? ? ? ? ? ? ?基于Photoshop設計，會輸出psd文件，用ps進行切圖 ?。

?二：ps切圖原則

? ? ? ? ? ? ? ?前端網頁切圖應用尺寸單位一般px像素，RGB的顏色模式,屏幕顯示一般是RGB

?三：ps合適的預設?

• 文件-新建--：初始化預設設置1920x2000，72分辨率，8位色圖，背景透明色 ?然后保存起來。后續可以選擇新建模版
• 視圖/顯示/智能參考線以及視圖/字符，這兩個都要選上；
• 編輯/首選項/單位與標尺【標尺：像素；文字：像素，其他默認不用改動】

• ps界面中有菜單欄、屬性欄、工具欄、面板、工作區：

• 面板選擇：圖層、歷史記錄、信息、字符. 這四個，點擊信息面板那一個小三角，打開面板選項/標尺單位：像素；兩個像素模式：RGB顏色；文檔尺寸選上，然后確定信息面板：坐標改為像素，顏色改為RGB。比如面板顯示信息，當我們點擊該圖片時，對應的信息高寬等都可以直接顯示。很方便

• ?加上輔助智能參考線標尺等；首選項設置為像素

?

?

• • • • • ?

四：前端切圖快捷工具

? ? ? ? 1:ctrl +；? 隱藏參考線 顯示參考線

? ? ? ? ?2:導出切片：alt+shift+ctrl+s（文件-存儲為web所用格式）

? ? ? ? ?3:移動工具，任何時候按v，就可以回到移動工具

? ? ? ? ?4:移動工具快捷鍵（v）

? ? ? ? ?5:選框工具快捷鍵（m）

五：推薦的壓縮圖片網站?png 圖片推薦用tinypng壓縮，超級無損。

• https://tinypng.com/

?

?，結束。thx.若有不懂可以聯系本文作者我啦。

?

• • 
    
    • ?

      
      

轉載于:https://www.cnblogs.com/susuila/p/6021930.html

總結

以上是生活随笔為你收集整理的前端必备切图ps篇的全部內容，希望文章能夠幫你解決所遇到的問題。

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