劉　業(yè)

山東龍口礦業(yè)集團(tuán)高級技工學(xué)校，山東　煙臺　265700

應(yīng)用Photoshop設(shè)計(jì)網(wǎng)頁的初步探討

劉業(yè)

山東龍口礦業(yè)集團(tuán)高級技工學(xué)校，山東煙臺265700

摘要：我們正在進(jìn)入信息時(shí)代，信息技術(shù)知識已經(jīng)成為當(dāng)代知識分子知識結(jié)構(gòu)中不可缺少的重要組成部分。信息技術(shù)的范疇十分寬廣，內(nèi)容十分豐富。對于大多數(shù)人來說，當(dāng)前最迫切需要學(xué)習(xí)的是計(jì)算機(jī)與網(wǎng)絡(luò)的應(yīng)用知識，特別是互聯(lián)網(wǎng)技術(shù)的應(yīng)用知識。在互聯(lián)網(wǎng)飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動(dòng)。因此網(wǎng)站建設(shè)和網(wǎng)頁制作在互聯(lián)網(wǎng)應(yīng)用上的地位顯的格外重要。

關(guān)鍵詞：網(wǎng)站建設(shè)；Photoshop；網(wǎng)頁；Internet

Internet是目前世界上最大的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)，它遍布全球，將世界各地各種規(guī)模的網(wǎng)絡(luò)連接成一個(gè)整體。現(xiàn)今的社會(huì)，人們已經(jīng)離不開了網(wǎng)絡(luò)，網(wǎng)絡(luò)已經(jīng)成為人與人之間交流的一種形式，它能夠把事情的復(fù)雜化轉(zhuǎn)為簡單化，擺脫了時(shí)間和空間的限制。本文根據(jù)實(shí)踐經(jīng)驗(yàn)對Photoshop在網(wǎng)頁設(shè)計(jì)中的作用進(jìn)行了初步探討。

一、Photoshop軟件簡介

Adobe Photoshop，簡稱“PS”，是Adobe公司推出的圖像編輯、網(wǎng)頁制作和圖像合成及特效制作軟件。它橫跨平面與網(wǎng)頁多媒體設(shè)計(jì)領(lǐng)域，是一種全球標(biāo)準(zhǔn)的圖像編輯解決方案。作為專業(yè)的圖像編輯軟件，Photoshop是網(wǎng)頁設(shè)計(jì)師和平面設(shè)計(jì)師最常用的工具之一。在網(wǎng)頁設(shè)計(jì)方面主要是對網(wǎng)頁圖像進(jìn)行處理及制作，包括網(wǎng)站版式設(shè)計(jì)、導(dǎo)航按鈕制作、Gif動(dòng)畫制作等等。

二、Photoshop在網(wǎng)站設(shè)計(jì)中的地位

網(wǎng)站訪問量決定了其生存的空間，而確定這一切的根源在于網(wǎng)站設(shè)計(jì)及其開發(fā)過程。網(wǎng)站的的設(shè)計(jì)及開發(fā)過程也稱為網(wǎng)站的設(shè)計(jì)流程。根據(jù)在網(wǎng)站設(shè)計(jì)過程中針對的側(cè)重內(nèi)容不同，可以將其劃分為三個(gè)階段。第一階段準(zhǔn)備階段(需求分析、總體設(shè)計(jì)、素材整理)，第二階段(網(wǎng)頁設(shè)計(jì)、程序開發(fā)、測試、發(fā)布)，第三階段(需求變更、設(shè)計(jì)變更、程序變更、測試、重新發(fā)布)。網(wǎng)站設(shè)計(jì)實(shí)際上就是設(shè)計(jì)整個(gè)網(wǎng)站的藍(lán)圖，即主頁、其他網(wǎng)頁及網(wǎng)頁間的關(guān)系。先設(shè)計(jì)網(wǎng)站的整體結(jié)構(gòu)再繪制草圖。利用Photoshop設(shè)計(jì)效果圖，正是處在整個(gè)流程第三部—網(wǎng)站視覺設(shè)計(jì)上。

三、Photoshop在網(wǎng)頁設(shè)計(jì)中的作用

(一)圖像處理，優(yōu)化圖片。在網(wǎng)頁制作中，要處理大量的圖片素材，無論是處理單張圖片還是設(shè)計(jì)一個(gè)復(fù)雜的網(wǎng)頁，Photoshop都是首選工具。在日常的生活中存在多種不同類型的圖片文件格式，不同格式的圖片文件所呈現(xiàn)出來的視覺效果不同。在網(wǎng)頁設(shè)計(jì)過程中，經(jīng)常使用的圖片格式有GIF、JPEG、PNG三種格式，不同格式圖像的展示效果不同，各自的實(shí)用場合也有所不同。心理學(xué)研究表明一個(gè)網(wǎng)站的下載時(shí)間超過10秒，人們會(huì)自動(dòng)轉(zhuǎn)向其它網(wǎng)站。決定下載速度的因素很多，其中網(wǎng)頁大小、網(wǎng)頁元素的優(yōu)化和網(wǎng)絡(luò)配置是重要的因素。其中網(wǎng)頁大小與網(wǎng)頁元素的優(yōu)化是設(shè)計(jì)者需要解決的，使用Photoshop設(shè)計(jì)的網(wǎng)頁經(jīng)過裁切、整合處理后體積會(huì)小得多，當(dāng)然網(wǎng)頁響應(yīng)速度就會(huì)快很多。

