第6章_動態(tài)網(wǎng)頁效果圖設(shè)計利器photoshop和fireworks教程

1、動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),徐延章 編著,,第6章 動態(tài)網(wǎng)頁效果圖設(shè)計利器——Photoshop CS5與Fireworks CS5,www.themegallery.com,Company Logo,第6章 動態(tài)網(wǎng)頁效果圖設(shè)計利器——Photoshop CS5與Fireworks CS5,Adobe Photoshop 是功能強大的圖像處理軟件，是設(shè)計網(wǎng)頁效果圖的首選軟件。本章采用Photoshop CS5作為網(wǎng)頁效果圖設(shè)計的

2、軟件，采用Fireworks CS5對網(wǎng)頁效果圖進(jìn)行優(yōu)化與切片處理。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,第6章 動態(tài)網(wǎng)頁效果圖設(shè)計利器——Photoshop CS5與Fireworks CS5,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,,,6.1 網(wǎng)頁標(biāo)志設(shè)計,1,,,6.2 主頁效果圖設(shè)計,2,,,6.3 內(nèi)頁效果圖設(shè)計,3,,,6.4 Fire

3、works CS5網(wǎng)頁圖像切片制作,4,www.themegallery.com,Company Logo,6.1 網(wǎng)頁標(biāo)志設(shè)計,標(biāo)志設(shè)計一直是企業(yè)形象設(shè)計的基礎(chǔ)和最直接的表現(xiàn)形式，其重要性是不言而喻的，網(wǎng)頁標(biāo)志（LOGO）的設(shè)計同樣非常重要。網(wǎng)站標(biāo)志（LOGO）是網(wǎng)站的“名片”，是網(wǎng)站形象的重要體現(xiàn)。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.1 網(wǎng)頁標(biāo)

4、志設(shè)計的技術(shù)要求,應(yīng)按照固定的尺寸與規(guī)格，關(guān)于網(wǎng)頁的LOGO，目前有國際標(biāo)準(zhǔn)規(guī)范：網(wǎng)頁LOGO大小規(guī)定為88×31像素，而企業(yè)或者組織的LOGO通常不限定。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.2 網(wǎng)頁標(biāo)志設(shè)計的藝術(shù)創(chuàng)意,作為具有傳媒特性的LOGO，為了在最有效的空間內(nèi)實現(xiàn)所有的視覺識別功能，一般是通過特征圖案及特征文字的組合，達(dá)到對被標(biāo)識

5、體的出示、說明、溝通、交流從而引導(dǎo)受眾的興趣、達(dá)到增強美譽、記憶等目的。表現(xiàn)形式的組合方式一般分為特征圖案，特征字體，合成字體。領(lǐng)跑者網(wǎng)頁標(biāo)志的設(shè)計本著“領(lǐng)跑”的含義，采用圖形與文字相結(jié)合的方式，使用文字L的造型，牽動ITTC（IT Training Center），字母“L”即“領(lǐng)”字的第一個字母來設(shè)計，展示領(lǐng)跑者的形象，色彩采用藍(lán)色和橙色相對比的方式，體現(xiàn)科技色彩。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.theme

6、gallery.com,Company Logo,6.1.3 Photoshop CS5界面介紹,Photoshop CS5是由美工Adobe公司推出的目前世界上最著名、使用最廣泛的平面圖像處理軟件之一。它對圖像有著非凡的裝飾、編輯、加工制作能力，是在廣告制作、圖像修改編輯中可以缺少的重要工具。本書采用Photoshop CS5進(jìn)行網(wǎng)頁效果圖設(shè)計。Photoshop CS5軟件窗口由標(biāo)題欄、菜單欄、工具選項欄、工具箱、浮動控制面板、狀態(tài)

7、欄、收縮型控制面板等組成。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.3 Photoshop CS5界面介紹,,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.3 Photoshop CS5界面介紹,,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery

8、.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)計過程,1.新建文件啟動Photoshop CS5，選擇菜單“文件|新建”命令，設(shè)置文件大小為850*230（寬度*高度），分辨率72像素/英寸（dpi），色彩模式為RGB，背景顏色為白色，文件名稱為領(lǐng)跑者LOGO。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)計過程,2.創(chuàng)建圖層單

