首先需要我们安装一个插件 [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格式)、中国地图、大背景,然后背景转动的圆圈和上下左右的跑线,让前端自己实现即可。


