16 个免费插画资源网站

前言

插画是网页设计的基石之一。吸引了用户的注意力，也给人留下了专业的印象。
尝试学习一个设计工具并自己完成它可能会消耗大量时间。若找一名专业设计师设计又可能需要花费昂贵的一笔。
幸运的是，有免费的在线资源可以使用。这里收集了 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

手绘人物插画。图书馆的工作原理就像由矢量手臂、腿和情感组成的积木。可以混合这些元素来创建不同的风格。

Illustratious

一个很好的彩色插画和动画 Lottie 文件的集合。

LukaszAdam Illustrations

下载插画画家创建的插画包, 设计师 和开发者都可以使用 Lukasz Adam个人免费使用，使用 MIT license.

Absurd.Design

如果正在寻找开箱即用的东西，并且想脱颖而出，那么这些插画强烈推荐给你。
英文原文

简单设计

有了上述资源，前端工程师也可以做设计了，下面分享下常用的设计方法。

• 第一步

使用 figma 新建一个合适的 frame

• 第二步

下载一张合适的插画

• 第三步

从文章中提取一些关键字

• 第四步

确定设计图的主色，可以在 https://colorhunt.co/ 根据主色搜索，或者根据插画中的颜色搜索

• 第五步

调整文字颜色和排版
选择 frame 在右下角可以直接导出图片，大功告成！
请随意分享，这样其他开发人员也可以从中受益。

参考资料

unDraw: https://undraw.co/illustrations
IRA Design: https://iradesign.io/illustrations
Ouch: https://icons8.com/illustrations
DrawKit: https://www.drawkit.io/
Humaaans: https://www.humaaans.com/
illu-station: https://themeisle.com/illustrations/
blush.design: https://blush.design/
Glaze: https://www.glazestock.com/
ManyPixels: https://www.manypixels.co/gallery
Open Doodles: https://www.opendoodles.com/
Storyset: https://storyset.com/
Skribbl: https://weareskribbl.com/
OpenPeeps: https://www.openpeeps.com/
Illustratious: https://illustratious.com/?category=illustration&premium=false
LukaszAdam Illustrations: https://lukaszadam.com/illustrations
Absurd.Design: https://absurd.design/
英文原文: https://dev.to/madza/16-places-to-find-illustrations-for-your-projects-h5n
figma: https://www.figma.com/