Ещё раз про цветовые модели в контексте градиентов
От: Shtole  
Дата: 13.01.22 15:16
Оценка: 98 (3)
Уж сколько раз твердили миру, что RGB в дизайне подсасывает надо уметь пользоваться разными цветовыми моделями.

И вот тему неплохо разобрали на примере создания градиентов на разные случаи жизни. (Градиенты в RGB-модели, хоть и обладают таким замечательным качеством, как нативная поддержка в CSS, но при переходе от цвета к цвету проходят через «мёртвую» серую зону, что часто является нежелательным эффектом):



Статья с теорией и интерактивными примерами: https://www.joshwcomeau.com/css/make-beautiful-gradients/

Её перевод на родной русский, но без интерактивности: https://habr.com/ru/post/645165/

Инструмент по созданию градиентов, ради пиара которого, надо полагать, автор и написал ту статью, вполне себе полезный, ИМХО: https://www.joshwcomeau.com/gradient-generator/ Не знаю только, как скажется его применение на производительности на слабых девайсах. (Вводить кучу промежуточных точек это всегда риск).
Do you want to develop an app?
Отредактировано 13.01.2022 15:30 Shtole . Предыдущая версия . Еще …
Отредактировано 13.01.2022 15:27 Shtole . Предыдущая версия .
Отредактировано 13.01.2022 15:17 Shtole . Предыдущая версия .
Re: Ещё раз про цветовые модели в контексте градиентов
От: kov_serg Россия  
Дата: 13.01.22 16:13
Оценка:
Здравствуйте, Shtole, Вы писали:

S>Инструмент по созданию градиентов, ради пиара которого, надо полагать, автор и написал ту статью, вполне себе полезный, ИМХО: https://www.joshwcomeau.com/gradient-generator/ Не знаю только, как скажется его применение на производительности на слабых девайсах. (Вводить кучу промежуточных точек это всегда риск).

Чем это лучше чем растянуть изображение или даже видео?
Re[2]: Ещё раз про цветовые модели в контексте градиентов
От: Shtole  
Дата: 13.01.22 16:27
Оценка:
Здравствуйте, kov_serg, Вы писали:

S>>Инструмент по созданию градиентов, ради пиара которого, надо полагать, автор и написал ту статью, вполне себе полезный, ИМХО: https://www.joshwcomeau.com/gradient-generator/ Не знаю только, как скажется его применение на производительности на слабых девайсах. (Вводить кучу промежуточных точек это всегда риск).

_>Чем это лучше чем растянуть изображение или даже видео?

Так изображение в любом случае надо построить (даже если не программно). А там есть переключатели цветовых моделей (в т.ч. человеко-адаптированной HCL), которые позволяют посмотреть, что в каждом конкретном случае лучше подходит под задумку. Output в CSS — это просто способ сохранить градиент, ну и, я думаю, в 95%+ случаев он всё равно нужен для веба.
Do you want to develop an app?
Re: Ещё раз про цветовые модели в контексте градиентов
От: swame  
Дата: 13.01.22 19:42
Оценка: +1
S>Инструмент по созданию градиентов, ради пиара которого, надо полагать, автор и написал ту статью, вполне себе полезный, ИМХО: https://www.joshwcomeau.com/gradient-generator/ Не знаю только, как скажется его применение на производительности на слабых девайсах. (Вводить кучу промежуточных точек это всегда риск).

Градиенты в интерфейсе вышли из моды лет 20 назад.
Re[2]: Ещё раз про цветовые модели в контексте градиентов
От: Shtole  
Дата: 14.01.22 03:12
Оценка:
Здравствуйте, swame, Вы писали:

S>>Инструмент по созданию градиентов, ради пиара которого, надо полагать, автор и написал ту статью, вполне себе полезный, ИМХО: https://www.joshwcomeau.com/gradient-generator/ Не знаю только, как скажется его применение на производительности на слабых девайсах. (Вводить кучу промежуточных точек это всегда риск).


S>Градиенты в интерфейсе вышли из моды лет 20 назад.


Не пользуйтесь.
Do you want to develop an app?
Re[2]: Ещё раз про цветовые модели в контексте градиентов
От: Homunculus Россия  
Дата: 14.01.22 06:07
Оценка:
Здравствуйте, swame, Вы писали:

S>Градиенты в интерфейсе вышли из моды лет 20 назад.


Тени тоже можно считать подвидом градиентов (в 2D). А тени никуда не уходили
Re[3]: Ещё раз про цветовые модели в контексте градиентов
От: Shtole  
Дата: 14.01.22 06:46
Оценка:
Здравствуйте, Homunculus, Вы писали:

S>>Градиенты в интерфейсе вышли из моды лет 20 назад.

H>Тени тоже можно считать подвидом градиентов (в 2D). А тени никуда не уходили

Слона-то никто и не приметил: после того, как Флэт Материалович выпилил скевоморфизм, потребовалось как-то облагородить внешний вид картинок и градиенты стали ответом. По крайней мере, по версии Apple и Microsoft. Посмотрите на новые иконки/лого в Win 11, что ли.

