電子課件電腦美術(shù)設(shè)計(jì)（全彩）9第九章

1、第9章 網(wǎng)頁(yè)設(shè)計(jì)圖文并茂的宣傳本章主要內(nèi)容：1、網(wǎng)頁(yè)設(shè)計(jì)知識(shí) ，包含：網(wǎng)頁(yè)設(shè)計(jì)原則 、網(wǎng)頁(yè)設(shè)計(jì)元素 、網(wǎng)頁(yè)色彩運(yùn)用 、常見(jiàn)的網(wǎng)頁(yè)布局。 2、輕松驛站的網(wǎng)頁(yè)制作 。9.1 網(wǎng)頁(yè)設(shè)計(jì)知識(shí)網(wǎng)頁(yè)設(shè)計(jì)知識(shí)包含內(nèi)容：1、網(wǎng)頁(yè)設(shè)計(jì)原則 2、網(wǎng)頁(yè)設(shè)計(jì)元素3、網(wǎng)頁(yè)色彩運(yùn)用4、常見(jiàn)的網(wǎng)頁(yè)布局 9.1.1網(wǎng)頁(yè)設(shè)計(jì)原則網(wǎng)頁(yè)設(shè)計(jì)的原則有簡(jiǎn)潔、一致和對(duì)比三個(gè)主要原則 ：1.簡(jiǎn)潔：頁(yè)面中不要放置太多的元素和信息 一個(gè)醒目的標(biāo)題 限制所用的字體和顏色的數(shù)目 元素都應(yīng)當(dāng)有明確的含義和用途 9.1.1網(wǎng)頁(yè)設(shè)計(jì)原則2.一致性頁(yè)面使用相同的頁(yè)邊距文本，圖形之間保持相同的間距 圖形、標(biāo)題、符號(hào)旁邊留下相同的空白 公司標(biāo)志處理圖標(biāo)導(dǎo)航處

2、理9.1.1網(wǎng)頁(yè)設(shè)計(jì)原則頁(yè)面中的每個(gè)元素與整個(gè)頁(yè)面的色彩和風(fēng)格上的一致 字體和顏色和諧3.對(duì)比顏色的對(duì)比 字體變化 強(qiáng)調(diào)突出關(guān)鍵內(nèi)容 9.1.2 網(wǎng)頁(yè)設(shè)計(jì)元素網(wǎng)頁(yè)的設(shè)計(jì)元素主要包括背景，文本，導(dǎo)航，圖像，表格，顏色，多媒體等元素。背景：給頁(yè)面添加背景，包括紋理填充、水印式背景和長(zhǎng)條狀背景等；文本：是為網(wǎng)頁(yè)提供信息的元素。導(dǎo)航：按鈕、圖標(biāo)和其他導(dǎo)航工具。9.1.2 網(wǎng)頁(yè)設(shè)計(jì)元素圖像：可加入圖片、圖形等；表格：用來(lái)顯示按行和列組織的信息；顏色：包括圖片的色彩、文本和背景的色彩等；多媒體：包括聲音、動(dòng)畫、視頻片斷、背景音樂(lè)等。9.1.3 網(wǎng)頁(yè)色彩運(yùn)用色彩能產(chǎn)生強(qiáng)烈的視覺(jué)效果色彩搭配合理還可以讓網(wǎng)頁(yè)生

3、動(dòng)活潑，傳遞設(shè)計(jì)者的思想情感使用色彩要慎重，否則很可能弄巧成拙一個(gè)網(wǎng)頁(yè)中要使用相近的色彩 背景色不要太刺眼 9.1.3 網(wǎng)頁(yè)色彩運(yùn)用色彩要拉開(kāi)一定的對(duì)比注意色彩的冷暖問(wèn)題 考慮色彩帶給人心理上的感覺(jué) 網(wǎng)頁(yè)作品點(diǎn)評(píng)9.1.4 常見(jiàn)的網(wǎng)頁(yè)布局常見(jiàn)的網(wǎng)頁(yè)布局有“T”型布局、“口”型布局、“三”型布局、對(duì)稱對(duì)比布局和POP布局等 。1.“T”型布局。所謂“T”型布局，就是指網(wǎng)頁(yè)上邊和左邊相結(jié)合，頁(yè)面頂部為橫條網(wǎng)站標(biāo)志和廣告條，左邊為主菜單，右邊顯示內(nèi)容。 9.1.4 常見(jiàn)的網(wǎng)頁(yè)布局2.“口”型布局。就是頁(yè)面上下各有一個(gè)廣告條，左邊為主菜單，右邊為鏈接，中間是主要內(nèi)容。 3.“三”型布局。是頁(yè)面上橫向兩

