「孟菲斯风格」设计的三种干货教学

Sponsor

关于「孟菲斯风格」有不少人问我这是什么风格？它有什么特点？应该这么学习它？

今天和大家科普一下，并通过三种「孟菲斯风格」设计的干货教学，让你熟悉并掌握运用到BANNER、海报设计以及UI等各个领域。

1、孟菲斯风格的起源

实际上，我们目前所看到的孟菲斯风格是非常新潮的，激烈的色彩碰撞，几何结构的点线面的随机拼贴，有非常浓郁的视觉冲击。

但这种风格的形成需要追溯到1981年的设计运动。像许多创造性运动一样，孟菲斯是对现状的反应。20世纪50年代/ 60年代中期的现代和20世纪70年代的极简主义是关于结构和直线。装饰艺术的几何图形，波普艺术的色调和20世纪50年代的媚俗灵感启发了他们不同寻常的美学。（这样的色彩和趣味性装饰感，稍微改改就是一个一个儿童房啊…一个匿名慈父的联想）

2、孟菲斯风格的设计趋势

这种风格上的美学突然在相关设计领域复苏，突然间就铺天盖地，比如陌陌以前的洗脑式广告，孟菲斯风格与文字简单的一个配合，信息传达非常之醒目。

陌陌以前的洗脑式广告

画面会特别丰富，线条可以是背景，点可以是肌理，伪立体效果可以为画面提供空间感。

一些在海报当中的运用方式

一些在banner当中的运用方式。

在banner中

孟菲斯风格早期形成主要是在室内设计与纺织品，但是目前来看，这两种应用场景并没有燃起这把复苏的火。但也不是完全摒弃，我们仍然会在一些偏僻的角落看见它的身影。

早期

那么我开始很贴心的帮大家分析并示例一些在孟菲斯风格上设计上常见的一些元素。明白它以何种元素通用，又以何种延伸的方式进行游走，其中的互通性在视觉上呈现怎样的脉络，会方便我们了解并掌握这种风格。

点线面是它的基本形态，由此早期延伸出的造型非常之多。
我这里摘取一些简单的造型展示。

造型展示

示范案例一

这类简单的元素特别适合做一些简单的banner，尤其是针对一些文案信息简单，辅助元素或者肌理的出现，会极大增添画面的丰富性。我们看一下这类元素如何来应用在一个画面当中，并产生什么样的变化。

这是全部的文案，如图，如果按照正常做法来做，画面和文字会显得较为乏味。

尝试加入外框，加入肌理，加入小图形点缀。画面渐渐发生了变化。

如果画面到此为止的话，还是会显得非常单薄，所以现在我们加一个简单图形进来，当然是需要契合文案信息的对应元素。

如下图，这是非常简单的一个基础变化。

有同学慢慢举起了自己的小爪子：可以更花里胡哨一点么？可以，来吧。

如下图，元素其实是没变的。

但是颜色更加跳跃，构图更加复杂一些，构图的复杂性主要来自于伪立体效果产生的画面分割。

有同学慢慢举起了自己的小爪子：那个眼睛我画不出来，可以不加眼睛，只利用简单的色彩加肌理来排吗？

可以，来吧。

如下图。先安排整体的构图。思路还是第二个方法的思路，利用伪立体效果制造的画面分割，合理安排文案的大小和位置。

加颜色，注意在孟菲斯风格当中，颜色的选择是非常重要的一环，它直接影响了整体最终的效果。

最后一步，做一个破版的处理，让整体更加富有动感。

文案与图片如下：

在这个案例中，我们主要来看一下，画面当中出现图片时，我们需要如何将画面融为一体。

其实并不复杂，加描边效果即可，当然了，有的图片适合抠图处理，很显然，我不会找一个要抠图的题目（抠图是硬伤）。

仅仅做到上一步还是不够的，我们需要添加更多元素和肌理。

最后一步，添加背景图案。这个背景图案也是典型的孟菲斯风格的样式。

示范案例二

最后一招，善用图标。

因为图标的形式足够简单，那么可以很好的适应孟菲斯本身的风格。但是选择图标的时候我们需要特别注意一下，最好是选择比较风格相近的整套图标。这样会更统一一些。

普通的图标肯定是很难满足我们的需求的，所以需要在图标上进行二次创作。比如修改简单的造型变化，填充颜色，填充肌理等。完成之后就可以进行使用的。对于不会画插画的同学来说，是一个简单快速上手的办法。

下面，是我们拿到的文案信息。那么需要配合信息找对应的图标。

如下，是我找到的对应图标，这个是我已经照着画了一遍的结果，但是跟原版没有任何差别。所以我们需要改动的地方还是蛮多。

修改后的图标样式如下，这个我们已经可以当简单的插画图形来用了。

先来看banner如何来做如下，我调整了基本的构图样式，手机的图标我没搁进来，因为画面不宜过于满，需要适当留一些白。文字信息我当然让它较粗一点，不然热闹的画面很容易吞没信息内容。

我们再尝试完成海报部分。

注意元素的位置和大小需要反复的尝试。

三种案例示范到此结束。

接下来，和大家分享部分同学的完成作业。

在商业项目中，许多同学会头疼没有美术功底，说自己图形造型能力差。

因此，在上期的线上版式设计课程中，猛奇老师增加了孟菲斯风格，整理了三种孟菲斯实用方向。

1. 数字为主的画面
2. 图标类延展趣味图形
3. 人物类孟菲斯画面

这三种方法在在商业运用中非常实用，能够让大家快速在想象中创造个性的设计画面。这些在大家的日常设计中帮助十分巨大，希望大家好好利用哦。

作者 | 王猛奇
来源 | 字体设计（id:hifont）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。