网页设计及切片基础教程ppt课件

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,化学多媒体软件设计,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2013/11/4,化学多媒体软件设计,页面设计及切片基础,_,入门篇,2013.11.04,PPT,制作：前端设计组,尹海,施,目录,CONTENTS,1.,页面设计,1.1,设计流程,1.2,需求分析,1.3,常见网页布局,1.4,网页配色,1.5,绘制设计图,2.,切片基础,2.1,切片简介,2.2,切片思路,2.3,切片步骤,2.4,切片技巧,化学多媒体软件设计PPT制作：前端设计组目录 CONTENT,1,1,页面设计,1.1,设计流程,1.2,需求分析,1.3,常见网页布局,1.4,网页配色,1.5,绘制设计图,11 页面设计1.1 设计流程1.2 需求分析1.3 常见网,2,1.1,设计,流,程,1.,明确需求（网站整体结构与功能，设计风格，重构难度）,2.,确定布局和配色,3.Ps/Fw,绘制效果图（先搭建整体框架，再雕琢细节）,2 1.1 设计流程1.明确需求（网站整体结构与功能，设,3,1.2,需求分析,磨刀不误砍柴工，科学进行,需求分析，是成功的网页设计不可缺少的步骤,如何分析？,3 1.2 需求分析磨刀不误砍柴工，科学进行需求分析，是成功,4,Step 1:,确定主题、网站整体功能和风格,主题：学院网站,功能：,展示学院风采、新闻动态,风格：,较为严谨、正式,4 Step 1:确定主题、网站整体功能和风格主题：学院网,5,Step 1:,确定主题、网站整体功能和风格,主题：课程介绍,功能：,介绍课程、分享课程资源,风格：,与学院网站相比，更为开放、新颖,5 Step 1:确定主题、网站整体功能和风格主题：课程介,6,Step 1:,确定主题、网站整体功能和风格,主题：个人网站,功能：,展示个人风采,风格：,开放、自由，无固定版式,6 Step 1:确定主题、网站整体功能和风格主题：个人网,7,Step 2:,确定网站栏目结构,规划好网站的层次结构,。清晰,网站的导航，方便用户无障碍的使用网站，了解网站提供的功能。,7 Step 2:确定网站栏目结构规划好网站的层次结构。清,8,Step 3:,确定页面的版式布局,根据网站类型、展示内容多少确定布局，画效果图之前，不妨先画一个页面布局示意图，这会让你思路更清晰，助你事半功倍。,8 Step 3:确定页面的版式布局根据网站类型、展示内容,9,Step 4:,确定网页配色,网页的色彩，是访问者登录页面时的第一印象，好的页面色彩能给用户留下深刻的印象，并且能产生很好的视觉效果和营造网站整体氛围的作用。,根据网站风格选择主色调、辅助色、特征色，形成一套配色方案。,9 Step 4:确定网页配色网页的色彩，是访问者登录页面,10,1.3,常见网页布局,1,上下结构式（经典厚朴版式）,2,左右结构式,3,上左右结构式,4,水平条纹式布局,5,不规则,布局,10 1.3 常见网页布局1上下结构式（经典厚朴版式）2左右,11,上下结构式,（经典厚朴版式）,上方,为,banner,、,导航,条,中间为,slide,，（,动态,的公司企业形象、广告,区域,）,下方为正文、内容部分,底部为版权部分,11 上下结构式（经典厚朴版式）上方为banner、导航,左右结构式,12,左侧是导航条,右侧是正文、内容或公司企业形象展示,左右结构式12左侧是导航条右侧是正文、内容或公司企业形,上,左右结构式,13,左侧为点击出现的细分栏目导航条,右侧,为内容区域,上方为主要的菜单导航条,上左右结构式13左侧为点击出现的细分栏目导航条右侧为内,水平,条纹式布局,14,使用横向条纹式的网页布局，每条纹理区分不同内容。,水平方式布满屏幕，并使用不同的背景颜色或纹理，就像全屏的背景的网页设计一样，视觉效果很好。,排版多样化，网站内容表达也非常清晰。,水平条纹式布局14使用横向条纹式的网页布局，每条纹理,不规则,布局,15,此类,页面,的信息量少，通常一张形象、广告照片下来，重在渲染网站的气氛。类似封面类型，有点击进入下页的入口，适合于产品宣传或个人网站。,不规则布局15此类页面的信息量少，通常一张形象、广,16,1.4,网页,配色,色彩搭配的原则,:,特色,鲜明,搭配,合理（避免采用纯度很高的单一色彩，这样容易造成视觉疲劳）,讲究艺术性,网页配色不宜超过三种,。,(,三种是从色相上,来说,的,),16 1.4 网页配色色彩搭配的原则:,17,1.4,网页,配色,216,网页安全色,是当,红色（,Red,）,、,绿色（,Green,）,、,蓝色（,Blue,）,颜色数字信号值（,DAC Count,）为,0,、,51,、,102,、,153,、,204,、,255,时构成的颜色组合，它一共有,6*6*6=216,种颜色（其中彩色为,210,种，非彩色为,6,种）。,网页安全色,17 1.4 网页配色216网页安全色是当红色（Red）、绿,18,1.4,网页,配色,网页安全色,216,网页,安全色在,不同硬件环境,、操作系统、浏览器,中都,能正常显示，可避免,原有的颜色失真,问题。,但随着显示屏质量,提升，我们并不需要刻意地追求使用局限在,216,网页安全色范围内的颜色，而是应该更好地搭配使用安全色合非安全色。,18 1.4 网页配色网页安全色216网页安全色在不同硬,红色代表热情、活泼、热闹、温暖、幸福、吉祥,橙色代表光明、华丽、兴奋、甜蜜、快乐,黄色代表明朗、愉快、高贵、希望,绿色代表新鲜、平静、和平、柔和、安逸、青春,蓝色代表深远、永恒、沉静、理智、诚实、寒冷,紫色代表优雅、高贵、魅力、自傲,白色代表纯洁、纯真、朴素、神圣、明快,灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞,黑色代表崇高、坚实、严肃、刚健、粗莽,19,1.4,网页,配色,色彩的象征情感,红色代表热情、活泼、热闹、温暖、幸福、吉祥 19 1.4,Color Scheme Designer,Adobe Kuler,20,1.4,网页,配色,配色工具推荐,Color Scheme Designer,21,1.4,网页,配色,浅析网页,配色实例,产品类：主要目的需求展示产品的特性，促进浏览者消费欲望，页面色彩可根据具体产品定位做多样化设计,。,简洁灰白色调给网站带来科技感和现代感。,21 1.4 网页配色浅析网页配色实例产品类：主要目的需求展,22,1.4,网页,配色,浅析网页,配色实例,2),公司,、企业类：展示企业形象，加深提高品牌印象，可应用,logo,的主色系设计，达到品牌统一。,沿用,logo,的深蓝色为主色调，具有统一感；此外，深蓝色带给人更强的科技感。,22 1.4 网页配色浅析网页配色实例2)公司、企业类：展,23,1.4,网页,配色,浅析网页,配色实例,3),学院网站：主要,以介绍学院动态、,交流信息,为主，首页内容较多，,所以配色,上需要更为简洁、清爽，否则页面会显得杂乱。,采用与校徽一致的色相，绿色为主色调，显得统一；蓝绿色的配色简洁清爽，而且排版规范，因此虽然内容较多，但看起来仍然非常舒适。,23 1.4 网页配色浅析网页配色实例3)学院网站：主要以,24,1.5,绘制设计图,1.,新建画布，拉辅助线，搭建框架,2.,具体（示意）内容录入,3.,风格与细节调整,241.5 绘制设计图1.新建画布，拉辅助线，搭建框架2.,25,1.5,绘制设计图,新建画布，拉辅助线,搭建基本框架,具体（示意）内容录入,添加细节,251.5 绘制设计图新建画布，拉辅助线搭建基本框架具体（示,26,1.5,绘制设计图,注意：,先打出整体框架再雕琢细节！,切忌：,没有,出整体架构就琢磨细节,，,元素,缺乏,对齐,；,元素,大小与间距控制不当,，,配色,冲突与使用某些不合适的颜色。,261.5 绘制设计图注意：先打出整体框架再雕琢细节！,切片基础,27,2,2.1,切片简介,2.2,切片思路,2.3,切片步骤,2.4,切片技巧,切片基础2722.1 切片简介2.2 切片思路2.3 切片,28,2.1,切片简介,何为切片,顾名思义,，把图像切成几部分，再重新组合在,一起。,常用,的切片,软件,Fireworks,、,Photoshop,切片,目的,为了为网页下载提速，节约系统,资源。,实现程序代码所无法达到的美工,效果,。,28 2.1 切片简介,29,2.1,切片简介,这,是在,PS,下的切片,29 2.1 切片简介,30,2.1,切片简介,这,是在,Fw,下的,切片,见,图中浅绿色框,30 2.1 切片简介,31,2.2,切片思路,参考思路：,分析网页,布局，分解出基本的结构，获得网页所需的主要图片。,切,出所需要的图片即可,。,将,效果图化整为零，精确选择页面框架必须的区域切片,。,切片数量不在多，适可而止，结构较简单的网页切片数一般在,20,片以内,。,表格、边框等细节交由,css,实现,。,31 2.2 切片思路参考思路：,32,2.3,切片步骤,参考步骤：,1.,放大图片，观察细节部分，可利用辅助线和网格提高切片准确度。,2,.,切片,隐藏文字内容，,DW,中重新,插入,3.,围绕布局，保持图片区域,完整,4.,规范命名,切片,5.,图片全部归入,images,子目录,32 2.3 切片步骤参考步骤：,33,切片前先分析页面结构,2.3,切片,步骤,切片,分析：页面,主要由,5,块组成：,banner,、,navigation,、中间大图模块、文章列表以及,copyright,放大,图片观察页面的细节部分，看看哪些是可以直接用,css,控制的,边框和单色,背景用,css,定义,，不必,切,出。重复,背景也不必全部切出,，切出一像素再用,css,的,background:repeat,属性控制,。,隐藏文字内容,切出所需切片,Tips:,可放大源图，,利用辅助线和网格提高切片,准确度；边框无需切出，由,css,实现,33切片前先分析页面结构 2.3 切片步骤切片分析：页面,34,2.3,切片,步骤,导出,按住,Shift,键可选择多个要导出的切片,【,文件,】【,图像预览,】,，格式选,JPEG,，品质,80,【,导出,】,勾选,1,、,4,项，切片放在,images,文件夹下，,【,导出,】,。,34 2.3 切片步骤导出按住Shift键可选择多个要导,35,2.4,切片技巧,切片,命名语义,化,中文名,建议命名,中文名,建议命名,导航,nav,栏目,column,页头,banner/header,侧栏,sidebar,版权栏,copyright/footer,搜索栏,search/searchbar,内容,content/text,背景,background/bg,滑动图,slide,新闻,news,35 2.4 切片技巧 切片命名语义化中文名建议命名中文名,36,2.4,切片技巧,切片,命名语义,化,36 2.4 切片技巧 切片命名语义化,37,2.4,切片技巧,重构,对切片的要求,切我所,选,以清洁生产首页实例，譬如我只想,切好了,banner,和,slider,，,只要按住,shift,，然后,鼠标左键,选中,想要,的,切,片,，按刚才的方法导出即可。,37 2.4 切片技巧 重构对切片的要求切我所选以清洁,38,2.4,切片技巧,其他需要注意之处：,输出切片页面用英文名,！,原则：尽量对齐切，避免出现跨行跨列的切法,。,页面,边框,无需切出，由,css,实现即可。,Fw,导出切片前，可隐藏网页整体边框不导出，,Dw,中用,css,实现,。,纯色区域不用切，如前面的文章列表背景，可直接用,css,实现；渐变色,区域,切一像素即可,，,如,前面提到的导航条,、,copyright,。,38 2.4 切片技巧 其他需要注意之处：输出切片页面用,39,2.4,切片技巧,其他需要注意之处：,若,用,Ps,切片，选择“存储