135公众号推文svg制作教程

今天分享一个富含新年气氛的 svg 推文案例来源，爱慕文章以点击抽取即日签的形式开出含有品牌祝福的上上签，这样的上上签一共有四个，然后用点击直接展开的交互展示品牌更多内容。 在新页面的展示中，文章借助顶层固定背景图滑动的交互，从四个方面准备一点好东西，送自己、送爱人、送朋友和送爸妈。 整体设计新年气息浓厚，特别适合春节前的排版发布，一起来看看如何复刻吧。 步骤一，整理素材开头是多区域海报弹窗的 svg， 一 张背景图，四张弹出图，点击直接展开的 svg， 包括了一张展开前的手图。 展开的素材中有四个双层滑动的 svg 组建，每个组建包括一张顶层镂空图和两张背景滑动图。步骤二，添加素材效果整篇文章用到的 svg 效果组建包括， id 五十五多区域点击弹窗 id 五十七，点击直接展开 id 一 无缝图和 id 一 百四十二双层滑动。步骤三，来看具体实操多区域海报弹窗需要分别上传背景图和弹出图，然后设置好背景图的触发区域，触发位置与弹出图要一一对应。 点击直接展开，需要先上传展开前的首图，然后将触发区域设置到这张黄色的小卡片上。点击编辑展开内容进入次编辑器，在此编辑器中先上传无缝图， 然后添加 id 幺四二、双层滑动的组建，分别上传顶层图和背景滑动图就 ok 了。 步骤四，所有素材上传完成之后，点击预览查看效果，整体的交互还是比较顺畅的，感兴趣的小伙伴可以来试试这种形式的排版。

今天继续学习一篇春日推文，核心是自由滑动交互的延伸，运用任意方向滑动放大镜，找到隐藏的花所在。点击花后，原本的自由滑动消失，内容向下伸长展开，露出后续内容， 一起来看详细的复刻教程。步骤一，素材整理文章开头是一张无缝图，文章中间的过渡段也都是无缝图， 主要交互的组建素材分为四个部分，展开前的首图、展开后的首图、遮照图层和展开后的内容。步骤二，添加效果组建复刻该案例我们主要用到了无缝图和滑动探照灯加点击换图展开的 svg 组建。步骤三，上传素材无缝图的组建直接上传准备好的素材， 滑动探照灯加点击换图展开股建需要分别上传展开前后的首图、 遮罩图层以及展开后的素材，拨动触发热区到合适的大小和位置即可。点击编辑展开内容，进入到新的编辑页面，继续插入无缝图的组建上传展开后素材 点击完成，返回至主编辑器，文章就复刻好了。点击右上角的预览，查看预览效果，如果你也对 svg 排版感兴趣，就一起来试试吧！

今天带大家看一篇科大讯飞公众号在二零二四年母亲节的推文创意。这篇推文通过自动展开的形式，向我们展现了妈妈们经常说的话，比如 你那屋天天跟个猪窝一样，一天到晚就知道玩手机，天冷了多穿点衣服，少吃点外卖，妈给你做。整篇推文读起来十分温馨， 而且表现形式也十分生动，很容易让读者产生共鸣。那接下来我们就聊聊这篇推文的 svg 部分设计思路。我从推文里下载了六张图片素材用做演示，每一张都是一句单独的话，所以你如果也想做类似的推文， 可以先把文案写好，在自己作图。一句话，做一张图，可以是静态图，也可以是动态 gif 图。接下来我们打开幺三五 svg 编辑器，在分类里面找到自动展开， 然后找到多图自动停顿展开这个模板，鼠标左键点击添加一下，接着到网页右边添加图片，一次性把所有图片按照顺序都添加进来。到这一步其实就做好了，如果你还想微调，可以把网页往下拉，右下角的参数，你可以根据需要设置，我这里就不动它了。最后我们看下预览， 好了，今天的分享就到这里，喜欢可以点个赞再走，大家的支持就是我更新的动力，谢谢！

