首页

设计师必须掌握的6大图形设计方法

雪涛

图形是平面设计的核心元素之一,故图形设计也是设计师必须掌握的重要能力,不论是海报设计、广告设计、包装设计、UI 设计、Logo 设计都离不开图形设计,其中最具代表性的还是要数 Logo 中的图形设计,所以葱爷从 logo 图形入手,总结了 6 个最常用的图形设计方法。

加法

加法是图形设计中最常见、最实用的方法,即把两个或两个以上的元素组合成一个新的图形。

加法操作方式主要有两种:

第一种:将两个或两个以上元素的图形拼接或组合在一起,得到的新图形中虽然含有加法中的每一个元素,但外形轮廓已不是他们当中的任何一个图形,即它们都是新图形的子图形,这种相加的方式关键在于找到各元素可以巧妙连接的点,或者可以完美组合的方式。

△ 字母C与钻戒组合在一起。

△ 将树叶与咖啡杯巧妙连接起来。

△ 广州塔与「品」字融合在一起。

△ 字母U与H组合。

第二种:将元素 A 融合进元素 B 中,得出的图形在外形上仍保持着元素 B 的大体特征,但是元素 A 也完美地融入在里面。即 B 是母图形,A 是子图形,这种方式的关键在于元素 A 是否能完美地融入元素 B 当中。

△ 游戏手柄是子图形,河马是母图形。

△ 爱心是子图形,狐狸是母图形。

△ 海浪是子图形,树叶是母图形。

1. 实例:高音符号+眼睛

由于高音符号中间的螺旋与眼珠造型类似,所以具备了做加法的前提,但要怎么组合效果会比较好呢?我们可以尝试一下,首先我尝试了第一种方法,即把高音符和眼睛都作为新图形的子图形,如下图。

虽然两个元素都得到了完好保留,但造型不太美观、简洁,而且这两个元素的线条并没有融合起来,而是简单、粗暴的相加。所以我尝试了第二种方法,把高音符作为眼睛的子图形,如下图。

上图把两个元素完美连接了起来,整个图形比方案一简洁了不少,而且仍保有比较高的识别性,所以这个思路更靠谱,在此基础上用辅助线规范一下,这个图形设计就完成了。

比喻

即把元素 A 通过变形或者增加一点辅助元素,使其在造型上向元素 B 靠近,但仍保有图形 A 的识别性,新得到的图形介于图形 A 和 B 之间。

比喻手法成立的前提是,元素 A 与元素 B 在造型上要比较接近。

△ 通过变形把手掌比喻成鸽子。

△ 通过变形把字母V比喻成鹿头。

△ 通过在条纹状的「M」上增加一双筷子,把其比喻成面条。

1. 实例:把爱心比喻成桃子

爱心图形在外形上与桃子本来就相似,所以我们只需要在爱心上方加一片小树叶就能达到目的。

不过上图太过常规,没有设计感和独特性,所以我在爱心上做了一点加工,形成了循环的效果,如下图。

大致效果还行,接下来,我们用辅助线把这个图形比较规范地画出来就可以了。

正负形

正负形又称阴阳形,最典型的代表就是太极图,即在一个图形中,填充了颜色的部分是图形,没有填充颜色的部分也可以形成图形,正负图形通常是包围式或半包围式的。

所以正负图形设计的关键在于,既要使正形能清晰地呈现出一个图形,还得使正形的负空间也能成为一个图形,由于负形没有正形抢眼,所以负形的轮廓一定要尽量简洁、具有很强的识别性。

在 Logo 设计中,英文字母是最常被用来做正负图形的,因为英文造型够简单,且大多数字母都是包围或半包围式结构。

1. 实例:把字母D的负形设计成字母R

由于字母 D 是一个包围式结构,刚好中间有一个比较大的负形空间,所以很适合用来设计正负图形,但从下图可以看出,线结构的字母 R 并不适合做 D 的负形。

所以我们需要将 R 处理一下,使它成为一个面的图形,前后差别很大,但仍具有 R 的识别性。

调整后的 R 就可以作为 D 的负形了,其结合方式有两种,一种是全包围式的,一种是半包围式的,从下图可以看出,方案二(半包围式的)更好看、更特别一些。

同样,我们也需要对该图形进行规范。

外轮廓出来后,我们还可以在正形内增加一些细节,使其更丰富、更有层次。

描摹简化

还有些图形不需要全新创作,而是可以根据摄影图片描摹出来,比如很多 logo 图形喜欢描摹人物头像、雕塑、植物等图片。

由于拍摄图片的角度可能不会太好,或者整体不是特别符合我们设计的需求,所以在描摹的过程中通常要做优化调整,比如稍作简化,去掉不是特别重要的细节,只保留比较关键的部分,或适当改变其外形等等。

1. 实例:「舜皇」头像描摹

