Как стать автором
Обновить

Комментарии 34

Можно еще в формулу для центра масс вставить весовой множитель, как функцию расстояния от цвета текущей точки до цвета фона. Это позволит выравнивать неравномерно закрашенные объекты.
Спасибо за интересную идею! Я попробую рассмотреть в дальнейшем способы автоматизации такой формулы для разных платформ. Я достаточно хорошо сейчас представляю, как на входе можно передать параметры из градиента, заданного в svg или css в качестве фона для фигуры. Это подойдет для svg-обработчика на уровне сборки проекта. Для графических редакторов — Adobe Photoshop, Sketch — надо будет поэксперементировать со значениями на входе.
Ждём часть два — алмаз против центра масс!
Ранее в «Алмаз против Круга и его друга2»



Чем закончится эпический квест в поисках баланса в душе упрямого Алмаза? Читайте продолжение в одном из следующих выпусков в блоге Badoo!
Спасибо! Соберу всю обратную связь и постараюсь её отразить в дальнейших статьях, как пример — применение разных методов поиска барицентра для одной сложной фигуры.
Прекрасно! Вот только немного не хватило итоговой картинки с алмазом и показом расчёта «как надо» на её основе.
Согласен, если добавить единый пример, то он станет отличным визуальным лейтмотивом статьи. Так получилось, что именно форма алмаза показала наиболее противоречивые результаты. С одной стороны — визуальные способы показали определенный прогресс в сравнении с автоматическим выравниванием на её примере. С другой стороны — формулы поиска барицентра не дали однозначного, даже с погрешностью, положения фигуры по вертикали, хотя по горизонтали прослеживается явная симметрия и там автоматическое выравнивание работает правильно. И с третьей стороны — могло создаться впечатление, что на примере одной фигуры ситуация с выравниванием сильно упрощается — как будто для одной фигуры нам потребуется один точный метод.

Поэтому я отказался от этой идеи, сделав статью более абстрактной, но сохранив её практическое направление: применение методов оптического выравнивания. Для простых фигур использую одни методы, для сложных — другие, максимально автоматизируя процесс, сокращая время для решения задач. Тем самым каждый заинтересовавшийся читатель сможет самостоятельно сделать выбор, как именно ему стоит поступать в такой ситуации и какой способ решения задачи применять: обратится к дизайнерам, провести один раз ревизию иконок вручную или применять автоматизированные способы.
НЛО прилетело и опубликовало эту надпись здесь
Про алмаз — согласен в первых двух пунктах. Но третий пункт не совсем корректен, он слишком сильно обобщает большой пласт фигур. Я стремился показать, что есть разные способы для разных фигур.
Я вижу это так:
1) Автоматический способ выравнивания в графических редакторах — его область применения и ограничения.
2) Распространенные в сети ручные способы выравнивания из области графического дизайна — их область применения и ограничения.
3) Наиболее общие ручные способы выравнивания из области геометрии — опять же область применения и ограничения.
4) Способ выравнивания из области геометрии, который можно автоматизировать. И вновь говорю, что он не панацея.

Я рассматривал этот вопрос с точки зрения разработчиков, не дизайнеров. Мой вывод заключался в том, что автоматизировать можно не все и в ряде случаев — стоит обращаться к дизайнерам.

Здесь скорее вопрос с какой стороны взглянуть на проблему. Со стороны опытного дизайнера, например, вопросов в том, как выполнять оптическое выравнивание — нет. Ему не нужны подходы из области геометрии, указанные статье, он будет применять другие способы. А для разработчиков в большинстве случаев можно решить вопрос самостоятельно.

И все-таки, не хватает результата работы скрипта в конце

Добавил иллюстрацию с результатом работы скрипта после инструкции по его применению.
НЛО прилетело и опубликовало эту надпись здесь
Да, это опечатка с моей стороны. Дело в том, что при разборе теории я собрал способы для плоских и трехмерных фигур, затем при верстке статьи я оценил её масштабы и убрал блок про трехмерные фигуры. Данное уточнение осталось с тех самых пор.
НЛО прилетело и опубликовало эту надпись здесь
Спасибо, поправил текст и обновил илллюстрации!
За использование барицентра — респект. Хотя у меня вопрос: будет ли совмещение барицентров двух любых фигур всегда ассоциироваться с «отцентрировано»?

