“小清新”风格的视觉表现


  “小清新”,近些年才流行起来的一个新名词,用来描述一种文化现象,定义某一类音乐、文学、摄影作品的风格,也随之衍生成为对爱好这类风格的人的称谓。在平时工作中经常能听到耳熟能详的交谈:“某某某的设计风格很小清新……”、“这个颜色太小清新了不太合适”……

  其实作为视觉设计师,我对这类风格在视觉上的表现一直很疑惑,究竟怎么样的设计才算是有小清新感觉的呢?难道这只是一种说不清道不明的感觉吗?在最近参与的一次运营分享培训时,也有运营同学问我,怎么样才可以PS出有小清新风格的图片呢,这也引发了我对这一类视觉设计表现的深入思考。以下是我整理的几方面内容,帮助我提取对这一类风格在视觉表现层的关键点,只是一点拙见,一点设计感悟而已。

  首先,在我们所能看到的“小清新”里面,哪里些元素是最有特色或者说代表性的?

  为此我找了大量的带有“小清新”tag的图片,发现女人永远是这一类风格图片中出现频率最高的,无论是背影还是传说中的45度角,还有带旅行元素的如老式的皮箱、铁路、背包等,以及微单相机、阳光、有特色的静物之类的元素,并且在摄影手法上,大光圈、故意的过度曝光、逆光拍摄,随意的lomo风格等等。


  其次,除了上面提到的常见元素以外,色彩当然也是很重要的一方面。但是从“小清新”的字面意思理解,她的用色完全就是淡淡的很清爽的那一类色系吗?我通过她以及其他2个衍生的关键词做了一下情绪版的分析,并且通过Colorhunter这个站点提取了关键色彩并做了微调,在其中寻找到色彩上的变化。


  再次,通过刚才的情绪版分析提取用色,发现其实在“小清新”的视觉用色中,色彩的饱和度并不高,并且从整个色立体模型来看,她处于明度轴最高位的下方,是带有灰色调的,这也许为了更好的展示这样的视觉风格所独有的,或怀旧或忧伤的感觉。以下图两种色彩模型为例:

  冷色系


  暖色系


  最后,我们在web页面设计中遇到的“小清新”设计风格,具体的表现在哪些地方呢?

  1.色彩,这个上面已经提到过了这个风格在色立体中的位置,她也是用户获取信息过程中最快能让用户感受到的。

  2.页面框架,根据上述的分析,这样的设计风格对于页面框架布局毫不吝啬的使用留白,或者简单的线条对模块之间的关系进行分割,在这样的设计风格方面,个人觉得豆瓣、网易印象派都做的挺不错的。


  3.关于质感,“小清新”的设计质感是轻量级的,或者说干脆抛弃了质感的使用,取而代之的是干净整洁的大色块。

  4.图形元素与质感一样,也尽可能的使用了简单的表现方式,比如图形倒角、icon等无不简约,但又不失细节。总之,设计风格还是取决于产品本身的定位,风格必须与产品本身是匹配的。

  最近感觉还是挺浮躁的,写写文章可以练心。马上要放假了,偷闲以这篇博文作为对前段时间一点设计心得的总结,不是设计高手,只是一个混迹设计圈多年的老油条,文中也许有词不达意的地方,还请一笑而过吧。

  文章来源:阿里UED

时间: 2024-10-29 05:33:39

“小清新”风格的视觉表现的相关文章

PS合成漂亮小清新风格的淘宝网店横幅

  朋友们大家好.这篇教程教的PS图片合成学习者们使用PS制作漂亮淘宝网店横幅,教程制作出来的横幅挺小清新的,主要运用的是合成溶图的技巧,推荐一下和脚本之家的朋友们一起分享学习了,我们先来看看最终的效果图吧: 我看到了一个海报,是这张,有感而发,想到了一个创意,就动手做了!原图是这张 我觉得很有创意,和我现在做的产品也比较合得来我就开始模仿了 首先我想找个背景,我要做的产品是纸芯,我要强调是原木制造的环保纸 先得找个背景 做一下模糊和自然饱和度调整 前面加点树木做点合成,边缘连接用蒙版画笔调成硬

PS鼠绘小清新风格的立体定位图标

