在設(shè)計和制作網(wǎng)頁之前,首先要制作網(wǎng)頁圖像,這是不可缺少的前期工作。制作一個網(wǎng)頁大部分時間都花在版面安排和圖像設(shè)計上。如果一個網(wǎng)頁版面安排合理、整潔、圖形設(shè)計精美,一定能讓人喜愛。設(shè)計網(wǎng)頁使用的圖像不僅要簡單,還需要與整個頁面設(shè)計風(fēng)格、結(jié)構(gòu)特點(diǎn)、圖像要表達(dá)的內(nèi)容相協(xié)調(diào),否則很難與頁面匹配。
網(wǎng)頁中對所使用的圖像格式是有限制的,不是任何一種圖像格式的文件都能應(yīng)用到網(wǎng)頁中,所以在制作之前就要考慮到這一點(diǎn),以免制作出來的圖像無法在網(wǎng)頁中使用。
目前,網(wǎng)絡(luò)支持的圖形格式主要有JPEG/JPG、GIF和PNG 3種。由于這3種格式各有利弊,在設(shè)計網(wǎng)頁時,要根據(jù)實(shí)際情況來選擇使用何種圖像格式。
?JPEG/JPG:這是一種失真壓縮的圖像文件格式,其壓縮效果非常明顯,并支持真彩色24位和漸進(jìn)格式。雖然此格式支持真彩色24位,但壓縮后的文件相對網(wǎng)絡(luò)圖像而言仍然顯得很大,僅適用于對于質(zhì)量要求高的圖像,如顏色豐富的風(fēng)景畫和照相作品等,可以考慮使用這一格式。JPEG格式在壓縮保存的過程中會以失真最小的方式丟掉一些人眼不易察覺的數(shù)據(jù),因而以此格式保存后的圖像沒有原圖像的質(zhì)量好。
?GIF:這是網(wǎng)頁中使用最多的圖像格式,它最大的優(yōu)點(diǎn)就是所生成的文件比較小,非常適合網(wǎng)絡(luò)傳輸,并且支持透明背景和動畫功能。
因此,此格式在網(wǎng)頁中應(yīng)用非常廣泛。GIF格式的圖像與JPEG格式不同,它為非失真壓縮,存儲格式為1位~8位。只支持256色,而不支持真彩色24位,這是GIF格式的主要缺點(diǎn)。
?PNG:此格式是Fireworks的默認(rèn)格式,它是一種非失真壓縮格式,具有JPEG和GIF格式的全部優(yōu)點(diǎn),如支持透明背景、動畫和真彩色24位。除了上面介紹的3種圖像格式之外,還有許多種圖像格式,如BMP、TIF、PSD、EPS等格式,但這些格式都無法直接使用到網(wǎng)頁中。因此,在設(shè)計網(wǎng)頁過程中,必須將這些圖像格式的文件先轉(zhuǎn)換成GIF、JPEG或PNG格式的文件。轉(zhuǎn)換方法很多,只要用Photoshop等圖像處理軟件打開要轉(zhuǎn)換的圖像文件,另存為在網(wǎng)頁中使用的JPEG、GIF或PNG格式文件即可。
在網(wǎng)站建設(shè)時,從圖像顯示效果而言,當(dāng)然是圖像顏色越豐富越好,這樣可以很清晰地欣賞圖像。但對瀏覽者而言,就需要等待更多的時間才能瀏覽到此圖像。因?yàn)轭伾截S富,圖像文件就越大,其在網(wǎng)絡(luò)上的傳輸也就越慢。因此,在設(shè)計網(wǎng)頁時,萬不得已不要放入過大的圖像文件,也不要用過多的多媒體文件造成瀏覽者觀看頁面時的麻煩。
其實(shí),制作網(wǎng)絡(luò)圖像與制作普通圖像沒什么兩樣,不同點(diǎn)在于網(wǎng)絡(luò)圖像要在網(wǎng)絡(luò)上傳輸,因此除了要考慮圖像品質(zhì)之外,更多的則要考慮圖像文件的大小,以便圖像能夠更快地在網(wǎng)絡(luò)上傳輸??刂茍D像文件大小,以便于在網(wǎng)絡(luò)上傳輸時,應(yīng)注意以下幾項(xiàng)。
?圖像格式:不同的圖像格式,其壓縮率不同,所存儲的文件大小也不同。
?圖像尺寸:圖像尺寸越大,圖像文件就越大。反之,圖像尺寸越小,文件就越小。
?顏色數(shù)目:在一個圖像中,顏色越豐富,所記錄的數(shù)據(jù)就越多,因而保存后的文件也就越大。
?分辨率:分辨率是指在單位長度內(nèi)所含有的點(diǎn)(或像素)的多少。因此,分辨率越大,所記錄的數(shù)據(jù)也就越多,文件也就越大。
根據(jù)以上幾點(diǎn),用戶就可以在制作圖像時,合理有效地控制圖像文件的大小了。但要注意,不要一味地追求文件大小,而忽略了圖像質(zhì)量。若如此,即使圖像文件再小也失去了意義。有時,不得不在網(wǎng)頁中放入一些大圖,但應(yīng)為瀏覽者多考慮,盡量讓這個圖像文件最小。例如,可以使用Photoshop中的圖像分割功能,將圖像分割成多個小區(qū)域。這樣,在網(wǎng)絡(luò)上下載時就不會因圖像太大而造成漫長的等待了。
當(dāng)前文章標(biāo)題:網(wǎng)頁圖像概述
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3097.html
上一篇:網(wǎng)頁設(shè)計中如何設(shè)計圖文展示欄目
下一篇:網(wǎng)頁圖像制作技巧