找到一张合适的图片之后,我们可以把它的明暗对比调大一点,然后在 PS 中执行图像-调整-阈值,把图片变成黑白两色,我们要做的就是把阴影部分勾出来。

当然这个过程中要主动做一些优化和调整,让这个图形要保持着跟原图比较高的相似度,且整体干净简洁,细节流畅利落。勾出大形以后加上颜色和背景,这个图形就做完了。

图形几何化

艺术源于生活,图形设计也是如此,但如果只是把生活中的事物直接还原成图形,未免会太过普通、没有特色,这一点在 logo 图形的设计中尤其重要。

那么如何使这些来源于生活的图形变得特别呢?其实不一定要加入其他元素,有一个很常用的方法是将原本不规则的图形几何化,比如把动物图形设计成圆形或方形。

或者用几何图形把某个元素表现出来,比如用几何图形设计英文字母就很常见。

这个方法的关键是要使图形几何化以后,仍能保持着原图形的识别性,所以我们要根据原图形本身的特点,来反复尝试看它适合转化成哪种几何图形。

1. 实例:圆形的「购」字设计

比如说「购」字,如果把它设计成矩形会很容易,但会缺少特点,因为它本身的外形就很接近矩形,所以我打算把它设计成圆形,能不能行得通呢?我们可以先在草图上试一试。

从草图中可以看出,购字还是可以设计成圆形的,于是我用比较规范的手法把它在 Ai 里画出来,这样就得到了一个圆形的「购」字,很特别也很有设计感,但仍不难看出这是一个「购」字。

置换

置换也是图形设计中常用的手法,即用元素 A 替换元素 B 中的某个局部从而得到图形 C,这要求元素 A 与元素 B 的某个局部在造型上有一定的相似性,这样图形 C 保留元素 B 的外形特征和识别性,这一方法在字体设计中也经常会用到。

需要注意的是,置换过来的元素 A 在设计风格和细节处理上,都要与元素 B 统一。

1. 实例:猪猪冰淇淋图形设计

球形冰淇淋的上半部分是球形的,而把猪设计成圆形的图形也很多,所以用猪置换冰淇淋球也是很简单、很自然的事情。

由于雪糕筒的风格是很简洁的描边风格,所以猪的设计风格也要与其统一。

接下来只要在猪的图形上加一个雪糕筒就可以了,调整一下二者的比例关系,统一线条粗细,一个猪猪冰淇淋图形就设计好了。

总结

图形设计的方法还有很多,大家可以通过看大量的作品来自行总结,不过,最重要的不是知道这些方法,而是懂得如何通过正确地使用它们设计出优秀的图形。牢记设计的基本原则,多观察生活中的事物,寻找不同造型的特点,并多去尝试把它们联系起来,或者是把他们用另外一种方式表现出来,长此以往,你对图形设计的感觉一定会越来越强。

酷炫的 FUI 图形设计

前端达人

作者通过以进度条的设计深入浅出的讲解关于FUI的设计思路。虽然FUI设计看起来很复杂,只要找准规律,从一些作品中总结分析细节,再运用到我们的设计中。想要了解的小伙伴可以尝试一下。

前言

看到上期小伙伴想了解一下 FUI 的设计教程,所以这次再次和大家聊一下关于 FUI 的设计风格,我们以“进度条”的设计教程为例,深入浅出的聊一下关于 FUI 的设计思路,因为主要设计思路的延展,所以不会出现具体的数据参数,小伙伴们要谅解啊。

目录

1.风格介绍

2.设计思路

3.总结

1.风格介绍

关于 FUI 的定义,阅读过我上一篇文章的小伙伴可能对 FUI 的定义有了一个较为清晰的定义,即 FUI 是:虚构的、未来的、幻想的用户界面。

1.png



我们仔细阅读关键词:“虚构的、未来的、幻想的。”从对 FUI 关键词上我们进行粗略的分析可以得出这么一条简单的结论:FUI 的设计不依据现实为基础的界面设计,为设计师留有巨大的想象空间。所以朋友们,请把脑洞开大一点吧,不受到当前的技术和硬件载体的制约,FUI 本身就是一种创新发明。

2.png




接下来我会向大家简单介绍一下 FUI 主要的两大设计风格:军事风格和机甲风格(也可以叫做机械风格)。 


1.军事风格

军事风格的特点在于:“直接明了”。因为在残酷的战争中时间就是生命,士兵必须保证“快速、准确、直接”才能保证战斗的胜利,所以会尽量避免与操作业务无关的。你也可以理解为当下最前沿的的设计理念“less is more。”例如下图,在界面设计中几乎都是利用简单的几何设计语言完成。

3.png




军事风格成为 FUI 的主流设计形式有着必然的原因。首先简单的从我们熟知的影视作品中来讲,在诸多科幻动作为主的故事题材的影视作品中,正义的一方都有军队的支持,其中不可避免的会出现的许多设备的界面;再则随着科技的发展,许多高科技都会用运用到军事设备的研发上,精密的结构线和反复数据让我们觉得其中的科技含量很高。


