Photoshop

Photoshop

1.PS由美国Adobe开发的一款用来处理图像的软件。Adobe开发另外一款软件Illustrator（AI），它是用来作图的，它主要跟加拿大开的CorelDRAW抢占市场。
PS是用来处理位图的，而AI是用来处理矢量图的。
2.位图和矢量图
位图是由像素点组成的，文件较大，放大会失真，一般用来表示人物、风景等；矢量图是由线条组成的，文件较小，放大后不会失真，一般用来表示工程图等，是由若干个几何图形拼合而成。
3.分辨率
又叫解析度、解像度。可分为显示分辨率、图像分辨率、打印分辨率和扫描分辨率等。
图像分辨率就是单位英寸中所包含的像素点数。分辨率越高意味着图像越清晰，但这个图像文件也越大。
4.位分辨率
又叫色彩深度或位深度，批一个像素中，每个颜色分量（Red,Green,Blue，Alpha通道）的比特数。
位指的是二进制数或比特(bit)。

常见的位分辨率有：
	1位：2种颜色（黑白二色）
	2位：4种颜色
	3位：8种颜色，用于早期的电脑显示器
	...
	8位：256种颜色，灰阶，有256种灰色（包括黑白）
	...
	16位：可以组合出64k种颜色
	24位：1670多种颜色，真彩色，能提供比肉眼能识别更多的颜色，主要用于拍摄照片
	...

	位数越高，意味着颜色越接近生活中的真彩色，但文件也就越大。

5.网页所支持的图片格式
1）.jpg
24位压缩格式的图片，压缩率越大的图片，显示的内容越模糊，文件会越小。
2）.png
是一种无损压缩的位图图形格式，背景为透明效果，使彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘
3）.gif
分为GIF格式的动画和静态图像也是高压缩的图像文件。静态图像也是高压缩的图像文件。
4）.svg
HTML5新增的矢量图，一般用作图标字符。
5）Base64（图像编码）
设计时把图像文件解析成字符编码，浏览器会自动将其再还原为图像。实际上也是一种加密方法。
很少使用这种用法，图像越大，编码量就越多，所以一般对大图不做base64编码处理。

	base64图片编码网站：https://tool.oschina.net/encrypt?type=4
6）.ico或.cur
	图标文件，一般用作网站的logo

6.svg矢量图使用步骤
1）进入到官网https://icomoon.io/
2）将svg图导入到icomoon网站中，选中，下载
3）将fonts和style.css复制到项目中
4）将style.css引入到网页文件中
5）使用：
用类名引入图标，并在图标名前加上icon-前缀。

6）然后就可以像文字一样去设置其大小和颜色等属性

7.psd
psd是PS所特有的文件格式，它含有图层。一般UI工程师给的UI图是psd格式，可以用它切图。

8.PS操作快捷键
1）缩放
双击“缩放工具”，可以将图像显示比例调成100%。
Alt+鼠标滚轮：可以缩放图像显示比例。
2）F7：打开/隐藏图层调板
3）Alt+Delete：前景色填充
4）Ctrl+Delete：背景色填充
5）x：交换前景色和背景色颜色
6）d：前景色和背景色还原为黑白色
7）Ctrl+d：取消选区
8）Ctrl+t：变换图像大小的旋转方向，按shift键等比缩放，按Alt+Shift沿中心点等比缩放
9）v：切换到移动工具，z：缩放工具，c：切片工具，h：抓手工具，t:文字工具，g：渐变工具
10）Ctrl+z：撤销一次操作，Ctrl+Shift+z：撤销一次操作（撤销一次操作也可以通过撤销历史记录实现）
11）打开调板：F5->画笔，F6->颜色，F7->图层，F8->信息，Alt+F9->动作
12）Ctrl+e：向下合并图层
13）Ctrl+Alt+Shift+s：导出切片图（旧版用法）
9.颜色模式
1）位图：黑白图
2）灰度：采用256级灰阶
3）RGB：显示色，用于屏幕显示（网页采用的是这种颜色模式）
4）CMYK：油墨色，也叫打印色
…
10.新建文件时分辨率设置
1）用于显示的图像的分辨率设为72ppi左右
2）一般打印的图像的分辨率为170ppi左右
3）高精度打印的图像的分辨率为300ppi左右
11.如果要新建的图像文件最终存为png格式，背景要设为透明。
12.在PS中图像编辑时，实际图像是由多个图层组成的。
13.工具框分为：
1）选框或选择工具区
2）绘图区（编辑区）
3）绘矢量图区和文字编辑区
4）缩放、颜色、蒙版区
14.栅格化文字：把文字转换为一般图层。
15.雪碧图（面试点）
也叫精灵图，是把多张小图放在一张大图中，目的是为了减少服务器请求次数，达到优化目的。
1）优点
减少http请求次数
减少图片数量，提升网页加载速度
减少网络带宽占用
2）缺点
提高了网页开发和维护成本。
合并内容性图片会影响页面的可读性，语义化降低
3）应用场景
一般只有描述性图片用来制作雪碧图，比如页面中使用的各种小图标
按钮背景图及其各种效果的图片，适合做成雪碧图
对于img标签设置的内容性图片，是不能合成到雪碧图的
开发游戏使用的素材图片
4）制作规范
图片在合并之前必须保留空隙
图片排列方式有横向和纵向
合并分类的原则
把同属一个模块的图片进行合并
把大小相近的图片进行合并
把色彩相近的图片进行合并
必须保存为png格式的图片