写在前面
其实 dribble,Be 上有很多几何化风格的 logo,大家多看看,其实可以发现都有一些共性。在这类 logo 风格占满市场的时候,考虑怎么做,才能让这一类更出彩。
我在这类 logo 的执行,分成三个阶段。
1. 图形的大概造型参考
简单来说就是找图形实物/绘制造型参考图,这跟大多数风格 logo 的设计步骤是一致的。
2. 根据造型,用基础几何图形表达
基础几何图形,其实就是很常见的「矩形、圆形、三角形、菱形」等等,你找的一张造型,尽量用工具自带的「矩形」「三角形」「圆形」去代替所有的部件。
3. 创意的加分
把大概的轮廓造型做出来以后,可以适当结合字母,或是添加一些小元素,把你的 logo 整活起来,让它更生动,画面感、故事感更强。
好了,现在我们开始讲案例。
我们先试着观察它,发现这个 logo 是猫头鹰与 L 的结合,那这个 logo 从 0 到 1,是怎么做出来的呢?
老方法,我们先找一些猫头鹰的图片, 作为造型的参考。提取猫头鹰特征。
找参考这步,我一般会分为找两种图片,1. 实物照片(为了观察整体造型与提取特征) ;2. 设计师处理好的造型图片(为了借鉴和观察别人的处理方式,但是需要注意的是不要过渡借鉴,会构成抄袭)
先看实物图片,发现其特征
1. 眼睛
2. 头上的小耳朵
3. 脸上的内轮廓
概括完猫头鹰的特征以后,我们开始绘制整体轮廓(先不加细节)。
网上这张插图,其实概括的很几何化了,我们只需要在它的基础上再修改、变化,就可以做出我们要的整体造型。可以发现,身体-矩形,翅膀-半圆,眼睛-双圆。我们根据这些概括,开始实现这个 logo。
把基础组件绘制出来,再把它们组合成一个初版造型。
到这里 01,发现猫头鹰的感觉还是少了一点,原因在于最关键的脸部的内轮廓没有绘制,这是能突显猫头鹰这个物种的很重要的元素;结合实物图片与处理好的插图,我们进行绘制,注意透视角度得到 02 图。
继续观察,还差了一个小耳朵是不是,那我们就给它加上,这边可以直接用矩形,也可以用三角形,可以输出两个效果,对比看看。
通过对比我发现,矩形看起来跟整个大体图形,更能融合到一起,整体感更强,最终我选择了矩形的小耳朵版本。
得到这个初版造型以后,我们再进行调整与创意结合;在翅膀与身体的连接处,我们可以做一个切割,让翅膀与身体的轮廓更清晰;同时,眼睛的轮廓也可以调整,与脸的内轮廓斜线,可以做平行(这样的处理,会让整个图形看起来更规则)。
继续观察、优化这个图形,现在会感觉,小耳朵与身体的连接,稍显生硬。脸内轮廓的直角连接同样有这种感觉。那我们就可以给它加上圆角,这种平滑的处理,使得图形视觉上看会显得柔和。
最后,我们根据 logo名称「L-OWL」,让这个图形加上 L 的小尾巴,再上个色~就完成了!
这个 logo 的诞生是之前我去吃海底捞的时候,服务员小姐姐送了我一个小玩具。当时看到,一阵狂喜 ,这不是很适合拿来做 LOGO 么!
在执行的时候,我发现按照原图的绘制,整个造型会显得的怪异,所以,我们可以试着把它改变一下。
我们尽可能先用矩形、圆形去绘制这个小恐龙减少原图那些细节,比如脚指之类的,能简化就简化它得到这个轮廓,发现造型不太好看,特别是头部,不说的话有点像狗子。那我们就可以给它改变下造型,尝试减少线段。
尝试找出可以删除的锚点,让形状以最少的线段表达出最清晰的轮廓;在这一步的修改,做了比较大的改变,不仅改变了图形的原始造型,也修改了侧面头部的角度(因为去掉了长开的嘴,所以把仰着的头往下调整)。
这一步是一个尝试的过程,也是一个试错,需要耐心的过程,大家可以多找一些图片参考,得出你想呈现的造型形态。
得到了这个图形 01 以后,基本是完成了一半。接下来,我们需要做的是让各个部件层次清晰点。比如,头跟身子的连接处,需要一点切割或者是阴影;腹部与腿的分层,尾巴与身体,也需要阴影。这样做的目的,是让你的小恐龙各个部件更清晰,而不是一坨色块 。
这个 LOGO 不知道大家能不能感受到,它很卡通,也很几何。现在我们来讲讲这个案例。
老方法,我们第一步是要找到合适的造型参考。
在网上找到了这张插画,是的,就是用它当造型参考。
然后,我们去拆分这个小女孩的各个部位。帽子、头发、眼睛、鼻子、耳朵、脸型。我们用基础几何形状,先尝试组合一下初版的图形。没办法用基础形状的,我们先用钢笔大概勾勒一下。
初版造型出来以后,观察一下发现是可行的。我们再把它们(描边)转化成面性色块,再观察调整。
这边的小细节:耳朵被头发盖住,被盖住这块的线条,跟头发的弧度呈平行状态加上五官,( 这边看你想赋予这个小女孩什么样的性格,但是看装扮来说,酷酷的气质是比较符合的)想表达酷,可以加上墨镜。歪嘴笑更加重了 cool,不屑的气质。
用圆形去剪切,是很常用且好用的一种方式。它会让你的图形看起来更规整,更几何化。
最后,我们得到这个图形以后,在排版上,也做一些变化。对应圆形框内的图形,我们用圆形的路径文字,去排品牌名称。
现在很多同学应该还是在大量做练习的阶段,有时候不知道做什么,就感觉很头疼。这个时候,知道了某种设计方法,那就可以把你看过的图都变成你的 LOGO 了。这个 logo 也是我偶然看到的一张狗狗的照片。然后就有了把它做成这风格 logo 的想法。
我们先绘制这只小狗的头部(身体的形态,是不是要按照这个照片来,完全取决于你,这边我们先把头部做出来)。
观察照片狗各部分的形态,尽可能用基础形状去代替。头部其实是比较简单的,我们先暂且搁置一边。接下来,我们来绘制身体。这边我没有按照原图的形态去绘制,觉得太过于安静了,就去网上找了一些,正在行动中的狗狗的形态。
可以多找几张参考图,方便我们结合调整。
因为这个小狗的头部是比较可爱的,跟这个身子搭配不了。这个时候,我们可以先调整身子与头部的大小比例,看看效果。
身子这么一缩小,是不是顺眼多了?比例调整到和谐以后,我们再开始优化身子的部件。( 如果描边模式你觉得很难观察,那我们先把它转成填充模式)
通过观察找出问题,再优化。因为狗狗走路的时候,走路的后腿是一前一后,所以会有层次关系。
我们可以尝试把初版的图形,把一条腿与身子切割开,这样处理就可以很好地表达前后层级关系。
优化处理以后,大概的形态已经完成了。可能大多数同学到这步,就直接上色排版了。想做出有意思的图形,姿态、动作是很关键的。现在这个图形,其实直接上色是没什么问题的,但是就会少了那么一点灵性。
要让你的图形生动有趣,有时候只需要把你画的动物/人物,头部与四肢做一点点角度,就会比之前的生动很多。比如这个小狗,我们把它的头,往上抬一下,就会比之前的更灵性了。
最后,我们可以调整确定好的图形形态,比例关系与加点阴影细节。
我们在小狗的眼睛旁边加个星星让它 wink~ (谁会拒绝对你wink的小狗呢)增加调皮可爱属性。大功告成~
设计来源于生活~善于发现, 善于联想。
这个 LOGO,可能 80 后,90 后,看着都比较有亲切感,还记得小时候玩过的铁皮青蛙么~
老办法,先用基础形状把青蛙的大概轮廓拼出来。我们在绘制初版轮廓的时候,先观察你的这个参考图片,比例,形态的长短是不是符合你心中所要,如果不适合,那你可以先复制一个图片,再对它进行拉伸/缩短。
就像这个青蛙的图,我就觉得身子有点过长了,咱们把它压缩一下。
观察我们勾勒出来的形状,青蛙的后腿,稍显长了一点儿,我们先调整后腿的长度调整腿与身体的比例关系。简化线段,能平滑的地方,我们删减锚点青蛙的肚子部分,我们用半圆去剪切规整尽量让我们绘制出来的大轮廓饱满得到这个轮廓以后,我们再绘制青蛙的蛙掌我们还是多搜一点青蛙的图片,去观察蛙掌的结构。
蛙掌还是比较容易概括的,只要几个矩形跟圆点就可以绘制出来了我们把绘制好的蛙掌,跟上面绘制好的大体形态拼起来。
调整各个部件距离,适当加点圆角添补未绘制的眼球。
四肢与身子加点切割,增加部件结构清晰度。
加上我们的旋转小开关,最后为了防止青蛙左下侧的空间太大,会造成图形不稳,我们加一条矩形横线,去平衡版面。
生活当中的很多美好的事物,都值得我们去记录,或许哪一天你没有灵感的时候,它就能变成你笔下的一个 LOGO,一张插画~
技法都不是最难的,需要你去归纳总结它。说了这么多,动笔试一试吧!行动才是硬道理!
原文地址:胡晓波工作室(公众号)
作者:Douta
转载请注明:学UI网》5 个案例带你领悟几何面性趣味LOGO
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司