Make Maps Like Lonely Planet

用户38350844486
2 阅读20分钟

下面这版是我按视频画面实际操作整理的 AE 可复刻教程，字幕只拿来辅助核对顺序，参数以画面里能确认到的内容为主。
这支教程的核心不是纯 AE，而是：

AE + GEOlayers 3
另外后半段作者还用了 Motion 4 扩展做镜像关键帧，但这一步也能用 AE 原生功能替代。

我把它整理成“你照着做就能复刻”的版本，并把替换素材后必须重调的参数放在最后。

一、作者这支视频实际做了什么

他复刻的是一本 Lonely Planet 旅行书里的地图版式，特点是：

  • 浅米色陆地
  • 浅蓝色海水
  • 浅棕色道路
  • 城市名 + 空心圆点
  • 伦敦是黑底白星的特殊标记
  • 以伦敦为中心画两圈距离环
  • 从伦敦向几个城市延伸路线
  • 最后做一个很轻的循环动画

二、你需要的东西

  1. Adobe After Effects
  2. GEOlayers 3
  3. 参考图（作者是拍了书页地图）
  4. 可选：Motion 4 扩展
    没有也可以，用 AE 自带的 Time-Reverse Keyframes 一样能做

三、按作者操作顺序整理的完整教程

0. 开始前

视频前面一小段是赞助/片头，真正进入制作大约从 00:40 左右开始。

1. 创建主地图 Mapcomp

时间段：约 00:47–01:15

操作

  1. 在 GEOlayers 3 面板里，点击 Create new Mapcomp

  2. 输入名称：
    Lonely Planet Excursions

  3. 规格设为：

    • 3840 × 2160
    • 24 fps

  4. 时长：

    • 作者一开始输入的是 6 秒
    • 接着口述说也可以做成 10 秒
    • 实际后面成片动画按 10 秒循环在做

你照做建议

主地图 comp 直接建成：

  • 3840 × 2160
  • 24 fps
  • 10 sec

接着做

  1. 点 Next
  2. 影像 profile 作者说无所谓
  3. 创建后，在 GEOlayers 里把底图影像 imagery 关闭

画面里能确认到的点

  • 这是一个 controller comp
  • 作者把 AE 预览里的透明网格关闭，让背景先显示成黑色，便于看图层

2. 取参考图颜色，做图层样式

时间段：约 01:20–03:10

这一段作者是先从参考书页里取色，再在 GEOlayers 里新建 style。

2.1 打开取色信息面板

  1. 菜单栏点 Window > Info

  2. 确认颜色显示方式是：

    • 8 bits per channel
    • 0–255

作者特别强调这里不要显示成很大的别的数值制式，不然后面输 RGB 不方便。

2.2 创建陆地样式 Land

  1. 在 GEOlayers 样式区点击新建样式
  2. 选 Add Style
  3. 重命名为：Land
  4. 用 Info 面板对着参考图陆地区域读取颜色
  5. 作者输入的 RGB 为：
  • R = 160
  • G = 150
  • B = 140
  1. 点击 Apply

2.3 创建道路样式 Roads

  1. 再新建一个 style

  2. 重命名为：Roads

  3. 设定为：

    • 只保留 Stroke
    • 关闭 Fill
    • 取消 Use Fill Color

  4. 对参考图道路取色，作者输入的 RGB 为：

  • R = 145
  • G = 127
  • B = 80
  1. 点击 Apply

2.4 水面不做 style，直接做纯色层

作者这里没给水面单独做 GEOlayers style，而是后面直接新建 Solid 当水。

3. 画出英国陆地和海水

时间段：约 03:10–04:35

3.1 画陆地

  1. 在 GEOlayers 搜索栏输入：United Kingdom

  2. 选择对应的 polygon

  3. 加到 browser / feature 列表

  4. 确认 feature 属性里：

    • Simplify Geometry = Max Zoom

  5. 选中刚才的 Land style

  6. 点击 Draw Feature

这样就把英国轮廓画出来了。

3.2 画海水

  1. 在时间线空白处右键
  2. New > Solid
  3. 用吸管从参考图里取海水蓝色
  4. 命名：Water
  5. 把它拖到英国图层下面

3.3 调整地图视野