4、條色塊，將頁(yè)面整體分割為四部分，色塊中大多放廣告條。 9.1.4 常見(jiàn)的網(wǎng)頁(yè)布局 4.對(duì)稱對(duì)比布局。采用左右或上下對(duì)稱布局，一半深色，一半淺色，一般用于設(shè)計(jì)型站點(diǎn) 。5.POP布局。POP引自廣告術(shù)語(yǔ)，是指頁(yè)面布局像一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心。通常用于設(shè)計(jì)時(shí)尚站點(diǎn)，漂亮吸引人，但是瀏覽速度慢。 9.2輕松驛站的網(wǎng)頁(yè)制作1.在Photoshop中，執(zhí)行“文件/新建”，設(shè)置對(duì)話框。2.執(zhí)行“文件/打開(kāi)”，打開(kāi)“網(wǎng)頁(yè)背景1”文件。選擇矩形選擇工具，執(zhí)行“編輯/拷貝”。 3.切換文件，執(zhí)行“編輯/粘貼”，粘貼。執(zhí)行“編輯/自由變換”，拖動(dòng)圖像四周的變換手柄，將圖像壓縮為一個(gè)長(zhǎng)條，放

5、在圖像窗口的上方。9.2輕松驛站的網(wǎng)頁(yè)制作4.點(diǎn)擊圖層調(diào)板下方的“新建”按鈕，新建一個(gè)圖層。選擇矩形選擇工具，在圖像中按下鼠標(biāo)拖動(dòng)，繪制一個(gè)矩形的選擇區(qū) 。5.點(diǎn)擊前景色工具，在拾色器中，設(shè)置R=27，G=60，B=4，選擇油漆桶工具，將其噴繪為深綠色 。9.2輕松驛站的網(wǎng)頁(yè)制作6.執(zhí)行“選擇/取消選擇”，選擇移動(dòng)工具，按住Alt鍵，把色條向下拖動(dòng)，復(fù)制一份。使用移動(dòng)工具把它拖動(dòng)到圖像的下方。7.點(diǎn)擊圖層調(diào)板下方的“新建”按鈕，新建一個(gè)圖層。選擇矩形選擇工具，在圖像中按下鼠標(biāo)拖動(dòng)，繪制一個(gè)矩形的選擇區(qū)。 9.2輕松驛站的網(wǎng)頁(yè)制作8.點(diǎn)擊前景色工具，在拾色器中設(shè)置R=194，G=244，B=14

6、4，選擇油漆桶工具，在選擇區(qū)內(nèi)噴繪為淺綠色。9.在圖形調(diào)板中，把剛才制作的淡綠色矩形所在的圖層拖動(dòng)到背景的上方 。10.點(diǎn)擊圖層調(diào)板下方的“新建”按鈕，新建一個(gè)圖層。選擇矩形選擇工具，在圖像中按下鼠標(biāo)拖動(dòng)，繪制一個(gè)矩形的選擇區(qū) 。9.2輕松驛站的網(wǎng)頁(yè)制作11.點(diǎn)擊前景色，在拾色器中設(shè)置R=80，G=164，B=21，點(diǎn)擊背景色，在拾色器中，設(shè)置R=27，G=60，B=4，選擇漸變工具，點(diǎn)擊工具選項(xiàng)欄上的漸變色條，在對(duì)話框中，選中“預(yù)置”中的第一個(gè)漸變，設(shè)置工具選項(xiàng)欄。在選擇區(qū)內(nèi)從上向下拖動(dòng)鼠標(biāo)，制作漸變色 。9.2輕松驛站的網(wǎng)頁(yè)制作12.執(zhí)行“選擇/取消選擇”，選擇移動(dòng)工具，按住Alt鍵，將鼠

