ziven27/blog

切图技巧

ziven27 opened this issue · 1 comments

ziven27 commented

方法一：小图切法

-1 1

  1. 选择工具栏的选择工具
  2. 按住ctrl单击你要切的图片，右边图层会同步高亮（如果没有，取消左上角自动选中）
  3. 在高亮图层上右键，选择快速导出为png
  4. 选择导出路径即可

**应用场景：**颜色较少或者需要背景透明效果的小图片！

方法二 大图切法

-1

  1. 选择工具栏的切片工具
  2. 隐藏遮挡的图层（先选中，然后点击左边的眼睛就可以隐藏）
  3. 在图片上拖出图片的大小，可以右击选择编辑切片，然后输入数字调整大小
  4. 同时按住ctrl+alt+shift+S弹出如下存储为web格式对话框，按照下图选中就可以了。
    -1
  5. 你也可以选中切片工具之后，多拖几个选择框，然后从第4步开始，同时导出

**应用场景：**高清的大图，只关注内容不用关注细节的图片。

方法三 小图标切法

这里我以右上角三个分享按钮的小图标为列。

  1. 顶部工具条 文件 > 新建...（大小建议500x500）> 将图标拖动到新建的标签页中（按住ctrl可以多选，然后一次性拖过去）
    snip20161003_19
  2. 选中所有图片，点击顶部工具栏的，左右，上下居中，让他们对齐。
    snip20161003_13
  3. 顶部工具条 图像 > 裁切 > 透明像素
    snip20161003_14
  4. 返回到之前的psd文件，选择左边工具栏 > 矩形选框工具 > 图片上拖拽 > 除开边框，大小为31x31像素。
    snip20161003_17
  5. 顶部工具条 图像 > 画布大小 > 调整到你需要的大小
    -2
  6. 顶部工具条 文件 >  导出 > 将图层导出到文件 > 按以下配置
    （选择了裁切图层，则这几张图片不会一样大，而是会去掉所有透明区域之后的大小。如果这就是你想要的效果，那么前面5部都可以省略）。
    -2

应用场景：这个方法虽然步骤看起来比较的繁琐，但是它的好处就是一次性批量切出图片。如果你没有需要大小一样的要求，那么就只需要第六步就可以了。

Tips

这里有很多的配置项我没有细讲，有疑问的可以在下面给我留言。我会及时回复

下一节：img/图片标签的选取

zhangzewei commented

手动点赞