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