新媒体广告设计 第3讲 怎么做好：进一步学习 3-2-4 网页制作素材预备之PS切片.pptxVIP

课程：网络广告设计授课：郭少丹教学情境二 官方网站设计子教学情境二 网站网页的实现PS切片 切片的概念： Photoshop里切片就是用来切割图像用的。 切片分两种，一种是用户切片，就是用户用切片工具在图象上拉出来的切片，另一种就是衍生切片，是由用户切片衍生出来的。 在切片名称上名击选编辑切片，会弹出来了个对话框，具体如下 ：切片类型：图像，指这个切片输出时会生成图像，反之输出时是空的 名称：为切片定义一个名称 URL：为切片指定一个链接地址 目标：在哪个窗口中打开 x,y：指切片的左上角的坐标， w,h：指切片的长度和宽度，你可在自己定义节的长和宽。 另外你还可以选切片工具在图象上右击选择切割切片来分割图像，可以按指定长宽，也可指定在长度和宽度上等分来分割。 一切完成后，选文件，保存为web所用文件格式，保存后在文件所在的地方有个叫image的文件夹，里面包含了所有输出为图像的切片。 注意一点的是，cmyk模式的图片在网页上是看不到的。 （1）创建用户切片的方法： A、使用切片工具创建切片： 选择切片工具 。任何现有切片自动显示在文档窗口中。 选取选项栏中的样式设置： “正常”选项通过拖移确定切片比例。 “固定长宽比”选项设置高度与宽度的比例。输入整数或小数作为长 宽比。例如，若要创建一个宽度是高度两倍的切片，请输入宽度 2 和 高度 1。 “固定大小”选项指定切片的高度和宽度。输入整数像素值。 在要创建切片的区域上拖移。按住 Shift 键并拖移可将切片限制为正 方形。按住 Alt 键 (Windows) 或 Option 键 (Mac OS) 拖移可从中心绘制。 使用对齐使新切片与参考线或图像中的另一切片对齐。 （1）创建用户切片的方法： B、从参考线创建切片： 向图像中添加参考线。 执行下列操作之一： (Photoshop) 选择切片工具，然后在选项栏中点按“基于参考线的切片”。 从参考线创建切片时，将删除所有现有切片。 （2）编辑切片： 选择切片执行下列操作之一： 选择切片选择工具并点按图像中的切片。 处理重叠切片时，请点按底层切片中的可视选区，将其选中。 (Photoshop) 选取“文件”“存储为 Web 所用格式”。 在对话框中 ，使用选择切片工具选择切片。 使用切片工具或切片选择工具时，按住 Ctrl 键 (Windows) 可以在两者之间切换。 选择多个切片： 使用切片选择工具 ，执行下列操作之一： 按住 Shift 键并点按。 （2）编辑切片： 组合切片： 选择两个或更多的切片。 右键：选取“组合切片”。 排列用户切片和基于图层的切片： 切片重叠时，最后创建的切片是堆叠顺序中的顶层切片。可以更改堆 叠顺序以便能够访问底层切片。可以指定堆栈的顶层和底层切片，并 在堆叠顺序中上下移动切片。 对齐用户切片 可以将用户切片进行顶、底、左、右或中间对齐 。对齐用户切片可以消除不需要的自动切片并生成较小的、更有效的 HTML 文件。 （3）使用切片： A、 打开你设计好的PS图，选择切片工具 B、 按网页的结构和图片的特点进行切片 切片的大小和位置可以通过切片选项来进行调整 C、选择文件菜单另存为WEB格式命令，保存时会生成index.html 图片文件会存放在images文件夹中(CS3要选择存储为html和图片) D、使用Dreamweaver软件打开刚刚保存生成的html文件进行编辑，删除不必须的图片和进行内容的填充。 （3）使用切片：切片原则和常见问题：?一 切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。 二? 对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来三 在DW中进行编辑时，少用图片，如果能用背景颜色代替的就使用背景颜色，能使用图案的也尽可能使用图案平铺来形成背景 四 在DW中进行编辑时，删除图片时出面表格错位如何办？ 删除图片的时候记住图片的长宽，再插入一个相同长宽的表格。 五 在DW中如何自定义表格的长宽？ 使用表格长宽一样的图片做为单元格的背景。 六 如何在图片上输入文字？ 把图片设置成背景。 谢 谢!