更新時間:2022-01-11 來源:黑馬程序員 瀏覽量:
在布局頁面時,是需要對圖片部分進行切片處理,切圖可以說是每個前端必須掌握的基礎(chǔ)技能之一,在實際開發(fā)中,PS切圖可以說是最方便快捷的,PS 有很多的切圖方式:圖層切圖、切片切圖、PS 插件切圖等都是比較常用的。本節(jié)課就來學習這三種方法進行切圖。
1. jpg圖像格式: JPEG(.JPG)對色彩的信息保留較好,高清,顏色較多,我們產(chǎn)品類的圖片經(jīng)常用jpg格式的
2. gif圖像格式:GIF格式最多只能儲存256色,所以通常用來顯示簡單圖形及字體,但是可以保存透明背景和動畫效果, 實際經(jīng)常用于一些圖片小動畫效果.
3. png圖像格式是一種新興的網(wǎng)絡(luò)圖形格式,結(jié)合了GIF和JPEG的優(yōu)點,具有存儲形式豐富的特點,能夠保持透明背景. 如果想要切成背景透明的圖片,請選擇png格式.
4. PSD圖像格式PSD格式是Photoshop的專用格式,里面可以存放圖層、通道、遮罩等多種設(shè)計稿. 對我們前端人員來說,最大的優(yōu)點,我們可以直接從上面復制文字,獲得圖片,還可以測量大小和距離.
1. 選中需要的圖層: 圖層菜單→合并圖層(ctrl+e)
2. 右擊→快速導出為 PNG 最好的方法是: 溝通
1. 利用切片選中圖片
右擊選中左側(cè)菜單欄裁剪工具中的切片工具,
利用切片工具手動劃出想要裁剪的區(qū)域。
2. 導出圖片
Ctrl+s導出→存儲為jpg或者png格式→選擇儲存位置→就可以看到在儲存位置自動生成了一個名為images的文件夾,打開就可以看到剛剛剪切完成的三張圖。
Cutterman是一款運行在Photoshop中的插件,能夠自動將你需要的圖層進行輸出,以替代傳統(tǒng)的手工
"導出web所用格式" 以及使用切片工具進行挨個切圖的繁瑣流程。
官網(wǎng):http://www.cutterman.cn/zh/cutterman
注意:Cutterman插件要求你的PS 必須是完整版,不能是綠色版,所以大家需要安裝完整版本。