Web前端——PS知识

Posted 2023-01-31

Web前端笔记

第三部分：PS学习

1. 常用图片格式

• 图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特效，
  可以方便我们在制作网页时选取适合的图片格式，图片格式及特性如下：
• 1、psd
  photoshop的专用格式。
  优点：完整保存图像的信息，包括未压缩的图像数据、图层、透明等信息，方便图像的编辑。
  缺点：应用范围窄，图片容量相对比较大。
• 2、jpg
  网页制作及日常使用最普遍的图像格式。
  优点：图像压缩效率高，图像容量相对最小。
  缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。
• 3、gif
  制作网页小动画的常用图像格式。
  优点：无损压缩，图像容量小、可以制作成动画、支持透明背景。
  缺点：图像色彩范围最多只有256色，不能保存色彩丰富的图像，不支持半透明，透明图像边缘有锯齿。
• 4、png
  网页制作及日常使用比较普遍的图像格式。
  优点：无损压缩，图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。
  缺点：不能制作成动画
• 5、webp
  将要取代jpg的图像格式。
  优点：同jpg格式，容量相对比jpg还要小。
  缺点：同jpg格式，目前不支持所有的浏览器。
• 位图和矢量图
  位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，
  位图在放大时，图像会失真。上面讲的5种图像都属于位图。
  矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，
  实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不会出现像素块，图像边缘也不会出现锯齿。
• svg
  目前首选的网页矢量图格式。
  优点：图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。
  缺点：色彩不够丰富。
• flash
  退出历史的重量级网页矢量图格式。
  优点：图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑、还可以制作动画、可编写交互。
  缺点：不支持搜索引擎、运行慢、浏览器需要装插件才可支持。
• 总结
  在网页制作中，如何选择合适的图片格式呢？
  1、使用大幅面图片时，如果要使用不透明背景的图片，就使用jpg图片；
  如果要使用透明或者半透明背景的图片，就使用png图片；
  2、使用小幅面图片或者图标图片时，如果图片含多种颜色，可以使用gif或png图片；
  如果图片是单色，而且要求有很好的显示效果，可以使用svg；
  如果是图片时动画的，可以使用gif。

2. photoshop批量切图技巧

• 切图，就是从效果图中把网页制作需要的小图片裁剪出来。
  1、使用psd格式并且带有图层的图像切图
  2、在图像上用切片工具切出所有需要的小图
  3、双击切片，给切片命名
  4、将需要制作透明背景图像的切片的背景隐藏
  5、执行菜单命令 存储为web所用格式
  6、点选切片，设置切片的图片格式
  7、存储切片，选择“所有用户切片”，点存储(多个切片会自动存到所选文件夹中的images文件夹中)

3. Photoshop制作雪碧图技巧

• 雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，
  雪碧图可以减少网页加载时的http请求数，优化网页性能。
• 步骤：
  1、使用Photoshop新建一张背景透明的图片
  2、将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够可以用画布大小调整大小
  3、按照所有小图片的范围裁剪图片，存为透明背景的png图片

4. 前端页面开发流程

• 具体步骤：
  1、创建页面项目目录
  2、使用Photoshop对效果图切图，切出网页制作中需要的小图片
  3、将装饰类图像合并，制作成雪碧图
  4、结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面