Mapping All of the Bakeries Near My House in France

1 阅读16分钟

这条新视频我也按同一套标准拆好了。下面是基于作者真实画面操作整理出的 AE / GEOlayers 可复刻教程,优先以画面里看得到的点击、图层关系和参数为准;作者没停留给出精确数值的地方,我会明确标出来。


一、这条视频在做什么

这次的核心不是做步行圈,而是:

  1. Overpass Turbo 从 OpenStreetMap 抓取“bakery”点位数据

  2. 导入 GEOlayers 3

  3. 生成地图合成

  4. 做一个偏海报风的版式:

    • 中心地图
    • 四周白色渐隐
    • 右下角 baguette PNG
    • 右上角标题
    • 地图上的面包店点位逐个随机出现
  5. 再给地图做一个从城市中心拉远 + 轻微旋转的镜头动画


二、软件和素材

作者实际用到的是:

  • After Effects
  • GEOlayers 3
  • Overpass Turbo
  • 一个透明背景的 baguette.png

其中这个面包 PNG 只是装饰素材,不是 GEOlayers 自带的。


三、完整操作流程


1)先去 Overpass Turbo 抓取 bakery 数据

作者打开的是:

  • overpass-turbo.eu

然后先把地图移动到目标城市,视频里是:

  • Le Mans, France

这里有一个很重要的逻辑:

  • Overpass 的搜索结果只和你当前看到的地图范围有关
  • 你现在窗口里看到多大,它就查多大范围里的点位

所以你先要把地图缩放到你想统计的城市范围。


2)用 Query Wizard 搜索 bakery

作者点击顶部:

  • Wizard

弹出 Query Wizard 窗口后,在输入框里输入:

  • bakery

然后点击:

  • build and run query

作者专门解释了一下这里的逻辑:

  • 有些关键词直接搜就能出结果,比如 bakery
  • 有些关键词未必行,比如 church
  • 如果关键词不行,就去 OpenStreetMap 里点一个目标对象,查看它真正的标签字段,再用那个字段去查

也就是说:

  • bakery 这种词这次是直接成功的
  • 作者只是顺便用 church / place of worship 举例,说明以后查别的类别时怎么反推标签

3)检查结果后导出 GeoJSON

查询完成后,地图上会出现一堆面包店点位。

作者确认结果没问题后,点击顶部:

  • Export

然后在导出格式里选择:

  • GeoJSON

下载后,他把文件重命名成了:

  • bakeries

4)把 GeoJSON 导入 GEOlayers

回到 AE 以后,作者在 GEOlayers 面板 里点击底部的:

  • 加号(Add Features to Browser)

然后选择:

  • Import File

接着导入刚才下载的:

  • bakeries.geojson

导入后,GEOlayers 面板里会出现一个新的 feature collection。
作者提到一个很关键的点:

  • 导入后最好把它加入 Favorite Features
  • 不然你关掉 AE 重新打开后,这些导入数据可能就没了

这一步很重要,别省略。


5)双击 Feature Collection,让视图对准目标区域

作者双击刚导入的 bakery feature collection。

作用是:

  • GEOlayers 直接把地图视图跳到这批 bakery 数据所在的位置
  • 方便你基于这批数据直接建图

6)新建地图合成

作者接着新建 map comp。
字幕里明确提到的命名和规格是:

  • 名称:Bakeries Near Me
  • 尺寸规格:Ultra HD 4K
  • 时长:15 seconds

底图样式他说选的是:

  • standard default MapTiler imagery

然后点击:

  • Create

接着为了先拿到一个高分辨率静帧,他又做了一步:

  • 按住 Ctrl 再点击 Finalize

这个操作和上一条 walking distance 视频一样,目的也是:

  • 先生成当前视图的高分辨率底图帧

7)先把 baguette PNG 放进来

作者强调:在开始设计前,先把最重要的视觉元素放进来。

他导入的是:

  • baguette.png

然后直接摆到画面右下区域,作为主视觉装饰。

