先看视频,再看笔记。 最近有毕业班的同学经常问到下面这种轴测图怎么做,我相信大家自己做项目展示或者在做作品集包装的时候也都碰到过这种效果图,所以说这种效果还是很常见的,那么今天我就来跟大家说一下这种轴测图应该怎么做。
Figma原生制作方法 说到轴测图效果,其实figma是有插件可以生成的,但是插件我今天就不讲了,因为它不用插件也能做出来,我先给大家说一下figma的制作方法。 首先,我们要把我们做的界面变成图片,要是不变成图片,直接编组去调整效果会导致部分界面变形错位,这个错误的我就不给大家演示了,我们来说一下正确的方法。
还有一种方法就是大家先选中画板,然后在figma的命令里面搜索“Rasterize selection”,再敲一下回车,这样就可以自动把我们的界面变成一个图片。 但是这里要注意,变成的图片是一倍图,也就是按照1:1去换算的。 当然,如果你的界面尺寸很大,那这个命令出来了以后,它也会是很大的一张图,但是清晰度也是有的,后续再进行放大缩小也是可行的,所以这是两种方法的区别,大家要搞清楚。
我们把界面变成图片之后,直接全选编组,然后就可以通过旋转调整我们想要的角度了,这个时候注意,再编一个组,现在是两层组了,我们选中*外面的组上下拉伸,这样就能做出来我们想要的轴测图效果了,并且再敲回车进去选择第*个组,还可以继续调整方向。
但是这种方法没有厚度,如果大家只要一层图片,或者在底下加一些淡淡的模糊的阴影用这种方法是可以的,具体还是要看你自己的要求。 第三方工具 现在我们来说一下第三方工具制作轴测图的方法,我们打开网站,新建文件的时候要选择透明背景,这样后期导出之后,方便我们在figma里面调背景,然后点击New Tile,再点击Upload导入我们的界面图片,导入之后就可以把图片往里面拖了。另外这个导入的窗口是能关闭的,再点击New Tile之前上传的还是都在。
那么我们先说尺寸,就是你这张图最终导出来长什么样。这里我建议大家选取倍数值,比如1200x630,这个尺寸导出来放到figma里面,肯定是模糊的,因为本质上它是一个一倍图,如果你想保险一点,想要超清的,那把尺寸的数值乘以2就可以了。 然后,大家注意整个画布视图,你视图当前的状态就是你导出的图的样子,这个就看你自己想要的最终效果了。
下一个步就要排列我们的界面了,我们新建画布之后,画布的角度是斜着的,大家可以先调正之后再去排列,另外还有一点,我们竖向的图拖进来它是默认正方形的,我们要随便调整一下,才能变成竖直的图,然后大家就可以根据自己想要的效果去排列了。
大家排列好之后,可以通过右上角的效果调整厚度、圆角、高度和间距,所有的参数都调整好之后就可以通过拖拽左侧和下方的线条调整我们想要的角度了。
最后就是导出了,这边导出有三个选项,不过我试了一下,webp的格式也可以,而且 webp支持的效果是*多的,如果直接导出png,尺寸太大的话导不出来。 导出之后我们就可以直接把它拖拽到figma里面调整背景了。 然后,它右上角是能导出跟保存的,不过这个导出保存只能在这个工具里面使用,相当于是一个项目文件。再导入的话就可以直接使用之前的布局了,并且也是支持换图的,非常方便。
好了,以上就是今天要给大家分享的内容,希望能对大家有所帮助,没学会的同学快去试一下吧~