今天给大家分享一篇山东大学公众号的推文创意，这篇推文分享了山大校园春日景色，你第一眼看上去可能会好奇为啥都是黑灰色照片，但是你只需在特定位置轻轻点击一下， 就能实现一键自动换色效果，是不是一下子就让人感受到了满屏生机勃勃的春日气息？不得不说，这个排版创意实在是太赞了，比起平铺直叙的放校园景色照，这种带有互动效果创意 更让人有惊喜感，而且点击换色这个动作本身也能让读者有参与感。接下来我们聊聊这篇推文 svg 部分的制作方法。首先我们拆解一下图片素材的组成， 这篇推文在准备素材的时候，需要分别准备两套图片，一套黑灰色，一套彩色。而且为了方便上传到公众号后台，我们还需要把长图裁剪成若干张切片，此外还需要准备一张透明底的卫衣小元素。接着我们到幺三五 svg 编辑器搜索效果 id， 五二 把它添加一下，然后到网页右边添加图片，先把这朵小花添加进来，然后再把初识背景图添加进来，就是第一套黑灰色图片，接着再添加变化后的背景图，就是第二套彩色图片。最后记得稍微调整一下触发热区，让它覆盖在小红花上面。到这里就做好了，我们看下预览效果，看到这里你学会了吗？ 如果学会了，不妨在自己的公众号里试试，把你在这个春天拍到的照片分享一下，感觉还是很有趣的。好了，今天的分享就到这里，喜欢可以点个赞哦，谢谢！

今天我们学习 colourwork 主题的推文，文章围绕粉、白、红、蓝、绿五种校园代表色展开，通过从顶部到底部的全文渐进式换内容的 svg 交互， 带，读者看遍校园里的春日景致。粉色浪漫，白色静谧，红色热烈，蓝色温柔，绿色有生机。不必急着追赶时间，用脚步丈量道路，用眼睛记录色谱，一起发现校园中更多别样的风景。 复刻教程开始步骤一，素材整理文章包括五组从顶部往底部的全文件净化内容的 svg 组件，每个组件包括一张位于小元素、四张黑白颜色的初使背景图，四张变化后的彩色背景图。 步骤二，添加效果组件复刻该案例我们主要用到了点击全文件净化内容的 svg 组件。步骤三，上传素材先上传位于小元素，再分别上传初使背景图和变化后的背景图。 拖拽红色方框设置触发区域，展开动画时长，这里根据需要设置。所有素材全部上传之后，文章就复刻好了。点击右上角的预览，查看预览效果。如果你也对 svg 排版感兴趣，就一起来试试吧！

人民日报公众号最近发布了一篇特别有创意的年终推文，主题是添一笔，每一张图片上的二零二五只需点击一下添加一笔就会变成二零二六。其实这篇推文用到的 svg 排版原理并不复杂，给我一分钟的时间，让我为你拆解一下 svg 部分。 我从原文中找了四张图做素材，第一张是点击前的图片，注意这是张 gif 动图，第二张是点击后的图静态图，第三张也是动图， 第四张是静态图。接下来我们打开幺三五编辑器，主页左上角找到 svg 编辑，直接搜索组建 id 六、点击换图自定义触发，鼠标左键点击一下选不需要，接着到网页右边添加图片，先添加点击前的图， 接着我们调整一下触发热区，触发热区就是指你让它覆盖在哪里，哪里就变成能点击的按钮区，我们这里让它覆盖在加一笔上面。调整好后，记得把网页最下面的显示按钮关掉。接下来我们再添加点击后的图片，到这里我们就做好一组效果了，我们可以到网页左边再添加一次组建， 再按照同样的顺序添加图片素材和调整初发热区就行了。最后我们看下预览，说句心里话，其实这篇推文难的不是 svg 部分，而是创意。大家日常不要过度痴迷拍板技术，重要的一直都是内容创意。