作者这时又把地图视野放大、重构图，让画面里：

  • 陆地占比更多
  • 海水不要太多
  • 构图更接近参考图

这一步很重要，因为后面所有地名下载、路线连接、距离环计算都跟当前 zoom 有关。

4. 下载地名数据，准备城市标注

时间段：约 04:35–06:45

作者要做的地点有：

  • Bath
  • Brighton
  • Cambridge
  • London
  • Oxford
  • Windsor

4.1 下载当前视图里的 Places

  1. 在 GEOlayers 面板点击 +
  2. 选择 Download Features
  3. 在最下面选：
    Places > OpenStreetMap Places for the current view

这一步会把你当前构图范围内的城市地名抓进来。

4.2 按名字排序

  1. 选中下载得到的 feature collection
  2. 点击 Feature Properties
  3. 点击：
    Sort Features by Name
  4. 点击 Apply

4.3 挑出要用的城市

作者在已下载的地名里手动挑选：

  • Bath
  • Brighton
  • Cambridge
  • London
  • Oxford

这里没有直接找到 Windsor 点位。

4.4 单独处理 Windsor

  1. 在搜索栏搜 Windsor
  2. 找到的是一个 polygon
  3. 作者说如果只是做 label，其实 polygon 也能用
    但如果你想让它驱动点位/形状，最好转成 point
  4. 点击：
    Convert polygons to points

这样就得到了 Windsor Point

4.5 整理成新的 feature collection

  1. 把这 6 个地点收进一个新的 collection
  2. 命名大意是：
    Lonely Planet places
    或者你自己起名都行

5. 创建城市标注模板

时间段：约 06:45–11:10

这里作者不是一个个手动画字，而是先做一个label template，再让 GEOlayers 自动给所有地点套模板。

5.1 新建标注专用 comp

  1. 到 Project 面板

  2. New Composition

  3. 规格：

    • 1920 × 1080
    • 24 fps

  4. 命名：
    Lonely Planet Label

画面里能看到这个 comp 是 1920×1080、24fps。
持续时间不是重点，作者这里不是拿它做成片，而是拿它做模板。

5.2 建文字层

  1. 选 Text Tool

  2. 字体设为：

    • Open Sans
    • Bold

  3. 作者这里画面里出现过两个字号状态：

    • 先看到 125 px
    • 后面模板画面里又改到 100 px

你照做建议

为了更接近后面的成品效果，建议直接从：

  • 100 px
  • Open Sans Bold

开始。

  1. 输入文字：Feature
    作者说其实不一定非得输入 Feature，只要模板里有文本元素，GEOlayers 会自动把文字替换成地名。

5.3 建圆点

  1. 选 Ellipse Tool
  2. Fill 设为白色
  3. 点击文字 Stroke 打开描边
  4. 描边宽度作者设置为：
  • 5 px

  1. 描边颜色是很深的灰黑色
    作者口述是“9% brightness 的黑色”那种感觉

  2. 按住 Shift 双击 椭圆工具，生成正圆

  3. 重命名图层：Point

  4. 打开：

    • Contents
    • Ellipse Path
    • Size

  5. 把圆点大小改成：

  • 50

5.4 先做基础排版

作者把文字和圆点简单叠在一起，先做成一个基础模板。
后面真正套到地图上之后，再逐个移动位置避让。

5.5 把这个 comp 变成 GEOlayers 的 Label Template

  1. 在 Project 面板找到 GEOlayers 的项目文件夹
  2. 打开：
    GEOlayers 3 Items > Label Templates
  3. 把 Lonely Planet Label 这个 comp 拖进去

这样它就成了一个可调用的 label template。

5.6 批量生成城市标签

  1. 回到 GEOlayers 面板
  2. 在 label template 下拉菜单里选：
    Lonely Planet Label
  3. 选中那 6 个地点 feature
  4. 点击：
    Label Features > Add Labels

这时 GEOlayers 会自动把这些地点都打成标签。

6. 手动微调城市标签位置

时间段：约 09:10–10:40

自动打完标签后，作者开始手调位置，让排版更接近参考书页。

作者实际调法

  • Windsor：往侧边挪，避免和 London 打架
  • Bath：放到右侧
  • Brighton：放到左侧
  • Cambridge：放到右侧
  • Oxford：保留在较高位置附近

这一步作者基本是肉眼对照参考图在调，没有输入明确坐标值。

所以这里的复刻原则是

不是追求固定数值，而是追求：

  • 不重叠
  • 视觉平衡
  • 接近参考图的方位关系

7. 单独把 London 做成特殊样式

时间段：约 10:40–11:55

伦敦不是普通空心圆，而是：

  • 更大号文字
  • 全大写
  • 黑底圆
  • 里面白色五角星

7.1 调整 London 文本

  1. 进入 London 对应的 label comp
  2. 选中文字层
  3. 打开 Character 面板
  4. 打开全大写
  5. 作者先试了：
  • 125 px

后来觉得太大，又改成：

  • 110 px
  • 最后又改成 105 px

最终照做建议

直接用：

  • 105 px
  • 全大写

7.2 放大 London 圆点

  1. 选 Point 图层
  2. 打开 Contents > Ellipse Path > Size
  3. 改成：
  • 75

7.3 把空心圆改成黑底圆

  1. 关闭 Point 的 Stroke
  2. Fill 改成深黑色
    仍然是作者说的那种 9% brightness 黑色

7.4 加白色五角星

  1. 先取消选中 Point
    作者特别说了：不先取消选中，改色会把原来的圆一起改掉
  2. 选 Star Tool
  3. Fill 设白色
  4. 双击创建星形
  5. 重命名：Star
  6. 手动缩小
  7. 放进黑圆中间

7.5 用 Alpha Matte 把星形裁进圆里

如果星角超出圆边：

  1. 让 Point 作为遮罩
  2. 把 Star 用 Alpha Matte 裁进去

7.6 微调星形造型

作者还进了星形参数，把 Inner Radius 往下调了一点，让星形不要太胖。

8. 连接城市路线

时间段：约 12:00–13:35

这一段是用 GEOlayers 的路线连接功能。

8.1 先做 London → Cambridge

  1. 在地点列表里选：

    • London
    • Ctrl + 点 Cambridge

  2. 点击：
    Connect Features

  3. 交通模式选：
    Car

GEOlayers 会生成一条路径 feature。

8.2 套用道路样式并绘制

  1. 把 layer style 切到：
    Roads
  2. 点击：
    Draw Feature

一开始作者发现路线画到了 Water 层下面，于是把路线层拖到 Water 上面。

8.3 再做其它几条路线

作者按参考图又做了几条：

  • London → Windsor → Oxford
  • London → Bath
  • London → Brighton

很关键的一点

作者说明：

多选地点时，连接顺序受图层/列表顺序影响，通常按从上到下连接。

所以如果你做多点路线，记得检查选取顺序。

9. 用 Scale Bar 计算距离环

时间段：约 13:35–17:45

这是这支教程里最关键的一段，因为距离环不是随便画的，而是先在当前地图缩放下测一次像素距离。

9.1 先运行 Scale Bar 脚本

  1. 运行脚本：
    Scale Bar
  2. 作者说位置无所谓，他主要不是用它做比例尺，而是用它来测当前 zoom 下的距离与像素关系

9.2 测 50 km 的像素长度

作者观察 scale bar，最终得到：

  • 430 px ≈ 50 km

但马上他自己又纠正了一次：

这 430 px 是一半概念不对，做整圈椭圆时要翻倍

所以最后他用的是：

  • 860 px 作为 50 km 圈的尺寸基础

9.3 画 50 km 环

  1. 选 Ellipse Tool
  2. 复制刚才距离环的颜色
  3. 关闭 Fill
  4. 打开 Stroke
  5. Shift + 双击 生成正圆
  6. 打开 Ellipse Path > Size
  7. 输入：
  • 860 × 860
  1. 图层命名：50 kilometers 或 50km

9.4 把 50 km 环对准 London

  1. 用 Parent Pick Whip
  2. 按住 Shift 再拖到 London 标签上

作者强调：

  • 只 parent：会保留原位置
  • Shift + parent：会直接吸附到目标位置

后面作者又把它重新 parent 到地图锚点：

  • Lonely Planet Excursions Anchor

然后把该层设为：

  • 3D Layer

