sketch最强切图工具Sketch Measure(含最详细的讲解)
sketch最强切图工具Sketch Measure(含最详细的讲解)
工具栏
一个集成了所有功能图标的工具栏,可以方便操作每一个功能
执行 Plugin > Sketch Measure > Toolbar 或使用快捷键 control ⌃+ shift ⇧+ B
标注区域
有时你可能需要标注一个区域以突出该层,而这在 Sketch Measure 中很容易实现
在 Sketch 中选中一个或多个层
点击工具栏上的区域按钮或使用快捷键 control ⌃+ shift ⇧+ 1
标注尺寸
用于标注一些图层的宽度和高度
在 Sketch 中选中一个或多个层
点击工具栏上的尺寸按钮或使用快捷键 control ⌃+ shift ⇧+ 2
对于宽度和高度,如果你想分别单独标注以及设置显示方式
可以在按住 alt ⌥键的同时点击工具栏上的尺寸按钮
标注间隔
任何层与画板之间的间距
选中在画板上的一个层或选中任意两个层
点击工具栏上的间隔按钮或使用快捷键 control ⌃+ shift ⇧+ 3
如果你想分别单独显示顶部、右、底部或左的间距
可以在按住 alt ⌥键的同时点击工具栏上的间隔按钮
标注属性
标注图层或文本层的信息,例如填充颜色、边框颜色、不透明度字体和字号等
在 Sketch 中选中一个或多个层
点击工具栏上的属性按钮或使用快捷键 control ⌃+ shift ⇧+ 4
如果你想分别单独标注任何属性
可以在按住 alt ⌥键的同时点击工具栏上的属性按钮
标注备注
在画板上标注一些备注,在规范导出的查看器中展示
插入文本层,键入一些文本
选中文本层
点击工具栏上的备注按钮或使用快捷键 control ⌃+ shift ⇧+ 5
设置切图
快速设置层导出选项的预设和规范导出切片规格
在 Sketch 中选中一个或多个层
点击工具栏上的设置切图按钮或使用快捷键 control ⌃+ shift ⇧+ S
如果你想创建切片图层
可以在按住 alt ⌥键的同时点击工具栏上的设置切图按钮
颜色命名
设置颜色命名和导出.xml文件给开发者
点击工具栏上的颜色命名按钮或使用快捷键 control ⌃+ shift ⇧+ C
在 Sketch 中选中一个或多个图层或文本层
在第 1 步骤弹出的颜色管理对话框界面中点击+按钮
如果你想编辑颜色命名
在对话框界面中双击颜色项目即可
规范导出
一键自动生成 HTML 页面,离线下检查所有设计细节,包括 CSS 样式。
在 Sketch 中选中一些画板
点击工具栏上的规范导出按钮或使用快捷键 control ⌃+ shift ⇧+ E
如果你创建一个 HTML 文件一个画板,请取消选中“高级模式”
规范查看器
你可以使用 Safari 9+ 或 Google Chrome 来查看, 导出的规范基于 HTML 5、CSS 3 和 Javascript 呈现
选中一个层并悬停在层上来测量和获得间距
点击位于规范查看器界面右侧属性检查器的颜色区域可改变颜色格式
使用 command ⌘+ +和 command ⌘+ -来缩放画布
摁住键盘空格键, 同时鼠标拖拽画布可平移画布
切换备注开关可显示和隐藏备注
在线演示:http://utom.design/news/
注意事项
第一次执行上述操作会弹出界面倍率和单位选择对话框
选择的倍率和单位基于当前画板尺寸,如 Sketch 默认 iPhone 7 画板 375x667px 的倍数和单位分别为 1 和 px,同时 Sketch Measure 也内置了常用的倍率和单位,点击下拉菜单即可选择
最后,这个是我的微信号,欢迎大家与我交流。
转载于:https://juejin.im/post/5cfd2c0b51882568862d6ac7
sketch最强切图工具Sketch Measure(含最详细的讲解)相关推荐
- sketch最强切图工具Sketch Measure
https://www.inpandora.com/sketch-measure.html https://www.jianshu.com/p/c11ae88e6b1d 转载于:https://www ...
- sketch android 切图,sketch mac怎么切图 sketch mac切图基础教程
类型:Mac图形图像大小:51.8M语言:英文 评分:10.0 标签: 立即下载 sketch mac怎么切图?sketch mac切图基础教程.最近有使用Mac的用户询问不知道sketch mac怎 ...
- ai怎么切图制作html,APP扁平化设计最强AI切图工具推荐与AI切图教程
目前很多APP设计师使用了AI软件来进行一些扁平化的设计,包括设计APP界面设计.APP引导页界面设计.APP图标设计等等.但是在AI里面切图是非常的不方便.于是,为了解决大家这个烦恼. AI设计师的 ...
- 5款前端切图工具大比拼:谁是最强切图神器
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环.不过,切图工作究竟谁来做?这个问题我们在各大论坛也屡见不鲜:前端工程师认为设计师出了设计稿,那么相应的切图也应该一并交付:设计师则认为前端工程师 ...
- sketch android 切图,Sketch如何快速切图?三分钟教你掌握切图方案
相信有相当一部分的设计同行在工作中碰到各种各样切图尺寸大小的问题,针对Sketch如何快速切图这个问题,今天小编特意出了一篇有关sketch切图尺寸教程的文章,学会了包你三分钟之内掌握设置切图方案的技 ...
- 像素大厨PxCook for Mac(自动标注切图工具)中文免费版
PxCook(像素大厨)是面向设计师的一款免费.交互流畅.全平台支持的标注切图工具软件.它支持对PS.Sketch设计元素尺寸.元素距离.文本样式.颜色的智能标注,支持智能切图.每个UI设计师都在用的 ...
- android在线切图工具,9Cut切图工具
9Cut切图工具由西西给大家带来,这款软件也是能够把一张完整的照片切成九小张,最近的朋友圈特别火爆的九宫格照片就是由这个来制作的,非常的完美,赶紧来下载9Cut切图工具试试吧! 9Cut切图工具介绍 ...
- TinyCrayon-iOS-SDK:强大到使人惊讶的 Mask 及切图工具库
原文链接:https://github.com/TinyCrayon/TinyCrayon-iOS-SDK TinyCrayon-iOS-SDK:强大到使人惊讶的 Mask 及切图工具库.# 为开源点 ...
- android ui 切图工具,APP切图标注教程:UI设计切图标注的小工具实用技巧
分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...
最新文章
- Go的日志模块glog调研笔记
- 这所高校招收佛学研究生,面试需要写论文,毕业后安排去向,就业前景好!...
- Python ImportError: No module named 'requests'解决方法
- volatile修饰的变量_看了这篇volatile详细介绍,面试你会害怕?
- LVS(9)——为NAT单独增加路由器
- @autowired注解注入为null_Intellij IDEA中Mybatis Mapper自动注入警告的6种解决方案
- 吃货阶段01 类的定义 方法的布局 0925
- Unicode 属性类
- 【LeetCode】【HOT】206. 反转链表(迭代/递归)
- Java中的素数求法
- KMPlayer 双重字幕设置和配色方案
- 软件测试难不难?不是计算机专业也能学吗?
- 仿淘宝购物车demo---增加和减少商品数量
- 十七、电话号码的字母组合
- 微软双拼输入法-词根速记,快速上手
- 拼图java代码_Java制作智能拼图游戏原理及代码
- TensorFlow 1.13.安装总结
- 中国云计算厂商TOP30重磅榜单
- QWebEngine集成Netron可视化模型
- 叠氮-三聚乙二醇-琥珀酰亚胺1245718-89-1Azido-PEG3-NHS ester