利用 Adobe Illustrator 制作网页 LOGO 的个人小技巧

目标效果 / 关键词

SVG path handwriting animation

……

参考效果

• https://motionarray.com/after-effects-templates/super-script-3d-titles-1651358/
• AE 手写模板

思路 & 原理

• fill 和 stroke，钢笔和画笔：

  工具	本质	SVG 结果	能否手写动画
  钢笔（Pen）	几何路径	stroke path	✅ 可以
  铅笔（Pencil）	几何路径	stroke path	✅ 可以
  ❌ 画笔（Brush）	外观效果	fill 轮廓	❌ 不行

• SVG - M（move）/L（画线）/C（曲线）/Z（闭合）。在内联 <style> 中进行查看。

  • VS Code 中 SVG 图片转代码方法：右键「打开方式」–> 「文本编辑器」

• 钢笔描制骨架（用于动画）（先普通钢笔定锚点，接着曲率等工具来圆滑文字边缘） + 描边外扩加外观（路径的「描边」选项中，加粗描边；将端点、边角改成圆角）

  • 「长按 ctrl + 钢笔」：点击、选择单个锚点
  • ……（还没研究明白）

• 书法效果：

  项目	建议
  线帽	Round Cap（圆头）
  拐角	Round Join
  线宽	统一（或可变化）
  压感	可用 Width Tool（Shift+W）

技巧

1. 自然拐弯（当字母同一笔画中含有两个及以上拐弯时会用到）：多设置锚点（左右2 + 中1），凭经验调整锚点位置（按比例看）、曲率、手柄等。
2. ……

一些工具概念

• 锚点手柄：锚点一左一右两边可以伸缩 / 180° 旋转调整曲线曲率的东西。
• ……