Photoshop輕松布局網(wǎng)頁

張樓英

（柳州市第二職業(yè)技術(shù)學(xué)校，廣西 柳州 545006）

Photoshop輕松布局網(wǎng)頁

張樓英

（柳州市第二職業(yè)技術(shù)學(xué)校，廣西 柳州 545006）

當(dāng)今網(wǎng)絡(luò)已經(jīng)成為人們生活的重要組成部分，由此一個新興的專業(yè)---網(wǎng)頁設(shè)計誕生了。部分耿業(yè)學(xué)校為適應(yīng)這個職業(yè)對人才的需求紛紛開設(shè)了網(wǎng)絡(luò)工程專業(yè)。但是在培養(yǎng)網(wǎng)頁設(shè)計人員的過程中一些教師由于缺乏網(wǎng)頁設(shè)計實踐經(jīng)驗，對Photoshop這個圖象軟件在網(wǎng)頁設(shè)計中對網(wǎng)頁元素的整合作用認(rèn)識不足，沒有使這個軟件發(fā)揮其應(yīng)有的作用。文章針對這個現(xiàn)象，對Photoshop在網(wǎng)頁設(shè)計和規(guī)劃中的作用和意義以及運用Photoshop進(jìn)行網(wǎng)頁規(guī)劃時應(yīng)注意的問題作了論述，特別是對Photoshop的切片功能和操作方法做了詳細(xì)的說明，這對于初學(xué)網(wǎng)頁設(shè)計的人員來說更具有指導(dǎo)意義。

網(wǎng)頁設(shè)計；Photoshop；布局

現(xiàn)在是IT時代，幾乎沒有哪一行能和網(wǎng)絡(luò)脫離關(guān)系，因此網(wǎng)站的規(guī)劃與建設(shè)已經(jīng)成為一項專門職業(yè)。在網(wǎng)站規(guī)劃建設(shè)中，網(wǎng)頁布局設(shè)計是其至關(guān)重要的一環(huán)，它關(guān)系到網(wǎng)站能否吸引更多人的眼球，直接反映網(wǎng)站的點擊率，而點擊率正是網(wǎng)站的生命所在。所以網(wǎng)頁布局設(shè)計是否美觀、規(guī)范、合理越來越受到網(wǎng)頁設(shè)計師的重視。

網(wǎng)頁布局設(shè)計的軟件很多，如Dream weaver 、FrontPage等都可勝任，但是初學(xué)者往往是一上手就使用 Dreamweaver等進(jìn)行規(guī)劃布局，結(jié)果使網(wǎng)站建設(shè)延期，下載速度降低，更糟的是合同違約，失掉客戶，造成不可估量的損失。糾其原因，關(guān)鍵是忽視了Photoshop在網(wǎng)頁規(guī)劃布局中的作用。初學(xué)者知道Photoshop是圖像處理軟件，但只是把它用來解決一般圖像裁切、調(diào)整、優(yōu)化，而忽視它在網(wǎng)頁布局設(shè)計中的重要作用。

案例二：學(xué)生制作的班級網(wǎng)站

1 Photoshop在網(wǎng)頁布局設(shè)計中的作用

案例一：學(xué)生的得意網(wǎng)站作品

通過以上案例，我們發(fā)現(xiàn)這些網(wǎng)站設(shè)計風(fēng)格簡約，醒目大方，頁面布局規(guī)范，有章可循，欄目放置有序，主次關(guān)系分明，瀏覽速度很快，其實從專業(yè)角度看這些都是Photoshop的功勞。Photoshop在網(wǎng)頁布局計劃中的作用：

（1）布局靈活：Photoshop的靈魂是圖層，每層可以放置不同的元素，圖層之間可以相互鏈接，也可單獨存放，每個圖層上的圖像位置可以隨意挪動而不影響其它圖層的圖像位置，每個圖層上的圖像大小、色階、亮度、飽和度透明度等可單獨設(shè)置而不影響其它圖層上的圖像。如此靈活的功能，完全可以讓設(shè)計者隨心所欲設(shè)計而不受任何約束，而Dreamweaver等軟件給設(shè)計者提供出自由度降低很多，其效果也會大打折扣。