7、標(biāo)移到剛才制作的漸變條上面向下拖動(dòng)，把它復(fù)制一份 。13.點(diǎn)擊圖層調(diào)板下方的“新建”按鈕，新建一個(gè)圖層。點(diǎn)擊前景色工具，在拾色器中設(shè)置R=194，G=244，B=144，選擇工具箱中的形狀工具，設(shè)置工具選項(xiàng)欄，在圖像中拖動(dòng)鼠標(biāo)，繪制圓角矩形路徑。 9.2輕松驛站的網(wǎng)頁(yè)制作14.選擇工具箱中的形狀工具，設(shè)置工具選項(xiàng)欄。在圖像中拖動(dòng)鼠標(biāo)，再次繪制圓角矩形路徑。15.在路徑中點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇“建立選區(qū)”，將路徑轉(zhuǎn)化為選區(qū) 。9.2輕松驛站的網(wǎng)頁(yè)制作16.點(diǎn)擊前景色，在拾色器中設(shè)置R=51，G=78，B=0，點(diǎn)擊背景色，在拾色器中設(shè)置R=127，G=163，B=26，選擇漸變工具，點(diǎn)擊

8、工具選項(xiàng)欄上的漸變色條，在打開(kāi)的對(duì)話框中，選中“預(yù)置”中的第一個(gè)漸變，在圖像中的選擇區(qū)內(nèi)從上向下拖動(dòng)鼠標(biāo)，制作漸變色。9.2輕松驛站的網(wǎng)頁(yè)制作17.執(zhí)行“選擇/取消選擇”。選擇工具箱中的形狀工具，設(shè)置工具選項(xiàng)欄，將前景色設(shè)置為白色。在圖像中拖動(dòng)鼠標(biāo)，繪制十字形狀。18.點(diǎn)擊圖層調(diào)板下方的“添加圖層樣式”按鈕，在展開(kāi)的菜單中選擇“描邊”，設(shè)置對(duì)話框，點(diǎn)擊“顏色”后邊的色塊，在拾色器中設(shè)置R=55，G=105，B=19。9.2輕松驛站的網(wǎng)頁(yè)制作19.在圖層調(diào)板中，選中圓角矩形所在的圖層，選擇工具箱中的移動(dòng)工具，按住Alt鍵，按下鼠標(biāo)拖動(dòng)，進(jìn)行復(fù)制，然后使用移動(dòng)工具調(diào)整其位置。20.使用同樣的辦法再

9、復(fù)制兩個(gè)，使用移動(dòng)工具調(diào)整其位置。21.點(diǎn)擊圖層調(diào)板下方的“新建”按鈕，新建一個(gè)圖層。使用矩形選擇工具在圖像的上方制作一個(gè)矩形選擇區(qū) 。9.2輕松驛站的網(wǎng)頁(yè)制作22.執(zhí)行“編輯/填充”，設(shè)置對(duì)話框，將圖案后面的方框內(nèi)選擇“抽線”圖案，將圖層調(diào)板上方的“不透明度”設(shè)為30。23.點(diǎn)擊圖層調(diào)板下方的“新建”按鈕，新建一個(gè)圖層。將前景色設(shè)置為白色。選擇單行選擇工具，在圖像上制作一個(gè)單行選區(qū)。同時(shí)按下鍵盤上的Alt鍵和Delete鍵，將選區(qū)填充為白色。24.執(zhí)行“選擇/取消選擇”，選擇移動(dòng)工具，按住Alt鍵，將鼠標(biāo)移到剛才制作的白線向下拖動(dòng)，進(jìn)行復(fù)制。使用同樣的方法總共復(fù)制4條白線 。25.選擇文字工具，設(shè)置工具選項(xiàng)欄，將前景色設(shè)為藍(lán)色。在圖像上方點(diǎn)擊鼠標(biāo)，輸入文字“輕松”。 9.2輕松驛站的網(wǎng)頁(yè)制作26.點(diǎn)擊圖層調(diào)板下方的“添加圖層樣式”按鈕，在展開(kāi)的菜單中為文字添加投影、外發(fā)光、描邊效果 。27.選擇文字工具，設(shè)置工具選項(xiàng)欄，將前景色設(shè)為橙色。在圖像上方點(diǎn)擊，輸入文字“驛站”。為文字添加圖層效果。28.在該頁(yè)面的其他地方輸入文字 。9.2輕松驛站的網(wǎng)頁(yè)制作這樣網(wǎng)頁(yè)的基本圖像框架就做好了。一個(gè)網(wǎng)頁(yè)的最后完成，還需要添加文字內(nèi)容