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

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

CS6介紹

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

使用PhotoshopCS6設(shè)計頁面

常見頁面大小

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

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

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

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

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

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

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

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

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

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

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

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

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

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

頁面布局區(qū)

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

使用輔助線對網(wǎng)頁效果圖進(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)航條頁面布局區(qū)

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

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

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

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

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

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

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

輸出準(zhǔn)備

Photoshop常用的圖片格式

將圖片保存為PSD格式

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

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

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

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

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

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

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

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

添加網(wǎng)站的Logo

添加網(wǎng)站的Banner

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

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

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