不教了！直接送你们「一键关注」代码和 .psd 可以了吧？
除了干货，其他什么也没有
职场｜数据｜媒体｜设计｜极客
如上这个模块，有很多读者曾经询问过。于是本周二（1月9日）写了巨长的教程，结果后台留言都是一脸懵逼，小编活活给气死。
得、得、得，代码打包封装好送你们，.psd 送你们，你们自己下载复制黏贴好了吧？现在你可以在 Chrome 排版插件「壹伴」直接载入，修改文字和图片（二维码卡片的 .psd 请向本公众平台回复“肉卷”两字获取）。扫描以下二维码可以领取到 JZ 样式合集（黑暗系&光明系），其中包括了这个一键关注模块：
点击后会被自动布局并以正确效果载入
使用意义
在整个新媒体圈，大约有 10 个左右的“特权”订阅号拥有如上模块。它们大多是因为长期在行业内深耕对微信公众平台发展有过突出贡献，或通过某些特殊渠道获取了微信支付功能，因而这个模块在被点击后，可以前往静态的历史消息页。
普通订阅号并不具备这样的特权，但是在文章的开头1）不适合贴一个巨大的二维码 2）再转跳一次图文式关注页面体验不佳，所以如本文的小卡片成为了部分公众号的既美观又有趣的新思路。
更多高级微信排版技术，也欢迎报名我们的线下培训▼
所涉及的关键技术
CSS 布局
SVG 动画或制作 GIF
PhotoShop 制作二维码卡片
本期文章我们选择用小白最熟悉的秀米编辑器来布局，而不是直接用代码堆。其实秀米的布局功能一直非常好用，如果你不太介意在代码层面露出编辑器信息，那么秀米可以解决大多数特殊布局问题。
而关注按钮的设计有两种思路，低阶为 GIF 制作（AE 制作最快），高阶为 SVG 直接进行颜色过渡动画，JZ 这篇文章用的是 SVG。其绿色（#09BB07）是微信官方绿，拾取自 GitHub 上微信团队上传的 Sketch UI 切片用源稿。又如下方的这个按钮也是同样色彩▼
另外需要你制作一张自己的二维码小卡片，理论上 AI 更快，不过为了照顾小白我们还是用 PS 演示，样式参考自「创意铺子」微信公众平台。
布局
首先在空白页面增加一个独立空白模块，随后选中上图红框内的布局比例。这样一来我们就得到了一个三分布局。
但是最外面的 CSS 盒模型（点击蓝色字了解定义）目前是透明的，你需要通过秀米编辑器增加必要的阴影，数值参考如下。而且别忘了由于阴影的存在，宽度你需要压缩到例如 95%▼
LOGO 的大小其实是相对任意的，JZ 的 LOGO 上下对齐了文字，所以各方向的 Margin 值都设置成了 20。但如果你希望 LOGO 大一点，可以对应减小边距▼
文字部分的宽度百分比可以提高，至于写什么文案那就是各位运营人自己的事儿了▼
第三个部分如果你已经做好了 GIF 动画式的关注按钮，那么可以直接上传。如果你想试试难度更高的 SVG，则先留空白。这里提醒一下，三个模块请纵向居中对齐▼
按钮设计
GIF 制作我们就不赘述了，你可以向本公众平台回复“GIF”看一些相关教程。如果你用 SVG 制作，那么毫无疑问先要在 AI 里制作一个如上的按钮。接下去，我们将其另存为 SVG 格式，在保存模版中点击显示 SVG 代码，并对未封闭的代码进行标准封闭，粘贴到支持 HTML5 书写的编辑器里（如 135、iPaiban 等）查看效果。本文的关注按钮代码如下▼
<svg height="25" width="60">
<path d="M44.4,23.4H4.6c-1.9,0-3.5-1.6-3.5-3.5V4c0-1.9,1.6-3.5,3.5-3.5h39.8c1.9,0,3.5,1.6,3.5,3.5V20
C47.8,21.9,46.3,23.4,44.4,23.4z" style="fill:#09BB07">
</path>
<text x="10px" y="16px" font-size="12px" fill="#FFFFFF">
关 注 </text></svg>如果你希望这个按钮闪烁起来，方法有很多种。比如你可以利用<opacity>引发透明度动画，当然也可以利用<fill>引发渐变动画。这里以渐变为例，对圆角矩形路径增加 SVG AttributeName▼
<animate attributename="fill" values="#09BB07;#FFFFFF;#09BB07;" repeatcount="indefinite" dur="1s"></animate>现在，把准备好的 SVG 代码插入到第三个模块预留的字段里，并且适当调整这个模块的上缘 Margin 值，确保按钮和其他两个模块在纵向居中。
更多 SVG 高级微信动画学习，也欢迎报名我们的线下培训▼
二维码卡片制作与隐藏
对于小白来说，这张卡片可以从一个黑色背景图层开始，纯粹通过形状叠放实现切口效果。这里的卡片我们以「创意铺子」微信公众平台的样式为效果参照案例▼
顶上的图片效果对于熟悉蒙版的 PS 用户来说其实也很简单，这里 JZ 选择将矩形卡片的副本进行图层蒙版后，用 JZ 办公室的吉祥物“肉卷”照片对整个蒙版再做剪切蒙版。这样一来，一张顶部有圆角底部为直角和卡片融合在一起的图就做好了▼
该卡片的 .psd 文件已上传到 JZ 的小密圈（知识星球），已加入内测的小伙伴可以去知识星球下载。当然不得不说，用 AI 通过布尔运算可以更快制作▼
那么，这张卡片为什么当且仅当关注按钮被点击时才会展示出来呢？其实稍做思考即可恍然大悟——该卡片的图像透明度被调整为 0，并通过 Margin 值移动并覆盖掉了按钮区域，所以才实现了这样的效果。我们制作的这个关注模块中，卡片被缩放到 30% 并右侧对齐，顶部 -87px 边距，右侧 7% 边距。如果我们保持卡片可见，情况就是这样的▼
除了干货，其他什么也没有
职场｜数据｜媒体｜设计｜极客
是不是很简单？
自己动手试一试吧！
更多微信高级排版、动画等基于代码的先锋技术学习，不妨报名我们 2 月在北京举办的第六期训练营，仅录取 30 位报名者进行精英化培训，确保每个人都一篇金光闪闪的图文带回家▼
培训时间
2月24日、25日全天
（另含23日晚一次线上基础拉平课）
培训地点
北京 · 四环以内
（报名审核通过后告知具体地址）
培训基本内容
新媒体视觉识别系统
字体、配色、制图、版式
创意排版设计思维
动画代码技术实操
行业经典排版案例复盘
（包含苏宁、京东、滴滴等案例代码复盘）
报名费用（含发票）
￥1499
（已购《2018新媒体热点日历》用户立减 ￥300）
课程咨询
021-37218818
-END-
本文已纳入 JZ 多媒体解决方案新发售图书版权，禁止任何形式转载或洗稿，禁止任何第三方编辑器在非授权情况下转存为样式模版。也欢迎另外三篇有趣的“教你”系列▼
第一期 教你改变微信图文字体！
第二期 教你改变微信图文背景！
第三期 教你制作3D裸眼封面图！
每篇“教你”系列发布后都引领了新媒体圈的新时尚，一定要读喔！更多特效类代码演示也可以阅读学习▼
第一期 渐变 · 纯代码图文特效(1)
第二期 地震 · 纯代码图文特效(2)
第四期 二十二 · 纯代码图文特效(4)
合作咨询：021 37218818
其他你会感兴趣的内容
回复 排版阅读互联网文案排版教程
回复 标题了解优质标题的酝酿方法
回复 配图学习图片素材的搭配方法
回复 H 5开启移动营销技术学习课
回复 广告看更多行业广告知识大全
H5、平面、视频等数字营销服务请致电
TEL：（021）3721 8818
客户案例：APEC 峰会 | 中国航天科技集团 | 香奈儿 | 肯德基（湖南） | 中国国际航空 | 湖北省电视台 | 河南卫视 | 浙江省人民广播电台 | 三生制药 | 交通银行 | 建设银行 | 真格基金 | 南方周末 | 上海闵行教育学院 | 牛津大学出版社 | 新东方集团 | 伟巴斯特 | 雪佛兰汽车 | 观致汽车 | 雷诺汽车 | TNS 新华信 | 高力国际｜第一太平戴维斯｜德国莱茵｜盖茨基金会｜追星集团
抱歉，除了干货，其他什么也没有。