网页设计及图像处理基础知识.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,网页设计和图像处理基础知识,（编辑基础培训）,本讲义仅为培训纲要，需结合软件和实例进行讲解广西房地产信息网内部使用，如需转载请注明出处,2007-02-29,培训目录,一、专题制作,二、图像处理,三、色彩搭配,一、专题制作,使用软件：,Dreamweaver,8,、,Photoshop CS2,1,、,Dreamweaver,8,软件常用工具,/,界面介绍,title,标签,页面属性,插入表格,插入图像,/,图像占位符,/,图像,alt,标签,链接,CSS,面板,/,属性面板,/,视图模式,2,、专题框架的制作使用表格（,table,）布局,专题制作流程：,确定专题方案,构思布局草图：结合方案考虑专题中的重要栏目，内容的多少，素材、色彩等因素，确定草图,使用,Photoshop,制作框架图片（简单专题框架可以不使用,Photoshop,，比如房网现在的热点专题类型）,使用,Dreamweaver,进行布局制作专题,实例操作演示,用专题实例进行制作演示,注意一下几点,插入表格,table,边距控制,/,细节控制,定义,CSS,（字体,CSS/,链接,CSS,）,CSS,的路径,/,重新导入,CSS,Title,标签,/alt,标签,二、图像处理,1,、,Photoshop CS2,软件介绍：常用工具/,界面介绍,图层面板,/,历史纪录面板,/,动作面板,字体,/,段落面板,显示比例,/,图像修改选项,/,辅助线设置,工具栏：,选框工具,/,移动工具,/,前景色,/,后景色,文字工具,/,圆角矩形工具,2,、图像处理,a.,图像大小衡量单位：,网页图片通常都以像素（,px,）作为大小单位,示例图片,输出使用的图片（舞台背景、户外广告等）则以常用度量单位表,示大小：米（,m,），厘米（,cm,），毫米（,mm,）等,b.,图像大小：,|,图片大小面板,图片的大小通常由,3,个因素决定：宽度（,W,），高度（,H,），,分辨率（,R,），通常使用网页图片的默认分辨率为：,72,对于输出使用的图片，特别是使用喷绘和写真的户外广告等需要,图片比较大（例如：,10M*8M,），可以适当降低分辨率,c.,修改图像的大小,首先记住几个快捷键：,新建,ctrl+n,（,new,），,全选,ctrl+a(all,),，复制,ctrl+c(copy,),，粘贴,ctrl+v(view,),注意：,图像的大小必须和网页上需要的大小一致，否则会导,致图像变形，模糊等,普通修改,(,按比例修改,),：打开图像,调整宽度（,W,），,高度（,H,），分辨率（,R,）,|,实例,特殊修改（不按比例修改）,：图像的比例和网页上需要的大,小比例不一致，强行修改图像比例会导致图像变形,首先满足宽或高中其中一项,实例,d.,图像的效果,*透明度修改（结合水印和背景图像的制作）,*图层样式（渐变,/,描边,/,投影,/,外发光,/,斜面浮雕）,*图像合并,*图像调整（常用几个：亮度,/,对比度，色彩平衡，去色）,*图像上的字体,/,字体的效果,*图层：位置,/,链接,/,锁定,/,隐藏,/,添加,/,删除,（结合,ImageReady,进行简单,gif,动画制作）,|,以上均举实例,e.,批处理图像,|,实例,定义动作,使用动作,f.,图像的保存,|,实例,合并图像（不可见图层的影响）,保存格式：常用,gif/jpg,（区别，格式大小）,保存文件的名称：有一定规律性,三、色彩搭配,1,、色相环介绍,12,色相环是由原色，二次色和三次色组合而成。色相环中的三原色是红、黄、蓝色，彼此势均力敌，在环中形成一个等边三角形。,二次色是橙、紫、绿色，处在三原色之间，形成另一个等边三角形。红橙、黄橙、黄绿、蓝绿、蓝紫和红紫六色为三次色。三次色是由原色和二次色混合而成。,12,色相环 原色 二次色 三次色,2,、色相环的基本配色,无色设计、类比设计、冲突设计、互补设计、,单色设计、中性设计、分裂补色设计、原色设计、,二次色设计、三次色三色设计,(,颜色配合：几种颜色组成图片 颜色组合：几种颜色混合成一种颜色,),a.,无色设计：,不用彩色，只用黑、白、灰色,b.,类比设计：,在色相环上任选三个连续的色彩或其任一明色和暗色,c.,冲突设计：,把一个颜色和它补色左边或右边的色彩配合起来,补色就是,色相环上相反的颜色,d.,互补设计,：,使用色相环上全然相反的颜色,e.,单色设计：,把一个颜色和任一个或它所有的明、暗色配合起来,f.,中性设计,：,加入一个颜色的补色或黑色使它色彩消失或中性化（即将一,种颜色和它的补色混合起来得到的颜色）,g.,分裂补色设计,：,把一个颜色和它补色任一边的颜色混合起来,i.,二次色设计,：,把二次色绿、紫、橙色结合起来,h.,原色设计,：,把纯原色红、黄、蓝色结合起来,j.,三次色三色设计：,三次色三色设计是下面二个组合中的一个：红橙、黄绿、,蓝紫色或是蓝绿，黄橙、红紫色,3,、列举网页配色分类及实例（简单列举,3,个）,a.,回味、女性化、优雅,（针对网页或图像的主题的配色方案）,b.,运动型、轻快,c.,活泼、快乐、有趣,注意：,以上列举的是理论的配色方案，而我们在设计中必,须从自己的实际情况出发。,比如：给客户的一张图片上加上字体，图片上原有的色,彩已经定义，我们可以从,10,种基本配色中选择一种或几种进,行配色，也可以从图片需要表现的主题来选择配色分类,在熟练应用基本配色和配色分类后，在制作简单图像的,时候就不用反复查配色表了,使用配色表应注意：,配色表给的只是基础色，我们在设,计中可以根据实际的情况适当改变颜色的深浅程度,关于图像处理和色彩搭配的总结,1,、,多观察,：观察身边所有一切优秀的设计作品,2,、,多学习,：学习优秀作品中的图像效果和色彩搭配,3,、,多积累,：,将从优秀作品里学习的知识点滴积累起来，运用,到我们个人的设计作品中,4,、,常识和色彩知识在配色中的运用：,常识：,比如草地是绿色，天空是蓝色，晚上使用黑色等,色彩知识：,红色代表喜庆，紫色代表高贵，绿色代表健,康等等,