圖形圖像設(shè)計

網(wǎng)頁圖形圖像設(shè)計主要內(nèi)容3.1網(wǎng)頁圖形圖像設(shè)計的構(gòu)成要素13.2網(wǎng)頁圖形圖像的創(chuàng)意設(shè)計23.3網(wǎng)頁圖形圖像的處理實例3

圖形圖像能將信息傳達得更具體、真實、直接、易于理解，從而高效率高質(zhì)量的表達設(shè)計理念，使網(wǎng)頁充滿強烈的感情色彩。在網(wǎng)頁中合理的應(yīng)用圖形圖像，能夠形成視覺信息的中心，有利于重要信息的傳達。3.1網(wǎng)頁圖形圖像設(shè)計的構(gòu)成要素1.標志（LOGO）

標志具有象征功能、識別功能，是網(wǎng)站形象、特征、信譽和文化的濃縮，一個設(shè)計杰出的、符合網(wǎng)站理念的標志，會增加網(wǎng)站的信賴感和權(quán)威感，在社會大眾的心目中，它就是一個網(wǎng)站或某品牌的代表。圖形的標志能夠避免文字做標志所給人的單調(diào)感，圖形標志是一種簡潔但不簡單的圖形符號，具有以小見大、以少勝多、以一當十的特點。在現(xiàn)代社會生活中，經(jīng)過精心設(shè)計而具有高度實用性和藝術(shù)性的圖形標志，以其特有的功能和新穎別致的藝術(shù)效果，感染和影響著人們，指導(dǎo)人們的認知和選擇。

3.1.1圖形圖像在網(wǎng)頁中的應(yīng)用2.背景插圖背景插圖可以把瀏覽器變成一個真實的環(huán)境，用圖形為背景來襯托主題，可以增加層次感，可與網(wǎng)頁主題圖像形成對比或共鳴，從而突出主題形象，彰顯網(wǎng)頁的風(fēng)格。3.主圖網(wǎng)頁主圖是指網(wǎng)頁中表達主題、突出主題的較大幅面的圖形圖像。一幅好的主圖，可以使瀏覽者見其圖即知其內(nèi)容，主圖能夠形成整個頁面的視覺中心，它具有直觀性強的特點，不需要像文字那樣去逐字逐句地閱讀，可以不受文化水平的限制，并能在瞬間給人以深刻印象。

4.超級鏈接將圖形設(shè)計成超級鏈接形式，能夠使網(wǎng)頁鏈接變得樣式豐富，可以使網(wǎng)頁更為美觀。若能利用標志性符號，便可以減弱語言的障礙。圖形按鈕具有直觀、形象的特點，可以為單調(diào)的文字信息增添活力，可以更加明確地表現(xiàn)它所要進行的操作。

點、線、面是平面設(shè)計的基本元素和主要視覺語言，是一切構(gòu)成設(shè)計中最基本的造型要素，存在于任何造型設(shè)計之中。作為視覺形式的語言，構(gòu)成網(wǎng)頁設(shè)計圖形圖像的最基本的要素是點、線、面，通常被人們稱為“構(gòu)成三要素”。在網(wǎng)頁設(shè)計時，運用組合、對比、均衡、節(jié)奏、統(tǒng)一等構(gòu)成方法將它們進行安排，互相補充，互相襯托，就可以創(chuàng)造出形式多樣，引人注目的網(wǎng)頁，從而將網(wǎng)站的信息有效地傳達給瀏覽者。3.1.2構(gòu)成要素——點、線、面1.點

點必須要以視覺的表現(xiàn)為前提，因此點是一種具有空間位置的視覺單位，而且有大小不同的面積和不同的外觀特征以及屬性。點可分為規(guī)則點和不規(guī)則點兩類，如圓點、方點、三角點屬于規(guī)則點，而鋸齒點、泥點、雨點則屬于不規(guī)則點。

