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

58小节已有3462人学过

UI设计之Figma系列教程

120小节已有22750人学过

Figma如何把图片嵌入框内?Figam图片填充教程来了!
发布时间:2025-01-21 17:22 [ 我要自学网原创 ] 发布人: 快乐小女 阅读: 5437

在做PPT设计或是平面设计、UI设计的过程中,设计师经常要用到图片填充功能,就是将图片填充到形状各异的图形中。Figma是近年来非常热门的在线UI设计工具,但有些新入门的小伙伴还不清楚在Figma图片嵌入到框内怎么做。本篇文章,我们将向你分享最简单的Figma图片嵌入填充方法,赶快收藏起来吧!


1:Figma如何把图片嵌入框内


Figma图片嵌入框内的方法通常有两种:

方法一:通过顶部的「Use as Mask」将图片嵌入形状:

打开Figma后,使用形状工具随便绘制一个图形,这里我们以圆形为例。然后点击插入图片,直接将图片拖动至圆形中并同时选中,最后点击顶部菜单的「Use as Mask」按钮,图片就嵌入成功啦。



方法二:点击形状,然后选择嵌入填充方式为图片:

同样的,打开Figma后,使用形状工具随便绘制一个图形,如三角形。然后在右侧的图形嵌入填充中选择「Image」Figma图片嵌入填充,上传需要嵌入的图片即可。


2:Figma基础图形与填充模式

首先,在Figma图片嵌入填充之前,我们需要先了解Figma汉化版Pixso有哪些嵌入填充模式以及自带哪些基础图形。作为一款专业的UI设计工具,图片嵌入填充是其中非常基础的功能之一,Figma、Photoshop、Pixso等设计工具都有这个功能。考虑到Figma全英文的操作界面以及软件的稳定性较弱,在此我们以被称为“Figma汉化版”的Pixso为例,谈谈更多关于Figma图片嵌入填充的方法。


可以看到,Figma汉化版Pixso提供6种初始图形形状,包括:矩形、直线、箭头、原型、多边形和星型。但其实通过拖动图形控制点或使用钢笔工具、布尔运算、调整图形半径等,我们还能在Pixso中创建更加多样化的图形。而在Figma图片嵌入填充模式中则有适应、填充、裁剪和平铺4种,设计师可以根据需要自由调整,这几种嵌入填充模式具体区别如下:

  • 适应:可确保整个图像在它所嵌入填充的对象内可见,但根据对象的形状,图像可能无法完全嵌入填充对象。

  • 嵌入填充:将定位和缩放图像,以便图片可以应用到整个对象。如果图像和对象是不同的形状,可能会裁剪图像,确保形状完全嵌入填充。

  • 裁剪:允许你调整图像的边界线,控制可以看到图像的哪个部分。

  • 平铺:创建原始图像的重复模式,该模式嵌入填充整个对象。可以使用百分比值调整重复图片的大小。

将Figma图片嵌入填充完成以后,Pixso还提供强大的图片编辑能力,能够调整图片的曝光、对比度、饱和度、色温、色调、色相等,为图片生成特殊效果。


3:更简单的Figma图片嵌入方法

在Figma汉化版Pixso中,Figma图片嵌入填充的方式非常灵活,你可以从中选择最适合自己的一种:


方法一:截图+粘贴,一键完成图片填充

打开Figma汉化版Pixso工作台,从「形状工具」中选择「矩形」工具,或使用快捷键「R」创建一个矩形,然后在电脑中截好需要嵌入填充的图片后,返回Pixso工作台,选中矩形后将截图粘贴到矩形中,即可完成Figma图片嵌入填充。


方法二:图形+Pexels插件,批量完成图片填充

Pixso内置Pexels图库插件,里面的图片都是高质量且免费可商用的,当我们需要批量的使用图片嵌入填充时,不妨结合Pexels插件一起使用,再也不用担心图片素材“荒”了!


例如:当我们需要春节相关的图片时,可以先利用Pixso的形状工具创建若干个圆形,然后单击右上角的插件按钮,选择Pexels插件,在搜索框中输入「春节」,然后点击圆形,再点击Pexels中选择好的图片,图片就自动嵌入填充到圆形中了。剩余的图形也依次操作,这样很快就可以批量完成Figma图片嵌入填充啦。



方法三:创建蒙版

在Pixso工作台中用形状工具创建好星形后,选中形状,点击右键或在顶部栏中找到「创建蒙版」或使用快捷键(Ctrl+Alt+M或Command+Option+M)。然后将图片拖动到蒙版图层的前面,这里要注意使用蒙版不透明度必须大于0%才能正常显示效果和蒙版对象。

至于上文提到的在Figma中嵌入图片的两种方法,即:点击形状后选择嵌入填充方式以及运用布尔运算的方式等,在Figma汉化版Pixso中同样也是行得通的,并且Pixso全中文的语言环境对于国内设计师来说更友好,操作也更加便捷。

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

58小节已有3462人学过

UI设计之Figma系列教程

120小节已有22750人学过

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