網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)技術(shù)詳解第8章

第8章使用Photoshop進(jìn)行頁(yè)面設(shè)計(jì)8.1 Photoshop

CS6介紹

Photoshop是世界頂尖級(jí)的位圖圖像設(shè)計(jì)與制作軟件，是平面設(shè)計(jì)軟件的事實(shí)標(biāo)準(zhǔn)。8.2

使用PhotoshopCS6設(shè)計(jì)頁(yè)面

常見(jiàn)頁(yè)面大小

確定網(wǎng)頁(yè)色彩定位

設(shè)計(jì)網(wǎng)頁(yè)的功能結(jié)構(gòu)常見(jiàn)頁(yè)面大小

居中類型小版面網(wǎng)站

778像素居中型網(wǎng)站

寬屏網(wǎng)站居中類型小版面網(wǎng)站778像素居中型網(wǎng)站

一些網(wǎng)站，在1024×768的顯示分辨率下，網(wǎng)頁(yè)的兩邊有兩個(gè)空白區(qū)域，網(wǎng)頁(yè)的內(nèi)容在網(wǎng)站中央，這是傳統(tǒng)型網(wǎng)頁(yè)寬度。網(wǎng)頁(yè)的寬度一般為778像素或800像素左右，在800×600的顯示分辨率下，正好布滿整個(gè)屏幕。

由于科技的不斷發(fā)展，800×600的顯示分辨率已經(jīng)很少使用，所以778像素居中型網(wǎng)站也漸漸退出了歷史的舞臺(tái)。寬屏網(wǎng)站

寬屏網(wǎng)站在1024×768的顯示分辨率下正好能布滿整個(gè)顯示器寬度，寬度為1002像素，新聞?lì)惥W(wǎng)站常使用這種頁(yè)面寬度。網(wǎng)頁(yè)的頁(yè)面長(zhǎng)度根據(jù)網(wǎng)頁(yè)的頁(yè)面內(nèi)容的多少而定。確定網(wǎng)頁(yè)色彩定位

在設(shè)計(jì)網(wǎng)頁(yè)效果圖時(shí)，最先需要考慮網(wǎng)站色彩的定位。網(wǎng)站的效果圖，需要在一個(gè)明確的色彩定位下進(jìn)行設(shè)計(jì)。所有的設(shè)計(jì)元素，需要與這個(gè)色彩定位相統(tǒng)一。

不同類別的網(wǎng)站對(duì)網(wǎng)頁(yè)的色彩有著不同的要求。網(wǎng)站既可以使用清爽自然的色彩，也可以使用

夸張的色調(diào)和藝術(shù)效果。設(shè)計(jì)網(wǎng)頁(yè)的功能結(jié)構(gòu)

在進(jìn)行網(wǎng)站設(shè)計(jì)時(shí)，要充分考慮到網(wǎng)站的各種具體功能模塊的設(shè)計(jì)。這些功能模塊的頁(yè)面設(shè)計(jì)，需要與首頁(yè)、其他頁(yè)面實(shí)現(xiàn)風(fēng)格和色彩的統(tǒng)一。8.3

網(wǎng)頁(yè)中的設(shè)計(jì)元素

導(dǎo)航區(qū)

頁(yè)面布局區(qū)

版權(quán)區(qū)

使用輔助線對(duì)網(wǎng)頁(yè)效果圖進(jìn)行基本分區(qū)導(dǎo)航區(qū)

文本鏈接導(dǎo)航條

下拉菜單導(dǎo)航條

標(biāo)簽式導(dǎo)航條

Flash導(dǎo)航條和圖片導(dǎo)航條文本鏈接導(dǎo)航條下拉菜單導(dǎo)航條標(biāo)簽式導(dǎo)航條Flash導(dǎo)航條和圖片導(dǎo)航條頁(yè)面布局區(qū)

網(wǎng)頁(yè)的布局區(qū)指的是網(wǎng)站首頁(yè)或二級(jí)頁(yè)面中網(wǎng)頁(yè)實(shí)際內(nèi)容的布局。在進(jìn)行網(wǎng)站頁(yè)面布局的設(shè)計(jì)之前，需要對(duì)網(wǎng)站的內(nèi)容進(jìn)行篩選，不同的內(nèi)容根據(jù)其重要性放在網(wǎng)站不同的位置。版權(quán)區(qū)

網(wǎng)站的最下部一般是一個(gè)版權(quán)區(qū)。版權(quán)區(qū)的主要內(nèi)容是版權(quán)、網(wǎng)站信息、網(wǎng)站聯(lián)系方式等內(nèi)容。這一區(qū)域的表現(xiàn)方式是文字信息和鏈接，一般使用簡(jiǎn)單布局，不需要使用復(fù)雜背景。使用輔助線對(duì)網(wǎng)頁(yè)效果圖進(jìn)行基本分區(qū)8.4

網(wǎng)頁(yè)內(nèi)容的設(shè)計(jì)實(shí)例

網(wǎng)頁(yè)中按鈕的設(shè)計(jì)

網(wǎng)頁(yè)中藝術(shù)字的設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容的設(shè)計(jì)實(shí)例

網(wǎng)頁(yè)中按鈕的設(shè)計(jì)

網(wǎng)頁(yè)中藝術(shù)字的設(shè)計(jì)8.5

輸出準(zhǔn)備

Photoshop常用的圖片格式

將圖片保存為PSD格式

將圖片導(dǎo)出為JPG格式

將圖片導(dǎo)出為GIF格式Photoshop常用的圖片格式

PSD格式：PSD格式是PhotoshopCS6的工作文件，保留了Photoshop進(jìn)行設(shè)計(jì)時(shí)的層、路徑、文本等內(nèi)容。Photoshop設(shè)計(jì)時(shí)的工程文件應(yīng)該保存為PSD格式。

JPG格式：JPG格式是計(jì)算機(jī)和網(wǎng)絡(luò)上常用的一種圖片格式。JPG格式可以很好地保證圖片的色彩，使效果圖不會(huì)產(chǎn)生較大的失真。

GIF格式：GIF格式是網(wǎng)站上常用的文件格式。網(wǎng)頁(yè)中的動(dòng)畫常常被制作成GIF格式。8.6

實(shí)例：用PhotoshopCS6設(shè)計(jì)一個(gè)網(wǎng)頁(yè)效果圖

新建一張網(wǎng)頁(yè)效果圖

使用輔助線劃分網(wǎng)頁(yè)區(qū)域

添加網(wǎng)站的Logo

添加網(wǎng)站的Banner

設(shè)計(jì)網(wǎng)頁(yè)的導(dǎo)航條

設(shè)計(jì)網(wǎng)站的內(nèi)容布局

設(shè)計(jì)網(wǎng)頁(yè)的版