网页美工设计.docx

1、网页美工设计网页美工与广告设计说明书姓 名： 张 建 军 学 号： 20111290149 班 级： 11 电 商1 指导教师： 李 淑 娟 完成日期： 2012-6-20 设 计 要 求考核目的通过课程设计，考查学生对photoshop、flash、dreamweaver的综合应用能力，要求学生能够独立制作出独特的网页作品，突出强调知识的系统性与美工技巧的实用性。考核项目要求1、能够清楚地体现出网页与色彩，网页与平面构成之间的关系。2、网页色彩搭配协调，布局合理。3、作品中FLASH的技术应用合理，灵活播放，形象生动。4、版式设计的审美体现。5、整体效果好，实用性较强。6、按钮的功能能够正常

2、实现。7、作品不得抄袭，必须是原创作品，个人独立完成。目录第一章 网页美工设计 11.1网页美工色彩搭配 11.2网页版式设计 2第二章 photo的基础应用 32.1工具的使用 32.2图像的快速填充 62.3位图的应用与编辑 6第三章 动画的制作与编辑 73.1 FLASH的功能与特点 73.2 动画的制作 83.3按钮的制作 83.4动画的保存 83.5 IE下载法 9参考文献 9网页美工与广告设计说明书第一章 网页美工设计网页美工设计不单纯从事美术绘画，而需要定位软件使用者、使用环境、使用方式并且最终为软件用户服务，他们进行的是集科学性与艺术性于一身的设计，他们需要完成的，简单说来，正

3、是一个不断为用户设计视觉效果使之满意的过程。 网页美工设计的职能大体包括三方面：一是图形设计，即传统意义上的“美工”。当然，实际上他们承担得不是单纯意义上美术工人的工作，而是软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量网页设计的合理性。如果没有这方面的测试研究，网页设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来极大的风险。1.1网

4、页美工色彩搭配网页最常用流行色蓝色蓝天白云，沉静整洁的颜色。绿色绿白相间，雅致而有生气。橙色活泼热烈，标准商业色调。 暗红宁重、严肃、高贵，需要配黑和灰来压制刺激的红色，颜色的忌讳忌脏背景与文字内容对比不强烈，灰暗的背景令人沮丧！忌纯艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。忌跳再好看的颜色，也不能脱离整体。忌花要有一种主色贯穿其中，主色并不是面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。忌粉颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。蓝色忌纯，绿色忌黄，红色忌艳。几种固定搭配蓝白橙蓝为主调。白底，蓝标题栏

5、，橙色按钮或ICON做点缀。绿白兰绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。橙白红橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。暗红黑暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。网页设计就相当于平面设计，网页设计师可以将平面设计中的审美观点套用到这上面来（其区别是动态网页的制作是平面设计不能达到的，它是一种审美方式的延伸），所以平面设计上的审美的观点在网页设计上非常实用。如对比、均衡、重复、比例、近似、渐变以及节奏美、韵律美等等，以及色彩的搭配显示出的轻快活泼的美，这些都能在网页上显示出来，反映设计师高超的审美能力，因此作为一名网页设计师，要使自己的网页

6、具有美感，不具备审美能力是不行的。1.2网页版式设计按照平面设计的形式来看，整个页面可以分为几个部分，每个部分有不同的功能，也能体现不同的形式，具体看来就是上边、左边、下边、右边、中间、看似无奇，自身却有许多独特的地方，就说划分的大小吧！中间的部分一般是最大的，因为它承载着主要的信息，使用者主要就是看中间这个部分的内容，有些网站也为了出新意把整个页面进行任意划分，特别是个人网页，例如把整个页面平分为左右两个部分，但是这样会让人不着重点，还有的框架用得太多，影响了页面的整体性。总结一下有这么几种布局方式，下面进行比较，1. 上边和左边相结合，这是最常用的一种方式，上面是页面的提头和广告条，左边是

