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

前面的入门篇和提高篇[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主要以矢量绘图为主，而且主要用于处理Web图像，现在逐渐在位图编辑上也增加了很多功能。它最大的好处就是和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...