企業(yè)網(wǎng)站設(shè)計(jì)Photoshop的應(yīng)用

發(fā)布：2019-03-14 13:22:48 瀏覽：4908

隨著信息技術(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ù)覽。