Photoshop做一個網頁

1、實訓項目二 photoshop制作網站首頁第1講 制作首頁的主體部分 課程總覽 在本課程中，朋友們將學習到以下內容： 如何通過photoshop cs3 進行網站首頁的版面設計 各種網頁版面元素的設計技巧和方法 如何進行網頁的切圖以及切片的屬性設置 如何創(chuàng)建與flash 整合的flv 視頻 在dreamweaver cs3 中使用“spry 選項卡”構件 photoshop、flash、dreamweaver 的協(xié)同工作 第1 講 制作首頁的主體部分 本文以“石橋花園”的網站首頁為例，來演示頁面創(chuàng)作的整個過程。其實“石橋花園”是不存在的，筆者虛構出來也并非只為完成本例，我一直向往生活在幽靜、閑

2、雅之所，雖然“石橋花園”離我的初衷有很多差異，但也多少能表達我的一些想法吧。 書歸正傳，早先的網頁頁面設計一般是以dreamweaver 為中心，由photoshop 或flash 等軟件來提供各種素材，如圖片、動畫、文字等。自從photoshop 出現(xiàn)了“切圖”等專為網頁設計所定制的功能后，設計的中心已慢慢轉向了photoshop。因為photoshop 本身以圖像為基礎的特性，決定了他能對版面施以更精確的控制，使網頁的頁面能夠更加靈活和生動的布局，這幾乎完全解放了網頁設計師的創(chuàng)作靈感，不再受方方正正的網頁表格所約束。現(xiàn)在我們要制作的是“石橋花園”首頁的主體部分，主體部分包括標題、主展示圖片

3、和導航條。 網頁教學網 1. 打開photoshop cs3, 執(zhí)行菜單“文件 新建”。在新建對話框中設置名稱為“石橋花園”，寬度為“777”、高度為“800”，這個數(shù)字并不“官方”，只是我在平時工作當中測試出來的而已。對于網頁來說，一般只用于屏幕顯示，所以分辨率為“72”、顏色模式為“rgb 顏色”，其它參數(shù)保持默認。 2. 按下ctrl+a 全選頁面，執(zhí)行菜單“編輯 填充”將頁面填為純黑色。在工具箱中選擇矢量的“矩形工具”，繪制一個如圖1-1-1 所示長方形a。然后使用白色的“直接選擇工具”將該矢量形狀扭曲成如圖1-1-1 中b 所示外觀，該形狀的十六進制顏色值為“#246b34”，一種厚

4、重的深綠色。 3. 使用橫排文字工具，輸入“石橋花園”字樣，字體為“方正流行體簡體”。再輸入“shiqiaogarden”，字體為“bickham script pro”，字號均為“30 點”，文字如圖1-1-2 所示布局。 圖1-1-24. 這是一張拍攝自龍亭的花卉原始素材，采用了微距加上2.8 的大光圈，實現(xiàn)了淺景深的背景模糊效果，讀者可以使用模糊工具或鏡頭模糊濾鏡實現(xiàn)類似的效果，如圖1-1-3 所示。 圖1-1-3 5. 我們對圖片進行簡單的處理，執(zhí)行菜單“圖像 調整 色階”，從兩側向中間調整黑色和白色滑塊的位置以使圖片主體更加突出，更富有感染力。原素材本身是16:9 寬屏的，我們使用選

5、區(qū)工具加刪除鍵進行適當?shù)牟们?，如圖1-1-4 所示。 圖1-1-4 5. 為了增加花卉的現(xiàn)代感和時尚感，我們進一步對圖片進行加工，隨意找一張圖片，執(zhí)行菜單“濾鏡 像素化 馬賽克”，數(shù)值調大，產生大色塊的馬賽克效果。然后通過素材或自己制作一張扭曲后的網格，這些都是待合成的素材，如圖1-1-5 所示。 圖1-1-56. 現(xiàn)在有網格、花卉和馬賽克三層圖片，網格放在最上層，將圖層的混合模式設為“顏色加深”，不透明度設為“68%”。花卉層的混合模式設為“強光”，馬賽克圖層不變，三者的合成效果如圖1-1-6所示。 圖1-1-6 7. 下面要制作的是首頁的導航條部分，使用矢量的“矩形工具”繪制一個長方形，注