（2）修改方便：網(wǎng)站建設(shè)前期首先要與客戶簽定合同，簽定合同時客戶最關(guān)心的是自己的網(wǎng)站是什么樣子，這時設(shè)計者不可能拿出建好的網(wǎng)站給客戶演示，這樣一是成本太高，合同能否簽定還不一定；二是保護(hù)知識產(chǎn)權(quán)，有的客戶拿走設(shè)計方案交給別的公司去做，自己豈不成了給別人做嫁衣裳。最好的辦法是拿出在Photoshop中做出的效果圖給客戶看。一般情況下，客戶一次滿意率非常低，總會提出修改意見，而且還會不斷地提出修改方案。這時我們就可以利用Photoshop的強大功能按客戶的要求方便地進(jìn)行修改和優(yōu)化，直到客戶滿意為止。如果在Dreamweaver下，每做一次大的修改，幾乎跟重新設(shè)計一樣費時費力，而且還不一定能達(dá)到客戶要求。

（3）加快瀏覽進(jìn)度。一個設(shè)計不美觀不規(guī)范的網(wǎng)站是沒有生命力，同樣一個打開、下載速度慢的網(wǎng)站也是沒有存在的價值。心理學(xué)研究表明，選擇性越多，人的忍耐性越差；可選擇性越大，人的忍耐性越低。在互聯(lián)網(wǎng)高度發(fā)展的今天，同類網(wǎng)站多如牛毛，人們沒必要在一個網(wǎng)站前停駐靜侯你一點一點地下載、打開、測試、顯示。一般情況下，下載速度一旦超過10秒，人們會自動轉(zhuǎn)向其它網(wǎng)站。決定下載速度的因素很多，如服務(wù)器配置標(biāo)準(zhǔn)、網(wǎng)絡(luò)傳輸介質(zhì)、客戶機的配置以及同時點擊人數(shù)的多少等。但是在這些條件相同時，網(wǎng)頁大小及網(wǎng)頁元素的優(yōu)化和配置就是唯一的因素。使用Photoshop設(shè)計的網(wǎng)頁經(jīng)過裁切后體積相對要小得多，相同的元素因為其格式變化也會大大提高下載速度，因此Photoshop就成了提高速度，提高點擊率的制勝法寶。

2 用Photoshop設(shè)計網(wǎng)頁布局應(yīng)注意的幾個問題

（1）網(wǎng)頁文檔尺寸與分辨率。網(wǎng)頁文檔一般為1007*600和708*800像素，分辨率為72像素，這是屏幕分辨率，太高的分辨率并不能增強效果，反而會降低下載速度。一般情況下，大型網(wǎng)站不要超過3屏。

（2）顏色：網(wǎng)站背景顏色與文件顏色要統(tǒng)一協(xié)調(diào)，一般不要超過兩種，一些網(wǎng)站被批評為臟、亂、差，其要害是顏色搭配不合理，或者太多，給人一種不舒服的感覺。

（3）字體，標(biāo)題。導(dǎo)航字體一般用黑體，正文一般用宋體，其它字體瀏覽器不兼容，可能造成調(diào)試時出錯，給工作帶來麻煩。如果為增強頁面效果用到其它字體，則最好在用Dreamweaver前在Photoshop切分及圖片，字體的顏色設(shè)置要考慮到整個頁面效果。

（4）布局格式：雖然效果圖是用Photoshop設(shè)計的，但一定要兼顧到Dreamweaver對頁面布局的要求，Dreamweaver下網(wǎng)頁布局是使用‘國’字形，還是其他模式，是否使用框架，使用框架的類型是哪一種，都是在設(shè)計前要考慮到的。否則會造成效果圖與最后的網(wǎng)站布局出現(xiàn)出入，給客戶和自身帶來麻煩和損失。

（5）圖文搭配：一個好的網(wǎng)站是圖片多好還是文字多好，這要視網(wǎng)站的功能、行業(yè)、目的而定，但有個原則就是圖文合理配置，而圖片則要按一定的空間分布進(jìn)行和諧分布。另外，圖片大小要合乎美學(xué)原則，不能太大，一般用縮略圖較好，如果要顯示更多的圖片細(xì)節(jié)，不妨給縮略圖鏈接一個大的圖片。