點無一定的大小和形狀，點的概念是相對的，是與周圍的視覺元素相比較而言的。只要與周圍其他造型要素共同比較時具有凝聚視覺的作用，都可以稱為點。點的判斷完全取決于它所在的空間的相互關(guān)系上面，越小的形體越能給人點的感覺，點的面積變大就成了面。

1.點

點具有視覺集中的屬性。

兩點時，人的視線就會在這兩點之間來回流動，產(chǎn)生“線”的感覺。

當頁面中有三個點時，視線在這三點之間流動，并將這些點連起來，讓人產(chǎn)生面的聯(lián)想。

點只有通過人為地組織排列，才能充分展示其自身個性。2.線

視覺形態(tài)中的線除了位置、長度、方向性，還具有寬度、形狀和性格。線具有剛?cè)嵯酀?、?yōu)美和簡潔的特點。不同的線形會表現(xiàn)出不同的意念，給人的視覺和心理帶來不同的感受。因此在網(wǎng)頁設(shè)計中，可根據(jù)需要和布局特點運用不同性格的線造型和不同的線性組合作為視覺元素，豐富網(wǎng)頁界面的視覺效果。2.線

線可分為直線與曲線兩種。直線包括水平線、垂直線、斜線、折線等，直線具有固定的方向性，給人以單純、明確、莊嚴的感覺。利用直線對網(wǎng)頁進行分割，可以使網(wǎng)頁中的各部分內(nèi)容更加清晰明了、增強頁面的可視性。2.線

曲線包括幾何曲線、自由曲線，曲線具有不固定的方向，常給人以柔軟、流暢、溫和的印象，在網(wǎng)頁設(shè)計中具有跳動、流暢之感。利用曲線對網(wǎng)頁進行分割，可以使網(wǎng)頁中的各部分內(nèi)容以活潑新穎的形式呈現(xiàn)。

2.線

任何形態(tài)都可以通過線的界定而確定下來。因此在網(wǎng)頁設(shè)計中，線的布局安排主要體現(xiàn)在線的空間分割上。線的分割產(chǎn)生各種比例的面。在利用線進行頁面分割時，既要考慮各形態(tài)元素彼此間支配的形狀，又要注意空間所具有的聯(lián)系，保證良好的視覺秩序感，這就要求被劃分的空間有相應(yīng)的主次關(guān)系、呼應(yīng)關(guān)系和形式關(guān)系，以此來獲得整體和諧的視覺空間。

網(wǎng)頁中的圖文在直線的空間分割下，會得到清晰、條理的秩序，同時求得統(tǒng)一和諧的因素。而通過不同比例的空間分割，頁面各空間將會產(chǎn)生對比與節(jié)奏感。

線框的限定使網(wǎng)頁中的動感與情感獲得相應(yīng)的穩(wěn)定和規(guī)范。另外，線框細，版面則輕快而有彈性，當線框加粗，圖像有被強調(diào)的感覺，同時誘導(dǎo)視覺注意；但若線框過粗，版面則變得穩(wěn)定、呆板、空間封閉。

線具有方向性、流動性、延續(xù)性，因此在網(wǎng)頁設(shè)計中可以運用重復(fù)、近似、漸變、對比、密集等構(gòu)成手法，將線進行不同方式的排列組合，會產(chǎn)生很多具有奇妙效果的視覺形態(tài)。3．面

視覺形態(tài)中，面是一種形，體現(xiàn)了充實、厚重和整體并穩(wěn)定的視覺效果。面除了有大小，還具有位置、形狀、擺放角度等特征，在版面中具有平衡、豐富空間層次，烘托及深化主題的作用。經(jīng)分割所產(chǎn)生的比例關(guān)系，是決定頁面均衡、協(xié)調(diào)的重要因素。網(wǎng)頁設(shè)計中要對面進行多樣化處理，以避免重復(fù)、單調(diào)，做到相互襯托、相互呼應(yīng)。面分為幾何形和自由形兩大類。（1）幾何形

