• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用品牌基因法做图标设计,高级UI设计师才会的手法!(实战篇)

用品牌基因法做图标设计,高级UI设计师才会的手法!(实战篇)

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含logo设计,品牌基因法,品牌设计,图标设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

@菜心设计铺 :菜心的品牌基因法不知道大家有没有忘记,之前有写过两篇,今天来写第三篇——实战篇,根据真实的案例来再次讲述如何运用品牌基因法制作图标!

如果你忘记了之前的品牌基因法(升级篇),可以先去回顾一下:

  1. 《用品牌基因法做图标设计,这是高级UI设计师才会的手法》
  2. 《用品牌基因法做图标设计,高级UI设计师才会的手法!(升级篇)》

我们今天来聊的是一个真实的工作任务,做任务的过程分为以下几个阶段:

  • 收到任务
  • 找参考
  • 根据参考执行
  • 感觉没有品牌性
  • 根绝品牌基因法提取基因
  • 再次执行

1. 收到任务

我们每天都可能收到不同的设计任务,作为设计师,顺利的完成这些任务是我们最基本的能力,那我们今天要讲的任务是什么呢?

嘿嘿!一套天气图标。

认真的构思中…..

2. 找参考

算了,还是先看看别人都是怎么做的吧!

我找了一堆参考,随机选几个展示下,如下图(图片采集于花瓣网):

3. 根据参考执行

有了这么多参考,可以开做了,多做几个版本,显示出自己有多努力,哼!

方案一:

方案二:

方案三:

4. 感觉没有品牌性

虽然设计这么多稿,但总感觉还是没什么品牌性,每一稿都有其他人的影子,心里没底啊!

于是我去分析了各个参考,发现圆形,三角形,四边形,五边形,六边形都被用过了,下图是我的各种分析与尝试:

又想创新又要有特点好难啊!

但很多事情如果思路和方法对了,不应该这么难啊!

所以我怀疑肯定是思考的方式不对:收到任务就找参考,找完参考想都不想就开始撸图,撸你妹啊!

从一开始就没有从品牌这个点切入,导致后面的路一直都是歪的,即使做再多稿,也会心理没底,因为没有品牌性!

突然想起,本宝宝不是写过《品牌基因法》吗?

5. 根据品牌基因法提取基因

如果你已经回顾了品牌基因法,应该知道提取基因的方法有三个方向:

  • 提取特定形状
  • 吸取品牌颜色
  • 抓取风格特点

我们这次用的方法是提取特定形状法。

由于信息安全问题,不方便展示提取基因的原图标,这里只告诉大家,我从原品牌图标上提取了一个基因符号-“花瓣”,如下图:

这个符号是具有品牌感的,如果能把它融入天气图标中,方向一定没错!

6. 再次执行

沿着这个方向,我再次执行,尝试用这个基因符号做出云朵的主形象、太阳的光点和雨滴,如下图:

经过组合与调整,得到最后的成品(部分图标):

这样,一组有品牌感的概念设计就完成了,不论是阐述设计思路还是最后展示成品都可以自信满满,内心忍不住夸上自己一句:棒棒哒!

总结

最后提醒大家两个点吧:

第一,做设计还是需要有些特点,如果你做出的设计,换个logo谁都能用,那就基本上是没啥特点了,所以一定要考虑好品牌性。

第二,有时候虽然可以提取出品牌基因符号,但确实不一定适合你当下的场景,不要觉得方向对了,就一定能做好,执行力需要慢慢练,实在不好看咱就换个思路,一定要灵活运用哈!

学习图标设计的同学,建议先掌握设计流程:《聊聊图标设计流程及小技巧》

设计完成后从这四个方面来审视你的图标:《好图标怎么做?教你从四个方面来评价图标设计的质量》

想让图标出彩,可以从顶尖设计师的分享汲取经验:《顶尖设计师分享的6个图标设计优化指南》。

动效图标已是趋势,来这看基础的图标动效设计:《高手常用的六种图标动效设计思路(附大量实例)》

欢迎关注作者的微信公众号:「菜心设计铺」

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 大盘点!互联网产品Logo 的分类及特点总结
  • 高手的平面课堂!解锁LOGO设计新技巧
  • 「得到」的猫头鹰Logo 是怎么诞生的?来看主创设计师怎么说!
  • 这个网站用AI 帮你做LOGO,还可以免费下载!
  • 这个「以用户为中心」的图标设计法,恰好很多设计师不会
  • 平面高手课堂!系统梳理 LOGO 里的正负形知识
  • 超全面的LOGO 造型手法效果和风格汇总
  • 为了让LOGO 更有个性,高级设计师都学会了这招!
  • 网易资深设计师:如何建立可信赖的品牌形象?
  • YouTube 终于换Logo啦!来看背后的设计故事!

相关文章

  • 2017-09-16Git diff 比较两个版本的差异的常用命令格式
  • 2018-08-23这样使用Sketch的Symbol功能,能极大提高你的工作效率!
  • 2017-08-06网页设计的专业与非专业
  • 2018-08-23Iconfinder 开发了一个超强大的图标在线编辑器!
  • 2018-08-23学会这简单几招,字体设计也能萌萌哒!
  • 2017-09-04lazyLoad图片延时加载
  • 2017-08-06浅谈响应式设计
  • 2018-08-23渐变质感技法入门指南:对比用色
  • 2018-08-23疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 2017-08-06如何去掉超链接下划线用三个简单的实例来说明

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 产品设计中有哪些实用的行为经济学知识?
    • 浏览器缓存相关http头尽量减少http的请求次数
    • 科普小课堂!设计师怎样从零开始设计一款APP?
    • node调接口拉数据
    • 引入外部文件(js/vbs/css)时,避免产生乱码的方法
    • UI实战教程!从零开始做App 系列之项目立项+预估时间篇
    • 写给设计师的AR入门指南!手把手教你制作酷炫三维立方体!
    • 9个小技巧,让你的作品也能上Behance 热门!
    • 浅谈 div 与 table 如何取舍结合利用
    • 这3个适用性极好的网页设计趋势,会在2月流行

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有