我的WebDesign之路--提高篇[3] (轉)

我的WebDesign之路--提高篇[3] (轉)[@more@]

前面的篇和提高篇[1],[2]都偏向於的使用和一些程式碼的編寫。而接下來要說的是網頁影像設計，是屬於藝術設計範圍的。不知道大家是否習慣這樣的思維轉換呵呵。

  網頁設計師介於員和設計師之間,抽象思維和形象思維同樣重要:)

  應該說，網頁美工是提高階段最重要的一部份，也是最精彩的一部份。因為我們訪問一個站點時，首先留下的就是在視覺上的"印象"。創造出夢幻般的、具有強烈視覺衝 擊力的網頁，是每一個網頁設計師的夢想。要做到這一點，不僅靠熟練的影像  設計技術，更重要的在於你的想像力和創意。只要你腦中能夠想像得出的畫面，不管 多麼瑰麗複雜，都可以在網頁上得以實現(當然，實現的程度受你的水平所限:p)，實際上，如果原來就有良好的美術基礎，通常學習網頁設計之後，作品都是非常精美。
  因為對於設計的感覺總是要慢慢地,慢慢地積累起來。。

  我主要學習的有這三個方面的知識：
 
  1． 關於顏色的基本知識；
  2． 影像相關知識；
  3． 掌握常用的影像設計軟體的操作；
  4． 掌握網頁美工和一般的計算機影像設計之間的不同之處，學會將影像設計軟體與網頁製作軟體結合使用。
  5．UI設計的相關知識。

  1,2都是CG(computer graphic)的必備知識，如果你是一個CG高手，不妨直接跳到第四點看看:p

  首先，有關顏色的基本知識：

  1． 光源色，物體色，三原色；
  2． 色相-色調體系。

  色相-色調體系是結合顏色的3種屬性(色相，亮度，對比度)並根據人類心理的角度對顏色進行分類的體系。例如紅色，常與鮮血，火焰，危險，戰爭，狂熱等相聯絡， 而橙色給人一種朝氣活潑的感覺，還有黃色讓人覺得明朗愉快等等。 如果精通色相- 色調體系，懂得每種顏色在人類心理方面大致的效果，可以大大提高實際設計水平， 很快地策劃出合理的設計方案。另外在很多設計軟體中都有色調曲線，這是一個非常重要的工具。

  3． 顯示器顏色的混合原理-RGB顏色和印刷顏色的混合原理-CMYK顏色;

  其中RGB是網頁配色的基礎。

  4． 216網頁色；

  5． 學會使用調色盤；

  有以上顏色知識大致就夠了，其他的大家可以自己去學，特別是對CG有興趣,不想拘泥於網頁影像設計的同學。學習這些的目的在於形成對顏色的靈敏的感覺，學會如何精確地控制顏色，進而隨心所欲又恰到好處地進行網頁配色。

  二。網路影像相關知識；

  1) 點陣圖，向量圖的概念，各自的特點；

  2) 網路上常用的圖片格式；

  GIF,JPG,PNG三種，其中GIF和JPG的應用最為廣泛。
  要清楚每種影像格式的特徵，優缺點，使用範圍。另外，網頁上的影像還有一些特有的稱謂如Logo,Banner等，要熟悉常見的尺寸規格。

  三。主流影像設計軟體的使用。

  通常我們常用的是Photoshop,Fireworks。

  //如果是三維影像的話可以用Swift 3D,或者Cool 3D，或者是很複雜的就用3DMAX吧。如果要繪製向量圖，可以用CorelDraw, Illustrator, Freehand。相對來說向量圖在網頁設計中較少直接使用，通常在flash中繪製，然後嵌入網頁，如果是與flash結合，推薦使用Freehand。

  //有關3D和Flash在網頁設計中的應用以後再細說。

  主要說photoshop和Fireworks。

  先說Fireworks，因為我是先學Fireworks再學photoshop的呵呵。我當初學的是Fireworks3.0 ，現在已經都到了MX版本了。 Fireworks主要以向量繪圖為主，而且主要用於處理影像，現在逐漸在點陣圖編輯上也增加了很多功能。它最大的好處就是和Dreamweaver結合得非常好。有時候可以大提高。另外，一些和網頁設計相關的技術也很誘人。

  在影像容量，Gif動畫製作上也比Photoshop略優一些。處理相同的影像，在取得相同視覺效果時，檔案容量比用PS最佳化得到的小。PS繪製GIF動畫時要另外開啟ImageReady比較麻煩。

  後來，我發現有時候用Fireworks來處理較大的平面影像時有些吃力,於是開始學Photoshop :)

  Photoshop的大名，相信大家都耳熟能詳了。其強大的功能確保了它在影像設計軟體界佔據了無可爭議的首席，任何一個高明的影像設計師都無法繞過它。像Photoshop 這樣的點陣圖設計和編輯軟體，我們需要特別掌握的有圖層，蒙版，通道，色調曲線,  濾鏡等，最終目的在於能夠自由地控制影像上的每一個畫素點-這是一個很高深的境界了呵呵。。而對於CorelDraw, Illustrator, Freehand這樣的向量軟體，路徑的概念和貝塞爾曲線工具是最需要掌握的。

  //注意體會點陣圖處理軟體和向量圖處理的繪圖思想的不同。

  學習軟體的操作包括熟悉常用的工具，皮膚等等,這通常都不難。 在掌握了基本的操作之後，可以參照網路上的一些例項作品教程，一步步實現，在實戰中得到提高。這個方法也適用於學習其它的設計軟體呵呵。

  //注意切忌對照那種大部頭的書先把軟體所有的操作學一遍，再開始動手畫例項，那樣太浪費時間了，而且讓人很沒有成就感,很難堅持學習下去呵呵。。

  另外，真正精通一個設計軟體之後，學習其它的軟體也會很容易上手。學到深了，很多東西都是相通的(基本繪圖思想都是一樣的，只不過在操作上會有些區別，還有一些特有的功能等)。 真正的高手，是不會拘泥於某個軟體的，一般都同時會用好幾個設計軟體，就是這個道理。

  有關軟體的使用就不多說了，只要能夠堅持，還是較容易掌握的。

  四。網頁美工和一般的計算機影像設計之間的不同之處；

  1)  網頁圖片因網路傳輸速度的限制，在保證圖片效果的同時，必須儘量減少圖片 檔案容量；WEB影像的解析度通常設定在72dpi/inch左右，而諸如Photoshop或 Pagemaker做的印刷圖片之類卻必須要保證足夠的解析度(如300dpi/inch )，一 般不在意圖片檔案的容量大小。

  2)  網頁中要用到大量容量很小的平面動畫，令深3DMAX的三維動畫高手也有虎落平原之感。 (以後再細說呵呵。)

  3)  網頁美工同時要求對網頁設計、排版等有一定熟悉程度，有些頁面的排版和美  工甚至已完全融合。

  但是，良好的美術基礎和美感仍是最重要的，就算對常用網頁繪圖軟體用得再熟， 但卻鮮有創意的話，亦難以成為優秀的網頁美工師。

  五。UI設計的相關知識

  UI (User Interface) Design(互動介面設計)是屬於工業設計的範疇。網頁設計很多時候也是一種UI設計，特別是有互動應用的時候(例如一個使用者登入介面)。我們既需要設計也美觀的互動介面，又要注意到易用性，易操作性。學些UI Design方面的知識，學會科學的設計流程，例如分析需求，設計, 調研驗證, 方案改進等等，可以保證設計出美觀又規範實用的站點。

 
  to be continue...