今天学习读书周的推文，点击页面切换新图片展示步入尾声的春日继续点击启程换图的同时展开新的页面描述了中国不同地域的自然复苏与景象变化。 例如东北平原小麦返青，西北祁连山的冰雪融化，西南梯田的清泉流淌，风南海岸出现的蓝眼泪洗官，乃至世界另一端飘落的初雪，自然万象的铺尘，正是世界这本书正缓缓敞开的写照。文章鼓励读者不要将视野局限于课本，而是要将对山川湖海的向往 转化为对广阔世界的亲身阅读与探索。第一步，素材整理开篇的点击换图包括一张换图前和一张换图后的素材。点击换图展开则是需要多准备一份展开后的素材。步骤二，添加效果组建复刻该案例主要用到了点击换图及换图展开的交互组建。步骤三，上传素材 点击换图需要先上传点击前的素材，再上传变化后的素材。拖拽红色方框进行触发区域位置的摆放， 关闭热区引导点击换图展开的操作差不多，先上传点击前的素材，再上传变化后的素材。设置触发区域，点击编辑展开内容进入次编辑器。在这里先用无缝图的组建添加过渡段的页面， 再次添加点击换图的组建。分别上传素材，后面就都是重复操作了，这里不再赊，所有素材全部上传完成，文章的复刻就完成了。点击右上角的预览，可以在发布前检查文章，如果你也对 svg 排版感兴趣，就一起来试试吧！

我头一次见保姆式的 ai 公众号编辑器，一分钟搞定公众号推文排版，自动写文，自动排版做推文最难的不是显示排版，你肯定会遇到这些问题，配图字体怕侵权，传统编辑器不好用，调段落艰巨，难用的一匹，我把审视，但是颜色和样式都很重要，你 svg 也不会 那么。欢迎收看 ai 拯救运营小白饭馆不知道第几期系列，我已经给大家出了十几期如何让 ai 给你打工提升效率，快乐摸鱼的视频，今天咱们来分享如何用 ai 秒速推文。今天咱们用这个小魔音编辑器，不前知名的做编辑器的就那么几个， 这是其中一个左边功能栏的 ai 功能，你要是已经有写好的内容，直接把文档拖进这个 ai， 快 派它就排好了，它会自动识别你的内容，排好文字布局，最重要的一点是，它不会改变你原有的内容。觉得标题不够好，也可以点这一个 ai 起标题，让它帮你修改润色。它 用的是 getty r e 还有 v 三的模型，所以你甚至不需要单独开一个页面，让 ds 来帮你写推文，直接在小墨英的 ai 文章里就可以。用我这个提示词就可以得到还不错的推文内容。 眼霜模型的话就是同时出两天，你可以从里面挑更好的来用。我觉得这个编辑器有个特点，就是太直接了，现在很简洁，没用过的小白一看就知道怎么上手，而且他甚至出了很详细的教程，生怕你不会用。我头一次见保姆式的 ai 公众号编辑器，包括说三用贴纸，用什么字体，有没有授权，他都给你标注的很清楚， 省掉了很多排版，还有后续可能会扯皮的一些不必要的麻烦。有很多使用小工具，有空的话也可以去试看看，之前没接触过推文排版的也可以很快上手，整体用下来简单使用几次吧，你就用去吧，稍微提升不止一点点。记得关注波姐，解锁更多 ai 使用小技巧。

今天分享汕头大学行川书院的儿童节推文，他用多次随机抽签的 svg 交互带我们回到了十年前的儿童节。从挑一包馋了很久的零食，到饭后和小伙伴疯跑的游戏时光， 再到看动画片的夜晚，每一帧都是回不去的曾经，也是忘不掉的自己。复刻教程开始 步骤一，素材整理论文的 svg 交互，包括一张封面图和很多张的千文。步骤二，添加效果，组建复刻该案例我们用到了抽签的 svg 组建。步骤三，上传素材，先添加准备好的封面图，再把剩余的千文全部上传， 默认全图为出发区域，动画时长默认零点五秒。点击右上角的预览，可提前检查文章内容。如果你也对 svg 排版感兴趣，就一起来试试吧！