恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
教程 | Adobe XD中如何制作新拟态?
0.0°
2020-07-13 原创文章 教程 举报 2539 36 18 3

Adobe XD中如何制作新拟态??(内附源文件)

  • 什么是新拟态


「新拟态」英文名Neumorphism,也有设计师称为 Soft Ui(软UI)。起因是源于2019年11月5日,来自乌克兰的设计师 Alexander Plyuto 在追波和ins上发布了下图的一张作品,作者说明信息:“让我们想象一下,如果在移动界面设计中,投影的形式发展的更好的话,那将来的界面将会是什么样的,这是我的愿景。”,一时间广受设计师追捧,“新拟态”风潮迅速风靡各大设计网站,简单来说就是一种类似浮雕的效果,介于扁平与投影之间,它是一种使用对象阴影的模糊、角度和强度来凸显出对象的样式,由于其柔和的阴影和新颖的外观,让设计看起来更加的逼真、未来、现代、有吸引力。

Dribbble-Alexander Plyuto的作品



      从以上作品中你可以察觉到“新拟态”风格只有一个光源,由背景、高光、阴影组成。在这三个基础组成上,你可以通过变颜色和阴影大小达到不同的效果。“新拟态”的设计风在一定程度上会激发设计师的创作灵感,为未来的设计趋势带来了更多新的不确定性。


新拟态一些基础的样式


如何用Adobe XD中如何制作新拟态?

我们上面已经说到“新拟态”风格只有一个光源,由背景、高光、阴影组成。下面将使用最简单的方法,用多个图层叠加完成。

两个相同的图形为本体,单独给两个图层添加相反方向的白色(亮色)和黑色(暗色)阴影。使两个本体重叠即可得到一个简单的新拟态圆角矩形。

是不是很简单?你可以尝试做出不同效果的“新拟态”风格,快去试试吧~!






你可能会遇到的问题

Adobe XD中没有内阴影效果,如何制作出内阴影?

在 Adobe XD 中只有阴影的选项,添加的阴影会只存在于外部,但是我们可以这样做:

  1. 新建一个比需要做内阴影范围更大的形状;

  2. 使用布尔运算减去内阴影的范围;

  3. 添加阴影将 X 偏移量和 Y 偏移量均设置为0,此时阴影在内外都存在,当然也可以根据需要设置其它的值;

  4. 最后使用一个跟需要做内阴影范围相同的形状做剪切蒙版即可得到内阴影的效果。



下面附有Adobe XD 源文件。

你也可以自己尝试做出不一样的效果哦!





Powered by Froala Editor

更新:2020-07-13

下载
收藏

36人已收藏

Arche_7

收集人间美好

  • 1

    作品

  • 1

    粉丝

  • 4

    关注

    猜你喜欢

      2020-07-13 原创文章 教程 举报 2539 36 18 3

      教程 | Adobe XD中如何制作新拟态?

      0.0°

      你确定要举报教程 | Adobe XD中如何制作新拟态?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年07月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      18
      36
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录