网页美工学习设计经验总结

一、配色 

    其实对色彩的感觉是设计师应具备的最基本素质，其作品不管是对网页界面、系统界面、还是产品包装等等都有广泛应用。基本的一些理论，什么冷暖色、对比色/补色、色彩心理、搭配原则等等，满大街都是，有意者随便搜一两篇看看就行。色彩对于美工设计师来说，更重要的是一种感觉，就像打篮球投篮的手感一样，多看，多练，这种感觉是可以后天练出来的。Mars刚接触设计时，连坐公交车时也会注意路边某公司、饭店的招牌是如何配色，处处留意生活中色彩搭配的美，关于色彩截图就更记不清有多少张了。 

    Mars觉得，设计师对颜色的运用一般有这么几个阶段： 

    初级阶段：用自己首映感觉最好的1~2种颜色，不考虑其他因素、他人感觉；

    过度阶段：开始感觉一两种颜色单调，尽量多尝试不同色彩，该阶段极容易出现没目的的乱搭现象； 

    成熟阶段：该阶段了解了大众对色彩的审美，开始理性的用1~2种色系搭配，能体会到同种颜色不同色值的细微差别，大多设计师都在这个阶段； 

    终极阶段：把一种色彩用至极致，甚至只用黑白灰，完全沉浸某种颜色，甚至有点变态，但其创作效果让处于第三阶段的设计师一看就是大师所为。 

    其实这也是个不断练习积累的过程，这样色彩的感觉才会提升。

二、布局 

    美工设计师除了对色彩要有好的感觉外，对布局也要有很好的把握，组合的好坏直接影响作品的效果。其实做好布局设计也不是很难，无非就以下几步： 

    布局准备：明确你表达内容的主体部分需要哪些必要的文字和图片。不要考虑太多细节。 

    布局版式：关于布局的版式多种多样，在将重点内容放在最显眼的前提下，可自由选择版式。对于网页来讲，根据大多数人从上到下、从左到右的浏览顺序来考虑，应该将最主要的内容、图片等放在页面的左边和上边。 

    精细布局：整体配色、字体、各模块的间距、插图、增减内容等各个方面的推敲。这一步是细活。 

    Mars觉得最锻炼布局的方法是制作PPT。想把PPT制作美观、精简并不是件容易的事。对于软件行业的售前来说，如何制作漂亮的PPT应该是他们自我内修的一门必修课。PPT的布局做好了，其他网页、宣传册等平面布局应该都信手捏来。

三、细节 

    至理名言“细节决定成败”，在设计领域了这句话更显得重要。很多细节可能会被浏览者忽略，但对设计师来说绝不可放过，比如背景色、色彩渐变、各组件间间距、标题样式、高亮样式、字体/大小/颜色、行/段间距、插图位置/边缘处理、输入框宽高/边框色/背景色、按钮的位置等等太多了。还是之前的话，只有你看得多了，比较得多了，才能看得出这些细节。有人觉得这些细节没有什么大碍，但多个细节组合在一起就和让人觉得不舒服。

    举例说一下，以下是某系统里一篇文章下面的添加批注表单。上半部分是没有经过美化、由程序员直接写的程序（上图），下半部分是有设计师协助设计美化完成的表单界面（下图）。

    一般正常审美的人肯定觉得下面的好看，但却不知好在哪？听Mars从各个角度详解一下： 

    配色：字体颜色像是直接从32色板上取的，没经过考究；表单边框色太重；表单背景与页面背景相同，没突出层次。 

    布局版式：此组件又没有多行操作，无需使用列表形式；上图保存按钮在该组件标题之上俨然不合理；组件的标题的位置大小不够醒目。 

    用户体验：明确这是一个系统里的界面组件，所以这个人既然都登进来了，还用填记录人吗？时间也肯定就是提交时间啊；提交人主要是提交自己的批注，所以给他提供大片的提交内容的输入框即可，简单明了；提交按钮，上图需要再填完批注内容后折回到左上角“保存”显然不合理，下图的界面大大方方右手边一个按钮，看起来明显，操作起来舒服。 

    以上几方面都是关于个人审美观方面的提升，如果你不是打算进行美学研究，我觉得过多的纯理论学习不会对你的审美观有太多提高。所以我的建议就是：多看，多模仿，多做，多比。切忌自己没有什么审美观就盲目创作，其实模仿没什么可耻的，是学习的毕竟阶段。好比有人模仿 MJ跳舞，尽管不是很像，但最少会得到一小部分人的喜爱和追捧，比如在某校/班的圣诞晚会上；而如果不了解大众审美，就很可能像芙蓉姐姐跳舞，只会是笑料罢了。养成良好的审美观可以运用到生活的方方面面，而生活的方方面面也锻炼你的审美观，像摄影、布置自己的房间办公桌、服装的搭配等，能提高你的生活品味。

四、心态 

    在累计阶段，心态平和、踏实耐心，切忌急躁，美工本身就是细活，着急是没用的。有了基本的审美观，需要创作时心情放松，做些想做的事，吃点想吃的东西，随心所欲，给提供自己创作灵感环境。不要意味的坐在电脑前去想，事倍功半，会把自己郁闷死。 

