Векторная графика *

Источник: Dribbble

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

Как известно, кривыми Безье нельзя построить дугу окружности или эллипса. В этой статье рассматриваются кривые, лишённые такого недостатка.

Фотостоки, как много в этом слове. Если вкратце, для тех, кто не в теме, фотостоки – это ресурсы, куда вы можете загружать свои фото, видео, вектор и т.п. для последующей продажи.
Сегодня мы поговорим о том, как обстоят дела по состоянию на 2020 год.

Личный опыт присутствует, ибо по сей день что-то лениво гружу на продающие площадки. Об этом и многих интересных тонкостях мы и поговорим далее.

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

Авторы Akira заявили, что их цель — создание инструмента для профессионалов, при помощи которого можно готовить качественные макеты интерфейсов. Наверное, редактор можно назвать конкурентом Sketch, Figma, Inkscape и Adobe XD, но заточен он исключительно под Linux. От Inkscape он также отличается тем, что не ориентирован на печатный дизайн.

Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.

Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.

Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.

Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.

В данной статье описывается, как с помощью программы Microsoft Excel обрабатывать информацию из детализации телефонных вызовов, получая на выходе векторную диаграмму, которая наглядно отражает данные телефонные вызовы во времени и по дням. Сама по себе данная диаграмма напоминает диаграмму Ганта, которая чаще всего применяется для иллюстрации плана работ по какому-либо проекту.

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

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



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

Вам никогда не хотелось создать красивую анимированную главную страницу для вашего сайта? А представить флагманский продукт в лучшем виде с помощью тщательно проработанных анимаций? А как насчет того, чтобы привлечь внимание пользователей к ссылкам меню, движущимся по замысловатой траектории?

Для того чтобы выполнить подобные пожелания, актуальные для современного мира веб-разработки, CSS-модуль Motion Path Module Level 1 дает возможность использовать абсолютно новый вид анимаций и позволяет перемещать HTML-элементы по заданной траектории.

Мы живём в удивительное время. То, что раньше было невероятным, сегодня у нас буквально «валяется под ногами». В наши дни любой человек может сделать свой собственный мультфильм. Анимационные программы упрощают и ускоряют этот процесс настолько, что даже один человек, не будучи аниматором, может сделать настоящий анимационный фильм.

С удовольствием поделюсь полученным мною опытом. Речь будет идти о 2D-анимации, но многие моменты равно применимы и к 3D. Кому будет интересно ссылка на сам мультфильм в конце поста.

Уже год как я сменил работу на новую. В этой статье я хочу поделиться опытом, накопленным на прошлом месте. Здесь рассмотрены методы аппроксимации кривых Безье, а также обработка исключительных случаев, при которых простые алгоритмы показывают себя не очень хорошо. Все, кому близка тема векторной графики — прошу под кат.

Привет Хабр! В предыдущих частях цикла (раз, два) мы рассматривали тайловую архитектуру мобильных GPU, а также классифицировали различные семейства GPU, представленные у пользователей. В этой части мы рассмотрим приемы, которые помогут писать быстрые шейдеры для мобильных GPU.

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

В этом очень коротком очерке я расскажу о нюансах, из-за которых масштаб 100% в графическом редакторе на экране может не совпадать с реальным размером.

Потребовалось мне допечатать на существующий лист бумаги немного текста и графики. Решил напросвет подогнать. Выставил масштаб 100%, прикладываю лист к экрану, а между тем, что на экране и на бумаге, разбег процентов на 20%.

Всегда всю анимацию делал в Adobe Animate CC. И тут все эти умирания флэша, множественные отпевания, песнопения, которые, наверняка, преувеличены. Но осадочек, как это бывает, остался. Остался в виде вопроса: А вообще есть ли что-то лучше для 2D-анимации, кроме адобовских решений? Не буду пересказывать как, но после множества инсталляций и «де», я пришёл к Toon Boom Harmony.

Если много читать лень, то Да. Ответ «Да». Я остался на Harmony и назад уже не хочу. Кому же интересно узнать почему и примерить узнанное под свои нужды, рекомендую читать дальше.

Гильоши — это характерные узоры на бумажных деньгах и других ценных бумагах. Подробный рассказ о них с отступлением в историю можно найти в предыдущей статье. Там же приводился и алгоритм рисования, строящий гильоши по точкам.

Довольно бесполезный, надо заметить, если мы рисуем их не просто для развлечения, а в практических целях — например, чтобы добавить в дизайн тех самых ценных бумаг. Тысячи точек будут только тормозить редактор, а нормально вывести результат все равно не получится — вместо настоящих непрерывных линий там будет какой-то результат усреднения точек, сделанный как бог на душу положит.

Поэтому пришло время подумать о другом алгоритме — который давал бы сразу вектора. Поскольку в распространенных редакторах для кривых линий предлагается только интерполяция кривыми Безье, на них и будем ориентироваться.

RoughJS это маленькая (<9 КБ) графическая библиотека JavaScript, позволяющая рисовать в эскизном, рукописном стиле. Она позволяет рисовать на <canvas> и с помощью SVG. В этом посте я хочу ответить на самый популярный вопрос о RoughJS: как это работает?

