網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)-04利用Photoshop進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)

《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》第4章利用PhotoshopCS5進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)4.14.24.34.44.5設(shè)計(jì)網(wǎng)站首頁(yè)界面設(shè)計(jì)網(wǎng)站Banner3.44.64.7網(wǎng)頁(yè)草圖的切片和導(dǎo)出PhotoshopCS5簡(jiǎn)介設(shè)計(jì)網(wǎng)站LOGO設(shè)計(jì)網(wǎng)站導(dǎo)航欄設(shè)計(jì)網(wǎng)站子頁(yè)界面第4章利用PhotoshopCS5進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)本章首先介紹了Photoshopcs5軟件操作，通過(guò)多個(gè)圖像和網(wǎng)頁(yè)界面的設(shè)計(jì)過(guò)程，講解如何利用Photoshop進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)?！颈菊聦W(xué)習(xí)目的】通過(guò)本章的學(xué)習(xí)，讀者能夠：1.掌握Photoshopcs5軟件基本操作2.掌握利用Photoshopcs5軟件進(jìn)行l(wèi)ogo、導(dǎo)航欄、banner設(shè)計(jì)3.掌握利用Photoshopcs5軟件進(jìn)行網(wǎng)站首頁(yè)和內(nèi)容頁(yè)界面的設(shè)計(jì)案例導(dǎo)入：

本章通過(guò)使用PhotoshopCS5設(shè)計(jì)西京食府網(wǎng)站（名稱(chēng)為虛擬）的banner、logo、導(dǎo)航欄、網(wǎng)站首頁(yè)界面和子頁(yè)界面等，詳細(xì)介紹PhotoshopCS5在網(wǎng)頁(yè)設(shè)計(jì)的不同階段是如何處理各種不同類(lèi)型圖像的。4.1PhotoshopCS5簡(jiǎn)介AdobePhotoshop是一款功能強(qiáng)大的圖像處理軟件，由美國(guó)Adobe公司在1990年首次推出，在圖像處理和電腦繪圖領(lǐng)域中占據(jù)了重大地位。經(jīng)過(guò)多次更新?lián)Q代，功能不斷增強(qiáng)與完善，最新推出的PhotoshopCS5，新增加了許多功能，如：流體畫(huà)布旋轉(zhuǎn)的功能，調(diào)整面板的改進(jìn)，創(chuàng)新的3D與繪圖合成等功能，使原有功能更加完善。Photoshop的應(yīng)用領(lǐng)域很廣泛，在圖像、網(wǎng)頁(yè)設(shè)計(jì)、視頻、WEB出版各方面都有涉及。Photoshop的專(zhuān)長(zhǎng)在于圖像處理，而不是圖形創(chuàng)作。主要用于平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、繪畫(huà)、標(biāo)志設(shè)計(jì)、數(shù)碼照片處理及一些后期處理等方面。PhotoshopCS5的工作界面由“菜單”欄、“屬性”欄、“圖像編輯”窗口、狀態(tài)欄、工具箱、控制面板等組成。4.2設(shè)計(jì)網(wǎng)站LOGO

本節(jié)以西京食府logo設(shè)計(jì)實(shí)例入手，講述如何利用PhotoshopCS5進(jìn)行網(wǎng)站logo設(shè)計(jì)，逐一向讀者展示Photoshop在網(wǎng)頁(yè)設(shè)計(jì)的強(qiáng)大功能。

主要涉及以下知識(shí)點(diǎn)：新建文件、選取框工具的使用、填充選取框、選取框的羽化效果和調(diào)整邊緣的設(shè)置、輸入文本等。

