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

用户头像
北京/UI设计师/6年前/1198浏览
「孟菲斯风格」设计的三种干货教学

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

undefined

1、孟菲斯风格的起源

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

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

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

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

undefined

陌陌以前的洗脑式广告

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

undefined

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

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

undefined

在banner中

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

undefined

早期

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

undefined

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

undefined

造型展示

示范案例一

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

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

undefined

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

undefined

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

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

undefined

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

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

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

undefined

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

可以,来吧。

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

undefined

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

undefined

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

undefined

文案与图片如下:

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

undefined

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

undefined

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

undefined

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

undefined

示范案例二

最后一招,善用图标。

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

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

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

undefined

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

undefined

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

undefined

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

undefined

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

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

undefined

三种案例示范到此结束。

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

undefined

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


  1. 数字为主的画面

  2. 图标类延展趣味图形

  3. 人物类孟菲斯画面

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


13
阅读原文
|
举报
|
52
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
“知识宅急送”外卖,快递,平面,海报,素材,教育
牛奶乳液层次平面平铺平面
倒计时,海报,平面
玄关入门地毯印花图案红地毯
金色颗粒质地的平面
平面风格黄绿色系花朵装饰
海底世界插画
牛奶乳液层次梯田平铺平面
城市园林平面布局航拍
城市园林平面布局航拍
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
平面男孩喝咖啡插画设计
金色颗粒质地的平面
空的平台平面和自然景观
学习,优惠券,平面,海报
金色颗粒质地的平面
平面插画设计女孩喝咖啡
金色颗粒质地的平面
金色颗粒质地的平面
金色颗粒质地的平面
空的平台平面和自然景观
平面书法字手写
中国传统纹样创新图案设计
平面设计 吊牌设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
你可能喜欢
相关收藏夹
大家都在看
登录注册