7、按钮和其它的链接，这样的布局有其本质上的优点，因为人的注意力主要在右下角，所以主要想得到的信息都能最大可能的获取，而且很方便。但是有一个问题不得不注意，就是按钮在左边，都知道我们都是用的右手来操作鼠标的，要到左边去点击按钮就要移动过整个屏幕，所以每次都这样会很不方便。当然这也有一个习惯的问题，因为现在大部分的网站都采用这种形式，无形中造成使用者一打开网页都是习惯性的在左边去点击按钮。所以在比较正规的网站还是尽量符合这种使用方式，当然也不是一成不变的采用，要能够在这种基础上做一些变化。就能作出很好的网页来。2. 上边和下边的结合，这种方式用得少一些，都是也有很多的网站采用。这样可以解决使用上的问

8、题，因为在屏幕下方移动鼠标可以很自如。同时由于上面有横的提头或者是广告条，这样上下造成一种对比和呼应，无论其中的内容如何安排，页面都会显得非常平衡，从而显得更协调，这是一种形式感很强的布局形式。3. 上、左、下边相结合，这种方式也有一些应用，这种方式的采用可以将功能性的东西有条理的放的左边和下边，使用起来更方便，像很多的按钮和链接（文字链接和图片链接以及E-mail链接等）都可以很清楚的显示出来，由此具有很好的导向性。但是这样也有不利的地方，例如这样整个页面被占去的地方较多，是页面的主要要显示的内容受到影响。所以也是使用的时候要斟酌的，看在什么情况下适合才能采用这种形式。 4. 上下左右形成一

9、种包围的格式，这种形式的应用有些类似于第三类，优点也是一样，但是缺点更明显，由此留给使用者的空间太少了，所以这种应用得也比较少。不过经过一些刻意的变化之后能作出很漂亮的形式来，所以一些个人站点有时也采用。 这是简单的进行提炼之后得出的几种类别，但是现实的应用中基本上都是经过一定的变化的，所以呈现出丰富多彩的布局形式，所以在了解这些布局的一些基本的优劣之后，适当的利用其优点，结合一些富有形式美感的因素，进行设计。就能设计出非常漂亮的网页，同时在使用上也能够非常的方便 第二章 photo的基础应用Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告

10、创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。2.1工具的使用移动工具，可以对PHOTOSHOP里的图层进行移动图层。 矩形选择工具，可以对图像选一个矩形的选择范围，一般对规则的选择用多。椭圆选择工具，可以对图像选一个矩形的选择范围，一般对规则的选择用多。单行选择工具，可以对图像在水平方向选择一行像素，一般对比较细微的选择用。单列选择工具，可以对图像在垂直方向选择一列像素，一般对比较细微的选择用。裁切工具，可以对图像进行剪裁，前裁选择后一般出现八个节点框，用户用鼠标对着节点进行缩放，用鼠标对着框外可以对选择框进行旋转，用鼠标对着选择框双击或打回车键即

11、可以结束裁切。 套索工具，可任意按住鼠标不放并拖动进行选择一个不规则的选择范围，一般对于一些马虎的选择可用。多边形套索工具，可用鼠标在图像上某点定一点，然后进行多线选中要选择的范围，没有圆弧的图像勾边可以用这个工具，但不能勾出弧线，所勾出的选择区域都是由多条线组成的磁性套索工具，这个工具似乎有磁力一样，不须按鼠标左键而直接移动鼠标，在工具头处会出现自动跟踪的线，这条线总是走向颜色与颜色边界处，边界越明显磁力越强，将首尾连接后可完成选择，一般用于颜色与颜色差别比较大的图像选择。魔棒工具，用鼠标对图像中某颜色单击一下对图像颜色进行选择，选择的颜色范围要求是相同的颜色，其相同程度可对魔棒工具双击，在

12、屏幕右上角上容差值处调整容差度，数值越大，表示魔棒所选择的颜色差别大，反之，颜色差别小。 喷枪工具，主要用来对图像上色，上色的压力可由右上角的选项调整压力，上色的大小可由右边的画笔处选择自已所须的笔头大小，上色的颜色可由右边的色板或颜色处选择所须的颜色。画笔工具，同喷枪工具基本上一样，也是用来对图像进行上色，只不过笔头的蒙边比喷枪稍少一些。橡皮图章工具，主要用来对图像的修复用多，亦可以理解为局部复制。先按住Alt键，再用鼠标在图像中需要复制或要修复取样点处单击一左键，再在右边的画笔处选取一个合适的笔头，就可以在图像中修复图像。图案图章工具，它也是用来复制图像，但与橡皮图章有些不同，它前提要求先

