2018,很多APP的logo渐变了 -- 渐变色教程

7,293 阅读4分钟

作者:不洗碗工作室 Ajiajiajia葭

转载请标明出处

作者联系方式:549044363@qq.com

参考文章:http://www.uisdc.com/use-sketch-design-switch-1

在今天之前的每一天,我对渐变色是怀有偏见的。我认为它很俗,扁平化才是王道。然而今天,日常打开比较喜欢的一个app--图虫,看到它的logo渐变了,内心有点莫名的失落,但我转念一想,iPhoneX走的也是渐变趋势,应该是我孤陋寡闻了,确实,2018 渐变 悄然而至。

渐变色是用两个或多个不同的颜色画成一个元素,这些颜色之间淡入或淡出,从明到暗,或由深转浅,以各种形式的过渡变化,色彩在设计表现中起到灰常灰常灰常灰常灰常重要的作用,“渐变色”的运用正在逐渐的被各种领域在使用,包括 UI界面、品牌logo、海报、插画、字体设计等等,特别是iphone X 的恢弘渐变界面简直引领色彩上的潮流,先来看一组图片,感受一下渐变带来的活力。

  • iphone X 的渐变开屏系列

  • 大牛们利用渐变的成功设计

  • 陌陌的渐变色 Logo --年轻而富有活力

为什么要使用渐变呢?

  • 醒目,可以让你第一时间去记住它,利于促进品牌的推广
  • 独一无二,让品牌打造出自己唯一的标识
  • 情绪的传递,渐变色不仅仅是单一的情绪表达,而是一种恢弘情绪的倾泻
  • 它来源于生活而高于生活(详情见下👇)

为什么说渐变色来源于生活而高于生活呢? 这几张图告诉你

小时候就很喜欢泼墨山水画,爱看爱拍也爱画,现在想想,就是将现实中渐变的美景渲染到渐变的设计稿中,比如这位设计师画的:

说到底,自己能够弄出来才是硬道理,好的,干货来了👇

这是根据我借鉴的那片文章步骤弄出的渐变,跟着步骤大概的把流程熟悉了一遍,动手做几个就会得心应手咯

啦啦啦啦啦....青青草原来一曲

01 新建画板(快捷键 -- A )

02 设置彩色背景

  • 为画板上色

  • 在画板上画一个矩形,使其与画板完全匹配。

  • 解除边框(borders)颜色,然后点击填充自己想要的颜色

  • 注意填充面板右上角的“+” 按钮,点击它。如你所见,在此前的图层之上添加新的填充图层。选中渐变面板请选中它,在画板上从左上角到右下角画渐变。

  • 确认你的形状的左上角的颜色是白色(#ffffff)、右下角是黑色(#000000)。点击渐变色选择器中的黑色,设置它的透明度为0。渐变色的透明度的调整可以通过滑动取色器右下方的滑块或者在RGB右侧的“A”字母输入框输入。选择白色,设置透明度为60

  • 记得设置填充为“overlay”

  • 然后再次点击添加按钮。这次选择第三个标签以得到径向渐变。调整渐变为从左上角到右下角

  • 确认左上角颜色为白色,右下角颜色为黑色。保证他们的透明度都为50%。同样设置这个填充为“overlay”。一个简单的渐变雏形显现

如果打算新建logo图标,那就继续跟我走吧😁(用我之前的青青草原来示例)

  • 用iOS图标模版创建图标的外形,复制粘贴来我们的画板上

  • 使用右侧边栏顶部的排列工具,将图标置于背景的中间。
    • 点击“align horizontally” 按钮(水平居中第四个图标)和 “align vertically” 按钮(垂直居中,第七个图标)
    • 修改色彩为#ffffff。点击“+”按钮添加第二个平色填充

  • 键盘上点击“O” 选择椭圆形状工具。
    • 可以右侧边栏设置圆的尺寸
    • 使用的排列工具将圆形完美的居中
    • 记得去掉边框

  • 将“Oval”图层的填充样式设为“Linear Gradient”,调整角度为对角线。设置左上角、右下角的颜色

  • 运用椭圆工具画旋钮。画一个58 * 58的圆,然后将它与大圆居中对齐

  • 在该图层上添加垂直线性渐变。设置顶部、底部的颜色

  • 如图所示,基本完成

这只是过了一遍简单的流程,具体的创作发挥空间留给你们👍。 比如下面这个设计师的创作,我觉得很赞,很大程度上改变了之前我对渐变色的偏见。话不多说,我来放图

末尾小记

本来想着等到我需要用的时候再学吧,但 当我需要用的时候却又懒得去学,往往选择将就,所以为了整治自己的惰性,我选择了现在就学。