Второй вопрос: если изображение (вложенное) более чем одноцветное, надо ли учитывать цвет (яркость?) как коэфицент при вычислении «центра тяжести»?
Спасибо! Очень интересные вопросы.

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

Во втором вопросе важно сделать коэффициенты поправки на цвет. Достаточно много исключений: прозрачность, пересекаемость цвета фигуры и фоны. Думаю, что это тоже можно будет описать отдельной статьей.

Я совсем не по теме. У компании в блоке «ССЫЛКИ» используется сервис сокращения ссылок, результате которого вполне понятные:
tech.badoo.com, team.badoo.com, github.com/badoo
превратились в обфусцированную тыкву:
bit.ly/badootech, bit.ly/17nmSgb, bit.ly/14BRIDL.
Плюс хабр показывает для всех троих только домен — bit.ly.
Возможно, стоит отказаться от сокращения ссылок?

Да, хорошая идея. Спасибо. :)
Алмаз должен быть с острыми гранями
Да, это определенным образом облегчит задачу. В случае, если мы не можем менять дизайн, то для выравнивания следует обратиться к дизайнерам. Я попробую разобрать такой случай более детально в другой статье.
Статью ещё не прочитал, но уже по картинкам вижу, что хорошая и полезная. Так многие начинающие дизайнеры (в вслед за ними и верстальщики) выравнивают всё автоматически, а не на глаз. И из-за этого обычно все кнопки и иконки на сайтах кривые.
С первой картинки подумал про сопромат. Как формулу увидел все стало на свои места — момент инерции сечения.
Буду ждать продолжение статьи.
И я тоже.
Это самый интересный эпизод. Дело в том, что чем больше людей будет участвовать в процессе дизайна / верстки / разработки, то тем больше разных мнений может быть по поводу, как правильно выравнивать. Проблема возникает, когда каждый участник понимает этот вопрос по-своему и в итоге на проекте могут быть иконки с разным выравниванием.

Для коллектива даже из 2 человек лучше всего договорится об использовании одного подхода к оптическому выравниванию.

Мне кажется, что идея с вписыванием в круг просто не работает. Как пример я могу привести квадрат с линией, выходящей из центра стороны и равной длине стороны.
Эта идея явно не работает для ряда фигур. Не буду обобщать, что она вообще не работает: я попробовал этот метод на разных иконках и получилось, что соотношение положительных и отрицательных результатов примерно равно 50/50. Я специально оставил этот метод и написал свое мнение в виде рекомендаций, так как в интернете нет явной критики или обсуждения этих методов.

Думаю, что причина кроется в том на кого ориентирована статья. Метод изначально ориентирован на людей с дизайн-опытом, который понимает, когда его можно применять, а когда — нет. Для верстальщиков и разработчиков без опыта в дизайне подобный метод превращается в «рисование совы». Поэтому я попробовал добавить более универсальные решения в статью,
Я считаю, что вращение — не лучший способ центрирования, надо отталкиваться от центра массы фигуры.
Согласен, для многих разработчиков такой способ затратен по времени и обладает рядом ограничений, которые я упомянул в статье перед блоком с теорией.

Но для ряда специалистов он будет оптимален, например, для web-дизайнеров и тех, кто совмещает их функции в своей работе. И по моему мнению им имеет смысл знать об ограничениях, которые имеют данные способы, о чем я писал в примерах использования метода вращения в этой статье.
НЛО прилетело и опубликовало эту надпись здесь
Возможно, но это означает, что мы делаем очень серьезное обобщение о том, что можно использовать один универсальный способ. Если такой способ выравнивания существовал, то он уже применялся в графических редакторах и в работе.
Вот интересный сервис, выполняющий описываемое в статье вращение объекта, чтобы понять, насколько он отклоняется от центра (если лень возиться с плагинами и прочим). Пользоваться, разумеется, надо с умом, так как, как и говорилось, способ подходит не для любой фигуры

javier.xyz/visual-center
Зарегистрируйтесь на Хабре, чтобы оставить комментарий