Немного истории

Очарованный изображениями рукописных графиков, схем и эскизов, я, как истинный нерд, задался вопросом: можно ли создавать такие рисунки с помощью кода, как можно точнее имитировать рисунок от руки, в то же время сохранив возможность программной реализации? Я решил сосредоточиться на примитивах — линиях, многоугольниках, эллипсах и кривых, чтобы создать целую библиотеку 2D-графики. На её основе можно создавать библиотеки и графики для рисования графиков и схем.

Вкратце изучив вопрос, я нашёл статью Джо Вуда и его коллег под названием Sketchy rendering for information visualization. Описанные в ней техники стали основой библиотеки, особенно в рисовании линий и эллипсов.

В 2017 году я написал первую версию библиотеки, которая работала только на Canvas. Решив задачу, я потерял к ней интерес. Год спустя я много работал с SVG, и решил адаптировать RoughJS для работы с SVG. Также я изменил структуру API, сделав её более простой, и сосредоточился на простых векторных графических примитивах. Я рассказал о версии 2.0 на Hacker News и внезапно она обрела огромную популярность. В 2018 году это был второй по популярности пост ShowHN.

Моя игра Dragons Abound создаёт карты в векторном графическом формате SVG. Векторная графика имеет множество особенностей (например, зум без потерь), что удобно для карт. Также векторная графика хороша для создания чётких линий, например, чернильных контуров:


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


потребуются десятки тысяч различных элементов. По сути, каждое пятно серого цвета в изображении будет задаваться отдельно. Ещё более проблематичны другие элементы, например, размытые изображения.

Это достаточно серьёзное ограничение векторной графики, поэтому в SVG добавлены хитрости, позволяющие более эффективно воспроизводить некоторые из подобных эффектов текстур. Я исследую некоторые из этих функций SVG для создания эффекта, напоминающего карандашную линию. Разумеется, существует множество более сложных решений для воссоздания карандашных линий. Об этой теме написаны целые научные статьи. Но я просто надеюсь создать довольно простой фильтр, обеспечивающий приемлемый результат.

Несколько месяцев в свободное время занимался разработкой нового формата изображений.

Акценты сделаны на:
1. Сжатие без потерь
2. Хорошая векторизация одноцветных объектов
3. Более быстрое ДЕкодирование, чем у других форматов
4. Несколько шаблонов кодирования при едином шаблоне декодирования в зависимости от того, что нужно 1, 2, 3 или что-то среднее
5. Сжатие любых векторных изображений (с потерями, но можно указать до какого масштаба необходима абсолютная точность)
6. Стилизация (главным образом для придания уникальности изображению + видеоэффекты и т.д.)
7. Также возможна прогрессивность (отображение по ходу загрузки) при установке неполного сжатия или в 27% случаев
8. Имитация рисования изображения
9. Добавление возможностей с обратной совместимостью

А вот подробная презентация формата:

SVG и canvas — это технологии, которые можно использовать для рисования чего-либо на веб-страницах. Поэтому их стоит сравнить и разобраться в том, когда стоит применять SVG, а когда — canvas. Даже весьма поверхностное понимание сути этих технологий позволяет сделать вполне осознанный выбор. Собственно говоря, вот — две типичных ситуации, в одной из которых стоит предпочесть SVG, а в другой — canvas:

• Нужно нарисовать небольшую иконку? Это, безусловно, территория SVG.
• Нужно создать интерактивную браузерную игру? Тут, определённо, нужна технология canvas.

Автор статьи, перевод которой мы сегодня публикуем, говорит, что знает о том, что пока не раскрыл причины такого выбора. Но он надеется, что эти причины станут совершенно очевидными после того, как он поделится некоторыми подробностями об SVG и canvas.

Субпиксельный рендеринг (вики)— способ увеличить видимое разрешение LCD или OLED дисплея путем рендеринга пикселей с учетом свойств экрана. Используется тот факт, что каждый пиксель экрана фактически состоит из отдельных красных, зеленых и синих субпикселей.

В посте я хочу рассказать о методе Haarmony LCD, который применяется в последних версиях freetype, и как его адаптировать для произвольных векторных изображений и конфигураций субпикселей.

Фотографией, сложно передать преимущества. Для сравнения можете посмотреть на следующую картинку. Если одна из конфигураций пикселей такая же, как у вашего монитора, разница должна быть существенной.

Привет! Приглашаем вас на первый митап для дизайнеров в Авито. Он посвящён важным составляющим процесса и профессии в целом — «дизайн-атомам» (не путать с атомарным дизайном, описанным Брэдом Фростом). В первом выпуске — реальные кейсы не только и не столько об эстетике, сколько о том, как дизайн помог бизнесу и работе команды. Среди прочего, обсудим буквы, цвета и форму.

Планируем и в будущем звать типографов, арт-директоров, иллюстраторов, менеджеров, продуктовых и промышленных дизайнеров, чтобы они делились своим опытом.

Встреча пройдёт 26 октября в 12:00. Регистрируйтесь сами и приглашайте коллег. Под катом — тезисы выступлений, ссылки на регистрацию и видеотрансляцию митапа.