在為前端工程師提供素材時(shí)，為了他們上傳方便，不能將整版的圖片給他們，而需要切圖。切圖時(shí)用PS的切片工具非常方便。切片工具能夠?qū)⒃瓐D像分割成很多區(qū)域，存儲(chǔ)圖像時(shí)每一個(gè)分割出來的區(qū)域會(huì)作為獨(dú)立的圖像來存儲(chǔ)

在為前端工程師提供素材時(shí)，為了他們上傳方便，不能將整版的圖片給他們，而需要切圖。切圖時(shí)用PS的切片工具非常方便。切片工具能夠?qū)⒃瓐D像分割成很多區(qū)域，存儲(chǔ)圖像時(shí)每一個(gè)分割出來的區(qū)域會(huì)作為獨(dú)立的圖像來存儲(chǔ)。

步驟一：切割九宮格圖像

1. 在PS中打開一張九宮格圖像，現(xiàn)在想將9個(gè)小圖像分別保存在一個(gè)文件夾中。

2. 選擇切片工具（右擊裁剪工具即可顯示），用切片工具沿著9個(gè)畫面一一切割。發(fā)現(xiàn)共出現(xiàn)17個(gè)切片，這是因?yàn)橐坏┊嫵鲆粋€(gè)切片，就會(huì)將該切片的周圍自動(dòng)劃分為幾個(gè)切片。17個(gè)切片是9張畫面（用戶切片）和8個(gè)白色縫隙（自動(dòng)切片）。

3. 保存為web所用格式（Ctrl Shift Alt S），可以起一個(gè)名字，如“hua”，在“切片”處選擇“所有用戶切片”（也就是自己畫出的那9個(gè)切片）。默認(rèn)是保存“所有切片”，會(huì)把8個(gè)白色縫隙也保存下來（自動(dòng)切片）。

步驟二：保存并整理圖像

4. 保存后發(fā)現(xiàn)圖像存儲(chǔ)在images文件夾中，共有9個(gè)圖像。這些單獨(dú)的圖像可以幫助前端工程師更輕松地進(jìn)行網(wǎng)頁設(shè)計(jì)和開發(fā)，提高工作效率。

5. 對于有特殊要求的切圖，PS的切片工具也支持自定義切片大小和位置，滿足不同需求的設(shè)計(jì)師和工程師。

總結(jié)

通過PS的切片工具，設(shè)計(jì)師可以將大圖像快速、準(zhǔn)確地分割成小圖像，方便前端工程師使用。這種有效的工作流程可以提高團(tuán)隊(duì)的協(xié)作效率，確保網(wǎng)頁設(shè)計(jì)的質(zhì)量和效果。因此，在日常工作中熟練掌握PS的切片工具，對于提升工作效率和改善工作流程是非常重要的。