登录图的趣味设计

登录图趣味设计

阿里巴巴登录页面左侧一直都会有个banner,这个图片因为位置、环境的特殊性,跟我们平常做的首页banner的设计思路会有所不同。首页banner更注重的是信息传达,登录左侧的这个banner偏重情感化设计,情感化设计除了节日、事件的氛围之后,还有就是趣味性。

趣味设计是一个比较大的概念,在这里我狭隘的把趣味设计分成两个部分来介绍,1.主体元素的创意;2.背景元素的处理。每次在做这个banner的时候,都非常的纠结,当然最纠结的地方就是创意,虽然创意是给非常主观的东西,但是我们还是可以通过对一些元素处理找到创意点。

A.线描——来自现实场景,超越现实场景的表现力

线描的方式是我比较常用的形式,这种形式相对简单,很容易上手,效果也比较有张力。先找一个相对合适的场景,对着现实的场景勾出想要的线条,再对线条进行粗细、颜色的调整。举个例子如下:

1.如果我们需要一个仓库的线描场景,我们先找到一个满足我们需求的仓库场景,对场景进行线描绘制。

线描场景

2.画出线描后根据背景色的主色调对线条进行粗细及颜色调整。然后再添加一些实物做一下对比。

线描场景

3.同样的方法,绘制其他与之相关的元素,组合到一起,最终效果如下:

线描成功稿

B.夸张——原本是1,表现为3,让1+1>2

夸张的手法我们见的非常多,以现实实物为蓝本,用夸张的手法来表现实物,使之更具表现力。以此来吸引用户的目光。下面例子为冬季采购的banner设计。

1.跟线描一样,找一个类似我们可以用的场景图片,用卡通的形式绘制货车,对局部细节进行适当的夸张,贴近自己想要的感觉。

夸张1

2.有了这个基本元素之后,把货车的层高加至3层,夸张我们平常印象中的货车,增加货车表现力。

夸张手法2

3.一层的货车被夸张绘制成三层之后,增加了货车的表现力,同时增加了货车的趣味性。后面只需要添加一些辅助性的元素,加强主题所需的氛围即可,最终效果如下。

夸张效果图

C.重构——对现实的实物进行重组,再设计

重构在工业设计中用的比较多,这种设计方法尤其能体现趣味性,本来不相干的几个事物,通过重构再设计,组合在一起的时候,会给人眼前一亮的感觉。

1.灯泡和建筑都是我们生活中比较常见的事物,二者组合到一起的画面不是很常见,当我们想到这两个元素的时候,通过重构、正负形等设计手法,让他们联系到一起。

重组素材

2.主体形状有了之后,灯丝是我们设计最好发挥的地方,把主题文案与灯丝相结合。

重组过程

3.通过对灯泡形状、灯丝和建筑三者的重构再设计,让三者融合在一个画面里面,改变了一般灯泡的感觉,增加了灯泡的趣味性。

重构效果

 

画面的主体元素确立后,背景的处理相对就简单些,背景处理大部分是通过笔刷、色块堆积、不规则形状、羽化、水粉等手法进行处理。处理方式大家各有各的方法,这里给大家展示一些背景处理的案例。

笔刷效果

色块堆积

不规则形状

羽化效果

水粉

设计理论和设计方法肯定非常的多,这里只是介绍几种,希望大家能再补充。欢迎大家随时拍砖。

Category: 视觉设计

25 responses

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Njeric571 says:

    不错。顶一个

  2. Miya says:

    哟,有料啊。。。学习了!

  3. Paopaoanatkh says:

    看起来简单的重构显功力啊,从“点亮”的idea到合适的表现,需要娴熟的技巧啊

  4. 家宏 says:

    很详细,创意也不错

  5. Winnie Liangw says:

    创意的搭建、色彩大胆应用,真的很棒。

  6. guanguan says:

    仔细阅读了一下,确实很有收获哦!

  7. Wuyou_303 says:

    深刻学习了,很有收获!

  8. Sox says:

    真不错,有料~

  9. 叮当 says:

    干活分享,真心不错~~

  10. Wangdansc says:

    很不错的设计思路及方式,借鉴了

  11. Fangxiaoweismail says:

    图文并茂 富有表现力

  12. Weiwei10393 says:

    分享很生动、实用,顶!~

  13. Jalshow says:

    很棒,很不错!

  14. kim says:

    强呀亲,,继续加油哦~~~

  15. yaoyao says:

    好厉害,受教了

  16. 零八商务网 says:

    生动、实用

  17. 51酷站 css51.com says:

    确实很实用,受教了

  18. […] 更多详情:http://www.aliued.cn/2012/12/22/fun-design.html […]

  19. […] 更多详情:http://www.aliued.cn/2012/12/22/fun-design.html […]

  20. Van says:

    这种技法,真的有用么?

  21. Mark Ma says:

    想象力真丰富

  22. […] 源地址:http://www.aliued.cn/2012/12/22/fun-design.html […]

  23. […] 源地址:http://www.aliued.cn/2012/12/22/fun-design.html […]

  24. baby says:

    不错的设计思路