Sketch——前端仔心得

设计师中最火的工具绝对是Adobe爸爸底下的Photoshop，业界良心软件，设计必备。而这章主要是介绍新晋设计神器~Sketch！

Da ~ la ~

image

辣么，what is Sketch?

Sketch 是一款矢量绘图应用。作为新晋设计神器，傲娇的Sketch暂时只支持Mac，矢量绘图也是目前进行网页，图标以及界面设计最好的方式。

有人会问，那Photoshop和Sketch有什么不同的地方么？Photoshop大而全，还有必要去学其他软件么？

image

---

Sketch VS Photoshop

Photoshop

• 为图像处理开发的。（图片修正，画笔绘图）
• 不适合移动开发 不同的设备输出不同分辨率的素材
• 重量级软件，耗资源 (每次保存文件，遇到差点的电脑随时随地会崩溃原地爆炸！) 但是能兼顾mac和windows平台
• ...

Sketch

• 多版本控制
• 只支持Mac
• 专注网页设计和ui设计
• 轻量级软件，运行起来非常快
• ...

photoshop:专注位图处理

Sketch:专注网页设计和ui设计

img2

不算废话的废话总结：
如果是用来修图瘦腿瘦脸美白等位图操作—— Photoshop
如果是做轻巧的界面设计工具和icon等矢量图操作—— Sketch

---

Sketch最火爆的标注插件————Measure

对于前端仔，疲于页面业务逻辑的实现，当然是希望能在网页ui实现上，越快速越好。因此，icon的尺寸大小、用色、字体大小、间距等等这些细节上的确认，如果能在图上一次性加入一些标注信息和切图等，减小前端仔和ui大大的沟通成本，这将大大提高前端er的工作效率

为此，隆重推荐用Sketch插件————Measure！！！从此妈妈再也不用担心我罗里吧嗦的繁琐切图问题了~

附上Measure的下载链接：http://utom.design/measure/

使用Measure的好处：

• 可以在页面上自动标记出相关参数（间隔，尺寸，属性，备注）
• 规范导出图，一建生成html，包括css样式
• 更加强力的导出功能（例如：原生支持 @2x 图片导出）
• 像素编辑支持全像素对齐
• 内置很多ios，android，web的模板尺寸
• 不限制大小的画布
• ...

image.png

另外如果还对其他sketch的插件感兴趣，再献上sketch工具箱官网~自行下载研究哈：
http://sketchtoolbox.com/

image

在Sketch Toolbox可以下载Sketch的大部分插件（附件有带压缩包，但该工具仍存在bug不太稳定，容易用着用着就崩溃掉_慎重~）

另外，Sketch3.4版本后，已支持自带插件管理工具，Sketch Toolbox基本可以退休了。

image

自带插件管理工具(点击插件 => 管理插件 => 在弹窗工具箱中可管理已有的sketch插件 or 下载新的插件)

image image

---

给前端仔的

辣么 ~ 搞设计的是美丽又可爱大方温柔的ui大大的天职，而对于我们前端仔，我们只会关心，图要怎么快速切好，啥色号啊，这个图标有多大尺寸啊。。。赶紧撸起来我们的界面吧~

image.png

• 1、标尺使用（快速切图+快速导出图+查看图片标注）

  step0:选中所有图层，找到measure插件，选择工具栏

  image

  step1:点击导出按钮

  image

  step2:查看导出文件，assets文件里面是所有一建切图的文件，点击打开index.html，可看到measure标尺好的界面，鼠标悬浮后即可看到每个小图的尺寸和间距

  image image

• 2、快捷键

  以下列入若干个前端仔常使用的快捷键，让你的工作效率xiu_xiuxiu~

  image

• 3、ui图在移动端可预览（Mirror）

  Mirror:按照图例方式点开，必须在同个局域网内，移动ios设备安装好Sketch Mirror软件，即可在手机上预览ui图

  image

get more，click this:https://www.jianshu.com/p/46284dbe51e6 or 自行百度谷歌啊

---

最后再安利另外一款好用的sketch插件————zeplin！！！

标尺类插件——measure 和 zeplin的用法

image

(Measure工具的工作界面)

image

(Zeplin工具的工作界面，也可以在网页打开在线编辑)

两者的核心功能都是自动输出标注与切图。只不过两者在一些细节处略有不同

1. 收费

   Zeplin：产出物是在线的，用户可以通过访问网页查看Zeplin的标注与切图。你必须先邀请用户进入Zeplin项目组，该用户才可以通过网页访问到。 https://app.zeplin.io/projects

   image

   (zeplin的在线工作界面)

   Measure：产出物在本地。用户得将文件包传来传去的，更新起来肯定会比较麻烦。允许任何人查看。

2. 备注

   Zeplin：可以直接在标注上添加备注，比较方便。

   image

   Measure：要想添加备注，得先在Skech内添加文字>再转成备注格式。

   step0:选中插入文本工具

   image

   step1:输入文本内容

   image

   step2:将文本转换为备注，也可用快捷键 Control+Shift+5

   image

   step3:转换成功后，通过measure输出，就长这样啦~

   image

   在index.html打开后

   image