(二)網(wǎng)頁布局，整體規(guī)劃。網(wǎng)站的視覺設(shè)計(jì)決定了網(wǎng)站整體頁面風(fēng)格和展示效果，而一個(gè)設(shè)計(jì)精美、獨(dú)具個(gè)性、能夠給人留下深刻印象的網(wǎng)站，也必然會(huì)得到用戶的認(rèn)可。無論簡單還是復(fù)雜的頁面，都是由網(wǎng)頁的基本元素構(gòu)成的，而這些網(wǎng)頁元素均可以使用Photoshop工具進(jìn)行制作和處理，最終組合成一個(gè)多彩炫目的網(wǎng)頁。利用Photoshop做好布局效果圖后，關(guān)鍵的一步就是“切片”。只有正確地切片，Dreamweaver才能對效果圖進(jìn)行有效的整合。

(三)圖像特效，動(dòng)態(tài)顯示。在網(wǎng)頁設(shè)計(jì)過程中，往往需要一些特殊的效果美化網(wǎng)頁。如虛線、變幻線、陰影、圓角表格、標(biāo)題、廣告等特殊字體、漸變的網(wǎng)頁背景等等，這些效果在Dreamweaver中無法直接實(shí)現(xiàn)，可以先在Dreamweaver中繪制相應(yīng)效果，然后裁切成小圖片在Dreamweaver中進(jìn)行整合填充即可。雖然photoshop不是專門的動(dòng)畫制作軟件，但是充分利用photoshop時(shí)間軸工具可以制作簡單的GIF動(dòng)畫，實(shí)現(xiàn)圖片動(dòng)態(tài)展示效果。

(四)批處理動(dòng)作，提高效率。Photoshop提供了一些自動(dòng)化的功能，可以極大提高網(wǎng)頁的制作效率。如“批處理”、“動(dòng)作”、“腳本”、“歷史記錄”等，這些功能相互配合更加實(shí)用。如像冊網(wǎng)站，像冊網(wǎng)站、產(chǎn)品展示網(wǎng)站等，一般是先展示各圖像的縮略圖，然后鏈接相應(yīng)的大圖。當(dāng)需展示的圖像較多時(shí)，制作縮略圖也是一件很大的工程。合理利用Photoshop的批處理功能可以提高制作速度，減少設(shè)計(jì)者的工作量。

四、Photoshop設(shè)計(jì)網(wǎng)頁技術(shù)要點(diǎn)

(一)實(shí)用參考線來準(zhǔn)確劃分頁面結(jié)構(gòu)。參考線在頁面布局中的主要作用就是位置對齊，每個(gè)網(wǎng)頁中大布局下，都分為很多子模塊，子模塊與子模塊之間水平或者垂直地對齊，就要靠參考先來調(diào)整。

(二)合理使用圖層及圖層組，使圖層結(jié)構(gòu)清晰。使用Photoshop設(shè)計(jì)網(wǎng)頁，使用的元素非常多，一個(gè)大型的網(wǎng)站，元素和圖層會(huì)超過上千個(gè)。根據(jù)布局位置的不同，把同一布局位置的元素整理到統(tǒng)一圖層文件夾里，會(huì)避免元素的混亂。

(三)注意頁面的合理用色和顏色之間的搭配。網(wǎng)頁的用色分為主色、輔色和點(diǎn)睛色，若顏色搭配不合理，整個(gè)畫面的效果就會(huì)大打折扣。其中尤其是要注意冷暖色系的配比，以及點(diǎn)睛色的緩沖作用。

(四)注意網(wǎng)頁字與效果字的設(shè)置。頁面的兩大組成元素是文字和圖片，處理好文字的效果，網(wǎng)站的設(shè)計(jì)就成功了一半。在設(shè)計(jì)中，所有起到總領(lǐng)、區(qū)域說明的文字，都應(yīng)該設(shè)置一個(gè)文字效果，從而使這些有全局功能的文字更加明顯。

(五)注意圖片在畫面中的位置。圖片的擺放，直接影響到一個(gè)網(wǎng)頁的視覺效果，合理抓住主次關(guān)系，讓圖片的擺放做到層次鮮明，比例勻稱。

Photoshop與Dreamweaver的結(jié)合越來越緊密，圖像是網(wǎng)頁必不可少的重要元素。在網(wǎng)頁設(shè)計(jì)中，充分利用好Photoshop的特有功能，不僅可以美化網(wǎng)頁，提高網(wǎng)頁的下載速度，還可以提高制作網(wǎng)站的效率。

[參考文獻(xiàn)]

[1]《圖像大師Photoshop CS》.西南師范大學(xué)出版社.

[2]《中文版Photoshop應(yīng)用基礎(chǔ)教程》.上?？茖W(xué)普及出版社.

[3]《BEWEB初級網(wǎng)站設(shè)計(jì)工程師培訓(xùn)教材》.電子工業(yè)出版社.

[4]《網(wǎng)頁制作基礎(chǔ)教程-Dreamweaver CS4》.電子工業(yè)出版社.

[5]《網(wǎng)頁設(shè)計(jì)與制作》.中國水利水電出版社.

中圖分類號：TP393.092；TP317.4

文獻(xiàn)標(biāo)識碼：A

文章編號：1006-0049-(2016)11-0224-01