網(wǎng)站美工設(shè)計說明課件

網(wǎng)站美工設(shè)計網(wǎng)站美工設(shè)計網(wǎng)站美工設(shè)計一、網(wǎng)站美工設(shè)計的特點與思路分析1.1網(wǎng)站美工的任務(wù)概述網(wǎng)站美工顧名思義就是對網(wǎng)頁的美化，其主要包括三方面:網(wǎng)站的創(chuàng)意規(guī)劃，網(wǎng)站的版式布局規(guī)劃和網(wǎng)站的色彩規(guī)劃。網(wǎng)站美工設(shè)計一般要與企業(yè)整體形象一致。要注意網(wǎng)頁色彩、圖片的應(yīng)用及版面規(guī)劃，保持網(wǎng)頁的整體一致性。網(wǎng)站美工既要熟悉圖形創(chuàng)作軟件，也要有較好的視覺功底，創(chuàng)意能力，才能創(chuàng)造出符合需求的美觀的頁面。網(wǎng)站美工不同于網(wǎng)站后臺開發(fā)的編程人員，其核心是美工，即對網(wǎng)站整體形式美的把握。網(wǎng)站美工設(shè)計一、網(wǎng)站美工設(shè)計的特點與思路分析1.2網(wǎng)站美工設(shè)計流程(1)需求分析隨著社會的不斷發(fā)展，企業(yè)商家品牌意識的提高，現(xiàn)在的網(wǎng)站開發(fā)設(shè)計不僅僅是功能的實現(xiàn)，更強調(diào)整體外觀的美化和整體形象品質(zhì)。與客戶的充分溝通，了解客戶的需求是創(chuàng)作網(wǎng)頁的前提。(2)網(wǎng)站項目規(guī)劃一個完整的網(wǎng)站應(yīng)該具備整體布局、條理清晰、內(nèi)容豐富的特點，因此網(wǎng)站項目的規(guī)劃十分重要。必須要讓所看網(wǎng)站的客戶在第一時間找到需要的信息，并給以清晰的指示引導(dǎo)。我們在這里只介紹基本原則，既：先整體布局，再局部整理，力求做到條理清晰、內(nèi)容明確。網(wǎng)站美工設(shè)計1.2網(wǎng)站美工設(shè)計流程網(wǎng)站美工設(shè)計(3)網(wǎng)站設(shè)計通過前期的溝通與策劃，使用圖形軟件實施創(chuàng)意，完成初步的作品設(shè)計。(4)客戶反饋在提供客戶小樣后，設(shè)計師需要根據(jù)客戶提出的修改建議修正設(shè)計作品。這一流程非常關(guān)鍵，設(shè)計的網(wǎng)頁能否得到客戶的認(rèn)可與這一過程有很大的關(guān)系。網(wǎng)站美工設(shè)計(3)網(wǎng)站設(shè)計網(wǎng)站美工設(shè)計1.3網(wǎng)頁構(gòu)成及特點(1)網(wǎng)頁的創(chuàng)意創(chuàng)意的概念：什么是創(chuàng)意？簡單的說就是具有新穎性和創(chuàng)造性的想法。創(chuàng)意的范圍很廣，網(wǎng)站的創(chuàng)意不同于一般的平面廣告，既要考慮網(wǎng)頁的新穎獨特，同時更重要的是考慮所用創(chuàng)意是否符合所設(shè)計網(wǎng)頁客戶的行業(yè)特點及網(wǎng)頁整體功能的實現(xiàn)。創(chuàng)意的表現(xiàn)：創(chuàng)意的完美實現(xiàn)需要具體的形式來加以表現(xiàn)，關(guān)鍵是找到合適的創(chuàng)意點。例如：設(shè)計可口可樂的網(wǎng)頁，大家會馬上想到可樂瓶子的外型，熱情飛揚的紅色彩帶，所有和可口可樂相關(guān)的元素。網(wǎng)站美工設(shè)計1.3網(wǎng)頁構(gòu)成及特點網(wǎng)站美工設(shè)計網(wǎng)站美工設(shè)計網(wǎng)站美工設(shè)計(2)網(wǎng)頁版式規(guī)劃版式設(shè)計的范圍涉及包裝、廣告、報紙、書籍、產(chǎn)品手冊、宣傳單、網(wǎng)頁設(shè)計等許多設(shè)計形式。本章我們只針對網(wǎng)頁設(shè)計研究版式。A網(wǎng)頁版式設(shè)計的組織原則鮮明主題的誘導(dǎo)力形式內(nèi)容的統(tǒng)一強化整體布局B網(wǎng)頁版面的構(gòu)成元素世間百態(tài)千變?nèi)f化，歸納這些事物的空間形態(tài)均由點、線、面等基本元素構(gòu)成，它們彼此交互，有序構(gòu)成了繽紛的世界。在設(shè)計中也是同樣的道理，任何的版式設(shè)的基本元素歸根結(jié)底都是點、線、面的和諧構(gòu)成。網(wǎng)站美工設(shè)計(2)網(wǎng)頁版式規(guī)劃網(wǎng)站美工設(shè)計(3)網(wǎng)頁色彩規(guī)劃A色彩基本概念自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其他所有顏色均屬于彩色。任何一種彩色具有三個屬性：（1）色相（Hue）：是顏色的基本特征，反映顏色的基本面貌。（2）飽和度（Saturation）：指顏色的純潔程度。（3）明度（Brightness）：體現(xiàn)顏色的深淺。非彩色只有明度特征，沒有色相和飽和度的區(qū)別。

