切片线条.pptVIP

切图一切片工具 如何从效果图转换成html页面 工具在哪里 切片工具 切片选择工具 工具简介 切片工具 切片线条：即切片的边界。实线指用户切片，虚线指自动切片。 切片颜色：默认带蓝色标记为用户切片，带灰色标记为自动切片。 切片编号：切片从图片的左上角开始，从左到右，从上而下进行编号，如果更改切片位置或总数，切片会自动重新排序，所以我们一般会为切片命名，而不使用自动生成的编号 上方03为用户切片 下方05为自动切片 双击 命名 尺寸(W/H) Win ctrl+shift+alt+s 文件-存储为web所用格式 Mac win+shift+alt+s 一、确定当前选中的为用户切片 二、确定切片存储类型：jpg/gif/png 三、切片存储质量：高/中/低 用户切片 存储类型 存储质量 一、确定当前选中的为用户切片，依旧根据切片线条和切片颜色来判断 二、预设中选择切片保存类型 GIF：图标类的、质量要求不高的透明图片、动画类型、 平铺的背影图片的。如： JPG：logo、banner大图、广告图片、质量要求较高的 如： PNG：一般用于存储质量要求比较高的透明图片 如： 随机应变 一、格式：只保存图像 二、切片：只保存选中的切片 三、位置：不管保存在哪，在保存切片的时候，系统会自动生成 一个images文件夹 格式 类型 位置 HTML和图像：可以自动生成table布局的html网页和文件 仅限图像：只保存图片 仅限HTML：只保存生成的html网页 所有切片：用户切片和系统自动生成的切片 所有用户切片：所有由用户生成的切片 选中的切片：用户选中的切片，一般为了保证存储得到的图片为最准确的图片，会选择“选中的切片”这一项 设置：选择“默认设置”即可，不作研究 保存选项 images文件夹中， 一张命名为logo的jpg格式的图片 格式 类型 位置 切片选择工具 切片选择工具 直接选择需要的切片，选中可以进行命名、删除、移动等操作 切片工具 练习： 把效果图中的背景切出来，名称为bg 小贴士： 当需要的切片太小时，可以把效果图放大，以保证得到的图片边缘最精确 把需要用到的图片先切好保存出来，在写html页面时会更顺畅，思路更清晰 网页上的图片，照片、banner类一般保存为jpg，其他的，通常都是保存为png或gif（除了动态图片需要用到gif，其他场景png完全可以替代gif） 百看不如一练 双击选中切片，出现“切片选项”框，注意的两点：一给切片命名；二：查看切片的长宽，有时在用鼠标无法精确控制切片大小的时候，可以在这里精确调节切片大小 熟练掌握快捷键 从左到右，从上到下，注意三点： 一、左侧预览窗口中，切片是为否当前用户真正想要选择的图片； 二、右上“预设”中选择需要保存成的图片格式，根据需求选择适合的图片格式； 三、右下存储 查看结果：格式是否为预设中选择的图片格式；根据名称判断是否为想要选择保存的切片 辅助工具，用于选择用户需要用到的切片 背景图保存为png还是jpg还是gif，考虑为什么是png格式的，下一章写html页面时会用到用户自己利用切片工具保存出来的这张图片 可以适应的把一些需要用到的图片先切片保存下来，方法在写html页面的时候调用，但如果网页太长太繁复，而且对切图知识掌握又足够熟练，可以一边切图一边写页，两种方法不限，最终目标只是为了更好更快的生成html页 双击选中切片，出现“切片选项”框，注意的两点：一给切片命名；二：查看切片的长宽，有时在用鼠标无法精确控制切片大小的时候，可以在这里精确调节切片大小 熟练掌握快捷键 从左到右，从上到下，注意三点： 一、左侧预览窗口中，切片是为否当前用户真正想要选择的图片； 二、右上“预设”中选择需要保存成的图片格式，根据需求选择适合的图片格式； 三、右下存储 查看结果：格式是否为预设中选择的图片格式；根据名称判断是否为想要选择保存的切片 辅助工具，用于选择用户需要用到的切片 背景图保存为png还是jpg还是gif，考虑为什么是png格式的，下一章写html页面时会用到用户自己利用切片工具保存出来的这张图片 可以适应的把一些需要用到的图片先切片保存下来，方法在写html页面的时候调用，但如果网页太长太繁复，而且对切图知识掌握又足够熟练，可以一边切图一边写页，两种方法不限，最终目标只是为了更好更快的生成html页