（高职)第3章 网页效果图制作ppt课件.ppt

第3章 网页效果图制作第三章第三章 网页效果图的制作网页效果图的制作学习目标 熟悉使用熟悉使用PhotoShopPhotoShop制作网页效果图的流程；制作网页效果图的流程；掌握掌握PhotoShopPhotoShop中图层组的设置；中图层组的设置； 掌握利用掌握利用PhotoShopPhotoShop制作网页效果图的方法；制作网页效果图的方法；掌握掌握PhotoShopPhotoShop中对效果图进行切片处理的方法。中对效果图进行切片处理的方法。项目概述项目概述小王所在的网络公司承接了长沙市碧雅园花卉苗木基地网站建设业务。通过小王所在的网络公司承接了长沙市碧雅园花卉苗木基地网站建设业务。通过前期需求分析，已经明确客户需要制作的网站为典型的展示型企业网站，并前期需求分析，已经明确客户需要制作的网站为典型的展示型企业网站，并确定了网站的栏目，绘制了网站首页的草图。经理要求小王依据以上栏目结确定了网站的栏目，绘制了网站首页的草图。经理要求小王依据以上栏目结构图和草图，为该苗木基地设计制作网站首页效果图。另外，因客户不能提构图和草图，为该苗木基地设计制作网站首页效果图。另外，因客户不能提供企业标志图，网站供企业标志图，网站LOGOLOGO也需一并设计和制作。也需一并设计和制作。网站栏目结构图网站首页基地介绍苗木品种特色苗木售后服务工程案例苗木养护联系我们基地简介基地实景业务范围荣誉资质乔灌木移栽大树扦插小苗树桩盆景竹类植物藤本植物草本花卉草皮草种造林苗新优果苗种籽种苗红花紫薇罗汉杉红梅广玉兰海棠樱花香樟桂花服务承诺苗木配送技术支持病虫害防治苗木移植苗木修剪道路绿化小区绿化园林绿化网站首页草图将本项目的实施分解为以下几个子任务： 任务1：网页素材的选取任务2：图层组的管理任务3：网页元素的编辑任务4：效果图切片最终网站首页效果图任务任务1 1：网页素材的选取：网页素材的选取1、图片素材获取图片的格式有很多种。常见的图片格式有：jpg、gif、png、bmp，如下表所示。1、站酷 网站网址：2、素材中国 网站网址：3、站长素材 网站网址：4、昵图网 网站网址：在网络上有很多不错的图片素材网站，以下是几个代表性的网站。任务任务1 1：网页素材的选取：网页素材的选取2、图片格式转换网上有很多图片转换工具，例如ACDSee、美图秀秀等，能自动识别图片的真实格式，可以实现JPG、GIF、BMP、PNG等格式的互转。 任务任务1 1：网页素材的选取：网页素材的选取步骤1：下载字体步骤2：添加所下载字体到系统字体库3、特效字体选取 任务任务1 1：网页素材的选取：网页素材的选取任务任务2 2：图层组的管理：图层组的管理1、图层组结构规划PHOTOSHOP中有不同类型的图层，如下表所示。中有不同类型的图层，如下表所示。图层面板详细说明图任务任务2 2：图层组的管理：图层组的管理制作效果图时，需要创建和使用很多图层。为了方便管理和使用，需建立图层组。图层组就像一个文件夹，可以把所有相关的层一并放置到这个层文件夹里面去。根据首页草图，可将效果图的图层组划分为如下结构： 任务任务2 2：图层组的管理：图层组的管理新建标志 、Banner 、导航 、内容 、底部 五个图层组 任务任务2 2：图层组的管理：图层组的管理内容区部分包括苗木分类、联系我们、基地简介、资质荣誉、基地展示、经典工程六个部分，因此在“内容”图层组中分别新建对应的六个内部图层组。 任务任务2 2：图层组的管理：图层组的管理任务任务3 3：网页元素的编辑：网页元素的编辑1、网站Logo制作 常用的网站LOGO的设计手法有以下几种：1、标识性手法：是用标志、文字、头字母的表音符号来设计LOGO；2、卡通化手法：通过夸张、幽默的卡通图像来设计LOGO；3、几何图形构成法：用点、线、面、方、圆、多边形或三维空间等几何图形来设计LOGO。此外，部分公司喜欢使用变形的公司名称作为他们的标志，这是一种很好的视觉识别符号。 任务任务3 3：网页元素的编辑：网页元素的编辑Logo的设计技巧很多，概括起来，要注意以下几点：l 保持视觉平衡、讲究线条的流畅，使整体形状美观； l 用反差、对比或边框等强调主题； l 选择恰当的字体； l 注意留白，给人想象空间； l 运用色彩。因为人们对色彩的反应比对形状的反映更为敏锐和直接，更能激发 情感。 任务任务3 3：网页元素的编辑：网页元素的编辑网站Logo的一般尺寸：88*31 这是互联网上最普遍的Logo规格。 120*60 这种规格用于一般大小的Logo。 120*90 这种规格用于大型Logo。 任务任务3 3：网页元素的编辑：网页元素的编辑AAAlogo是一款Logo设计软件，它操作简单、功能强大，几分钟之内可以设计出专业的Logo，可用于网页或者打印出来。AAAlogo内置有60个模板，可允许自己定制模板。它还附带2000多个Logo对象和剪贴画的图库。所有内置Logo对象都是基于矢量的，可以轻易地缩放和旋转。在AAAlogo中，还可以对任意单独对象应用不同的样式，从而可以得到几乎无限的对象和效果组合。运行界面如图所示。 任务任务3 3：网页元素的编辑：网页元素的编辑2、BNNER制作 网页Banner的设计原则 ：具有鲜明的色彩文字的字体清晰语言具有号召力图形的位置合适广告条文字方向正确 按钮一般要放在右边 避开广告条的边缘文字的数量不宜太多控制文件大小任务任务3 3：网页元素的编辑：网页元素的编辑3、导航制作 4、主体内容制作 5、生成JPG格式效果图6、图片修整任务任务3 3：网页元素的编辑：网页元素的编辑任务任务4 4：效果图切片：效果图切片 切片注意事项:l 保持视觉平衡、讲究线条的流畅，使整体形状美观； l 切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个 大部分，再细切其中的小部分。 l 对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来。l 标志LOGO等主要部分尽量切在一个切片内，防止显示遇到特殊情况时显示一部分。l 不是主要部分的区域，不要大块切片。切得越小，可以加快网页下载图片的速度，让 多个图片同时下载而不是只下载一个大图片。所以，切片大小要根据需要来切。l 网页切片导出时，颜色单一过渡少的，应该导出为GIF；颜色过渡比较多、颜色丰富的， 应该导出为JPG；有动画的部分，应该导出为GIF动画。l 保留源文件。即使页面做好了，也要保留带切片层的源文件，当某天需要修改某一个部 分时，例如小图标等，直接修改单独导出所用的切片即可。l 在DW中进行编辑时，少用图片。如果能用背景颜色代替的，尽量使用背景颜色； 能用图 案的，也尽可能使用图案平铺来形成背景 谢谢 谢谢 ！