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