6、意該長方形不要畫滿，留一些黑邊在周圍，黑邊上窄下粗，使其具有一定的層次感。十六進制顏色值為“#c8fcc5”，一種清淡的綠色，如圖1-1-7 所示。 網頁教學網 第二因為相對于主體來說，內容部分并不是很容易出彩，所以其設計比主體更加需要清晰的思路，并非常考驗制作者的耐心。通常情況下內容部分的主要工作都是在dreamweaver 中，所以這里我們在photoshop 中所設計的只是一個供參照的外觀。1. 在頁面的右側用矢量“矩形工具”繪制一個淡綠色的背景填充，該綠色的十六進制值為“#eefded”，幾乎接近于白色，這是為了突出前景深綠色的文字。這里的文字內容都是虛構的，其十六進制顏色值為“#05

7、4d00”，布局的位置如圖1-2-1 所示。圖1-2-12. 在文字的下面是播放在線視頻的地方，我們這里插入一些圖片進行占位。圖片推薦在adobe stock photos cs3 中進行查找，這是adobe 提供的一個龐大的圖片素材庫，包含在adobe bridge cs3中，低質量的圖片小樣是完全免費的。因為網頁需較高的下載速度，因此低質量的照片反而更適合于網頁設計師。需要注意的是，該搜索功能暫時還不支持中文，所以這里我們搜索“bridge”來下載一些關于橋的照片，如圖1-2-2 所示。圖1-2-23. 我們用多張“橋”和“花園”的圖片合成了這部分的圖像內容，這里使用的石橋剪影字體為“方正

8、古隸簡體”，合成的方法因為非常簡單，這里就不再贅述，如圖1-2-3 所示。圖1-2-34. 在下面繪制深灰色矩形，十六進制顏色值為“#2a2a2a”。輸入文字“shiqiao garden”，字體為“trajan pro”，這些均是作為中間的隔斷和裝飾，如圖1-2-4 所示。圖1-2-45. 在隔斷下面再繪制一個較淺的灰色矩形，十六進制值為“#7a7a7a”。在該矩形上面再并排繪制兩個顏色更淺的灰色矩形，十六進制值為“#efefef”。這些矩形的繪制主要是用來布局，頻繁的使用灰色有兩個原因，一是因為灰色通常在設計中表示高級，另外，網頁的主體過于鮮艷，使用灰色可以平衡一下，以避免“搶了主角兒的戲

9、”，如圖1-2-5 所示。圖1-2-56. 在adobe stock photos cs3 中搜索茶壺和棋子的圖片，均在photoshop 中處理為90 x 90 像素的大小。在茶壺層上右擊，選擇“混合選項”，設置“描邊”的參數(shù)為大小“6”像素，位置為“內部”，“內部”描邊可以保證四個角均為直角，描邊的十六進制顏色值為“#067f18”，如圖1-2-6 所示。圖1-2-67. 在茶壺層單擊右鍵，選擇“拷貝圖層樣式”，如圖1-2-7 所示。接下來再選擇棋子層, 單擊右鍵選擇“粘貼圖層樣式”，這樣做可以保證兩者的圖層樣式完全相同，并且更加快捷方便。圖1-2-78. 在添加文字“石橋茶舍”和“石橋棋

10、坊”，字體為“方正古隸簡體”，顏色值為“#646464”。介紹文字為“宋體”，大小“12 點”，消除鋸齒的方法為“無”，這樣設置可以保證非常清晰的小字，這類的清晰小字普便應用于網頁設計中，如圖1-2-8 所示。圖1-2-89. 在頁面的左側位置，是用來放“spry 選項卡式面板”的，這里我同樣是做了一個外觀占位，具體的操作會在后面的教程中詳述，如圖1-2-9 所示。圖1-2-910. 在頁面的最下放，我們繪制一個深灰色的矩形，起圖層名為“灰色長條”，十六進制顏色值為“#2a2a2a”，上面輸入版權信息、地址、管理員和聯(lián)系人的姓名，聯(lián)系人是我剛出生的女兒，估計你聯(lián)系她，她也不會理你，哈哈，如圖1