9、擊圖層面板右下角的創(chuàng)建新圖層按鈕 ，創(chuàng)建“圖層1”，我們可以雙擊“圖層1”文字，修改為“標(biāo)志圖形”。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)計過程,3.鋼筆勾畫標(biāo)志造型使用工具箱中的鋼筆工具 ，設(shè)置屬性為路徑方式，按如圖所示錨點連續(xù)單擊鼠標(biāo)，用鋼筆工具勾勒出背景的基本形狀，到最后一個節(jié)點時單擊第一個錨點，實現(xiàn)封閉路徑。,動態(tài)網(wǎng)頁設(shè)計教程

10、——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)計過程,3.鋼筆勾畫標(biāo)志造型按住鋼筆工具，在彈出的工具組中選擇轉(zhuǎn)換點工具，如圖所示，單擊路徑上的錨點，然后按住鼠標(biāo)拖曳，可以對路徑錨點類型的調(diào)整，拖動控制柄使曲線變得圓滑。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)計過

11、程,4.路徑選擇工具創(chuàng)建選區(qū)使用路徑選擇工具 選擇路徑，單擊鼠標(biāo)右鍵建立選區(qū)，在彈出的建立選區(qū)對話框中，設(shè)置羽化半徑為0。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)計過程,5.填色與處理單擊工具組中的前景色設(shè)置工具 ，彈出拾色器對話框，設(shè)置顏色為藍(lán)色（R：40，G：117，B：187）。選擇菜單“編輯|填充”，設(shè)置填充色為前景色，單擊確

12、定為選區(qū)填色。設(shè)計指導(dǎo)：填色一般采用快捷鍵的方法，填充前景色快捷鍵，填充背景色快捷鍵。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)計過程,6.標(biāo)志文字設(shè)計,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)計過程,6.標(biāo)志文字設(shè)計使用文本工具 ，輸入文

13、字“ITTC”，使用文本工具框選文字，單擊文字工具屬性面板上顯示字符面板的按鈕 ，顯示字符控制面板，調(diào)節(jié)字符面板屬性，設(shè)置字體為Normande BT大小為36，選擇“I”字母，設(shè)置顏色為橙色（R：210，G：84，B：10），選擇“TTC”字母，設(shè)置顏色為藍(lán)色（R：40，G：117，B：187）。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)

14、計過程,6.標(biāo)志文字設(shè)計使用文本工具設(shè)置網(wǎng)站名稱“領(lǐng)跑者IT培訓(xùn)中心”，設(shè)置字體為黑體，大小60，調(diào)節(jié)AV字符間距為20，選擇“領(lǐng)”文字，設(shè)置顏色為橙色（R：210，G：84，B：10），選擇“跑者IT培訓(xùn)中心”文字，設(shè)置顏色為藍(lán)色（R：40，G：117，B：187）。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)計過程,6.標(biāo)志文字設(shè)計新

15、建圖層，改名為標(biāo)志線，設(shè)置前景色為藍(lán)色藍(lán)色（R：40，G：117，B：187），使用直線工具，設(shè)置選項為填充像素，寬度為3像素，按住Shift鍵拖動鼠標(biāo)，繪制水平直線。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.1.4 網(wǎng)頁標(biāo)志設(shè)計過程,6.標(biāo)志文字設(shè)計輸入網(wǎng)站英文“Leader IT Training Center”，設(shè)置字體為Arial，大小為24點，顏

16、色為灰色，AV間距為100。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2 主頁效果圖設(shè)計,主頁效果圖是網(wǎng)頁設(shè)計的重點，要綜合考慮設(shè)計的技術(shù)要求、設(shè)計的藝術(shù)創(chuàng)意與設(shè)計實現(xiàn)的方法。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.1 網(wǎng)頁效果圖技術(shù)要求,1.文件尺寸的技術(shù)要求在設(shè)計效果

17、圖時，我們需要注意，由于網(wǎng)頁是需要用瀏覽器打開顯示的，需要考慮瀏覽器的菜單、工具欄、滾動條等窗口元素所占據(jù)的空間，不考慮插件的問題，當(dāng)顯示器的分辨率為800×600像素時，網(wǎng)頁效果圖尺寸設(shè)計成775×435是可以的。當(dāng)顯示器的分辨率為1024×768像素時，網(wǎng)頁尺寸最大設(shè)計成1003×592像素是可以的，注意設(shè)置網(wǎng)頁的左右、上下邊距為0。2.網(wǎng)頁導(dǎo)航設(shè)計技術(shù)要求為了使標(biāo)志便于切片處理，便于版式

