网页美工篇.ppt

网页美工篇 能力目标 能将制作好的网页存储为方便网络浏览格式 能制作出网页的各种特效效果 能设计制作网页界面中的各种元素 能设计制作网站的主页和页面 知识目标 了解网页设计的基本知识 掌握切片工具的使用 掌握标尺及辅助线的使用 掌握动画的制作方法 掌握网页中各种元素及特效的制作方法 掌握网页的布局和制作 岗位目标 会进行网站主页及页面的设计制作 会进行界面各种元素的设计制作 会进行动态广告的设计制作 项目1 电子商务网站首页 最终效果 知识百宝箱 标尺 Photoshop的标尺被放置在工作区的边界，横向为X轴标尺，纵向为Y轴标尺，是用来衡量图像的尺寸并对图像元素精确定位的。 参考线 Photoshop中参考线的作用是帮助用户快速而准确地对图像的整体或部分区域进行定位。 智能参考线 智能参考线可以帮助用户对齐形状、切片和选区。当用户绘制形状、创建选区或切片时，智能参考线会自动出现。如果需要可以隐藏智能参考线。 知识百宝箱 切片工具 “切片工具”可以将一个完整的图像切割成几部分。“切片工具”主要用于分割图像。每分割一次图像就创建了一个带标号的切片。 切片选择工具 “切片选择工具”主要用于编辑切片。 实践训练 项目总结 本项目以电子商务网站首页的设计和banner横幅广告的制作为主线，介绍了Photoshop在网页美工方面的应用。在制作网页时要充分利用Photoshop自身在图像处理方面的优势，最后能够设计制作出用其他设计工具无法达到效果的网页，当需要制作动态Logo或动态广告时，可以利用“动画”调板来方便地制作那些网上常用的各类广告。 项目2 网站主页设计 最终效果 知识百宝箱 网络广告 分类 特点 计费方式 动画及动画调板 什么是动画 动画调板 知识百宝箱 帧模式动画的创建 逐帧动画的创建 过渡动画的创建 位移过渡动画、不透明度过渡动画、效果过渡动画 时间轴模式动画的创建 普通图层时间轴动画 文本图层时间轴动画 蒙版图层时间轴动画 实践训练 项目总结 * * 在进行设计之前，要对页面进行分析与规划。确定页面的色系、背景、构图，看是否符合电子商务网站的特点。还要看是否符合客户的爱好和需求。这些都需要使用Photoshop进行规划设计。具体设计时，一般按“由大到小，由整体到局部”的顺序进行。 本项目可以分解为以下4个任务： 任务1 网页背景设计 任务2 导航条设计 任务3 展示窗设计 任务4 制作首页切片 1.制作横幅广告banner 2.制作横幅广告条（banner条） 在此网页的设计中首先对页面进行初步规划，要与首页整体的风格相一致，又要与首页相区别。一般主页主要展示经营的商品，注重的是信息量，在尽可能小的空间内发布主营的商品。但也要注意结构搭配，避免给顾客以拥挤的感觉。本项目的难点，一是页面布局的设计，二是综合运用各种工具进行设计操作。 本项目可以分解为以下3个任务： 任务1页面主体设计 任务2页面细节的设计 任务3制作页面切片 1.按钮制作 2.制作电子商务网站“buy18”商务网站的首页 本项目以主页页面制作和按钮制作为主线，介绍了Photoshop在网页美工方面的另一个应用。在设计主页时要注重色彩的调整、版面的设计；使用Photoshop制作按钮可以充分运用图层样式制作具有其自身特点的按钮。