三维可视化地图制作(Figma保姆级教程)

用户头像
济南/UI设计师/1年前/4206浏览
三维可视化地图制作(Figma保姆级教程)
用户头像
MOJ_z
哈喽大家好,我是MOJ_z,本次给大家带来一个三维可视化地图的视频及文字版本详细教程。
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
本次的案例是以浙江省和四川省为例,在教程开始前,我们先来拆解分析一下三维可视化地图的构成,地图的构成一般分为纹理装饰、轮廓描边发光、地市轮廓描边、轮廓顶部填充、地图轮廓厚度、底部纹理等结构。
下面咱们就一起来看下三维可视化地图的制作详情:
第一步:前往阿里云矢量网站进行地图文件下载并处理
阿里云地址:https://datav.aliyun.com/portal/school/atlas/area_selector
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzM2Njg0) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
在网站中选中自己所需要下载的省份或者地市,点击下载SVG格式文件即可,下载好的文件可直接拖入到figma中,将下载好的地图文件分别分为省份轮廓和地市级轮廓,省份轮廓保留纯色填充、地市级轮廓保留纯色描边即可,两者分开保存,同时一定要保证两个轮廓的大小统一。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzODA4) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
对于从阿里云上所的地图文件,地市轮廓可以能会有较大误差,需要大家手动调整,大家也可以从我这边获取已经调整过的地图文件,可以在评论区进行留言哦~
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzODEy) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzODE2) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
第二步,使用fimga插件进行地图厚度制作
选中上一步处理后的省份轮廓,打开oblique插件,在角度设置中输入90,厚度设置中输入30-50,本参数仅供参考,可适当调整参数设定。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzODMy) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
在厚度生成后,将厚度打组,在此一定要注意,不要将生成的厚度进行合并,不然其生成的效果会达不到立体效果,可参考下面的未合并与合并后的效果对比。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzODQw) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
第三步,调整轮廓厚度颜色及顶部填充颜色
在调整厚度颜色时,可使用渐变颜色来进行处理,渐变从上往下逐渐减弱,让其立体效果更为明显。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzODQ4) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
顶部填充的效果可遵守前亮后暗的规律来进行调色,进而可突出地图的的透视效果,让地图显示的更加立体。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzODU2) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
调整好地图的厚度颜色与顶部填充颜色后,一个简易的三维地图就已经制作完成了。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzODYw) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
第四步,叠加地市轮廓及调整省份描边轮廓
将在第一步中处理过的地市轮廓叠加在地图顶部,地市轮廓可拼合也可不拼合,对其影响不是很大,地市轮廓描边的颜色可选择比地图厚度稍亮的颜色进行调整,同时对于地市描边也可添加渐变,与顶部填充一样,调色要遵守前亮后暗的规则来调整。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzODY0) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
调整完地市级描边轮廓后,我们可以看出来,现在地图的整体并不是很明确,整体的效果也不是很立体,这就需要我们在现有基础上增加一个可以凸显地图整体效果的省份描边来进行效果调整,省份描边也根据前亮后暗的规则来进行制作,同时省份描边的粗细尽量可以盖住地市级描边。调整好之后可以明显的看出,现在的地图比之前更加的立体。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzODY4) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
第五步,地图贴图效果制作
对于地图贴图来说,我们可以使用卫星图、点性纹理、线性纹理来进行贴图,根据于大家的需求来制作就可以。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzOTEy) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
对于贴图的调整也要遵循前亮后暗的规则进行调整,这样可以保证地图整体的透视光影效果统一,大家可以看下方分享的一些地图参考。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzOTQ4) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzOTgw) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
第六步,调整背景纹理及底部圆环装饰
地图背景可以使用卫星图来进行调色处理,添加一个径向渐变,底部圆环装饰主要是以多个圆形调整描边颜色和描边样式来进行处理。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzOTg0) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
调整好后,将地图挪至中心,在地图上方添加地市名称文字和效果,这样一个三维可视化地图就做完了。
三维可视化地图制作(Figma保姆级教程)(图ZMzgxNzMzOTg4) - 软件界面 - 站酷设计师MOJ_z原创素材 - 站酷ZCOOL
收藏
到这里,三维可视化地图的制作教程就已经结束了,感谢大家的观看,对于地图问题还有不明白的和需要地图源文件大家可以留言和私信我哦~
72
举报
|
210
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
软件界面工具栏主题
科技感十足的音乐作曲软件界面
人物图标设计
图片编辑界面截图主题
蓝色红色文件夹置于透明底座
炫彩渐变风格的 APP 图标素材
视频编辑软件界面
IP形象插画设计
基斯·哈林风格的乐器贴图
蓝色透明文件夹图标设计
绘图软件界面中的菠萝插画
网络安全防护示意图
手机APP理财软件界面设计
唯美系插画
科技感软件升级提示
三维手机应用软件界面图标立体化
科技感软件升级提示
智能手表插画
蓝色科技感检查清单界面
水滴与工具栏主题
蓝色软件界面
科技感软件升级提示
科技感软件升级提示
未来科技界面插画
你可能喜欢
相关收藏夹
大家都在看
登录注册