适合开学季的SVG模版_svg逆向伸长-优快云博客

本文链接：https://blog.youkuaiyun.com/e2_cool/article/details/132606819

宝藏模版

各位编辑器的会员，编辑器内 1000+ 的 SVG 组件你们都用过吗？当下不少高校已经开学，是时候用 SVG 烘托开学季的活力氛围啦！

首先请正在阅读本文的高校组织注意，E2.COOL 黑科技 SVG 编辑器长期致力于公益事业，对高校组件全量开放 SVG 模板的使用，具体政策和使用申请规则请参考《全部SVG模版免费用，E2编辑器高校机构会员开放申请》。

无论和新生们谈校史上的转折点，还是新学期的新变化，都可以通过一种从图文底部 SVG 逆向擦出的黑科技排版去呈现「变」的主题。以纪念复旦大学陈望道先生的《这一句，该如何翻译？》为例，这种效果巧妙将《共产党宣言》的翻译故事分为两个篇章，人物姿势的复用十分巧妙。

同理，复旦大学的《复旦人，在玩一种很新的环保》也通过该 SVG 特效，细数了复旦校园内形形色色的总务处环保举措，让学子们了解了校园内的绿色生活方向，提升了环保理念思想。

有逆向，当然就也有正向擦出伸长。以百雀羚公众号定制案例（by 语图工作室）的《毕业了？没毕业！》为参考，品牌方通过这种「黑白-彩色」的全文擦出变化，鼓励毕业生去实现那些「未完成」，不留遗憾地结束最后一年学业：

新学期是什么？带着种种憧憬，新华社公众号的定制案例（by 小昂）《新学期，请回答》通过多段自动伸长，以连续的排比文案诠释新学期。该效果模拟的是 GQ 实验室行业爆款案例《红了！》，在视觉和文案上具备双重冲击力：

其基本排版思路，我们在《浅谈「微雕」与 GQ 实验室《红了！》》中已经做过讲解，这里再次提醒三点：

1）「空画布」的宽度和高度，是初始画面的尺寸，一般也可以填写第一画面切片的宽度和高度，而不是全文的；

2）「画布伸长（自动）」位于「画布伸长」的筛选器内；

3）第一个「初始高度」应填写 100%，后续画布伸长的「初始高度」和「最终高度」数据收尾相接，不要遗漏百分号；

通过 E2.COOL 的这种排版组合方式，你可以获得极大自由度的内容设计可行性，当然如果你的多段伸长图片有限而简单，也可以直接阅读《黑科技编辑器｜层层伸长教程》使用既成 SVG 组件。

品牌面向学生青年的产品促销 SVG，则应当增强动画本身的灵动感，结合得当的优惠信息，鼓励消费者认同你的广告导向。以 Apple 公众号的《换购新 iPhone，简单得就像 1 2 3》为例，通过连续三组的「点击-回弹-伸长」讲明了换购的价值、方式和意义：

其中第二个模块还用到了 E2.COOL 的 UGC 组件「卡氏弹窗」形式，点击标签支持画面切换，提升了伸长内容信息的承载量。关于这套排版的具体实现，Ceep 老师录制了对应的专题课程。

大一或大二的同学可能会迎来军训活动，有诸多需要准备的物品可以通过公众号推荐给大家。点击下方画面，看看必备的单品推荐：

这是一款具备探照感官特性的宫格游走 SVG 黑科技排版，由交互设计大神@计育韬老师设计，适合对风景街拍、旅游穿搭等画面的集中展示。而同样具备这类遮罩式运动的组件还包括：

由意符文化 GL 大神设计的「标签抽拉」也是编辑器中 UGC 专区的长期热门组件，以 ColorOS 公众号的《返校领buff 开学开大招》为例，4 组下拉标签对复杂的信息进行了有效地整合展示：

如果你能娴熟掌握 E2.COOL 的自由布局组件，那就可以一种更趣味的方式带领学生读者们探寻校园的角角落落。以北京大学的《惊喜上新！北大特饮，承包你的整个夏天！》为例，图文由全元光滑团队基于自由布局组件并适度修改代码实现：

关于自由布局的使用方法，建议点击阅读《视频｜想玩转「自由布局」组件的运营人看过来！》，同时还可以结合一些易于上手的案例进行初步练习。

一方面，高校组织可以通过《全部SVG模版免费用，E2编辑器高校机构会员开放申请》获取免费使用 E2.COOL 黑科技 SVG 编辑器任何模版权限。另一方面，目前对于在校生个体，你可以点击阅读《学生价｜¥199｜SVG黑科技编辑器畅享全年》了解专属的优惠服务。同时，针对刚进入大学校园，但可能尚未获得学信网信息更新或学生证更新的同学，我们组织了「凭录取通知书领取 3 个月免费专业会员」的活动。