第2章_網(wǎng)頁用圖

1、網(wǎng)站色彩與構(gòu)圖案例教程 1. 圖形圖像處理工具 2. 圖的選取與使用 (1)要有良好的視覺吸引力，以吸引讀者的注意力，避免使用過大的圖像； (2)與網(wǎng)頁設(shè)計風格統(tǒng)一，如果不統(tǒng)一，就需要手動美化； (3)插圖中先聲明圖像大小，可以在IMG標簽中插入聲明； (4)若一定要使用大圖，要有預(yù)覽效果； (5)盡量少用flash插件； (6)動畫與內(nèi)容有機結(jié)合； (7)動畫或圖像的位移要有方向性。 3. 形的合成變化 點線面空間 1. 裝飾圖案的美感 裝飾圖案是實用與裝飾相結(jié)合的一種藝術(shù)形式。它把生活中的自然形象,經(jīng)過藝術(shù)加工,使其造型、色彩、構(gòu)圖等適用于審美目的的一種設(shè)計圖樣。 2. 裝飾圖案的表現(xiàn)方法

2、 裝飾圖案的變化方法有提煉概括、夸張、紋飾處理、寓意、巧合、求全造型、擬人。二方連續(xù)構(gòu)成骨架分為散點式、直立式、水平式、傾斜式、波紋式、折線式、開光式、一整二剖式、重疊式、綜合式。四方連續(xù)組織方法有散點式連續(xù)紋樣、連綴式連續(xù)紋、重疊式連續(xù)紋樣。1. 創(chuàng)建Web圖像2. 美工修飾3. 分割組合Web圖像 本章中將通過3個案例，講解網(wǎng)頁用圖的方法及技巧?！皞€性主頁設(shè)計”案例講解圖形圖像在網(wǎng)頁中的藝術(shù)處理，案例體現(xiàn)插圖的選用和裝飾，創(chuàng)造空間效果；“貴賓卡主頁設(shè)計”案例講解裝飾圖案的運用，通過對圖案藝術(shù)和文字編排加工，體現(xiàn)了時代主題特征；“網(wǎng)站歡迎頁”案例講解一個完整的網(wǎng)頁效果圖的設(shè)計過程，以書畫網(wǎng)為

3、例，分析古典藝術(shù)風格的設(shè)計過程和制作技巧。本節(jié)為個性網(wǎng)站主頁設(shè)計案例。設(shè)計成藍色調(diào)的宇宙效果，并以古老的文明烘托主題，以流行的插畫風格來把握畫面圖案的設(shè)計。凸顯個性的元素組合及大色塊拼接使背景畫面更具有跳躍性。提示： 1. 圖像的退底，是將圖片中所選形象的背景沿邊沿剪裁去除。 2. 圖像的虛實對比能夠產(chǎn)生空間感，實的物體感覺近，虛的物體感覺遠。 3. 局部是相對于整體而言的，相對局部的圖像能讓視線集中，有一種點到為止，意尤未盡的感覺。 4. 圖的組合方式有塊狀組合和散點組合。 5. 以漫畫的手法設(shè)計人物形象和場景，光顧此網(wǎng)站的兒童就象進入卡通連環(huán)畫的故事。 6. 將卡通的形象引入網(wǎng)頁，讓人感到

4、情趣盎然。 7. 用漫畫形象貫穿網(wǎng)頁，將網(wǎng)頁內(nèi)容拉近人們的生活，營造出熱情、現(xiàn)代、有活力的氣氛。 圖具有形象性、抽象性和符號性的特征，圖在網(wǎng)頁中，視覺沖擊力比文字強得多，傳遞信息也比較直接，有助于界面的導(dǎo)讀。選擇合適的插圖和背景能夠營造網(wǎng)站氛圍和吸引瀏覽者的注意力。通過繪圖軟件對網(wǎng)頁用圖加工，在原本平面的網(wǎng)頁基礎(chǔ)上能表現(xiàn)空間感、質(zhì)感和動感效果，能夠更好地體現(xiàn)網(wǎng)站的風格。 本節(jié)的案例通過更多文字排列及圖案疊加，在原有的素材圖片上制作出更為豐富的圖像效果，其中扭曲的白色花紋圖案在紅色背景中很搶眼，同時文字的有序排列也使此圖像效果飽和而不顯空洞。這類圖像在網(wǎng)絡(luò)宣傳中尤為適用。 提示： 知識拓展:1.