幾何形表現(xiàn)出的特點是形狀規(guī)矩、具有理性的節(jié)奏，易于被人們所理解和識別，網(wǎng)頁中的幾何形有方形、菱形、圓形、三角形等。

方形能夠使人產(chǎn)生穩(wěn)重、厚實、深沉、規(guī)矩的感覺，具有男性特征，屬于直接、有效的設(shè)計元素因此網(wǎng)頁界面中很多圖形圖像都采用方形。對于企業(yè)網(wǎng)站來說，網(wǎng)站所展示的內(nèi)容偏重于理性、追求簡潔、明快的特點，因此方形在企業(yè)網(wǎng)站中的應(yīng)用較為廣泛。菱形

使人產(chǎn)生端正又具有動感的感覺。網(wǎng)頁內(nèi)容被放置于不同菱形面內(nèi)，整個網(wǎng)頁明快、內(nèi)容清晰明了，現(xiàn)代感很強。圓形

給人以充實、柔和、圓滿的感覺。三角形

正三角形給人以堅實、穩(wěn)定的感覺。倒三角形有一種不安定、新奇感。網(wǎng)頁左側(cè)的圖像構(gòu)成倒三角形，給人以新奇的動感。（2）自由形

自由形比較灑脫、隨意，偏于感性，給人以新鮮、靈妙之感。適合自然法則而且有秩序性美感，給人更為生動的視覺效果。自由形包括有機形、手繪形和偶然形。

有機形：由一定強度的曲線所組成，富有內(nèi)在的力感，是自然中外力與內(nèi)力相抗衡而形成的形態(tài)，有純樸、溫暖而富有生命力的感覺。

手繪形：徒手描繪或用特定工具制作的圖形，能充分表達作者的個性或情感。

偶然形：因自然力而形成的圖形，具有天然成趣的效果，是利用偶然因素提煉美的一種方法。偶然形具有自然美的構(gòu)成規(guī)律，具有隨意，神秘的特點。擴展構(gòu)成元素

空間，運動，質(zhì)感作為圖形圖像的擴展構(gòu)成元素，是在點線面這些基本造型元素基礎(chǔ)上發(fā)展而成的。圖形圖像所產(chǎn)生的空間感，一方面可以通過攝影、繪畫的技法獲得，一幅好的攝影繪畫作品使物象有呼之欲出的感覺；另一方面還可以運用不同的手法對點線面等元素進行組合，從而使平面圖形圖像的三維空間感得以加強。3.2.1圖形圖像的創(chuàng)意設(shè)計原則1.精練簡潔

圖片的數(shù)量過多，圖片所占的空間過大，都會影響網(wǎng)頁的下載速度。因此網(wǎng)頁中放置圖片一定要做到少而精。如果圖片的內(nèi)容與網(wǎng)頁的主題不相符，就會干擾瀏覽者的注意力。2.顏色協(xié)調(diào)

顏色協(xié)調(diào)指圖像、文字及整個頁面的主色調(diào)協(xié)調(diào)一致。眾多圖像的色彩應(yīng)融于主色調(diào)這個整體中去，使整個網(wǎng)頁的色調(diào)趨向統(tǒng)一，不給人雜亂堆砌之感。

3.風(fēng)格吻合

圖像的風(fēng)格要與網(wǎng)頁的主題內(nèi)容保持氛圍、情感上的一致。3.2網(wǎng)頁圖形圖像的創(chuàng)意設(shè)計圖形圖像的創(chuàng)意是網(wǎng)頁創(chuàng)意的核心，是視覺形象的再創(chuàng)造過程。創(chuàng)意就是客觀地思索，然后天才地表達。如果說，圖形圖像的創(chuàng)意解決了“做什么”的問題，設(shè)計就是具體的“怎樣做”。3.2.2圖形圖像的創(chuàng)意設(shè)計方法1.同構(gòu)