操作步驟如下：1．新建文件：尺寸為1080*425像素2．繪制logo（1）新建圖層：選擇“矩形選擇”工具，設(shè)置羽化值為15px，畫(huà)一個(gè)合適大小的logo矩形外框。（2）填充底色。設(shè)置前景色為#561801，右擊選擇框，在彈出菜單中選擇“填充”命令，在彈出的對(duì)話框中，內(nèi)容選擇前景色，單擊“確定”按鈕，如圖4.5（a）所示。單擊畫(huà)布上方處屬性欄的“調(diào)整邊緣”按鈕，將對(duì)比度調(diào)整為100%，選擇輸出到“新建圖層”。（3）繼續(xù)單擊“矩形選擇”工具，參數(shù)不變，單擊logo中心點(diǎn)，創(chuàng)建一個(gè)和剛才大小一樣的矩形外框，單擊“矩形選擇”工具，將羽化值從原來(lái)15px調(diào)整為0px。按下alt鍵，光標(biāo)變?yōu)橐粋€(gè)“+-”形狀，在左側(cè)最上方點(diǎn)從外及內(nèi)，從上向下拖動(dòng)光標(biāo)，拖動(dòng)的選區(qū)為原來(lái)矩形外框的一半，即刪除掉矩形的左半部分；方法同（2）步驟，設(shè)置前景色為白色，將右半部分填充為白色。（4）輸入logo文字部分。（5）完善logo。4.3設(shè)計(jì)網(wǎng)站導(dǎo)航欄

網(wǎng)站導(dǎo)航欄是網(wǎng)頁(yè)設(shè)計(jì)中不可缺少的部分，導(dǎo)航欄的目的是讓網(wǎng)站的層次結(jié)構(gòu)以一種有條理的方式清晰展示，并引導(dǎo)用戶毫不費(fèi)力地找到信息并管理信息，讓用戶在瀏覽網(wǎng)站過(guò)程中不至迷失。

主要涉及以下知識(shí)點(diǎn)：矢量圖形工具的使用、標(biāo)尺和輔助線的使用、添加節(jié)點(diǎn)、調(diào)整節(jié)點(diǎn)、圖層樣式的使用、素材的置入、矢量蒙版的使用、輸入文本等。

操作步驟如下：1．新建文件：尺寸為820*100像素，2．繪制導(dǎo)航欄框架單擊圓角矩形工具，半徑為10，繪制導(dǎo)航欄框架，沿著圓角矩形的頂部和底部添加多條輔助線；單擊“直接選擇”工具，選中圓角矩形左上角邊緣弧度的二個(gè)節(jié)點(diǎn)向上向左側(cè)移動(dòng)至輔助線位置，同理單擊“直接選擇”工具選中右上角邊緣弧度的二個(gè)節(jié)點(diǎn)向上向右移動(dòng)至輔助線位置，單擊“添加節(jié)點(diǎn)”工具，在矩形的中心上下分別添加節(jié)點(diǎn)，拖動(dòng)節(jié)點(diǎn)向中心靠攏，調(diào)整矩形弧度，最后將此圖層命名為框架圖層。2.美化框架1）置入背景素材“底紋.jpg”，命名圖層為“底紋”。將底紋圖像全部覆蓋住導(dǎo)航欄框架，單擊框架圖層，將框架圖層處的矢量蒙版標(biāo)志拖至“底紋”圖層，刪除框架圖層，保留底紋圖層。3）右擊底紋圖層，在彈出菜單中選擇“混合選項(xiàng)”命令，在“圖層樣式”對(duì)話框中，分別設(shè)置“浮面和斜雕”與“內(nèi)陰影”。4）單擊”橫排文字“工具，選擇字體顏色為#4c0b00,字體為楷體，輸入導(dǎo)航欄文字內(nèi)容。4.4設(shè)計(jì)網(wǎng)站Banner

網(wǎng)站banner是網(wǎng)站廣告最直接的表現(xiàn)形式，通過(guò)網(wǎng)站banner的設(shè)計(jì)，突出強(qiáng)調(diào)網(wǎng)站的內(nèi)容。

主要涉及以下知識(shí)點(diǎn)：素材的置入、圖像布局及圖層上下位置的調(diào)整、圖像的自由變換、圖層蒙版的使用、圖層樣式的使用、矢量蒙版的使用、特效字的制作、漸變顏色的設(shè)置等。

