《第5章-網(wǎng)頁設(shè)計的圖像元素ppt課件(全).ppt》由會員分享，可在線閱讀，更多相關(guān)《第5章-網(wǎng)頁設(shè)計的圖像元素ppt課件(全).ppt（13頁珍藏版）》請在匯文網(wǎng)上搜索。

1、網(wǎng)站設(shè)計原理與實戰(zhàn)第5章 網(wǎng)頁設(shè)計的圖像元素GIF格式格式GIF格式是CompuServe公司在1987年開發(fā)的圖像文件格式，它的全稱是Graphics Interchange Format，是“圖像互換格式”的意思，它是一種無損壓縮格式，壓縮率在50%左右，但對于畫面顏色簡單的圖像能夠具有非常高的壓縮率。JPEG 格式格式JPEG 是聯(lián)合圖像專家組Joint Photographic Experts Group 的縮寫，是一種有損壓縮的格式，這種圖像格式是用來壓縮連續(xù)色調(diào)圖像的標(biāo)準(zhǔn)格式，應(yīng)用最為廣泛。PNG 格式格式PNG 的全稱是Portable Network Graphic，意為可移植

2、網(wǎng)絡(luò)圖像，它是由Netscape 公司所研發(fā)出來的。MNG 格式格式MNG 格式是多重影像網(wǎng)絡(luò)圖像Multiple-Image Network Graphics 的縮寫，是對PNG 格式的改善。網(wǎng)頁設(shè)計中的圖像文件格式傳達(dá)性傳達(dá)性在網(wǎng)頁視覺設(shè)計中，傳達(dá)信息是最主要的目的。藝術(shù)性藝術(shù)性圖像是以形態(tài)進(jìn)行傳達(dá)的，是提升網(wǎng)頁信息傳達(dá)效率的重要因素，因此圖像的形態(tài)結(jié)構(gòu)會直接影響信息傳達(dá)的效果。表現(xiàn)性表現(xiàn)性在提倡設(shè)計個性化、多元化的今天，圖像在網(wǎng)頁界面中的展現(xiàn)方式也就是表現(xiàn)性，應(yīng)該具有獨(dú)特的方式，設(shè)計者要勇于創(chuàng)新，敢于沖破通俗的圖像表現(xiàn)方式，才能提高網(wǎng)頁界面的視覺沖擊力，充分優(yōu)化網(wǎng)頁的整體設(shè)計構(gòu)圖，從而達(dá)

3、到與眾不同的效果，給瀏覽者以過目不忘的視覺體驗。趣味性趣味性圖像的趣味性主要是用來充實網(wǎng)頁界面的內(nèi)容和版式。超越性超越性圖像與語言、文字不一樣，它是靠視覺感受來傳達(dá)信息的，是一種視覺語言。圖像在網(wǎng)頁視覺設(shè)計中的作用出發(fā)點出發(fā)點將圖像展現(xiàn)在網(wǎng)頁視覺設(shè)計中，想要表達(dá)的設(shè)計思想就是創(chuàng)意。表現(xiàn)技巧表現(xiàn)技巧當(dāng)照片在經(jīng)過設(shè)計者塑造過后，可以更直接、細(xì)膩地表現(xiàn)出設(shè)計者的創(chuàng)意想法，或者比原來的創(chuàng)意更上一層樓，因為照片可能與原先的完全不一樣，會產(chǎn)生另一種獨(dú)特的效果。造型與手法造型與手法圖像設(shè)計是設(shè)計者通過手繪或者電腦繪制的方法將圖像進(jìn)行再加工，以豐富的想象力和超強(qiáng)的創(chuàng)造力讓圖像以前所未有的新形象出現(xiàn)，這就是圖像

4、設(shè)計。網(wǎng)頁中圖像的創(chuàng)意與設(shè)計插圖插圖插圖是指圖像以造型或圖畫的方式展現(xiàn)在網(wǎng)頁視覺設(shè)計中，主要用來完善視覺傳達(dá)功能。一般來說，基于圖畫或造型表現(xiàn)的漫畫、線圖、諷刺畫等手工繪制的都屬于插圖的范疇。圖形符號圖形符號圖形符號是一種不受國家地域、種族文化和語言差別等人為或自然條件限制的一種單一的視覺語言，也是人與人之間溝通最為便捷、準(zhǔn)確的交流手段，具有形態(tài)簡單卻豐富多彩的特點。照片照片網(wǎng)頁視覺設(shè)計中的照片絕大多數(shù)都經(jīng)過了后期的設(shè)計、加工。頁面分割頁面分割頁面分割是指將一個整的網(wǎng)頁界面進(jìn)行水平或者垂直方向的分割，并為其運(yùn)用強(qiáng)烈的色彩,展現(xiàn)網(wǎng)頁視覺的平面感的一種方法。立體圖形立體圖形立體圖形是指運(yùn)用3D 圖

