完美網(wǎng)站制作切圖重在技巧

2022-08-10    分類(lèi): 網(wǎng)站制作

網(wǎng)站制作,切圖重在技巧。通常網(wǎng)站制作一般步驟可分為:設(shè)計(jì)效果圖,切圖+制作靜態(tài)模板嵌套至CMS

,其中,切圖雖然是很簡(jiǎn)單的一個(gè)步驟,但其中也有很多技巧,以下是成都網(wǎng)站設(shè)計(jì)創(chuàng)新互聯(lián)設(shè)計(jì)師總結(jié)出來(lái)的幾點(diǎn):   創(chuàng)新互聯(lián)人說(shuō),總體上,把握一個(gè)原則,能用css寫(xiě)的,堅(jiān)決不要用圖片。經(jīng)驗(yàn)告訴我們,首頁(yè)圖片很多的網(wǎng)站打開(kāi)會(huì)很慢,一是因?yàn)閳D片多,需要下載的文件體積就增大,二是每一個(gè)圖片下載都會(huì)對(duì)服務(wù)器有一個(gè)請(qǐng)求,增大了瀏覽器與服務(wù)端的交互次數(shù),如果能把純色的部分用css來(lái)寫(xiě),而不因?yàn)槭∈轮苯忧袌D,就會(huì)極大提高網(wǎng)站的運(yùn)行效率,我最早開(kāi)始學(xué)習(xí)制作網(wǎng)站時(shí),就想當(dāng)然的認(rèn)為怎么樣能加快制作速度就怎么來(lái),于是把一個(gè)導(dǎo)航條的背景直接切成圖片,后來(lái)老板看到我寫(xiě)的html代碼,告訴我不能這么干,用div定義好寬和高設(shè)置背景色和邊框,一行代碼就搞定。如果遇到有漸變色的背景,可以沿著與漸變色相同方向切一個(gè)像素的條紋,用css中background的repeat-x或repeat-y

來(lái)自動(dòng)填充。

成都網(wǎng)站設(shè)計(jì)-----導(dǎo)航欄效果圖  對(duì)于有圓角的導(dǎo)航條圖片,可以將兩邊的圓角部分單獨(dú)切出來(lái),中間如果有漸變色,也是只切一個(gè)像素的條紋,切出來(lái)的三個(gè)條紋可以合并到一張圖片里(上、中、下),使網(wǎng)頁(yè)中使用的時(shí)候用css中的positon

屬性來(lái)定位圖片出現(xiàn)的位置?! ≡谇懈钚Ч麍D的過(guò)程中,對(duì)于圖片的保存格式也有講究,一般來(lái)說(shuō),用圖像工具(如photoshop)制作的色彩絢麗的按鈕或圖標(biāo)一般都存成png格式,而用相機(jī)拍攝的風(fēng)景或人物、物體圖像多用jpg格式保存,gif一般用來(lái)存儲(chǔ)含有簡(jiǎn)單動(dòng)畫(huà)效果的圖像,另外需要注意一點(diǎn)的是,如果圖片中使用了透明效果,要存儲(chǔ)成png-的格式,png的其他格式要么不支持透明,要么保存時(shí)文件要大很多,png-是”性?xún)r(jià)比”

高的。  成都網(wǎng)站設(shè)計(jì)-----一般用png

格式  對(duì)于用作背景或襯托效果的顏色較多的圖片,保存圖片時(shí)盡可能從清晰度和圖片大小中找到一個(gè)平衡,既保證圖片盡可能小又不失真,這點(diǎn)就要憑個(gè)人經(jīng)驗(yàn)了,因?yàn)槊總€(gè)人的標(biāo)準(zhǔn)不同,千萬(wàn)不能不壓縮圖片直接放上去,然后靠idth和height來(lái)進(jìn)行限制,這樣做是自欺欺人,瀏覽器會(huì)先把大圖片下載到本地,然后用樣式強(qiáng)制將它壓縮,顯示不但不會(huì)更清楚,反而會(huì)失真,曾經(jīng)我就遇到過(guò)有個(gè)網(wǎng)站首頁(yè)都打開(kāi)了,唯有一個(gè)局部是個(gè)空白的方形,過(guò)了好幾秒才加載出來(lái)一張圖片,好奇的下載了這張圖片,竟然有M多……


這一點(diǎn)不光是首頁(yè)切圖,在網(wǎng)站的內(nèi)容上傳時(shí)也要養(yǎng)成良好的習(xí)慣,特別是新聞的配圖,現(xiàn)在的相機(jī)效果越來(lái)越好,拍出來(lái)的圖片動(dòng)不動(dòng)好幾兆,一定要對(duì)圖片尺寸進(jìn)行處理后再上傳,一般處理圖片的寬度為-像素之間,高度自動(dòng)等比例即可?! 〕啥?a >網(wǎng)站設(shè)計(jì)創(chuàng)新互聯(lián)小結(jié):切好圖片命名也要養(yǎng)成良好的習(xí)慣,的命名習(xí)慣就是見(jiàn)名知意,我見(jiàn)多數(shù)網(wǎng)站的圖片使用切圖工具軟件批量切割的,命名很不規(guī)范,比如index_、index_

、index__等有規(guī)則但無(wú)意義的圖片,也許你說(shuō)圖片命名本身的意義并不是很大,因?yàn)檫@個(gè)名字只有瀏覽器加載的時(shí)候才會(huì)用,但是,對(duì)于一個(gè)擴(kuò)展性強(qiáng)的網(wǎng)站來(lái)說(shuō),在進(jìn)行改版和維護(hù)的時(shí)候,如果要更換某些網(wǎng)站圖片,就需要一個(gè)一個(gè)從瀏覽器中右鍵查看圖片地址,記下每一個(gè)長(zhǎng)長(zhǎng)的沒(méi)有規(guī)律的圖片名稱(chēng),這會(huì)讓技術(shù)人員十分崩潰。所以,在保存圖片時(shí)就給它寫(xiě)上有意義的名字是很必要的。

名稱(chēng)欄目:完美網(wǎng)站制作切圖重在技巧
標(biāo)題網(wǎng)址:http://www.muchs.cn/news4/188204.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站制作

廣告

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

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