資源描述：
《用photoshop做網(wǎng)頁》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在學術論文-天天文庫。
1、實訓項目二Photoshop制作網(wǎng)站首頁 第1講制作首頁的主體部分 課程總覽 在本課程中，朋友們將學習到以下內(nèi)容： ??如何通過PhotoshopCS3進行網(wǎng)站首頁的版面設計 ??各種網(wǎng)頁版面元素的設計技巧和方法 ??如何進行網(wǎng)頁的切圖以及切片的屬性設置 ??如何創(chuàng)建與Flash整合的FLV視頻 ??在DreamweaverCS3中使用“Spry選項卡”構件 ??Photoshop、Flash、Dreamweaver的協(xié)同工作 第1講制作首頁的主體部分 本文以“石橋花園”的網(wǎng)站首頁為例，來演示頁面創(chuàng)作
2、的整個過程。其實“石橋花園”是不存在的，筆者虛構出來也并非只為完成本例，我一直向往生活在幽靜、閑雅之所，雖然“石橋花園”離我的初衷有很多差異，但也多少能表達我的一些想法吧?！ 鴼w正傳，早先的網(wǎng)頁頁面設計一般是以Dreamweaver為中心，由Photoshop或Flash等軟件來提供各種素材，如圖片、動畫、文字等。自從Photoshop出現(xiàn)了“切圖”等專為網(wǎng)頁設計所定制的功能后，設計的中心已慢慢轉向了Photoshop。因為Photoshop本身以圖像為基礎的特性，決定了他能對版面施以更精確的控制，使網(wǎng)頁的頁面能夠更加靈
3、活和生動的布局，這幾乎完全解放了網(wǎng)頁設計師的創(chuàng)作靈感，不再受方方正正的網(wǎng)頁表格所約束。現(xiàn)在我們要制作的是“石橋花園”首頁的主體部分，主體部分包括標題、主展示圖片和導航條。網(wǎng)頁教學網(wǎng) 1.打開PhotoshopCS3,執(zhí)行菜單“文件>新建”。在新建對話框中設置名稱為“石橋花園”，寬度為“777”、高度為“800”，這個數(shù)字并不“官方”，只是我在平時工作當中測試出來的而已。對于網(wǎng)頁來說，一般只用于屏幕顯示，所以分辨率為“72”、顏色模式為“RGB顏色”，其它參數(shù)保持默認?！ ?.按下Ctrl+A全選頁面，執(zhí)行菜單“編輯>填充
4、”將頁面填為純黑色。在工具箱中選擇矢量的“矩形工具”，繪制一個如圖1-1-1所示長方形A。然后使用白色的“直接選擇工具”將該矢量形狀扭曲成如圖1-1-1中B所示外觀，該形狀的十六進制顏色值為“#246b34”，一種厚重的深綠色。 3.使用橫排文字工具，輸入“石橋花園”字樣，字體為“方正流行體簡體”。再輸入“ShiQiaoGarden”，字體為“BickhamScriptPro”，字號均為“30點”，文字如圖1-1-2所示布局。圖1-1-2 4.這是一張拍攝自龍亭的花卉原始素材，采用了微距加上2.8的大光圈，實現(xiàn)了淺景深的
5、背景模糊效果，讀者可以使用模糊工具或鏡頭模糊濾鏡實現(xiàn)類似的效果，如圖1-1-3所示。圖1-1-3 5.我們對圖片進行簡單的處理，執(zhí)行菜單“圖像>調(diào)整>色階”，從兩側向中間調(diào)整黑色和白色滑塊的位置以使圖片主體更加突出，更富有感染力。原素材本身是16:9寬屏的，我們使用選區(qū)工具加刪除鍵進行適當?shù)牟们?，如圖1-1-4所示。圖1-1-4 5.為了增加花卉的現(xiàn)代感和時尚感，我們進一步對圖片進行加工，隨意找一張圖片，執(zhí)行菜單“濾鏡>像素化>馬賽克”，數(shù)值調(diào)大，產(chǎn)生大色塊的馬賽克效果。然后通過素材或自己制作一張扭曲后的網(wǎng)格，這些都是
6、待合成的素材，如圖1-1-5所示。圖1-1-5 6.現(xiàn)在有網(wǎng)格、花卉和馬賽克三層圖片，網(wǎng)格放在最上層，將圖層的混合模式設為“顏色加深”，不透明度設為“68%”?；ɑ軐拥幕旌夏Ｊ皆O為“強光”，馬賽克圖層不變，三者的合成效果如圖1-1-6所示。圖1-1-6 7.下面要制作的是首頁的導航條部分，使用矢量的“矩形工具”繪制一個長方形，注意該長方形不要畫滿，留一些黑邊在周圍，黑邊上窄下粗，使其具有一定的層次感。十六進制顏色值為“#c8fcc5”，一種清淡的綠色，如圖1-1-7所示。網(wǎng)頁教學網(wǎng)第二因為相對于主體來說，內(nèi)容部分并不是
7、很容易出彩，所以其設計比主體更加需要清晰的思路，并非常考驗制作者的耐心。通常情況下內(nèi)容部分的主要工作都是在Dreamweaver中，所以這里我們在Photoshop中所設計的只是一個供參照的外觀。 1.在頁面的右側用矢量“矩形工具”繪制一個淡綠色的背景填充，該綠色的十六進制值為“#eefded”，幾乎接近于白色，這是為了突出前景深綠色的文字。這里的文字內(nèi)容都是虛構的，其十六進制顏色值為“#054d00”，布局的位置如圖1-2-1所示。圖1-2-1 2.在文字的下面是播放在線視頻的地方，我們這里插入一些圖片進行占位。圖片
8、推薦在AdobeStockPhotosCS3中進行查找，這是Adobe提供的一個龐大的圖片素材庫，包含在AdobeBridgeCS3中，低質(zhì)量的圖片小樣是完全免費的。因為網(wǎng)頁需較高的下載速度，因此低質(zhì)量的照片反而更適合于網(wǎng)頁設計師。需要注意的是，該搜索功能暫時還不支持中文，所以這里我們搜索“bridge
