Photoshop怎么頁(yè)面切圖
Photoshop怎么頁(yè)面切圖
網(wǎng)頁(yè)設(shè)計(jì)在技術(shù)層面上,首先是美工做出網(wǎng)頁(yè)效果圖,其次就是網(wǎng)頁(yè)前端進(jìn)行網(wǎng)頁(yè)切圖,用Photoshop就可以把頁(yè)面進(jìn)行切圖。下面是學(xué)習(xí)啦小編整理的Photoshop頁(yè)面切圖的方法,供您參考。
Photoshop頁(yè)面切圖的方法
第一步 用PS打開(kāi)網(wǎng)頁(yè)效果圖PSD文件,根據(jù)網(wǎng)頁(yè)效果圖拉出參考線(xiàn),同時(shí)為了方便切圖可以右鍵點(diǎn)擊把面板的顏色自定成對(duì)比鮮明的顏色。
第二步 在PS圖層中找出主背景圖層,如果背景圖是漸變的話(huà)可以只切出一兩像素,后面再代碼中設(shè)置填充。
第三步 隱藏其他圖層,把背景圖切出來(lái)。如果背景圖很大,可以考慮分段切出,這樣可以加速網(wǎng)頁(yè)加載。
第四步 切出背景后,就從上到下,先把LOGO切出。這里同樣要隱藏其他圖層,輸出圖片的時(shí)候保存文件類(lèi)型選擇png,因?yàn)檫@樣可以使得圖片背景透明。
第五步 導(dǎo)出圖片可以選擇文件——存儲(chǔ)為web和設(shè)備所有格式
第六步 在保存切出圖片的時(shí)候,選擇保存HTML和圖片,這樣導(dǎo)出來(lái)的就會(huì)自動(dòng)生成一個(gè)網(wǎng)頁(yè)頁(yè)面和切圖圖片
第五步 在切像尾部版權(quán)部分的背景時(shí)候,發(fā)現(xiàn)這個(gè)是漸變圖層,這樣就可以只切出一個(gè)像素的長(zhǎng)度。然后在代碼中設(shè)置repeat-x橫軸填充
Photoshop頁(yè)面切圖的相關(guān)文章: