分类
网页ui
网页ui
类别
首页 落地 权益 全套 游戏 动漫 edm 邮件 系统 样机 展示 组件 分享 二维 条码 购物 九宫 天气 地图 导航 状态 排行 播放 银行 签到 认证 日历 聊天 设置 红包 表单 评论 筛选 发布 缺省 搜索 个人 新手 数据 登录 列表 中心 弹窗 支付 详情 其他
格式
PSD AI sketch XD fig
配色
红 橙 黄 绿 蓝 紫 黑 暗 明 亮 深
风格
简洁 大气 干净 极简 高端 酷炫
移动ui
移动ui
类别
首页 营销 权益 全套 游戏 邮件 后台 样机 组件 分享 条码 购物 九宫 天气 地图 状态 排行 播放 银行 签到 认证 日期 对话 设置 红包 表单 评论 条件 发布 缺省 搜索 主页 新手 数据 登录 列表 我的 弹窗 支付 详情 其他 钱包
格式
PSD AI sketch XD fig
配色
红 橙 黄 绿 蓝 紫 黑 暗 明 亮 深
风格
简洁 大气 干净 极简 高端 酷炫
软件ui
软件ui
类别
全套 首页
格式
PSD AI sketch XD fig
配色
红 橙 黄 绿 蓝 紫 黑 暗 明 亮 深
风格
简洁 大气 干净 极简 高端 酷炫
html
html
类别
登录 注册 首页 个人中心 后台 电子邮件 大数据 列表页 详情页 响应式 系统
配色
红 橙 黄 绿 蓝 靛 紫 黑 白 微渐变 黑金 粉 荧光绿
风格
简洁 大气 干净 极简 高端
banner
banner
类别
底部 竖版 横版 胶囊 全屏 电商
格式
PSD AI sketch XD
配色
红 橙 黄 绿 蓝 紫 黑 暗 明 亮 深
排序
最新 热门
图标插画
图标插画
格式
PSD AI sketch svg eps png XD cdr fig ppt
排序
最新 热门
ui原型
ui原型
类别
逻辑图 原型图 插件 其它
格式
xd ai psd rp xmind rplib mp
排序
最新 热门
免费字体
免费字体
字体分类
中文 英文 数字
排序
最新 热门
综合素材
综合素材
类型
名片 海报 高清图 ppt 素材 样机 文档 画册 包装 其它
格式
AI cdr psd jpg ppt eps png sketch xls doc svg
排序
最新 热门
全部
网页ui 移动ui 软件ui html banner 图标插画 ui原型 免费字体 综合素材
登录 注册
网页ui
移动ui
软件ui
html
banner
图标插画
ui原型
免费字体
综合素材
全部
公告
消息
返回
大屏可视化立体感地图的制作方法
03-16 16:00


首先需要我们安装一个插件 [3D-MAP-GENERATOR],一个可以生产3D的PS插件。从B站中可以看到关于这个插件有很多的教程,但都是偏向于如何使用这个插件,那么如何将这个插件运用到我们实际的工作中呢?尤其是地图这方面,下面的分享,我将会一步步的介绍清楚。





<     步骤一   安装软件  >

安装[3D-MAP-GENERATOR]插件,MAC 和 Windows 系统都支持。文章末尾有获取方法以及安装方法。

<   步骤二   获取地图  >

打开:地图选择器http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.80289258670676&lng=104.2822265625&zoom=4,下载中国json数据:







把下载的json数据拖入到https://mapshaper.org/中。










最终导出SVG文件。







为什么会增加导入“mapshaper”步骤,是因为直接从datav导出的地图,省份边界线会有交错,导致后期需要省份边界需要手动调整,mapshaper 中导出的地图边界会重合,对于后期制作分界线有帮助。

<  步骤三   获取卫星地图  >

获取卫星地图的方法目前可以从“谷歌地图”和“高德地图”获取,不过2个地图的效果还是有明显差异,尤其是“高德地图”在放大后效果不佳,建议使用“谷歌地图”,下图是2个地图的对比。










需要把“卫星图像”下面的标签取消勾选,然后保存,作为贴图所用。命名为:航拍图。







当然我这里也有2个不同风格的超清纹理图,缩略图如下,获取方法在文章末尾。










