highlight: an-old-hope
「这是我参与 2022 首次更文挑战的第 14 天，活动详情查看：2022 首次更文挑战」。
前言
插画是网页设计的基石之一。吸引了用户的注意力，也给人留下了专业的印象。
尝试学习一个设计工具并自己完成它可能会销耗大量时间。找一名专业设计师设计又可能消耗你昂贵的一笔。
幸运的是，有免费的在线资源可以帮助你。我已经收集了 16 个很棒的免费资源，你可以在你的下一个项目中使用这些素材。
资源网站
unDraw
一个设计项目，带有漂亮的 SVG 图像，您可以免费使用。您可以选择插画的主色，这样您就可以轻松地使它们适应您的设计。
IRA Design
您可以选择、播放和混合 5 种渐变颜色，以适合您想要在项目中使用的每个角色。许多主题可从字符、对象、背景等中选择。
Ouch
Ouch 帮助无法绘画的创作者克服了缺乏高质量图形的问题。下载免费的 PNG 和 SVG 插画，以增强您的产品。
DrawKit
令人敬畏的手绘矢量插画和图标资源。插画通过主题包分类，每个包多达 100 幅插画。
Humaaans
混合搭配人物插画。改变发型、上衣、裤子等。随心所欲地旋转和定位你人类的元素。
illu-station
一个易于使用的网站，有许多高质量的插画。与 unDraw 类似，用户还可以设置主色以根据项目主题调整插画。
blush.design
从多种样式中选择一个集合，尝试各种变化，直到创建讲述故事的艺术，然后下载创作的 PNG 或 SVG。
Glaze
插画按人、地点、团队合作、动物、正念、商业、健康、技术等类别分类。免费插画以 PNG 格式提供。
ManyPixels
各种插画类型，如轮廓、单色、等距、平线和双色。用户可以设置插画的主色，以适应您的特定设计。
Open Doodles
基于手绘草图的矢量插画的独特集合。下载源文件或使用生成器创建自己的文件。
Storyset
为您的下一个项目提供免费的可定制插画。拥有在线编辑功能，你甚至可以给插画制作动画，给它们一些生命。
Skribbl
全球有抱负的创意人士社区为您带来了越来越多的免费手绘插画。
OpenPeeps
手绘人物插画。图书馆的工作原理就像由矢量手臂、腿和情感组成的积木。您可以混合这些元素来创建不同的窥视。
一个很好的彩色插画和动画 Lottie 文件的集合。
LukaszAdam Illustrations
下载插画画家创建的插画包, 设计师 和开发者都可以使用 Lukasz Adam个人免费使用，使用 MIT license.
Absurd.Design
如果你正在寻找开箱即用的东西，并且想脱颖而出，那么这些插画强烈推荐给你。
简单设计
有了上述资源，我们前端工程师也可以做设计了，日常我需要为博客首图设计和公众号设计首图，下面分享下我的设计方法。
- 第一步
使用 figma 新建一个合适的 frame，比如公众号首图是 900*383
- 第二步
下载一张合适的插画
- 第三步
从文章中提取一些关键字
- 第四步
确定设计图的主色，我们在 https://colorhunt.co/ 可以根据主色搜索，或者插画中的颜色搜索
- 第五步
调整文字颜色和排版，效果如本文首图
选择 frame 在右下角可以直接导出图片，大功告成！
请随意分享，这样其他开发人员也可以从中受益。
以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。
本文首发掘金平台，来源小马博客