这样以后如果地图有 3D 倾斜/方位变化，它也能跟着走。

9.5 复制成 100 km 环

  1. 复制 50 km 那个环
  2. 重命名：100 kilometers / 100km
  3. 把 Ellipse Path > Size 改成：
  • 860 × 2

理论上就是：

  • 1720 × 1720

作者后面画面里可见的数值略有细微变化，但思路就是在当前 zoom 下，100 km = 50 km 的 2 倍。

10. 给距离环加文字

时间段：约 16:40–17:45

操作

  1. 新建文本层
  2. 还是用 Open Sans Bold
  3. 字号作者这里说的是：
  • 50 px 左右

  1. 输入：

    • 100 kilometers
    • 再复制一份改成 50

  2. 文本颜色复制距离环颜色

  3. 把文字旋转，贴着环摆放

  4. 继续 parent 到地图 anchor

  5. 设为 3D

作者还特地提醒：

先 parent，再开 3D 更稳，不然容易乱。

11. 补 Greater London 区域高亮

时间段：约 17:45–18:30

作者看到参考图里伦敦周边有一块更浅的区域，于是额外补了一层。

操作

  1. 搜索：London
  2. 找到 Greater London 对应的 polygon
  3. 新建一个 style：
    Greater London
  4. Fill 用更浅一点的灰色
  5. Draw Feature
  6. 再把这个层的 Opacity 大幅降低

注意

这一段具体灰色数值和透明度画面没有清晰展示。
你照做时直接按参考图看着调就行。

12. 改成方形版式并统一缩放

时间段：约 18:30–19:45

12.1 把整个主地图预合成到一个新的 square comp

  1. 把地图整体放进新 comp
  2. 按 Ctrl + K
  3. 改合成设置为：
  • 2160 × 2160
  1. 命名大意是：
    Lonely Planet Excursion Map - square

12.2 调整整体缩放

作者觉得内容稍微有点大，于是做了两类缩放：

  1. 地图整体稍微缩一下
  2. 标签整体缩小

作者口述里说：

  • 把这些 label scale 到 75% 左右

13. 加边框与噪点纹理

时间段：约 19:45–20:05

13.1 加边框

  1. 到 Effects & Presets
  2. 搜索：
    Border
  3. 选择：
    Composition Border

作者只是加了一个很轻的边框，具体边框数值画面没有清晰展示。

13.2 加噪点

  1. Layer > New > Adjustment Layer
  2. 命名：Noise
  3. 在 Effects & Presets 搜索：
    Noise
  4. 加到这个调整层上
  5. 作者先想加到 10%，最后改成：
  • 8%

就是轻轻给一点纸感、印刷感。

14. 开始做动画：路线先长出来

时间段：约 20:05–21:40

14.1 给一条路线加 Trim Paths

  1. 先 solo 一条路径

  2. 在 shape layer 里点 Add

  3. 选 Trim Paths

  4. 打开 End

  5. 在 2 秒处打关键帧：

    • End = 100

  6. 在起点：

    • End = 0

14.2 做缓动

  1. 选这两个关键帧
  2. 按：
  • F9

即 Easy Ease

14.3 复制到其它路线

  1. 复制这个 Trim Paths 动画器
  2. 选其它几条路径
  3. 直接粘贴

作者后来发现有些关键帧没对齐到正确时间，于是：

  • 按 U 显示关键帧
  • 手动把它们拖回正确位置

14.4 打散节奏

作者不想四条路一模一样同时长出来，于是把其中一条的开始时间往后推了一点，让节奏更自然。

15. 再做距离环出现动画

时间段：约 21:40–22:45

作者这里不是直接缩放 layer，而是改 shape 的 Size。

操作

  1. 选两个环
  2. 搜索参数：
    Size
  3. 在目标时刻打关键帧，保持真实大小
  4. 在前一帧/起始位置，把两个环都设为：
  • 0

也就是从 0 长到完整尺寸

15.1 调 graph editor

作者打开了 Graph Editor
并且在 Value Graph 下把曲线拉得更陡，让环出现时更利落、更快。

这一步没有给明确贝塞尔数值，是手调。

16. 距离文字淡入

时间段：约 22:45–23:20

