用ps網頁切圖的技巧

用ps網頁切圖的技巧

　　切圖的好處，第一，是要控制單張圖片的大小。把大圖片切割成幾個小圖片，有利于瀏覽者盡快看到你的網頁。第二，為了使排版不受到網頁制作軟件的限制。那么如何使用PS進行網頁切圖呢?下面是學習啦小編為大家整理的用ps網頁切圖的技巧，僅供大家參考~

　　用ps網頁切圖的技巧如下：

　　第一步 用PS打開網頁效果圖PSD文件，根據網頁效果圖拉出參考線，同時為了方便切圖可以右鍵點擊把面板的顏色自定成對比鮮明的顏色。

　　第二步 在PS圖層中找出主背景圖層，如果背景圖是漸變的話可以只切出一兩像素，后面再代碼中設置填充。

　　第三步 隱藏其他圖層，把背景圖切出來。如果背景圖很大，可以考慮分段切出，這樣可以加速網頁加載。

　　第四步 切出背景后，就從上到下，先把LOGO切出。這里同樣要隱藏其他圖層，輸出圖片的時候保存文件類型選擇png，因為這樣可以使得圖片背景透明。

　　第五步 導出圖片可以選擇文件——存儲為web和設備所有格式

　　第六步 在保存切出圖片的時候，選擇保存HTML和圖片，這樣導出來的就會自動生成一個網頁頁面和切圖圖片

　　7第五步 在切像尾部版權部分的背景時候，發現這個是漸變圖層，這樣就可以只切出一個像素的長度。然后在代碼中設置repeat-x橫軸填充