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

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

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

一、配色

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

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

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

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

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

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

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

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

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

布局版式：关于布局的版式多种多样，在将重点内容放在最显眼的前提下，可自由选择版式。对于网页来讲，根据大多数人从上到下、从左到右的浏览顺序来考虑，应该将最主要的内容、图片等放在页面的左边和上边。精细布局：整体配色、字体、各模块的间距、插图、增减内容等各个方面的推敲。这一步是细活。

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

三、细节

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

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

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

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

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

用户体验：明确这是一个系统里的界面组件，所以这个人既然都登进来了，还用填记录人吗？时间也肯定就是提交时间啊；提交人主要是提交自己的批注，所以给他提供大片的提交内容的输入框即可，简单明了；提交按钮，上图需要再填完批注内容后折回到左上角“保存”显然不合理，下图的界面大大方方右手边一个按钮，看起来明显，操作起来舒服。以上几方面都是关于个人审美观方面的提升，如果你不是打算进行美学研究，我觉得过多的纯理论学习不会对你的审美观有太多提高。所以我的建议就是：多看，多模仿，多做，多比。切忌自己没有什么审美观就盲目创作，其实模仿没什么可耻的，是学习的毕竟阶段。好比有人模仿MJ跳舞，尽管不是很像，但最少会得到一小部分人的喜爱和追捧，比如在某校/班的圣诞晚会上；而如果不了解大众审美，就很可能像芙蓉姐姐跳舞，只会是笑料罢了。养成良好的审美观可以运用到生活的方方面面，而生活的方方面面也锻炼你的审美观，像摄影、布置自己的房间办公桌、服装的搭配等，能提高你的生活品味。

四、心态

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

五、技能

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

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

页面编程技能：html、css、JavaScript等；优化技能：压缩图片、网页优化等。

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

六、用户体验

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

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

扩展阅读：网页美工设计说明书

网页美工与广告

设计题目：姓名：学号：班级：指导教师：完成日期：设计说明书

歪歪蛋创意生活网站美工的设计与实现王丹201*118012410图文孙俊国201*年6月18日

10级选修《网页美工与广告》卷二实践考核方案

课程名称：《网页美工与广告》课程编号：0704410授课班级：10级选修学分：3考核形式：实践考课程性质：专业课

一、考核目的

考核学生网页美工与广告设计的综合能力。

二、考核方式、内容、要求

考核方式：以课程设计做为主要的考核方式。

考核项目：自定一个网站主题。根据该网站，用Fireworks与Dreamveawer设计制作成xxx网站的主页与副页及其他页面。

要求：

1.要有网页美工的规划与设计。

2.设计出网页主页与副页效果图，并根据效果图制作网站中的其他页面，并自己设计LOGO、flash广告、栏目、导航、banner、网页内容；界面设计要美观，色彩搭配合理，有新意，超链接正确；网页中要有1个以上的Flash动画3.提交：index.pngfuye.png及网站（5张网页以上）；网页美工设计说明书。

三、考试说明与评分标准

2．评分标准评分标准主页美工设计要求：美观且有创意、内容完整、导航正确、有自己设计的评分标准与分值flash广告动画。副页美工设计要求：布局好，内容完整、导航正确，有1个以上的Flash广告动画设计说明书要求：格式正确、排版规范；分析到位、网页美工设计重点与难点分析深刻。用A4打印，6页以上。303040分值注：网页美工的作品与网站可借鉴其它作品，但严禁复制或他人代做，一经发现类同，按0分处理。执笔人：审核人：院长：

201*-5-5

目录

一、概述............................................................1

1.1选择缘由.....................................................11.2网页美工的定义...............................................11.3网页美工的作用...............................................21.4Firework....................................................21.5色彩的平衡与呼应.............................................3二、网页美工的总体设计..............................................3

2.1网页设计的制作流程..........................................32.2网站色彩布局.................................................42.3网站结构.....................................................62.4图片轮显的制作过程...........................................62.5滚动图片的制作...............................................72.6制作网页的主要内容...........................................72.7形成网页.....................................................7三、美工设计总结....................................................8

歪歪蛋创意生活网站美工的设计与实现

一、概述

1.1选择缘由

我用网页美工设计的网站是生活家居类的网站。

随着今年来家居业“重装饰、轻装饰”的潮流，家居设计从越来越有实用性的作用提升到装饰性的作用，家居行业被前所未有的“激活”了

家居产业发展前景光明。首先，以居民住房、宾馆饭店、旅游交通、医疗卫生等为代表的投资型和公共服务型消费热点，都将成为促进中国家居市场不断扩大的因素，随着社会的不断发展、人们生活的不断提高，人们对生活居住的要求不仅仅是为了挡风遮雨了，还加上了时尚、好看，这意味着人们对家居设计的商品越来越关注了，当前中国每年有1000万对新人结婚，因结婚产生的家居设计的消费额将十分可观。