<  步骤四   获取黑白地图  >

打开黑白地图网站:https://tangrams.github.io/heightmapper/找到相同的位置。区块位置选择好后,点击export把截图下载到本地。为方便定位查找,可把map lines和map labels打开,后期在PS中用于对齐边境线用途。命名为:黑白图线。

再把map lines和map labels关闭,导出同等尺寸的黑白图,命名为:黑白图。








当然我这里也有1个超清黑白地图,缩略图如下,获取方法在文章末尾。







<  步骤五   地图生成  >

  5.1  优化矢量地图首先把之前下载好的中国地图svg文件,进行比例上的调整,然后合并省份。










  5.2  基础画板制作

在ps里新建2500×1400画板,依次导入中国地图文件、卫星地图、黑白图线、黑白图。

中国地图导入ps之后,先改为描边为白色,是为了更好的能对齐航拍图和黑白地图。

记住矢量中国地图文件粘贴到PS时必须为:形状图层。










把矢量地图图层名称改成:shape(切忌重点),不然无法把地图区域生成。卫星地图命名为:航拍图。图层顺序及命名如下:







把地图对齐之后,需要把中国地图改为填充色,不要描边。把“黑白图线“图层删除,调整图层顺序为:航拍图、shape、黑白图,并隐藏“航拍图”图层!







这个时候需要注意一点,如果这个情况下,直接生成会导致透视特别大的地图,不利于展示和实际运用,效果图如下:







这时候我们需要对地图进行压缩,两侧向内侧挤压。







  5.3  软件生成地图

调整好尺寸后,打开3D Map Generator-Terrain插件。







点击:Create New Terrain。







“new heightmap document” 为新的地图尺寸,我们调整为:1200。

“Set Terrain Elecation”是控制地形高差的,5是最高,我们调整为2即可。








选择完高程后,点击Create 3D Terrain下的Frontal。下面的Left、Frontal、Right分别是不同的透视方向。等待完成即可。效果图如下:







  5.4  航拍图作为纹理应用及调整

点击Texturing








选择开始文件中的航拍图,把图层复制到新打开的文件中。并把新复制的图层纹理对齐。点击保存即可。










最后生成图如下:







<     步骤六   合成  >

生成完以上地图后,我们还是不能直接,需要根据实际项目的主体进行优化:

  1  首先是优化地图颜色,具体参数如下。










  2  需要添加省市分界线,这个线是可以通过转换好的地图,然后在AI里描边转换成的(如果还不清楚,请查看第二篇地图制作文章),通过叠加颜色:#d3e4e1,暗色:#0d2521,然后再上下轻微移动即可。使高亮的分界线上下都有暗色,这样凹凸感会好一些。







  3  添加省份打点坐标,以及选中样式。为了更加和谐,默认省份打点可以偏向蓝绿色,选中的省市,可以和默认样式做区别,我这里是增加一个动画坐标,然后选中的省市添加一个透明色。







  4  添加地图背景-世界地图,为了让地图更有层次感,需要单独给每个国家增加投影,然后选中世界地图,做一个整体渐变,当然这些操作需要在AI里实现。然后在地图上添加国家名字,淡化透明度。










  5  添加海洋纹理,丰富界面质感,只需要调整纹理透明度即可。







  6  在中国地图下一层增加转动圆环,圆环转动方向和速度要有区别。







  7  最后加中国地图边界流光动画,这里需要用AE的插件:saber制作。在中国地图底层增加网格装饰线,上下左右的流光跑线,增加整体画面动感。两侧可以再加一些箭头装饰,丰富地图两侧位置的空虚。在最上层添加蒙版弱化两侧。

交付给开发,需要单独导出的元素包括:地图边界流光(apng格式)、中国地图、大背景,然后背景转动的圆圈和上下左右的跑线,让前端自己实现即可。








上一篇: 数据大屏立体感地图如何做
下一篇: 没有了
 充值/购买
ui设计素材下载服务商  蜀ICP备15027037号
请联系在线客服充值 sitemap sitemapxml
×
×
扣分提示
积分
你好,本次下载将扣除你
确定下载
下载信息
下载链接
复制
下载码
复制
有问题提交反馈