photoshop網(wǎng)頁切圖怎么用?ps網(wǎng)頁切圖圖文教程
發(fā)布時間：2015-11-12 13:04:49 作者：佚名 
我要評論
我要評論photoshop網(wǎng)頁切圖怎么用?有一個網(wǎng)頁，想把各個部分都單獨切出來，該怎么辦呢？這時候可以用ps對網(wǎng)頁進行切圖，下面分享ps網(wǎng)頁切圖的圖文教程，需要的朋友可以參考下
網(wǎng)頁設計在技術層面上，第一步是美工做出網(wǎng)頁效果圖，第二步就是網(wǎng)頁前端進行網(wǎng)頁切圖。網(wǎng)頁切圖工具常用的有fireworks、PS，這里主要向各位介紹怎么使用PS進行網(wǎng)頁切圖。
1、用PS打開網(wǎng)頁效果圖PSD文件，根據(jù)網(wǎng)頁效果圖拉出參考線，同時為了方便切圖可以右鍵點擊把面板的顏色自定成對比鮮明的顏色。
2、在PS圖層中找出主背景圖層，如果背景圖是漸變的話可以只切出一兩像素，后面再代碼中設置填充。
3、隱藏其他圖層，把背景圖切出來。如果背景圖很大，可以考慮分段切出，這樣可以加速網(wǎng)頁加載。
4、切出背景后，就從上到下，先把LOGO切出。這里同樣要隱藏其他圖層，輸出圖片的時候保存文件類型選擇png，因為這樣可以使得圖片背景透明。
5、導出圖片可以選擇文件——存儲為web和設備所有格式
6、在保存切出圖片的時候，選擇保存HTML和圖片，這樣導出來的就會自動生成一個網(wǎng)頁頁面和切圖圖片
7、在切像尾部版權部分的背景時候，發(fā)現(xiàn)這個是漸變圖層，這樣就可以只切出一個像素的長度。然后在代碼中設置repeat-x橫軸填充
相關文章
- 這篇教程是向腳本之家的朋友介紹PS切圖經(jīng)驗技巧，教程比較實用，很適合新手來學習，推薦到腳本之家，喜歡的朋友可以過來吧2015-06-11
- Cutterman是一個著名的PS切圖插件，在您的photoshop中安裝Cutterman后，它能夠自動將你需要的圖層進行輸出，以替代傳統(tǒng)2016-06-28
- 用了Photoshop CC一段時間感覺到一些強大的新功能，不過今天腳本之家的小編又發(fā)現(xiàn)了一個新功能，那就是智能切圖啦，應用在圖像輸出上非常方便，想要詳細了解的話，就來閱讀2014-10-12
- ps切片工具怎么用?切片工具對于網(wǎng)站的美工和淘寶美工都非常的重要,本教程就向大家介紹ps切片工具切圖技巧，喜歡的朋友可以跟著一起來學習2014-09-06
- 本篇教程主要教大家扣圖方法，步驟很簡單，適合初學者學習，喜歡的朋友可以一起來學習2014-01-15
- 先把把所有標記歸置內(nèi)外邊距歸置為0,其實還有一種方法是根據(jù)根據(jù)BODY，里面所用到的HTML標記進行重置為02013-04-17