从画面看,这个 PNG 已经自带阴影,不是他在 AE 里后加的。


四、地图本体的美化步骤


8)给地图加 Tint,降低原底图色彩干扰

作者选中地图 comp 图层,在 Effect Controls 里添加:

  • Tint

他的目的很明确:

  • 原地图里的绿色太强
  • 会抢掉点位和标题的注意力
  • 所以要把底图压成更淡、更灰的风格

从画面能看出来,他是把:

  • Map Black To 往浅灰方向提
  • Map White To 保持浅白
  • 让整体对比变弱

画面里没有停留出一组完整色值,但视觉结果就是:

  • 低对比浅灰地图

9)调整地图取景,把关注区域放到中间偏左

作者说他主要关注的是城市中心这一圈高速环线内的区域。
所以他在 GEOlayers 里稍微重新取景,让:

  • 地图主体偏左
  • 右上能留给标题
  • 右下能留给 baguette PNG

这一步不是随便拖,而是为了后面排版服务。


10)新建白色 Solid 做“边缘渐隐遮罩”

作者不想让地图边缘抢眼,所以他做了一个白色覆盖层。

操作是:

  • Layer / New / Solid
  • 颜色:白色
  • 名称:White BG(画面里就叫这个)

Solid Settings 画面里能确认到:

  • 3840 × 2160 px
  • 白色 solid

11)把 White BG 放到地图上方,先降透明度方便画遮罩

作者把 White BG 放在地图层上面后,先按:

  • T 调出 Opacity

然后先把透明度降低一点,目的是:

  • 暂时透视到底图
  • 好描出大致的关注区域轮廓

字幕没有说这个临时透明度具体是多少,只说“bring the opacity down a little bit”。


12)用钢笔工具给 White BG 画一个不规则 Mask

作者拿:

  • Pen Tool

沿着城市外围高速大致勾了一个不规则轮廓,没有追求严格对称。

他说这里的关键是:

  • 不要做得太机械
  • 不是正圆,也不是完全对称
  • 甚至可以特意绕开 baguette,给构图留空间

所以正确做法不是画一个标准椭圆,而是:

  • 手动画一个自由形状 mask

13)把 Mask 模式改成 Subtract

画完 mask 后,作者在时间线展开 White BG 的 Mask 选项,把:

  • Mask Mode 改成 Subtract

这样就变成:

  • 中间露出地图
  • 外围保留白色

14)给 Mask 加大羽化

作者按:

  • F 调出 Mask Feather

然后明确说把羽化拉到大约:

  • 800 px

从画面里能看到当时的值大概是:

  • 810.0 px / 810.0 px

所以你复刻时可以直接用:

  • 800~810 px

15)把 White BG 最终透明度调到约 90%

字幕里作者说的是:

  • “bring the opacity to about 90”

所以 White BG 最终不做全白实挡,而是:

  • Opacity ≈ 90%

目的就是:

  • 外围地图还能隐约看见
  • 但注意力明显被压低
  • 中间重点区域更突出

五、标题文字的制作


16)文字颜色从 baguette 上取样

作者明确说:

  • 标题颜色不是乱选的
  • 是从 baguette 上取的橙棕色

画面里能看到他在颜色面板中的十六进制值是:

  • #C17732

这个值是可以直接抄的。


17)输入标题文字

作者新建了一个文字层,输入的是两行:

  • BOULANGERIES
  • NEAR ME

字幕里他说的是 “blue lingeries near me”,但实际画面里的拼写是法语:

  • BOULANGERIES NEAR ME

也就是上面一行法语主标题,下面一行英文副标题。


18)文字排版设置

从画面右侧 Character 面板里,能确认到这些信息:

  • 字体:Century Gothic Pro
  • 基础样式先是:Regular
  • 主字号可见值:125 px
  • 行距可见值:129 px
  • 段落:右对齐
  • 填充色: #C17732

