會寫網頁的人有很多，但并不是每個人都是優秀的前端工程師。想要成為一名優秀的前端工程師，必須具備網站的用戶體驗的優化，其中包括網頁打設計和實現。
當然，設計是由設計師來完成的，文匯小編要講的是如何將設計好的網頁PSD文件很好的轉化為Html文件，這里以文匯自己的網站來說明。
首先來講一下切圖：
如圖所示，設計稿的psd圖層分組情況，文匯小編以圖層組“文字”為例，進行網頁中透明底圖片的講解。
鼠標單擊選中圖層組“文字”，右擊，
在彈出的選項卡中選擇“轉換為智能對象”。
雙擊打開智能對象，
畫布如下圖，
此時使用快捷鍵Ctrl+Shift+Alt+S，彈出保存窗口如下，
在圖片格式中選擇PNG-24，保存。
這樣，透明底圖片的切圖就完成了。
其次，講一下如何優化網頁內用到的大圖片，比如通屏的banner圖，這里以文匯首頁的第一張banner的背景為例進行講解。
拿到banner的psd文件后，關閉不需要的圖層，使用快捷鍵Ctrl+Shift+Alt+S，彈出如下保存窗口如下，
在圖片格式中選擇JPEG，品質改為60，若圖片質量有明顯減損，調整品質值到合適的數值后保存；否則，直接保存即可。
降低品質值的方法主要是通過降低網站打開時需要的緩沖來進行用戶體驗的優化。
做成后的banner如下圖所示：
了解更多動態效果及詳情，請參考文匯軟件 http://m.tongyilingma.com/ 。
上一篇： 網頁版式設計中前期的準備工作
下一篇： 版式設計是網頁設計中重要的設計之一