11、-2-10 所示。圖1-2-1011. 在我們?yōu)檫@個矩形描個邊兒，同樣是右鍵選擇“混合選項”，在描邊中設置大小為“3”像素，位置同樣的內部，顏色為較淺的灰色，十六進制顏色值為“#7a7a7a”，如圖1-2-11 所示。圖1-2-11第三切圖是網頁設計中非常重要的一環(huán)，它可以很方便的為我們標明哪些是圖片區(qū)域，哪些是文本區(qū)域。另外，合理的切圖還有利于加快網頁的下載速度、設計復雜造型的網頁以及對不同特點的圖片進行分格式壓縮等優(yōu)點。 1. 使用工具箱中的“切片工具”在標題部分的左右各切一刀，使用“切片選擇工具”雙擊右側部分，在彈出的面板中設置切片類型為無圖像。因為該部分是純色，為了在網頁中顯示效果相同

12、，設切片背景為黑色，這樣該部分輸出成網頁后將由透明占位符和黑色背景色代替，如圖 所示。 圖 2. 使用切片的固定大小，設置寬度為“68”，高度為“40”，這次是切割的導航條按鈕，將切片和被切對象對齊，切的時候要小心，避免切片之間重疊，如圖1-3-2 所示。 3. 使用同樣的方法將其它導航條按鈕切割，注意最后一個“管委會”按鈕是三個字，因此設置的切片寬度要大，如圖1-3-3 所示。需要注意的是，切割的時候要注意平衡，比如右側切割了，那么左側也要等高的切一刀，這樣輸出成網頁的時候不容易亂。 圖1-3-3 4. 切割方法同上，注意切片左上角的編號。下一行切片14 和15 共兩刀，再往下16、17、1

13、8 共三刀，其中17 為純色，因此設為無圖像，并用相應的顏色標識，如圖1-3-4 所示。后面的方法基本相同，需要把在dreamweaver 中處理的純色背景部分設為無圖像，并以相應的切片背景色填充。如果某個圖層的范圍正好是要切割的大小，可以直接使用“基于圖層的切片”功能。 圖1-3-4 5. 執(zhí)行菜單“存儲為web 和設備所用格式”，該命令用于將psd 源文件輸出成網頁或是手機等設備所使用的格式。在對話框中進行簡單的優(yōu)化設置，確定后設置輸出類型為“html 和圖像”，并且要輸出所有的切片，如圖1-3-5 所示。 圖1-3-5 舉一反三： 嘗試使用切圖工具對已有的版面進行切割，并注意切割的技巧。

14、第四導航菜單在首頁中占有非常重要的地位，它用于引領訪問者找到需要的頁面。所以一般來說，網頁設計師通常將大量的精力用在導航菜單的設計上，而這里我們只是舉個簡單的例子來說明。 1. 用dreamweaver 打開網頁，當鼠標單擊后，您可以看到導航欄已經完成的切片，我們現(xiàn)在要制作的是鼠標移上時的翻轉效果，如圖1-4-1 所示。 圖1-4-1 2. 找到您存儲切片圖像的目錄，一般是網頁當前目錄或是名為“images”的目錄。復制一個“娛樂”切片，并用photoshop 打開，如圖1-4-2 所示。 圖1-4-23. 用“移動工具”選中括號，分別向左或向右移動，使括號離文字的距離變大。這樣的操作可實現(xiàn)鼠

15、標移到按鈕上時，括號自動左右撐開的效果，如圖1-4-3 所示。 圖1-4-3 4. 打開dreamweaver，在我們設計的導航欄上選擇“娛樂”切片并刪除，執(zhí)行插入“鼠標經過圖像”命令，如圖1-4-4 所示。 圖1-4-4 5. 在該對話框中設置原始圖像為原來的“娛樂”切片圖像，而鼠標經過圖像為復制并修改括號后的“娛樂”切片圖像，當然您也可以加入自己的鏈接，如圖1-4-5 所示。 圖1-4-5第五接下來我們要為網頁添加flash 視頻內容，如今的photoshop 和flash 已成為一家，因此兼容性大大提高。flash 已經可以直接導入photoshop psd 的分層文件了，這對長期受不同