5、像程序?qū)D形素材表現(xiàn)為立體風(fēng)格的效果。圖像的設(shè)計類型圖像的外形圖像的外形圖像的外形能使頁面的氣氛發(fā)生變化，并直接影響瀏覽者的興趣。圖像的面積圖像的面積圖像在網(wǎng)頁中所占面積的大小直接體現(xiàn)出其重要的程度。圖像的數(shù)量圖像的數(shù)量圖像數(shù)量的多少是根據(jù)內(nèi)容確定的。圖底關(guān)系圖底關(guān)系網(wǎng)頁圖像與背景是對比統(tǒng)一的關(guān)系。圖像文件的大小圖像文件的大小從圖像格式就可以看出，網(wǎng)頁中的圖像質(zhì)量不需要很高。圖像的優(yōu)化處理圖像的優(yōu)化處理優(yōu)化網(wǎng)頁中的圖像首先要使用高質(zhì)量的原始圖像。動態(tài)圖像的使用動態(tài)圖像的使用動態(tài)圖像常用于廣告、演示、卡通動畫和動態(tài)按鈕等。網(wǎng)頁圖像的前期處理四角與中軸四點結(jié)構(gòu)四角與中軸四點結(jié)構(gòu)頁面四角、對角線、水

6、平與垂直的中軸線及中軸線四點，組成了基本的頁面結(jié)構(gòu)。塊狀組合與散點組合結(jié)構(gòu)塊狀組合與散點組合結(jié)構(gòu)塊狀組合，即通過水平線分割、垂直線分割及組合線分割等方式，將多幅圖像在頁面上整齊有序地排列成塊狀。這種結(jié)構(gòu)具有強(qiáng)烈的整體感和秩序感。圖像間的這種相互自由疊置或分類疊置而構(gòu)成的塊狀組合，具有輕快、活潑的特性，同時也不失整體感。網(wǎng)頁圖像的編排設(shè)計網(wǎng)頁設(shè)計中文字和圖像的關(guān)系網(wǎng)頁設(shè)計中文字和圖像的關(guān)系在網(wǎng)頁制作中，文字和圖像只有一種相互補(bǔ)充的視覺關(guān)系，它們都需要同時展示給瀏覽者，頁面上的文字太多，會顯得沉悶、缺乏生氣，枯燥無味；頁面上的圖形太多，缺少文字，必然會減少頁面的信息容量。圖文混排的版式設(shè)計圖文混排

7、的版式設(shè)計網(wǎng)頁的版式設(shè)計又稱構(gòu)圖設(shè)計，是指在一定范圍內(nèi)進(jìn)行布局和安排，選擇合適的圖像、語言、文字合理、主次分明、生動、富有美感而易于辨認(rèn)、便于閱讀地將其要宣傳的主題傳達(dá)出去。熟練地掌握和應(yīng)用版式設(shè)計的美學(xué)法則，就可以使網(wǎng)頁設(shè)計最大限度地吸引人。網(wǎng)頁圖像與文字的混排在圖像的制作中，頁面盡量使用看上去比較淡雅、簡潔的色彩，背景盡量少用灰暗、深沉的色彩（除非特殊需要），并且一定要根據(jù)頁面的主題來選擇主色調(diào)。RGB 顯示器的色彩原理：計算機(jī)顯示器的顏色屬于光源色，是基于RGB 三原色的色彩原理。也就是說，顯示器中的所有顏色都是通過紅色（Red）、綠色（Green）、藍(lán)色（Blue）這三原色的混合、疊加

8、來實現(xiàn)的，這種顏色的混合原理被稱為加色法混合。而CMYK 印刷顏色混合原理屬于減色法?；贖TML 語言的網(wǎng)頁色彩只能解釋顯示RGB 色彩，而不支持CMYK 色彩。如果在網(wǎng)頁制作時使用了CMYK 色彩模式的圖像，即使是JPEG 格式的圖像，在互聯(lián)網(wǎng)上也將無法顯示該色彩模式的圖像。這在制作網(wǎng)站前的色彩規(guī)劃中尤為重要。網(wǎng)頁圖像的色彩選擇本實例設(shè)計一個美容網(wǎng)站首頁面，首先通過純色和漸變填充繪制出頁面的背景顏色，接著使用“鋼筆工具”繪制圖像，并導(dǎo)入相應(yīng)的素材圖像豐富頁面的背景效果，使得頁面背景看起來更加飽滿豐富，最后置入相應(yīng)的素材，輸入相應(yīng)的文字，在網(wǎng)頁中進(jìn)行合理的布局，最終完成網(wǎng)站頁面的設(shè)計。課堂練習(xí)設(shè)計美容網(wǎng)站頁面本實例設(shè)計制作汽車廣告網(wǎng)頁，首先通過對背景素材的“色相/飽和度”進(jìn)行處理，制作出網(wǎng)頁的背景效果，然后，拖入汽車素材圖像，應(yīng)用蒙版將汽車摳出，使用“色彩平衡”和“色階”對汽車圖像進(jìn)行處理，最后添加相應(yīng)的廣告宣傳語，完成最終效果的制作。課后練習(xí)設(shè)計汽車廣告網(wǎng)頁