13、用矩形选择一范围，再在编辑菜单中点取定义图案命令，然后再选合适的笔头，再在图像中进和行复制图案。历史记录画笔工具，主要作用是对图像进行恢复图像最近保存或打开图像的原来的面貌，如果对打开的图像操作后没有保存，使用这工具，可以恢复这幅图原打开的面貌；如果对图像保存后再继续操作，则使用这工具则会恢复保存后的面貌。 橡皮擦工具，主要用来擦除不必要的像素，如果对背景层进行擦除，则背景色是什么色擦出来的是什么色；如果对背景层以上的图层进行擦除，则会将这层颜色擦除，会显示出下一层的颜色。擦除笔头的大小可以在右边的画笔中选择一个合适的笔头。铅笔工具，主要是模拟平时画画所用的铅笔一样，选用这工具后，在图像内按住

14、鼠标左键不放并拖动，即可以进行画线，它与喷枪、画笔不同之处是所画出的线条没有蒙边。笔头可以在右边的画笔中选取。模糊工具，主要是对图像进行局部加模糊，按住鼠标左键不断拖动即可操作，一般用于颜色与颜色之间比较生硬的地方加以柔和，也用于颜色与颜色过渡比较生硬的地方。 锐化工具，与模糊工具相反，它是对图像进行清晰化，它清晰是在作用的范围内全部像素清晰化，如果作用太厉害，图像中每一种组成颜色都显示出来，所以会出现花花绿绿的颜色。作用了模糊工具后，再作用锐化工具，图像不能复原，因为模糊后颜色的组成已经改变。涂抹工具，可以将颜色抹开，好像是一幅图像的颜料未干而用手去抹使颜色走位一样，一般用在颜色与颜色之间边

15、界生硬或颜色与颜色之间缄接不好可以使用这个工具，将过渡过颜色柔和化，有时也会用在修复图像的操作中。涂抹的大小可以在右边画笔处选择一个合适的笔头。 减淡工具，也可以称为加亮工具，主要是对图像进行加光处理以达到对图像的颜色进行减淡，其减淡的范围可以在右边的画笔选取笔头大小。加深工具，与减淡工具相反，也可称为减暗工具，主要是对图像进行变暗以达到对图像的颜色加深，其减淡的范围可以在右边的画笔选取笔头大小。海绵工具，它可以对图像的颜色进行加色或进行减色，可以在右上角的选项中选择加色还是减色。实际上也可以是加强颜色对比度或减少颜色的对比度。其加色或是减色的强烈程度可以在右上角的选项中选择压力，其作用范围可

16、以在右边的画笔中选择合适的笔头。钢笔路径工具，亦称为勾边工具，主要是色画出一路径，首先注意的是落笔必须在像素据齿下方，即在像素据齿下方单击一下定点，移动鼠标到另一落点处单击一下鼠标左键，如果要勾出一条弧线，则落点时就要按住鼠标左键不放，再拖动鼠标则可以勾出一条弧线。每定一点都会出现一个节点加以控制以方便以后修改，而用鼠标拖出一条弧线后，节点两边都会出现一控制柄，还可按住Ctrl键对各控制柄进行调整弧度，按住Alt键则可以消除节点后面的控制柄，避免影响后面的勾边工作。磁性钢笔工具，它与磁性套索工具有些相似，所画的路径也会有磁性一样，自动会偏向颜色与颜色的边界，其磁性的吸力可以在右上角的频率调整，

