如何给文章设计精美封面

全篇共 2138 字。按500字/分钟阅读,预计用时 4.3 分钟。页面总浏览量 21 次,今日浏览量 3 次。

从我在自己博客网站写下第一篇文章时起,我就有为每篇文章构思、设计和制作一张精美的封面图的习惯。到现在也有一百二十余张我设计的封面资源。本篇将记录我是如何制作封面的以及介绍一百二十余张封面风格的变化情况。从这篇介绍封面的文章发布之后,我就不再为每篇文章都设计封面了。

格式变化

陈帅华的博客中GIF格式的封面图

首先是使用GIF格式动图封面,有的是使用Adobe Animate CC制作并导出,有的是使用GIF录屏工具。

为了将文章内容生动的提炼到文章列表页,第一代封面采用GIF格式的动图。但是如果文章列表页充斥GIF动图,显然会干扰读者的注意力,因此立即不再使用GIF格式的动图而改用JPEG格式的图片。

JPEG格式图片和PNG格式图片相比,JPEG格式属于有损压缩,PNG格式属于无损压缩。PNG格式图片显然就比JPEG格式图片占用更多的存储空间,在网络传输中JPEG更有优势。有时为了追求封面高保真,我偶尔会导出PNG格式的封面图片。在导出JPEG格式图片时,我会权衡图片的清晰度与图片大小。

在导出封面图的设置面板中,通过控制图像品质以及图像显示模式,可以在图像清晰度与图像大小之间寻找相对完美的平衡点。

风格变化

我博客文章的封面风格经历了以下五个阶段:

阶段一:随心随性随缘

这一阶段的封面,大都是从文章中选取一张图片作为封面图的。这一阶段的封面随机性强,难以保证封面风格的统一。加上我最开始写文章时并没有想到要保持封面和整个博客网站UI风格一致的意识。所以文章列表呈现的封面的效果也是纷繁复杂。而且因为风格的不统一,制作起来也没有现成的可以套用的模式,反而构思、设计和制作的时间更长。属于即费力又瞧不出好效果的憋屈型设计风格。

阶段二:照片做背景

分析了第一个阶段采用的封面风格所存在问题。第二阶段,保证了封面组成要素的统一性。封面元素分三层,一张摄影所得照片,一层不透明度较低的黑色遮罩,最上一层放置艺术字。起初,我设想照片内容某一种意象要与文章内容有关联,这也是阶段二风格的亮点之处。这要求照片必须是我自己拍摄的并且带有目的性的,这增加了我构思、设计和制作封面的成本。并且,一张包含意象的照片遇不到有鉴赏能力的读者是作品的悲哀。

阶段三:高饱和色渐变与基本形状

于是在阶段三里,我希望封面组成元素都能仅在设计软件中就能被创造出来,而无需额外的摄影。受2017年前后我在Behance和Dribbble感受到的高辨识度的渐变风格的影响,于是阶段三就采用这一风格,简单的基本图形(圆形与矩形)对角线分布悬浮在渐变背景上方。同时中央部分空出位置用于放置艺术字。你会发现,有些封面中的基本图形甚至会向封面中央靠拢,与艺术字产生视觉上的交互,别具一格。

阶段四:高饱和色渐变扭曲

阶段三的封面风格我是很满意的。但我自己也会审美疲劳——不好的我会丢弃,好的我想让他更好。于是就有了阶段四的封面风格。同样受其他设计师的作品的启发。我光是用眼睛就能感受到手摸在天然蚕丝织就的布料的丝滑触感。也能感受到自己仿佛浸泡在被灌满牛奶的浴缸里,再倒入可食用的对皮肤有益的各种颜色的乳液。封面使用Adobe Illustrator CC设计。但因为封面太美好而抢占了文章内容本身的风头,被我PASS掉了。

阶段五:高饱和渐变与自由涂鸦

因为世界上不会存在完美的东西。你们希望的只是一个个有明显残缺的东西在相遇之后变得接近完美,而不想要那个已经接近完美的东西。于是阶段五回退到阶段四,并在阶段四的基础上简化了封面元素。阶段五保留了渐变背景,丢掉了阶段四中悬浮在渐变背景上的基本元素。而最顶层的文字不再采用具有设计感的艺术字,而是规规矩矩的细字体,太刻板的就是要和太活泼的在一起才有生气。于是我在文字的旁边随手点缀几笔,因此事情就成了。

如何做封面

以阶段五的封面风格为例。我的封面图片采用320*200像素的大小。至少需要三个图层,最底下的图层用来拉渐变,中间的放置性冷淡风格的细黑字体,在上面就是随心随性随缘的点缀几笔,往往这几笔让整个封面活泼了起来。

从上方阶段五的示例封面中可以发现,渐变是从左上角拉向右下角的。并且左上角从色相上看要比右下角的色相更明亮。仿佛是阳光刚刚从头顶右上方掠过,现在来到了左上方,像极了夏日傍晚的火烧云。越是即将逝去越是会加倍珍惜,也知道他经过一夜的休整终究还会从东边冉冉升起来的。

不要封面了

我想只保留必要的封面,去掉华而不实的东西,回归文章内容本身。

发布日期 » 2019年7月30日 周二
原创声明 » 请勿复制转载,谢谢配合。
Airglass.js核心库
JavaScript核心概念
硬件编程、Arduino
文档翻译计划
微信开发
前端脚手架
运维
可视化
生活自有“道”理
视觉设计、用户体验
陈帅华的微信二维码