應用Photoshop設計網頁的初步探討

劉　業

山東龍口礦業集團高級技工學校，山東　煙臺　265700

應用Photoshop設計網頁的初步探討

劉業

山東龍口礦業集團高級技工學校，山東煙臺265700

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

關鍵詞：網站建設；Photoshop；網頁；Internet

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

一、Photoshop軟件簡介

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

二、Photoshop在網站設計中的地位

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

三、Photoshop在網頁設計中的作用

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

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

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

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

四、Photoshop設計網頁技術要點

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

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

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

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

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

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

[參考文獻]

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

[2]《中文版Photoshop應用基礎教程》.上海科學普及出版社.

[3]《BEWEB初級網站設計工程師培訓教材》.電子工業出版社.

[4]《網頁制作基礎教程-Dreamweaver CS4》.電子工業出版社.

[5]《網頁設計與制作》.中國水利水電出版社.

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

文獻標識碼：A

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