Photoshop在網(wǎng)頁設(shè)計前期的感化作用

蔣秋瑾

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

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

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

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

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

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

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

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

2、點竄便利

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

3、加速瀏覽進度

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

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

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

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

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

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

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

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

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

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

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

1、必需依靠參考線。設(shè)計時用到參考線，切圖時更要用好參考線。參考線能保證我們切出圖在統(tǒng)一表格中的尺寸統(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款式顯示更多的圖片細節(jié)。

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