相关推荐
您可能对下面课程感兴趣
Figma之UIUX项目交互教程

58小节已有3472人学过

UI设计之Figma系列教程

120小节已有22775人学过

Figma如何裁剪图片 Figma怎么做遮罩
发布时间:2025-01-16 11:07 [ 我要自学网原创 ] 发布人: 快乐小女 阅读: 10752

品牌型号:联想GeekPro 2020

系统:Windows 10 64位专业版

软件版本:Figma入门版


Figma提供了高质量的设计与交互功能,能实现实时的团队协作编辑,让产品的设计变得更简单高效。Figma不仅拥有专业的矢量图形设计功能,还能导入像素图像作为设计元素,让设计师能更好地发挥创造力,设计更多样化的产品。接下来,本文给大家介绍Figma如何裁剪图片,Figma怎么做遮罩的相关内容。感兴趣的小伙伴不容错过。


一、Figma如何裁剪图片

作为一款优秀的矢量图形设计软件,Figma既提供了丰富的矢量图形设计功能,还提供实用的图像编辑功能,可进行图像的裁剪、旋转、后期调整等操作,以设计更具多样性的产品。接下来,一起来看看Figma如何裁剪图片。


首先,如图1所示,展开底部的插入图形菜单,选择插入图片。

1:插入图片


插入图片后,选中图片作为当前编辑对象,如图2所示,点击右侧设计面板中的“裁剪”按钮,打开裁剪功能面板。

2:裁剪功能


打开裁剪功能后,如图3所示,图片中会出现一个裁剪框,调整裁剪框的大小、位置,即可将图片裁剪成所需的尺寸大小。除了裁剪图片的功能外,功能面板中还提供了曝光、对比度、饱和度、白平衡等后期增强参数的调整功能。

3:裁剪参数


在调整参数过程中,裁剪框内的图像效果会同步变化。比如图4所示,将图像的对比度、饱和度、阴影等参数进行调整,让图像的色调更显深沉。

4:调整参数


完成图像的裁剪后,关闭Figma的裁剪功能面板,即可完成图像的剪裁。如需再次调整图像的裁剪范围,只需重新打开Figma的裁剪功能面板,即可恢复图像并再次调整。

5:完成裁剪


二、Figma怎么做遮罩

遮罩是一种可遮挡部分编辑对象的功能,常用于控制编辑对象的显示范围。Figma可通过填充以及设为蒙版两种方法制作遮罩效果。


1.填充法

填充法,指的是Figma可利用填充图形的功能,实现遮罩效果的方法。具体的操作是,如图6所示,先在设计文件中绘制一个圆形,展开Figma底部的插入图形工具,选择椭圆形工具,即可绘制圆形图形。

6:绘制圆形


完成圆形的绘制后,如图7所示,选中圆形对象,在右侧设计面板中,点击填充功能中的“图片”选项。然后在展开的填充面板中,选择“图片”选项卡,并点击下方的“从电脑上传”按钮。

7:填充图片


选择合适的图片上传后,如图8所示,圆形图形会作为图片的遮罩遮挡部分图像,以构造出圆形图片的效果。

8:遮罩效果


2.设为蒙版法

设为蒙版法,是利用Figma的剪贴蒙版功能,将图形设置为遮罩使用。具体的操作是,如图9所示,先在设计面板绘制一个圆形,并导入一张图片。无论是绘制图形,还是导入图片,均可在底部的插入图形工具中进行相关的操作。

9:绘制图形与导入图片


完成以上操作后,如图10所示,Figma左侧面板会自动新增图片与圆形图形图层。右击圆形图形图层,在弹出的右键快捷菜单中,选择“设为蒙版”功能,将圆形设置为剪贴蒙版。

10:将圆形设为蒙版


将圆形图形设置为蒙版后,如图11所示,圆形图形所在的图层会新增一个蒙版组,将上方的图片图层也移动到蒙版组内,并保持图片图层在圆形图层上方。

11:移动图层


完成以上操作后,如图12所示,圆形遮罩内的图像会显示出来,圆形遮罩外的图像会被遮挡。

12:遮罩效果


三、小结

以上就是关于Figma如何裁剪图片,Figma怎么做遮罩的相关内容。Figma可通过设计面板的裁剪功能,轻松裁剪图片,并调整图像的后期增强效果,也可通过图形的填充以及设为剪贴蒙版的功能,制作图形的遮罩效果,以控制图像的局部显示范围,让产品设计更具变化性。

Figma之UIUX项目交互教程
我要自学网商城 ¥40 元
进入购买
文章评论
0 条评论 按热度排序 按时间排序 /350
遵守中华人民共和国的各项道德法规,
承担因您的行为而导致的法律责任,
本站有权保留或删除有争议评论。
参与本评论即表明您已经阅读并接受
上述条款。
V
特惠充值
联系客服
APP下载
官方微信
返回顶部
相关推荐
您可能对下面课程感兴趣
Figma之UIUX项目交互教程

58小节已有3472人学过

UI设计之Figma系列教程

120小节已有22775人学过

分类选择:
电脑办公 平面设计 室内设计 室外设计 机械设计 工业自动化 影视动画 程序开发 网页设计 会计课程 兴趣成长 AIGC