У Тильды в блоках с изображениями уже подключены библиотеки Unsplash, Google Image, Linea.io, Tilda Icons. Часто этого недостаточно для большинства проектов.
Поэтому мы собрали ресурсы и инструменты для работы с изображениями для сайтов, с которыми работаем и рекомендуем.
Color Palettes — ресурс предлагает палитры из нескольких цветов и пример сочетания. Обычно из выбранной палитры я выкидываю половину, немного корректирую, чтобы их соприкосновение было чистым и контрастным.
Coolors — генератор сочетаний. Выбираешь цвета, настраиваешь генерацию, и инструмент сам предлагает варианты.
Интересное
Таблица безопасных цветов от студии Лебедева. Никогда ей не пользовалась напрямую, но рекомендую ознакомиться.
Khroma — для начала нужно выбрать 50 любимых цветов. Генерирует миллионы вариантов цветов для фона и элементов. Советую несколько раз подумать, нужны ли такие сочетания на реальном проекте.
Color Leap — цвета разных эпох.
Бесплатные изображения
Icons8 — cервис постоянно развивается, сейчас они предлагают иконки, крутые сеты векторных иллюстраций, фотографий, музыки.
Freepik — лидер по бесплатным векторным картинкам, но растр тоже есть.
Растровые изображения
Unsplash
Pixabay
Photos Free Stock Moose — фотографии на белом фоне с хорошей цветокоррекцией.
PxHere
Stock Up
Pexels
FireStock
Векторные изображения
OUCH! — крутейшие сеты иллюстраций от icons8. А также есть конструкторе для создания коллажей. Бесплатно можно скачивать только в .png
Open Peeps — конструктор рисованных персонажей в едином стиле. Доступно.svg и .png
Control — 108 иллюстраций в 2 стилях (заливка или обводка). Бесплатно только в .png
unDraw — иллюстрации в едином стиле, можно выбрать основной цвет для элементов. Бесплатно .svg
Бесплатные иконки
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 — находит все изображения на сайте