18、編排，便于交互實現(xiàn)是網(wǎng)頁導(dǎo)航設(shè)計的技術(shù)原則，為此，采用橫向排版的方式。3.網(wǎng)頁Banner（網(wǎng)頁橫幅廣告）設(shè)計技術(shù)要求便于采用Flash技術(shù)實現(xiàn)，同時考慮沒有Flash的環(huán)境，因此提供兩種設(shè)計方案：純Flash的Banner與背景圖上加透明Flash的Banner。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.2 網(wǎng)頁Banner背景設(shè)計,1．建立文件

19、新建文件，設(shè)置文件大小為1000×590，分辨率設(shè)置為72，這里采用了比較保守的方式，這樣方便于后面的調(diào)整。新建“網(wǎng)頁背景”圖層，使用矩形選擇工具，框選選區(qū)。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.2 網(wǎng)頁Banner背景設(shè)計,2.填充漸變色選擇漸變工具 ，設(shè)置漸變屬性 為線性 漸變，單擊顏色選項 ，進(jìn)入漸變編輯器，進(jìn)行如圖參數(shù)設(shè)置，上面的

20、控制點工具 用于控制該點的不透明度，下面的控制點工具 用于控制該點的顏色，我們這里只需設(shè)置顏色即可。從左向右顏色為左側(cè)：（R：149，G：213，B：242），40%位置處：（R：178，G：226，B：249）右側(cè)：（R：26，G：95，B：168）按住Shift鍵，從左向右拖曳鼠標(biāo)，為選區(qū)填充漸變顏色。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.2 網(wǎng)

21、頁Banner背景設(shè)計,3.創(chuàng)建路徑蒙版使用鋼筆工具，創(chuàng)建如圖所示的路徑，之所以上面和左右都超過了文件的范圍，是因為建立選區(qū)后，只會保留文件內(nèi)部的區(qū)域，這樣建立選取的方法很快。使用路徑選擇工具選中路徑，單擊鼠標(biāo)右鍵，選擇創(chuàng)建矢量蒙版。單擊圖層空白處或選擇其它工具，蒙版效果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.2 網(wǎng)頁Banner背景設(shè)計,

22、4.放入標(biāo)志打開領(lǐng)跑者LOGO文件，使用移動工具直接拖動到領(lǐng)跑者效果圖中，使用快捷鍵Ctrl+T對圖形進(jìn)行自由變形，注意將屬性中的鏈接按鈕按下，以保證按比例縮放，注意，可以通過窗口菜單的層疊選項將多個文件排列在窗口中，進(jìn)行圖形的拖曳。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.2 網(wǎng)頁Banner背景設(shè)計,5.圖像描邊為了使標(biāo)志在背景中突出出來，這里采

23、用描邊的方式。單擊圖層面板下面的添加圖層樣式 按鈕，選擇“描邊”選項，設(shè)置描邊顏色為白色，大小為2像素，依次設(shè)置相應(yīng)圖層的描邊效果。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.3 網(wǎng)頁導(dǎo)航設(shè)計,1.創(chuàng)建圓角矩形路徑新建“導(dǎo)航”圖層，選擇矩形工具右側(cè)下方的三角形，選擇圓角矩形工具，設(shè)置圓角半徑為3px，工作方式為路徑，在網(wǎng)站名稱右側(cè)拖動出導(dǎo)航區(qū)域，,動態(tài)網(wǎng)

24、頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.3 網(wǎng)頁導(dǎo)航設(shè)計,2.創(chuàng)建圓角矩形選區(qū)按組合鍵“Ctrl+回車鍵”，創(chuàng)建選區(qū)，或使用路徑選擇工具 ，單擊導(dǎo)航區(qū)域的路徑，單擊右鍵，選擇“建立選區(qū)”。設(shè)置前景色為淡灰色（R：240，G：240，B：240），選擇菜單“編輯|描邊”命令，設(shè)置參數(shù)如圖所示，對選區(qū)進(jìn)行描邊。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,w

25、ww.themegallery.com,Company Logo,6.2.3 網(wǎng)頁導(dǎo)航設(shè)計,3.填充漸變顏色選擇漸變工具 ，設(shè)置漸變類型為線性漸變，設(shè)置漸變顏色帶為左側(cè)（R：132，G：182，B：224），右側(cè)（R：43，G：110，B：177），從選取左下角向右上角拖曳鼠標(biāo)，填充藍(lán)色的漸變，按可以取消當(dāng)前區(qū)域的選擇。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo

