美文网首页
UI界面设计:如何制作轻质感3D图标

UI界面设计:如何制作轻质感3D图标

作者: 昕泽雨 | 来源:发表于2020-04-20 11:19 被阅读0次

在我们的UI界面设计中,图标设计是很重要的一个组成部分,今天我们就来讲一讲关于图标设计的知识。

今天我们就来分享下上图图标制作的方法和思路。

1.软件

以ps为主,c4d为辅。

2.造型

基本就是主形象加个厚度,可以采用平行视图的透视关系,也就是2.5d的设计风格,经常用到的辅助线如下:

但我们这次没有严格按照这个辅助线来走,但是方向还是会尽量保持统一,不然会很乱。

如果有些透视关系找不准,可以用c4d简单的建个模,看下规律,然后再用ps钢笔画出每个面,例如:

这一步主要就是看看每个面的交错关系,然后找到自己想要的角度画出来。

当然,如果你c4d渲染特别6,直接渲染然后ps微调即可,如果不熟练的话,可以用ps钢笔画,然后再加颜色和质感。本次教程也主要是用ps画。

3.色彩与质感

最开始在c4d里面渲染出来的效果是这样的:

由于材质和光都没调高,所以导致颜色有点脏且不透气:

颜色脏主要是因为本身固有色就很脏很重,而不够透气主要原因就在于高光、暗部、环境色这些东西没有用好,或者丢失了一些细节。

首先填充固有色,由于风格是轻质感,所以颜色不会用的太重,在色板上的区域都集中在这一块:

填充后效果如下:

只要颜色你能保证足够轻量,填充固有色后,大体效果就不会太差。

接下来为了让色彩更加透气,我们需要加些明暗关系,光源假设是左上方,那左上角就是亮部,右下角就是暗部,效果如下:

其实简单来说,就是以光源为出发点,每个面都拉一个由浅变深的渐变。

明暗渐变有了之后,就开始加环境光,我融入的环境光是白色偏蓝,这一步操作方式有很多,比如图层样式的内发光,我经常用的方法就是,把环境光的颜色画出来,然后进行羽化,然后置入固有色的图层中,效果如下:

最后一步就是加一些细节,比如转折出的高光:

有些金属材质的镜面反光等等:

这些都是点睛之笔,很重要。

这样,基本上一个图标也就差不多完成了。

4 细节

细节方面很重要的一步就是,暗部颜色千万不要用“禁区色”,比如下面这个铃铛暗部颜色用到了“禁区色”:

调整颜色区域:

效果如下:

这是让颜色通透很重要的一步,大家千万切记。

前期在摸索的时候,每个图标都有做很多个版本:

做多了,自然也就熟能生巧了,如果大家有兴趣,可以自己做做练习,

好了,以上就是本期教程啦,还等什么,练起来吧!

文末福利就是最近的设计学习资源啦,点击这里进入领取,希望对大家的学习有帮助!

相关文章

  • UI界面设计:如何制作轻质感3D图标

    在我们的UI界面设计中,图标设计是很重要的一个组成部分,今天我们就来讲一讲关于图标设计的知识。 今天我们就来分享下...

  • UI设计轻质感图标制作方法

  • ui设计师必须了解的图标分类

    ui设计师必须了解的图标分类。图标设计作为ui界面设计的重要组成部分,对于信息的传播具有至关重要的作用。那么一般情...

  • 2018-04-08

    GUI图形用户界面设计、AUI传统美术、WUI网页设计与布局、MUI移动设备图标、交互及界面设计的理论、规范和制作...

  • 今日图标临摹练习,PS制作充满质感的镶嵌云图标

    今日图标临摹练习,PS制作充满质感的镶嵌云图标,教程链接http://www.pdadians.com/inlai...

  • ui设计图标类型有哪几种?

    UI图标一种分为三种,这三种分别是:写实图标又称拟物化图标、微质感图标又称2.5d图标、扁平化图标又称2d图标。 ...

  • 什么是2.5D风格的ui设计?

    学习UI风格界面设计,你需要先知道UI图标设计的发展以及一些流行元素等,下面是三类UI设计发展以及特点: 一、首先...

  • UI界面设计方式

    UI界面设计方式 UI制作上逐渐分化为了三种: 使用代码手写UI及布局; 使用单个xib文件组织viewContr...

  • UI界面设计(二)

    续UI界面设计(一)所制作的基于物联网健康饮食APP的界面设计图 注:此次的界面设计来自于与团队合作所共同设计,若...

  • 图标设计五维自检法

    图标是界面设计中最重要的元素之一,也是我们 UI设计师必备的技能,日常工作中我们经常会接到含有图标设计、优化的需求...

网友评论

      本文标题:UI界面设计:如何制作轻质感3D图标

      本文链接:https://www.haomeiwen.com/subject/qelrihtx.html