1 / 15

第三章 美工知识

第三章 美工知识. 主讲：刘清梅. 目录. 网页切片及排版. 为什么要切片 切片的原则 如何用 PS 进行切片 利用 PS 切片素材排版. 为什么要切片. 切片就是将一幅完整的图像分割成不同大小小图片，每个小图片可单独导出成独立的文件. 切片的最终目的是提高浏览器下载速度，缩短用户等待时间，增强用户体验. 为什么要切片. 下载大图片需很长时间，分割成小图片可边下载边显示 切片后，很多纯色区域图片可以去掉，用颜色值替代 有些地方是将来需要动态更新的，可切出用文本代替 图像质量要求不同，可分别选择每个小图片的文件格式. 缩短用户等待时间，增强用户体验.

fruma
Download Presentation

第三章 美工知识

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第三章 美工知识 主讲：刘清梅

  2. 目录 网页切片及排版 • 为什么要切片 • 切片的原则 • 如何用PS进行切片 • 利用PS切片素材排版

  3. 为什么要切片 • 切片就是将一幅完整的图像分割成不同大小小图片，每个小图片可单独导出成独立的文件 • 切片的最终目的是提高浏览器下载速度，缩短用户等待时间，增强用户体验

  4. 为什么要切片 • 下载大图片需很长时间，分割成小图片可边下载边显示 • 切片后，很多纯色区域图片可以去掉，用颜色值替代 • 有些地方是将来需要动态更新的，可切出用文本代替 • 图像质量要求不同，可分别选择每个小图片的文件格式 缩短用户等待时间，增强用户体验

  5. 切片的基本原则 • 根据颜色范围来切： • 如一个区域中颜色对比的范围不是很大的，只有几种颜色，就应该单独切开 • 如该区域就一种颜色,可抛弃，排版时用颜色值代替。 • 颜色过多但有整齐的渐变规律，可切出一小部分，用背景把切片数量切的多一重复来实现排版。 • 尽量把单个切片控制在一个颜色范围的轮廓内。

  6. 切片的基本原则 • 切片大小：切片大小要根据需要来切 • 把网页的切片切的越小越好，越能加快网页下载速度 • 切得太小会为后期DW排版带来麻烦 • LOGO等尽量切在一个切片内 • 圆角表格等控制好边角和边沿 • 有的图片应该设置成背景图片

  7. 切片的基本原则 • 切片区域无整性： • 保证完整的一部分在一个切片内,方便以后修改。 • 导出类型: • 颜色单一过渡少的，应该导出为GIF • 颜色过渡比较多，颜色丰富的应该导出为JPG • 有动画的部分应该导出为GIF动画

  8. 切片的基本原则 • 保留源文件： • 即使页面作好了，也要保留带切片层的源文件，说不上哪天要改某一个部分，例如文字什么的，直接修改单独导出所用的切片就可以了。

  9. 利用PS进行网页效果图切片

  10. 利用PS进行网页效果图切片 • 分析页面结构，思考该如何切？ • 根据分析结果拖出切片效果的参考线 • 根据参考线放大效果图进行精准切片 参考线辅助切片 利用放大镜做到切片细节精准

  11. 切片保存 • 刚才我们已经选择保存将切片后的效果图保存出来，以方便后期修改 • 如果要将小图片保存出来应用于网页中，要选择存储为web所用格式

  12. 切片保存 这里可以根据需要选择设置某个小图片的格式

  13. 切片保存 在这里要注意保存类型和切片选项

  14. 切片素材图像的网页排版 • 导出后图片素材被放在images文件夹中 • 启动Dreamweaver，将站点建在保存路径下，images即该站点的素材夹 利用案例操作演示切片及排版的全过程

  15. 谢 谢

More Related