Photoshop常用图片格式及图片处理技巧笔记

2025-11-04 11:36:22 职业攻略 9390

学习使用Photoshop的基本使用,以及Photoshop中关于切图这一块的知识,目的是能熟练使用Photoshop查看UI设计师的设计效果图,同时利用Photoshop切图来制作专业html页面

一、常用图片格式

图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下:

psd:photoshop的专用格式

优点:完整保存图像的信息,包括未压缩的图像数据、图层、透明等信息,方便图像的编辑

缺点:应用范围窄,图片容量相对比较大

jpg:网页制作及日常使用最普遍的图像格式

优点:图像压缩效率高,图像容量相对最小

缺点:有损压缩,图像会丢失数据而失真,不支持透明背景,不能制作成动画

gif:制作网页小动画的常用图像格式

优点:无损压缩,图像容量小、可以制作成动画、支持透明背景

缺点:图像色彩范围最多只有256色,不能保存色彩丰富的图像,不支持半透明,透明图像边缘有锯齿

png:网页制作及日常使用比较普遍的图像格式

优点:无损压缩,图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑

缺点:不能制作成动画

webp:将要取代jpg的图像格式

优点:同jpg格式,容量相对比jpg还要小

缺点:同jpg格式,目前不支持所有的浏览器

位图和矢量图

位图:也叫点阵图,是由一个个的方形的像素点排列在一起拼接而成的,位图在放大时,图像会失真。上面讲的5种图像都属于位图

矢量图和位图组成图像的原理不同,它的图像轮廓是由函数曲线生成的,当放大图像时,实际的原理就是将曲线乘以一个倍数,图像可以轻易地放大,而且不会出现像素块,图像边缘也不会出现锯齿

svg:目前首选的网页矢量图格式

优点:图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑

缺点:色彩不够丰富

flash:退出历史的重量级网页矢量图格式

优点:图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑、还可以制作动画、可编写交互

缺点:不支持搜索引擎、运行慢、浏览器需要装插件才可支持

锒铛的解释
《传奇霸业逆麟》副本攻略:如何通过挑战获得稀有装备