IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资
      当前位置:
      首页IT问答正文

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

      • 发布时间:
        2022-11-25
      • 版权所有:
        云和教育
      • 分享:

      拟物化图标基本上使用生活中原有的物象来反映产品的功能,同时图标的内部加入更多的写实细节,比如色彩、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

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