前面的入门篇和提高篇[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...