（6）科學(xué)使用參考線。參考線是設(shè)計頁面布局的有效輔助工具，我們可以先用橫參考線將網(wǎng)頁布局分成幾大版塊，然后用豎參考線將每個板塊按我們的思路分為幾個小板塊，最后再整體觀察一下。要精確定位網(wǎng)頁元素，可用對齊參考線的方法來實現(xiàn)：“視圖”—“對齊到”—“參考線”，而參考線的精確定位可以借助標(biāo)尺和網(wǎng)格來實現(xiàn)，這里要注意的是網(wǎng)站的Logo和Banner或者導(dǎo)航條等都是事先設(shè)計好的，有固定大小，在做這些區(qū)域時尺寸一定要按照這些元素尺寸設(shè)計，不能有絲毫差錯，否則進(jìn)入DreamWeaver整合時，則可能出現(xiàn)空邊或撐開表格的現(xiàn)象。

3 “切片”工具是Photoshop通向DreamWeaver的橋梁。

利用 Photoshop效果圖最終與客戶簽合同后，還不是Photoshop設(shè)計網(wǎng)頁布局的終結(jié)，而還有關(guān)鍵的一步，就是“切片”，只有正確地切片后，DreamWeaver才能對效果圖進(jìn)行有效的整合，Photoshop在網(wǎng)頁布局中的積極作用才發(fā)揮到了極致。要完成“切片”這關(guān)鍵的一步，應(yīng)遵循以下原則：

（1）必須依靠參考線。設(shè)計時用到參考線，切圖時更要用好參考線。參考線能保證我們切出圖在同一表格中的尺寸統(tǒng)一協(xié)調(diào)，有效避免“留白”和“爆邊”。

（2）Logo和Banner必切。如果效果圖中存在Logo和Banner,我們必須切片這部分，主要是為預(yù)先設(shè)計的Logo和Banner留下空間，在DreamWeaver整合時最好不用Logo和Banner的切片，而是直接用Logo和Banner原文檔，這是提高Logo和Banner效果的需要。

（3）虛線和轉(zhuǎn)角形狀必切。虛線和轉(zhuǎn)角形狀在DreamWeaver 不能實現(xiàn)，只能使用Photoshop切片。

（4）漸變必切。這也是Dream Weaver實現(xiàn)不了的。

（5）大圖必切。大的圖像必須切分成均勻圖，這樣可以提高網(wǎng)頁下載速度。

（6）特殊文字效果必切。除黑體和宋體外，其他字體必須切片。DreamWeaver下最有效的字體只有宋體和黑體，其它字體瀏覽器也要能不兼容。

（7）導(dǎo)航條必切。一般情況下導(dǎo)航條都是特別設(shè)計的，其效果在Dream Weaver下不能實現(xiàn)，因此必須形成切片供后期使用。

（8）有效存儲切片。存儲切片的文件夾必須位于站點的根目錄下，文件夾名必須是英文名字。存儲切片時用“文件—存儲為web所用格式”命令。切片存儲格式要求一般存為Gif格式。Gif占用體積小。要求較高的圖像存儲為JPEG格式，JPG格式顯示更多的圖片細(xì)節(jié)。

當(dāng)然，網(wǎng)頁布局的設(shè)計軟件的使用依設(shè)計者習(xí)慣、愛好、風(fēng)格不同而不一樣。筆者在此只是談一下一般的規(guī)律，以供廣大網(wǎng)頁設(shè)計初學(xué)者參考。

[1] 北京阿博泰克北大青鳥信息技術(shù)有限公司編著.使用Photoshop設(shè)計網(wǎng)站[M].科學(xué)技術(shù)文獻(xiàn)出版社,2008(5).

[2] 北京阿博泰克北大青鳥信息技術(shù)有限公司編著.制作企業(yè)網(wǎng)站[M].科學(xué)技術(shù)文獻(xiàn)出版社,2008(5).

Using Photoshop to layout webpage easily

Nowadays, the network has become an important part of our daily life, which generates a rising profession that is web design. Some vocational schools have opened the network engineering courses in order to meet the needs of this profession. But in the course of cultivating the web page designers, some teachers lack the practice experience,and can’t be familiar with the integration ability of Photoshop software in web design for the web elements. As a result, this software doesn’t work well. Based on this phenomenon, the function and significance of Photoshop in web design and planning and some notable problems of Photoshop for web planning are interpreted in detail,especially for the slice function and its operation, which offers significant guidance for the beginners.

Web Design; Photoshop; Layout

TP393.02

B

1008-1151(2012)04-0089-02

2012-02-25

張樓英（1979－），女，廣西賓陽人，柳州市第二職業(yè)技術(shù)學(xué)校講師。