首先我要強調，本人有8年的網頁設計經驗，並且曾在香港一流的廣告公司做過美術指導。說這個並非要炫耀本人的設計能力有多厲害，而是因為我看到谷歌上瀏覽量很好的網頁設計觀點其實並不是很專業，這樣會對初學者帶來很多錯誤的指引。如果你能看到我寫的內容，那就以我的為準，因為以下我所說的內容，就是一個有過實戰經驗的設計師經驗。

什麼是網頁設計師?

對於網頁設計師，很多人對它的稱呼會有些不一樣，比如：網站設計、網頁美工、網站建設等，名字叫法不一樣，性質也會稍有差別。

雖然說，三者在某時候所表達意思基本一樣，但是設計師往往很反感別人叫他網頁美工。感覺上美工的意思有點像軟件操作員，但是設計並不是軟件操作怎麼簡單，他還包括審美、創意、設計理念，所以一個優秀的網頁往往會體現出設計師的思想。

至於網站建設，其含義與網頁設計並非一個概念，建設一個網站並非只是網頁設計師的工作，而是需要前端設計師和程序員共同完成的。前端設計師(即網頁設計師)只需要完成前端設計部分，使網站的內容更生動，為用戶提供更好的使用體驗;而後台程序則是由程序員來完成。網上很多帖子里所說的網頁設計包含後台程序這部分，是不正確的。

網頁設計軟件有哪些?

網頁設計既是一門藝術，也是一門科學，所以一位出色的網頁設計師除了擁有優秀的鑒賞設計能力外，還要懂得網頁設計師必備的硬技能——軟件操作。一般來說，網頁設計師最常用到的軟件是photoshop、dreamweaver、FLASH。

圖片處理軟件——photoshop

儘管市面上有各種不同的圖片處理軟件，但Photoshop仍然是眾多網頁設計師最喜歡用的軟件之一。Photoshop主要處理以像素所構成的數字圖像，其功能強大，適合圖像掃描、編輯修改、圖像製作、廣告創意，圖像輸入與輸出於一體等範疇。

想學好Photoshop，需要掌握哪些技巧?

① 零基礎階段：

如果你只知道Photoshop能做出很多炫酷，amazing的效果，但對PS操作層面仍然處於小白階段。那你就應該掌握Photoshop左側工具欄的使用，以及右側圖層、蒙版、通道面板的基礎概念只是。當然，你還需要一些必要的實際案例，去輔佐你認識這些工具。

② 進階階段

如果你已經基本熟悉Photoshop工具的大致使用，就可以開始熟悉頂部常用的編輯、圖像、圖層，濾鏡等菜單的運用，以及效率相關的「視圖菜單」工具命令的使用。這些命令菜單雖然使用頻率不及左側工具欄，但還是可以做出很出色的效果。

③ 專業階段

如果對以上的基礎內容都已經運用得非常靈活，就可以進入專業領域學習技法基礎。這時候你就需要考慮到底學Photoshop是幹什麼用?是做出色的設計師，還是時尚的修圖達人，亦或是繪畫高手?因為方向不同需要掌握的只是技巧也有着微小的差異。

(1)繪畫插畫類

繪畫插畫類的主力工具就是畫筆工具，通常還需要用到手繪板。不同材質的筆刷、畫筆參數預設，這些才是就需要重點掌握的知識。雖然使用的工具很簡單，但是要成為繪畫高手，就肯定需要熟能生巧地「刻意練習」。

(2)UI設計類

想學UI設計的同學，就需要掌握Photoshop的路徑工具、直接選擇工具、圖層樣式、路徑操作的布爾運算，相關知識點的技巧是最為迫切的。UI設計的界面圖標、icon繪製，都應該力求盡量做到矢量化。

(3)PS修圖類

在Photoshop重要的修片調色主力工具，主要包括以下幾組：修復工具組、畫筆工具組、仿製圖章，以及圖像調整命令(或調整層)，當然少不了Photoshop附帶的Camera Raw濾鏡，配合調整圖像的色彩光影關係。

(4)平面網頁設計類

對於平面、網頁設計類的工作，基本上Photoshop什麼工具都會用到，不會像UI設計或者插畫繪製那麼幾種，但是如果要想把這工作做好，還需要深入學習一些排版、色彩理論、品牌設計相關的知識。

網頁編輯軟件——Dreamweaver

大家試想下，如果效果圖做好直接上傳到服務器上，讓用戶訪問行不行呢?直接訪問當然可能，但是如果他只是一張圖片就會出現很多個弊端：

① 影響網站加載速度;

② 用戶體驗不佳;

③ 不利於搜索引擎優化;

④ 無法與後台程序交互。

為了解決以上的弊端，這時候你就需要使用Dreamweaver編輯網站。Dreamweaver是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，很多人對Dreamweaver的印象，僅僅是停留在網站佈局方面。但Dreamweaver還有很多強大的功能，能大大提升Web前端開發效率。

想學好Dreamweaver，需要掌握哪些技巧?

① 連接窗口

實現窗口連接的技巧是用鼠標拖住窗口的tab欄，而不是標題欄。試着點擊鼠標拖住一個窗口的tab欄並掠過另外一個窗口，當看到出現一個黑色邊界時，鬆開鼠標按鈕，你會發現2個窗口已經結合在一起了。現在你就可以照此方法連接任意多的窗口，最終合并到一個窗口中，如此就能節省大量的屏幕空間而看到實際的工作情況。但是請注意：裝載器窗口、屬性窗口以及站點窗口是不能被連接的。

