Про MeshGradient
MeshGradient – це новий інструмент для створення градієнтів на основі WebGL. Інструмент повністю безкоштовний та наразі знаходиться на етапі бета-тестування. Він дає можливість створювати градієнти з необмеженою кількістю кольорів та точок. Кожну точку градієнта можна змінювати, пересувати та налаштовувати її положення власноруч, а також змінювати колір та прозорість. Окрім того, ви можете вибрати готові градієнти у бібліотеці Mesh, відредагувати їх або одразу завантажити на свій пристрій.
![](https://www.komarov.design/content/images/2023/07/d845042a-bb8f-4daa-9dd4-ee227285044d.png.webp)
Особливості MeshGradient
- Необмежена кількість точок: створюйте градієнти з будь-якою кількістю кольорів та точок для налаштування. Інструмент не має обмежень стосовно кількості можливих відтінків, обирайте стільки скільки вам заманеться та стільки скільки потребує ваш проєкт. Стосовно точок так само, Mesh дозволяє використовувати необмежену кількість точок та створювати градієнти зі складними структурами та формами. Виставляйте точки на кордонах кольорів та створюйте дивовижні форми.
- Бібліотека градієнтів: окрім редактора градієнтів, користувачі платформи отримують доступ до вбудованої бібліотеки готових градієнтів, які можна використовувати для власних проєктів. Вона містить десятки різноманітних градієнтів, від простих одноколірних переходів до складних багатоколірних варіантів.
- Гнучка кастомізація кожного пункту градієнта: ви можете змінювати колір, положення і прозорість кожної встановленої точки на градієнті, що дозволяє створювати складні й динамічні градієнти. А зміна параметрів кожної точки дозволяє створювати переходи між кольорами з різною інтенсивністю та плавними перехідними ефектами.
- Простий та інтуїтивний інтерфейс: інтерфейс програми дуже зручний та легкий у використанні. Для цього вам не потрібні глибокі знання WebGL або складних інструментів. Інтуїтивний інтерфейс дозволяє швидко переміщатись між функціями та параметрами, а також отримувати підказки протягом всього процесу.
- Випадковий генератор: окрім ручного налаштування градієнтів, користувачі можуть скористатись функцією випадкового генерування, яка допоможе знайти несподівані та креативні комбінації кольорів.
![](https://www.komarov.design/content/images/2023/07/mesh-gradient-generator.jpg)
Як користуватись
Процес користування генератором надзвичайно простий та супроводжується корисними підказками протягом всього процесу створення. Попри це, ми підготували для вас невелику інструкцію з користування. Поїхали:
Перейдіть на сайт MeshGradient
![](https://www.komarov.design/content/images/2023/07/6273a729d9276867398698.jpg)
На головному екрані ви побачите два квадрати — це ваші робочі зони та ваші кінцеві градієнти над якими ви будете працювати (зауважте, що ви можете експериментувати з обома зонами, але кінцевим результатом буде вважатись градієнт на другому квадраті). На квадратах розміщено по 4 точки у всіх кутах. Ці точки можна переміщати по всій площині градієнта, таким чином ви можете змінювати структуру та форму градієнта. Чому дві області, все просто — для зручності та порівняння.
![](https://www.komarov.design/content/images/2023/07/7efbcd16-b999-4141-a553-08c5ea383edd.png.webp)
До речі, 4 точки — не обмеження. Додавайте будь-яку кількість точок, просто натиснувши на робочу область. Перетягуйте їх, щоб деформувати градієнт. Щоб видалити точку — клацніть Shift та ліву кнопку миші. По класиці, Cmd/Ctrl + Z (+ Shift) використовуємо для скасування минулої дії та повторення.
Внизу, під градієнтами знаходиться палітра, натиснувши на яку, ви зможете обрати кольори для градієнта. Додати їх можна за допомогою кольорового кола або спеціального коду. На панелі кольорів, ви зможете обрати зручний для себе спосіб додавання.
![](https://www.komarov.design/content/images/2023/07/--------------2023-07-18---15.26.27.png)
Принцип редагування зрозумілий. Тепер перейдемо до додаткових інструментів у верхній панелі. За допомогою стрілки ви можете скинути чинний результат та отримати рандомний градієнт, згенерований системою. Таким чином ви зможете знайти найбільш наближений до бажаного градієнт та внести мінімальні корективи.
![](https://www.komarov.design/content/images/2023/07/--------------2023-07-18---15.26.59.png)
Натиснувши на смітник — ви скинете всі ваші налаштування до результату за замовчуванням. Далі, галерея. Тут знаходяться готові градієнти, створені та збережені іншими користувачами Mesh. Вільно використовуйте їх для подальших налаштувань або просто завантажуйте та користуйтесь. У налаштуваннях ви також зможете змінити розмір файли. За замовчуванням це 1:1.
Після всіх маніпуляцій експортуйте ваш градієнт. Для цього натисніть на кнопку “Export”, а програма автоматично додасть файл на ваш пристрій у PNG форматі.
Висновки
Переваги
- Безкоштовний: інструмент повністю безкоштовний та немає жодних обмежень у використанні
- Необмежена кількість кольорів і точок: здатність створювати градієнти з необмеженою кількістю кольорів і точок дозволяє створювати складні та динамічні градієнти з різноманітними ефектами та досягати плавних й збалансованих результатів.
- Галерея готових градієнтів: наявність вбудованої бібліотеки з десятками різноманітних градієнтів дозволяє використовувати готові варіанти або шукати натхнення для власних проєктів.
- Простий інтерфейс: інтуїтивний та простий інтерфейс дозволяє легко використовувати інструмент, навіть без дизайнерських навичок.
Недоліки
- Бета-тестування: як і будь-який продукт на етапі бета-тестування, Mesh може містити помилки або незавершені функції, що можуть призвести до некоректної роботи або збоїв. Хочемо зазначити, що це більше потенційна помилка, бо впродовж тестування інструменту ми цього не помітили.
- Не можна вибрати формат експорту: на жаль, завантажити градієнти можна тільки у PNG форматі, що встановлений за замовчуванням.
💬 Дизайн-чат