one-element-three-logo-1

@张瑜design :三天的时间,我用一种设计元素设计了三款风格迥异的LOGO。本文通过这个实战案例,为你揭秘LOGO设计中的视觉造型能力和设计流程。

作者章鱼哥,UI 设计师兼品牌设计爱好者,目前连载着「每日一标 one day one logo」,欢迎加他的个人微信zhangyusheji123 讨论交流。

他是一位成都籍艺人;

他是鼓手,说唱歌手,人民艺术家;

他诙谐幽默,现场感染力极强;

他就是来至东汉末年的Rapper — 说唱佣

uisdc-logo-2016100324

第一天 线性LOGO

线性LOGO 看起来精细极致,常应用于icon设计中,线性LOGO的设计的要点在于对设计对象的整体抽象能力和归纳总结能力。

1,资料收集

设计前脑海中一定要有个大概风格,有了明确的目标,你找到资料才会更加的精准,设计也更加准确。

比如我想设计下图的建筑类线性LOGO,你就需要分析,这种线性的LOGO,主要通过线条来概括建筑外轮廓,图片的选取尽量突出设计元素的外轮廓,选取能全面概括设计元素的图片。

uisdc-logo-2016100325

我选取的是说唱佣平视45度角,这个角度是因为这个角度说唱佣的动作表现更加舒展,正视图和侧视图说唱佣的动作都会被遮挡,

uisdc-logo-201610033

2,勾勒草图

草图目的在于快速的了解设计对象的整体轮廓,找出设计对象亮点。

比如一提起蜗牛就联想起蜗牛壳的螺旋线,一提起说唱俑联想的就是笑脸和夸张的动作。这个联想点就是你设计需要突出的亮点,

给图形确定一个图形的细节记忆点,使它区别于其他的图形:

uisdc-logo-201610034

3,几何化元素

对于任何物体来说,都可以用以下四种形态来组合。设计就是一个抽象简化的过程,用简单的元素概括出设计元素。

uisdc-logo-201610031

在几何化之前,先画出几个大小不同的圆,直径比例为:1,2,3,5,8,13,21… …  就是著名的斐波那契数列数值越大越接近黄金比例。

设计的时候尽量去套用大小不同的圆:

uisdc-logo-201610035

 

4,确定线宽

按照上图的曲线勾划出后,减去多余的线段,给剩下的曲线加上了线宽。

可以看见,很多细节都不能表现,甚至挤在一团,这个时候需要再次简化设计,把更多不影响设计的线条剔除。

题外话:

我现在习惯在Rhino(超级奇葩有木有)里面勾线然后转AI进行编辑。

Rhino

  • 优点:随意倒角以及超强的切线功能
  • 缺点:不好修改线宽

Coreldraw

  • 优点:倒角+贝塞尔线功能,双击就能编辑,随意的删除及添加节点,以及删除后自动优化线条(AI无法匹敌)
  • 缺点:MAC系统没有,没有,没有,我的天啊,让我自断一只手,所以才有奇葩的用Rhino画线

AI

  • 优点:强大的编辑功能(虽然我没有深入研究)
  • 缺点:让CDR先入为主了,第一时间没有遇见你,你再好,现在也对你有偏见了,不好意思

Sketch

  • 优点:做UI的时候超级超级超级方便
  • 确定:对于图像和图形的处理不是很强大

软件是其次,学会多种软件之间的转化,设计的思想与输出比软件重要。

uisdc-logo-201610036

 

5,优化细节

调整多余冗长的线条。设计要有舍得精神,不是越多越细就好,刚才画了很多细节,但是现在看起来都是累赘,不断的简化设计,突出细节细节记忆点。

设计当中也还是有二八原则,即80%的设计元素都可以普普通通,20%的亮点足够精彩精彩就行了。

比如咬一口的苹果,你把Apple 的logo填满,它就是一个普通的苹果,但是咬一口之后,它变得与众不同。

uisdc-logo-201610037

 

6,继续优化

前面的优化基本上一个图形都到90%了,但是整体看起来不透气,不通透。没事可以可以多多学习国画,书法当中的气韵,国外也有同样的理论叫视觉流。一个连贯的视觉流,让设计看起来气韵神合。

同时设计也推崇存在即合理,一个元素的存在要有合理性,你舍去的东西和留下的东西同样重要。

uisdc-logo-201610038

 

7,润色定稿

修改一个颜色,检查最后的东西,比如该打码的就打码,(下垂我就不管了)

uisdc-logo-201610039

第二天 图文结合型LOGO

第一天玩的都是线,第二天想尝试玩玩新花样。不能老是用线玩捆绑,至少也试试皮鞭蜡烛之类的。

老司机脑海里浮现了各种CLUB,那就做一个类CLUB或者球队类风格的图文结合类的LOGO。

