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

劉　業(yè)

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

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

劉業(yè)

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

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

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

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

一、Photoshop軟件簡介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[參考文獻]

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

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

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

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

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

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

文獻標識碼：A

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