各类的家居设计都与我们的生活息息相关，是生活中不可或缺的一部分,广阔的市场,巨大的消费群体对家居行业来说无一不是一个很好的良机。因此我选择了做家居设计方面的网站.

1.2网页美工的定义

网页美工就是对网页的美化，网页美工要熟悉photoshopfireworksflash等制图软件，也要有一个非常好的视觉功底，创意能力，才能创造出非常美观的页面

网页美工也用css来进行美化，css可以控制html标签的元素，当我们鼠标放在超级链接上的时候背景变色网页美工需要掌握DIV+CSS样式；基础HTML语言。

基础美术：素描（石膏几何体、静物写生）；色彩（色彩构成、简单色彩静物写生）

三大构成：色彩构成、平面构成、立体构成。

Photoshop网页配色及排版设计；Illustrator网页设计；网页设计综合、

经典网页解析。

1.3网页美工的作用

对于制作一个网页来说。网页美工起着举足轻重的作用，网页美工设计不单纯从事美术绘画，而需要定位软件使用者、使用环境、使用方式并且最终为软件用户服务，他们进行的是集科学性与艺术性于一身的设计，他们需要完成的，简单说来，正是一个不断为用户设计视觉效果使之满意的过程。

网页美工设计的职能大体包括三方面：一是图形设计，即传统意义上的“美工”。当然，实际上他们承担得不是单纯意义上美术工人的工作，而是软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量网页设计的合理性。

1.4Firework

在软件界，Fireworks指网页三剑客之一的软件。原为Macromedia公司所有。在Macromedia被Adobe兼并之后，Adobe又进一步发展了此软件，但是与Macromedia的风格差别较大。将来有可能被Photoshop等取代。现最新版本AdobeFireworksCS5.1。

fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可以将它输出为html文件，还能输出为可以在photoshop,illustrator和flash等软件中编辑的格式。

Fireworks提供专业网络图形设计和制作方案，通过它，你可以编辑网络图形和动画，支持位图和矢量图。同时它能dreamweaver、flash能实现网页的无缝连接，与其它图形程序各HTML编辑也能密切配合，为用户一体化的网络设计方案提供支持.

1.5色彩的平衡与呼应

1）色彩的平衡。色彩在页面中可以形成很多的效果，通过强烈的对比，可以突出页面的重点。还可以通过色彩调配，达到页面稳重度的改变。一般的情况下，页面上方的颜色总是很重，这样才能压住下面的颜色，如果不采取这种办法，整个页面将显得很不稳重，底下的文字图片，有飘出的意味。因此，要使整个页面显得很平衡，必须要有能镇住其他颜色的色彩。2）色彩的呼应。一种比较突出的色彩，如果很突兀地放在页面中，无论你是突出重点也好，还是logo图标，都给整个页面带来了副作用。为此，你必须在相对称的位置加上该色系（对于页面并不醒目）的色彩以呼应，这样可以弱化这种视觉的冲击。

二、网页美工的总体设计

2.1网页设计的制作流程

第一步：确定网站主题

做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。

第二步：做好网站规划

确定好网站的主题内容、图片、文字材料之后就开始用Firework进行网页设计。

首先打开Firework新建一个宽为968、高为660的背景为白色的页面，然后进行网页设计，将页面进行布局。

第三步：网页的详细制作步骤

网页最上面的是一个长方形条，填充颜色为浅蓝色，还加上了渐变的效果。左边写着歪歪蛋创意生活网,这个网站的主题---设计美丽设计生活。颜色为白色，字体为黑体、大小为26磅，加了蓝色阴影等效果，整体更加好看。如图2-1-1

如图2-1-1

下面是这个网站的导航条和本期的新看点、家居排行榜。如图2-1-2，2-1-3所示：

图2-1-2

图2-1-3

2.2网站色彩布局

歪歪蛋创意生活网属于标准的家居行业网站，首页采用大部分的蓝色和少部分的白色、暗绿色、灰色三色搭配，给人一种舒适、温馨家的感觉。这四种色块将网页分成几个不同的部分。蓝色区域为网站logo和banner，并且直接使用了在fireworks里制作好的图片。这样能更好的表达网站的主题，使网站的主题一目了然更加明确。网站的导航条也是采用深蓝色作为导航条的背景色，用浅蓝色做字体的颜色，看起来更加协调。导航条下面还做了一些比较方便的快速链接。如2-1-4所示。白色与浅蓝色的部分放置了网站的FLASH轮显动画和网站的新看点、最新的家居排行榜等内容。然后就是家居设计的图片展示区，共有五张家居设计的图片，这些图片是运用代码做成的滚动效果插入到网站当中去的。最下面

的剩下三色部分是歪歪蛋创意生活网一些分类的小看点吗，共有三组内容。

