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图片

?

原文地址:https://www.cnblogs.com/swjblog/p/9807502.html

时间: 2024-10-18 09:21:27

Web:03-神器Photoshop的相关文章

Robot Framework Selenium(RFS :web自动化测试神器)

Robot Framework 目录 1简介 2特性 3RIDE 1.简介: Robot Framework是一款python编写的功能自动化测试框架.具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进行分布式测试执行.主要用于轮次很多的验收测试和验收测试驱动开发(ATDD). Robot Framework是开源软件,由Nokia Siemens Networks开发并提供支持. 2.特性: 1.测试用例使用文本文件(TXT或者TSV文件)保存,使用制表符分隔数据

photoshop如何截图

学习web前端,photoshop是其中的一门课程,但因为不是主要课程,所以一般讲的范围比较概括化,并不详细.但photoshop比起其它编程软件来说,它就是傻瓜操作,但是往高深了研究就不一样.至于为什么说是傻瓜操作,完全是因为它的工具齐全,在工具栏里试过之后就知道了,不需要其它的,经常用就好. 截图只截你想要的部分,但刚接触的不一定知道,所以,下面介绍三种截图. 1.钢笔 点自由钢笔工具,附上你需要的图片,在你需要的地方开始画,画过的地方叫路径.画完后,点击右键,选择"创建矢量蒙版"

WebStorm 9“神器”变“霸器”

WebStorm 9测试版新增:Live Edit增强.JS后缀模板.Gulp集成.Node.js的spy-js和改善Editorconfig等. 早在半年前,JetBrains就发布了WebStorm 9的发展路线,经过半年的不断努力与更替.WebStorm 9测试版现在可以使用了,其中包括:Live Edit增强.JS后缀模板.Gulp集成.Node.js的spy-js和改善Editorconfig等. Live Edit Live Edit现在与Node.js应用程序一起工作,并可以在进行

WEB学习-CSS盒模型

盒子的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin. width是"宽度"的意思,CSS中width指的是内容的宽度,而不是盒子的宽度. height是"高度"的意思,CSS中height指的是内容的高度,而不是盒子的高度 padding是"内边距"的意思 border是"边框" margin是"外边距" 认识width.height 下面这两个盒子

png的故事:隔行扫描算法

转载自AlloyTeam:http://www.alloyteam.com/2017/06/the-story-of-png-deinterlacing-algorithm/ 前言 前文已经讲解过如何解析一张png图片,然而对于扫描算法里只是说明了逐行扫描的方式.其实png还支持一种隔行扫描技术,即Adam7隔行扫描算法. 优劣 使用隔行扫描有什么好处呢?如果大家有去仔细观察的话,会发现网络上有一些png图在加载时可以做到先显示出比较模糊的图片,然后逐渐越来越清晰,最后显示出完整的图片,类似如下

制作简单文本爬虫

爬去内容: 图片地址,下载文档中的图片到指定文件夹中 实现原理: 1.保存网页源代码 2.Python 读文件加载源代码 3.正则表达式提取图片地址 4.下载图片 源文件 # _*_ conding:utf-8 _*_ <!DOCTYPE html> <html lang='en' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv="Content-Type" conte

如何让你的PS识横纵,批量改尺寸

编者按:如果你有一堆图片要修改尺寸,怎么办?一张张来吗?那样就太浪费时间了,或许你知道可以用神器Photoshop的动作来进行批处理,那么如果你要修改的图片横竖不一怎么办?让我们来学习一下,如何利用神器Photoshop来批量修改图片尺寸并且自动分辨横向竖向,下面进入正文. 背景:想将大量图片统一处理成500px * 500px大小,底色为白色,该如何一键搞定? 第一个: 新建一个动作,针对横向尺寸图片,开始记录 第一步调整图像大小,等比例,宽度改为500像素. 第二步修改画布大小,高度改为50

关于重装系统与Visual Studio 2015

开始入坑  ... 9.25左右,由于本人电脑上同时安装了社区版vs2013与社区版vs2015,.无奈天公不作美,vs2015我每次一点击右上角的“登录”,马上就白屏,并弹窗提示,停止运行(忘了截屏,留罪证!!!).作为一名深度的强迫症患者,是无法忍受这种情况的存在.接着,我就去“卸载或更该程序”中卸载(开始入坑...) 好不容易,把vs2015卸载完成,这时才发现自己又趟上大事了——vs2013无法运行.更令人感到手足无措的是,vs2013在“在卸载或更改程序”列表中不见了,也就是说,微软提

CSS基础(三)

一.权重问题深入 1.1 同一个标签,携带了多个类名,有冲突: 1 <p class="spec1 spec2">我是什么颜色?</p> 2 <p class="spec2 spec1">我是什么颜色?</p> 和在标签中的挂类名的书序无关,只和css的顺序有关: 1 .spec2{ 2 color:blue; 3 } 4 .spec1{ 5 color:red; 6 } 7 </style> 红色的.因为