② 數據輸入

Dreamweaver允許你將數據直接輸入到表格中，這樣就比一次次地剪切、粘貼內容到單元格中容易許多。但是如果要輸入的數據中含有插入/表格數據命令時，就會有些麻煩。很不幸，Dreamweaver只能輸入具有分隔符的.txt文件。如果要處理Word或者Excel文件，可以先將它們輸出為.txt文件，然後再輸入進Dreamweaver中。你會發現這樣的處理方法簡直象夢一樣美妙!

③ 刪除, 恢復，重複

輸入數據到表格能夠節省大量的操作時間，但是Dreamweaver中最有用的一個功能是它的歷史窗口。在這個窗口中，一旦打開文檔，隨後執行的每一個操作都被記錄下來，這樣，你就可以跟蹤操作行為並且簡單地undo或者重複最後一步。只需要選中歷史窗口中的最後一步然後按下Delete鍵，或者拖曳滑動指示器到某一步一次刪除幾個步驟。同樣，點擊窗口中的Replay按鈕再次執行某一步。

④ 添加更多性能

通過使用extensions，你可以為Dreamweaver添加更多的性能。許多開發者創建extensions並免費提供給更多的人使用。你可以訪問Macromedia的站點與大家進行作品交換。當運行Dreamweaver時，選擇「命令/獲取更多的命令」，就會自動啟動瀏覽器並轉到交換站點。在開始收集所有的新技巧前，首先下載 Extension Manager，它將跟蹤extensions變得輕而易舉。

⑤ 創建相冊

為許多圖形一次性建立縮圖是一個單調乏味的工作，特別當你不是一個有經驗的圖形專家時。沒有關係，Dreamweaver具有一個新功能，它能象你的一個圖形設計助手一樣，按照你的要求完成縮圖設計工作。你告訴Dreamweaver哪個文件夾中包含圖形後，它就會為其中的每一個圖形創建一個縮圖、創建一個包含完整圖形的頁面以及一個存有所有縮圖的索引頁面。為了使用這個功能，你需要首先安裝fireworks。

動畫製作軟件——FLASH

FLASH是一種動畫創作與應用程序開發於一身的創作軟件，大家都知道，動態的東西肯定會比靜態的顯眼，生動，而FLASH也能作出完整的動態網站。因此，很多大品牌的活動專題、產品專題等都喜歡採用Flash製作生動有趣的動態網頁。

另外，FLASH還能用於網絡廣告的製作以及二維矢量動畫製作，因此這個職位非常缺人，工資待遇也非常高。

想學好FLASH，需要掌握哪些技巧?

① 遮罩的高級應用

深入理解遮罩，可產生一些很酷的效果。如：把靜止的文字作為遮色片，移動漸變的小花紋圖作為MASKED，可在文字輪廓內顯示出小花紋的流動效果;把文字塊保持靜止，而不規則的遮色片逐漸擴張，能使文字產生一種不規則出沒的效果;把產生移動漸變的文字塊作為遮色片，利用與背景顏色一致的漸近色塊作Show Masking，能讓文字塊產生一種淡入淡出的朦朧效果等等，這就看你的想像力和創意了。

② 位圖的矢量化和矢量圖的簡化

矢量圖容量小，放大無失真，在Flash上應用有無可比擬的優點。很多軟件都可以把位圖轉換為矢量圖，但實際上Flash 5已提供了把位圖轉換為矢量圖的方法，簡單有效。

③ 精確控制變形

在兩個對象間做「Shape」變形時，是不是有時有種怪怪的感覺，覺得在亂變，不是柔和地變化。其實只要小心地處理一下就行了：選取「Shape」變形的第一幀，按「Ctrl+H」就可加上一個變形關鍵幀，同時在變形的最後一幀也會同步出現相應的關鍵幀。適當地選擇關鍵幀的數量，調整關鍵幀的位置，就可實現精確的變形效果。

④ 音效的編輯技巧

在Frame Properties對話框的「Sound」選項中拖動那個小方塊，就可實現音效的音量大小、淡入淡出等效果，一切就這麼簡單。

⑤ 輸出GIF、AVI和MOV的問題

有的愛好者喜歡用Flash製作GIF動畫，或因其他用處，需轉換為AVI或MOV格式。但有時發現許多動畫信息都無故丟失，究其原因是Flash動畫中應用了Movie Clip。準確地講，這不算一個技巧，但往往會讓一些初學者困惑。根本的解決辦法只有一個，那就是動畫中不要用Movie Clip。當然你別再指望生成的GIF、AVI或MOV動畫能支持SWF文件的交互了。

⑥ 網頁中FLASH動畫的透明和無邊框處理

按「Ctrl+Shift+F12」彈出「Publish Settings」對話框，在「Window Mode」下拉框選「Transparent Windowless」即可。但要注意，其效果是在HTML頁面中加入的，並非Flash文件本身具有這一屬性。

網頁設計既是網站的靈魂，也是一門藝術。不是所有設計師都能將網頁設計體現得淋漓盡致，尤其是用戶對網頁的要求越來越高，這就需要網頁設計師不斷提升自己的能力，拓展自己的設計思路與創意。