ps网页切片要点及切片范例.pdf

PS 网页切片要点及切片范例 PS网页切片是Web设计中非常重要的一步骤，它可以将网页设计的图像分割成多个小图像，使网页加载速度加快，提高用户体验。下面我们将总结PS网页切片的五个要点，并提供切片范例。 网页切片要点一：根据颜色范围来切 在PS中，根据颜色范围来切片是非常重要的。如果一个区域中颜色对比的范围不是很大的，就只有几种颜色，这样的话就应该单独的把他切出来。如果一个区域中就一种颜色，写代码的时候就可以直接用背景色来表示。颜色过多的话也没有关系，很多时候都要用到渐变的效果，应该把切片数量切的多一些尽量把单个切片控制在一个颜色范围的轮廓内。 网页切片要点二：切片大小 把网页的切片切的越小越好，这是有道理的。切片越小的话可以加快网页下载图片的速度，让多个图片同时下载而不是只下载一个大图片，所以切片大小要根据需要来切，标志LOGO 等主要部分尽量切在一个切片内，防止显示遇到特殊情况时显示一部分，圆角表格部分要根据显示区域的大小来切，控制好边缘和边。 网页切片要点三：切片区域无整性 保证完整的一部分在一个切片内，例如某区域的标题文字，以后修改时方便。这样可以避免在修改时需要重新切片的麻烦。 网页切片要点四：导出类型 颜色单一过渡少的，应该导出为GIF，颜色过渡比较多，颜色丰富的应该导出为JPG，有动画的部分应该导出为GIF动画。 网页切片要点五：保留源文件 即使页面作好了，也要保留带切片层的源文件，说不上哪天要改某一个部分，例如文字什么的，直接修改单独导出所用的切片就可以了。 切片范例 以下是PS网页切片的五个步骤： 1. 拖出参考线，按 Ctrl+R 先调出标尺！为了做到精确的9 等分，我们不采用直接从标尺上拖曳的方式来建立参考线，而采用：视图》新建参考线，在对话框中准确输入参考线的位置这时可以把文档放大，以便参考线更准确。 2. 使用切片工具，首先为上面的圆边和下面的圆边做切片。 3. 这一步，切出左边和右边的切片，单象素的切片，需要把画布放大到1600/% ，这样才可以选择单象素。在网页中， 左边和右边的切片，最终会变成单元格，如果最中间单元格里的内容不是固定的， 就需要使用设置单元格背景颜色的方法，也可以使用设置单元格背景图片的方法，适应表格中间内容的填充。 4. 再为中间一片添加切片，这时也可以放大文档准确切片。 5. 还有一些没有切片的区域，只有把它们变成用户切片，它们才会固定。 6. 为了防止切出的表格变形，需要在“文件 ” >“输出设置 ” >“切片 ”中，作如下设置。 imageready 不能输出嵌套表格(fw 可以 )，这时，最好的方法，还是把一个文档，分成几个部分切片。流程：先把一个文档，从上向下，根据内容切成几部分，输出为“ 仅限图象 ”。然后，分别打开这些图片，做必要的切片，输出为“ html和图像 ” 。 PS网页切片是Web设计中非常重要的一步骤，通过掌握PS网页切片的五个要点，我们可以更好地完成网页设计，并提高网页加载速度，提高用户体验。