5、 在設(shè)計圖形時可以采用概括的方法，體現(xiàn)設(shè)計對象的主要特征。 2. 采用具象的方法，運用寫實性與裝飾性相結(jié)合的藝術(shù)造型手法，對現(xiàn)實事物進行藝術(shù)再創(chuàng)造。 3. 采用抽象的方法，進行概括和提煉，找出構(gòu)成視覺圖形的造型元素，下圖是具有裝飾風格的導(dǎo)航。 4. 采用符號化圖形，它形式上雖然簡潔、單純，卻傳達出深刻的含義。 5. 畫面裝飾以簡潔的線與面。 6. 以骨骼作為畫面裝飾的布局，既有重復(fù)，又有變化，文字本身就可以作為畫面裝飾元素。 本節(jié)知識點 : 裝飾圖案采用形式美的原則和裝飾藝術(shù)手法創(chuàng)作出的圖形，它按照對稱、均衡、節(jié)奏、韻律、調(diào)和等形式原理，運用概括、抽象、夸張、變形等造型手法對自然形象進行藝術(shù)加

6、工和處理，創(chuàng)造出富于幻想的審美空間。裝飾圖案在網(wǎng)頁設(shè)計中具有引導(dǎo)想象的作用，給人的感受是優(yōu)雅的、流暢的。 案例說明：本節(jié)的案例為制作一個具有古典藝術(shù)風格的網(wǎng)站歡迎頁，并導(dǎo)出為web格式。在設(shè)計中巧妙運用了透明效果，加入的裝飾圖案元素與色調(diào)統(tǒng)一，起到傳遞文化氣息的作用。圖案整體風格融合，色調(diào)統(tǒng)典雅。 知識拓展: 1. 在新建文件設(shè)置大小時，為了能夠更清晰地設(shè)計出圖像效果，不妨將寬和高的尺寸設(shè)置略大些，等到完成全部設(shè)計，導(dǎo)出之前再將圖像縮小為網(wǎng)頁尺寸。 2. 在 photoshop 將圖像導(dǎo)出為Web格式時使用切片，按住Shift鍵的同時，拖動鼠標可以創(chuàng)建正方形的切片，按住Alt 鍵可保證鼠標從矯

7、形中心開始拖動 。3. 在界面設(shè)計中，質(zhì)感是很重的設(shè)計要素，譬如透明感，凹凸感，光澤以質(zhì)感的方式加強對比，質(zhì)感的綜合運用能給人以可愛、韻味、時尚的感覺。 4. 在頁面構(gòu)造中，圖的大小和方向會直接影響畫面的穩(wěn)定。5. 圖像的重復(fù)能在頁面產(chǎn)生節(jié)奏。 6. 將整個頁面構(gòu)造成富于裝飾效果。 設(shè)計網(wǎng)頁效果圖時不僅要注意頁面的整體美觀和協(xié)調(diào)，還要考慮導(dǎo)航、按鈕和下拉菜單的位置，以及可能出現(xiàn)的彈出窗口、滾動字幕的位置。設(shè)計界面時要注意適當留空。 本章主要介紹網(wǎng)頁用圖的選取與使用，裝飾圖案的設(shè)計，以及效果圖轉(zhuǎn)換為web格式的方法。在網(wǎng)頁用圖的設(shè)計過程中，我們不僅應(yīng)該善于創(chuàng)造獨立存在的“面”造型，還應(yīng)該善于將各種類型的“面”組織起來，將網(wǎng)頁的所有視覺元素看做是一張圖，創(chuàng)造和諧的視覺效果。圖的設(shè)計和藝術(shù)處理是靈活多樣的，一幅圖可能是