同構(gòu)運用了影射和借代的手段，把要傳達的內(nèi)容用其它物象表達出來，因此主要利用瀏覽者求新求奇的心理狀態(tài)，運用對比和聯(lián)想的方法，達到傳達信息的目的。用同構(gòu)方法設(shè)計的形象幽默詼諧、印象深刻，給人一種情理之中、意料之外的視覺沖擊力。同構(gòu)的圖形圖像表現(xiàn)，往往含義深邃并能給人全新的視覺感受，充分的表達出設(shè)計師對世界的理解與審美的理念。2.替代替代是一種特殊的同構(gòu)現(xiàn)象，替代的創(chuàng)意側(cè)重于網(wǎng)頁設(shè)計中各要素的具體表現(xiàn)，替代的創(chuàng)意側(cè)重于局部形象的替代。物象的替代部分往往在畫面中形成視覺中心。替代的表現(xiàn)重點是要充分發(fā)揮形象與圖形的想象力，運用物體之間的相似性和意念上的相異性，按一定的需要，在保持物象原有基本型的基礎(chǔ)上，把物象的某局部用其他相類似的形象代替，產(chǎn)生新的異常組合。3.聯(lián)想聯(lián)想方法是一種側(cè)面的、簡潔的表達商品的方法。主要是通過聯(lián)想把商品內(nèi)容與有關(guān)的使用材料、使用對象、使用方式、使用效果、使用環(huán)境等，以及與各種有關(guān)聯(lián)的媒介產(chǎn)生聯(lián)系來補充畫面中沒有直接表現(xiàn)的內(nèi)容，用于突出訴求對象的特征與特點。在具體創(chuàng)意設(shè)計中，常?？梢园严嗑嗪苓h的，甚至毫不相干的事物聯(lián)系在一起，通過畫面中直觀圖像的想過，是人們在視覺心理上產(chǎn)生從這一物象到另一物象的聯(lián)想。4.寓意寓意的方法是選擇與訴求目標主題有相符之處的物象，通過比喻和象征等手法來表現(xiàn)主題，這種方法常常適合于不易直接表達的主題內(nèi)容。5.情感在圖形圖像設(shè)計中，讓情感貫穿于視覺形式的表現(xiàn)，讓原本無生命的視覺元素表達豐富的內(nèi)心情感，以此增加圖形圖像的視覺感染力，使其含有深刻的意念。在創(chuàng)作圖形圖像時，以情托物或以物寄情，創(chuàng)作出內(nèi)涵豐富、意境深淵、充滿生命力的圖形圖像，才能引發(fā)人們思維美感的共鳴。6.夸張夸張是對事物的特征進行強化與夸大?？鋸埑３Ｓ糜诒憩F(xiàn)某些情節(jié)，有形體比例的夸張，也有心理逆反的夸張?？鋸埵剐蜗蠓浅Ｐ涯?，可以產(chǎn)生強烈的戲劇性效果，引起瀏覽者的關(guān)注。7.幽默將深刻的意義用詼諧、有趣的方式表現(xiàn)出來，這就是幽默，幽默是生活和藝術(shù)中的一種喜劇性因素。抓住人或事物的某些特征，運用喜劇性的手法，造成一種耐人尋味、引人發(fā)笑的幽默意境，使人們在忍俊不禁的一剎那，得到一種精神上的快感和滿足。8.層次空間在網(wǎng)頁這樣一個平面上通過創(chuàng)意得到層次與空間感，通過掀起的紙張，打開的窗戶，投射的陰影等，營造出一種層次感、空間立體感，從而使作品躍然屏幕上，體現(xiàn)出網(wǎng)站的創(chuàng)意與風(fēng)格。9.直接將要表達的主題以最直接、最明確的方式表現(xiàn)出來，即所謂的“開門見山”。這種方法要求圖形圖像的選擇準確、恰如其分的體現(xiàn)主題，不能給瀏覽者以誤導(dǎo)。直接表達的方法容易實現(xiàn)與瀏覽者在溝通上的平等、自然。3.3網(wǎng)頁圖形圖像的處理實例3.3.1網(wǎng)頁圖形圖像的設(shè)計形式1.概括

