找回密码
 注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

查看: 14036|回复: 24

[其他作品] 锐普首发|新拟态风格PPT模板,限时免费下载!

[复制链接]

普通卖家

2379

主题

4757

帖子

23万

锐币

积分
36403
rapidppt卖家认证 微竞赛 发表于 2020-2-27 19:27:42 | 显示全部楼层 |阅读模式
PPT作品
版本: 其它版本
各位好,今天继续和大家分享有关新拟态风格的知识。


在上一篇新拟态推文中介绍了其处理方式,大概有以下几点:
❶ 有且只有一个光源照射❷ 元素与背景对比度比较弱❸ 常常用于按钮组件和卡片❹ 按钮状态,视觉上凸出代表未选中,凹进去表示已选中状态
以上四点在之前的推文中介绍过,今天重点介绍第一点和第二点。


目 录 / Contents

1 | 有且只有一个光源照射2 | 元素与背景对比度比较弱2.1 | 色值分析2.2 | CSS代码分析2.3 | sketch源文件分析2.4 | 章节小结3 | 新拟态技法优化3.1 | 未选中状态制作步骤3.2 | 选中状态制作步骤3.3 | 制作心得3.3.1 | 巧用CSS代码自动生成配色3.3.2 | 在暗色模式下不需要调整阴影透明度3.3.3 | 放大,遮住“漏光”4 | 新拟态PPT模板练习4.1 | 新拟态PPT模板免费获取方式参考文献


1 | 有且只有一个光源照射

1.jpg

| 图片源自Dribble  @MazePixel
通过观察不难发现,光源定在左上角,从左上向右下照射。左上角亮色投影,右下角深色投影。

所以,越靠近光源的部分,越亮,远离光源的越暗。

2.gif



2 | 元素与背景对比度比较弱

在上一篇推文的实操部分,高光和阴影投影我用的是纯白和纯黑,对比度太强,柔化边缘参数要设置很大才能让色彩过渡更柔和。
经过色值与CSS代码分析,我发现全部使用纯白与纯黑做投影并不好。

2.1 | 色值分析

以上次推文中的这三张案例为例进行色值分析,最终发现,无论在亮色模式下还是在暗色模式下,对比度都是很低的。

3.jpg 4.jpg 5.jpg

2.2 | CSS代码分析



将以上三个案例的背景色放到https://neumorphism.io,根据CSS代码分析默认状态下的色值。

6.jpg

完整版CSS代码:

7.webp.jpg

| 代码源自孟坤博客  @mengkun

8.png



| 代码运行后的效果

根据代码提取色值(外阴影)

9.png

根据代码提取色值(内阴影)


10.png


2.3 | sketch源文件分析


11.jpg


| 源文件源自站酷  @Frannnk

2.4 | 章节小结

12.jpg


通过色值与CSS代码分析,确实了上一篇推文中的各种结论。其中要再强调一下新拟态风格元素的组成:1个形状+2个投影。
其中,形状与背景色一致,当然也可以添加渐变。投影分为内投影与外投影,凹进去(选中状态)多使用内投影。凸出(未选中)多使用外投影。
所以在PPT中用柔化边缘的方法添加两个投影的方法是正确的。只需要注意不要使用纯黑或纯白,选取与背景色对比弱的色值即可。


3 | 新拟态技法优化


13.png


通过CSS代码分析,投影大都是呈45°位移,而且受光与背光投影与顶层图形呈中心对称。

在上一篇推文中,我们是通过柔化边缘画出两个投影,然后通过调整位置实现新拟态效果。这种方法有两个缺点:
❶ 形状转图片后不便于二次修改❷ 很难手动调整到完全中心对称

基于这两个缺点,我们来继续优化。新方法:使用阴影。

14.gif


3.1 | 未选中状态制作步骤

❶ 插入一个与背景颜色一致的圆角矩形,然后复制两份,重合。

❷ 为方便选取元素,在「选择窗格」中对三个矩形进行重命名。为方便识别,我将受光和背光部分用箭头表示。


16.png

❸ 设置形状格式,添加「阴影」效果。

17.jpg 18.jpg


3.2 | 选中状态制作步骤

19.gif


通过对源文件拆解,可以发现选中状态下的按钮需要用内阴影制作。
20.png


在PowerPoint软件中虽然也有内阴影,但两元素不能重合,所以不能在PPT中使用内阴影制作。

21.gif


再找办法——障眼法。在PPT中只能做出一道内阴影,另一道阴影我们可以通过「渐变」来弥补。效果如下图所示:


22.jpg

❶ 添加内阴影

23.png


注:以上参数不是唯一,需要根据具体形状大小进行调整。

一定要设置距离,因为如果距离为0,四周就会有阴影,影响第二个内阴影的制作。

24.gif

❷ 添加阴影

25.png

经验一每个滑块的颜色与背景色一致
经验二第一个滑块(高光颜色),亮度提高10%~20%。


26.png


经验三第二个滑块(阴影颜色),由于高光投影面积要超过对角线,所以滑块位置建议放在60%~70%之间。
27.gif

这里要特别感谢《好PPT 坏PPT》读者群一位热爱钻研的伙伴@河北小帅帮我验证了以上几点经验。

28.jpg 29.jpg


| PPT模仿案例  @河北小帅

❸ 添加渐变线

30.png


注:以上参数不是唯一,需要根据具体形状大小进行调整。
经验两个滑块颜色与背景色一致。第一个滑块提高亮度(5%~15%),第二个滑块降低亮度(-5%~-10%)。
❹ 顺时针旋转180度
选中状态下的形状是一个有深度的圆角矩形,假如光源定在左上角不动。在地上看,左上角亮,右下角暗。从地下看,则相反。
做了一个粗糙的3D动画供大家理解。

