用photoshop做網(wǎng)頁

《用photoshop做網(wǎng)頁》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。

1、實訓(xùn)項目二Photoshop制作網(wǎng)站首頁　　第1講制作首頁的主體部分　　課程總覽　　在本課程中，朋友們將學(xué)習(xí)到以下內(nèi)容：　　??如何通過PhotoshopCS3進行網(wǎng)站首頁的版面設(shè)計　　??各種網(wǎng)頁版面元素的設(shè)計技巧和方法　　??如何進行網(wǎng)頁的切圖以及切片的屬性設(shè)置　　??如何創(chuàng)建與Flash整合的FLV視頻　　??在DreamweaverCS3中使用“Spry選項卡”構(gòu)件　　??Photoshop、Flash、Dreamweaver的協(xié)同工作　　第1講制作首頁的主體部分　　本文以“石橋花園”的網(wǎng)站首頁為例，來演示頁面創(chuàng)作

2、的整個過程。其實“石橋花園”是不存在的，筆者虛構(gòu)出來也并非只為完成本例，我一直向往生活在幽靜、閑雅之所，雖然“石橋花園”離我的初衷有很多差異，但也多少能表達我的一些想法吧?！　鴼w正傳，早先的網(wǎng)頁頁面設(shè)計一般是以Dreamweaver為中心，由Photoshop或Flash等軟件來提供各種素材，如圖片、動畫、文字等。自從Photoshop出現(xiàn)了“切圖”等專為網(wǎng)頁設(shè)計所定制的功能后，設(shè)計的中心已慢慢轉(zhuǎn)向了Photoshop。因為Photoshop本身以圖像為基礎(chǔ)的特性，決定了他能對版面施以更精確的控制，使網(wǎng)頁的頁面能夠更加靈

3、活和生動的布局，這幾乎完全解放了網(wǎng)頁設(shè)計師的創(chuàng)作靈感，不再受方方正正的網(wǎng)頁表格所約束。現(xiàn)在我們要制作的是“石橋花園”首頁的主體部分，主體部分包括標題、主展示圖片和導(dǎo)航條。網(wǎng)頁教學(xué)網(wǎng)　　1.打開PhotoshopCS3,執(zhí)行菜單“文件>新建”。在新建對話框中設(shè)置名稱為“石橋花園”，寬度為“777”、高度為“800”，這個數(shù)字并不“官方”，只是我在平時工作當中測試出來的而已。對于網(wǎng)頁來說，一般只用于屏幕顯示，所以分辨率為“72”、顏色模式為“RGB顏色”，其它參數(shù)保持默認?！　?.按下Ctrl+A全選頁面，執(zhí)行菜單“編輯>填充

4、”將頁面填為純黑色。在工具箱中選擇矢量的“矩形工具”，繪制一個如圖1-1-1所示長方形A。然后使用白色的“直接選擇工具”將該矢量形狀扭曲成如圖1-1-1中B所示外觀，該形狀的十六進制顏色值為“#246b34”，一種厚重的深綠色?！?.使用橫排文字工具，輸入“石橋花園”字樣，字體為“方正流行體簡體”。再輸入“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)整>色階”，從兩側(cè)向中間調(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)格放在最上層，將圖層的混合模式設(shè)為“顏色加深”，不透明度設(shè)為“68%”?；ɑ軐拥幕旌夏Ｊ皆O(shè)為“強光”，馬賽克圖層不變，三者的合成效果如圖1-1-6所示。圖1-1-6　　7.下面要制作的是首頁的導(dǎo)航條部分，使用矢量的“矩形工具”繪制一個長方形，注意該長方形不要畫滿，留一些黑邊在周圍，黑邊上窄下粗，使其具有一定的層次感。十六進制顏色值為“#c8fcc5”，一種清淡的綠色，如圖1-1-7所示。網(wǎng)頁教學(xué)網(wǎng)第二因為相對于主體來說，內(nèi)容部分并不是

7、很容易出彩，所以其設(shè)計比主體更加需要清晰的思路，并非?？简炛谱髡叩哪托?。通常情況下內(nèi)容部分的主要工作都是在Dreamweaver中，所以這里我們在Photoshop中所設(shè)計的只是一個供參照的外觀?！　?.在頁面的右側(cè)用矢量“矩形工具”繪制一個淡綠色的背景填充，該綠色的十六進制值為“#eefded”，幾乎接近于白色，這是為了突出前景深綠色的文字。這里的文字內(nèi)容都是虛構(gòu)的，其十六進制顏色值為“#054d00”，布局的位置如圖1-2-1所示。圖1-2-1　　2.在文字的下面是播放在線視頻的地方，我們這里插入一些圖片進行占位。圖片

8、推薦在AdobeStockPhotosCS3中進行查找，這是Adobe提供的一個龐大的圖片素材庫，包含在AdobeBridgeCS3中，低質(zhì)量的圖片小樣是完全免費的。因為網(wǎng)頁需較高的下載速度，因此低質(zhì)量的照片反而更適合于網(wǎng)頁設(shè)計師。需要注意的是，該搜索功能暫時還不支持中文，所以這里我們搜索“bridge