字幕里还明确说了两个局部处理:

  1. 选中 BOULANGERIES,改成 Bold

  2. NEAR ME 再缩小一点,大约:

    • 100 px

所以实际效果就是:

  • 上面粗一点、大一点
  • 下面细一点、小一点
  • 右对齐放右上角

19)把地图整体再往左拖一点,给标题留空间

标题出来后,作者觉得右上空间不够,于是回 GEOlayers 把整张地图又往左拖了一些。
拖完以后,他还:

  • 双击 White BG 的 mask
  • 把 mask 整体一起挪过去

也就是说:

  • 地图移动了,白色遮罩也要一起跟着调

不然中间高亮区就和地图主体错位了。


六、把 bakery 点位真正画成 AE 图层


20)先设置 GEOlayers 的 Layer Style

作者这一步没有直接点“Draw Features”,而是先设图层样式。
他在 GEOlayers 右上打开:

  • Layer Style Presets

然后新建一个 style。


21)新建的点位样式参数

画面里能确认到,这个新建 style 是:

  • 类型:Stroke / Point
  • 不要 Fill
  • 颜色:沿用标题同色,也就是 #C17732
  • Opacity:100%
  • Width:20 px
  • Layer Blending Mode:Normal

这一组参数在 GEOlayers 的 Shape Layer Styles 面板里是看得见的。


22)勾选绘制行为选项

在点击 Draw Features 前,作者又点开了 style 的额外选项,实际勾选状态如下:

  • Simplify Geometry (Max Zoom):勾选
  • Auto Stroke Width:勾选
  • Individual Layers:勾选
  • Inside Mapcomp:不勾选

这组设置很关键。

作者解释得很清楚:

为什么要勾 Individual Layers

因为后面他要让这些点位:

  • 一个一个、随机地出现

如果不拆成单独图层,就没法这么灵活控制时间。

为什么要勾 Auto Stroke Width

因为后面有镜头缩放:

  • 线宽/点大小会自动跟随缩放做调整
  • 画面更自然

23)点击 Draw Features,生成所有面包店图层

设置好样式以后,作者选中 bakery 的 feature collection,然后点击:

  • Draw Features

生成结果是:

  • 所有 bakery 点位都被画成独立 AE 图层

从时间线看,这次生成出来的是很多很多单独的 shape/feature layers,每家面包店一层。


七、图层绑定和 3D 关系


24)先把大量 marker 图层设为 Shy,方便编辑

因为点位太多,时间线会很乱。
作者先选中这些 bakery marker 图层,然后打开:

  • Shy Layer

这样做的作用是:

  • 暂时在时间线上把这些层隐藏掉
  • 方便先做主镜头和版式动画

25)把标题和 baguette 都 parent 到地图 Anchor

作者接着选中:

  • 标题文字层
  • baguette.png

然后在 Parent & Link 里都指向:

  • Bakeries Near Me Anchor

这是视频里最关键的父子关系之一。

目的就是:

  • 后面地图缩放、旋转、偏航时
  • 标题和 baguette 也跟着地图空间一起动

26)给标题和 baguette 打开 3D

作者还特意把这两个层:

  • 打开 3D 开关

理由是:

  • 如果后面改 Bearing / Pitch
  • 它们就能跟地图的 3D 运动一致
  • 不会像贴在屏幕上的平面字幕

八、镜头动画


27)给地图做一个 4 秒的 zoom out

作者的思路是:

  • 从更靠近城市中心的位置开始
  • 4 秒内拉远到最终全景构图

所以他在地图 comp 上,对这些 GEOlayers 控制参数打关键帧:

  • Latitude
  • Longitude
  • Zoom
  • Bearing
  • (Pitch 在这条里基本没明显动,至少画面里没明显给出)

他先在最终构图位置打一个关键帧,
然后回到开头,把地图调成:

  • 更近的 zoom
  • 更靠中心
  • 并加一点轻微的 bearing 变化

字幕里没有给出这一段完整的精确数值,只说明了逻辑:

  • 终点是现在这张完整构图
  • 起点是更近、更中心,并带一点旋转

