sketch 标准制图法的应用

作者：马宝

在常见的2D设计软件（PS、AI、sketch）中想要实现“3维透视图形”的设计过程，是一种较为复杂的设计流； 不仅要求设计者熟悉画幅、结构、比例、图线和标尺等制图标准。 还要掌握切面、斜度和锥度、平行、圆弧、圆心和切点连接等作图技法。

除了专业的3D建模工具外，平面类工具都要耗费相当大的精力、复杂繁琐的流程完成“伪3D”的效果， 怎样的制图方法才能改善现状，提升效率呢？

比如 AI“效果”中的3D工具，虽然可以迅速的完成单个“立面”设计，但是可编辑性较差，不易控制，无法复用设计元素；很难保证多个元素间的平行透视关系，是否有更好的选择？

带着问题，通过sketch 的两个案列，浅析标准制图法在sketch中实际的效率化应用技法！

资源

查看DEMO 地址 demo 源文件 sketch-mb.zip 版本3.7.2

基本原理

利用 sketch路径转曲功能，可以很方便的提取  辅助线相交的切面，  
操作  outlines（线条转曲）》union（合并形状）》flatten（连接切点） 完成切面

倒推3D图形设计过程，一个立面由几个切面组成，一个切面由几条边线组成，边线于边线间的规律是平行的、透视的，相交；所以确定 辅助线就可以完成切面组合成 一个复杂的“3维透视图形”；

1、先画辅助线，理解“XYZ”3维坐标辅助线的用法，X、Z轴代表切面的两条边线，XZ的角度影响切面斜切透视程度，Y轴影响切面的高度；

2、复制2组XZ 线的4点确立一个切面，复制2个切面 完成一个“立面”

3、完整操作：全选辅助线 》 将线条转曲 outlines 》合并路径 》flatten（连接切点）提取切面》删除 非必要图层 》完成

 

案列教程

效果一

1. 完成辅助线框稿

2. 选中相应4条的辅助线，完成切面提取（参照以上基本原理），调整各切面的间距 位置，形成一种空间层次感

3. 技巧提示，快速复用切面＝》复制两个图层，利用较大切面 减去向下图层得到 新的区域 工具 subtract，

   1. 填充切面颜色完成效果图

最终案例

1. 利用标准制图法完成各个组件的线稿
2. 提示 选择 平行切面的对称节点，设置 corners同样数值 （节点半径 弧度），完成平行的 弧线

参考案例

亲爱小伙伴何不自己动手尝试一下、利用标准制图法完成下图

本文来自网易实践者社区，经作者马宝授权发布