Серия «Gradients.app»

Появились mesh градиенты

Совсем недавно добавил генерацию меш градиентов и библиотеку, которую помогают заполнять пользователи своими градиентами. Старался сделать максимально просто в использовании.

Возможности генератора: генерация случайной палитры, добавление цветов, выбор рандомного цвета, замена цветов на свои, смешивание текущей палитры, скачивание градиента в FHD (1920*1080) и копирование CSS код градиента.

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

Ещё появился генератор капли или кляксы (blob)
Кляксы часто используют для декора в вебе или презентациях. Ссылка на генератор кляксы.

Возможности генератора: выбор граней капли и её плавности (скруглённости), можно выбирать тип закрашивания (градиент, сплошной цвет или только границы)

Вот несколько примеров как используют кляксы в дизайне:

Большое изменение затронуло личный кабинет

Тут обновилось всё и очень кардинально — переписана логика и переверстан внешний вид.

Появилась статистика по опубликованным элементам:

Добавились «проекты» — в них можно группировать все элементы из личного кабинета и делиться этим проектом.

Ещё было очень много мелких изменений в том числе по фитбеку от пользователей (на сайте есть всплывашка с гугл формой). Проект постоянно улучшается и растёт.

Совсем недавно увидел, что мой проект появился как инструмент на курсах для SMM специалистов — безумно приятно, что проект помогает людям.

Спасибо всем, кто дочитал этот длиннопост. Буду рад критике и идеям, может что-то вышло неудобно и непонятно — пишите.

Ссылка на сайт — https://gradients.app/ru

Другие посты серии:
Первый
Второй
Третий

Привет, пикабу!

Прошло 3 месяца с первого поста про мой проект — Gradients.app, он про цвета и градиенты.

Расскажу про изменения и обновления за это время.

Вращение градиента

Вращение градиента появилось в мини-карточке, на подробной странице и при генерации нового градиента. Выбирайте нужный угол поворота и скачивайте градиент под выбранным углом. В мини-карточках градиент скачивается в размере 1920 на 1080 px.

Новый вид страницы градиента

Добавление градиента в общую ленту

Зарегистрированные пользователи могут добавить свои градиенты в общую ленту.

Сгенерируйте градиент → сохраните в профиль → перейдите в мои градиенты → отправьте в общую ленту.

Пользователю придёт письмо о добавлении в общую ленту и ссылка на градиент.

Генерация градиентов без грязных переходов

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

Появился инструмент смешивания цветов

Можно выбрать до 4х цветов и два режима смешивания RGB и HSL.

Просто про режимы RGB и HSL:

Смешивая синий и желтый в RGB вы получите серый цвет, а в режиме HSL зеленый. В RGB между синим и желтым на цветовом круге серый цвет поэтому их сложение его и даст, а в HSL получится дуга т.к. цвета на разном уровне.

Появился генератор оттенков

Выбирайте цвет и количество оттенков от 3 до 36. Оттенки генерируются в сторону белого, серого и черного цвета.

Набор сочетаний цвета текста и фона

На мини-карточках есть цвет фона, текста и их контраст, чем он выше тем читаемость лучше.

Можно отсортировать наборы по контрасту, времени и просмотрам.

На подробной странице сочетания добавлен заголовок, абзац текста со всеми буквами алфавита и различные начертания шрифта.

Генерация сочетаний цвета текста и фона

К наборам добавил генерацию и для пользователей.

Пользователь может сгенерировать все цвета случайно или каждый по отдельности. Под цветами добавлены подсказки читаемости для заголовков и обычного текста по стандартам WCAG.

Огромное спасибо за комментарии в предыдущем посте, я всё записал и уже что-то добавил.

Буду рад критике и советам.

Ссылка на сайт — https://gradients.app/ru

Спасибо, всем!

Привет, пикабу!

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

Набор градиентов

На сайте можно скачать градиенты разных размеров в PNG, скопировать цвета по отдельности и CSS-коды градиентов. Градиенты сортируются по цветам, скачиваниям и дате. Градиентов на сегодня 87, добавляю их самостоятельно, если у вас есть классные сочетания — буду рад их добавить.

Можно провалиться внутрь карточки градиента, там будет больше информации и разные размеры для скачивания. Для веб-дизайнера есть CSS-код градиента, а для иллюстраторов — цвета в RGB, CMYK, HEX и HSL.

Генератор градиентов

Можно делать градиенты самим: подбирать цвета, смотреть разные сочетания. Есть возможность выбрать от 1 до 5 цветов, скачивать в FHD, копировать CSS-код и рандомно менять цвета всего градиента или по отдельности.

Наборы палитр

Потом я добавил на сайт ещё один раздел — цветовые схемы. Загрузил картинки в разных стилях, с разными палитрами. Эти палитры можно использовать для оформления сайтов, графического дизайна или даже дизайна интерьеров.

Схемы можно отфильтровать по цветам и скопировать HEX-код каждого цвета палитры. На подробной странице схемы цвета применяются к небольшому web-шаблону: блоки, кнопки и другие элементы раскрашиваются под выбранную палитру.

Генератор палитры по фото

Ещё можно загрузить любую картинку или фотографию и определить палитру на ней. Изображение разбивается на 10 основных цветов. Есть подробные блоки с яркими, приглушенными, темными, светлыми и противоположными цветами. У всех цветов можно скопировать HEX-код.

Проект переведен на английский и частично на китайский язык.

Буду рад критике и идеям, может что-то вышло неудобно и непонятно.

Ссылка на сайт — https://gradients.app/ru

Спасибо, всем!