概括就是抓住設(shè)計對象的主要特征，以最簡明扼要的方式予以視覺表現(xiàn)。要想在最短的時間內(nèi)表現(xiàn)事物，就必須對事物的特征加以概括。圖形越概括，傳達的信息越單純，人們就越容易記憶，傳達效果也就越好。2.具象

具象的方法是指以現(xiàn)實中的事物為基礎(chǔ)，運用寫實性與裝飾性相結(jié)合的藝術(shù)造型手法，對現(xiàn)實事物進行藝術(shù)再創(chuàng)造。其最大特點在于能夠反映自然形態(tài)的美，親切、生動、清晰，讓人信服。具象圖形既保留了自然對象的特點，又注入了超自然的觀念和設(shè)計意識。只有從創(chuàng)意的角度出發(fā)，抓住自然中具有鮮明個性的形象結(jié)構(gòu)和有傳達特征的細小形態(tài)，才能塑造出具有形式美感的具象圖形。3.抽象

抽象與具象相對立，它更強調(diào)現(xiàn)實中事物的內(nèi)在性質(zhì)，而非表面特征，在對事物規(guī)律性的概括與提煉中，找出構(gòu)成視覺圖形的造型元素。抽象所運用的視覺元素，常常是由最基本的點、線、面所構(gòu)成。它的特點是形式語言簡練、單純、意蘊無窮，給人以無限的想象空間，富有現(xiàn)代感。4.卡通漫畫

漫畫是設(shè)計師在畫面上隨心所欲地發(fā)揮想象力，創(chuàng)造現(xiàn)實生活中不存在的事物或看不到的場景的一種繪畫形式。它在技法上夸張變形，在內(nèi)容上詼諧幽默，給人感覺輕松、充滿童趣?？鋸埮c變形能使漫畫中的事物特征更加鮮明、更加典型，并有加強敘事和傳情的效果。漫畫多運用于兒童網(wǎng)站，構(gòu)圖新穎，新奇，不拘一格，形象生動、活潑。

5.裝飾

裝飾化圖形是指采用形式美的原則和裝飾藝術(shù)手法創(chuàng)作出的圖形，它按照對稱、均衡、節(jié)奏、韻律、調(diào)和等形式原理，運用上面提到的概括、抽象、夸張、變形等造型手法，對自然形象進行藝術(shù)加工和處理，創(chuàng)造出富于幻想的審美空間。裝飾化是具有思維限定的審美結(jié)構(gòu)，給人的感受是優(yōu)雅的、流暢的。6.

圖標圖標是將要傳達的信息賦予圖形，讓兩者建立內(nèi)在的對應(yīng)關(guān)系，當圖形被觀眾認知時，它便成為傳達該信息的圖標。因此圖標具有很強的傳達性，它形式上雖然簡潔、單純，卻傳達出深刻的含義。例如信封的圖形代表郵件，具有特定的含義。作為修辭中比喻的一種寫法，隱喻目前已成為人機界面設(shè)計中一項非常重要的造型觀念與手段。常見的隱喻形式，如電腦中文件夾圖標的設(shè)計采用了我們辦公室中的文件夾的造型，桌面圖標中我的電腦干脆使用了電腦的圖形，和平鴿的和平含義與紅十字的博愛精神。利用具體的為人熟知的想法使界面簡潔明了，具有易識別、易記憶、跨文化的特點。盡量采用家喻戶曉的一般性常識視覺經(jīng)驗是信息得到廣泛傳達的重要手段。1．圖像的面積

大圖像能表現(xiàn)細節(jié)，容易形成視覺焦點，感染力強，傳達的感情較為強烈，更容易吸引瀏覽者的注意。小圖像顯得簡潔精致，有點綴和呼應(yīng)作用。大小對比強烈，給人跳躍感；大小對比減弱，則頁面穩(wěn)定、安靜。圖像在網(wǎng)頁中占據(jù)的面積大小能直接顯示其重要程度。

