韩风BANNER设计步骤详解—泰迪熊【小金狮UIZOO】

发表于2015-09-14
评论0 7.2k浏览

由小金狮UIZOO精英教师团队组合,将在未来不定期和大家一起分享我们工作中,最新鲜,最有份量的原创UI分享。【视频在最后】


起源:

海报设计

海报设计是具有强烈视觉效果用于宣传的艺术设计,

小金狮是视觉传达设计出身,因此在大学很早就接触这一块的设计和学习,从03年一直跟随着大学老师在朦胧中学习设计。那时候网络世界并不发达,每个月只有300块的开销,不能奢求有自己一台电脑,于是那时候和室友做起了帮隔壁学院做海报的小买卖。我负责创意+POP字体(后来我成了半个策划,半个UI),另外3位,一个嘴巴利索,跑业务(后来成了商务),一个原画了得,负责画海报里酷炫人物(后来成了原画),最后一个专门抹口水贴海报(后来成了运营)。可惜那是手机若基亚的砖头年代,没有拍照功能,也穷的连照相机也没有!您能想象吗?那个年代,一个荤菜3块钱,一个素菜1块钱背景下,一张海报能赚50-100不等,够大伙吃上好几顿小炒,也是不亦乐乎!


咳咳,聊多了,我们回到海报本身,我最喜欢的海报,应该还是日本的海报设计,大师有非常多,比如福田繁雄,世界三大平面设计狮之一:


让子弹飞,最爱这张,创意和涵义无限,远离战争是我们心中的美好愿望!


超喜欢无印良品的设计,处处都显示着设计的精髓和生活的品味。

到后来,网络时代出来,电商的BANNER 设计变得越发的快速,


比如以上这份电商海报,为了宣传一份电子商品,需要请到超哥,摄影,设计狮,策划,运营,等等各种关系集合到这一张BANNER设计中,策划案要言简意赅,内容要吸引眼球。相当考验设计狮,而内容的复杂程度,也从海报设计中逐级递增!


当然在海报设计中,一个牛B 的字体设计也是显得尤为关键。

英文字体设计起来比较洋气,高大上,


進擊的巨人,繁体中文字,个人也偏爱繁体字的形式感,日本,台湾,香港等地区都有在运用汉语繁体字的习惯,传统文化传承性较好。


古代书法大师王羲之,应该称得上是中文汉字的字体设计大神了!


现代人造字,这是站酷粉丝第一名的刘兵克的作品,东北小伙子。在网络时代,脱离笔在软件上造字,又是一个另外的文字世界!

下面来说今天我们想说的:


课前啰嗦

Verbose

每次开公开课,总是有人迫不及待地大声呼吁着:“老师,快讲干货,干货,干。。。” 你分享免费公开课,要是讲的好那就是干货,要是讲的水,那就…0…只剩下一个干 了!所以小金狮铺垫了那么久,赶紧切入主题➜ ➜ 

【泰迪熊的一缕分魂登场】现在学习UI的童鞋越来越多了,这是一件好事,说明我们设计的队伍在壮大。 今天让给大同学们带来一篇实用的宣传海报制作,让我们先看文字,再一步步拆解细节,最后得出效果图,拉到最后才是本次教程的标配视频。观看视频千万记得要有Wifi,谁用流量谁土豪!


韩风UI BANNER设计 全分解

文 / 图   泰 迪 熊

小金狮UIZOO 专业游戏UI教研平台


文字才是宝贝

开始设计之前,我们先来探讨一个问题:设计是如何产生的?

这个问题其实回答起来很简单也很OPEN,在我看来,设计的产生来自于设计师的积累。那这里的积累其实包含了设计师的个人审美、素质和兴趣爱好等等。所以,作为一个设计师,你的综合能力还是比较重要的。


接下来,我来说下我归纳的一个设计套路:

1、接到设计(命题)----审题,分析设计;

2、发散思维(思考)----理解需求并构思设计;

3、寻找素材(明确构思和美术形式方向);

4、提炼素材;

5、勾勒草图、具象想法;

6、草案敲定;