B三原色電腦屏幕的色彩是由RGB（紅、綠、藍(lán)）三種色光所合成的，調(diào)整這三個基色就可以調(diào)校出其它的顏色。在許多圖像處理軟件里，都提供有色彩調(diào)配功能，可以輸入三原色的數(shù)值來調(diào)配顏色，也可直接根據(jù)軟件提供的調(diào)色板來選擇顏色。網(wǎng)頁設(shè)計是以三色模式為標(biāo)準(zhǔn)。在Photoshop里也可直接選擇WEB模式進(jìn)行色彩編輯。網(wǎng)站美工設(shè)計(3)網(wǎng)頁色彩規(guī)劃網(wǎng)站美工設(shè)計網(wǎng)站美工設(shè)計網(wǎng)站美工設(shè)計(4)網(wǎng)站配色的原則第一原則：先定主色，再配輔色。在網(wǎng)站美工設(shè)計中要想讓網(wǎng)頁美觀大方，色彩和諧，達(dá)到視覺統(tǒng)一的效果是要經(jīng)過嚴(yán)格的色彩規(guī)劃的。在一個網(wǎng)站中主色直接決定網(wǎng)站的色彩風(fēng)格，在網(wǎng)頁色彩搭配中起主導(dǎo)作用，決定網(wǎng)頁的整體色調(diào)。主色決定后就是輔色的搭配，輔色的搭配在主色的基礎(chǔ)上進(jìn)行，輔色在網(wǎng)頁中的比例一般為主7輔3，或主6輔4，切忌出現(xiàn)主輔色面積比例相當(dāng)?shù)那闆r，進(jìn)而造成色彩混亂，風(fēng)格模糊的情況。第二原則：有效利用黑白灰色進(jìn)行網(wǎng)頁的色彩搭配。在網(wǎng)站美工設(shè)計中，任何漂亮絢麗豐富的色彩都需要黑白灰的有效搭配才能在視覺上達(dá)到主次分明、重點突出、和諧統(tǒng)一的效果。如果一個網(wǎng)站的頁面全部都是豐富絢麗的色彩，效果必定雜亂無章、畫面跳躍不定，眼睛會倍感疲勞。網(wǎng)站美工設(shè)計(4)網(wǎng)站配色的原則網(wǎng)站美工設(shè)計第三原則，注意色彩的對比。有對比才會有和諧，要注意色彩中的對比關(guān)系并有效控制這些對比關(guān)系。如色彩的明度對比，純度對比，色相對比，冷暖對比，輕重對比，面積對比等等。只有有效控制這些對比關(guān)系，網(wǎng)頁才會達(dá)到色彩明快、視覺和諧的效果。網(wǎng)站美工設(shè)計第三原則，注意色彩的對比。網(wǎng)站美工設(shè)計(5)色彩的象征意義色彩牽涉的學(xué)問很多，包含了美學(xué)、光學(xué)、心理學(xué)和民俗學(xué)等等。心理學(xué)家近年提出許多色彩與人類心理關(guān)系的理論。他們指出每一種色彩都具有象征意義，當(dāng)視覺接觸到某種顏色，大腦神經(jīng)便會接收色彩發(fā)放的訊號，即時產(chǎn)生聯(lián)想，例如紅色象征熱情，于是看見紅色便令人心情興奮；藍(lán)色象征理智，看見藍(lán)色便使人冷靜下來。經(jīng)驗豐富的設(shè)計師，往往能藉色彩的運用，勾起一般人心理上的聯(lián)想，從而達(dá)到設(shè)計的目的。網(wǎng)站美工設(shè)計(5)色彩的象征意義網(wǎng)站美工設(shè)計色彩象征紅——血、夕陽、火、熱情、危險橙——晚霞、秋葉、溫情、積極黃——黃金、黃菊、注意、光明綠——草木、安全、和平、理想、希望藍(lán)——海洋、藍(lán)天、沈靜、憂郁、理性紫——高貴、神秘、優(yōu)雅白——純潔、素、神圣黑——夜、死亡、邪惡、嚴(yán)肅網(wǎng)站美工設(shè)計色彩象征網(wǎng)站美工設(shè)計但心理學(xué)家也留意到，一種顏色通常不只含有一個象征意義。正如上述的紅色，既象征熱情，卻也象征了危險，所以不同的人，對同一種顏色的密碼，會作出截然不同的詮釋。除此之外，個人的年齡、性別、職業(yè)、他所身處的社會文化及教育背景，都會使人對同一色彩產(chǎn)生不同聯(lián)想。這個色彩和心理聯(lián)想的理論，對設(shè)計師來說又重要的指導(dǎo)意義。在選擇運用何種色彩時，須得同時考慮作品面向的是那類群體，以免適得其反。我們一定要充分理解色彩的一般象征含義，才能正確有效的把握色彩應(yīng)用色彩。網(wǎng)站美工設(shè)計但心理學(xué)家也留意到，一種顏色通常不只含有一個象征意義1.4網(wǎng)頁框架結(jié)構(gòu)(1)網(wǎng)頁框架結(jié)構(gòu)的內(nèi)容組成一個基本的門戶型網(wǎng)頁一般包括標(biāo)志（Logo）設(shè)計、廣告形象區(qū)域（Banner）設(shè)計、導(dǎo)航區(qū)域設(shè)計、網(wǎng)頁主體內(nèi)容顯示區(qū)域或產(chǎn)品服務(wù)介紹區(qū)域，以及一些附加的消息欄、搜索區(qū)域、注冊用戶區(qū)域等。在基本構(gòu)架完成后，我們可以充分發(fā)揮聰明才智，為客戶合理的科學(xué)的展示他們需要展示的內(nèi)容。網(wǎng)站美工設(shè)計1.4網(wǎng)頁框架結(jié)構(gòu)網(wǎng)站美工設(shè)計(2)網(wǎng)站Logo設(shè)計規(guī)范Logo的應(yīng)用一直是CIS（企業(yè)形象識別系統(tǒng)）導(dǎo)入的基礎(chǔ)和最直接的表現(xiàn)形式，網(wǎng)絡(luò)標(biāo)志的設(shè)計尤其如此。A．標(biāo)志的職能：作為獨特的傳媒符號，標(biāo)志（Logo）一直成為傳播特殊信息的視覺文化語言。無論從古時繁復(fù)的歐式徽標(biāo)、中式龍紋，到現(xiàn)代洗練的抽象紋樣、簡單字標(biāo)等都是在實現(xiàn)著標(biāo)志被標(biāo)志體的目的，即：通過對標(biāo)志的識別、區(qū)別、引發(fā)聯(lián)想、增強記憶，促進(jìn)被標(biāo)志體與其對象的溝通與交流，從而樹立并保持對被標(biāo)志體的認(rèn)知、認(rèn)同，達(dá)到高效提高認(rèn)知度、美譽度的效果。作為信息時代的產(chǎn)物，網(wǎng)絡(luò)Logo的設(shè)計，更應(yīng)遵循CIS的整體規(guī)律并有所突破。網(wǎng)站美工設(shè)計(2)網(wǎng)站Logo設(shè)計規(guī)范網(wǎng)站美工設(shè)計B．網(wǎng)絡(luò)Logo設(shè)計的基本過程：一看、二挖、三總結(jié)。一看：看客戶，準(zhǔn)確定位要仔細(xì)分析客戶是什么行業(yè)，其公司行業(yè)特征，產(chǎn)品服務(wù)特征是什么，只有做到定位準(zhǔn)確才不會犯方向性錯誤。二挖，挖掘和客戶行業(yè)、產(chǎn)品等有聯(lián)系的、可以用來表現(xiàn)的想法，進(jìn)行創(chuàng)意。在定位明確后既開始進(jìn)入創(chuàng)意階段，這個過程是思考的過程，挖掘的過程，不放過任何相關(guān)的想法點子，最后進(jìn)行綜合分析提煉創(chuàng)意。三總結(jié)，總結(jié)挖掘出的點子創(chuàng)意，并進(jìn)行實施。這個過程是個總結(jié)的過程也是個實施的過程，把好的想法提煉選取出后進(jìn)行制作，通過圖形創(chuàng)作軟件實現(xiàn)其最終效果。網(wǎng)站美工設(shè)計B．網(wǎng)絡(luò)Logo設(shè)計的基本過程：一看、二挖、三總結(jié)。網(wǎng)站美C．網(wǎng)絡(luò)Logo的表現(xiàn)形式：作為具有傳媒特性的Logo，為了在最有效的空間內(nèi)實現(xiàn)所有的視覺識別功能，一般是通過特示圖案及特示文字的組合，達(dá)到對被標(biāo)志體的出示、說明、溝通、交流，從而引導(dǎo)受眾的興趣、達(dá)到增強美譽、記憶等目的。網(wǎng)站美工設(shè)計C．網(wǎng)絡(luò)Logo的表現(xiàn)形式：網(wǎng)站美工設(shè)計表現(xiàn)形式的組合方式一般分為特殊圖形，特殊字體，圖文并貌。1)特殊圖形：通過獨特、醒目的圖形來吸引觀者的眼球，特殊圖案本身易被區(qū)分、記憶，通過隱寓、聯(lián)想、概括、抽象等表現(xiàn)方法表現(xiàn)被標(biāo)志對象，更容易強化溝通和被理解。2)特殊文字：在溝通與傳播活動中，將反復(fù)使用的被標(biāo)志體的名稱或其產(chǎn)品名稱，用一種文字形態(tài)加以統(tǒng)一，并對文字進(jìn)行獨特設(shè)計變形，以加深觀者的印象，達(dá)到傳播的目的。3)圖文并貌:指文字與圖案結(jié)合的設(shè)計，兼具文字與圖案的屬性，更容易被觀者所接受。網(wǎng)站美工設(shè)計表現(xiàn)形式的組合方式一般分為特殊圖形，特殊字體，圖文并D．網(wǎng)絡(luò)Logo的規(guī)范設(shè)計Logo時，面向應(yīng)用的各種條件作出相應(yīng)規(guī)范，對指導(dǎo)網(wǎng)站的整體建設(shè)有著極現(xiàn)實的意義。設(shè)計時要規(guī)范Logo的標(biāo)準(zhǔn)色、輔助色等配色體系，同時要考慮其大小，色彩。如果企業(yè)有VI規(guī)范手冊要按VI規(guī)范手冊嚴(yán)格執(zhí)行，大小依據(jù)網(wǎng)頁的整體結(jié)構(gòu)風(fēng)格而定。網(wǎng)站美工設(shè)計D．網(wǎng)絡(luò)Logo的規(guī)范網(wǎng)站美工設(shè)計(3)廣告形象區(qū)域（Banner)設(shè)計Banner的英文翻譯有網(wǎng)幅廣告的含義，指網(wǎng)幅廣告、旗幟廣告、橫幅廣告。(4)導(dǎo)航區(qū)域設(shè)計導(dǎo)航區(qū)域是網(wǎng)頁設(shè)計中不可缺少的部分，它是指通過一定的技術(shù)手段，為網(wǎng)站的訪問者提供一定的途徑，使其可以方便地訪問到所需的內(nèi)容，是人們?yōu)g覽網(wǎng)站時從一個頁面轉(zhuǎn)到另一個頁面的快速通道。利用導(dǎo)航條，可以快速找到要瀏覽的頁面。導(dǎo)航條的目的是讓網(wǎng)站的層次結(jié)構(gòu)以一種有條理的方式清晰展示，并引導(dǎo)用戶毫不費力地找到并管理信息，讓用戶在瀏覽網(wǎng)站過程中不至迷失。為了讓網(wǎng)站信息可以有效地傳遞給用戶，導(dǎo)航一定要簡潔、直觀、明確。網(wǎng)站美工設(shè)計(3)廣告形象區(qū)域（Banner)設(shè)計網(wǎng)站美工設(shè)計(5)網(wǎng)頁的框架結(jié)構(gòu)類型網(wǎng)頁的框架結(jié)構(gòu)無疑就是網(wǎng)頁的骨骼、筑“房”地基。網(wǎng)頁版面布局以導(dǎo)航欄為界，大致可分為：上下、左右、上左右、上左中右、綜合，不規(guī)則等。1）上下結(jié)構(gòu)通常上方為導(dǎo)航條，或者動態(tài)的企業(yè)形象、廣告區(qū)域。下方為正文、內(nèi)容部分。通常在內(nèi)容較少或簡潔的企業(yè)網(wǎng)站或個人網(wǎng)站中出現(xiàn)。2）左右結(jié)構(gòu)一般左側(cè)是導(dǎo)航條，右側(cè)是正文、內(nèi)容部分或者公司企業(yè)形象展示。3）上左右結(jié)構(gòu)上方為主要的菜單導(dǎo)航條，左側(cè)為點擊出現(xiàn)的細(xì)分欄目導(dǎo)航條，下方為較主要的欄目及小廣告等，右側(cè)為內(nèi)容區(qū)域。這種結(jié)構(gòu)形式是大中型企業(yè)較喜歡的框架形式。網(wǎng)站美工設(shè)計(5)網(wǎng)頁的框架結(jié)構(gòu)類型網(wǎng)站美工設(shè)計4）上左中右結(jié)構(gòu)式同上左右框架式稍有區(qū)別的是中間部分為內(nèi)容區(qū)域，右側(cè)則是該網(wǎng)站較重要的內(nèi)容導(dǎo)航區(qū)域，或是登錄、搜索區(qū)域、Flash廣告等。5）綜合結(jié)構(gòu)式特點是功能模塊多，信息分類詳細(xì)，因此根據(jù)需要采用區(qū)域版面結(jié)構(gòu)較合適。信息儲量大的門戶網(wǎng)站較多應(yīng)用這類結(jié)構(gòu)。6）不規(guī)則結(jié)構(gòu)式信息量少，通常在以產(chǎn)品宣傳為目的的企業(yè)網(wǎng)站和個人網(wǎng)站中使用。網(wǎng)站美工設(shè)計4）上左中右結(jié)構(gòu)式網(wǎng)站美工設(shè)計二、任務(wù)1——個人網(wǎng)頁設(shè)計個人網(wǎng)站是指個人或團(tuán)體因某種興趣、擁有某種專業(yè)技術(shù)、提供某種服務(wù)或把自己的作品、商品展示銷售而制作的具有獨立空間域名的網(wǎng)站。個人網(wǎng)頁可以充分體現(xiàn)個人的個性風(fēng)格，形式自由靈活，受到廣大電腦愛好著的青睞。制作個人網(wǎng)頁或為別人設(shè)計個人網(wǎng)頁不要盲目開始設(shè)計，一定要做好前期定位工作。要注意設(shè)計個人網(wǎng)頁的風(fēng)格。例如：男孩子可能一般喜歡簡潔大方或是色彩個性，藍(lán)色、灰色、黑色的網(wǎng)頁風(fēng)格，而女孩子可能多數(shù)還是喜歡顏色溫柔漂亮艷麗活潑，風(fēng)格唯美的網(wǎng)頁風(fēng)格，這些元素都直接影響最終的設(shè)計風(fēng)格。同時也可以為個人網(wǎng)站加入一個自定的主題，如我心飛揚、浪漫滿屋、E酷一族等等，這些主題也是進(jìn)行網(wǎng)站創(chuàng)意的關(guān)鍵切入點。網(wǎng)站美工設(shè)計二、任務(wù)1——個人網(wǎng)頁設(shè)計個人網(wǎng)站是指個人或團(tuán)體因某1．將要設(shè)計網(wǎng)頁最終效果如圖所示，主題確定為我心飛揚，簡潔大方的風(fēng)格。網(wǎng)站美工設(shè)計1．將要設(shè)計網(wǎng)頁最終效果如圖所示，主題確定為我心飛揚，簡潔大2．對所設(shè)計的個人網(wǎng)頁進(jìn)行整體規(guī)劃。首先，為網(wǎng)站確定主題名稱以便Logo的設(shè)計，然后確定所設(shè)計個人網(wǎng)頁的尺寸大小，最后確定網(wǎng)站結(jié)構(gòu)風(fēng)格，最好能先畫出結(jié)構(gòu)草圖以便科學(xué)合理的分布所表現(xiàn)內(nèi)容。3．確定主題：我心飛揚。新建文件并將文件命改為“我心飛揚”，頁面大小為780X580像素。網(wǎng)站美工設(shè)計2．對所設(shè)計的個人網(wǎng)頁進(jìn)行整體規(guī)劃。首先，為網(wǎng)站確定主題名稱4．設(shè)計Logo。創(chuàng)意分析：為了表現(xiàn)飛翔、自由等概念，我們以翅膀為Logo設(shè)計的切入點。5．打開圖層面板，單擊“創(chuàng)建新組”按鈕，創(chuàng)建新組，將組命名為“Logo”。在新組中新建圖層，命名為“翅膀”。選擇工具箱中的鋼筆工具，在工具選項欄中單擊“路經(jīng)”按鈕，在文檔中畫出一支翅膀的外輪廓路徑。網(wǎng)站美工設(shè)計4．設(shè)計Logo。創(chuàng)意分析：為了表現(xiàn)飛翔、自由等概念，我們以6．將路徑轉(zhuǎn)化為選區(qū)，將前景色設(shè)為#13cf24，填充選區(qū)。網(wǎng)站美工設(shè)計6．將路徑轉(zhuǎn)化為選區(qū)，將前景色設(shè)為#13cf24，填充選區(qū)。7．在圖層面板中復(fù)制“翅膀”圖層，將復(fù)制的“翅膀副本”圖層進(jìn)行水平翻轉(zhuǎn)，并放置于合適的位置。網(wǎng)站美工設(shè)計7．在圖層面板中復(fù)制“翅膀”圖層，將復(fù)制的“翅膀副本”圖層進(jìn)網(wǎng)站美工設(shè)計網(wǎng)站美工設(shè)計8．輸入文字“我心飛揚”，字號38，字體選擇華文中宋。英文文字“HEARTFLY”，字號27，字體選擇ArialBlack?！巴跣∶鱾€人網(wǎng)站”，字號23，字體選擇黑體。調(diào)整文字的位置與大小。網(wǎng)站美工設(shè)計8．輸入文字“我心飛揚”，字號38，字體選擇華文中宋。英文文9．Logo設(shè)計完畢，將Logo圖層暫時隱藏。10．設(shè)計導(dǎo)航欄和廣告形象區(qū)域（Banner）。先確定Logo、導(dǎo)航欄及Banner的整體比例和尺寸。先將Logo所占位置定位為整體頁面左上角區(qū)域，寬度為200像素，高度為120像素，為方便操作可建立參考線。選擇“視圖”→“新建參考線”。網(wǎng)站美工設(shè)計9．Logo設(shè)計完畢，將Logo圖層暫時隱藏。網(wǎng)站美工設(shè)計11．打開Logo圖層顯示。將其中標(biāo)志調(diào)整大小后放入所規(guī)定位置。網(wǎng)站美工設(shè)計11．打開Logo圖層顯示。將其中標(biāo)志調(diào)整大小后放入所規(guī)定位12．制作廣告形象區(qū)域（Banner），首先導(dǎo)入示例圖片，如圖7-2-11。取其局部，刪除其Banner區(qū)域之外部分。網(wǎng)站美工設(shè)計12．制作廣告形象區(qū)域（Banner），首先導(dǎo)入示例圖片，如13．選擇菜單“濾鏡”→“模糊”→“動感模糊”命令，對圖片進(jìn)行處理。網(wǎng)站美工設(shè)計13．選擇菜單“濾鏡”→“模糊”→“動感模糊”命令，對圖片進(jìn)14．為了使網(wǎng)頁結(jié)構(gòu)嚴(yán)謹(jǐn)，在Logo和Banner區(qū)域的下方繪制兩條色帶，Logo下方色帶寬242像素、高15像素，色值為#666666。Banner下方色帶寬563像素高15像素，色值為#00cc33。網(wǎng)站美工設(shè)計14．為了使網(wǎng)頁結(jié)構(gòu)嚴(yán)謹(jǐn)，在Logo和Banner區(qū)域的下方15．制作導(dǎo)航圖標(biāo)，先制作出寬95像素高24像素的矩形。然后復(fù)制四塊，間隔距離1像素即可。最后在上方加入導(dǎo)航文字：首頁、文章、像冊、留言、音樂，字號為14，色值為#a8b0a9。網(wǎng)站美工設(shè)計15．制作導(dǎo)航圖標(biāo)，先制作出寬95像素高24像素的矩形。然16．繼續(xù)裝飾Banner區(qū)域，在其上方加入一條寬780像素、高13像素，色值為#336666的色帶。同時為Banner區(qū)域加上文字“WWW．WANGXIAOMING．COM”，字號為25，字體為ArialBlack，色值為#ffffff。網(wǎng)站美工設(shè)計16．繼續(xù)裝飾Banner區(qū)域，在其上方加入一條寬780像素17．制作內(nèi)容顯示區(qū)域，首先在左邊制作個人簡介區(qū)域。通過選區(qū)填充制作出寬123像素、高371像素的矩形，色值為#cccccc。在圖層面板中設(shè)置圖層透明度為70%。最后加入所需文字，文字大小可根據(jù)需要自行調(diào)節(jié)。網(wǎng)站美工設(shè)計17．制作內(nèi)容顯示區(qū)域，首先在左邊制作個人簡介區(qū)域。通過選區(qū)18．在圖像右邊制作裝飾色帶。首先制作寬556像素、高31像素，顏色為#666666的矩形。為了裝飾需要，右上角可刪除一斜角，色帶下方制作出一淺色帶，高度可根據(jù)需要自定。加入導(dǎo)航文字：“文章/心路歷程/為飛翔的心插上翅膀”，字號為12，色值為#cccccc。制作正文內(nèi)容顯示區(qū)域，先在導(dǎo)航文字的下方制作寬度556像素、高度329像素，色值為#ebeeeb的矩形，同時設(shè)置其透明度為60%。最后在其上方加入內(nèi)容文字，字號12，色值#545754。網(wǎng)站美工設(shè)計18．在圖像右邊制作裝飾色帶。首先制作寬556像素、高31網(wǎng)站美工設(shè)計網(wǎng)站美工設(shè)計19．在網(wǎng)頁底部繪制矩形行色塊，寬780像素、高55像素，色值#545754。一個完整的網(wǎng)頁小樣就制作完畢。網(wǎng)站美工設(shè)計19．在網(wǎng)頁底部繪制矩形行色塊，寬780像素、高55像素，色三、任務(wù)2——商業(yè)網(wǎng)站設(shè)計由于當(dāng)今企業(yè)對自身形象的逐步重視，以及對網(wǎng)絡(luò)廣告宣傳的青睞，幾乎每個企業(yè)都擁有自己的企業(yè)網(wǎng)站，還有眾多利用互聯(lián)網(wǎng)以贏利為目的的網(wǎng)站，我們可以都將之稱為商業(yè)網(wǎng)站。制作商業(yè)網(wǎng)站首先要定位行業(yè)，只有定位準(zhǔn)確風(fēng)格才能清晰，例如科技類網(wǎng)站，要考慮如何通過創(chuàng)意表現(xiàn)科技的現(xiàn)代感、科技感。風(fēng)格可以以簡潔為主，色調(diào)以藍(lán)色調(diào)為主。接下來的例子是進(jìn)出口貿(mào)易網(wǎng)站，整體網(wǎng)頁設(shè)計采用簡潔大方的風(fēng)格，色彩以藍(lán)色綠色為主，配以黑白灰色。網(wǎng)站美工設(shè)計三、任務(wù)2——商業(yè)網(wǎng)站設(shè)計網(wǎng)站美工設(shè)計網(wǎng)站美工設(shè)計網(wǎng)站美工設(shè)計1．新建文件，在對話框中將文件重命名為“商業(yè)網(wǎng)站”，設(shè)置文件寬度為780像素，高度為1050像素，分辨率為72像素/英寸。打開圖層面板，新建圖層。在畫面頂部繪制一個寬780像素、高30像素的矩形，填充顏色為#898989。網(wǎng)站美工設(shè)計1．新建文件，在對話框中將文件重命名為“商業(yè)網(wǎng)站”，設(shè)置文件2．制作Logo。在圖層面板中新建組，組名稱改為“Logo”。新建圖層，使用多邊形套索工具畫出Logo圖標(biāo)。網(wǎng)站美工設(shè)計2．制作Logo。在圖層面板中新建組，組名稱改為“Logo”3．加入英文和中文與Logo進(jìn)行版式組合，并將其高度設(shè)為43像素。其中中文為黑體，英文均為ArialBlack。網(wǎng)站美工設(shè)計3．加入英文和中文與Logo進(jìn)行版式組合，并將其高度設(shè)為434．在Logo右邊畫出寬415像素，高16像素的矩形色塊，色值為#194a87。網(wǎng)站美工設(shè)計4．在Logo右邊畫出寬415像素，高16像素的矩形色塊，色5．打開本章素材圖001．Jpg，選擇菜單“濾鏡”→“模糊”→“動感模糊”命令。網(wǎng)站美工設(shè)計5．打開本章素材圖001．Jpg，選擇菜單“濾鏡”→“模糊”6．將經(jīng)過動感模糊的圖片移動到商業(yè)網(wǎng)站文檔中，刪除不需要的部分。網(wǎng)站美工設(shè)計6．將經(jīng)過動感模糊的圖片移動到商業(yè)網(wǎng)站文檔中，刪除不需要的部7．在Banner區(qū)域輸入文字“JIEFENG創(chuàng)造卓越！”，作為品牌廣告語。同時在Logo和Banner區(qū)域下部加入兩條矩形色