本文带来一篇公众号二维码美化与内部图片美化的实用教程。不是广告贴，里面的工具是我在使用的时候收集到的，感觉好就推荐了。本文重在极简、实用、可操作性强。
二维码的美化
除了工具推荐之外，后续用我的二维码美化过程来进行一次实例演示。
工具
- 公众号二维码图片（通常是从微信公众号后台导出的，大小不定，最好是大一点的，选最大号即可）。
- 公众号logo图片（最好是正方形的）。
- 二维码美化工具（这里推荐草料二维码美化器，在线版、免费、功能强大）。
简单美化
- 去「草料二维码美化器」官方网站，链接在这里（https://cli.im/），选择『微信』栏目。如下图所示：
操作完毕之后可以得到一张原始的二维码图。 - 点击上图最后的『开始美化』，在这个页面已经可以进行多种样式的选择了，可以看到上面有三个项目：『选择预设』、『图标与文字』、『局部微调』，如下图所示。
- 『选择预设』：为二维码选择一个大体的框架图，这个形状影响了整体的布局观感。
- 『图标与文字』：图标一般是选择『本地上传』，因为里面的很少有能直接满足要求的，大多数时候是需要我们亲自定制的。文字则是对公众号进行简单的介绍。
- 『局部微调』：我觉得这个里面比较重要的是『码眼样式』、『内/外框颜色』，其余保持背景透明，容错率最大即可。
- 下面一个动图演示了上述三个项的基本作用：
简要编辑 下图得到一个测试的简单效果，里面眼花缭乱的箭头以及其杀马特的造型先忽略不计，只是为了说明下效果（手动捂脸）。
简单效果 上面的二维码是扫描不了的，因为它的『码眼内框』（二维码要素之一）是浅黄色的，无法识别（并不是因为眼花缭乱的箭头），要想识别出来就得保证它的颜色是深色才行，为了验证这一点也可以截图然后手动涂黑它就能得到一个可以扫描的二维码了。
高级美化
上面的美化效果纵然有，但是总归有很多的不便，比如『文字内容』无法拖动细调，logo无法放大缩小，字体样式少等等等等，这个时候就需要『切换至高级美化器』来完成细节自定义了，上面最近的一张gif图最后就点击了『切换至高级美化器』，它的布局如下：
1. 先说基本的选项，这里选择『前景色』为黑；『渐变方式』无，『前景图』倒是可以选一下，类似的效果如下所示（注意，如果颜色较浅，比如我这张，就无法完成扫描识别，需要颜色深一点的前景图）：
『背景色』选择白色、透明；『背景图』类似前景图，这里我就不选了；『旋转角度』为0°，一般用不上如果是过年那种「福到」类型的倒是可以选择旋转45°，然后在里面嵌入一个「福」字；『二维码容错』选择高，不然可能有被logo盖住一致不能扫描的尴尬；『外边距』测试选择10个像素比较好看；一个个人觉得比较惊喜的效果是『液态/圆点』，我这里取了值为7的液态，极端效果图如下：
2. 「模板」我没有用，可以随自己的喜好去指定。「嵌入」里面选择上传本地的logo图片（注意最好是方形的）；『LOGO效果』我选择圆角的，觉得这个最好看了；『添加文字』这个有点小bug，有时候按正常是没法输入的，需要按着鼠标左键将焦点聚在文字框内（不要松手），然后输入文字，文字是可以拖动的，一般是要拖动寻找一个合适的位置；『文字效果』个人测试内融合与外融合是最好看的，与二维码浑然一体，其中外融合更加显得一体化，但是我选择内融合；『字体/字号』分别是微软雅黑和16号；『字体颜色』与二维码颜色一致；
3. 「码眼」。『码眼外框』选择比二维码内部颜色低三个等级的黑色；『码眼内框』选择蓝色（颜色这部分各取所需）；『码眼样式』选择圆滑；
4. 测试手机是否能够成功扫描二维码，如果可以的话就选择200像素、100像素、300像素保存。最终的效果图如下所示：
图片的简单美化
默认情况下，图片都是平铺嵌入到文章当中的，没有一点儿图片的「嵌入感」，为图片的周围加上一点儿阴影会使得其具有实体相框的那种嵌入感。我一般是用 MarkdownHere 来做格式转换的，其中图片的 css 属性是「img」，我的 MarkdownHere 里面这部分的设置是：
img
{
display: block;
margin:0 auto; /*图片水平居中*/
/* margin:0 0; */ /*图片水平居左，如需要请打开*/
max-width:100%;
-moz-box-shadow:0px 0px 8px #616161; -webkit-box-shadow:0px 0px 8px #616161; box-shadow:0px 0px 8px #616161;
}
图片的效果如下所示：
如果嫌文字间距有点儿太小了，这里也可以修改文字间距来达成舒服的效果：
p {
/* !important is needed here because Hotmail/Outlook.com uses !important to
kill the margin in <p>. We need this to win. */
margin: 0 0 1.2em 0 !important;
letter-spacing:1px; /* 修改字间距为1个像素*/
}
本文来源于：微信公众号排版极简实用教程-二维码美化-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。
- 赞助本站
- 微信扫一扫
-
- 加入Q群
- QQ扫一扫
-
评论