17、数值越大，吸力也越大。自由钢笔工具，与套索工具相似，可以在图像中按住鼠标左键不放直接拖动可以在鼠标轨迹下勾画出一条路径。增加锚点工具，可以在一条已勾完的路径中增加一个节点以方便修改，用鼠标在路径的节点与节点之间对着路径单击一下即可。减少锚点工具，可以在一条已勾完的路径中减少一个节点，用鼠标在路径上的某一节点上单击一下即可。直接选择工具，此工具可以选择某一节点进行拖动修改，或用鼠标对住路径按住鼠标不放而拖动也可。转换点工具，此工具主要是将圆弧的节点转换为尖锐，即圆弧转直线。文字工具，可在图像中输入文字，选中该工具后，在图像中单击一下便出现对话框即可输入文字。它只是横向输入文字。输入文字后还可对该

18、图层双击对文字加以编辑。对话框中可任意选择颜色。2.2图像的快速填充在填充图像的选区时，按住“ShiftDelete”组合键可以用背景色填充的同时删除选区；按住“AltDelete”组合键和“CtrlDelete”组合键，分别可以填充前景色和背景色；按住“Shift+AltDelete”以及“Shift+CtrlDelete”组合键在填充前景色以及背景色的时候只填充存在的像素；按住“ShiftCtrlAltDelete”组合键从历史记录中填充选区或图层，并且保持透明设置。2.3位图的应用与编辑矢量图形矢量图形是使用直线和曲线来描绘图形的， 我们称之为矢量，同样具有颜色和位置属性。 例如，一片树

19、叶的图像是采用节点，线条通过节点创建出树叶的轮廓形状。 树叶的颜色是由轮廓线和轮廓线包围的区域的颜色决定的。当你对矢量图形进行编辑的时候，可以对表述形状的线条和曲线的属性进行修改， 可以移动，修改大小，形状，改变颜色而不用改变外观质量。 矢量图形的分辨率是独立的， 这就意味着可以用不同的分辨率显示，而质量却不受损失。位图图形位图图形是使用颜色点来描绘图像的， 我们称之为 像素 ，这些像素是在网格内安排好的。 例如，一片树叶的图像通过指定网格中每个像素的位置和色值进行描绘的， 创建图像的方式同马赛克镶嵌极为类似。当你对位图图形进行修改时，需要修改的是像素而不是线条和曲线。 位图图形的分辨率是同图

20、形紧密关联的， 这是由于描绘图像的数据是以特定尺寸固定在网格上的。对位图图形的编辑会影像到外观质量。 尤其是，修改位图图形的尺寸会令到图像边缘变的粗糙，这是因为网格中的像素被重新进行分配的缘故。 如果在比图像分辨率还低的输出设备上显示图像，会降低图像质量。第三章 动画的制作与编辑3.1 FLASH的功能与特点1、flash课件软件安装方便，适用场合广泛，只要是电脑配置不算太低，都可以运行。没有什么复杂的安装说明，简单易操作。 2、生成的文件体积小，一个精美的课件大约也就是几M，一般较大点的也只有4M多，这相对AUTHORWARE等软件制作的课件几十甚至几百MB，优势是再明显不过的了。可以很方便

21、地复制到U盘上，携带方便。 3、flash课件使用方便，这是其另一个大的优点，flash课件完成后导出的.SWF文件，精美小巧，播放也极其的方便，只要安装一个简单的播放器就可以了，这个播放器大约也只有300多KB大小吧，即使电脑上没有安装播放器，也不要紧，用普通的IE浏览器也可以直接播放，或者也可以直接发布成.EXE文件，这样不需要安装播放器，在哪台电脑上都可以直接使用了。发布成的EXE文件相比SWF文件来讲，大约大不了多少的，1MB左右吧。 4、修改容易，其实我们制作一个课件并不算太难，但是要修改某些元件用其它软件制作的课件就显得太麻烦了，而FLASH修改起来相当的容易、快捷。有的只要简单的

