網(wǎng)頁制作離不開圖片,可以不夸張的說,一個網(wǎng)站的視覺效果客戶滿意程度大部分是由圖片的效果決定的,深圳網(wǎng)站制作公司設(shè)計師,今天與各位分享,網(wǎng)站前端設(shè)計如何處理圖片。
一、網(wǎng)頁圖像制作技巧無論用戶是初學者還是圖像制作高手,在制作網(wǎng)頁圖像時,都應(yīng)掌握下面幾個要點。
1.網(wǎng)絡(luò)圖像制作要小而精,忌大而濫網(wǎng)絡(luò)圖像不是在個人電腦上,在網(wǎng)絡(luò)上瀏覽網(wǎng)頁,速度非常重要,所以首先要考慮圖像文件的大小,盡量不使用500KB以上的圖像。此外,網(wǎng)頁中的圖像不在于多,而在于能否襯托出主題、渲染內(nèi)容,即圖像一定要與內(nèi)容有關(guān),不要只追求漂亮,而加入沒有意義的圖像,如圖所示是騰訊公司的首頁。
圖,圖像小巧以服務(wù)內(nèi)容為目的的頁面效果圖頁面以藍色為主色調(diào),各個欄目的標題顏色為淺藍色,與白色背景相協(xié)調(diào),文字鏈接的背景也用淡藍色,雖然網(wǎng)頁信息量大,但這種以冷色調(diào)為主的網(wǎng)頁顏色規(guī)劃會給人以清新的感覺,不會因為網(wǎng)頁的內(nèi)容多而感到煩躁。該網(wǎng)頁所用的圖形大多是卡通或簡筆畫,氣氛輕松活潑,圖像的色彩也采用單一的較純的顏色,讓人耳目一新。更為主要的是這些圖像文件都非常小,不過幾KB。整個圖像設(shè)計小巧簡約卻不幼稚,色調(diào)明晰卻不妖艷,讓人感到輕松愉悅。
2.圖像要分主次,忌喧賓奪主同一頁面中的圖像,要有主次之分,在大小、顏色、位置上輔助圖不要超過主圖。一般來說,一個頁面上只有一幅主圖,應(yīng)放在較醒目的位置,其余放在次一些的位置。而且圖像大小也應(yīng)有所不同,除非是介紹性的圖像,如產(chǎn)品圖像、風光照片等可以同等大小。如圖
所示是蘋果中國官網(wǎng)頁面,整個頁面就插入了一幅圖片,占據(jù)整體頁面,圖片雖然有點大,但不喧賓奪主,其主要原因就在于色調(diào)和內(nèi)容的協(xié)調(diào)統(tǒng)一。圖像與頁面融為一體的頁面效果
3.用色講究主色調(diào),忌雜亂無章一個優(yōu)美的網(wǎng)頁,都有一種主色調(diào)來烘托內(nèi)容。頁面的大部分應(yīng)該用同一種顏色或者相近的顏色,而圖形可以用與主色調(diào)反差大一些的顏色,顏色,起到畫龍點睛的作用。如圖5.3所示,頁面插入多幅小圖,這些小圖重在渲染氣氛,烘托主題,使不明白本頁功能的瀏覽者一看見該圖就知道網(wǎng)頁的內(nèi)容,即使圖像的顏色與網(wǎng)頁主色調(diào)反差比較大,但作用不可小視,也很引人注目。
圖像烘托主題的頁面效果
4.選擇合適的軟件會事半功倍圖像制作軟件有很多,如Photoshop、Fireworks、Illustrator等。隨著這些軟件的不斷升級和功能的不斷改善,均可以用來制作網(wǎng)頁圖像。它們制作出來的圖像最終效果都差不多。如何在眾多軟件中選擇一種適合制作網(wǎng)頁圖像的軟件呢?最主要的是看自己用起來能否得心應(yīng)手,此外,使用起來是否方便。如果用戶熟悉Photoshop,那么Photoshop肯定是首選,畢竟Photoshop是一個比較專業(yè)的圖像處理軟件。如果要為后期網(wǎng)頁設(shè)計工作多考慮一些,則可能會選擇Fireworks,因為Fireworks是專業(yè)的網(wǎng)頁圖像設(shè)計工具,與Dreamweaver也能夠很好地協(xié)作。例如,在Fireworks中保存的網(wǎng)頁或是分割區(qū)域,可以直接插入到Dreamweaver中使用,而不會改變原有位置,并且在Fireworks中所做的一切設(shè)置(如圖像位置、鏈接地址等)都不會改變。
二、搜集圖像素材
只有擁有了豐富的網(wǎng)頁素材,才能制作出優(yōu)質(zhì)的網(wǎng)頁。一般來說,圖像文件均可作為網(wǎng)頁的圖像素材使用,但是由于網(wǎng)頁圖像受格式和文件大小的限制,因此并不是所有圖像都可直接用于網(wǎng)頁中,而需要經(jīng)過處理(如縮小文件等)和格式轉(zhuǎn)換后才能使用。網(wǎng)頁圖像不同于普通圖像,它包含了各種專門用于網(wǎng)頁的圖像元素,如LOGO(網(wǎng)站圖標)、Banner(廣告條,或網(wǎng)頁橫幅)、按鈕、背景、項目符號、小圖標和分隔線等,如下圖所示。因此,搜集網(wǎng)頁圖像素材,不只是搜集一些漂亮的風景圖像,還要搜集一些專門用于網(wǎng)頁的圖像素材。圖
各種網(wǎng)頁使用的圖像素材如何獲得圖像素材呢?
.購買網(wǎng)頁素材光盤。
.通過百度搜索網(wǎng)頁素材。下面列出一些比較專業(yè)的網(wǎng)頁資源站點僅供參考:
.http://www.sucaiw.com(素材精品屋)。
.http://www.jzzy.com/(建站資源網(wǎng))。
.http://www.dabaoku.com/(網(wǎng)頁制作大寶庫)。
.http://www.68design.net/(網(wǎng)頁設(shè)計師聯(lián)盟)。
.http://www.mbsky.com/(模板天下)。
.http://www.citk.net/(丁丁家園)。利用搜索引擎可以快速找到需要的網(wǎng)頁素材。例如,利用百度搜索網(wǎng)頁LOGO。
【操作步驟】
第1步,先撥號上網(wǎng),并啟動IE瀏覽器。
第2步,在IE地址欄中輸入“http://www.baidu.com/”,打開百度搜索引擎,如圖5.5所示。百度是全球最大的中文搜索引擎,能夠提供專業(yè)快速的搜索功能,特別在搜索音樂、圖片等多媒體信息方面功能強大。
第3步,在菜單欄中選擇“圖片”,切換到圖片搜索頁面,如圖5.6所示。百度能夠從億萬中文網(wǎng)頁中提取各類圖片,建立了世界第一的中文圖片庫。
選擇搜索圖片
第4步,在【圖片搜索】文本框中輸入要搜索的關(guān)鍵字,例如“LOGO網(wǎng)頁”,然后在下面選項組中選擇搜索圖片的大小、顏色、類型和格式,如圖5.7所示。在搜索時,默認的選擇是搜索所有格式的圖片。
設(shè)置搜索條件
第5步,單擊【百度一下】按鈕,即可搜索出相關(guān)的全部圖片,如圖5.8所示。
第6步,在搜索結(jié)果頁面中,單擊合適的縮略圖,可將圖片放大觀看,如圖5.9所示。
有時當單擊縮略圖后會出現(xiàn)“找不到圖片”等情況時,這是由于圖片所在的源網(wǎng)頁已經(jīng)刪除、改動或暫時無法訪問等問題所導(dǎo)致的。對于這種情況,只能以翻頁查看更多圖片來進行選擇。
第7步,如果想看到更多的圖片,可以滾動鼠標,向下翻頁查看,最后單擊頁面底部的【加載更多圖片】按鈕查看更多搜索結(jié)果,如圖5.10所示。
在圖片列表中查找需要的圖片如果要在網(wǎng)頁中展示公司產(chǎn)品,或者是個人照片等圖像,則還需要配備一臺掃描儀或數(shù)碼相機,這樣可以隨時將各種風景、人物、藝術(shù)作品或公司產(chǎn)品的圖像輸入到計算機中,加以處理后應(yīng)用到網(wǎng)頁中。由于使用掃描儀和數(shù)碼相機所涉及的內(nèi)容較多,這里就不做介紹了。以上獲取圖像素材的方法方便快捷,但是,要很快找到能夠真正應(yīng)用于網(wǎng)頁中的圖像,卻并不容易。所以,最有效的方法還是用戶自己制作網(wǎng)頁圖像,這樣更具有針對性,并且可以結(jié)合網(wǎng)頁內(nèi)容來制作圖像。當然,也可以找一些圖像素材作為底稿,在其基礎(chǔ)上進行修改。深圳網(wǎng)站制作公司關(guān)于網(wǎng)頁制作圖像處理技巧的文章今天就分享到這里。后期我們會實操舉例分享具體操作。博納網(wǎng)絡(luò)編輯整理。