作者没手打透明度关键帧，而是用了 AE 现成行为预设。

操作

  1. 选两个距离文字层
  2. 在 Effects & Presets 搜索：
    Fade In
  3. 双击：
    Behaviors > Fade In Frames

这个行为会自动生成一个：

  • 15 帧 的淡入

然后作者用：

  • Alt + [`
    来修剪图层起始点

这样文字就会在修剪点自动淡入。

17. 城市标签淡入

时间段：约 23:20–24:05

作者对普通城市标签也做了同样处理：

  1. 选 London 以外的所有 label
  2. 套同一个 Fade In Frames
  3. 调整它们的入场时间

整体原则就是：

  • 路线出来
  • 环长出来
  • 距离文字淡入
  • 城市标签淡入

18. 给 London 加循环脉冲标记

时间段：约 24:05–26:50

这一段作者用了一个现成预设：

18.1 添加预设

  1. 在 Effects & Presets 搜索：
    Simple Map Marker
  2. 注意不要先选中别的层
  3. 双击该预设
  4. 会自动生成一个新的 shape layer
  5. 改名：
    London Map Marker

18.2 吸附到 London

  1. 用 parent pick whip
  2. 按住 Shift 拖到 London label
    让它直接吸附到伦敦位置
  3. 然后再把它的 parent 改到：
    地图 anchor
  4. 勾成 3D

18.3 调预设参数

作者在 Effect Controls 里调了这些参数：

  • Scale：先说要缩到 75 左右

  • Stroke Offset：他说要拉到很大，口述举例是 650

  • Animation Duration：

    • 最开始是 1 秒
    • 后来觉得太快，改成 2 秒

画面里这组值有一点前后变化

视频中某些瞬间画面显示的还是默认/中间值，但按作者口述和最终逻辑，复刻时你这样做最接近成片：

  • Scale ≈ 75
  • Stroke Offset ≈ 650
  • Animation Duration = 2 sec

18.4 混合与透明度

作者又把这个 London Map Marker：

  • Blend Mode 改成类似 Overlay
  • Opacity 明显往下压

目的是让脉冲环更柔和，不抢主体。

这两个最终数值画面没清楚给出，所以这里建议你按参考视觉微调。

19. 做结尾“反向收回”动画

时间段：约 26:50–28:10

作者希望整段 10 秒动画：

  • 前面进场
  • 中间停一下
  • 后面按相反节奏退场
  • 可以循环

19.1 原生 AE 做法

作者先演示了原生方法：

  1. 复制前面的关键帧
  2. 粘贴到后面
  3. 右键：
    Keyframe Assistant > Time-Reverse Keyframes

这样它就会按反方向播放。

19.2 Motion 4 做法

作者随后用了 Motion 4 扩展里的：

  • Clone
  • Mirror

更快地镜像关键帧

没有 Motion 4 怎么办

你就用上面的 AE 原生方法即可。

19.3 留一小段停顿

作者没有把动画首尾直接接死，而是在中间留了大约 1 秒左右的停顿感，让循环不那么急。

20. 用修剪点自动做淡出

时间段：约 28:10–结束

因为前面文字层用了 Fade In Frames / Fade Out duration 15 frames 这一类行为，所以作者在结尾直接：

  • 选中各类 label / text
  • 用：
    Alt + ]

把图层尾部修到目标位置

这样它们会在修剪点自动淡出。

21. 最后作者口头提到但没有完全展开的优化

视频结尾他提到，如果你要继续精修，还可以再加：

  1. 给陆地加一个很淡的黑色边线
  2. 下方再补一个标题/说明文字
  3. 在陆地上叠一个很轻的渐变
  4. 叠一层纸张纹理

但他这支视频里没有继续展开，停在“够用、能交付”的程度。

四、这支视频里你能直接照抄的关键参数

已确认参数

  • 主地图 comp：3840×2160，24fps
  • 最终动画时长逻辑：10 秒循环
  • Land 颜色：RGB 160 / 150 / 140
  • Roads 颜色：RGB 145 / 127 / 80
  • Label 字体：Open Sans Bold
  • 基础文字建议值：100 px
  • 基础点描边：5 px
  • 基础点大小：50
  • London 文字大小最终：105 px
  • London 圆点大小：75
  • 方形成片 comp：2160×2160
  • 标签整体缩放：约 75%
  • Noise：8%
  • 路径 Trim Paths：0 → 100，持续 2 秒
  • Fade In Frames：15 帧
  • 比例尺换算：50 km ≈ 860 px
  • 100 km 环：约为 50 km 的 2 倍
  • London Map Marker 动画时长最终：2 秒

画面不够清晰、需要你按视觉微调的地方

这些我不想假装看清了，所以直接告诉你：

  • Composition Border 的具体数值
  • Greater London 的准确填充色与透明度
  • London Map Marker 最终的 Blend Mode 透明度具体百分比
  • 某些文本最终精确坐标
  • 最后距离环文本的精确旋转角度

这些都属于“看着参考图调”的部分。

五、如果你替换成自己的素材，哪些数据一定要改

这是最重要的部分。你以后不做英国地图，或者不做 Lonely Planet 这个版式，最需要改的是下面这些。

1. 地图构图和缩放

只要你换城市、换国家、换画幅，首先就要重调：

  • GEOlayers 当前视图范围
  • 地图 zoom
  • 地图在画面中的居中位置

因为这会连带影响：

  • places 下载范围
  • 路线长度
  • 距离环像素值
  • 标签密度

2. 所有取样颜色

如果你的参考图不是这本书这套色系，下面颜色都要重采：

  • 陆地色
  • 道路线色
  • 海水色
  • 高亮区域色
  • 距离环文字色

不要直接套 160/150/140 和 145/127/80，除非你就是照着 Lonely Planet 这张图做。

3. 距离环大小必须重新计算

这是最容易做错的。

作者这组 50 km = 860 px
只对他那个当前地图缩放成立。

你一旦换了：

  • 地图 zoom
  • 画面尺寸
  • 城市范围

就必须重新跑一次 Scale Bar，重新测你自己的：

  • 50 km = ? px
  • 100 km = ? px

然后再去改圆的 Ellipse Path > Size

4. 标签位置一定要重新排

自动标签永远只是初稿。
只要你换地名，就必须重新调：

  • 左右摆放
  • 上下错位
  • 避开路线
  • 避开距离环
  • 避开主标题城市

尤其当城市更密集时，你可能得做不止一个 label template。

5. London 那种“主城市特殊标记”要跟着改

如果你的主城市不是 London，而是：

  • Paris
  • Tokyo
  • Madrid
  • Shanghai

那你要同步改：

  • 主标签文字内容
  • 主标签字号
  • 特殊图标样式
  • 主脉冲 marker 的位置
  • 主脉冲圈大小
  • 脉冲节奏

6. 路线连接顺序要重查

如果你换目的地组合，多点连接时要检查：

  • feature 选取顺序
  • 路径是否绕路
  • 交通模式选 car / walk / other 是否合适

因为 GEOlayers 算出来的路不一定和你参考图一模一样。

7. 动画节奏要跟素材密度匹配

如果你的地图元素更多，2 秒把全部路径长完可能太快。
你需要重调：

  • Trim Paths 总时长
  • 各条路径错峰时间
  • 环出现时间
  • 文字淡入时间
  • 循环停顿长度

8. 如果你要加 3D 地图转动，所有附着层都要挂到地图 anchor

包括：

  • 路线
  • 标签
  • 距离环
  • 距离文字
  • 主 marker

并且都要检查是否需要勾成 3D Layer。
否则一旦你对地图做 bearing / pitch / camera movement，这些元素就会飞掉。

六、给你一个最省事的复刻顺序

如果你现在就要照着做，最稳的顺序是：

  1. 先建主地图 comp
  2. 先取色
  3. 先画陆地和海水
  4. 先下载 places
  5. 先做普通 label template
  6. 再单独改主城市
  7. 再连路线
  8. 再测 scale bar 画距离环
  9. 再进 square comp 调整体排版
  10. 最后再做动画

这样最不容易返工。

如果你愿意，我下一条可以继续直接帮你把这份内容整理成**“AE 可执行清单版”**，也就是一条一条写成“点哪里、改多少、完成后看到什么结果”的纯步骤稿。

avatar
文章
阅读
粉丝