iiisometric

iiisometric

166
iiisometric 是一个超级方便的制作 2.5D 效果的图形生成、编辑工具,它的使用方法非常简单,只需要设置好颜色,然后就可以使用积木堆叠的方式来快速堆叠出各种有趣的 SVG 图形,应用在实 际的设计项目当中。
分类:

介绍

一、神器介绍

iiisometric 是一个超级方便的制作 2.5D 效果的图形生成、编辑工具,它的使用方法非常简单,只需要设置好颜色,然后就可以使用积木堆叠的方式来快速堆叠出各种有趣的 SVG 图形,应用在实际的设计项目当中。 zz-0326-iiisometric-01 工具可以自定义立方体的颜色、大小以及立方体的面,当我们通过自定义产生合适的图片时,只需点选下载「SVG 图片」或「复制 SVG」,即可得到想要的图片。

二、使用说明

1、界面内容介绍

下图是网站的首屏,最上面的三个按钮 Draw(绘画)、Erase(擦除)、Undo(撤销),三个按钮的概念跟 PS 的画笔、橡皮擦以及 Ctrl+Z 的作用和效果一致,想使用那个功能时只需要点击对应的按钮即可: zz-0326-iiisometric-03 三个按钮的下面是两个设置立方体颜色的数值输入框和随机颜色生成按钮,像随机颜色的按钮,点一下就换一个颜色,点一下就换一个颜色,就像这样: zz-0326-iiisometric-04 画布尺寸提供 3 种,1:1、4:5、16:9,总有一种适合你~ 右下角的 3 个按钮:保存、复制 SVG、清除,主要是进行生成结果的操作的,看字面意思大家也应该清楚其功能,一会儿下面介绍工具使用方法的时候也会给大家介绍一下。

2、进阶设置面板

随着下滑手势,我们可以看到一个更为全面的设置面板: zz-0326-iiisometric-05 左侧我们可以通过滑动滑块儿去调整立方体的大小尺寸,往左滑是调小,往右滑是调大。然后右边的两块儿,上面的 Current cube 是控制立方体的三个面的,Full 就是三个面全部显示,No top 是取消立方体顶面,No left 就是取消立方体左面,No right 就是取消立方体右面啦,就像这样: zz-0326-iiisometric-06 Current cube 下面 nudge 的四个箭头是细调画板中立方体的位置的,就相当于我们键盘上的方向键,按照朝向一点一点的挪动位置: zz-0326-iiisometric-07 至此,工具的面板内容就跟大家介绍的差不多啦,下面我就组合起来给大家演示一下具体的用法!

三、生成及保存方式

上面也说到了 Draw(绘画)按钮,我们生成形状的时候必须保证 Draw 按钮处在点亮状态,拿 PS 来比喻的话,就是需要点选画笔工具。之后我们只需要在中心处的虚线区域,点击一次鼠标就可以生成一个立方体: zz-0326-iiisometric-08 接下来就是真真正正的轮到保存出场了,「Save(保存)」和「Copy(复制)」是两个不同的保存方式,在上面介绍神器的时候我们不是说到结果图片本质是一个 SVG 么,SVG 一般会有两种保存结果,一个是保存为 SVG 图片,一个是复制 SVG 代码。「Save(保存)」和「Copy(复 制)」就是对应这两种保存结果的。 zz-0326-iiisometric-09 我们可以在任何设计软件里去再次修改样式。点击「Copy(复制)」,会复制出 SVG 代码,然后就可以去到任何一款设计软件/开发里粘贴进去使用,以 XD 为例,粘贴后会出现: zz-0326-iiisometric-10 不管是保存下来的 SVG 还是复制粘贴进软件的素材,都同样可以再次修改样式,任你编辑~你瞅,我用这个工具很快就生成了一个 2.5D 的字母素材,比 PS 插件什么的都快多了: zz-0326-iiisometric-11

四、使用授权范围

因为这款神器是工具类的网站,所以不存在侵权、商用问题,网站不支持中文,但可以通过机翻翻译出全部按钮的中文意义,也没有额外需要付费的增值内容,大家可以放心使用!