教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

PS:圖層切圖、切片切圖、PS 插件切圖

更新時(shí)間:2022年01月07日09時(shí)45分 來源:傳智教育 瀏覽次數(shù):

在布局頁面時(shí),是需要對圖片部分進(jìn)行切片處理,切圖可以說是每個(gè)前端必須掌握的基礎(chǔ)技能之一,在實(shí)際開發(fā)中,PS切圖可以說是最方便快捷的,PS 有很多的切圖方式:圖層切圖、切片切圖、PS 插件切圖等都是比較常用的。本節(jié)課就來學(xué)習(xí)這三種方法進(jìn)行切圖。

常見的圖片格式

1. jpg圖像格式: JPEG(.JPG)對色彩的信息保留較好,高清,顏色較多,我們產(chǎn)品類的圖片經(jīng)常用jpg格式的

2. gif圖像格式:GIF格式最多只能儲(chǔ)存256色,所以通常用來顯示簡單圖形及字體,但是可以保存透明背景和動(dòng)畫效果, 實(shí)際經(jīng)常用于一些圖片小動(dòng)畫效果.

3. png圖像格式是一種新興的網(wǎng)絡(luò)圖形格式,結(jié)合了GIF和JPEG的優(yōu)點(diǎn),具有存儲(chǔ)形式豐富的特點(diǎn),能夠保持透明背景. 如果想要切成背景透明的圖片,請選擇png格式.

4. PSD圖像格式PSD格式是Photoshop的專用格式,里面可以存放圖層、通道、遮罩等多種設(shè)計(jì)稿. 對我們前端人員來說,最大的優(yōu)點(diǎn),我們可以直接從上面復(fù)制文字,獲得圖片,還可以測量大小和距離.


圖層切圖

最簡單的切圖方式:右擊圖層→快速導(dǎo)出為 PNG。但是很多情況下,我們需要合并圖層再導(dǎo)出:

1. 選中需要的圖層: 圖層菜單→合并圖層(ctrl+e)

2. 右擊→快速導(dǎo)出為 PNG 最好的方法是: 溝通


切片切圖

PS 有很多的切圖方式:圖層切圖、切片切圖、PS 插件切圖等。

1. 利用切片選中圖片

利用切片工具手動(dòng)劃出文件菜單 

2. 導(dǎo)出選中的圖片

導(dǎo)出→存儲(chǔ)為 web 設(shè)備所用格式→選擇我們要的圖片格式→存儲(chǔ)。

切片切圖


PS 插件切圖

Cutterman是一款運(yùn)行在Photoshop中的插件,能夠自動(dòng)將你需要的圖層進(jìn)行輸出,以替代傳統(tǒng)的手工

"導(dǎo)出web所用格式" 以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程。

官網(wǎng):http://www.cutterman.cn/zh/cutterman

注意:Cutterman插件要求你的PS 必須是完整版,不能是綠色版,所以大家需要安裝完整版本。

插件切圖





猜你喜歡:

CSS如何清除浮動(dòng)?清除浮動(dòng)的方法有哪些?

Flex 布局介紹:Flex 布局常見子項(xiàng)屬性

網(wǎng)頁一般用什么工具布局?常用的網(wǎng)頁流程布局介紹

CSS3 rotateX和rotateY用法介紹

傳智教育HTML前端與移動(dòng)開發(fā)培訓(xùn)

0 分享到:
和我們在線交談!