副页，一共有十个副页。分别采用了不同的颜色，绿色、灰色、暗黄色、浅蓝色为主要的颜色搭配，同样给人一种小清新的感觉特别是浅蓝色和绿色。同时副页还做登录和注册页面，还有法律声明的页面，算是一个内容比较齐全的网站，所学到的只是基本上全都运用起来了。如图2-2-1所示

图2-2-1

网站的新闻资讯和精彩专题部分，如图2-2-2所示。

图2-2-2

网站的中间部分做了一个水平滚动图片展示，如图2-2-3所示。

图2-2-3

下边是家居分类专题区域展示。如图2-2-9所示。

图2-2-4

2.3网站结构

首页网页布局如图2-3-1所示。

LOGO图片导航新看点最家新居动TOP态5设计赏精彩专题家居设计家饰生活乐居方式装修手册法律声明首页图2-3-1

消费资讯在网站结构布局方面，该网站打破了标准的二分栏布局，这样既有足够的空间放置网站内容，网站也不会太空。

2.4图片轮显的制作过程

图片轮显的操作步骤如下：

1）首先启动Flash2.0建立一个宽297、244的白色画布。

2）新建图层，将图层三设为遮罩层，在第一个图层中导入第一张照片到舞台，利用对齐工具将图片与画布对齐重合。

3）导入第二张照片到舞台与第一张的步骤完全相同。

4）将第三层遮罩层解锁，在第一帧中插入关键帧然后在图片的边上画一个矩形

在第四十帧上插入关键帧将这个矩形放大知道把图片盖住，在第一帧与四帧中

建补间形状。剩下的与上述步骤完全相同。

2.5滚动图片的制作

滚动一般有两种制作方向：一是水平方向滚动，二就是垂直方向滚动。直接将现有的代码拷到相应的位置就行。滚动的产品图片在Flash中只需要制作出动态的效果，动态效果将在dreamweaver中体现出来，图片的高度和宽度都可以根据实际情况在代码中进行修改。

2.6制作网页的主要内容

网站主要内容区域用于放置滚动的产品图片，在firework中只需要制作出静态效果，动态效果将在dreamweaver中进行制作。

2.7形成网页

当网站在fierwork中设计完成后，只是完成了一部分的工作，还需要将它制作成HTML格式的网页。在制作网页前还需要利用切片工具将设计稿切割成N个部分，然后dreamweaver中创建表格重新组合。切片前也要先观察好，哪些是自己需要的，哪些东西能重复使用，哪些是需要越小越好的，哪些文字是必须用图片的！考虑好这些就进行切片，记住一定要精确！如果有必要将类型相同的图片做成一张图片，以便减少内存。

三、美工设计总结

注意页面的分块，着手设计一个页面的时候，你必须根据所掌握的内容，以及其风格，对页面的整体进行分块。分块是一个非常必要且难以掌握的技巧。分块可以用不同着色的色块、框、细线、排列整齐的英文等等，还可以混合使用，但是注意不要过于醒目，因为页面的重点在内容，而不在其他。

通过学习，了解网站和网页的基本设计思想，使学生提高和掌握对色彩基础知识（色相、明度、纯度、空间混合概念，色彩构成的一般原理、色彩的心理、对色彩的观察能力和对丰富的色彩感知能力，对一般色彩的搭配能力、网页的色彩设计、配色软件的使用等）；平面构成（平面设计构图的形式要素、关系要素、了解平面设计构图与视觉传达的关系，熟悉点、线、面、色彩、肌理等设计元素的基本设计方法，并在实践中能灵活运用；掌握平面设计构图的几种常用的表现方法）；初步掌握CorelDRAW工具的使用，培养对优秀网页版式分析模仿的能力，掌握网页设计的基本方法。

10图文《网页美工与广告》卷二

实践考核成绩评价表

班级学号10图文姓名201*1180124主页美工设计要求：美观且有创意、内容完整、导航正确、有自己设计的flash广告动画。评分标准与分值副页美工设计要求：布局好，内容完整、导航正确，有1个以上的Flash广告动画。网站5张网页以上。设计说明书要求：格式正确、排版规范；分析到位、网页美工设计重点与难点分析深刻。用A4打印，6页以上。总分100303040王丹分值成绩得分任课教师签字：教师评价注：网页美工的作品与网站可借鉴其它作品，但严禁复制或他人代做，一经发现类同，按0分处理。

友情提示：本文中关于《网页美工学习设计经验总结》给出的范例仅供您参考拓展思维使用，网页美工学习设计经验总结：该篇文章建议您自主创作。

来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。

《网页美工学习设计经验总结》由互联网用户整理提供,转载分享请保留原作者信息,谢谢!
链接地址：http://www.bsmz.net/gongwen/564404.html

• 上一篇：201*年市场部工作总结
• 下一篇：工作总结 Microsoft Word 文档