1,收集资料

按套路出牌,确定一个方向目标,大概找一下心理想要的风格,我一般会浏览Pinterest 和花瓣,上面应有尽有。

 

hbb20161003

uisdc-logo-2016100310

2,勾勒草图

分析了上面收集案例,主要是通过明暗对比来对元素进行造型,而且线条都很坚硬,且元素形态相对于集中,

在绘制的时候需要先勾画大概的面,我选择勾画暗部,通过明暗对比来画出元素形态,

uisdc-logo-2016100311

3,细化形态

用贝塞尔曲线或钢笔工具勾勒,注意线条的流畅度,勾完后再转化成面的形式,进行调整。

小技巧:

  1. 随时把图放大缩小来回观看;
  2. 放大瞪着眼睛看,观察细节是否到位;
  3. 缩小眯着眼睛看,观察整体形态是否偏离;

uisdc-logo-2016100312

 

4,添加细节

上面的图片叠加颜色后显得比较平淡,黑色相当于暗部,黄色和红色相当于本色,如果要用多颜色来表现图标,就需要增加一个高光面。

添加后明显图形层次感增加,有了更多的表现细节。

uisdc-logo-2016100313

5,组合文字

这类LOGO还有一个特点,就是图文结合,用一个背景把图形和文字统一结合起来,统一后形成一个完整的图案。

注意:由于自己书读得少,说唱的英文是RAP这我知道,但是说唱歌手的单词是Rapper,我写设计的时候写成了Raper(弓虽奸犯)。

uisdc-logo-2016100314

 

6,润色定稿

先来一张线稿版:

uisdc-logo-2016100315

再来一张黑白照

uisdc-logo-2016100316

最后来一个豪华高配版的:

uisdc-logo-2016100317

第三天 图形插画类LOGO

前面两天的设计让我更加喜欢这位人民艺术家,依稀记得第一次见老师,还是在人教版小学课本上看见(好像暴露了年龄),动作神态丰富,现场感染力极强,想必当年也是一线的老艺术家。

被我玩了两天后,总觉得还不够色,不对是不够色彩丰富,没有那种等红酒绿的气氛,没有体现出老艺术家骚浪贱的气质。

无意在bechance看见设计Luca Qiu (https://www.behance.net)的系列作品自己也想模仿一下,这种高饱和度渐变在添加一点小肌理应该在未来五年都是fantasty。Instagram的LOGO,justin bieber 的《what do you mean》MV,甚至薛之谦的新专辑封面都是运用这系列渐变。

值得做一个小练习:

uisdc-logo-2016100326

1,收集资料

前面两天的设计已经对于需要设计的东西元素越来越清晰了,设计风格也确定了所以直接跳转下一步。

2,勾画草图

草图阶段最开始想做成隔壁老王的贱贱的嘴脸,表现艺术家的独特气质,最后再三斟酌,还是放弃了老王,我怕老王翻院墙,

uisdc-logo-2016100318

3,几何化元素

同样将草图几何化,我在这里画的半身像,有两个原因:

一、第一天画全身,第二天画局部,第三天自然画半身照;

二、设计对象的主意视觉中心还是停留在上半身;

uisdc-logo-2016100319

4,调整比例

调整色块比例大小, 给出大概的明暗比,话说老艺术家已经被我玩黑脸了,哈哈

uisdc-logo-2016100320

 

5,添加渐变

为了安慰这位艺人,我选择了小粉红骚气的背景色,加入蓝色和黄色这一冷暖对比色,画面更加富有张力,色彩理论大家如果感兴趣,后面我也会写的。

uisdc-logo-2016100321

6,调整细节

我做了一定的切图处理,常用的构图法推荐九宫格构图法,简单粗暴,把图像的视觉中心点放在对应的交叉点就可以了。一张完美构图搞定。

uisdc-logo-2016100322

7,润色定稿

最后增加局部提亮或变暗,叠加噪点,让画面更加附有肌理感。

uisdc-logo-2016100323

玩了三天玩得我精疲力尽,但是乐此不彼,三种不同风格的LOGO各种表现不同,但是设计的手法方式都类似,不断持续的联系,训练的是心静,坚持做一件事,你会很开心的。

欢迎扫描二维码,加作者的个人微信号:

zygqr20161003

「大公司的LOGO改版经验」

  1. 《揭秘LOGO设计流程!超详细的腾讯云LOGO 改版记录全过程》
  2. 《深度揭秘!聊聊INSTAGRAM 到底为什么要改图标》
  3. 《LOGO改版实战!聊聊MEDIUM 2.0新LOGO背后的设计故事》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏 11

发表评论 已发布 2

还可以输入 800 个字
 
 
载入中....
相关推荐
2 收藏