PhotoShop基础
1.ps由美国Adobe开发的一款用来处理图像的软件。Adobe开发了另外一款软件-（AI），它是用来作图的，它主要跟加拿大开发的CorelDRAW抢占市场。
ps是用来处理位图的，而AI是用来处理矢量图的
2.位图是由像素点组成的，一般文件较大，放大会失真，一般用来表示人物风景等；矢量图是由线条组成的，文件较小，放大后不会失真，一般用来表示工程图等，是由若干个几何图形拼合而成。
3.分辨率
又叫解析度，解像度。可分为显示分辨率，图像分辨率，打印分辨率和扫描分辨率等。图像分辨率就是单位英寸中所包含的像素点数。分辨率越高意味着图像越清晰，但这个图像文件也越大。
4.位分辨率
又叫色彩深度或位深度，每一个像素中，每个颜色分量（Red，Green，Blue，Alpha通道）的比特数。
位指的是二进制数或比特（bit）
常见的位分辨率有：
1位：两种颜色（黑白二色）
2位：四种颜色
3位：八种颜色，用于早期的电脑显示器
........
8位：（2的八次方）256种颜色，灰阶，有256种灰色（包括黑白）
.........
16位：可以组合出64k种颜色
24位：16700多种颜色，真彩色，能提供比肉眼能识别更多的颜色，主要用于拍摄照片
.......
位数越高，意味着颜色越接近生活中的真彩色，但文件就越大
5.网页所支持的图片格式
1）.jpg
24位压缩格式的图片，压缩率越大的图片，显示的内容越模糊，文件会越小。
2) .png
png是一种无损压缩的位图图形格式，是网页常用的图片格式，原因是它压缩比高，生成文件体积小。背景为透明效果，使彩色图片的边缘能于任何背景平滑地融合，从而彻底消除锯齿边缘。
3) .gif
分为GIF格式的动画和静态图像，是高压缩的图像文件，静态图也是高压缩的图像文件。
4) .svg
HTML新增的矢量图，一般用作图标字符。
5) .Base64（图像编码）
设计时把图像文件解析成编码，浏览器会自动将其再还原为图像。实际上也是一种加密方法。
很少使用这种用法，图像越大，编码量就越多，所以一般不对大图做base64编码处理。
base64图片编码网站https://base64.us/
6) .ico或 .cur
图标文件，一般用作网站的logo
6.svg矢量图使用方法
1）进入官网https://icomoon.io/
2）点击icomoonAPP，将svg图导入到icomoon网站中，选中，下载
3）将fonts和style.css复制到项目中
4）将style.css引入到网页文件中
5）使用：
用类名引入图标并在图标名前加上icon-前缀
<span class="icon-shopping_cart"></span> 或点击网站内的图标下方 Get-Code，复制粘贴其html文件
[Missing Image: image-20230326145241910.png]
6）然后就可以像文字一样设置其大小和颜色等属性
7 .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：向下合并图层
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.切片
选中要切的图层，右键快速导出png
16.雪碧图（精灵图）（面试）
所谓精灵图就是图片拼合技术，它就是把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。目的是为了减少服务器请求次数，达到优化目的。
1）优点
减少http请求次数
减少了图片数量，提升网页加载速度
减少网络带宽占用
- 采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。
- 在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
- 使用精灵图可以有效减少服务器接收和发送请求的次数，从而达到提高页面的加载性能
2）缺点
提高了网页开发和维护成本
合并内容性图片会影响页面的可读性，语义化降低
3）应用场景
一般只有描述性图片用来制作雪碧图，比如网页中使用的各种小图标
按钮背景图及其各种效果的图片，适合制作雪碧图
对img标签设置的内容性图片，是不能合成到雪碧图的
开发游戏使用的素材图片
4）制作规范
图片在合并之前必须保留空隙
图片排列方式有横向和纵向（便于取图片的位置）
合并分类的原则
把同属一个模板的图片进行合并
把大小相近的图片进行合并
把色彩相近的图片进行合并
必须保存为png格式的图片
5）步骤：
①.打开ps制作或导入精灵图
②.测量图标的大小及坐标（使用切片工具或矩形选框工具+F8）
.icon1{
width: 32px;
height: 32px;/*宽高为通过ps切图量出的图标的宽高*/
background: url(imgs/精灵图.png)-18px -5px;
/*设置精灵图的位置使其可以拿到相应的图标*/
}6）注意：
①.精灵图主要针对小的背景图片使用
②.精灵图的显示主要借助背景位置来实现—background-position
③.一般情况下精灵图的background-position都是负值（可使用复合写法）
17.去除水印
1）仿制图章，按alt键取颜色，然后左键涂抹。
2）画笔修复工具/污点修复画笔工具，按alt键取颜色，然后左键涂抹。
3）修补工具，先选中要去除水印的地方，然后移动选框到没水印的地方。