从网易云音乐中总结banner设计(上)

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

作为网易云的老粉,花瓣分组也专门给网易云留了个位置,网易云音乐基本每天都更新banner,素材文案会根据每天的节日或是近期发生的事件,甚至是刚上映的电影都可以拿来重新设计,色调非常接地气,常常打开APP一瞬间就控制不住寄几截图保存,以下是小小一部分。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

有时候觉得文案也特别有意思,像是设计师自己想出来的东西。一直存图挺长时间了,不管是设计或是文案都值得好好学习。今天悄悄的总结一下个人想法,想法比较零碎,以目前的设计水平就先总结以下内容,之后会通过不断的学习对以下总结进行修改和添加。总体大致分为以下四点。

1、构图

横版的banner元素+字体,基本上有五种方式,左构图,右构图,上下构图,居中构图,不规则构图。常用的两种构图方式就是左右构图。

1.1、左构图

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

说白了就是下面这样。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

这样传统的排版方式里面的不同之处,无非是字体和图片的处理,还有重点是色调的把握。

每种字体的变化和元素的变化再加上素材的丰富,一个简单的构图能设计出无数种可能。

1.2、右构图

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

构图方式大眼看上去其实用的最多的构图方式。因为这两种方式在横版banner中来表现最自然最合适,不管是文字还是素材都合理的放在自己应有的位置,怎么摆放都不会出错,画面不会显得乱或者空。

1.3上下构图

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

横版banner的上下构图很容易出错,一般的素材选定也要是横向,图片处理可以尝试放在文字之前,隐隐约约的挡着一部分文字,参考杂志封面的赶脚。也可以这样

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

1.4居中构图

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

文字为主体的排版也分为两种情况,一种是素材围绕字体或者是在字体两侧去排版,第二种是除了字体之外,干脆就把素材当背景,这里的背景可以是一张加了黑色遮罩的图片,一个个重复的小元素,或者是一个颜色鲜艳的插画;

1.5主体构图

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

素材为主体的时候,素材多为人物,文字排在素材的两侧,再加上合适风格的背景,和元素,就很完整了。BTW一张拍摄的极好的图片就可以用这种构图方式,简单的在主体物两侧放一些文字(萍方细体)就很好了,再多的装饰都会显得多余。

1.6不规则构图

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

不管是多不规则的构图其实里面也能找到一定的规律,除非文案要求很多或者素材很碎的情况下,个人不太建议去尝试这种构图风格。容易一不小心就显得画面很乱没有重点。

2、字体

2.1突出字体

首先需要先提一下突出字体的两种方式,突出字体或者暗化背景。

字体的突出简单的可以直接通过字体的颜色或者大小来控制,其次可以通过形状的利用(矩形圆形多用)来突出(当背景图很乱或者背景图和字体颜色相似时),如下图。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

2.2字体的选择

字体的使用要根据banner的整体风格,需要传达出怎样的信息而定。衬线体多符合文艺、高品质感等气质,无衬线体就比较多的用于各种风格中。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

以下是近期常用的一些字体。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

用多了别的有的没的字体,反而近期会觉得微软雅黑加粗也有一种特别的美,像这样。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

2.3字体的表现方式

字体可以根据层级关系大大小小、一大一小的排列,会更有视觉冲击力。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

也可以找一张类似风格的图片剪贴蒙版剪进去,这里可以用有纹理的图片,金色银色等等各种有质感的图片。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

也可以尝试叠层的方式,整体或者单个字体的层叠,做出层次感效果。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

放一张昨天几分钟做的图,然后被领导吐槽字怎么叠在一起了…

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

还可以尝试根据整体banner的风格,去改变字体的形状。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

在字体上稍微加长一点点,缩短一点点,或者加一点小元素就可能会立马变得不一样,这是美术学中的减法和加法,以前画画的时候也经常听老师说,绘画就是减法,现在觉得的确是。

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

2.4字体的排版

左对齐,右对齐,居中对齐

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》
《从网易云音乐中总结banner设计(上)》

    原文作者:阿党
    原文地址: https://zhuanlan.zhihu.com/p/26514892
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