4.png




2.机甲风格

机甲风格相对于军事风格的最大特点就是:“具有一定的装饰图形元素,或多或少。”机甲风格最大的特点便是具有机械或者机甲风格的装饰元素,其中多为异形元素。其灵感来源于工业设计,从机械和机甲的工业设计语言中提取图形元素,在运用到界面设计上。如下图,异形的机甲风格让机器人的头部设计显得更加统一,如果换成当前流行的扁平化设计,可能就显得有点奇怪了。

5.png

机甲风格的发展归功于科幻题材故事的发展,为人们打开脑洞,畅想更多的可能性。在设计上激发了 FUI 的诞生,无论是赛博朋克、废土题材、还是漫威、DC宇宙中的科幻影视作品中我们都能看到机甲风格的界面设计。

6.png



2.设计思路

设计样式 – 军事风格

我们从以上的设计风格中抓去我们需要的关键词进行示例设计,首先我们看军事风格的关键词是“直接明了、快速、准确、直接,”我们转换成我们平时的设计语言就是:“极简风格,”这样是不是更好理解了。例如图例中,页面整体十分统计,利用简洁几何语言进行设计。

7.png




接下来我们做一个简单的军事风格的进度条:第一步,找参考!!!这一步很重要,很多同学都很容易就忽视这一点,一心一意的闭门造车,绝不借鉴学习其它优秀作品。这里向大家推荐 HUDS + GUIS 设计公司,这里有我们许多我们耳熟能详的影视作品中的 FUI 设计。

第二步,临摹,临摹可以说是学习他人技巧的最快方式,从中我们可以学习到许多设计中的细节,日后我们可以运用到自己的设计当中。我借鉴临摹了下面的进度条样式。


8.png



第三部,修改细节,举一反三。临摹就一定是是抄袭么?当然不是!创意设计,是把再简单不过的东西或想法不断延伸给予的另一种表现方式(百度百科),所以我们可以通过对设计组件内部进行重新组合或者修改其中的细节参数来达到自己在设计的目的。通过总结分析,我选用了最简单直白的结合图形作为设计元素进行设计,如下图:

9.png


我们可以放入界面当中感受一下视觉效果:

10.png



设计样式 – 机甲风格

我们再来进阶一下,设计一个机甲元素的的进度条。

机甲风格看似装饰图形复杂,设计难度复杂,但其实我们只需要掌握好 – “提炼元素”这项技能就能完美应对机甲风格的设计。

我们再回顾对创意设计的定义:是把再简单不过的东西或想法不断延伸给予的另一种表现方式。这里我们可以理解为将机甲元素进行提炼总结,延伸到弹框设计当中。例如下图,漂亮的小姐姐一秒钟变机械美女,就是通过对机械元素延展到模特身上。

11.png12.png13.png

第一步,照一张你喜欢的不错的参考,这里你可以找成熟的界面设计作品,也可以找一张不错的关于机甲风格的参考,以便于自己进行元素提取。这里我们以大家熟悉的高达为例:

14.png



第二部就是元素组合,我们需要提取了我们可能需要的元素,就像我们设计时面对自己手机素材一样,这个时候我们不要急于立马去设计,要仔细思考其设计形式,元素的位置安排。我们还是以以高达为例,途中我圈出了我可能用到的图形元素。


15.png



我们从中提取我们需要的图形,如下图:


16.png

最后我们我们需要仔细思考将图形进行组合,多尝试几次他们的组合方式。这里我对提取的元素进行了二次加工,将图形一和图形四进行了结合,打破固有的组合规律,让图形看起来更加生动。

17.png

最后我们可以放入界面当中感受一下视觉效果:

18.png



3.总结

FUI 的设计看起来复杂,难以下手,但其实也是有规律可循,我们可以从作品中理性的去分析其中的设计细节,提炼总结,最终再落实到实际的设计作品当中。当然最好你能先了解一下它的设计理念以及发展,就像 FUI 是“虚构的、未来的、幻想的界面设计”一样。

---来自姜正


转载自简书

作者:极创设计

链接:https://www.jianshu.com/p/77665c771153

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服


字体设计的细节&形式感

用心设计



明明想法思路都对了,为什么最后呈现出的效果却...略显遗憾呢?字习时间的活动到七十多期了,其中发现很多作品想法思路是正确的,有些还很有意思,但整体视觉效果确一般,那为什么所想和所做会有如此差距?

所以有了本期要和大家聊的主题:字体设计的细节和形式感。本篇将会通过一些实例带大家认识字体细节和形式感,所用大部分实例选自我课堂中的现场修改,时间短暂难免有瑕疵,望理解。

字体设计的细节&形式感

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档