您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

怎样用Sketch快速高保真还原设计稿

原创文章 分类: 经验/观点 版权:
4220 23 8 1
2017-05-04
0.0
普通推荐

希望可以给设计师同学和前端同学一点帮助,由于太忙没有时间好好排版,大家将就看吧,见谅!

怎样用Sketch快速高保真还原设计稿


一、界面

  • 界面介绍Image title
  • 自定义工具栏Image title
  • 选择适合的工具Image title


  • 网格设置
  • 画布显示快捷键:


control+X 显示像素网格


control+P 显示像素


control+R 显示标尺




如果画布放大到最大时如果还看不到像素格,就control+X 显示像素网格即可Image title


Sketch界面与操作详细见官方用户手册:http://www.sketchcn.com/sketch-chinese-user-manual.html







二、测量



  • 测量间距:按住键盘上的 option 键,Sketch会帮你显示出你已选中的图层和你的鼠标现在所悬浮的图层之间的距离。
  • 图层属性:可在右侧检查器里查看。
  • 字符、段落(只针对汉语字体)
    • 字体
    • 字重(常规、粗体、细体、斜体……)
    • 颜色
    • 字号
    • 字符框
    • 单行文字测量时应该使字符框与字体大小一致,以避免测量不准确





使字符框与字体大小一致(如图):


将“行宽”设为自动,“间距”里的“行高”值和字号一致即可。(*这样设置后一般还会有大约1px的边框,这与PinFang字体本身的边线设计有关)

Image title




    • 段落行高(多行文字的行高)

由于行高是指文本框的高度,所以

对于有换行的字间距在Sketch里的算法:

段落间距=行高-字号(*同样加上字体边线超出的大约会比计算值多出1~2px)


    • PingFang字体边线设计超出实际笔画

11~21号超出1px;22~37号超出2px;38~44号超出3px。

附对照表:


Image title



  1. 图形属性,可在查看器读取


  • 尺寸
  • 填充色
  • 边框色
  • 透明度
  • 阴影
  • 模糊
    • 拷贝CSS属性(功能位置:编辑菜单或右键菜单)
      • 适用于获取渐变背景的参数等,如图:Image title
    • 快速选择组内图层
    • 配合快捷键command的快速穿透选择、穿透测量、穿透式多选“#剪贴蒙版可能挡住穿透”
    • 穿透选择:按住command键点选处于编组中的图形,可直接选到该图层 穿透多选图层:“按住command+shift+点选多个图层”(可夸组夸画板)
    • 穿透测量:“按住command+alt+点选图层“和鼠标悬浮的图层之间的距离会自动显示(可夸组夸画板)
      •  *穿透选择时,上面若有蒙版图层则直接选到蒙版图层

    • 蒙版测量
      • 测量蒙版图形的尺寸和间距时,需要用整个组或蒙版进行测量,切勿使用蒙版对象进行测量,因为测量时蒙版对象的隐藏部分也被计算在内
      • 测量蒙版图形的色值时可直接测量蒙版对象





三、切图

  • 直接选中要导出对象,使用右下角导出工具导出(这种方法比较简便,但不适用于导出icon等需要周围留空的对象)

  • 切片工具

快捷键 S

在组内做切片,导出时可选择忽略组外图层

Image title



  • 隐藏/显示切片

在选择图层时,切片层可能会影响选择,可以一键隐藏所有切片层

  • Image title
  • 切片工具的使用
    • 使用切片工具点选图形
    • 使用切片工具制作切片


  • 切片预设

可预设导出规则,设置导出预设可便于以后使用。Image title

Image title

Image title




  • 组内的切图


切片工具配合穿透,可在不打开组的情况下给组内图层创建切片


操作方法:切片工具+command+点选图形


  • 组件内的切图


双击进入组件页内进行切图


  • 批量导出


为默认导出页面内的画板和做过导出设置的图层、组、切片。这个功能比较鸡肋,没有筛选功能。





四、其它


  • 缩放图层工具
    • 直接用对象缩放点缩放、在检查器的通用属性改变大小,这两种缩放方法不改变样式和描边粗细
    • 使用缩放工具(command+K),这种方法会同时作用于样式和属性




二者区别:Image title



  • 像素对其


若图形半像素问题,可使用此工具将适量节点对其到相近的像素格


图层>对齐像素


  • 可设置为默认穿透Image title




  • 在图层栏中快速找到当前所选图层,快捷键:command+shift+J
  • Sketch清除多余内存的方法(Sketch缓存文件有时会占用很大的磁盘空间)


  1. 打开终端输入 cd / 然后回车
  2. 输入 ls -la 然后回车
  3. 输入 sudo du -sh .DocumentRevisions-V100 然后回车
  4. 输入你mac的密码回车查看这个缓存文件多大
  5. 在确保没有sketch文件打开的情况下输入删除命令:
  6. sudo rm -rf .DocumentRevisions-V100 然后回车,搞定!

参考:

http://www.ui.cn/detail/53417.html




五、推荐插件



  • 全文件搜索画板 Navigator


http://sketch.im/plugins/69




  • 切片 Make Exportable


http://sketch.im/plugins/21




  • 文字打包 Font Packer


http://sketch.im/plugins/28




  • 强大的 Sketch 一键汉化工具,可以随时中英文切换 SketchI18N


http://sketch.im/plugins/2











0
onez

首先感谢支持,然后抱歉占位,因为无奈情况 sketch.im 域名切换至 sketch.cm

精彩!

扫描二维码
去手机端查看海报

suofeng

TA已经获得1枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN