蔣秋瑾

摘要：網(wǎng)頁(yè)已成為信息化時(shí)代人與人、人與物交流的必要工具，一個(gè)布局獨(dú)特，畫(huà)面精美的網(wǎng)頁(yè)必然使人流連忘返，給企業(yè)帶來(lái)莫大的效益，要設(shè)計(jì)這樣一個(gè)網(wǎng)頁(yè)，要求設(shè)計(jì)人員要有豐富的智慧和技能，而在眾多網(wǎng)頁(yè)設(shè)計(jì)軟件中，Photoshop在網(wǎng)頁(yè)設(shè)計(jì)前期的感化作用是不可忽視的，使用Photoshop制作網(wǎng)頁(yè)可以突破dreamweaver布局時(shí)的種種局限性，令設(shè)計(jì)師更加自由地進(jìn)行設(shè)計(jì)構(gòu)圖，表現(xiàn)手法也豐富多樣。本文我就Photoshop這個(gè)圖象處理軟件在網(wǎng)頁(yè)設(shè)計(jì)前期對(duì)網(wǎng)頁(yè)元素和網(wǎng)頁(yè)結(jié)構(gòu)的整合感化意義以及用Photoshop設(shè)計(jì)網(wǎng)頁(yè)結(jié)構(gòu)應(yīng)注意的細(xì)節(jié)，特別是對(duì)Photoshop的切片功能和操作做一些簡(jiǎn)要的介紹，以供初學(xué)者參考。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì) Photoshop 切片

近幾年信息技術(shù)的發(fā)展，使Internet已經(jīng)和許多人的日常生活密不可分，而在互聯(lián)網(wǎng)中承擔(dān)重要角色的網(wǎng)頁(yè)，是企業(yè)宣傳和展示的一個(gè)非常好的媒介，同時(shí)也是與用戶(hù)溝通的重要橋梁。而要想制作一個(gè)有看點(diǎn)、有觀(guān)眾、長(zhǎng)盛不衰的網(wǎng)站，一定要有自己獨(dú)特的風(fēng)格，才能使瀏覽者駐目，并印象深刻。達(dá)到這一點(diǎn)，Photoshop在網(wǎng)頁(yè)設(shè)計(jì)中的感化作用是不可忽視的。

Photoshop是圖形圖像領(lǐng)域最領(lǐng)先的處理軟件之一，在平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、三維設(shè)計(jì)、數(shù)碼照片處理等諸多領(lǐng)域廣泛應(yīng)用。正因?yàn)榇?，它在制作網(wǎng)頁(yè)時(shí)更擔(dān)任了關(guān)鍵的角色。

一、Photoshop在規(guī)劃網(wǎng)頁(yè)效果中的感化

瀏覽過(guò)諸如IBM中文官方網(wǎng)站、清華大學(xué)中文官方網(wǎng)站、還有由我完成制作的河南交通職業(yè)技術(shù)學(xué)院門(mén)戶(hù)網(wǎng)站……我們發(fā)現(xiàn)這些網(wǎng)站設(shè)計(jì)簡(jiǎn)約，頁(yè)面結(jié)構(gòu)規(guī)范，有章可循，欄目放置有序，主次關(guān)系分明，瀏覽速度很快，其實(shí)從專(zhuān)業(yè)角度看這些都是Photoshop的功勛。

1、結(jié)構(gòu)矯捷

Photoshop的靈魂是圖層，每層可以放置不同的元素，圖層之間可以彼此鏈接，每個(gè)圖層上的圖像位置可以隨意挪動(dòng)而不影響其它圖層的圖像位置，圖像大小、色階、亮度、飽和度透明度等可單獨(dú)設(shè)置而不影響其它圖層上的圖像。如此矯捷的功能，完全可以讓設(shè)計(jì)者隨心所欲設(shè)計(jì)而不受任何約束，而Dreamweaver等軟件給設(shè)計(jì)者提供的自由度低得多，其效果也會(huì)大打折扣。

2、點(diǎn)竄便利

網(wǎng)站設(shè)計(jì)前期首先要與客戶(hù)簽定合同，簽定合同時(shí)客戶(hù)最關(guān)心的是自己的網(wǎng)站是什么樣子，這時(shí)設(shè)計(jì)者不成能拿出建好的網(wǎng)站給客戶(hù)演示，這樣一是成本太高；二是維護(hù)常識(shí)產(chǎn)權(quán)。最好的法子是拿出在Photoshop中做出的效果圖給客戶(hù)看。這時(shí)我們就可以操縱 Photoshop的強(qiáng)大功能按客戶(hù)的要求便利地進(jìn)行點(diǎn)竄和優(yōu)化，直到客戶(hù)滿(mǎn)意為止。若是在Dreamweaver下，每做一次大的點(diǎn)竄，幾乎是從頭設(shè)計(jì)一樣費(fèi)時(shí)吃力，而且還不必然能達(dá)到客戶(hù)要求。

3、加速瀏覽進(jìn)度