五、技能 

    有了良好的审美基础和创意，接下来就是制作了。相比较审美观的培养和创意的来临，Mars觉得一些工具技能是很好学得，无非就是我用铅笔、还是毛笔画的问题。大概介绍下Mars接触到的工具： 

    制图技能：Photoshop（平面处理等）、Illustrator/CorelDraw（矢量图）、Flash（动画）、Premiere Pro （影视后期）等等这些只是应用的工具； 

    页面编程技能：html、css、JavaScript等； 

    优化技能：压缩图片、网页优化等。 

    以上工具网上的教程一抓一大把，推荐网易教程。可以找些基础的看一下，一回生二回熟，平时多用即可掌握，更深的技巧可以日后用到再研究完善，要边用边学，这样记忆深刻。 

六、用户体验 

    用户体验一般出现在网页设计和系统界面设计里，是用户和人机界面的交互过程，界面操作的易用性，直接影响了用户对该款产品的印象。用户体验是对美工更高的一个要求，甚至有点儿超越美工的范畴，但只有美工了解这些才能更合理地设计界面布局，整体搭配等等。 

    Mars知道用户体验的重要性，但深入学习的还不多，但Mars会在看别人网页、系统的同时记录那点有着方便，很在下次自己的设计中体现出来，算是一个模仿阶段吧。这也是Mars一向的学习方法。

第二篇：网页美工实践设计

网页美工与广告 设计说明书

姓 名： 王 忠 宁 学 号： 20111290131 班 级： 11电商1班 指导教师： 李 淑 娟 完成日期： 20xx年6月25日

设 计 要 求

目录

第一章 网页美工与网页制作的关系 ............................................................................................. 1

1.1网页与平面构成的关系 .................................................................................................... 1

1.2网页与色彩的关系 ............................................................................................................ 1

1.3网页与版面设计的关系 .................................................................................................... 2

第二章 photoshop的基础应用 ....................................................................................................... 3

2.1选区选择工具 .................................................................................................................... 3

2.2钢笔工具 ............................................................................................................................ 3

第三章 flash基础应用 .................................................................................................................... 4

3.1flash特点 .......................................................................................................................... 4

3.2flash动画的制作 .............................................................................................................. 5

参考文献........................................................................................................................................... 5

网页美工与广告设计说明书

第一章 网页美工与网页制作的关系

1.1网页与平面构成的关系

对于一个网页来说，网页的平面构建尤为重要。网页的平面构成设计中要注意三个方面：

（1）布局要新颖

所谓布局就是指界面的平面分布安排，即将繁杂的内容进行条理化、秩序化的编辑处理，将其组织成一个结构合理、版块搭配适度的页面。其中，新颖的形式感非常重要，要根据不同内容的特点来决定版面的最终形式感。虽不能说“牵一发而动全身”，但“减之一分则少，增之一分则多”的版面处理是应该大力提倡的。

（2）对比要强烈

加强页面的对比因素，是吸引人们关注的有效手段。页面上的各种文字、图片在设计时就应构思好相互之间的对比关系，要大小参差变化、疏密衬托有致、轻重感觉均衡、明暗对比适度。设计上的别具一格，对页面设计的成功与失败起着至关重要的作用。

（3）变化又统一

对版块外形特征的选择应遵守变化统一的设计原则，既不刻意追求外形的变化，使版块分割繁琐凌乱，又不简单划分版面界限，使得页面显得单一刻板。所谓“万变不离其宗”，反复的比较、精心的安排、整体的权重是设计好网页的基本要求，同时也是网页设计的最终选择。

1.2网页与色彩的关系

从色彩学的角度来审视网页设计，色彩运用的好坏直接影响到网页的整体效果。在庞杂的网页界面中，色彩运用得越简洁、完整，对人们的吸引力就越强。成功的网页设计，都遵循了色彩运用的规律，其优美的色彩往往是吸引人们关注的重要因素之一。

（1）对比与和谐

网页版面中的色彩，首先要强调对比。色彩对比如果不到位，整个页面就会显得灰 1

暗，没有生气。在对比的同时还要注意和谐，不和谐的色彩对比是对色彩运用不成熟的变现。色彩对比与和谐的方法很多，例如：色彩三要素的对比；类似调和构成、色彩的调和与面积形状的关系、色彩的调和与视觉生理平衡等。

（2）色彩的肌理

肌理主要指的是物体表面的结构特征，色彩肌理主要是观者通过观察来“触摸”物体表面色彩的一种色觉感受。由于材料表面的组织结构不同，吸收与反射光的能力也不同，因此材料能影响物体表面的色彩。一般来说，反光能力强的物体表面都很光滑，反映的色彩不够稳定，但明度有提高；粗糙的表面反光能力很弱，色彩较稳定，如果表面粗糙到一定程度，明度和纯度会有一定的降低。因此，同一种颜色用在不同的材料上会产生不同的颜色效果，这就是肌理对色彩的影响。

