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