7、完成设计,刻画细节(美术表现)。


说完以上东西,我们就按这个套路进行我们的设计之旅了~


一、接到设计

设计这张海报,其实初衷是为了给2015年小金狮UI课堂做宣传用的。刚接到需求的时候脑海里面也是一片空白。但是后面仔细想了想,我就有思路了。

首先,这个东西是宣传,那吸引眼球让观众记住是最最重要的。所以我想到了形式感比较强烈的徽章、比较扎眼的光效、甚至是动效。。  然后这些都得为主题服务——宣传~


二、发散思维寻找素材

大的方向定下来了,就得把一些具体的东西和主题挂钩了。首先徽章形式感的设计会比较重要,形式感可以是一个职业标志的感觉。它可能会是整个视觉的主导,但不是主体。所以这里我会想到一些图形,类似下面这些:



其实这两个阶段是没分那么细的,你可以在发散思维的同时,寻找素材。

分析完设计任务之后,我的设计方向,就是源自暗黑破坏神3的职业徽章图标了:


具体的形式感定下来了以后,光效气氛的想法,则来自于之前看过的DOTA2的宣传海报:


三、提炼素材、勾勒草图、具体想法

这里3个阶段也是可以同步进行的。任何一个设计师,在做设计之前,都是需要有一个草图阶段。草图可以快速的让你具体你的想法~


这里我勾了一些草图,其中第一个和暗黑3的那个比较接近啦~后面的就是靠一些套路去做拓展啦~   最后是敲定了最后一个设计方案。

然后呢,我们的思维要重新回到我们设计的主题上面去——我们做的是宣传。

所以这里我想到了类似教堂的上升感的东西,也就是整个设计要给它拉伸,变长。然后还得结合一些小金狮UI课堂相关的元素进去。比如:书本、数位笔、三体,这些元素都是代表了小金狮UI课堂的方方面面。然后再对元素进行重组,入下图:



然后加入一些圆形的元素,可以对整体做一个整合。


四、完成设计 刻画细节

到了这个阶段,就是开始刻画细节咯~吭哧吭哧……此处省略一万字……

中间的细节设计部分,建议大家:直接公开课3小时的韩风UI设计视频,讲解更直观给力哦!

往下拉……拉…拉…拉

经过一番刻画调整,一张酷炫帅的海报就诞生啦。


可爱的熊大还专门让特效狮做来一些动态特效,为此,我们此次公开课的海报设计也是花费了很多的心血


▲动态特效


视频倒腾好些天终于上传成功了手机上阅读只能选腾讯,PC端观看可以去优酷频道,大家自行站队观看!

                                              【泰迪熊韩风UI公开课❷】翠花,上Wifi!


结语

Epilog

至此,我们这一期【小金狮UI课堂】泰迪熊老师关于一些BANNER 设计的讲解就到这里。设计是需要时间和经验的积累的,熊大的这份海报课堂设计,依旧还有很多地方需要改进,我们本着抛砖引玉的想法,欢迎在本篇下方留下您的评论,与大家一起交流共进步!

▲最近

最近正在规划实体教学的事宜,延迟了一些平台分享的规划,也是给狮友们一个小抱歉!

如果你觉得网络教学不够尽兴,小金狮已经开启了实地教学的大门,有意向的同学可以留言我哦!。

小金狮个人微信号:jin7702

+好友请注明身份:

HR?主美?资深UI狮?新手UI狮?策划?项目经理人?

希望我们能一起继续营造一个真心学UI,讨论游戏交互的氛围环境!

▲微博&花瓣

新浪微博@ 小金狮

花瓣网@ 小金狮 可查看5千张高清UI参考资料!

Hello! 欢迎订阅

2013 中国-福州

微博 @小金狮UIZOO | 微信号 jin7702

Q群109998211、108127337(满员)

花瓣地址 | huaban.com/jin7702

5000张高清UI参考资料 从此设计不再孤单


合作 / 联系 / 投稿 请向公众号留言

招聘事宜可联络:uizoo@qq.com


企业服务号 小金狮UIZOO

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引