提前了解这些PS小技巧！你才能在前端这条路上走得更远

PhotoShop

Photoshop新建画布

1. 分辨率：72或300

   • 72是web所使用图片的常规分辨率。因为分辨率太大会导致图片体积增大很多，所以为了保证网路传输效率，决定使用72
   • 300是照片常用的分辨率，能够保证足够的清晰度。

2. 颜色模式

   • RGB：以红、绿、蓝为三原色，是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色（三原色饱和度范围（0~255））
   • cmyk：印刷模式
   • lab模式：Photoshop专属模式，可以和rgb以及cmyk之间进行切换
   • 位图：只有黑、白两个颜色
   • 灰度：只有黑、白、灰色三种色系

3. 背景色：透明色

Photoshop图层

• 新建图层
  • ctrl+shift+n
• 删除图层
  • 选中图层，按delete键
• 复制图层
  • ctrl+J

Photoshop选取工具

• 快捷键：M
• 添加选区：按住shift不放
• 减少选区：按住alt不放
• 交叉选区：按住shift+alt不放

Photoshop套索工具

• 可以用于实现不规则形状的选区
• 三种套索工具

1. 套索工具：用鼠标移动不稳定
2. 多边形套索工具：多样性
3. 磁性套索工具：自动吸附跟随图形走向

Photoshop标尺

• Ctrl+;:隐藏或显示参考线

Photoshop快速选择

• 快速选择工具：根据鼠标点击处区域的色域选择附近的区域（部分），一般适用于比较规则（颜色对比强烈的图片）
• 魔棒工具：选择所有颜色相近的区域
  • 容差：选中区域可允许的颜色误差

Photoshop印章工具

• 对图片的部分区域进行修复，一般用于去水印
• 按住alt，选中区域，即可进行仿制

Photoshop钢笔工具

• 可以定义多条线条或曲线，最终得到一个不规则的选区

Photoshop切片

• 切割psd原型图从而得到中所需要的图片
• 切片过程
  1. 分析原稿（理清图层之间的关系）
  2. 划分为一层一层，属于同层的归为一类进行切割（注意图片是否透明）
  3. 使用切片工具进行切片
     • 先切第一层，然后隐藏第一层，切二层。（依次进行）
  4. 存储为web格式，选中所有用户切片

雪碧图

• 将多张小的图片集中放在一张大的图片中（提高网站加载速度）
• 在线网站（https://css.spritegen.com/）（https://www.toptal.com/developers/css/sprite-generator）