16、廠商兼容性困擾的設計師來說無疑是個好消息。 1. 將我們制作的photoshop 網頁的psd 源文件另存一個版本，然后將原來flash 的占位圖片的區(qū)域裁切出來，并把多余的圖層刪除，如圖1-5-1 所示。 圖1-5-1 2. 直接導入這個另存后的新psd 文件，我們可以在導入對話框中看到，不但可以確定需要導入哪些圖層，還可以使文字可編輯，并將flash 舞臺設為該psd 在photoshop 中的畫布大小等等，有非常多的選項值得我們去探索，如圖1-5-2 所示。 圖1-5-2 3. 這是在flash 中打開后的photoshop 分層文件，你可以看到，原來的圖層直接變成了相應的flash 層

17、，我們可以直接基于這些圖層來制作動畫，是不是非常方便？如圖1-5-3 所示。 圖1-5-3 4. 在接下來就是視頻的導入，flash 提供了專門的視頻導入命令，并優(yōu)化了整個的視頻導入流程，如圖1-5-4 所示為視頻導入的基本流程。通常情況下都是“傻瓜式操作”，選擇文件后一直單擊下一步即可，分別是選擇視頻、部署、編碼和選擇皮膚，因為在本教程中這不是重點，因此不再贅述。 圖1-5-45. 選擇后的播放器皮膚，也就是視頻播放器的外觀是可以在組件檢查器中重新更換的，包括顏色和外形等，如圖1-5-5 所示。 圖1-5-5 6. 視頻文件和flash 的播放互不影響，可以自然、無縫的整合到一起。為了說明這

18、一點，這里為“石橋剪影”這四個字制作了一個非常簡單的動畫，如圖1-5-6 所示。 圖1-5-6 7. 打開dreamweaver 并添加一個表格，設置表格行數(shù)為“2”，列數(shù)為“2”，表格寬度為百分比形式，也就是說可以自行伸縮。邊框粗細、單元格邊距和單元格間距均為“0”，如圖1-5-7 所示。 圖1-5-7 8. 把文字和flash 分別插入到剛才表格的兩行中，可以看到，當前的網頁還有點兒亂，圖片被撐開，文字沒有樣式化，視頻的位置也不對，如圖1-5-8 所示，因此我們還需要在下一講中設置。 第六現(xiàn)在我們進行了網頁設計的最后環(huán)節(jié)，需要對頁面進行真正的排版。使用到css 以及其它的一些常用技巧。在c

19、s3 版本中photoshop 和dreamweaver 的結合也更加緊密了。spry 構件作為dreamweaver cs3 全新的理念，給用戶帶來耳目一新的視覺體驗。在該部分當中，我們就涉及到這些方面的知識。 1. 打開photoshop，直接拷貝一部分圖片，如框選“石橋茶舍”區(qū)域并拷貝。當然因為是多層，你需要使用合并拷貝功能，如圖1-6-1 所示。 圖1-6-1 2. 切換到dreamweaver 中，我們只需要簡單的ctrl+v 粘貼，你會看到出現(xiàn)了圖像預覽對話框，您可以直接在這里設置圖片的壓縮值和格式等，如圖1-6-2 所示。 圖1-6-2 3. 用同樣的方法把“石橋茶舍”和“石橋棋

20、坊”兩張圖片都直接拷貝到dreamweaver 中，當然dreamweaver 會提示您存儲這些圖像文件。完成后，我們再把文字拷貝到dreamweaver 中, 不過如今的文字看起來會比較亂，這是沒有用css 樣式化的緣故，如圖1-6-3 所示。 圖1-6-34. 打開css 樣式面板，為標簽“body,td,th”新建一個css 規(guī)則，選擇“僅對該文檔”，這個css是針對當前頁面全局的，如圖1-6-4 所示。 圖1-6-4 5. 在類型中，設置字體為“宋體”，大小為“9pt”，行高為“16px”，顏色為綠色，修飾為“無”，如圖1-6-5 所示。 圖1-6-5 6. 接下來設置圖片的文字環(huán)繞效果，使文字都圍繞在圖片的右側，也就是文字左對齊。選擇“石橋茶舍”的圖片，為其添加一個css 規(guī)則，如圖1-6-6 所示。 圖1-6-67. 選擇方框標簽頁，將浮動設置為“左對齊”，即實現(xiàn)的文字對圖片的環(huán)繞，如圖1-6-7 所示。其它頁面元素的css 設置方法類似，比如關于“石橋花園”的介紹文字，因文字