28)让 White BG 跟着一起淡入

作者发现如果直接 zoom,外围白色遮罩会显得很突然。
所以他给:

  • White BG

T 调出 Opacity 后,也做了一个和镜头同步的淡入。

字幕明确说:

  • 也是 4 秒
  • 要和地图主动画的关键帧对齐

所以这一层是:

  • 开头透明度更低
  • 4 秒内淡到最终状态

29)用 Motion 扩展快速加缓动

作者没有手动进 Graph Editor 微调,而是打开了一个面板:

  • Motion
  • 里面是 Easing presets

字幕里他说自己给这组动画用了:

  • 75 to 33

也就是:

  • 入缓动 75
  • 出缓动 33

从画面也能看到他在这个扩展里套用了一个 easing preset。


九、让 bakery 点位随机出现


30)取消 Shy,重新显示所有 bakery 点位图层

主镜头调好之后,作者把那些点位层重新显示出来,准备做逐个出现的动画。


31)给所有点位层加 Fade In+Out - frames

作者在 Effects & Presets 面板里搜索:

  • fade

然后双击一个行为效果:

  • Fade In+Out - frames

这个效果会加到所有选中的点位层上。

画面里 Effect Controls 里能确认到的参数是:

  • Fade In Duration (frames):15.0
  • Fade Out Duration (frames):15.0

作者解释这个效果的好处是:

  • 以后你只要修剪图层长度
  • 它会自动在层头 15 帧淡入、层尾 15 帧淡出
  • 比手打一堆关键帧快得多

但同时也有一个注意点:

  • 你的最终成片结束位置,不能刚好压在图层结尾附近
  • 不然这些点会在结尾意外又淡出去

32)用 GEOlayers 脚本把所有点位随机错开

作者选中所有点位层,然后回 GEOlayers 面板,点击:

  • Run Script File

选择的是:

  • Stagger Layers Random

这一步做完后,大量 bakery 图层的入点会被自动打散,形成:

  • 随机、错落、逐个出现的节奏

从时间线看,效果就是每条 layer 的开始时间都不同。


十、最后的渲染优化


33)最后一步才开 Motion Blur

作者专门说:

  • Motion Blur 不要太早开
  • 不然预览会变很卡

所以他最后才给这些点位层统一打开:

  • Motion Blur

34)在 GEOlayers 的 map comp settings 里打开地图和标签的运动模糊

作者还去 GEOlayers 的 map comp settings 里勾了:

  • Imagery Motion Blur
  • Label Motion Blur

然后点击:

  • Apply

这一步的意思是:

  • 不只是你自己画的 AE 图层有运动模糊
  • GEOlayers 生成的地图影像和标签,也一起吃到 motion blur

35)最后点击 Finalize

所有东西都准备好后,作者再点:

  • Finalize

进入最终输出分析阶段。


十一、视频结尾作者补充的一件事

作者最后说:

  • 他忘了在主流程里加“我家在哪里”的那个关键视觉
  • 所以后来又在图里加了一个简单的 home 标记
  • 再额外做了一个 walking distance map(5 min / 10 min 那种)

但这里要注意:

  • 那部分在这条 bakery 教程里没有完整展开演示
  • 他只是说那部分请去看另一条 walking distance 视频

也就是你如果想完整复刻这条视频的最终成片版本,还需要把“步行时间圈层图”那部分接上。
那一部分你前面发给我的上一条视频,正好就是它。


十二、这条视频里最值得直接照抄的参数

下面这些可以直接抄:

数据与地图

  • Overpass 查询词:

    • bakery
  • 导出格式:

    • GeoJSON
  • Map comp:

    • Ultra HD 4K
    • 15 seconds
  • 底图:

    • standard default MapTiler imagery
  • 高分辨率静帧:

    • Ctrl + Finalize

