集团官网
  • 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资

如何用Sketch简单地做一款拟物图标

编辑:云和数据 日期:2022-11-25 16:32

拟物化图标基本上使用生活中原有的物象来反映产品的功能,同时图标的内部加入更多的写实细节,比如色彩、3D效果、阴影、透视效果,甚至一些简单的物理效果,使得用户认知时一目了然,视觉刺激强烈,大大提高辨识程度。

今天小编就带着大家一起学习如何使用Sketch软件来绘制拟物图标,打开软件一起操练起来吧!

Step1:创建画板+图标背景

1. 快捷键A,创建画布400*300,背景颜色为渐变(#82D7FF—# 3D8DFF)。

2. 快捷键U,绘制一个152*152白色圆角矩形,圆角为32。

1.png

Step2:制作图标背景质感+图标阴影

1. 添加三层阴影,这样会显得外阴影更加自然,关于这三层阴影的X,Y,模糊度,透明度的数值分别为(0,2,2,24%)、(0,4,14,%24)、(0,10,16,34%)。

2. 添加内阴影数值为(0,-5,6,%90),色值为87B8FF。

2.png

Step3:制作图标内部细节

3.png

1. 快捷键O,创建一个半径128的圆型,填充渐变颜色,具体色值下图可见。

2. 复制当前圆型,改变其半径为116, 与底层圆形进行减去顶层。

3. 内部填充其半径为124的圆形,颜色为#078EFF。

4. 制作其圆形阴影,创建一个半径144的原型,颜色填充渐变色(# FFFFFF—#80A8FF),并且进行高斯模糊,模糊度为3。

Step4:制作图标顶部细节

4.png

1. 快捷键O,创建一个半径58的内部圆型,内部填充为,添加两层内阴影。

5.png

2. 在内部添加一个直径为48的圆形,颜色填充为渐变。

3. 添加内部圆形的阴影,其数值参考其下图。

6.png

一款简单的拟物图标做好啦,是不是超简单!

相关内容

常见的网页ui界面布局有哪些? 在设计网页时,需要根据不同的网站性质和页面内容选择合适的布局形式,下面介绍一些常见的网页布局方式。1. “国”字型布局“国”字型布局是网页上使用最多的一种结构类型,是综合性网站页面中常用的版式。通常上方为引导栏、header, 导航栏,中间为内容区,最底端为版权信息。将内容区分为左、中、右三大... 郑州学习测试开发如何选择培训班? 随着互联网的快速发展,如今对于测试开发岗位的需求量都有明显的增长,现在选择选择学习测试开发的人也变得越来越多,不同的培训学校有着不同的优势。那么郑州学习测试开发如何选择培训班? 线上、线下了解机构口碑线上在网上查看网友对该机构的评价,需注意的是要客观看待,因为网上的往往真假参半;其次... Maven是怎么样构建Spring Boot项目的? 准备好项目运行所需的环境后,就可以使用IDEA开发工具搭建一个Spring Boot入门程序了。我们既可以使用Maven方式构建项目,也可以使用Spring Initializr快捷方式构建项目。这里先介绍如何使用Maven方式构建Spring Boot项目,具体步骤如下。1.初始化IDEA配... 郑州Java开发培训学费大约是多少? 伴随互联网行业的发展,现如今的企业对于Java开发技术人才需求较高,很多零基础的也想要从事相关的Java开发岗位,这时候需要报班系统的学习,费用的问题备受关注,那郑州Java开发培训学费大约是多少? 虽然不同的培训机构费用略有差别,但总的来说,线下培训的费用都在一万五到两万之间,线上... Beta测试和Alpha测试是什么?区别在哪儿? 大型通用软件,在正式发布前,通常需要执行 Alpha 和 Beta 测试,目的是从实际终端用户的使用角度,对软件的功能和性能进行测试,以发现可能只有最终用户才能发现的错误。Alpha 测试是由一个用户在开发环境下进行的测试,也可以是公司内部的用户在模拟实际操作环境下进行的受控测试,Alpha ... 相比APP、H5设计有哪些优点和缺点? 随着移动互联网的快速发展,传统的营销模式显然已经不再符合当下时代的需求。当下,越来越多的企业将品牌营销所需费用的大头投入到移动互联网方面。从中,我们也可以看出,移动营销已然大势所趋。那为什么用H5来执行线上的营销方案呢?要了解这一点我么首先来了解一下H5的特点。美观性:页面设计更加的美观,有声...
×