设计素材周刊 021 期

设计素材周刊 021 期

来自「Moonvy 月维」分享的最新设计素材与资源

🏆 产品推荐

Figma 倾斜插件

用来制作倾斜和 3D 效果,操作简单功能强大 👍

https://www.figma.com/community/plugin/862059663689780943/Perspective-Toolkit

Heazy - 在线生成矢量背景纹理

可以根据模板快速生成背景和配色方案,提供比例更换、波浪纹理等设置、描边设置、颜色修改等自定义编辑,支持svg 、png、代码三种导出类型。

https://heazy.studio/

暗夜代码主题

视觉及其友好的暗夜主题配色,提供两个主题。

  • 单色
  • 月光

https://sequoiatheme.com/

手机屏幕尺寸查询

超级全的手机、Pad、电脑屏幕像素及物理尺寸、比例等信息的查询。

https://screensiz.es/


📖 值得读读

探索用 Figma 做游戏 UI 设计

记得2021年《Figma一站式设计交付》中提到,Figma本身是一个矢量设计软件,所以个人认为Figma比较适用于制作一些偏扁平、卡通的游戏UI风格。

纵观全网Figma基本都是To B 、To C类的产品应用,很少人会往这个游戏这个方向研究了,因此我开启了一段Figma针对扁平类游戏UI设计的探索之旅,结合Figma Config 2022姗姗来迟的AutoLayout 4.0的使用,以英雄联盟鲜明的海克斯科技风格代表性更高。

此次练习设计主要总结了一些设计技巧:

  • 异形的自适应按钮、自适应面板背景(AL4.0绝对定位+约束拉伸)
  • 数字、字母动画(AfterDelay嵌套)

文章链接:https://mp.weixin.qq.com/s/VILa-zhplOZcEda9opENGw

Figma 实例文件链接:https://www.figma.com/community/file/1050752368690341429

全息图、漏光以及如何构建纯 CSS 着色器

滚动浏览器,位置不同图像的内容光影跟随变化是如何实现的。

模拟镜面反射 首先,我们需要考虑光线如何在图像表面从明处传播到暗处。我们需要一个光线最强烈的区域,随着光线的消散逐渐下降到黑暗中。我们将使用渐变来做到这一点。

了解图像混合模式 顾名思义,mix-blend-mode将一个元素层中每个像素的颜色与它正下方的层混合在一起。与 GLSL 一样,CSS 为我们提供了一长串可供选择的选项,创建正确的效果意味着知道哪种混合会产生我们需要的结果。但是这些混合模式实际上是做什么的呢?在我们陷入我们的着色器之前,让我们快速浏览一下我们将使用的混合模式。

https://robbowen.digital/wrote-about/css-blend-mode-shaders/

Figma 的新功能:2022 年 6 月

https://www.figma.com/blog/whats-new-in-figma-june-2022/

Figma 更改了插件的安装位置,安装可卸载的位置相同
如果你安装了 FigmaEX 可以在侧边栏完成,搜索、安装和卸载

我们尝试让插件不再有「安装」和「未安装」的概念,需要插件的时候,输入关键字搜索即可。搜索结果里单击即可启动,不需要的插件右键即可「卸载」。

https://mp.weixin.qq.com/s/VyxENV-WczLw48ULCmBWxg

🎊 设计素材

特色矢量插画

难得的细致矢量还免费的插画素材

https://www.figma.com/community/file/1123930848462274399

品牌视觉指南,设计资源文件

里面收录了一些大品牌的 LOGO 视觉文件,有麦当劳、星巴克、微软、Apple、国家地理等超大品牌的视觉方案,需要注册后下载 PDF 格式文件。

https://brandingstyleguides.com/

图标动画库

常用图标动画,比如警告的闪烁、关闭按钮的抖动、菜单打开变形为关闭、描边点击变实色填充等效果动画,下载提供 json 和 svg 文件直接可用。

https://useanimations.com/

3D 抽象插图

一次打包下载,Figma、PNG、SVG等格式。

https://www.ls.graphics/illustrations/bzzzt

样机模型素材

常用到的 视觉包装设计都有,宣传册、名片、LOGO 展示、衍生品等模型

https://www.ls.graphics/free-mockups

Feather 在线图标库

图标支持调整尺寸、粗细参数,点击即可下载 SVG 格式到本地。

https://feathericons.com/

该图标库在 Figma 里有图标插件,不过插件里不支持参数的修改。

https://www.figma.com/community/plugin/744047966581015514


🏖 随便逛逛

GLEEC 网站视觉欣赏

网站设计既表现科技颜色又不俗套

https://gleec.com/

DG 时装秀,7月9日在米兰

https://altamoda.dolcegabbana.com/en/

一个关于甲虫的科普网站

https://www.knowyourbeetle.com/

来自地球的数据

人类所做的一切都会影响我们的生态系统。由于地球上的许多系统都处于临界点,气候数据平台必须具有可访问性和现代化。输入地球 API。

我们从来自美国国家海洋和大气管理局(NOAA)的重要温室气体 CH 4、CO 2、N 2 O 和 SF 6开始。您可以按年和月的间隔查询数据。(从下拉列表中选择不同的排放以查看示例数据集)

https://www.hge.earth/

在线万花尺 - 齿轮画圈模板

小时候每人必备工具,这个在线的支持修改颜色可以保存图片圈圈尺寸类型也比较多。

https://nathanfriend.io/inspiral-web/


封面来源:插画


👍 优秀订阅推荐

「 体验碎周报」,帮助交互设计师成长,由「龙爪槐」创建和更新。

「DEX 周刊」,关于产品、设计、前端、软件等内容的精华资讯,由「丁一」创建和更新。

「科技爱好者周刊」,记录每周值得分享的科技内容。

🎁 福利区

🍭「Figma Section」,9 折购买 ,Figma 设计图管理插件

❤️「Pro Layout Panel」,9折购买 ,Fgiam 超级自动布局,让自动布局使用更高效快捷