31.gif


所以最后,为了让阴影符合现实规律,需要把形状顺时针旋转180°。

32.gif


当然,你也可以一开始就按照这样的正确顺序进行操作(具体操作顺序因人而异)。

3.3 | 制作心得



3.3.1 | 巧用CSS代码自动生成配色

https://neumorphism.io输入背景颜色,代码会自动计算出两个投影的色值。

33.png


将生成的色值复制粘贴到最上面的背景颜色框中,直接用PPT中的「取色器」取色即可。
3.3.2 | 在暗色模式下不需要调整阴影透明度

34.png

3.3.3 | 放大,遮住“漏光”

在暗色模式下会出现“漏光”现象,怎么办?
35.jpg

将最上层图形放大一圈,遮住漏光部分即可。

36.gif



4 | 新拟态PPT模板练习



PPT主题欧美商务总结汇报PPT模板
配色方案 37.webp.jpg
字体方案
思源黑体B\L\R
这里要特别感谢锐普首席设计师 @吴建 对模板细节的审核。成品如下所示:

《新拟态风格PPT模板》下载链接

https://pan.baidu.com/s/1dTSAhnPD6catPCPDsms8rA

提取码:xyqn



仅供个人学习使用,严禁商用!




注:本模板部分页面来自国外PPT模板(已购买版权)与网页设计灵感,仅供个人学习使用,任何人不得对外销售,若发现希望大家积极举报。




结论

标准的新拟态风格,其内投影或外投影为了增加质感,都会添加投影渐变,由于在PPT中图层不能叠加,所以这一点在PPT中是很难做出来的。

38.jpg


要制作更精致的新拟态风格素材,推荐使用专业的UI设计工具,比如当下比较受欢迎的Sketch软件。http://www.sketchcn.com 39.jpg


注:目前这款软件只有Mac版本,无Windows版本。

如果在Windows上打开.sketch格式文件,推荐使用Lunacy
https://icons8.com/lunacy

40.jpg


新拟态风格的使用场景和形状元素可以灵活变动,但需要保证光影的统一。以上数值只是一个参考,不能作为唯一标准。具体细节还是需要多练,多观察。


参考文献


01.《趋势 I 解析新拟态风格最全指南》https://www.zcool.com.cn/article/ZMTEwMjQ3Ng==.html
02.Neumorphism(新拟态)UI设计趋势吗?https://www.zcool.com.cn/article/ZMTA5ODAwNA==.html


新的一年,你的PPT也该升级一下啦,联系我,让你的PPT大变样!
41.gif


42.webp.jpg









点评

请看x.co/3339(网址) 肺炎各地的严重程度不断地升级,关注海外真实报道...... git.io/ghhhh (网址)  发表于 2020-5-26 19:55
锐普PPT-专注高端PPT设计! http://www.rapidppt.com
回复

使用道具 举报

普通卖家

2379

主题

4757

帖子

23万

锐币

积分
36403
 楼主| rapidppt卖家认证 微竞赛 发表于 2020-2-27 19:28:08 | 显示全部楼层
《新拟态风格PPT模板》下载链接

https://pan.baidu.com/s/1dTSAhnPD6catPCPDsms8rA
提取码:xyqn

仅供个人学习使用,严禁商用!

[发帖际遇]: 一个袋子砸在了 rapidppt 头上,rapidppt 赚了 10 元 锐币. 幸运榜 / 衰神榜
锐普PPT-专注高端PPT设计! http://www.rapidppt.com
回复 支持 反对

使用道具 举报

0

主题

9

帖子

207

锐币

积分
50
Tim3toNe 发表于 2020-2-29 12:07:13 | 显示全部楼层
感谢分享,第一次知道ppt可以这么做
[发帖际遇]: Tim3toNe在锐普PPT高手培训课堂认真听课,奖励 6 元 锐币. 幸运榜 / 衰神榜
回复 支持 反对

使用道具 举报

581

主题

2万

帖子

14万

锐币

锐普守护者

积分
109938

灌水精英勋章优秀会员勋章致富精英勋章优秀版主勋章守卫精英勋章智慧精英勋章2015奉献楷模勋章推广精英勋章

chinakui卖家认证 微竞赛 发表于 2020-3-3 09:30:08 | 显示全部楼层
这个风格在国外大火,期待在PPT领域也能有所表现
锐意进取,普及精品——中国专业PPT领跑者
回复 支持 反对

使用道具 举报

0

主题

14

帖子

485

锐币

积分
82
励铭 发表于 2020-3-3 21:24:50 | 显示全部楼层
厉害啊!!!!
回复

使用道具 举报

0

主题

4

帖子

182

锐币

积分
24
zhousenlin 发表于 2020-3-4 12:43:50 | 显示全部楼层
好东西值得分享
回复 支持 反对

使用道具 举报

1

主题

23

帖子

190

锐币

积分
144
西瓜太涼 发表于 2020-3-5 20:54:46 | 显示全部楼层
看来PPT已经尽力了
回复 支持 反对

使用道具 举报

0

主题

4

帖子

218

锐币

积分
21
谜一样的意识流 发表于 2020-3-6 17:26:44 | 显示全部楼层
这也太绝了!
回复 支持 反对

使用道具 举报

7

主题

24

帖子

812

锐币

积分
125
OneSurprise 发表于 2020-3-8 20:52:58 | 显示全部楼层
感谢分享
回复

使用道具 举报

0

主题

10

帖子

226

锐币

积分
53
张繁繁 发表于 2020-3-12 10:05:23 | 显示全部楼层
大佬新年快乐
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

展开
快速回复 返回顶部 返回列表
展开