PS鼠绘小清新风格的立体定位图标   具体的制作步骤如下:1.在640*640的画布上用多边形工具建立一个480*480的圆角矩形,填充颜色是#f1f1f1旋转45度,对齐 2.添加图层样式,参数如下 3.先把垂直参考线拉出来,用椭圆工具画一个180*180的正圆,填充颜色为#85bb03,    

photoshop合成小清新风格鞋子电商海报

  photoshop合成小清新风格鞋子电商海报            效果图 1.新建一个950X450大小,分辨率72大小的文档. 2.导入作为背景的两张图片,对上面层的文件运用图层蒙版进行擦除. 3.对第一张云海山背景层,添加色彩平衡调节层,并且对其进行适当高斯模糊,让其进行往后退,产生前后空间层次. 4.导入新的山层,同样添加图层蒙版,进行擦除多余的部分. 5.在前景山前添加石头块运用图层蒙版进行擦除留下合适的部分.

PS 暖色调的夏日校园小清新风格

  随着毕业季的来临,记忆青春的照片少不了!怎么样可以让照片更与众不同呢?现在为大家分享暖色调的夏日校园小清新风格,简单粗暴,而且效果暖暖的,青春的味道 分类: PS调色教程

Photoshop简单几步调出夏日小清新风格人像照片调色教程

给各位Photoshop软件的使用者们来详细的解析分享一下简单几步调出夏日小清新风格人像照片的调色教程. 教程分享:   一.关于前期 说说当时拍摄的环境,这组是在我们学校教学楼拍的,当时是中午,阳光比较强,导致高光阴影对比太强,光线不均匀.大家尽量避免在这个时间段拍片,当时第一次拍也没什么经验,给大家看看原片.   二.Lightroom后期 我后期主要是在LR里面进行处理,PS只会做些简单的磨皮和祛痘,所以这次主要是讲解下这组片在LR中的后期调色思路. 之前说过这组片子的拍摄环境不是很好,阴

Illustrator设计小清新风格文字效果绘制方法分享

给各位Illustrator软件的使用者们来详细的解析分享一下设计小清新风格文字效果的绘制方法. 方法分享:             好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的设计小清新风格文字效果的绘制方法分享的全部内容了,各位看到这里的使用者们,小编相信大家现在是非常的清楚了绘制方法了吧,那么各位就快去按照小编的教程自己去尝试着绘制吧.

团广网低调改版 返利网开始流行小清新风格

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 据记者了解到:在2013年12月,国内知名返利网品牌团广网悄然改版,网站原来橙色风格换成浅绿小清新风格,纵观51返利网当前网站风格也类似于团广网,返利网行业开始流行小清新风格. 改版后的团广网首页www.tgwang.com 51返利网首页www.51fanli.com 各大返利网站改版频频,小清新逆袭整个返利行业网站.越来越简单明了的设计对

Photoshop用LR结合PS调出小清新风格校园照片教程

给各位Photoshop软件的使用者们来说下用LR结合PS调出小清新风格校园照片的教程. 教程分享: 原图:   首先,我们把RAW格式的照片导入LR,观察图片场景道具服装色彩搭配,看图片有哪些需要调整的,如何调整成自已想要的色彩, 盼盼在修图中大部分色调都是在LR中完成,PS只用来调整图片的细节和修皮肤.液化等,稍微动下色彩.           第六步.把LR里面调好的照片导入PS,我习惯是先液化,然后修景的杂乱物. 用高低频磨皮让模特面部保留细节且光滑红润,有质感.   完成最终效果!  

Photoshop快速制作小清新风格人像

  素材图片也非常不错,只是颜色稍微沉了一点,没有突出夏日的阳光效果.处理的时候可以先简单给图片润色,然后渲染局部高光,再把整体调亮即可. 原图 图一 1.由于原片肤色不是很透,首先我们把照片模式换为Lab颜色,打开"应用图像",选择a通道,并更改图层混合模式为"柔光",不透明度调整至44%,此步骤可使人物肤色更加红润.通透.确定后回到RGB颜色(图一). 图二 2.经过上一步的调整,后景中的绿色变的过于鲜艳,且感觉太闷,所以添加"可选颜色"调整