Web:03-神器Photoshop

Posted Sunwj_Monkey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web:03-神器Photoshop相关的知识,希望对你有一定的参考价值。

常用图片格式

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。

photoshop批量切图技巧

切图,就是从效果图中把网页制作需要的小图片裁剪出来。

1、使用psd格式并且带有图层的图像切图

2、在图像上用切片工具切出需要的小图

3、双击切片,给切片命名

4、将需要制作透明背景图像的切片的背景隐藏

5、执行菜单命令 存储为web所用格式

6、点选切片,设置切片的图片格式

7、存储切片,选择“所有用户切片”,点存储(多个切片会自动存到所选文件夹中的images文件夹中)

Photoshop制作雪碧图技巧

雪碧图,就是将网页制作中使用的多个小图片合并成一个图片,使用css技术将这张合成的图片应用在网页不同的地方,雪碧图可以减少网页加载时的http请求数,优化网页性能。

步骤:

1、使用Photoshop新建一张背景透明的图片

2、将小图片复制到此图片中,排列好每个图像的位置,图片幅面不够可以用画布大小调整大小

3、按照所有小图片的范围裁剪图片,存为透明背景的png图片

以上是关于Web:03-神器Photoshop的主要内容,如果未能解决你的问题,请参考以下文章

一张图告诉你Sketch和Photoshop孰优孰劣!

Sketch VS Photoshop——UI设计师该如何选择

代码神器,美化你的课程报告

代码神器,美化你的课程报告

数据可视化神器 | 秒出关系型数据分析图

AI大神李沐开源新手剪辑神器!只看字幕就能剪视频,卡壳重复片段一键删除...