猪小花1号

个人签名

282篇博客

sketch 标准制图法的应用

猪小花1号2018-09-13 12:42

作者:马宝


在常见的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同样数值 (节点半径 弧度),完成平行的 弧线


参考案例


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



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