网页制作与网站设计教程.ppt

第四周网页制作与网站设计教程网页制作与网站设计教程淮安信息职业技术学院计算机科学与工程系淮安信息职业技术学院计算机科学与工程系网页制作与网站设计课程组制网页制作与网站设计课程组制网页制作与网站设计课程组制网页制作与网站设计课程组制 第三章第三章Photoshop网页设计基础网页设计基础Photoshop蒙版、路径的使用蒙版、路径的使用 网页设计与制作课程讲义网页设计与制作课程讲义网页制作与网站设计教程网页制作与网站设计教程本章要点本章要点 蒙版简介 蒙版的实例应用 路径简介“钢笔工具”选项栏 绘制直线路径的方法 绘制曲线路径的方法添加锚点的方法、删除锚点的方法、转换锚点的方法 路径调板的使用方法 使用填充路径 路径使用实例-制作网站顶部效果图 网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop蒙版的使用蒙版的使用 蒙版简介 蒙版是一种遮盖工具，就像是在图像上用来保护图像的一种层蒙版是一种遮盖工具，就像是在图像上用来保护图像的一种层“膜膜”，可以分离和保护图，可以分离和保护图像的局部区域。如果要对图像的部分区域进行编辑，就可以使用蒙板把不需要的部分屏蔽像的局部区域。如果要对图像的部分区域进行编辑，就可以使用蒙板把不需要的部分屏蔽起来。起来。表明蒙版和该图层处于链接状态 给当前图层添加一个新的矢量蒙版 图层蒙版缩略图 网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop蒙版的使用蒙版的使用 蒙版的实例应用 演示演示PhotoshopPhotoshop蒙版的实例蒙版的实例 网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 路径简介路径简介 路径这个概念相对比较容易理解，所谓路径，在屏幕上表现为一些不可打印的、不活动的矢量形状，可以通过路径进行描边或填充等操作来获得图形。可以使用前景色描画路径，从而在图像或图层上创建一个永久的效果；但路径通常被用作选择的基础，它可以进行精确定位和调整；路径比较适用于不规则的、难以使用其它工具的进行选择的区域。未选中的锚点 选中的锚点 方向点 方向线方向线角点 网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 认识认识“钢笔工具钢笔工具”选项栏选项栏 形状图层 路径 填充像素 路径组合方式“形状图层”，如果选择工具选项栏上的“形状工具”选项，将在新的图层上绘制矢量图形。“路径”，如果选择“路径”选项，绘制的将是路径。“填充像素”，如果选择“填充像素”选项，将在当前层绘制前景色填充的矢量图形。由于要绘制的是路径，所以应该选择“路径”选项。网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 绘制直线路径的方法绘制直线路径的方法1)将钢笔工具定位在直线段的起点并单击，以定义第一个锚点。2)在直线段的终点再次单击，或按住Shift键再单击将该线段的角度限制在45度角的倍数。注意：绘制过程中，最后一个锚点总是实心方形，表示处于选中状态，继续添加锚注意：绘制过程中，最后一个锚点总是实心方形，表示处于选中状态，继续添加锚点时，以前定义的锚点会变成空心方形。如果选中了点时，以前定义的锚点会变成空心方形。如果选中了“自动添加自动添加/删除删除”复选框选复选框选项，则单击现有点可将其删除。项，则单击现有点可将其删除。绘制曲线路径的方法绘制曲线路径的方法 演示演示网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 添加锚点的方法添加锚点的方法 1.从工具箱中选择“添加锚点工具”，并将指针放在要添加锚点的路径上（指针旁会出现加号）2.如果要添加锚点但不更改线段的形状，只要单击一下路径即可。如果要添加锚点并更改线段的形状，则需要用拖移的方法以定义锚点的方向线。删除锚点的方法删除锚点的方法 1.从工具箱中选择“删除锚点工具”，并将指针放在要删除锚点的路径上（指针旁会出现加号）。2.删除锚点，单击锚点将其删除，路径的形状重新调整以适合其余的锚点；或者拖移锚点将其删除，线段的形状随之改变。演示演示演示演示网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 转换锚点的方法转换锚点的方法 如果要将角点转换成平滑点，请向角点外拖移，使方向线出现。如果要将平滑点转换为带有方向线的角点，一定要能够看到方向线，然后拖移方向点，使方向线断开。网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 选择路径的方法选择路径的方法 路径选择工具 路径选择工具 演示路径选择工具 网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 路径调板的使用方法路径调板的使用方法 用画笔描边路径 用前景色填充路径 用前景色填充路径 网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 使用路径描边使用路径描边 通过实例演示路径描边 网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 使用填充路径使用填充路径 通过实例演示路径填充工具 网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 路径使用实例路径使用实例-制作网站顶部效果图制作网站顶部效果图 创建路径 填充路径 网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 路径使用实例路径使用实例-制作网站顶部效果图制作网站顶部效果图 添加图片 设置混合模式添加模板 网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程PhotoshopPhotoshop路径的使用路径的使用 路径使用实例路径使用实例-制作网站顶部效果图制作网站顶部效果图 演示本实例网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程本章小结本章小结蒙版简介 蒙版的实例应用 路径简介“钢笔工具”选项栏 绘制直线路径的方法 绘制曲线路径的方法添加锚点的方法、删除锚点的方法、转换锚点的方法 路径调板的使用方法 使用填充路径 路径使用实例-制作网站顶部效果图 网页制作与网站设计教程网页制作与网站设计教程网页设计与制作教程网页设计与制作教程本章习题本章习题如何理解如何理解Photoshop中的蒙版的概念？中的蒙版的概念？如何理解如何理解PhotoshopPhotoshop中的路径的概念？中的路径的概念？利用图利用图3-71和图和图3-72制作效果如图制作效果如图3-76所示的效果。所示的效果。使用路径工具是使用路径工具是绘绘制中央制中央电视电视台台CCTVCCTV的的标标志。志。网页制作与网站设计教程网页制作与网站设计教程谢谢大家！谢谢大家！网页设计与制作教程网页设计与制作教程网页制作与网站设计教程网页制作与网站设计教程