White BG

  • Solid 颜色:

    • 白色
  • Mask Mode:

    • Subtract
  • Mask Feather:

    • 约 800~810 px
  • White BG 最终 Opacity:

    • 约 90%

标题

  • 文本颜色:

    • #C17732
  • 字体:

    • Century Gothic Pro
  • 主字号可见值:

    • 125 px
  • 行距可见值:

    • 129 px
  • 第二行:

    • 约 100 px
  • 段落:

    • 右对齐
  • 上行:

    • Bold
  • 下行:

    • Regular

点位样式

  • 类型:

    • Stroke / Point
  • Fill:

  • 颜色:

    • #C17732
  • Width:

    • 20 px
  • Opacity:

    • 100%
  • Blend:

    • Normal

Draw Features 选项

  • Simplify Geometry (Max Zoom):开
  • Auto Stroke Width:开
  • Individual Layers:开
  • Inside Mapcomp:关

点位出现动画

  • 效果:

    • Fade In+Out - frames
  • Fade In Duration:

    • 15 frames
  • Fade Out Duration:

    • 15 frames
  • GEOlayers 脚本:

    • Stagger Layers Random

主镜头缓动

  • Motion 扩展预设:

    • 75 to 33

十三、替换成你自己的主题时,哪些地方必须改

这条视频其实很适合改成别的地图题材,比如:

  • 咖啡店
  • 地铁站
  • 学校
  • 古建筑
  • 停车场
  • 医院
  • 景点
  • 房地产周边配套

但你换主题时,这些必须跟着改:


1)Overpass 查询词要改

比如你查:

  • cafe
  • school
  • parking
  • hospital
  • drinking water
  • swimming pool

不一定都能直接用普通英文词成功。
如果搜不到,就按作者说的方法:

  • 回到 OSM
  • 点一个目标对象
  • 看它真正的 tag
  • 再回 Query Wizard 重查

2)地图范围要重新定

Overpass 的结果是和当前视窗绑定的。
所以你换城市或换主题时,第一件事就是:

  • 先把地图缩放到你真正想统计的范围

3)White BG 的遮罩形状要重画

这个蒙版不是通用模板。
你换别的城市构图时,需要重新决定:

  • 中心高亮区放哪
  • 哪边留标题
  • 哪边留主视觉 PNG
  • 边缘怎么自然变白

4)标题颜色最好从主视觉里取

这条片子统一感强,是因为:

  • 标题颜色
  • 点位颜色

都来自 baguette 的橙棕色。
你以后换成咖啡主题、房地产主题、旅游主题,也最好:

  • 从主图素材里吸一个主色
  • 再同时用到标题和地图点位上

5)点位样式宽度要按画面缩放调

这次作者用的是:

  • 20 px

但如果你:

  • 地图更远
  • 点位更密
  • 画面更窄

20 px 可能就太大了,会糊成一片。
这时候你要调:

  • 点位宽度
  • 标题大小
  • White BG 的 feather
  • 主视觉 PNG 的大小

6)随机出现动画要注意结尾不要 fade out

因为作者用的是:

  • Fade In+Out - frames

所以你的 layer 出点太短,或者成片结束点太靠后,都会导致:

  • 有些点在片尾开始消失

这个是最容易被忽略的。


十四、这条视频里最容易做错的地方

我给你直接总结成 5 个高频翻车点:

  1. Overpass 搜索范围取太大或太小
    结果不是太少就是太乱。
  2. GeoJSON 导入后没加 Favorite Features
    关 AE 再开要重新导。
  3. White BG 直接做成规则椭圆
    画面会很假,作者这次明显是故意做不规则轮廓。
  4. Draw Features 时没勾 Individual Layers
    后面没法随机逐个出现。
  5. 过早打开 Motion Blur
    预览会非常卡。

如果你愿意,我下一条可以继续把这份内容整理成你更方便实际照做的版本,比如:

  • 逐点击顺序版
  • AE 面板操作清单版
  • 或者 “这条 bakery 视频 + 上一条 walking distance 视频”合并成一个完整成片工作流版