26、,6.2.3 網(wǎng)頁導(dǎo)航設(shè)計,4.設(shè)計導(dǎo)航文字使用文字工具 ，設(shè)置文字字體為“漢儀中圓簡”，大小為16點，顏色為白色，輸入導(dǎo)航文字。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.4 主頁欄目設(shè)計,1.素材的部分選擇選擇菜單“文件|打開”命令，打開配套光盤中“\源文件\6\素材\大樓.jpg”文件，使用多邊形套索工具 沿大樓輪廓單擊鼠標(biāo)，選擇大樓的主體，選擇

27、菜單“編輯|復(fù)制”命令，選擇“網(wǎng)頁背景”圖層，單擊創(chuàng)建新圖層圖標(biāo)，創(chuàng)建新圖層，改名為“大樓”，選擇菜單“編輯|粘貼”命令 。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.4 主頁欄目設(shè)計,2.圖片的變形按對大樓進(jìn)行自由變形，選中變形選項中的鎖定寬高比按鈕 ，保持比例關(guān)系。然后按鍵確認(rèn)變形操作（后面的自由變形命令使用同樣的方法），并調(diào)整大樓的位置。,動態(tài)網(wǎng)頁

28、設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.4 主頁欄目設(shè)計,3.選區(qū)的載入單擊網(wǎng)頁背景圖層，單擊右側(cè)的帶有路徑的縮覽圖，此時路徑顯示出來，使用直接選擇工具選中路徑，右擊，選擇建立選區(qū)，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.4 主頁欄目設(shè)計,3.選區(qū)的載入選擇大樓圖

29、層，單擊圖層面板底部的建立圖層蒙版按鈕。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.4 主頁欄目設(shè)計,3.選區(qū)的載入創(chuàng)建蒙版的顯示如圖所示。同樣方法，在大樓圖層上新建“人物”圖層，導(dǎo)入人物素材，設(shè)置蒙版。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.4 主頁欄目設(shè)計,4.文字

30、的設(shè)計使用文本工具 ，輸入文字“TO BE NO.1”，設(shè)置文字字體為“Mirareae BT”，顏色為白色并傾斜，如圖所示。同樣輸入中文文字信息，如圖所示。我們可以選擇 選擇工具單擊輸入的文字，按鍵對文字進(jìn)行進(jìn)一步變形。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.4 主頁欄目設(shè)計,5.曲線區(qū)域造型的設(shè)計新建“曲線背景”圖層，使用鋼筆工具創(chuàng)建如圖所示路

31、徑，按鍵建立選區(qū)，之所以建立的選區(qū)超過了顯示的區(qū)域，是因為上面的背景圖像能夠遮住下面的圖像，所以使用了比較簡單的方法。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.4 主頁欄目設(shè)計,5.曲線區(qū)域造型的設(shè)計設(shè)置前景色為灰色（R：228，G：228，B：228），按鍵為選區(qū)填充前景色，按取消選區(qū)，如圖所示。我們發(fā)現(xiàn)曲線背景圖層遮住了其他圖層，是因為圖層的順序問

32、題，我們可以在圖層面板用調(diào)節(jié)圖層的順序，將曲線圖層調(diào)節(jié)到網(wǎng)頁背景圖層以下，可以使用快捷鍵，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.5 網(wǎng)頁版權(quán)區(qū)域的設(shè)計,1.漸變色的填充選擇背景圖層，創(chuàng)建“底部背景”圖層，使用矩形選擇工具 ，從左上角向右下角拖動鼠標(biāo)，框選網(wǎng)頁底部矩形部分，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.

33、themegallery.com,Company Logo,6.2.5 網(wǎng)頁版權(quán)區(qū)域的設(shè)計,1.漸變色的填充選擇漸變工具，設(shè)置顏色從左至右依次為（R：229，G：246，B：254）、（R：87，G：195，B：241）（位置為39%）、（R：32，G：112，B：172），不透明度從左至右依次為10%、80%、100%，從上向下填充漸變顏色，按取消選區(qū)。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegaller

34、y.com,Company Logo,6.2.5 網(wǎng)頁版權(quán)區(qū)域的設(shè)計,2.文字信息的輸入使用文本工具，輸入版權(quán)信息，第一行信息為：地址：天津市西青區(qū)濱水西道393號 電話022-60255856Copyright 2010-2011 All right reserved Created by Lingpaozhe設(shè)置字體為黑體，顏色為白色，對齊方式為右對齊，第1行字體大小為12，第2行字體大小為10，行間距為18，并添加“描邊”

