При реализации дизайн-проекта часто нужны качественные иллюстрации для фона, выделения определенных блоков или просто для красоты, и анимации для вовлечения. И не каждый дизайнер умеет рисовать (да и не должен уметь, так как у него другие задачи) или знает принципы моушн-дизайна (если знает — отлично, а если нет — ничего страшного). В таком случае спасают специальные ресурсы, где собраны авторские картинки, анимации. Вам достаточно только выбрать нужные, скачать и использовать. И мы подготовили подборку таких сайтов с бесплатными иллюстрации и анимациями.

Сайты с анимациями

GSAP

Библиотека анимаций, разработанных на JavaScript и совместимых со всеми современными браузерами. Есть как сложные элементы, так и очень простые, шаблонные. Библиотека работает с SVG и объектами jQuery.

Animate CSS

Ресурс с открытым исходным кодом. Нужен для добавления анимаций CSS3 на нужный сайт. Ценен тем, что предлагает протестировать стили анимированных объектов, их механику, оценить «конструкцию» в целом.

Tuesday

Ресурс не очень популярен, но в нем есть отличные анимации. По стилю они очень простые и подойдут для сайтов, оформленных в стиле минимализм. Библиотека функционирует на чистом CSS. А ресурс сделан так, что на нем вы можете увидеть, как появляются или исчезают анимации с сайта.

Mo.js

Одна из лучших библиотек JavaScript, где можно сделать графику, которая будет двигаться поверх анимации. А еще внутри много функций, которые упрощают работу с анимированными объектами.

Сайты с иллюстрациями

Iconspace Library

Сайт, где можно не просто подобрать качественные иллюстрации, но и изменять основные, второстепенные цвета на нужные. Искать картинки удобно через ключевые слова или выбор тематики. А кроме изображений, доступны иконки в авторском, оригинальном стиле.

Woobro

Иллюстрации с градиентами и похожими героями для платных проектов. Можно загрузить в форматах PNG, SVG, Sketch, AI.

Storytale

Картинки разделены по тематикам:

• e-commerce;
• эко-жизнь;
• стартапы;
• работа, бизнес;
• отдых;
• медицина;
• люди;
• интерфейсы;
• дом;
• другое.

Иллюстрации сделаны в разных стилях, но в рамках одной тематики. Часть картинок бесплатная, часть — платная.

Ouch!

Библиотека с PNG-картинками, разделенных по категориям. Есть иллюстрации о бизнесе, здоровье, выходных, людях, транспорте, спорте и т.д. Кстати, картинки можно скачать и в формате SVG, но это платная опция.

Smash Illustrations

Иллюстрации в разных стилях:

• 3D;
• контурные;
• частично контурные, а частично 3D;
• плоские;
• без контуров, другое.

Практически на каждой картинке присутствуют люди. Темы разные — танцы, дом, стартапы, любовь, обыденная жизнь в разных ее проявлениях.

IRA Design

Не просто сайт с иллюстрациями, а целый конструктор, где вам сначала предлагают выбрать нужный градиент для каждого основного элемента (вообще их 4 и для каждого доступно 5 цветов). Затем нужно определиться с самими картинками. Они разделены на 3 основные категории — задний фон, люди, объекты.

Phonies

Иллюстрации стилизованные, но есть один нюанс — на каждой есть телефон или другой гаджет. По стилю тоже есть из чего выбрать — можно найти картинки просто черно-белые, объемные и разноцветные под лендинги, небольшие блоки, многостраничники. Бесплатно разрешено загружать рисунки в SVG-,PNG-,AI-,PDF-форматах.

unDraw

На этом ресурсе в иллюстрации реально менять только основной цвет. Очень удобно, что он может быть любым из основной палитры. Картинки в нескольких похожих стилях, но в них сочетается контурная графика с объемной.

Freellustrations

Здесь представлены картинки для оформления заднего фона в лендингах, многостраничниках. Также есть векторные изображения, которые можно использовать для разных дизайн-решений. Круто презентованы продукты — показаны не просто сами иллюстрации, но и есть примеры сайтов с этими иллюстрациями. Так проще увидеть, как реально будет смотреться иллюстрация и оценить, впишется ли она в ваш дизайн.

Humaaans

Ресурс с картинками людей, нарисованных в интересной технике и без лиц. Вы можете менять основные элементы — прическу, одежду (как сверху, так и снизу), а еще расположение ног (что в общем повлияет на позу человека). А еще фон можно экспериментировать с фоном — оставить, изменить или убрать и использовать чисто иллюстрации с людьми.

Delesign

На сайте представлена векторная графика, в которой можно частично изменять цветовую гамму и сохранять картинки в формате SVG или PNG. Изображения поданы не в формате разделенных на категории, а рандомной лентой. Но вы всегда можете сразу найти то, что нужно, благодаря поисковой строке и ключевым словам. А кроме картинок, на сайте еще есть иконки на разные темы.

Pof-Pof! Illustration Kit

Сайт наполовину бесплатный, так как картинки в SVG-формате можно скачать только платно, а вот в PNG — без какой-либо оплаты. Есть иллюстрации в разных стилях, а среди основных персонажей — люди с необычными пропорциями в разных жизненных ситуациях.

Open Doodles

Если для вашего проекта нужны контурные иллюстрации с милыми героями, вам на этот ресурс. Здесь картинки в виде скетчей и разными персонажами — парнем, собакой, девушкой. Есть как одиночные иллюстрации, так и целые композиции с 2-3 героями.

Isometric Love

Ресурс с подборкой изометрических изображений на разные темы — от простенький иллюстраций с деревьями до полноценных композиций с множеством объектов. Одна из особенностей — кроме статичных картинок, есть и анимированные.

Illlustrations

Сайт, где собраны лучшие работы с челленджа «100 дней иллюстраций». Они небольшие и больше напоминают иконки, чем полноценные иллюстрации, но для некоторых категорий и тематик сайтов подойдут (например, для продажи услуг, которые касаются развлечений детей).