隨著(zhù)信息技術(shù)的發(fā)展, 網(wǎng)頁(yè)制作成為時(shí)下互聯(lián)網(wǎng)平臺中人與人交流不可或缺的寵兒, 但是要完成網(wǎng)頁(yè)設計作品就少不了其他軟件的支持, 如Flash動(dòng)畫(huà)制作, Fireworks圖像處理, Photoshop圖片制作及處理等。如何結合Photoshop來(lái)設計出有自己風(fēng)格的頁(yè)面是本文所要研究的課題。
一、Photoshop和Dreamweaver的簡(jiǎn)單介紹
1.Photoshop的簡(jiǎn)介
Photoshop是一款由美國發(fā)布的用來(lái)處理圖像、圖形的軟件, 簡(jiǎn)稱(chēng)PS。它不僅可以處理出你所需要的圖片, 還可以根據自己的要求動(dòng)手繪畫(huà)出自己喜歡的圖像、圖形, 比如畫(huà)筆工具、鋼筆工具以及圖形工具, 用鼠標單擊選中, 在自己新建的畫(huà)布上描繪出你喜歡的圖像, 然后選擇相配的顏色, 注意色彩要均衡, 單擊“油漆桶工具”或選擇菜單欄中“編輯|填充”命令即可, 這樣, 簡(jiǎn)單的一幅畫(huà)作就完成了, 最后你可以根據自己對圖像的需要進(jìn)行圖層樣式的選擇, 單擊菜單欄中“圖層|圖層樣式”命令選擇需要的選項就可以了。
2.Dreamweaver的簡(jiǎn)介
Dreamweaver簡(jiǎn)稱(chēng)Dw, 是一款集網(wǎng)頁(yè)制作和網(wǎng)站管理于一身的網(wǎng)頁(yè)編輯器, 也是人與人之間一種視覺(jué)的交流方式。一份精美的網(wǎng)頁(yè)中包含的元素眾多, 包括圖像、圖形、文字、動(dòng)畫(huà)等, 將這些元素進(jìn)行規范的排版與合理的布局, 就需要用Dw中的CSS樣式、表格制作等眾多功能來(lái)輔助完成。需要提及的是Dw中的編輯基本上都是靠代碼來(lái)完成的。
二、Dw中網(wǎng)頁(yè)布局和實(shí)例制作
1.Dw中的頁(yè)面布局原則
(1) 色彩要搭配恰當, 網(wǎng)頁(yè)在顏色搭配上要遵從以下幾點(diǎn):渲染主題深色調, 突出氛圍淺色調, 簡(jiǎn)約大方白色調, 對比鮮明黑色調, 端莊奢華紫色調, 浪漫婉約粉色調。
(2) 元素要相得益彰, 有些網(wǎng)站頁(yè)面元素很多, 尤以圖片文字為首。文字過(guò)多會(huì )讓人覺(jué)得乏味無(wú)趣, 圖片過(guò)多又會(huì )覺(jué)得低俗, 為了防止視覺(jué)疲累, 應該將圖片和文字適當搭配。
(3) 圖片要處理合理, 在頁(yè)面布局中很多圖片都不符合要求, 有些色彩過(guò)于鮮艷, 有些像素過(guò)低模糊不清, 有些只需要一部分圖片。針對這些問(wèn)題, 我們都可以用PS輕松處理。
2.實(shí)例制作
(1) 打開(kāi)Dw軟件, 選擇新建欄目下的“HTML”模板, 進(jìn)入后選擇“管理站點(diǎn)|站點(diǎn)|新建站點(diǎn)”, 名稱(chēng)為“夢(mèng)回唐朝”且保存在“E:/myweb”的根文件夾下。注意文件命名時(shí)要采用字母或數字, 以便各網(wǎng)頁(yè)之間進(jìn)行有效的鏈接。
(2) 處理需要的圖片和文字存入“myweb/images”文件夾中, 圖片處理使用PS軟件, 主要處理圖片的大小、色彩及像素值。比如網(wǎng)頁(yè)的logo圖片、導航條、錨點(diǎn)圖標、分割圖形等都可根據需要處理。在這里先介紹該網(wǎng)站主頁(yè)的logo圖片的制作合成, 首先打開(kāi)PS軟件, 新建立一個(gè)30×25cm的畫(huà)布, 然后分別打開(kāi)一幅扇子圖片和一幅背景圖片, 可單擊工具欄中的“快速選擇工具”將扇面摳下;處理背景圖很簡(jiǎn)單, 只需要用裁剪工具裁出中間的部分。最后返回新建的畫(huà)布, 將扇面和背景圖分別放入兩個(gè)圖層中, 再處理文字“夢(mèng)回唐朝”, 主要是用圖層樣式, 這里不再詳細說(shuō)明。需要注意的是圖片格式須保存為網(wǎng)頁(yè)一般格式“.jpg”“.png”或“.gif”, 以便瀏覽器快速下載。
(3) 插入所需表格, 將已經(jīng)處理好的圖片、文字、圖標、導航條等進(jìn)行規范合理的布局排版, 然后調整表格的長(cháng)度和寬度。
(4) 保存之后根據瀏覽器的預覽效果進(jìn)行完善調整頁(yè)面。
三、利用PS為網(wǎng)頁(yè)布局
在Dw中布局頁(yè)面會(huì )有些耗時(shí), 既要代碼輸入, 又要調整表格搭配、背景顏色, 相比較而言, 在PS中將頁(yè)面布局完成, 然后將其插入網(wǎng)頁(yè)設計中更簡(jiǎn)單有效, 而且可以事先搭配好顏色。
1.PS布局原則
(1) 色彩搭配要清新亮麗, 選用一個(gè)主色調, 其他顏色選用不可與主色反差太大, 以防造成視覺(jué)錯亂。
(2) 布局應合理規范, 不可隨心布置, 讓人看起來(lái)不舒服, 要疏密有度, 和諧統一。
(3) 突出主題, 對比鮮明, 不可讓無(wú)關(guān)緊要的文字或圖片占用大量篇幅, 以至于忽略了主題, 應將重要信息呈現在視覺(jué)的中心, 讓人一看簡(jiǎn)單明了。
2.實(shí)例操作
(1) 打開(kāi)PS并新建一個(gè)1024×768像素的畫(huà)布, 文件名為“主題相冊”, 顏色為白色, 分辨率為72像素\英寸。
(2) 利用圖形工具描繪出所需要的頁(yè)面效果圖, 單擊菜單欄中的“圖層|圖層樣式”選擇合適的樣式, 讓圖像看起來(lái)有立體的效果或其他效果。
(3) 保存圖片為“.jpg”格式, 以便觀(guān)察其效果。
(4) 為了保證圖片在網(wǎng)頁(yè)設計中更好地適用于表格, 可以單擊菜單欄中“視圖|鎖定切片”命令, 將圖片切割成符合網(wǎng)頁(yè)的logo、導航等多個(gè)小塊進(jìn)行保存, 保存時(shí)使用“存儲為web形式”, 以便瀏覽器更快地下載。注意切割時(shí)應準確, 使頁(yè)面效果更佳且易在網(wǎng)頁(yè)設計中進(jìn)行布局和表格處理。
(5) 在Dw中新建站點(diǎn), 插入表格后將已保存的圖片導入頁(yè)面中, 設為背景圖片, 然后完善調整頁(yè)面。
(6) 在這個(gè)基礎上可以加入自己喜歡的圖片, 完成后保存并在瀏覽器中預覽。