35、圖層樣式，結(jié)果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.6 信息中心欄目的設(shè)計,1.環(huán)形圖標(biāo)的繪制選擇背景圖層，創(chuàng)建“信息中心圖標(biāo)”圖層，使用選擇工具組中的“橢圓選擇工具”，按住從中心創(chuàng)建正圓形選區(qū)。設(shè)置前景色為（R：212，G：71，B：17），背景色為（R：248，G：174，B：54），選擇漸變工具，為選區(qū)從上向下填充前景向背景的漸變色

36、，按取消選區(qū)。再次選擇“橢圓選擇工具”，按住從中心創(chuàng)建一個小一些的正圓形選區(qū)，按Delete鍵刪除選區(qū)內(nèi)的圖像，結(jié)果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.6 信息中心欄目的設(shè)計,2.欄目文字的設(shè)計選擇文本工具，輸入“信息中心 News”欄目文字，設(shè)置字體為“漢儀中圓簡”，設(shè)置字號16，顏色為深灰（R：45，G：45，B：45），如圖所示。

37、,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.6 信息中心欄目的設(shè)計,3.欄目信息的設(shè)計同樣使用文本工具，設(shè)置文字字體為宋體，大小為11，行距為18，顏色和標(biāo)題一樣為深灰，輸入6條新聞標(biāo)題信息，結(jié)果如圖所示。使用同樣的方法輸入新聞日期，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Lo

38、go,6.2.6 信息中心欄目的設(shè)計,3.欄目信息的設(shè)計創(chuàng)建“新聞圖標(biāo)”圖層，使用矩形選擇工具，設(shè)置選擇方式為第二個圖標(biāo)“相加”，如圖所示，在每條新聞的前面創(chuàng)建小的正方形選區(qū)，設(shè)置前景色為橙色（R：212，G：71，B：17），按鍵填充前景色，結(jié)果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.6 信息中心欄目的設(shè)計,4.更多新聞的設(shè)計使用文本工

39、具輸入英文更多“MORE”，設(shè)置字體與大小，放置在信息中心欄目的右側(cè)。選擇“新聞圖標(biāo)圖層”，按照繪制信息中心圖標(biāo)的方法，繪制表示更多的圖標(biāo)，注意中間的三角形可以通過多邊形選區(qū)工具建立，結(jié)果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,1.圖標(biāo)與熱點鏈接標(biāo)題熱點鏈接的圖標(biāo)和信息中心的圖標(biāo)一樣，因此我們采取復(fù)制圖層的方法。按住

40、鼠標(biāo)左鍵將圖層面板中“信息中心圖標(biāo)”圖層拖動到創(chuàng)建新圖層按鈕上，從而復(fù)制得到“信息中心圖標(biāo)層副本”，改名為“熱點鏈接圖標(biāo)”，使用移動工具將該圖標(biāo)移動到如圖位置，可以借助鍵盤上的方向鍵實現(xiàn)位置的微調(diào)。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,1.圖標(biāo)與熱點鏈接標(biāo)題同樣復(fù)制信息中心 News文字層，使用移動工具將文本移動到熱點鏈接圖

41、標(biāo)后位置，使用文本工具選擇文字，改為“熱點鏈接 Hot”。我們這里使用復(fù)制得到文字的方法是為了省去文字屬性的設(shè)置，保證欄目文字的一致性。使用文本工具，設(shè)置文字大小與字體，輸入熱點鏈接下面的文字信息，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,2.熱點鏈接圖形使用圓角矩形工具，設(shè)置圓角半徑為8，創(chuàng)建圓角矩形路徑，使用路徑選

42、擇工具選擇路徑，單擊鼠標(biāo)右鍵創(chuàng)建選區(qū)，如圖所示。選擇菜單“編輯|描邊”命令，設(shè)置描邊顏色為淡灰（R：210，G：208，B：208），寬度為1像素，對選區(qū)描邊，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,2.熱點鏈接圖形單擊路徑面板，單擊面板中的工作路徑，如圖所示，從而在設(shè)計圖中顯示工作路徑，使用路徑選擇工具移動該路徑到

43、圓角矩形右側(cè)，同樣建立選區(qū)對路徑描邊。按照上面的方法得到3個圓角矩形。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,3.熱點鏈接圖標(biāo)選擇菜單“文件|打開”命令，打開配套光盤中“\源文件\6\素材\電腦.png”文件，使用移動工具把電腦圖片移動到效果圖上，新移進(jìn)的圖形會出現(xiàn)在自動生成的“圖層X”中。按對圖片自由變形，結(jié)果如圖所示，并改

