會(huì)寫(xiě)網(wǎng)頁(yè)的人有很多，但并不是每個(gè)人都是優(yōu)秀的前端工程師。想要成為一名優(yōu)秀的前端工程師，必須具備網(wǎng)站的用戶(hù)體驗(yàn)的優(yōu)化，其中包括網(wǎng)頁(yè)打設(shè)計(jì)和實(shí)現(xiàn)。

當(dāng)然，設(shè)計(jì)是由設(shè)計(jì)師來(lái)完成的，文匯小編要講的是如何將設(shè)計(jì)好的網(wǎng)頁(yè)P(yáng)SD文件很好的轉(zhuǎn)化為Html文件，這里以文匯自己的網(wǎng)站來(lái)說(shuō)明。

首先來(lái)講一下切圖：

如圖所示，設(shè)計(jì)稿的psd圖層分組情況，文匯小編以圖層組“文字”為例，進(jìn)行網(wǎng)頁(yè)中透明底圖片的講解。

鼠標(biāo)單擊選中圖層組“文字”，右擊，

在彈出的選項(xiàng)卡中選擇“轉(zhuǎn)換為智能對(duì)象”。

雙擊打開(kāi)智能對(duì)象，

畫(huà)布如下圖，

此時(shí)使用快捷鍵Ctrl+Shift+Alt+S，彈出保存窗口如下，

在圖片格式中選擇PNG-24，保存。

這樣，透明底圖片的切圖就完成了。

其次，講一下如何優(yōu)化網(wǎng)頁(yè)內(nèi)用到的大圖片，比如通屏的banner圖，這里以文匯首頁(yè)的第一張banner的背景為例進(jìn)行講解。

拿到banner的psd文件后，關(guān)閉不需要的圖層，使用快捷鍵Ctrl+Shift+Alt+S，彈出如下保存窗口如下，

在圖片格式中選擇JPEG，品質(zhì)改為60，若圖片質(zhì)量有明顯減損，調(diào)整品質(zhì)值到合適的數(shù)值后保存；否則，直接保存即可。

降低品質(zhì)值的方法主要是通過(guò)降低網(wǎng)站打開(kāi)時(shí)需要的緩沖來(lái)進(jìn)行用戶(hù)體驗(yàn)的優(yōu)化。

做成后的banner如下圖所示：

了解更多動(dòng)態(tài)效果及詳情，請(qǐng)參考文匯軟件 http://www.ok3333.net/ 。