夜雨原创玩转Sketch第六期：最全图像处理方案

在第五期夜雨玩转Sketch中，我们虚构并上手做了一个项目首页的原型，中间涉及到一些图像和icon的处理没有在前面系列教程中体现，所以第六期，我们将讲述如何使用Sketch处理图像并具体应用到项目中去；在第七期，我们将学习怎么画一枚icon。

注：玩转Sketch系列教程适用于Sketch44或者更高级的版本。

1.本期内容导读

在实际交互设计工作中，我们通常都离不开图像的处理，例如对过大的图像进行大小的调整或者裁剪，可选择的图像处理工具也很多，但是Sketch自带的图像处理特性能很好地满足我们简单的图像处理要求，一站式解决所有需求。本期内容将分别介绍Sketch的5种图像处理方式及其应用案例，分别是：调整大小、转换格式、裁剪形状、消除内容、布局重组。

2.怎么把图像添加到sketch中？

有两种方式把图像添加到Sketch中，一种是通过工具栏“Image...”插入图像；另外一种方式则较为常用，即所谓的复制粘贴（快捷键Command⌘+C/Command⌘+C）图像到画布中。

3.Sketch图像处理方式

（1）调整大小

应用说明：我们有时候获取的图片尺寸过大，需要按比例调整它的尺寸，以便放进我们的原型当中，但又需要完整的图像，而不是一部分的截图。在日常中应用中，我们通过这样的处理方法把一些图片处理成合适大小的QQ表情:)。

Sketch处理方式1：通过检查器的Size调整“Width”和“Height”的数值控制图像大小，注意，点击锁定的话，图像会按照比例来进行调整。

Sketch处理方式2：不在Skech中修改比例，仅通过导出工具控制最终的导出图像大小。即使用“Slice”工具按比例导出，既可以自由输入比例，例如0.65，即65%，也可以选择安卓/IOS平台的尺寸。第2种方式的好处是不改变原图大小。

（2）转换格式

应用说明：不同格式的图像存储大小和分辨率都不同，不同平台也限制了图像采用何种格式上传，所以往往需要对图像的格式进行处理。

Sketch处理方式：和调整图像大小方式2基本一致，只是从输入比例变成了选择图像格式。Sketch支持导出PNG、JPG、TIFF、SVG等常用的图片格式。

（3）裁剪形状

应用说明：把通过裁剪来调整图像的大小，“隐藏”不需要的区域，也可以通过Sketch的Mask（蒙版）来添加遮罩处理。

Sketch处理方式：鼠标双击需要处理的图像，即可在检查器中看到“Crop（裁剪）”菜单，在图像上拖动选中需要裁剪的区域，点击Crop（裁剪）即可。至于蒙版的处理方式，可以参考之前的蒙版教程文章《Sketch基础教程：蒙版（Mask）的使用详解》

（4）消除内容

应用说明：直接在非矢量图像上修改内容，例如需要隐藏敏感信息，替换成新的说明文案等。这种操作技巧在处理产品线上问题时将会应用得十分频繁，例如，APP上某处文案需要修改，通过这种处理方式，可以很快地和开发沟通需要修改内容的位置和新的内容文案。

Sketch处理方式：鼠标双击需要处理的图像，拖动选中需要消除的区域，点击“fill selection（填充选区）”，即可看到消除的区域被默认红色填充了。然后，我们可以通过颜色拾取器，把填充颜色和填充区域的颜色保持一致即可。

（5）布局重组

应用说明：灵活运用截图软件和自带的裁剪、消除功能，我们可以对一个产品的内容布局进行调整，这是一种高效、可行的设计方法。

Sketch处理方式：截图+消除内容+裁剪形状，任意调整位置。

PS：最近都在写Sketch工具教程文章，希望融入交互设计方法论和实践进去，如果你有想要了解的，欢迎评论或者简信和我沟通。