P.S. Прежде, чем писать, что генератор по приведённой мной ссылке не годится для рисования иконок, пожалуйста, прочтите статью. Она про градиенты и цветовые модели, как, собственно, и указано в заголовке.
Do you want to develop an app?
Re[3]: Ещё раз про цветовые модели в контексте градиентов
От: swame  
Дата: 15.01.22 20:08
Оценка:
Здравствуйте, Homunculus, Вы писали:

H>Здравствуйте, swame, Вы писали:


S>>Градиенты в интерфейсе вышли из моды лет 20 назад.


H>Тени тоже можно считать подвидом градиентов (в 2D). А тени никуда не уходили


В тенях нет той проблемы что в сообщении (переход минуя серый цвет). Они сами серые
Re[3]: Ещё раз про цветовые модели в контексте градиентов
От: Pzz Россия https://github.com/alexpevzner
Дата: 16.01.22 00:49
Оценка:
Здравствуйте, Homunculus, Вы писали:

S>>Градиенты в интерфейсе вышли из моды лет 20 назад.


H>Тени тоже можно считать подвидом градиентов (в 2D). А тени никуда не уходили


Ну, для рисования теней-то как раз RGB модель вполне подходит (в терминах HSL рисование тени заключается в уменьшении L (яркости). В терминах RGB то же самое выражается пропорциональным уменьшением всех трех компонент).
Re[2]: Ещё раз про цветовые модели в контексте градиентов
От: Sinclair Россия https://github.com/evilguest/
Дата: 17.01.22 06:19
Оценка:
Здравствуйте, swame, Вы писали:


S>>Инструмент по созданию градиентов, ради пиара которого, надо полагать, автор и написал ту статью, вполне себе полезный, ИМХО: https://www.joshwcomeau.com/gradient-generator/ Не знаю только, как скажется его применение на производительности на слабых девайсах. (Вводить кучу промежуточных точек это всегда риск).


S>Градиенты в интерфейсе вышли из моды лет 20 назад.

Они же нужны не только в интерфейсе. К примеру, всяческие индикаторы в дашбордах, которые меняют цвет от "плохого" к "хорошему".
Ексель вышел из положения, введя три точки градиента для сonditional formatting и произвольное количество промежуточных точек для градиентной закраски фигур/рисунков.
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
Re: Ещё раз про цветовые модели в контексте градиентов
От: B0FEE664  
Дата: 19.01.22 12:45
Оценка: 5 (1) -1
Здравствуйте, Shtole, Вы писали:

S>Уж сколько раз твердили миру, что RGB в дизайне подсасывает надо уметь пользоваться разными цветовыми моделями.


S>И вот тему неплохо разобрали на примере создания градиентов на разные случаи жизни. (Градиенты в RGB-модели, хоть и обладают таким замечательным качеством, как нативная поддержка в CSS, но при переходе от цвета к цвету проходят через «мёртвую» серую зону, что часто является нежелательным эффектом):


Это линейный градиент:


А это не линейный градиент:


У человека только три цветовых рецептора с перекрывающимся диапазонами шкал. В RGB все три сведены в нормированный куб. Внутри этого куба от точки к точке можно двигаться по прямой, а можно "по дуге". Вот и вся "разработка темы", причём плохая. Обратите внимание: в предлагаемом градиенте длина отрезка жёлтого короче отрезка синего. Из-за этого, если раскрасить, скажем, карту высот местности, то визуально такая карта будет восприниматься странно неравномерно, что не удобно. Вот если бы авторы предложили такую модель, в которой градиент делится на отрезки цветов одинаковой длины, то можно было бы сказать, что авторы молодцы. А так — ни о чём.
И каждый день — без права на ошибку...
Re[2]: Ещё раз про цветовые модели в контексте градиентов
От: Shtole  
Дата: 19.01.22 13:26
Оценка: 80 (1)
Здравствуйте, B0FEE664, Вы писали:

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


А вы дочитайте до конца посмотрите на HCL (а не HSL, как у вас).

https://www.joshwcomeau.com/gradient-generator?colors=ffff00|0000ff&angle=0&colorMode=hcl&precision=8&easingCurve=0.25|0.75|0.75|0.25 (Ссылка работает, а вот в текст движок RSDN зачем-то навставлял всяких &).

Жёлтый и синий занимают там уже более одинаковое место, не так ли?

На самом деле, пока мы это тут обсуждали, появился новый перевод (https://habr.com/ru/company/timeweb/blog/646051/) прошлогоднего материала (https://www.kuon.ch/post/2020-03-08-hsluv/), рассказывающего о достоинствах цветовой модели HSLuv. Там ещё отчётливее сформулирована мысль, что HSL от RGB недалеко ушёл.
Do you want to develop an app?
Отредактировано 19.01.2022 14:43 Shtole . Предыдущая версия . Еще …
Отредактировано 19.01.2022 13:28 Shtole . Предыдущая версия .
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.