22、几个鼠标操作就OK了。 5、交互性更人性化。一个flash课件的制作要用到不少交互性按钮，而正是这些交互性按钮，使教学都操作起来得心应手，真是有一种想怎么做就怎么做，真正做到了， “我的地盘我做主”，哈哈。 6、演示形象直观。对于理科的电路图，化学实验等的表达准确、清楚、明白、老师讲解方便；文科课件动画效果生动活泼、界面符合学生生理感受、极大地满足了学生的直观感官，为创建优良、生动、活泼的教学氛围创造了前期的条件。3.2 动画的制作1、导入图片到库，并转换为元件；2、在图层1的第1帧拖入元件至场景左侧，选中元件在属性中的颜色选项中选择Alpha把值调至0%；3、在第35帧按F6，移动图片到场景

23、中间，并把图片的Alpha值调至100%；4、在第1帧和第35帧之间创建补间动画，实现淡入效果；5、在第70帧按F6，移动图片到场景右侧，并把图片的Alpha值调至0%6、在第35帧和第70帧之间创建补间动画，实现淡出效果。3.3按钮的制作场景中随意画个物体，或者打个字，然后选中后，点右键转换为元件，按钮，里面有三个选项，分别放置关键帧，自己尝试下就知道啦，最后一个点击的意思是按钮的作用范围，可以自己用填充色布置按钮的反应区域。然后可以给按钮添加脚本了，比如你的按钮在第一帧，那么新建一个图层，添加上stop();然后选中按钮，记住是选中按钮添加脚本啊，on(release)gotoAndPla

24、y();/括号里填写你想点按钮之后跳转到那一帧开始播放这样一个按钮就做好了。3.4动画的保存巧抓网页中的flash，现在很多的浏览器都带有储存flash的工具,如果你还用的是ie,没有什么抓flash的插件的话,那你就不妨试一下这个麻烦的方法具体步骤如下：1、用InternetExplore打开你想抓取的flash动画所在的网页，直到flash动画完整出现；2、点击“收藏添加到收藏夹”，这时出现选项，一定记住在“允许脱机使用”前面小框里打勾（这步很关键），然后点击“确定”；3、等电脑保存完后，点击“开始查找文件或文件夹”，在查找的名称里填入“swf”，搜索范围限定为 “C：WINDOWSTem

25、poraryInternetFiles”，查找之后你会惊喜地发现，你要的flash动画就在里面，而且是以单独的 swf格式存在，要怎么用就看你了！3.5 IE下载法当IE浏览到某个Flash，你想要保存它时，首先查看该页面的源文件，以“.swf”为关键字搜索源文件，以获得该Flash的源地址。接下来打开资源管理器，选择“工具文件夹选项”，切换到“文件类型”标签，在已经注册的文件类型列表中找到“SWF Shockware Flash Object”一项，如果该项目的打开方式为“Internet Explorer”，则将该项删除，如图1所示。接下来在IE中粘贴Flash文件的源地址，回车后网页即弹

26、出一个保存对话框，直接保存即可。编辑提示：之所以要将SWF的文件类型删除，是因为如果我们直接将Flash地址在IE中打开时，IE会自动打开该SWF，而非提示保存。在网页上单击右键查看源文件编辑查找（输入swf）开始查找动画地址就可以了。或者用软件直接保存比较方便，可以用闪客精灵。在网上看到许多精美的Flash作品，肯定想把它们收集起来拒为己有,但网上的Flash影片都是嵌入在网页中播放的，这就给我们保存带来了难度，因为它不能像图片那样“另存为”。参考文献1 曲思伟. 文化艺术. 清华大学出版社. 2009年2 张巍. 动画制作. 电子工业出版社. 2008年3 周静. 平面设计. 电子科技大学出版社 . 2010年4 XX. 信息工程学院网页美工与广告实践考核报告单07044102011-2012学年第 二 学期期末考试姓名张建军班级11电商1学号20111290149评分标准及得分评分标准满分得分1、能够很好地完成要求，色彩搭配合理，有较强的美感。20分2、能够将所有的photoshop,flash等软件灵活应用，具有一定的独创性。20分3、基本能够完成题目要求，布局较合理，整体效果较好。20分4、能够将作品合理的运用到网站中，增加网站的美工效果。20分5、能够将美工知识与网页技术有效结合，作出生动的作品。20分考核成绩任课教师签名李淑娟