操作步驟如下：1．新建文件：907*425像素2．置入素材（1）依次置入潑墨窗戶、花、佳肴、筷子、綠葉、星光、圓珠、云煙等素材，按下Ctrl+T組合鍵，拖動(dòng)鼠標(biāo)縮放圖像的尺寸、調(diào)整素材和圖層上下位置。（2）選中云煙圖層，單擊圖層面板中“添加圖層蒙版”按鈕，然后選擇漸變工具，使用漸變顏色為白色至黑色，在蒙版中，白色為不遮蓋，黑色為全遮蓋，自云煙圖層的上方到下方拖動(dòng)，實(shí)現(xiàn)圖層的漸變隱藏。（3）在佳肴圖層下方新建圖層，選擇“橢圓選擇工具”，設(shè)置羽化為15像素，繪制一個(gè)和佳肴菜盤(pán)大小相當(dāng)?shù)臋E圓選區(qū)，右擊選區(qū)，填充顏色為灰色（#606060），實(shí)現(xiàn)圖層底部陰影。3．輸入廣告語(yǔ)（1）單擊文字工具，設(shè)置文字為方正隸二簡(jiǎn)體，輸入文本“匯聚陜西民俗特色小吃”，調(diào)整匯聚字體為36號(hào)，其余文字為25號(hào)。（2）選擇此文本圖層，單擊圖層面板下方的圖層樣式向下黑色箭頭，選擇“混合選項(xiàng)”命令，進(jìn)入“圖層樣式”對(duì)話框，選擇“漸變疊加”，顏色漸變從#bb6e00到#571800到c77000（3）在“圖層樣式”對(duì)話框中再選擇“描邊”，為文本添加白色描邊。4.5設(shè)計(jì)網(wǎng)站首頁(yè)界面

在前面的章節(jié)已經(jīng)制作了西京食府網(wǎng)站的logo、banner和導(dǎo)航欄，在本節(jié)里，需要制作的是一個(gè)網(wǎng)站完整的首頁(yè)，通過(guò)實(shí)例，讓大家更深入的了解一個(gè)網(wǎng)站頁(yè)面的構(gòu)成和設(shè)計(jì)，了解photoshop在網(wǎng)頁(yè)設(shè)計(jì)中的一些常見(jiàn)功能和應(yīng)用。主要涉及以下知識(shí)點(diǎn)：頁(yè)面的布局、標(biāo)尺與輔助線的使用、畫(huà)筆的使用技巧、利用圖層文件夾對(duì)圖層進(jìn)行管理、導(dǎo)入已設(shè)計(jì)好的PSD文件、置入素材、圖像的自由變換、輸入文本等。

操作步驟如下：1．新建文件：尺寸為1080*944像素。2．填充框架部分（1）新建圖層，單擊“矩形選擇”工具，在網(wǎng)頁(yè)的左側(cè)繪制一個(gè)窄長(zhǎng)形的矩形選取框，將前景色設(shè)置為#571800進(jìn)行填充，復(fù)制此圖層，放置于網(wǎng)頁(yè)右側(cè)，使兩者對(duì)稱(chēng)。（2）單擊文字工具，設(shè)置顏色為#571800，字體為宋體，字號(hào)為12點(diǎn)，輸入“收藏|設(shè)為主頁(yè)”，放置于網(wǎng)頁(yè)的右上角。（3）單擊文字工具，設(shè)置顏色為#858585，字體為楷體，字號(hào)為12點(diǎn)，輸入底部導(dǎo)航與版權(quán)信息，放置于網(wǎng)頁(yè)的底部居中。（4）新建圖層，選擇“畫(huà)筆工具”，設(shè)置顏色為#571800，大小為3，筆觸為柔邊緣圓形，按下Shift鍵，在網(wǎng)頁(yè)的底部繪制一條分割線，裝飾網(wǎng)頁(yè)。3．導(dǎo)入logo、banner、導(dǎo)航欄4．網(wǎng)站主體部分信息填充打開(kāi)標(biāo)尺，拖動(dòng)輔助線，確定網(wǎng)頁(yè)信息部分的四周邊距。（1）優(yōu)惠活動(dòng)（2）置入菜品.jpg和設(shè)施.jpg，選擇直排文字工具，顏色為黑色，字體為楷體，字號(hào)為17點(diǎn)，輸入四至五種菜品名稱(chēng)，選中第一道特色菜，文本顏色為#c40800。4.6設(shè)計(jì)網(wǎng)站子頁(yè)界面

在完成網(wǎng)站首頁(yè)設(shè)計(jì)后，需要在其基礎(chǔ)上，設(shè)計(jì)網(wǎng)站的子頁(yè)，子頁(yè)即網(wǎng)站的內(nèi)容頁(yè)。在子頁(yè)的設(shè)計(jì)過(guò)程當(dāng)中，可以和網(wǎng)站首頁(yè)設(shè)計(jì)過(guò)程中一樣，先將制作好的網(wǎng)站各部分依次導(dǎo)入，從而減少重復(fù)的工作量。

