图案 网站 背景 大家好，这里是和你们聊设计的花生~之前为大家推荐过5个纹理材质网站和5个科技感背景网站，今天继续为大家推荐9个高质量几何背景图案素材网站，它们包含了上千种丰富的图案样式，可以用作海报、网页、包装、PPT、壁纸设计等多个方面，下载便捷且都是免费可商用，一起来看看吧~PPT设计必备！5个高质量科技感背景生成器大家好，这里是和你们聊设计的花生~科技风一直都是 PPT 设计中比较热门的风格，而想做好科技感，除了合适的配色，自然也少不了各种具有形式美的抽象几何图案。阅读文章 > 1）more.graphics网站直达：https://more.graphicsmore.graphics 是一个免费可商用的图案生成器网站，集合了表情符号、六边形图案、渐变、几何、蒙德里安、包豪斯、带状等7种功能，图案样式累积有100多种。每种图案的尺寸、图案模式和配色方案都可以修改，因此也可以得到更加丰富多变的样式。其中平铺图案都是可以无缝拼接的，提供PNG/SVG/JPG 3种文件下载格式。2）VISIWIG网站直达：https://www.visiwig.com/（搭梯子速度更快）一个由个人设计师开发的几何背景图案生成网站，包含图标、图案和纹理三种类型，都是免费可商用的。其中图案包含了30多种基础几何图形样式，简洁大方，每一种都可以调节图案的大小、方向、密度、颜色等，可复制CSS代码和下载SVG格式文件，方便图案的再次编辑。3）Superdesigner网站直达：https://superdesigner.co/toolsSuperdesigner也是一个图案生成工具合集，包含SVG背景、3D元素生成器、渐变、几何背景、CSS背景等10种功能。其中背景图案样式达到了200多种，精致可爱，可以调整其配色和透明度，每个图案都可进行无缝拼接。图案的使用方法是直接复制SVG格式文件，导入Ai中即可编辑使用。4）Looneypatterns网站直达：https://looneypatterns.com/Looneypatterns 是一个黑白手绘线条风格的图案网站，目前包含45中图案样式，风格清新简洁，可免费下载并进行商用。下载方式为点击缩略图进入大图页面，然后右键保存PNG文件即可。5）Pattern Monster网站直达：https://pattern.monster/Pattern monster 是一个在线的免费矢量背景素材库，目前拥有248多种图案样式，除了常见的几何图形还有一些适合圣诞节、万圣节、生日等节日的装饰图案。每种图案的尺寸、大小、颜色、方向都可以进行调整，提供CSS代码、SVG和PNG三种下载格式，对后期调整来说也非常方便。6）Tylify网站直达：https://tylify.app/Tylify 是一个以 Emoji 表情符号为基础元素的趣味平铺图案生成器，有着无数种可能的组合方式。我们可以通过增删表情符号、调整大小、颜色、角度来组合成一个基础的“瓷片”单元，在此基础上网页自动拼合形成无缝的背景图案，此外也支持自己上传元素图片进行图案组合。支持SVG和PNG两种下载格式，此外还有Figma的插件可供下载。关于 emoji，你必须知道这个全能网站Hello Everyone~ 我是花生。阅读文章 > 7）Subtle patterns网站直达：https://www.toptal.com/designers/subtlepatterns/一个公益性质的纹理图案网站，站内素材都是由专业设计师创作并上传的，包含布料织物、几何图案、瓷砖纹样、植物等多种类型。网站提供400*400px的PNG格式文件下载，可无缝拼接。8）wowpatterns网站直达：https://www.wowpatterns.com/free-vector-artWowPatterns是一个专注图案设计的专业网站，目前收录超过 3000 多种纯手工的创意图案，华丽多彩，包含民族、季节、几何、抽象图形等多个类型。可下载JPG格式和可编辑的EPS格式，图案完全免费用于商业和个人用途。9）bg-patterns网站直达：https://bg-patterns.com/一个日本的背景图案素材网站，包含几何条纹、植物、日式传统纹样等多种类型，总样式近2000种，都是免费可商用的。每种图案有5种不同的配色方案、7种图案大小和 PNG/SVG/PNG/Ai/EPS 5种文件格式可供选择，非常全面。以上就是今天为大家推荐的9个免费可商用的背景图案素材网站，喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的相关疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：要质感叠纹理！5个设计师必备的免费高清纹理素材网站大家好呀，我是和你们聊设计的花生~在海报设计、字效设计、插画中，叠加纹理是提升设计质感、营造主题氛围的有效手段。阅读文章 > 看电影学审美！8位值得关注的宝藏电影拉片UP主大家好，这里是和你们聊设计的花生~想必很多学设计或插画的小伙伴听过可以通过看电影来提升审美，学习构图、配色、造型等方面的知识，并获得相应的创作灵感。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/pattern-background-resources
抠图 在线 背景 大家好，我是和你们聊设计的花生~随着人工智能技术的发展，运用算法自动进行图片处理的工具越来越多，极大地提升了设计师的工作效率。之前向大家推荐了在线 AI 修图神器 Hama，能够轻松抹除图片中不需要的部分，与背景实现完美融合；还有在线 AI 抠图神器「Erase.bg」，能在几秒内快速从任何图片去除背景，并且以提供原始分辨率下载。不限次数！快收藏在线免费抠图神器「Hama」Hama 如同上次介绍的「Magic Eraser」，让用户上传图片、将画面中不想要的部分抹除，因为这类服务都是使用人工智能 AI 加上机器学习方式训练出更强大的程序辨识能力，会分析标示人物或物品，移除后将附近的颜色补充进来，就会使去除后的相片画面很自然，而且这项服务完全免费，使用者只要阅读文章 > 又一个抠图神器！在线免费一秒搞定超好用！当今的在线去背工具多半会整合 AI 人工智能技术，以机器学习方式去建构出可准确辨识前景和背景的模型，使用机器自动化去除背景的好处是快速、精确而且无需额外编辑，即使没有专业绘图软件一样可以在浏览器进行，remove.bg 是在线去背服务最早出现、而且最强大的选择，后来也有 FocoClip阅读文章 > 今天要向大家推荐的 ClipDrop Remove Background 也是一款免费的在线 AI 背景扣除神器，它的背景移除功能非常强大，在 Producthunt 社区 5 月 12 日的每日产品榜单中排名第 5。据开发人员介绍，他们研发的算法使 Clipdrop 的背景移除精准度、速度和稳定性都达到了前所未有的高度。ClipDrop Remove Background 的功能特色主要体现在以下 2 点：① 能自动识别图片主体进行抠图，不会将颜色相近的阴影或背景错误保留：② 扣除背景的同时也能保持细节，并做到边缘干净无白边。Clipdrop 对上传的图片没有尺寸和大小的限制，处理时间最长不超过 10s，抠图完成后直接下载原图，支持输出最高 5000*5000px 的图片。我也上传了几张图片测试其抠图效果：首先是人物图片，原图尺寸 3917*5354px，大小 1.45MB，抠图时间为 7 秒，抠图后输出图片尺寸为 3658*5000px，大小为 7.92MB。抠图效果非常不错，头发部分的一些空隙都清除的很干净，衣服边缘也扣得很干净，没有模糊的白边。接着我又试了一张椅子图，原图尺寸为 3569*4461px，大小为 1.56M。抠图时间比人物图片更短一点，输出的图片为 3569*4461px，大小 8.94MB。抠图边缘同样非常干净，而且很精准的只抠出了椅子的主体。个人使用感受非常棒，能为经常需要处理抠图的小伙伴省去不少时间精力，感兴趣的小伙伴可以去官网体验一下： https://clipdrop.co/remove-background最后再为大家总结一下 ClipDrop Remove Background 优点：免费在线 AI 智能抠图，打开即用抠图速度快精度高，自动识别主体，边缘清晰无白边上传图片无限制，输出图片最高支持 5000*5000px以上就是今天的推荐，如果你有关于设计的疑问，欢迎加入优设官方设计交流群和大家一起交流，进群方式见下图本篇来源：优设网原文地址：https://www.uisdc.com/clipdrop-remove-background
极光 背景 明度 作为设计师都会时刻关注设计趋势，以 UI 设计来说每年都会出现很多相关的趋势总结，基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向，带给用户更好的感官体验。最近黑马哥结合落地产品所呈现出来的设计趋势，进行了这方面的探索，今天以其中之一的趋势-极光风和大家先聊一聊。极光风趋势的来源极光（Aurora），是一种绚丽多彩的等离子体（发光）现象，在夜间出现灿烂美丽的光辉。在南极被称为南极光，在北极被称为北极光，视为自然界中最漂亮的奇观之一。（来源于百度百科）这样的自然奇观被摄影师捕捉到静态的影像中，设计师再结合这样的影像作品，视觉化之后出现在了一些设计作品中。在 2021 年被广泛运用，形成一种流行的视觉风格。在众多的互联网产品设计中，也经常运用这种类似极光的视觉影像风格，称之为 Aurora UI。在产品设计底层需求获得满足之后，感光体验的提升被重视，视觉感的强化对 UI 设计师来说至关重要。基于不改变本身的结构层，在背景层和装饰性元素上面发挥，使得 Aurora UI 得到了发挥的空间。富有创意的极光风在背景层和装饰性元素上面发挥得淋漓尽致，助推了其成为 UI 设计趋势的关键，下面就让我们一起来看看落地产品中的 Aurora UI。UI 场景中的极光风设计由于在众多落地产品中被广泛运用，形成了近些年影响 UI 设计趋势的风格。极光风和弥散光在表现形式上类似，也有设计师将该风格归类为弥散光，下面就看一下具体的运用场景。弥散光设计！网易阿里大厂都在用的刷屏级新设计风这阵子不是有一种设计流行风悄悄刮了起来嘛！阅读文章 > 1. 强化导航栏设计的视觉感如果想要强化顶部导航栏的视觉感，通常是利用品牌色作为背景颜色，这样也会显得顶部比重较大。通过白色或者浅灰色作为背景属于比较弱化的处理方式，而极光风的处理形式处于轻重之间的理想状态。不仅可以丰富视觉表现力，也能使得整体风格更加年轻化。2. 强化个人中心顶部视觉区域随着互联网用户年轻化的趋势，在配色上面逐步趋近于年轻化，众多产品在个人中心界面的设计上面亦是如此。利用极光风效果呈现出的设计比较符合年轻化的趋势，可以是同色系的饱和度变化，也可以是不同色相的相互融合。利用低饱和度高明度的配色原则，使得整体的视觉感更加轻量化，视觉效果清新自然且通透力更强。也有基于品牌色结合极光风进行融合，相对单色来说效果更加丰富自然，使得背景的变化更加多样。3. 丰富背景设计的视觉感除了在顶部区域进行运用以外，也有一些产品会在背景层面进行强化，相较于白色或者浅灰色的背景来说色彩感更丰富。运用到整个界面背景层相对比较少，在局部背景层上的运用比较多些，可以强化局部模块的视觉感。4. 点缀弹窗设计局部极光风的设计表现也会出现在一些局部功能的细节处，比如运用到弹窗的色彩处理中，作为背景局部或者插画部分等的衬托。带来的视觉感更加亲和自然，也不会过度干扰其他元素的呈现。5. 强化卡片式设计局部卡片式设计也是近些年运用比较多的设计趋势之一，基本是以白色卡片居多，具有整合信息的好处。在卡片的边缘位置强化色彩，可以使得卡片色彩更加丰富，也有一些电商产品是起到与商品形成色彩呼应的作用。6. 突出搜索设计的差异化搜索框的设计在大部分的认知里面都是白色或者浅灰色，也有一些是带有边框的形式，利用低饱和度高明度的配色原则来进行设计，带来的效果更加年轻化。也是一种差异化设计的尝试，打破常规的设计认知。也可以举一反三，在一些按钮或者标签设计中运用。7. 分类标签的装饰设计这是一个装饰性的设计尝试，在突出模块分类的当前状态时，通常都会通过装饰元素来进一步强化。可以通过字体粗细、颜色深浅、字体大小和装饰元素来强化，装饰元素除了线段和一些图形元素以外，极光风的背景元素也是一种不错的表现手法。8. 图标设计中的运用运用到图标设计中通常是出现在质感类图标，辅助强化图标的色彩感和层次感。有时候无法通过常规的渐变形式达到要求，就可以尝试运用极光风的处理技巧，将颜色通过模糊和剪切蒙版的形式融入到图标中，可以使得图标色彩丰富和强化光影变化。9. 深色卡片色彩强化以上案例属于在浅色或者白色的环境中运用，在深色主题中依然会用到极光风进行设计强化。在界面背景和卡片背景中运用，效果也是非常不错的，可以给深色的卡片一些色彩感和丰富度。10. 作品包装中的背景强化除了在 UI 设计场景中运用以外，最近发现在设计师作品包装中的运用也是非常普遍，用于背景层的渲染带来的视觉体验度也是非常不错的。在作品包装环节中作为背景运用和局部装饰，也有在封面设计中重点运用，使得作品集紧贴设计趋势，提高作品的打开率。11. 其他场景中的应用普及在 UI 场景还有很多运用场景，这里仅为抛砖引玉，无论是作为背景强化还是元素装饰，都能带给用户更加年轻化的感官体验。除了在 UI 场景中呈现以外，极光风的设计也会出现在更多其它场景中。在 Banner 设计、海报设计、专题页设计等视觉设计层面也是运用广泛，是一个影响范围比较广的设计趋势之一。实现极光风设计的方法通过一些线上的案例欣赏和分析，相信大家对于极光风在 UI 场景中运用都有一定的了解，在项目设计中也能轻松尝试。这一类风格从技法实现的角度来说并不难，关键因素在于控制好配色原理，下面就为大家总结几种实现的方法。方法 01：利用不透明度渐变融合不透明度渐变在设计中的运用比较普遍，利用的是不透明度从 100%-0% 之间形成渐变，让色彩逐渐消失或者淡化。画一个圆形，选择径向渐变，渐变两端的颜色选择同一个色相。然后设置中间颜色不透明度为 100%，另一个颜色不透明度设置为 0%，这里颜色适合选择低饱和度的范围。同样的方法反复绘制几个不同颜色的圆形进行组合，即可完成极光风背景设计。方法 02：利用模糊度变化融合这个方法是结合了形状和模糊设置（高斯模糊等），绘制几个大小不等的圆形进行排版组合，然后选择所有圆形一起进行模糊设置。形状的绘制上面最好是有大小差异，排版错落有致，这样形成的效果比较富有变化。在颜色的选择上面需要根据背景的强化程度选择，低饱和度的颜色融合性更高，适合作为弱化性质的背景使用。方法 03：利用背景模糊融合背景模糊在 Sketch、Figma 等设计软件中有该功能，是一个影响设计趋势较为常用的功能，特别是在实现玻璃质感和一些质感图标上面非常实用。在背景层绘制图形，颜色和形状均可自由发挥，然后再绘制一个形状作为调节层，调节层是用于控制模糊效果的。在调节层的形状上面设置一个带有透明度的颜色（必须要带有透明度），然后再设置背景模糊，背景模糊数值的大小决定模糊的程度，不透明度的大小决定整体效果的亮度。方法 04：利用图片模糊融合以上的方法都需要进行配色处理，如果色感方面比较薄弱的设计师，也可以挑选一些不错的图片来实现极光风效果。挑选一张色彩符合要求的图片，然后在 Photoshop 等设计软件中执行高斯模糊，半径值的多少决定了模糊之后的自然度。我们在选择图片的过程中除了整张图片进行操作以外，也可以截取其中的一部分，也许会带来意想不到的效果。除了这几个方法以外还有更多不一样的实现方法，大家可以根据自己的探索选择最适合自己的方法。根据使用软件的差别选择最简单的形式，根据想要实现的效果选择最灵活的方法，这样才能便于后期的反复调整。极光风案例实战小结研究落地产品的设计细节和视觉趋势，将有助于提高我们对于当前有效设计趋势的把控，而不仅仅只是停留在概念化的预测阶段，而是行之有效的真实案例。极光风是近些年运用在落地产品中的 UI 设计趋势之一，通过大量案例验证之后的有效方法，希望大家能够掌握并灵活运用到项目设计中。落地产品的 UI 设计趋势还有很多，本次分享的仅为抛砖引玉，后续将和大家探讨更多的有效设计趋势，辅助提高我们的设计能力。2021 年，UI设计师最值得跟进的新趋势「极光风」编者按：如果你有关注设计趋势，那么你一定会知道新拟物化和玻璃拟物化这两种近年被提出的设计风格，而最初提出它们的，就是著名的设计师 Michal Malewicz，他如今俨然已经是设计圈内的趋势观察家。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/aurora-ui-design-trend
图案 背景 图层 最终效果一、创建一个新的文档。设置宽度为600 px和高度450 px。分辨率是72 DPI。二、把背景图层复制一层，并命名为“背景图案”。三、现在，我们要添加一些肌理。双击“背景图案”调出图层样式。选择“图案叠加”，选择“从列表中Cherry01。四、再设置内阴影及渐变叠加。五、输入文字，颜色选择白色。六、使用“移动工具”，选择文本和背景层，然后单击对齐命令见下图。七、给文字添加图层样式，先设置混合选项。八、给文字添加投影。九、添加图案叠加，选择“波浪纹理”。十、添加内阴影。十一、外发光。十二、内发光。十三、斜面与浮雕。十四、颜色叠加及渐变叠加。十五、这是最后的一步，但不是那么重要，增加描边效果。最终效果：
图案 图标 背景 Icons Pattern 是免费图标库「Flaticon」提供的在线工具，协助用户以喜欢的图标设计出独特的背景素材，可使用于手机、移动设备背景或是做为社群网站背景，也能调整每个图标尺寸大小、位置、不透明度、旋转方向和背景颜色等等，最终产生为 PNG、JPG、SVG 三种主要格式或 Base64 编码，下载前设定尺寸和图片大小。值得一提的是 Icons Pattern 产生的素材图案为无接缝图案（seamless patterns），只要小张的图片、重复拼接显示就能制造很漂亮的效果，而且符合各种尺寸和使用情境，我之前介绍过类似的无接缝图片产生器工具：想快速绘制出好看背景？用这个神器一分钟搞定！本文要推荐的「Everypixel Patterns」是最近新推出的在线工具，可以协助设计师产生更具个人化的图案，这些图案都是无接缝图案（Seamless patterns），对于要获得创作灵感、或产生全新图案来说都很有用，制作后直接从网站就能下载 SVG 向量图和 PNG 两种格式。阅读文章 > Icons Pattern 图标素材来源为 Flaticon 网站，网站本身就已收录超过 200 万个图标图案，不过并非每个图案或图标集都能免费使用，如果标示为 Premium 代表需要付费解锁，还好免费范围已有不少选择，有兴趣的朋友可以自己去动手玩玩看。想寻找类似于上图的手机背景但又没有合适的选择吗？不妨打开 Icons Pattern 工具自己制作一个吧！Icons Pattern by Flaticon网站链接：https://www.flaticon.com/pattern/使用教学开启 Icons Pattern 网站会看到简单三步骤教学，首先搜索、找到你要使用的图标，点选后将它加入并调整尺寸、颜色和背景，最后点选「下载」就能将设计输出保存为特定格式。从左侧选单点选搜索，找到特定的图标集或图标图案，点选就会新增到图片编辑区，也可以使用最下方「Random pattern」随机加入排列。很有趣的是 Icons Pattern 加入的素材可以进行进阶调整，像是配色、阴影、不透明度等等，不喜欢的话点选右下角「Clear」就能清除重来。点选左侧的调色盘设定图片背景颜色，调整后会实时显示于网页右侧编辑器。编辑完成后点选左下角「Download」绿色按钮保存图片。下载前可选择格式：PNG、JPG、SVG 或 Base64 编码，可设定图砖和图片大小，点选下方的绿色「Download Pattern」就能下载并取得图片啰！值得一试的三个理由：免费图标网站 Flaticon 提供的在线工具，以图标设计出独特背景图产生的素材图案为无接缝图案，只要重复拼接即可制造漂亮效果下载为 PNG、JPG、SVG 三种格式或 Base64 编码为什么我10秒就可以做出漂亮的背景图？有这个神器你也行！有时候我们需要一些好看的背景素材，时间一紧张可能就做得不咋地，没关系，今天给大家推荐一个自动生成背景纹理的网站。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/icons-pattern
狗狗 边缘 背景 本教程主要使用Photoshop抠出在草地上做着的毛茸茸小狗，通常状况下这种毛茸茸的小狗是比较难抠图的，今天推荐给朋友学习，希望大家可以喜欢。先看看效果图：首先打开ps界面，把想要操作的图片置入到ps界面里，如下图：点击使用套索工具后，再利用套索工具把狗狗的大致轮廓勾勒出来如图：在点击功能栏里的调整边缘：弹出调整边缘窗口：选择狗狗和视图背景颜色对比最明显的一个视图模式：目的是利用调整边缘的智能检测，把狗狗和背景智能分离，选择颜色相差最明显的是因为便于操作，做出最好抠图效果!调整画笔大小，硬度调大，大约在90至95左右都可以，然后沿着狗狗毛发边缘是使毛发和背景智能分离，效果如下图：涂抹好之后，在返回调整边缘小窗口里下方“输出”里的“输出到”点击选区这个下拉按钮：点击确定之后，就可以看到狗狗被完全扣取出来了!附上效果图一张：为了效果更佳明显以及更佳没观一点可以把扣取的狗狗放在一张好看的背景里：为了和新加的背景融合可以利用滤镜里的Camera Raw滤镜适当调整下：美化下这个效果图：水印影响美观，那就用内容识别轻松去除：我们来个前后对比图吧：
张大湿
表哥
在路上
飞翔的企鹅
落霞与孤鹜
