Banner设计-为马来西亚中文团队进行文章足板设计

加入steemit也快有两年了，感觉时间过得真快。steemit，一个基于区块链技术的国际化社交平台。说steemit国际化，是因为在steemit有来自世界各地的用户，他们有着自己的文化，自己的信仰，热情与社交交汇于此。

随着steemit的发展，在steemit也出现了不少的团队，其中就有这么一个充满活力，乐于助人，胸怀大志的团队【马来西亚中文团队 | @cn-malaysia】，@cn-malaysia是一群核心人物为壮大马来西亚博客而开始的一系列点赞活动，以此来发掘新人，帮助新人，促进新人以及马来西亚博客和steemit的发展。

在steemit，每天都有很多的新文章产出，其中一些不乏高质量，但是这类文章往往会被错过阅读，导致这类文章以及博主曝光率低，从而限制了其发展。@cn-malaysia建立之后，专门选择性的将过去48小时以内觉得值得阅读，但是又被错过的好文章在@cn-malaysia向大家介绍，从而增加新人或者高质量的文章多一次的曝光率。

@malaysia为了更好地发展，帮助更多的新人，为此进行了一系列的改变，其中对于文章足板也进行了改变。这里的文章足板在设计领域称为【Banner】，中文意思为“横幅”，我也很幸运的担任了文章【Banner】的设计，这对提升我的设计能力也有很大的帮助。接下来我会为大家带来文章【Banner】的设计过程，以及设计理念。

由于Banner与steemit文章要有一个协调性的排版，所以这里期初把Banner尺寸定位圆角矩形，设计软件为【Ai】。在定好Banner的尺寸之后就开始起步设计了；这次的设计用语为【社交、前沿、国际化、友好、简约、大方】，那么怎么才能很好的体现以上几点呢？

初设定

第一，简单的圆角矩形肯定是不行的。因为这样的圆角矩形看上去显得太死板，没有艺术感，所以这里就需要进行相应的变形；第二，为了凸显【前沿，国际化】两个点，在对圆角矩形进行相应的变形时需要体现一种现实场景中的平面立体感，所以这里的变形相对而言比较大。

最终形状

好啦，接下就是要进一步的体现【前沿，国际化】以及【简约】。这里先设定的颜色是纯色【蓝色】，后来发现太单调，不够吸引力，Pass掉；接下来尝试着使用蓝色渐变颜色，渐变色看上去稍微好一些了，但是总觉得很容易让人产生视觉疲劳，所以这个也Pass掉。正在没有头绪的时候，这个时候想到了玻璃，其实可以把变形后的圆角矩形【底板】弄成玻璃质感的，这个好，配色也容易，而且看上去具有一定的【前沿、国际化、简约】之感，而且还体现了一种“对品质的追求”。

以上是一块玻璃，当碰到有色背景的时候，玻璃质感就会体现出来了，当然现在也是有的。有人肯定好奇这个是怎么做，其实这个真的不怎么难得，接下来让我们看一下玻璃质感的制作过程吧：

• 我们需要将圆角矩形进行填充，填充色为黑色，然后关闭描边；
  
• 接着将填充好的底板的不透明度设置为16%
  
• 然后选中底板，填充渐变色，填充方法如下：
  
  (填充后有木有发现已经开始有玻璃的感觉了，为了更凸显这种效果，我们继续)
• 选中底板，点击菜单栏中的效果，找到风格化，找到投影和外发光，增加投影以及外发光效果，进一步加深玻璃质感。投影和外发光的参数如下：

投影

外发光

为了进一步体现玻璃质感，我们可以通过选中底板，按住快捷键Alt进行拖拽复制一切，然后关闭填充色,点击右边属性框内的外观，关闭投影、外发光效果：

a

b

打开描边，描边色为渐变色【灰度-黑】，不透明度为16%，然后点击右边属性框里的不透明，点进去，选择不透明度效果为颜色减淡；设置好后把复制的效果框拖到原来的底板位置上。这个时候你会发现底板的玻璃质感更明显了。

a

b

为了体现【社交、友好】，这里以steemit的Logo为原型，代表着社交和友好，后期@malaysia通过steemit Logo和马来西亚国旗结合形成了@malaysia的Logo。这里如果直接把Logo放到底板上你会发现非常的不协调，那么这个时候我们可以在Logo周围添加圆或者其他多边形来增加其饱满度。所以这里就要设计一个具有立体感的圆来把Logo框起来。

造作方法很简单，用矩形工具画一个正圆，不好画正圆，按住快捷键Shift。然后步骤和底板的步骤是一样的，这里我就不操作了，我直接上效果图了。

之后把@malaysia的Logo用选择工具选中放到圆的中间，因为Ai是一款非常智能的设计软件，所以你在放的时候会有位置线出现，让你刚好能够放到圆的中间。

做好之后，把整个图形放到底板的中间偏上的位置，这样会让圆看起来更立体，就好比一块竖起来的硬币一般。其次为整个Banner添加相应的文字，因为我这里需要添加的文字是【cn-malaysia、马来西亚中文博客俱乐部审查员兼编辑】,所以我在相应的位置添加了文字。

最后一步为上图添加一个深蓝色的背景，大小和形状要与底板一致；这里也可以进行复制底板，然后关闭相应的效果，然后填充颜色。搞定之后，为了凸显地板的玻璃质感，需要把蓝色背景相应的位置，如下图。

在字体颜色方面，根据steemit的特性来进行配色。在steemit，分为【白天&夜间】两种模式，所以【白天模式】下，字体设定为“灰蓝色”，【夜间模式】下字体则为显眼的黄色，这样方便使用。由于某位@cn-malaysia成员的特别要求，专门设计了红色字体。

灰蓝色

黄色

红色

设计理念：

本Banner设计采用了玻璃质感以体现@cn-malaysia对【社交、友好，发展】的追求，整个Banner表现出前沿，国际化，简约大气，品质，友好的概念。造型结构带给受众者积极向上，健康活力的视觉感受，整体上简洁美观时尚。

支持@malaysia，让@malaysia带动更多新人的发展，为steemit的发展增添前进的动力，你我一起加油！！

@abcallen

---

Posted from my blog with SteemPress : https://abcallen.000webhostapp.com/2019/04/banner%e8%ae%be%e8%ae%a1-%e4%b8%ba%e9%a9%ac%e6%9d%a5%e8%a5%bf%e4%ba%9a%e4%b8%ad%e6%96%87%e5%9b%a2%e9%98%9f%e8%bf%9b%e8%a1%8c%e6%96%87%e7%ab%a0%e8%b6%b3%e6%9d%bf%e8%ae%be%e8%ae%a1

---