Android程序猿的Sketch学习之旅

简书博客同步更新 传送门

Sketch专为App绘图场景而生，也可以少量处理位图图片。通过下午3个小时的官方用户文档中文版的阅读和实践，我发现Sketch真得做到了“花最少的时间就能上手的绘图工具，让你专注于设计本身”

熟练使用Sketch需要理解一些概念：

1. 选区
2. 图层
3. 群组
4. 切片: 画布中的特定区域导出为一个文件
5. 符号（Symbol），类似于布局文件里的标签
6. 蒙板，这个的作用类似安卓里的SetXfermode方法

刚打开Sketch可以对每个菜单栏下的内容熟悉一遍，Sketch的界面可以分为四个部分

1. 最左边的Page展示
2. 顶部的工具栏
3. 右边的检查器
4. 中间的画板

我的学习过程就是按着Sketch官方用户手册上的介绍实践了一遍，现在感觉已经能自己修改图标了（要有图片素材），剩下的就是对各种快捷键和绘图小技巧的熟练使用。

注意事项：

• 当你为 Mac 或网页设计时，你会想打开子像素抗锯齿效果，但是为 iOS 设计时，你会想关掉它。
• 文字渲染遇到的问题是普通的屏幕里并没有足够多的像素来精确的展现文字的曲线。这就需要用到子像素抗锯齿技术了，它会将那些被文字曲线遮住一部分的像素稍稍变亮一些，并且在视觉上产生更平滑的效果。
• 顺利实现子像素抗锯齿效果，文本必需出现在一个不透明的（有色的）背景上
• 实现图层混合模式，Sketch 需要在一个透明背景上渲染所有的图层

一次实践案例

在App设计里，这张图标表示“我的”或“个人中心”，未选中时：

当选中时，颜色由灰色变成红色，并且填充颜色头像，看起来有面的即视感：

使用Sketch就能很高效的完成这样的改动，具体使用到的操作在官方用户手册的“图片”分类下和“导出”分类下说明得很到位，本文就不再赘叙了。

小结

这次跨界的感受是在安卓开发过程中，能做到对设计师给的切图心中有数，降低了彼此的沟通成本。加深一种解决问题的认识：实现某种UI显示效果，从代码环节转移到图片处理环节上

参考资料：

Sketch官方用户手册