基础班PS的基本操作

发表于
字数统计: 738 | 阅读时长 ≈ 2

ps的基本操作

作为前端工程师来说，对于PS的使用要求是：

  • 会量尺寸
  • 会量颜色

前端的重点在代码的编写，按照设计图完成一个页面。

首选项设置

在使用PS之前，需要先把首选项设置好

步骤：

  1. ctrl+k 打开首选项
  2. 选择单位与标尺
  3. 将单位都设置为像素

css2

打开文件

使用PS操作图片的第一步：打开图片

  • 直接把图片拖拽进PS即可
  • 或者点击左上角 文件 → 打开 →选择对应文件即可

放大图片

有时候需要把图片放大方便量取

  • 点击左侧工具栏中的缩放工具（Z）css3
  • 使用快捷键
    • 放大：ctrl +
    • 缩小：ctrl -

拖动图片

有时候放大之后需要拖动图片查看其它部分

  • 选择左侧工具栏中的抓手工具（H）css4
  • 使用快捷键
    • 按住空格不放手，然后鼠标左键按下拖动即可

量颜色

前端必会的PS操作之一：量颜色

  1. 选择左侧工具栏的吸管工具（I）

xi

  1. 此时光标变成可以吸管，在需要量颜色的地方点击一下

    css6

  2. 点击之后，鼠标右击，选择 拷贝颜色的十六进制代码 ，最后在代码中 ctrl + v 即可

量尺寸

前端必会的PS操作之一：量尺寸

  1. 选择左侧工具栏的切片工具（C）

    注意：默认显示的效果可能是剪裁工具，需要有以下操作

    tools

  2. 把需要量取的部分切片出来

    ps1

  3. 双击切好的切片，查看量取的尺寸即可

    ps2

切图操作

一般工作中图片都是UI设计好的，但是如果公司不够大，UI妹子人手不够忙不过来，可能需要自己切图

  1. 选择切片：使用切片工具把图片切成切片

    ps1

  2. 导出切片：按下 ctrl + shift + alt + s （三键 + s）

  3. 在弹出窗口设置保存图片格式，点击储存

    ps3

  4. 选择 切片 → 选中的切片

  5. 选择 设置 → 其他 →将图片放进文件夹 前面的勾去掉

  6. 最后点击确定，点击保存即可

拓展

导出有透明的图片（了解）

导出有透明的图片，需要保证图片是PSD格式的图片，并且UI有设置对应的透明图片

PSD图片：是由多张透明的图片重叠出来的，一张完整的PSD图片是由很多只图层构成的

步骤：

  1. 把PSD格式图片拖入PS中

  2. 选择移动工具（V） PS4 按住 ctrl 点击需要导出的透明图片（有颜色的部分）

  3. 在图层面板中找到高亮的部分，右击选择转换智能对象

    ps5

  4. 双击转换后图层前方的小图标，点击确定

    ps6

  5. 此时透明的图片已经选取好了，再按下 ctrl + shift + alt + s （三键 + s）直接保存即可