企業網站設計

企業網站設計Photoshop的應用

發布：2019-03-14 13:22:48 瀏覽：4839

隨著信息技術的發展,網頁制作成為時下互聯網平臺中人與人交流不可或缺的寵兒,但是要完成網頁設計作品就少不了其他軟件的支持,如Flash動畫制作,Fireworks圖像處理,Photoshop圖片制作及處理等。如何結合Photoshop來設計出有自己風格的頁面是本文所要研究的課題。

一、Photoshop和Dreamweaver的簡單介紹

1.Photoshop的簡介

Photoshop是一款由美國發布的用來處理圖像、圖形的軟件,簡稱PS。它不僅可以處理出你所需要的圖片,還可以根據自己的要求動手繪畫出自己喜歡的圖像、圖形,比如畫筆工具、鋼筆工具以及圖形工具,用鼠標單擊選中,在自己新建的畫布上描繪出你喜歡的圖像,然后選擇相配的顏色,注意色彩要均衡,單擊“油漆桶工具”或選擇菜單欄中“編輯|填充”命令即可,這樣,簡單的一幅畫作就完成了,最后你可以根據自己對圖像的需要進行圖層樣式的選擇,單擊菜單欄中“圖層|圖層樣式”命令選擇需要的選項就可以了。

2.Dreamweaver的簡介

Dreamweaver簡稱Dw,是一款集網頁制作和網站管理于一身的網頁編輯器,也是人與人之間一種視覺的交流方式。一份精美的網頁中包含的元素眾多,包括圖像、圖形、文字、動畫等,將這些元素進行規范的排版與合理的布局,就需要用Dw中的CSS樣式、表格制作等眾多功能來輔助完成。需要提及的是Dw中的編輯基本上都是靠代碼來完成的。

二、Dw中網頁布局和實例制作

1.Dw中的頁面布局原則

(1)色彩要搭配恰當,網頁在顏色搭配上要遵從以下幾點:渲染主題深色調,突出氛圍淺色調,簡約大方白色調,對比鮮明黑色調,端莊奢華紫色調,浪漫婉約粉色調。

(2)元素要相得益彰,有些網站頁面元素很多,尤以圖片文字為首。文字過多會讓人覺得乏味無趣,圖片過多又會覺得低俗,為了防止視覺疲累,應該將圖片和文字適當搭配。

(3)圖片要處理合理,在頁面布局中很多圖片都不符合要求,有些色彩過于鮮艷,有些像素過低模糊不清,有些只需要一部分圖片。針對這些問題,我們都可以用PS輕松處理。

2.實例制作

(1)打開Dw軟件,選擇新建欄目下的“HTML”模板,進入后選擇“管理站點|站點|新建站點”,名稱為“夢回唐朝”且保存在“E:/myweb”的根文件夾下。注意文件命名時要采用字母或數字,以便各網頁之間進行有效的鏈接。

(2)處理需要的圖片和文字存入“myweb/images”文件夾中,圖片處理使用PS軟件,主要處理圖片的大小、色彩及像素值。比如網頁的logo圖片、導航條、錨點圖標、分割圖形等都可根據需要處理。在這里先介紹該網站主頁的logo圖片的制作合成,首先打開PS軟件,新建立一個30×25cm的畫布,然后分別打開一幅扇子圖片和一幅背景圖片,可單擊工具欄中的“快速選擇工具”將扇面摳下;處理背景圖很簡單,只需要用裁剪工具裁出中間的部分。最后返回新建的畫布,將扇面和背景圖分別放入兩個圖層中,再處理文字“夢回唐朝”,主要是用圖層樣式,這里不再詳細說明。需要注意的是圖片格式須保存為網頁一般格式“.jpg”“.png”或“.gif”,以便瀏覽器快速下載。

(3)插入所需表格,將已經處理好的圖片、文字、圖標、導航條等進行規范合理的布局排版,然后調整表格的長度和寬度。

(4)保存之后根據瀏覽器的預覽效果進行完善調整頁面。

三、利用PS為網頁布局

在Dw中布局頁面會有些耗時,既要代碼輸入,又要調整表格搭配、背景顏色,相比較而言,在PS中將頁面布局完成,然后將其插入網頁設計中更簡單有效,而且可以事先搭配好顏色。

1.PS布局原則

(1)色彩搭配要清新亮麗,選用一個主色調,其他顏色選用不可與主色反差太大,以防造成視覺錯亂。

(2)布局應合理規范,不可隨心布置,讓人看起來不舒服,要疏密有度,和諧統一。

(3)突出主題,對比鮮明,不可讓無關緊要的文字或圖片占用大量篇幅,以至于忽略了主題,應將重要信息呈現在視覺的中心,讓人一看簡單明了。

2.實例操作

(1)打開PS并新建一個1024×768像素的畫布,文件名為“主題相冊”,顏色為白色,分辨率為72像素英寸。

(2)利用圖形工具描繪出所需要的頁面效果圖,單擊菜單欄中的“圖層|圖層樣式”選擇合適的樣式,讓圖像看起來有立體的效果或其他效果。

(3)保存圖片為“.jpg”格式,以便觀察其效果。