同时，无彩色与有彩色的相互作用、绘画色彩与设计色彩的关系也是应该注意的。另外，在网页设计时既要考虑到页面整体风格的协调统一，还要兼顾将要添加到网页中的内容形式，而且网页中的内容应当清晰且适宜浏览，所以不要使用太耀眼的颜色或太朦胧的效果，除非有特殊的需要。

1.3网页与版面设计的关系

网页排版。网页排版是网页制作不可缺少的操作，因为对于网页来说，布局可以说是它的灵魂，如果没有页面的合理布局，就无法将创作表现在网页上，即无法体现网页元素的整体形式美感。

目前，绝大多数网站都包含文字、图片、符号、动画、按钮等内容，其中又以文字和图像所占的比重为最大，这是因为网站的主要目的是信息的传递，文字是传递信息最有效的方式，而图像则是辅助文字说明的最佳拍档。因此，文字和图像与其他页面元素的排版，是整合整个网页的重要手段，也是信息传递的重要体现。

总之，网页设计是一个既需要技术但更需要艺术审美能力的工作，只有在掌握了美术的基础知识和基本技能后，再充分利用计算机技能去加工制作，才能设计出趋于完美的网页。

2

第二章 PHOTOSHOP的基础应用

2.1选区选择工具

1、魔术棒法

使用方法：

（1）点击“魔术棒”工具；

（2）在“魔术棒”工具条中，在“连续”项前打勾；

（3）“容差”值填入“20”。（值可以看之后的效果好坏进行调节）；

（4）用魔术棒点背景色，会出现虚框围住背景色；

（5）如果对虚框的范围不满意，可以先按CTRL+D取消虚框，再对上一步的“容差”值进行调节；

（6）如果对虚框范围满意，按键盘上的DELE键，删除背景色，就得到了单一的图像。

2、色彩范围法

使用方法：

（1）颜色吸管拾取背景色；

（2）点击菜单中“选择”功能里的“色彩范围”功能；

（3）在“反相”项前打勾，确定后就选中图像了。

3、 磁性索套法

使用方法：

（1）右击“索套”工具，选中“磁性索套”工具；

（2）用“磁性索套”工具，沿着图像边界放置边界点，两点之间会自动产生一条线，并黏附在图像边界上。

（3）边界模糊处需仔细放置边界点。

（4）索套闭合后，抠图就完成了。

2.2钢笔工具

钢笔工具法步骤如下：

3

1、索套建立粗略路径

（1）用“索套”工具粗略圈出图形的外框；

（2) 右键选择“建立工作路径”，容差一般填入“2”。

2、钢笔工具细调路径

（1)选择“钢笔”工具，并在钢笔工具栏中选择第二项“路径”的图标；

（2)按住CTRL键不放，用鼠标点住各个节点（控制点），拖动改变位置；

（3)每个节点都有两个弧度调节点，调节两节点之间弧度，使线条尽可能的贴近图形边缘，这是光滑的关键步骤；

（4)增加节点：如果节点不够，可以放开CTRL按键，用鼠标在路径上增加。删除节点：如果节点过多，可以放开CTRL按键，用鼠标移到节点上，鼠标旁边出现“—”号时，点该节点即可删除。

3、右键“建立选区”，羽化一般填入“0”，，

按 CTRL+C 复制该选区；

新建一个图层或文件；

在新图层中，按 CTRL+V 粘贴该选区，这样就OK了！

取消选区快捷键：CTRL+D

第三章 FLASH基础应用

3.1flash特点

（1）矢量图形系统

使用Flash创建的元素是用矢量来描述的。与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量。

（2）流式播放技术

流式播放技术使得动画可以边下载边播放，即使后面的内容还没有下载到硬盘，用户也可以开始欣赏动画。

（3）Flash动画文件容量小

通过关键帧和组件技术的使用使得所生成的动画(.swf)文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，使得动画可以在打开网页很短的时间里就得以播放。用户只要为自己的浏览器安装一次插件（Flash Plug-in），以后就可以直 4

接观看动画

（4）支持MP3数据流式音频

可以将MP3音频压缩格式的文件直接导入Flash中，将音乐、动画、声效等融为一体。

（5）增强的Flash交互功能

Flash使用ActionScript语句，增强了对于交互事件的动作控制，使用户可以更精确、更容易的控制动画的播放。

3.2flash动画的制作

首先，搜集图片，选取了合适的图片进行编辑，调整它的大小以适应flash中的舞台的大小。然后在进行替换颜色，因为flash是插到网页中的，所以必须与网站的主题相统一。以上是背景图片的选取，然后选择与网页各栏目相统一的图片再进一步的调整。

用photoshop设计网页的logo和广告语。这样，flash的所有素材就准备就绪了。然后导入到库，进行网页片头的设计。在设计中要注意将原图像转化为原件在进行编辑，做完以后，要保存成fla格式的，以便于修改，然后还要导出影片保存成swf格式的，以便于插入网页中。

参考文献

[1]edcvgyuikl.百度文库. /view/a114f8ee4afe04a1b071de5f.html

[2]郑华,林芳.Photoshop应用设计[M].北京：清华大学出版社,2010-09

[3]周雄俊.Flash动画制作技术[M].北京：清华大学出版社,2011-01

5

信息工程学院

《网页美工与广告》实践考核报告单0704410