计育韬:公众号图像素材高清晰度应用指南

上海/平面设计师/157天前/12浏览
计育韬:公众号图像素材高清晰度应用指南
基本参数选择
上一期我在《
新媒体(公众号)端GIF动态图压缩对抗与优化的核心方法
》中,已经提及了腾讯对微信公众号生态内图床图片压缩的举措,毫无疑问静态图也存在对应的压缩机制。而关于当下最主流的图像「无损」上传并展示的策略,千言万语归纳为一个核心原则:
计育韬:公众号图像素材高清晰度应用指南
Collect
这一参数的选择,是基于网友 Denis 安的实验《
公众号图片模糊?「无损」上传秘诀在此。
》,其中详细介绍了直接上传 / 通过 135 编辑器 / 通过 E2 编辑器上传的实验结果,从一定程度上总结了公众号图床黑箱压缩的机制:
计育韬:公众号图像素材高清晰度应用指南
Collect
而在 1080 条件下,
导出各种格式。JPG 格式“得图率”显著改善,
而 PNG 格式的表现更是震惊到我,几乎无损。
计育韬:公众号图像素材高清晰度应用指南
Collect
具体条件下的图片设计思路
当然,1080 宽 PNG-24 是图片在公众号内高清应用的一个相对普适参数,并不代表说 750 或 640 宽的图一定不清楚——当设计师能力足够优异时,更小的尺寸同样可以胜任(例如喜茶公众号的图片宽度往往不大,但清晰感十足)。而这也就意味着,有些更进一步的细节参数需要设计师合理控制,由此更好提升图像的公众号端显示品质。毕竟所谓「清晰度」本身是一个主观概念,它和「分辨率」这类参数是完全不同的。
不要使用 sRGB 色值
sRGB 是由惠普和微软共同开发的色域制式,而我们在大多数制图软件中,更多可以选择 Adobe RGB(色域范围更广)进行图片输出。尤其是公众号长图往往一切片一图流形式设计,切片采用 Web 形式导出时,PS / AI 容易默认勾选转换为 sRGB 格式,所以需要取消该复选框。由此你的图像色彩会更接近设计图稿色彩,自然在感官上会让你觉得「更清晰」了。否则一些颜色本身就过于相近的内容像素,就容易产生色彩不准确而带来的模糊感。
计育韬:公众号图像素材高清晰度应用指南
Collect
不仅要切图更要结合画板功能
注意到有的新手设计师,无论是 PS / AI 都习惯于在一个画板从上做到下,这相比使用 Figma 和 Sketch 的设计师就有了天然劣势——因为 PS / AI 对超长尺寸切图会强制缩放,可能导致切片自身就无法按照你预想的宽度进行输出。所以平面设计师要有前端设计师的意识,通过画板的合理分配,再结合切片来生产物料。
不要使用无法质因数合理分解的宽度
这一点在《
JZCreative:计育韬:新媒体图像设计参数质因数分解与屏幕物理像素的适配意义
》中我已经做了详细的技术讲解,于此不再赘述。
设计分层
有时候你会发现,很多画面中如果
带有浅色的文案或其他占用像素宽度很少的纹理
,在被公众号平台压缩后会显得异常模糊。这个时候其实我们完全可以通过「文案+背景」的分离形态导出设计文件,并通过正确的排版思路进行叠加。叠加的方法就很多了,这里借用 @E2平台 的一组教程:
计育韬:公众号图像素材高清晰度应用指南
Collect
计育韬:公众号图像素材高清晰度应用指南
Collect
计育韬:公众号图像素材高清晰度应用指南
Collect
计育韬:公众号图像素材高清晰度应用指南
Collect
计育韬:公众号图像素材高清晰度应用指南
Collect
锐化处理
如果上述方法还是不能实现较好的清晰度呈现?那么这时候也可以采用逆向思维,享着压缩(画质降低)的反方向进行画质增强。首先使用
「滤镜」-「锐化」-「锐化」
进行第一步增强:
计育韬:公众号图像素材高清晰度应用指南
Collect
随后复制当前图层,再使用「滤镜」-「其他」-「高保真反差」,数值设置 1-5 px,这一步主要是为了进一步突出色彩边界:
计育韬:公众号图像素材高清晰度应用指南
Collect
最后将这个图层的混合模式设置为「叠加」即可。这种逆向画质增强操作,尤其时候封面图被压缩的情况。 
具体条件下的图片设计思路
不同行业的图像设计方法各不相同,对图像品质的感官要求亦是天差地别,我所提到的所有知识点也是经验的总结和积累,所以也一样建议你多总结自己实操过程中的感悟。
只要形成了标准化的操作习惯,对像我们这一类行业资深玩家来说,图像模糊是完全不会存在的问题。也衷心希望你通过本文能了解到全新的新媒体图像处理知识,预祝你在此后的运营工作中一切顺利!
-END-
0
阅读原文
|
Report
|
收藏
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
小猫咪插画合集
Homepage recommendation
相关收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
精选收藏夹
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
IP形象——动物类
IP形象——动物类
IP形象——动物类
IP形象——动物类
精选收藏夹
作品收藏夹
文创
文创
文创
文创
精选收藏夹
作品收藏夹
一些小动物
一些小动物
一些小动物
一些小动物
精选收藏夹
作品收藏夹
大家都在看
Log in