Sketch进阶教程-全面的图像处理方案

Sketch Mac是一款为设计师量身定做的优美界面和强大工具兼有的专业绘图工具。能够满足网页、用户界面、图标等的设计需求。 Sketch是一款为设计师量身定做的优美界面和强大工具兼有的专业绘图工具。制作出漂亮的图形是一件很有挑战性的事情，你所需要的是一款精心设计的应用 程序。此次小编带大家了解基本工具使用方法。

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

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

2、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处理方式：截图+消除内容+裁剪形状，任意调整位置。