一個(gè)設(shè)計(jì)不美觀(guān)不規(guī)范的網(wǎng)站是沒(méi)有生命力，同樣一個(gè)打開(kāi)、下載速度慢的網(wǎng)站也是沒(méi)有存在的價(jià)值。心理學(xué)研究證明：選擇性越多，人的忍耐性越差；可選擇性越大，人的忍耐性越低。抉擇下載速度的原因良多，而網(wǎng)頁(yè)大小及網(wǎng)頁(yè)元素的優(yōu)化和設(shè)置是一個(gè)關(guān)鍵的因素。利用Photoshop設(shè)計(jì)的網(wǎng)頁(yè)經(jīng)過(guò)裁切后體積相對(duì)要小得多，就大大加快了網(wǎng)頁(yè)的瀏覽速度。

二、用Photoshop進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的細(xì)節(jié)感化

在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，我們應(yīng)注意的一些設(shè)計(jì)中的細(xì)節(jié)和參數(shù)。

1、網(wǎng)頁(yè)文檔尺寸與分辯率。在1024*768分辨率的顯示器下，網(wǎng)頁(yè)文檔為寬1000像素 *高600像素是滿(mǎn)屏顯示，寬和高可根據(jù)需要進(jìn)行調(diào)整，分辯率一般不低于72像素。把握這個(gè)參數(shù)，大型網(wǎng)站一般不要跨越3屏。

2、 顏色。采用RGB色彩模式，網(wǎng)站背景景顏色與文件顏色要統(tǒng)一協(xié)調(diào)，一般不要跨越三種色調(diào)，一些網(wǎng)站給人感覺(jué)臟、亂、差，其關(guān)鍵是顏色搭配不合理，或者太多。

3、字體，題目。導(dǎo)航字體一般用黑體，正文一般用宋體，其它字體瀏覽器不兼容，若是為增強(qiáng)頁(yè)面效果用到其它字體，則最好在Photoshop切分成圖片，字體的顏色、形態(tài)設(shè)置要考慮到整個(gè)頁(yè)面效果。

4、結(jié)構(gòu)款式：要兼顧到 Dreamweaver對(duì)頁(yè)面結(jié)構(gòu)的要求，一般在Dreamweaver下網(wǎng)頁(yè)結(jié)構(gòu)是“國(guó)”字形，在這個(gè)前提下，是否利用框架，利用框架的類(lèi)型是哪一種，都是在設(shè)計(jì)前要考慮到的。否則會(huì)造成效果圖與最后的網(wǎng)站結(jié)構(gòu)不符，給客戶(hù)和自身帶來(lái)?yè)p失和麻煩。

5、 圖文搭配：一個(gè)好的網(wǎng)站以網(wǎng)站的功能、行業(yè)、目標(biāo)而定，但有個(gè)原則就是圖文合理搭配，而圖片則要按給定的空間分布進(jìn)行協(xié)調(diào)分布。此外，圖片大小要合乎美學(xué)原則，不能太大，一般用縮略圖較好，若是要顯示更多的圖片細(xì)節(jié)，不妨給縮略圖鏈接一個(gè)大的圖片。

6、科學(xué)利用參考線(xiàn)。參考線(xiàn)是設(shè)計(jì)頁(yè)面結(jié)構(gòu)的有用輔助工具，我們可以先用橫參考線(xiàn)將網(wǎng)頁(yè)結(jié)構(gòu)分成幾大版塊，然后用豎參考線(xiàn)將每個(gè)板塊按我們的思緒分為幾個(gè)小板塊，最后再整體調(diào)整查看一下。要切確定位置的網(wǎng)頁(yè)元素，可用對(duì)齊參考線(xiàn)的方法來(lái)實(shí)現(xiàn)。

三、Photoshop通向DreamWeaver的感化工具“切片”。

拿Photoshop效果圖最終與客戶(hù)簽合同后，使用Photoshop設(shè)計(jì)網(wǎng)頁(yè)的前期工作并沒(méi)有結(jié)束，而還有關(guān)鍵的一步，就是“切片”，只有準(zhǔn)確地切片后，DreamWeaver才能對(duì)效果圖進(jìn)行有效的整合，Photoshop在網(wǎng)頁(yè)設(shè)計(jì)前期的積極感化才發(fā)揮到了極致。要完成“切片”這關(guān)鍵的一步，應(yīng)遵循以下原則：

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

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

3、虛線(xiàn)和轉(zhuǎn)角外形必切。虛線(xiàn)和轉(zhuǎn)角外形在DreamWeaver 實(shí)現(xiàn)非常麻煩，并且效果有相當(dāng)多的局限性，所以最好利用Photoshop切片。

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

5、大圖必切。大的圖像必需切分成平均圖，這樣可以提高網(wǎng)頁(yè)下載速度。

6、特別文字效果必切。除黑體和宋體外，其他字體必需切片。DreamWeaver下最有用的字體只有宋體和黑體，其它字體瀏覽器不能兼容。

7、導(dǎo)航條必切。一般情況下導(dǎo)航條都是特別設(shè)計(jì)的，其效果在Dream Weaver下不能實(shí)現(xiàn)，是以必需形成切片供后期利用。

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

Photoshop在網(wǎng)頁(yè)設(shè)計(jì)前期的感化作用是至關(guān)重要的，以上也是我在工作中對(duì) Photoshop在網(wǎng)頁(yè)設(shè)計(jì)前期應(yīng)用的總結(jié)，簡(jiǎn)要概括，以供廣大網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者參考，與廣大網(wǎng)頁(yè)設(shè)計(jì)愛(ài)好者共勉！