百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

PPT里那些复杂的箭头,都是怎么做的?

myzbx 2025-04-26 19:40 7 浏览

我先把话放在这里,PPT里排版递进关系的内容时,你100%会用到箭头素材

只不过你平时用的箭头可能都是长这样的:


而我们这些心机设计师却会用这样的箭头素材:


这下知道为什么我经常把“PPT颜值不够,素材来凑”挂在嘴边了吧?

那现在问题来了,这些箭头都是咋做的?

文末给你打包了100页高质量工作型PPT案例源文件,读到最后即可领取。


▎下载或使用现成的箭头素材

1)登录freepik.com下载


你平常在我这见到的一些特殊箭头素材,其实大部分都是我直接在freepik下载的:


登录以后搜索“箭头/arrow”,你就能看到各种五花八门的箭头素材:


注意,搜的时候你得勾选中【SVG】格式,因为只有这种格式的素材,才能直接放进PPT里任意编辑。


不过,WPS以及较低版本的office暂不支持以上格式的素材。

不慌,我兜里还有七八个锦囊没用呢。


2)使用PPT自带的形状

如果你版本较低或要求不高,其实PPT形状库里自带的形状就很够用了。

比如,这几种箭头素材,每种都很有质感,你用PPT就能做出来。


o 为箭头或圆角矩形设置渐变色

插入一个箭头或圆角矩形,分别为它们设置渐变色,就能营造出一股趋势感:


复制多几个这种形状横向分布,内容间的递进关系一目了然:


o 矩形+三角形=单边箭头形状

PPT里最常见的单边箭头素材,其实用一个细长的矩形,跟一个三角形就能拼接出来:


我们一般会用这种箭头串联起多个模块,体现出内容的整体感:


o 直线+弧线=弯曲线型箭头

一根直线再加一根或两根弧形线条,你就能拼出这种弯曲的线型箭头:


这种线型箭头一样可以用来串联起多个模块:


此外,一些复杂的递进关系图,这种用线条拼接的弧形箭头甚至是不可替代的:


o 多个形状或线条叠加=趋势型箭头

插入多个箭头形状或圆角矩形,甚至是多根线条,为它们设置渐变色色,你就能拼接出一个新的箭头符号:


如果你问我这种“符号”比起普通的箭头有何优势,那我只能现场给你编一个说法了:它看着更复杂,显得你技术很吊


OK,前面介绍的都是有形的箭头形状,现在我们再来看多一种“无形”的,也就是镂空的箭头效果


▎手动制作递进关系图

啥叫镂空?你先看一下这几个循环图,


如果你觉得这些图表是用几个圆形箭头拼出来的,那你做的时候就会很吃力了:


我教你另一种思路:看看这些箭头的衔接处,有没有发现这其实就是一个镂空的箭头形状?


而凡是有规律的形状,都可以用【合并形状/布尔运算】功能来做


1)燕尾正圆环

在一个圆环形状上面放几个小箭头形状:


点击【形状格式】-【合并形状】-【拆分】:


你会看到整个圆环都被拆得零零散散的(下图左侧),此时你只需删掉那些“边角料”形状,就能得到四个圆形箭头了(下图右侧)


当然,如果你会用【OKpuls插件】的话,这种圆环做起来其实更简单。

感兴趣的木友待会儿可以点击上方蓝字查看。


2)燕尾椭圆环

我们再来个进阶的版本,用椭圆环来做循环图:


先插入一大一小两个圆角矩形,二者重叠:


继续点击【合并形状】-【拆分】,你就能得到一个镂空的椭圆环了:


当然,如果你会用【英豪插件】的话,你也可以省去以上步骤。

直接插入一个圆角矩形,设置为【无填充】,并为其设置较粗的线条


点击【英豪插件】-【线条拓展】,你就能把上面那根粗线条变成形状了:


接着,继续在形状上面放几个小箭头:


【拆分】一下,你就得到了几段能构成一个燕尾椭圆环的圆形箭头了了:


▎总结

有没有发现这篇文章看似是在讲箭头素材,但实际上却融合了一堆系统的小知识?


你瞧,这就是我经常说“零碎的知识不是知识,系统的才是”的原因。



想要100页高质量工作型PPT案例源文件,你可以关注后:

相关推荐

以文本的方式绘制简单的SVG流程图——flowchart.js

介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...

全国首套构网型SVG在木垒投运

中新网新疆新闻1月5日电(翟文辉)12月29日,全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网,本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...

Popmotion – 小巧,灵活的 JS 运动引擎

Popmotion是一个只有12KB的JavaScript运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...

零基础教你学前端——43、初识SVG

解决网站图标问题的最佳方案——SVG!SVG是一种基于XML语法的图像格式,英文全称是:ScalableVectorGraphics,即可缩放矢量图,是W3C的一项建议。我们用手机拍摄...

2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF

2.3文件格式全解:PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则,决定了:-信息保留程度(图层/透明度/动画)-压缩方式与画质损失-跨平台兼容性-...

vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!

前言:Vite6.3.2来了!2025年4月18日,Vite团队正式发布了v6.3.2版本!虽然是一个小版本更新,但修复了多个关键问题,并带来了性能优化和稳定性提升,让开发体验更丝滑!如果你还...

一篇文章带你了解SVG 蒙版(Mask)

SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析:本示例使用ID=mask1定义...

SVG实现的流程图绘制

一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路...

解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享

前言当我们访问网站时,如果访问到不存在的路径时,会出现404错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...

交互设计师做好动画后,提交给开发的文档有哪些?

谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...

Motion for Vue:为Vue量身定制的强大动画库

在前端开发中,动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库,但真正能做到高性能、易用且功能丰富的并不多。今天,我们要介绍的是MotionforVue(motion-v),...

Web开发人员的福音!8个实用的SVG工具

SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...

一键画波浪线、一键多图片调色?这3个网站好玩到停不下来

作为一个经常收集网站的PPT设计师,无意中发现了一些超级有趣的网站。只要你动手能力足够强,就一定会利用它做出创意作品。不说废话,直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...

vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!

Vite6.2.5更新公告2025年4月3日,Vite团队正式发布了Vite6.2.5版本!此次更新虽然是一个小版本迭代,但修复了一个关键问题,涉及SVG文件路径检查,对前端开发者尤...

DrawSVG – SVG 路径动画 jQuery 插件

jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...