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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

33、themegallery.com,Company Logo,6.2.5 網(wǎng)頁版權區(qū)域的設計,1.漸變色的填充選擇漸變工具，設置顏色從左至右依次為（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)頁設計教程——美工與技術,機械工業(yè)出版社,www.themegaller

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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