签到

07月20日
尚未签到

共有回帖数 0 个

    天河一号

    等级：
    本渐变系列教程包括上中下篇，上篇介绍了见渐变的基础概念和线性渐变的运用，中篇通过实战巩固上篇的知识，同时学习放射性渐变。今天下篇是渐变色的进阶教程，除了复习前两篇的基础外，还会学习角度渐变和金属渐变，整个教程循序渐进， 零基础也可以轻松学会。由于本教程是一个系列，没看上中篇的同学阅读时可能会吃力，所以建议先阅读以下两篇：基础复习/练习角度渐层变化 ( Angular Gradient )金属渐层变化本篇教学的完成目标如下图，本文范例全数使用Sketch3所制作。


    一、前言建议没有读过(上)，(中)篇教学，但是对于渐层还有一些模糊的伙伴，可以先利用(上)篇的教学来建立渐层应用的基本概念;理解线性渐层( Linear Gradient )、高彩度与低彩度的渐层运用。(中)篇的教学则会利用一些简单的实作练习来帮助您复习/领悟(上)篇里面提到的基础理论，同时介绍放射状渐层( Radial Gradient )的应用场景跟需要注意的一些实作细节。接下来的(下)篇，会结合前两篇的内容做出一些更进阶的应用，希望这一系列的分享能够帮助您在制作简报、UI设计或是印刷系列的设计，再不然就是各种好像很厉害(重点)的设计上面都能够有一些帮助。一、基础复习/练习首先我们就先来复习(上)篇里面所使用的基础渐层，同时进一步的搭配一些光影细节来做出一个常见的方形按钮吧(两种型态)。练习一里面使用的是最基本的深灰、灰、白的用色彼此搭配来复习常见的渐层应用，同样的概念其实可以轻易地套用到不同颜色的渐层上面来做出您自己的变化喔(见章节末端)。


    练习一、按钮
    Step 1
    设定工作区域的背景色为浅灰色(#E6E6E6)。拉出您的按钮形状(方形)后依照上亮(#E5E4E4)下暗(#C6C6C6)的渐层来做出基底雏形。
    Step 2
    为基底下方加上阴影(Shadow)来做出基本的立体感，阴影的强度(亮度)以及深度(x, y的位移数值)可以依照您所希望达到的立体感来进行调整，但…加太多会有点怪啊。
    Step 3
    利用内阴影(Inner shadow)于上方制作白色的反光边(很重要)，这条反光边是由于光在照射到凸起的立体时会聚光在接触点，再自然的于接触平面上由将光源发散出去产生上亮下暗的效果。


    Step 4加上边线(Border)来凸显按钮的边框部分，考虑到光源的关系，我们同样使用上浅(#B6B6B6)下深(#7F7F7F)的渐层来制作边框。(做到这里相信您应该已经发现很有按钮的雏形啰)Step 5除了原本的阴影之外，在这边我希望能够进一步地凸显阴影立体的效果，但!!如果把阴影直接加在原本的图层上面，阴影在配合模糊(Blur)的效果之后就会往四面八方发散(崩溃)，然后整个按钮的底部就会脏得乱七八糟，不信邪的话可以调整看看。所以在这边我把原本的基底稍微缩小并往下方移动一点(增加y轴的位置)，搭配(#5F5F5F)的颜色以及高斯模糊( Gaussian Blur )的效果，放置图层于基座图层的下方来制作阴影。Step 6加上一个好像很厉害的勾勾(#B3B3B3)。


    练习二、按下去的按钮Step 1设定工作区域的背景为浅灰色(#E6E6E6)，依照上暗(#B1B1B1)下亮(#DCDCDC)的渐层来做出凹陷的基底雏形。Step 2为基底下方加上白色的阴影(Shadow)来做出反光的效果，阴影的强度/深度/位移同样可以依照您所希望达到的立体感来进行调整。Step 3同样加上边线(Border)来凸显按钮的边框效果，在这边使用边线同时也可以加强一些按压的视觉感。由于光源的关系使用的是差异很少的上深 (#848484) 下浅 (#8C8C8C) 渐层，上方的颜色可以尽量调整到跟Step4加入的内阴影相同来让边线不会过于突兀。(注：相较于凸起的一般状态按钮，按压下去的按钮因为没有物品阻碍的关系，光能够直接照射到按钮基底下侧产生反光)


    Step 4
    做到Step 3，相信您应该会发现按压的感觉好像还不够明显?接下来的内阴影能够帮助改善这样的状况 →在基底的上方加上较强的内阴影(#666666)来凸显按钮下压的效果。
    Step 5
    加上一个好像很厉害的勾勾，因为是凹陷平面的关系在这边选择较深的底色(#949494)。
    Step 6
    帮勾勾加上一个内阴影(#363636，50%透明度)做出凹陷的效果，再加上一个普通的阴影(#FFFFFF，50%透明度)做出底部反光。成就达成!!


    Step 7同样的原理也可以运用在圆形、长方形或是各种圆角矩形上面，就让各位自行发挥啰，附上一些不同颜色的成品给大家参考。




    注：从刚踏入UI设计这个领域就开始 Follow 嫁给RD的UI设计师部落格的文章，然后每天都在持续等待新文章的发表 XD，真心推荐对于UI设计有兴趣的伙伴们花些时间阅读!!除此像上图的 icon 之外，角度渐层也可以被运用在制作一些UI 背景或是视觉海报上面 →


    就让我们先用上面这张案例来了解一下角度渐层是怎么一回事吧?
    角度渐层（ Angular Gradient）案例一：背景制作
    Step 1
    简单来在工作区域上拉出一个圆形，利用1/5 检色器的选色原则选取您想要的渐层颜色，在利用角度渐层填满圆形。底下这张图应该可以很清楚的了解到角度渐层是怎么一回事吧，简单说就是让渐层绕着您设定的图形转 xD。












    三、金属渐层在开始制作金属渐层之前，我们先来看一张金属材质的照片 →

    楼主 2016-09-29 11:34 回复

共有回帖数 0 个
  • 回 帖
  • 表情 图片 视频
  • 发表

登录直线网账号

Copyright © 2010~2015 直线网 版权所有,All Rights Reserved.沪ICP备10039589号 意见反馈 | 关于直线 | 版权声明 | 会员须知