学习前端必要的PS基础

为什么我们要学习PS？

因为我们需要知道设计稿里面的颜色，字体大小，背景颜色，一些元素的宽高距离等等信息

学习PS需要知道的基本操作

4. 点击菜单栏 窗口 – 信息、字符、图层 这三个打钩
5. 点击菜单栏 编辑 – 首选项 – 常规 – 单位与标尺 把单位改成像素

7. 打开设计稿以后可能会有一些辅助线 如果不需要就在视图 – 清除参考线

8. 如果说界面打乱了 窗口 – 工作区域 – 复位基本功能

9. 设计图放大和缩小 按住alt键 + 鼠标滚轮滚动 或者 按住ctrl + +或-来放大和缩小

10. 如果希望还原到设计稿100% 按住 ctrl + alt + 0

11. 拖动设计稿 ： 按住空格键 鼠标拖动

12. 像素指的是图片中最小的一个单位，一张图片由很多个像素组成
    

13. 图层：独立一层东西，我们可以通过图层前面来进行关闭和显示图层通过拖拽功来选择图层和拖拽图层
    

14. 如果说设计稿的图层拖乱了，可以调出 窗口-历史记录 还原之前的历史记录 如果是一小部分乱了，ctrl + z 返回上一步（以后写代码里面也是适用的）

15. 操作字体 解决方案 下载字体安装字体
    安装字体 下载完文件以后安装到 C盘 – WINDOWS – fonts 直接拖进去就可以了

16. 拉辅助线需要先调出标尺 ctrl + R

17. 在使用选款工具之前 拉取辅助线来量 拉辅助线之前需要把工具调到拖拽工具那里在拉辅助线的时候 需要是整数的话 拉的时候需要按住shift键
    

18. 取消选款工具 ctrl + d
    

19. 吸色器
    

20. 切图工具
    
    

21. 保存切片工具 文件 – 存储为web所用格式 – 选择一种图片格式存储
    

图片格式	优缺点
JPG = JPEG	不支持透明 不支持动画 清晰度没png高 存储小
Png24	支持透明 不支持动画 清晰度高 存储大.
Gif	支持动画 只支持半透明
WBMP	jpg和png的结合体 清晰高 内存占小 兼容问题

大图保存jpg 小图保存png