三维可视化地图制作(Figma保姆级教程)
济南/UI设计师/1年前/4206浏览
版权
三维可视化地图制作(Figma保姆级教程)
哈喽大家好,我是MOJ_z,本次给大家带来一个三维可视化地图的视频及文字版本详细教程。
本次的案例是以浙江省和四川省为例,在教程开始前,我们先来拆解分析一下三维可视化地图的构成,地图的构成一般分为纹理装饰、轮廓描边发光、地市轮廓描边、轮廓顶部填充、地图轮廓厚度、底部纹理等结构。
下面咱们就一起来看下三维可视化地图的制作详情:
第一步:前往阿里云矢量网站进行地图文件下载并处理
阿里云地址:https://datav.aliyun.com/portal/school/atlas/area_selector
在网站中选中自己所需要下载的省份或者地市,点击下载SVG格式文件即可,下载好的文件可直接拖入到figma中,将下载好的地图文件分别分为省份轮廓和地市级轮廓,省份轮廓保留纯色填充、地市级轮廓保留纯色描边即可,两者分开保存,同时一定要保证两个轮廓的大小统一。
对于从阿里云上所的地图文件,地市轮廓可以能会有较大误差,需要大家手动调整,大家也可以从我这边获取已经调整过的地图文件,可以在评论区进行留言哦~
第二步,使用fimga插件进行地图厚度制作
选中上一步处理后的省份轮廓,打开oblique插件,在角度设置中输入90,厚度设置中输入30-50,本参数仅供参考,可适当调整参数设定。
在厚度生成后,将厚度打组,在此一定要注意,不要将生成的厚度进行合并,不然其生成的效果会达不到立体效果,可参考下面的未合并与合并后的效果对比。
第三步,调整轮廓厚度颜色及顶部填充颜色
在调整厚度颜色时,可使用渐变颜色来进行处理,渐变从上往下逐渐减弱,让其立体效果更为明显。
顶部填充的效果可遵守前亮后暗的规律来进行调色,进而可突出地图的的透视效果,让地图显示的更加立体。
调整好地图的厚度颜色与顶部填充颜色后,一个简易的三维地图就已经制作完成了。
第四步,叠加地市轮廓及调整省份描边轮廓
将在第一步中处理过的地市轮廓叠加在地图顶部,地市轮廓可拼合也可不拼合,对其影响不是很大,地市轮廓描边的颜色可选择比地图厚度稍亮的颜色进行调整,同时对于地市描边也可添加渐变,与顶部填充一样,调色要遵守前亮后暗的规则来调整。
调整完地市级描边轮廓后,我们可以看出来,现在地图的整体并不是很明确,整体的效果也不是很立体,这就需要我们在现有基础上增加一个可以凸显地图整体效果的省份描边来进行效果调整,省份描边也根据前亮后暗的规则来进行制作,同时省份描边的粗细尽量可以盖住地市级描边。调整好之后可以明显的看出,现在的地图比之前更加的立体。
第五步,地图贴图效果制作
对于地图贴图来说,我们可以使用卫星图、点性纹理、线性纹理来进行贴图,根据于大家的需求来制作就可以。
对于贴图的调整也要遵循前亮后暗的规则进行调整,这样可以保证地图整体的透视光影效果统一,大家可以看下方分享的一些地图参考。
第六步,调整背景纹理及底部圆环装饰
地图背景可以使用卫星图来进行调色处理,添加一个径向渐变,底部圆环装饰主要是以多个圆形调整描边颜色和描边样式来进行处理。
调整好后,将地图挪至中心,在地图上方添加地市名称文字和效果,这样一个三维可视化地图就做完了。
到这里,三维可视化地图的制作教程就已经结束了,感谢大家的观看,对于地图问题还有不明白的和需要地图源文件大家可以留言和私信我哦~
72
举报
声明
210
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
你可能喜欢
相关收藏夹
登录注册
72登录即可同步推荐记录哦
99+登录即可加入我的收藏
评论登录即可评论想法
分享分享



























































































