【前端】PS切图笔记

PS有很多的切图方式,例如:图层切图切片切图PS插件切图等。PS切图是前端人员的必备技能之一。

准备工作
  • 首先用PS打开PSD文件,打开后如下图所示
    【前端】PS切图笔记
  • 接下来对PSD图片稍作调整,选择缩放工具
    【前端】PS切图笔记
  • 选择填充屏幕
    【前端】PS切图笔记
  • PSD文件就自适应屏幕了。
    【前端】PS切图笔记
图层切图上
  • 用鼠标选择左侧工具栏的移动工具,如下图所示:
    【前端】PS切图笔记
  • 用鼠标点击PSD中想要切图的图片,例如点击文件中的“快乐编程”,如下图所示:
    【前端】PS切图笔记
  • 此时,右侧图层栏会有一个图层被选中,如下图所示:
    【前端】PS切图笔记
  • 为了检验这个图层155是否对应于我们的快乐编程图片,点击图层155左侧的小眼睛图标,之后PSD文件中的快乐变成图片不见了,如下图所示。此时,该现象说明图层155确实是我们想要的图片对应的图层。
    【前端】PS切图笔记
  • 将光标放在图层155文字上,右键选择快速导出为PNG,保存图片到想要的路径,图片就完成切图了。
    【前端】PS切图笔记
    【前端】PS切图笔记