第3章网页效果图制作.pptVIP

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