Photoshop入门
软件开发的流程
老板or产品经理——拿到需求，可行性分析，竞品分析，做出需求分析思维导图，设计低保真的原型图——跟客户沟通（定稿）
UI设计——根据产品经理的低保真原型图，设计出高保真的交互图——PSD原稿（Photoshop的源文件）
前端工程师——设计页面，设计动画，交互功能，数据渲染
后端工程师——架构选型，数据库的设计，业务逻辑设计，设计接口供前端调用（接口文档）
三个团队同时需求分析，产品设计、任务分工、风险评估、开发时间（做好风险评估，甲方对接）
测试工程师——需求分析、需求评估、写测试用例、自动化脚本设计（一般用python）性能测试。
前端开发完成，后端未完成，前端需要模拟数据进行测试
前后端进行联调——完成整个项目的设计。
测试工程师——测试项目中bug——将bug交给开发——回归测试
上线（运维工程师）——网络环境的搭建，项目的维护上线，公司软件、硬件、网络、权限分配等等
Photoshop介绍
Photoshop是adobe公司开发一款图像处理软件，主要用于处理像素所构成的数字图像。
像素：固定单位，一个小方块，屏幕分为很多小方块，很多发光点，一个发光点就是一个像素
首选项配置：ctrl+k
编辑——首选项——单位标尺
新建画布
ctrl+n
分辨率：图像的清晰程度，分辨率越高，图片越清晰。
- 72：一般用于电子屏幕的分辨率
- 150：用于大型喷绘
- 300：用于印刷品
颜色模式
- rgb：是以红red、绿green、蓝blue为基础色，通过三种颜色的混合来得出其他颜色，每种颜色可以是0~255；全为0是黑色，全为255为白色。
- CMYK：用于印刷品
- 灰度：用黑色为基础色，不同的饱和度的黑色来显示图像，有中间过渡的灰色。
- 位图：黑白图像，图像中只有黑色和白色。
注意：如果画布无法填充颜色，将颜色模式调整为rgb模式（图像——模式+rgb）
图层
图层就是将图像拆分为多个模块，每个模块放一层
特点：上方的图层会盖住下方的图层，透明图层可以看到下方的图层
调整图层：通过鼠标左键点击图层进行拖拽，调整到对应的位置
复制图层：ctrl+c和ctrl+v 或者 鼠标左键点击拖拽到创建新图层的图标上 或者 ctrl+j
选择图层图像范围（载入选区）:ctrl+点击图层的缩略图
取消选区：ctrl+D
颜色填充：油漆桶 alt+delete填充前景色 ctrl+delete填充背景色
表情包的制作
打开多张图片或者psd原稿，将图片或者psd拖拽到窗口栏上进行打开
步骤：
- 打开需要操作的表情包的图片
- 去掉原有的五官：通过套索工具选区原有五官，按住delete或填充周边背景颜色去掉五官
- 复制新的五官：找新五官图片上通过套索工具选取新五官，ctrl+c复制，再在表情包的图片上ctrl+v粘贴新五官（新五官需要创建一个新图层）
- 新五官去色：ctrl+shift+U （图像——调整——去色）,可以将选中的图层里面内容变成灰色模式
- 调整五官周边的过渡：ctrl+m（调整曲线），调整图像的对比度
- 调整五官的大小和方向：ctrl+t（可以调整图层中图像的大小和方向），shift等比例缩放，鼠标移到定界框外面可以旋转图像，鼠标移入定界框中可以移动图像，鼠标移入定界框上可以调整图像的大小
- 更改文字：先去掉原来图层上文本，使用文本工具新增文字
- 文件——导出——导出为web所用格式
移动工具
可以控制图层图像的移动显示位置
自动选择是否勾选：如果勾选，会自动选择到鼠标点击的图像所在的图层；如果没有勾选，当前选中的图层，按住ctrl键也可以选择到鼠标选中的图像所在图层。
选区工具
标尺：ctrl+r
信息查看：窗口——信息
选区默认不会重叠，不会叠加
选区的加、减、交
- 加：按住shift键可以添加选区到已有选区中
- 减：按住alt键可以从已有选区中减去选中区域
- 交：按住shift+alt键可以选中已有选区和新选区叠加的区域
绘制正方形、正圆：按住shift绘制
载入选区：ctrl+点击图层缩略图
取消选区：ctrl+D
选区反选：在选区中鼠标右键选择反向 ctrl+shift+i
编辑选区：alt+s+t
注意：
- 在绘制过程中，可以按住空格键移动新选区
- 编辑选区时，进行旋转，可以按住shift键按照15度进行旋转
微信图标的绘制
- 新建画布，填充背景色
- 绘制男朋友图层：使用选区工具和多边形套索工具绘制图形（注意：眼睛是镂空，眼睛区域减去选区）
- 绘制女朋友图层：拷贝男朋友图层，ctrl+t 编辑图层，鼠标右键选择水平翻转，ctrl+T缩小
- 男女朋友安全距离：选中女朋友图层，选择女朋友图层的选区（ctrl+点击缩略图），再到男朋友图层上减去多余的区域（按住delete删除），注意：眼睛区域需要加选进行删除
- 安全距离的设置：将女朋友图层进行按照中心点等比例缩小（shift等比缩放，alt是按照中心点缩放），通过键盘的上下左右键进行微调。
- 导出图片
套索工具
用于抠图
- 套索工具——绘制不规则的选区
- 多边形套索工具——绘制边缘为直线的不规则的区域
- 磁性套索工具——自动识别对象的边缘，形成锚点和线，最终形成选区
注意：一般进行抠图的操作，会将图片放大，图片更精准
esc：删除所有的锚点
魔棒工具和快速选择工具
用于抠图
快速选择工具：主要用于根据选中的区域的颜色来决定选区范围，色差比较大，选择的范围越精准
魔棒工具：将同种颜色建立选区，可以通过容差值调整选择范围
容差值：指颜色的区分程度，容差值越大，选择的近似色越多，范围越广
注意：在选区相关的工具中，建立选区后，可以使用“选择并遮住”来调整选区的边缘，使边缘更加平滑
仿制图章工具
可以用来去水印
按照alt键进行取样，然后点击鼠标左键进行绘制（去水印）
以周边近似色为取样点进行填充
注意：
对齐：勾选时默认以取样点为参考进行绘制，不勾选时，每次点击鼠标左键都是取样点取样的效果
钢笔工具
- 绘制图形，使用路径进行绘制，绘制完成之后，使用ctrl+enter转为选区
- 新建锚点：鼠标左键点击
- 绘制曲线：鼠标左键新建锚点时，按住不放进行拖拽可以绘制曲线，如果锚点新建完成，可以使用转换点工具进行点击锚点拖拽
- 控制操纵杆：绘制过程中，按住alt键移入对应的操纵杆进行拖拽，绘制完成后，可以使用转换点工具进行控制
- 取消后边的操作杆：绘制过程中，按住alt键点击锚点可以取消后边的操作杆（取消半边的操作杆）
- 添加锚点和删除锚点
- 注意：一旦转为选区，图形不能修改
抖音图标的绘制
- 新建画布，填充背景颜色
- 使用钢笔工具绘制图标的形状（注意：绘制是路径），绘制完成后，按住ctrl+enter转为选区
- 新建3个不同的图层，分别在选区中填充不同的颜色
- 调整图层的位置和显示顺序
- 导出
图片的认识
图片的分类
矢量图
- 概念：是由点、线构成，是由计算机软件生成
- 特点：
- 放大不会失真
- 色彩单一，光影效果表达不到位
- 常见矢量图格式：svg、eps、ai等等
位图（点阵图）
- 概念：是由一系列的像素点构成的图片，是一个个的小色块组成的图片
- Photoshop制作的图片都是位图
- 特点：
- 放大会失真，会模糊出现锯齿状
- 色彩丰富，光影效果表达到位
- 常见位图格式：jpg/jpeg、png、gif、webp、psd等等
图片的压缩模式
无损压缩
- 概念：将相同的色块（颜色）只保存一次，记录对应的位置，过渡的颜色单独进行记录，不会改变图片大小，因为读取图片时，会自动将色块填充上。
- 特点：能够很好的保存图片的质量，但是这种方式不会改变文件的大小
- 常见图片格式：png、gif
有损压缩
- 概念：将肉眼不可见或者不敏感的颜色（色块）删除，不影响图片的显示效果
- 特点：可以改变图片的大小，但是会降低图片的质量
- 常见图片格式：jpg/jpeg
常见的图片格式
jpg/jpeg
- 采用有损压缩
- 压缩比比较高 40：1
- 色彩比较丰富
- 图片体积比较小
- 不支持透明
png
- 支持透明
- 采用无损压缩
- 色彩相对较少
gif
- 支持动画
- 支持透明
- 采用无损压缩
- 色彩单一，只支持256种颜色
psd
- Photoshop的源文件
- 文件体积一般都比较大，包含了图层、通道、滤镜等等信息
svg
- 基于可扩展的标记语言，用于构建二维矢量图形的一种图片格式。
- 文件体积比较大，耗内存
- 一般用于logo
原稿切片
基于psd原稿进行切片
步骤
- 分析psd原稿，确定哪些图片需要切片，哪些不需要切片
- 进行切片，分析切什么格式图片
- 文件——导出——存储为web所用格式
- 调整切片的图片格式和名字
- 点击存储，选择“所有用户切片”，保存到指定位置
注意：切片可能一次切不完，需要切多次
清除所有切片：视图——清除切片
清除所有参考线：视图——清除参考线
雪碧图
又称为精灵图（css sprite），将多张图片组合在一起形成一张图片，可以减少请求服务器的次数，达到优化网页的效果
步骤：
- 新建透明的画布
- 将所有的小图标添加到画布中，进行有序排列（方便代码的编写）
- 可以使用裁剪工具裁剪图片的大小
- 导出为png图片
切片的格式
- logo，小图标切png格式
- 产品图、banner图切jpg格式
网页优化方案
- 合理使用图片的格式，通过减少文件体积来优化网页
- 使用雪碧图技术，通过减少请求服务次数来优化网页