在網(wǎng)頁設(shè)計時，應(yīng)首先確定主要形象與次要形象，把重要的能吸引注意力的圖放大，從屬的圖縮小，形成主次分明的層次格局。

3.3.2網(wǎng)頁圖形圖像的處理方法2．圖像的外形

方形的穩(wěn)定、嚴肅，三角形的銳利，圓形或曲線外形的柔軟、親切，退底圖及一些不規(guī)則或帶邊框圖像的活潑，都能產(chǎn)生強烈的裝飾感。（1）方形圖：

以直線邊框來規(guī)范和限制，是一種最常見、最單純的形態(tài)。方形圖使圖像內(nèi)容更突出且將主題形象與環(huán)境共融，可以完整地傳達主題思想，有利于氣氛的渲染，富有情節(jié)感、直接感和親和力。配置方形圖的頁面，給人以穩(wěn)重、可信、嚴謹、理性、莊重和安靜之感，但有時也顯得平淡、呆板。網(wǎng)頁中的方形圖使整個網(wǎng)頁呈現(xiàn)出一種嚴肅、安靜、穩(wěn)重的氛圍。（2）菱形圖

打破方形的常規(guī)，具有很強的立體感

。（3）圓形圖

圓形圖是指利用曲線邊框?qū)D像進行規(guī)范和限制。圓形圖給人以充實、柔和、圓滿的感覺，給瀏覽者以流暢、隨意、自由的感受。

（4）三角形

即圖像以直線邊框規(guī)范，在網(wǎng)頁中表現(xiàn)為三角形。三角形圖給瀏覽者動態(tài)的感受，使網(wǎng)頁生動、靈活。（5）退底圖根據(jù)設(shè)計內(nèi)容所需將圖片精選部分沿邊緣裁剪，而保留輪廓分明的圖形。退底后的形象，其外輪廓呈自由形狀，具有清晰分明的視覺形態(tài)，顯得靈活自如。配置退底圖的頁面，輕松、活潑、動態(tài)十足、富有個性，而且圖文結(jié)合自然，給人以親和感；為了避免可能造成凌亂和不整體的感覺，可用加線、線框、色塊或方形圖的方法，使版面取得平衡和穩(wěn)定。

（6）出血圖

即圖像以直線邊框規(guī)范，在網(wǎng)頁中表現(xiàn)為：圖形圖像充滿了整個版面、無邊框、有向外擴張、自由舒展的感覺。一般用于傳達抒情或運動信息的頁面，因不受邊框限制，便于情感與動感的發(fā)揮。一個形象在完整的狀態(tài)下，往往容易被忽視。完整的形象一旦被打破，人們的注意力就會上升。出血圖能拉近讀者距離，有親近感，使情感與動感更能得到發(fā)揮。4．圖像的位置在網(wǎng)頁中上下左右及對角線的四個角都是視覺的焦點，處理好這些位置關(guān)系能表現(xiàn)出豐富的效果。（1）支配四角和對角線四角是指版心邊界和四個點，把四角連起來的斜線即對角線，交匯點為幾何中心。（2）支配版面的中軸四點中軸四點經(jīng)過版心的垂直和水平線的端點、中軸四點，可產(chǎn)生橫、豎、居中的結(jié)構(gòu)。（3）四角和中軸四點結(jié)構(gòu)四角和中軸四點結(jié)構(gòu)能使版面更加完美。5．圖像的虛實

圖像的虛實對比能夠產(chǎn)生空間感，實的物體感覺近，虛的物體感覺遠。要想讓圖像“虛”，一種方法是將圖像模糊；一種方法是將圖像的色彩層次減少，純度降低，盡量與背景靠近，使圖像產(chǎn)生悠遠的感覺。網(wǎng)頁中的背景圖片采用單色圖，容易使圖像與其它視覺元素協(xié)調(diào)統(tǒng)一，使整個網(wǎng)頁渾然一體。

6.圖像的合成

圖像的合成是指將幾幅圖片有選擇地合成為一個圖像，合成后的圖像傳達的信息更加豐富，