44、變圖層的名稱為“電腦”。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,3.熱點鏈接圖標(biāo)在“電腦”圖層下創(chuàng)建“電腦陰影”圖層，使用橢圓選擇工具創(chuàng)建正圓形選區(qū)。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,3.熱點鏈接圖標(biāo)單擊工具欄

45、中的設(shè)置默認(rèn)的前景背景色圖標(biāo) ，設(shè)置“前景色/背景色”顏色為默認(rèn)的“黑色/白色”，使用漸變工具，設(shè)置填充方式為徑向，顏色為前景到透明，前景色不透明度為70%。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,3.熱點鏈接圖標(biāo)為選區(qū)填充漸變顏色，如圖所示。按對選區(qū)變形為橢圓形，按取消選區(qū)，結(jié)果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機

46、械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,4.熱點鏈接文字使用文本工具，設(shè)置英文字體為Arial，中文字體為漢儀中圓簡，顏色為深灰（R：80，G：80，B：80），安排好熱點鏈接的文字信息。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,5.熱點鏈接“GO”創(chuàng)建

47、“熱點go”圖層，使用圓角矩形工具，設(shè)置圓角半徑為10px，創(chuàng)建圓角矩形路徑，使用路徑選擇工具，單擊鼠標(biāo)右鍵創(chuàng)建選區(qū)，設(shè)置前景色為（R：188，G：248，B：255）背景色為（R：17，G：106，B：236），使用漸變工具，設(shè)置漸變方式為菱形，從中心向外拖動鼠標(biāo)，為選區(qū)填充從前景到背景的漸變顏色，使用文本工具，設(shè)置字體為Bitsumishi，大小為10，顏色為白色，設(shè)置字體與顏色，結(jié)果如圖所示。如果沒有對應(yīng)的字體，可以選擇適當(dāng)?shù)淖煮w

48、替換。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.7 熱點鏈接欄目的設(shè)計,5.熱點鏈接“GO”采用同樣的方法我們可以設(shè)計“交通路線”和“今日天氣”兩個熱點鏈接欄目。對于文字可以采用復(fù)制圖層的方法得到，然后修改文字即可；對于陰影的圖形也可以使用復(fù)制圖層的方法得到，然后改變大小即可?！敖煌肪€”欄目圓角矩形按鈕的顏色為深灰色（R：111，G：111，B：11

49、1），“今日天氣”圓角矩形按鈕的顏色為淺灰色（R：165，G：165，B：165）。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.8 認(rèn)證欄目的設(shè)計,1.認(rèn)證圖形區(qū)域的繪制按鍵，顯示標(biāo)尺，使用移動工具將鼠標(biāo)移動到標(biāo)尺上，按住鼠標(biāo)從水平標(biāo)尺上向下拖動出一條水平線，這條線在打印和出圖時是不顯示的，要想刪除輔助線，只需將輔助線移出窗口即可。創(chuàng)建新圖層，改名為“認(rèn)

50、證”，使用與創(chuàng)建熱點鏈接圖形同樣的方法，創(chuàng)建如圖圖形，參考水平輔助線，使兩個圖形分別位于輔助線的上下，這樣做的目的是為了后面切片的方便。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.8 認(rèn)證欄目的設(shè)計,2.認(rèn)證證書的導(dǎo)入選擇菜單“文件|打開”命令，打開配套光盤中“\源文件\6\素材\微軟標(biāo)志.png”和“ Adobe標(biāo)志.png”文件，使用移動工具將兩幅圖

51、片移動到效果圖窗口，按對圖片進(jìn)行變形，移動位置如圖所示，并為兩個圖片所在的圖層改名為“微軟”和“Adobe”。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.2.8 認(rèn)證欄目的設(shè)計,細(xì)節(jié)的補充最后，我們檢查網(wǎng)頁元素并進(jìn)行細(xì)節(jié)的補充，補充頂部的超級鏈接“Home Sitemap Contact US”，當(dāng)然可以使用中文，或增加英文版等內(nèi)容，得到首頁效果

52、圖如圖所示，然后選擇菜單“文件|存儲”命令保存文件。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3 內(nèi)頁效果圖設(shè)計,結(jié)合首頁效果圖的設(shè)計思路，在保證整體一致性的基礎(chǔ)上，進(jìn)行內(nèi)頁的設(shè)計，使內(nèi)頁與首頁相呼應(yīng)，形成統(tǒng)一的網(wǎng)站風(fēng)格。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.1 內(nèi)頁效果