主要涉及以下知識(shí)點(diǎn)：頁(yè)面的布局、導(dǎo)入已設(shè)計(jì)好的PSD文件、圖像背景處理、置入素材、圖層樣式的使用、畫(huà)筆的使用技巧、矢量工具的使用、節(jié)點(diǎn)添加、節(jié)點(diǎn)轉(zhuǎn)換、節(jié)點(diǎn)調(diào)整、圖層的鏈接、剪切蒙版的使用等。

操作步驟如下：1．新建文件：尺寸為1080*1911像素。2．填充框架部分3．導(dǎo)入logo、導(dǎo)航欄4．子頁(yè)banner制作（1）從網(wǎng)站首頁(yè)源文件中復(fù)制“匯聚陜西民俗特色小吃”文本；（2）置入古建筑.jpg素材，使用Ctrl+T組合鍵，將其縮放至合適大小，放置于banner位置，再置入閃光.jpg，縮放并放置合適位置；（3）單擊文字工具，設(shè)置顏色為#6d5543，字體為楷體，字號(hào)為14點(diǎn)，輸入菜品名稱(chēng)；（4）打開(kāi)菜品.jpg，背景透明處理后復(fù)制至此。5．子頁(yè)左側(cè)導(dǎo)航欄制作（1）繪制導(dǎo)航欄底色。（2）繪制導(dǎo)航欄裝飾條。（3）繪制菜品導(dǎo)航菜單。6．繪制主體部分背景、制作返回頂部按鈕。7．填充主體部分4.7網(wǎng)頁(yè)草圖的切片和導(dǎo)出Photoshop中內(nèi)置了切片工具，切片是最簡(jiǎn)單生成網(wǎng)頁(yè)的方法之一，可將一個(gè)完整的網(wǎng)頁(yè)切割許多小片，以便于圖像和網(wǎng)頁(yè)的上傳與下載。通過(guò)導(dǎo)出為網(wǎng)頁(yè)和圖像后，可以用Dreamweaver軟件進(jìn)行網(wǎng)頁(yè)的編輯。利用切片工具可以快速的進(jìn)行圖像的分割和網(wǎng)頁(yè)的制作。（1）打開(kāi)需要切片的網(wǎng)頁(yè)界面圖。（2）單擊切片工具，對(duì)網(wǎng)頁(yè)中需要單擊鏈接的部分進(jìn)行選中切割（3）右擊切片區(qū)域，在彈出菜單中選擇“編輯切片選項(xiàng)”命令，在彈出的“切片選項(xiàng)”對(duì)話框中可以對(duì)切片的屬性進(jìn)行調(diào)整和設(shè)置。（4）對(duì)網(wǎng)頁(yè)上所有的按鈕和鏈接都要進(jìn)行一一切片，并設(shè)置相關(guān)參數(shù)。

（5）當(dāng)切片編輯完成后，就可以輸出圖片為網(wǎng)頁(yè)格式，單擊“文件”→“存儲(chǔ)為web和設(shè)備所有格式”命令，單擊存儲(chǔ)按鈕，彈出“將優(yōu)化結(jié)果存儲(chǔ)為”窗口，選擇格式為“HTML和圖像”，選擇保存的路徑，單擊“保存”按鈕。本章小結(jié)本章主要介紹了利用Photoshop進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。1.PhotoshopCS5簡(jiǎn)介2.PhotoshopCS5的基本操作與主要功能3.利用PhotoshopCS5軟件設(shè)計(jì)logo、導(dǎo)航欄、banner等4.利用PhotoshopCS5軟件設(shè)計(jì)網(wǎng)站首頁(yè)和網(wǎng)站子頁(yè)練習(xí)題（1）Photoshop文檔的擴(kuò)展名是什么？它有什么特點(diǎn)？（2）Photoshop的主要的應(yīng)用領(lǐng)域有哪些？（3）Photoshop與Fireworks相比，分析這兩個(gè)軟件的優(yōu)劣勢(shì)。（4）為什么要將網(wǎng)頁(yè)界頁(yè)