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

當然，設計是由設計師來完成的，文匯小編要講的是如何將設計好的網(wǎng)頁PSD文件很好的轉(zhuǎn)化為Html文件，這里以文匯自己的網(wǎng)站來說明。

首先來講一下切圖：

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

鼠標單擊選中圖層組“文字”，右擊，

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

雙擊打開智能對象，

畫布如下圖，

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

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

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

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

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

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

降低品質(zhì)值的方法主要是通過降低網(wǎng)站打開時需要的緩沖來進行用戶體驗的優(yōu)化。

做成后的banner如下圖所示：

了解更多動態(tài)效果及詳情，請參考文匯軟件 http://www.geizy.cn/ 。