53、圖設(shè)計的技術(shù)要求,內(nèi)頁的設(shè)計可以采用與首頁設(shè)計相同的方法，但要注意Banner設(shè)計的問題，可以將不同的欄目設(shè)計不同的Banner，但要注意Banner的尺寸的一致性。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.2 內(nèi)頁效果圖設(shè)計的藝術(shù)創(chuàng)意,內(nèi)頁的設(shè)計可以采用與首頁設(shè)計相同的方法，注意要保持一致性，包括導(dǎo)航的一致性、布局的一致性等。,動態(tài)網(wǎng)頁設(shè)計教程——美工

54、與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.3 內(nèi)頁主圖的設(shè)計制作,啟動Photoshop CS5，選擇菜單“文件|新建”，設(shè)置文件大小1000×590，分辨率72像素/英寸，色彩模式為RGB，背景顏色為白色，文件名稱為領(lǐng)跑者IT培訓(xùn)中心內(nèi)頁。按照前面設(shè)計首頁效果圖的方法，我們很容易能夠做到如圖的效果。對于一些在線服務(wù)、交通路線、今日天氣的鏈接，可以直接從首頁效果圖移動

55、復(fù)制過來。這個部分如果大家有問題，可以參考視頻教程的講解。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.4 內(nèi)頁左側(cè)導(dǎo)航的設(shè)計,1.左側(cè)導(dǎo)航背景選擇背景圖層，新建左側(cè)背景圖層，使用矩形選擇工具創(chuàng)建矩形選區(qū)，填充顏色（R：219，G：242，B：254），結(jié)果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com

56、,Company Logo,6.3.4 內(nèi)頁左側(cè)導(dǎo)航的設(shè)計,1.左側(cè)導(dǎo)航背景按顯示標(biāo)尺，將鼠標(biāo)移到邊緣拖動水平輔助線到如圖所示位置，作為左側(cè)欄目的上面界限，這樣做是為了切圖的方便，能夠?qū)⒅鲌D和欄目分開，并且將熱點鏈接圖形都放在主圖區(qū)域的切片上。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.4 內(nèi)頁左側(cè)導(dǎo)航的設(shè)計,1.左側(cè)導(dǎo)航背景在最上面的圖層上面創(chuàng)建“左

57、側(cè)欄目”圖層，使用圓角矩形工具創(chuàng)建圓角矩形路徑，切換到路徑面板單擊工作路徑，使用將路徑作為選區(qū)載入按鈕創(chuàng)建選區(qū)，為選區(qū)填充白色，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.4 內(nèi)頁左側(cè)導(dǎo)航的設(shè)計,2.欄目文字背景設(shè)計在“左側(cè)欄目”圖層上創(chuàng)建“欄目文字背景”圖層，使用矩形選擇工具創(chuàng)建矩形選區(qū)，設(shè)置前景色為（R：83，G：176，B：229），背景

58、色為（R：32，G：96，B：132），使用漸變工具從上向下填充從前景到背景的顏色漸變，結(jié)果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.4 內(nèi)頁左側(cè)導(dǎo)航的設(shè)計,2.欄目文字背景設(shè)計在“欄目文字背景”上新建“斜線”圖層，選擇菜單“文件|打開”命令，打開配套光盤中“\源文件\6\素材\斜線.png”文件，按放大圖片，選擇菜單“編輯|定義圖案”命令，

59、定義斜線圖案，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.4 內(nèi)頁左側(cè)導(dǎo)航的設(shè)計,2.欄目文字背景設(shè)計切換到效果圖文件的斜線圖層，確保在選定矩形選區(qū)的情況下，選擇菜單“編輯|填充”，使用“圖案”填充，自定圖案選定剛才定義的“斜線”，填充結(jié)果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Co

60、mpany Logo,6.3.4 內(nèi)頁左側(cè)導(dǎo)航的設(shè)計,2.欄目文字背景設(shè)計我們發(fā)現(xiàn)填充的顏色很深，選擇圖層不透明度選項，設(shè)置圖層不透明度為20%左右，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.4 內(nèi)頁左側(cè)導(dǎo)航的設(shè)計,2.欄目文字背景設(shè)計拖動兩條垂直的輔助線到上面矩形的兩側(cè)，使用矩形創(chuàng)建矩形選區(qū)，填充灰色（R：221，G：221，B：221）

