Photoshop做一個網(wǎng)頁

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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