Блог WAVE

Ресурсы и инструменты для работы с изображениями


У Тильды в блоках с изображениями уже подключены библиотеки Unsplash, Google Image, Linea.io, Tilda Icons. Часто этого недостаточно для большинства проектов.
Поэтому мы собрали ресурсы и инструменты для работы с изображениями для сайтов, с которыми работаем и которые рекомендуем.

Выбор цветов

Color Palettes — ресурс предлагает палитры из нескольких цветов и пример сочетания. Обычно из выбранной палитры я выкидываю половину, немного корректирую, чтобы их соприкосновение было чистым и контрастным.Coolors — генератор сочетаний. Выбираешь цвета, настраиваешь генерацию, и инструмент сам предлагает варианты.

Интересное

Таблица безопасных цветов от студии Лебедева. Никогда ей не пользовалась напрямую, но рекомендую ознакомиться.Khroma — для начала нужно выбрать 50 любимых цветов. Генерирует миллионы вариантов цветов для фона и элементов. Советую несколько раз подумать, нужны ли такие сочетания на реальном проекте и нужны ли они там.Color Leap — цвета разных эпох.

Бесплатные изображения

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

Растровые изображения

UnsplashPixabayPhotos Free Stock Moose — фотографии на белом фоне с хорошей цветокоррекцией.
PxHere
Stock Up
Pexels
FireStock
KissPNG — картинки на прозрачном фоне, обычно неровно вырезаны. Для отчаявшихся.

Векторные изображения

VectorStockMixkit — ресурс с иллюстрациями
ManyPixels — ресурс с иллюстрациями

Бесплатные иконки

Flaticon — огромный выбор. Есть фильтрация по стилям, можно просматривать кейсы. Удобно сравнивать и выбирать на сайте. Обычно, все нужные иконки я нахожу здесь.Tilda — бесплатные сеты от Tilda Publishing в одном стилеMaterial Design  — иконки в стиле Material
Noun Project

Основные инструменты

После того, как нашли нужные изображения, часто они нуждаются в редактировании или кадрировании (обрезание).
Как бы смешно ни было, но если нужно только обрезать края, я использую Paint.Основной инструмент — Adobe Photoshop, в нём и кадрирую, и цветокоррекцию делаю, и остальные манипуляции.

Figma — бесплатный инструмент, идеально подходит для дизайна многостраничных сайтов, удобен для работы с вектором. Растровые изображения, например, фотографии, в Фигме можно только кадрировать и немного подкрутить насыщенность, контраст и т.п. 

Для больших векторных изображений использую Adobe Illustrator.

Дополнительные инструменты

TinyPNG — сжимает размер изображения, чтобы сайт быстро загружался. Лимит на одну картинку 5Mb. Бесплатно за один раз можно сжать 20 картинок.iLoveIMG — сжимает размер изображения даже больших картинок. Бесплатно за один раз можно сжать 15 картинок.Remove Background — быстро удаляет фон. Нужно показать где фон, а где объект. Удобно, но зачастую нужна постобработка в фотошопе.

Convertio — конвертирует из одного типа файла в другой. Обычно использую для преобразования .svg в .ico для фавикона, шрифты ttf в woff, чтобы загрузить в Tilda. 

The Person Does Not Exist —генерирует портреты людей. Удобно, если нужны аватарки на первое время.
UI faces — собирает портреты для аватарок.

Let's Enhance — улучшает качества изображений. Работает не идеально, но можно попробовать.


Расширения для Google Chrome

ColorZilla — определяет цвета элементов.Dimensions — замер расстояний и объектов.Image Downloader — находит все изображения на сайте
Статьи