61、。使用矩形工具創(chuàng)建矩形選區(qū)，在對四行灰色文字背景做小圖標(biāo)式的描邊，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.4 內(nèi)頁左側(cè)導(dǎo)航的設(shè)計,3.導(dǎo)航文字設(shè)計使用文本工具輸入文字，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.4 內(nèi)頁左側(cè)導(dǎo)航的設(shè)計,4.聯(lián)系電話設(shè)

62、計創(chuàng)建電話背景圖層，使用圓角矩形工具創(chuàng)建圓角矩形，創(chuàng)建選區(qū)，進(jìn)行白色描邊。導(dǎo)入電話圖形，使用文本工具輸入聯(lián)系電話，并復(fù)制電腦陰影得到電話陰影效果結(jié)果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.5 內(nèi)頁右側(cè)內(nèi)容的設(shè)計,1.右側(cè)欄目線和圖標(biāo)新建“子欄目線”圖層，使用矩形選擇工具建立長矩形選區(qū)，填充灰色（R：208，G：208，B：208），得到灰

63、色的欄目線。接下來設(shè)計子欄目前的圖標(biāo)，同樣使用矩形工具建立矩形選區(qū)，上面矩形填充藍(lán)灰色（R：36，G：103，B：139），下面舉行填充灰色（R：208，G：208，B：208），得到如圖子欄目線，結(jié)果如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.5 內(nèi)頁右側(cè)內(nèi)容的設(shè)計,2.欄目名稱和位置信息使用文本工具在欄目圖標(biāo)后輸入子欄目信息“圖形設(shè)計類”，

64、顏色為藍(lán)灰（R：36，G：103，B：139），在右側(cè)輸入位置信息：“您的位置：首頁/培訓(xùn)課程/圖形設(shè)計類”，顏色為灰色（R：101，G：101，B：101）。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.5 內(nèi)頁右側(cè)內(nèi)容的設(shè)計,3.右側(cè)欄目內(nèi)容的設(shè)計新建“右側(cè)背景”圖層，使用直線工具從上向下建立垂直的直線路徑，如圖所示。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),

65、機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.5 內(nèi)頁右側(cè)內(nèi)容的設(shè)計,3.右側(cè)欄目內(nèi)容的設(shè)計使用文本工具，將鼠標(biāo)移動到路徑的頂部，當(dāng)鼠標(biāo)指針變成如圖所示形狀時單擊鼠標(biāo)，輸入文字“---------”（多個減號），如圖所示。然后全選輸入的文字，在字符面板中設(shè)置文字的大小和間距，如果文字不夠或超過直線可以增減字符得到最終結(jié)果。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.theme

66、gallery.com,Company Logo,6.3.5 內(nèi)頁右側(cè)內(nèi)容的設(shè)計,3.右側(cè)欄目內(nèi)容的設(shè)計然后選擇菜單“圖層|柵格化|文字”，將該層文字轉(zhuǎn)化為位圖，如圖所示，否則在后面使用Fireworks軟件進(jìn)行圖像切片時將不能顯示該文字。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.5 內(nèi)頁右側(cè)內(nèi)容的設(shè)計,3.右側(cè)欄目內(nèi)容的設(shè)計設(shè)置前景色為藍(lán)色（R：1

67、44，G：190，B：231），使用圓角矩形工具，設(shè)置圓角半徑為2px，方式為填充像素，創(chuàng)建圓角矩形區(qū)域，同樣設(shè)置前景色為淡紅（R：255，G：154，B：159），繪制第2個圓角矩形。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,www.themegallery.com,Company Logo,6.3.5 內(nèi)頁右側(cè)內(nèi)容的設(shè)計,3.右側(cè)欄目內(nèi)容的設(shè)計使用文本工具輸入文字信息。,動態(tài)網(wǎng)頁設(shè)計教程——美工與技術(shù),機械工業(yè)出版社,ww

68、w.themegallery.com,Company Logo,6.3.5 內(nèi)頁右側(cè)內(nèi)容的設(shè)計,3.右側(cè)欄目內(nèi)容的設(shè)計選擇菜單“文件|打開”命令，打開配套光盤中“\源文件\6\素材\平面廣告大師.png”和“平面廣告大師.png”文件，使用移動工具移動到效果圖中，并使用文本工具輸入“MORE”，結(jié)果如圖所示。最后選擇菜單“文件|存儲”命令，保存效果圖文件，文件名為“領(lǐng)跑者IT培訓(xùn)中心內(nèi)頁”，以備后面進(jìn)行圖像切片的制作。,動態(tài)網(wǎng)頁設(shè)計