網(wǎng)頁設(shè)計切圖技巧

2022-06-09    分類: 網(wǎng)站建設(shè)

網(wǎng)頁設(shè)計切圖,對于初級設(shè)計師來說,是在網(wǎng)站設(shè)計中必須用到的一步,開始先把網(wǎng)站的效果圖做出來,再用PS把效果圖切成小塊,然后再寫樣式,把各個小圖組合起來;但筆者認為,網(wǎng)站設(shè)計師到了一步的水平,完全可以去掉切圖的這一個步驟,把工作流程加快起來,就才是設(shè)計師們需要做的地方。

那么網(wǎng)頁設(shè)計切圖有什么技巧嗎?總體上,把握一個原則,能用css寫的,堅決不要用圖片。經(jīng)驗告訴我們,首頁圖片很多的網(wǎng)站打開會很慢,一是因為圖片多,需要下載的文件體積就增大,二是每一個圖片下載都會對服務(wù)器有一個請求,增大了瀏覽器與服務(wù)端的交互次數(shù),如果能把純色的部分用css來寫,而不因為省事直接切圖,就會極大提高網(wǎng)站的運行效率,我最早開始學(xué)習(xí)制作網(wǎng)站時,就想當(dāng)然的認為怎么樣能加快制作速度就怎么來,于是把一個導(dǎo)航條的背景直接切成圖片,后來老板看到我寫的 html代碼,告訴我不能這么干,用div定義好寬和高設(shè)置背景色和邊框,一行代碼就搞定。如果遇到有漸變色的背景,可以沿著與漸變色相同方向切一個像素的條紋,用css中background的repeat-x或repeat-y來自動填充。

我記得之前見過一個設(shè)計師切圖,他只掌握了PS表面的工具,卻沒有研究好PS切圖工具的精髓,用切片工具把圖一個個切好以后,還是用手工的方面一個個的保存,在這里教大家一個方法,一步輸入所有切片圖,快捷而精確無誤!

如圖,把切片切好,選擇“儲存為WEBS格式圖片”,在這里就會自動輸出切片圖,簡單方便!更多網(wǎng)頁設(shè)計切圖技巧等你發(fā)言哦

最后,我們來談一個切好圖片的命名,要成為一個出色的設(shè)計,圖片命名和和寫網(wǎng)頁代碼一樣,一定要養(yǎng)成良好的習(xí)慣,最好的命名習(xí)慣就是見名知意,我見多數(shù)網(wǎng)站的圖片使用切圖工具軟件批量切割的,命名很不規(guī)范,比如 index_01、index_02、index_02_01等有規(guī)則但無意義的圖片,也許你說圖片命名本身的意義并不是很大,因為這個名字只有瀏覽器加載的時候才會用,但是,對于一個擴展性強的網(wǎng)站來說,在進行改版和維護的時候,如果要更換某些網(wǎng)站圖片,就需要一個一個從瀏覽器中右鍵查看圖片地址,記下每一個長長的沒有規(guī)律的圖片名稱,這會讓技術(shù)人員十分崩潰(也可能就是你自己),所以,在保存圖片時就給它寫上有意義的名字是很必要的。

分享題目:網(wǎng)頁設(shè)計切圖技巧
本文鏈接:http://www.muchs.cn/news1/165301.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作標(biāo)簽優(yōu)化、網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、App設(shè)計

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名