Пиксельная сетка в вебе. Как сделать чёткую иконку?
✏️ Рассказываю о том, что такое пиксельная/координатная сетка и почему это знание важно при работе с SVG. Рассматриваем процесс растеризации векторной графики; выясняем, почему вектор может отображаться "плохо" и как сделать хорошо. Узнаём, какую вариативность нам даёт использование экранов с повышенной плотностью пикселей (ретина-дисплеев) и что это вообще такое. 🔴 Таймлайн: 00:00 - Введение 01:24 - Что такое пиксельная сетка? 01:53 - Рассматриваем пиксельную сетку в Figma, определяемся с ограничениями пикселя 02:43 - Смотрим на пиксели в растровой графике 03:45 - Рисуем иконку и разбираемся с растеризацией 06:38 - Расстраиваемся тому, что нельзя впихнуть невпихуемое и понимаем, почему 09:13 - Что значит "мыльная иконка"? 10:18 - Пример "мыльных" иконок, нарисованных не по сетке 11:58 - Исправляем иконки и радуемся результату 13:58 - Выводим правила для "чётких" иконок 15:50 - Когда можно рисовать не по сетке? 18:00 - Рисуем иконку не по сетке, но чтобы было хорошо 20:32 - Так как в итоге правильно? 24:06 - Смягчаем правила для "чётких" иконок 26:18 - Что такое экраны с повышенной плотностью пикселей (ретина-дисплеи)? 27:16 - Зачем вообще нужны ретина-дисплеи? 29:22 - Ретина-дисплеи на практике (растровая графика) 31:24 - Что нам делать с ретиной в веб-разработке? 32:10 - Логический пиксель, физический пиксель 33:53 - Рисуем векторную иконку и смотрим, как она выглядит при разной плотности пикселей 35:58 - Ещё раз удивляемся тому, как на современных экранах можно делать с вектором всё что угодно 36:50 - Итоги, выводы, заключение 📚 Ссылки из видео: 〰️Презентация Retina-дисплея Стивом Джобсом: https://www.youtube.com/watch?v=Hq8j5vsqCCo 〰️Дизайн-система Consta: https://consta.design/ 〰️Гайдлайн по иконкам Material Design v2: https://m2.material.io/design/iconography/system-icons.html 〰️Информация об иконках Material Design v3: https://m3.material.io/styles/icons/overview 👨💻Автор: 〰️ Github: https://github.com/MorevM 〰️ Telegram-канал: https://t.me/morev_online 〰️ Личный telegram: https://t.me/max_seainside 〰️ Оборудование: https://github.com/MorevM/use/ --- Music I Use: Bensound.com/free-music-for-videos License code: XLKPKAAUKEBFF0QW
✏️ Рассказываю о том, что такое пиксельная/координатная сетка и почему это знание важно при работе с SVG. Рассматриваем процесс растеризации векторной графики; выясняем, почему вектор может отображаться "плохо" и как сделать хорошо. Узнаём, какую вариативность нам даёт использование экранов с повышенной плотностью пикселей (ретина-дисплеев) и что это вообще такое. 🔴 Таймлайн: 00:00 - Введение 01:24 - Что такое пиксельная сетка? 01:53 - Рассматриваем пиксельную сетку в Figma, определяемся с ограничениями пикселя 02:43 - Смотрим на пиксели в растровой графике 03:45 - Рисуем иконку и разбираемся с растеризацией 06:38 - Расстраиваемся тому, что нельзя впихнуть невпихуемое и понимаем, почему 09:13 - Что значит "мыльная иконка"? 10:18 - Пример "мыльных" иконок, нарисованных не по сетке 11:58 - Исправляем иконки и радуемся результату 13:58 - Выводим правила для "чётких" иконок 15:50 - Когда можно рисовать не по сетке? 18:00 - Рисуем иконку не по сетке, но чтобы было хорошо 20:32 - Так как в итоге правильно? 24:06 - Смягчаем правила для "чётких" иконок 26:18 - Что такое экраны с повышенной плотностью пикселей (ретина-дисплеи)? 27:16 - Зачем вообще нужны ретина-дисплеи? 29:22 - Ретина-дисплеи на практике (растровая графика) 31:24 - Что нам делать с ретиной в веб-разработке? 32:10 - Логический пиксель, физический пиксель 33:53 - Рисуем векторную иконку и смотрим, как она выглядит при разной плотности пикселей 35:58 - Ещё раз удивляемся тому, как на современных экранах можно делать с вектором всё что угодно 36:50 - Итоги, выводы, заключение 📚 Ссылки из видео: 〰️Презентация Retina-дисплея Стивом Джобсом: https://www.youtube.com/watch?v=Hq8j5vsqCCo 〰️Дизайн-система Consta: https://consta.design/ 〰️Гайдлайн по иконкам Material Design v2: https://m2.material.io/design/iconography/system-icons.html 〰️Информация об иконках Material Design v3: https://m3.material.io/styles/icons/overview 👨💻Автор: 〰️ Github: https://github.com/MorevM 〰️ Telegram-канал: https://t.me/morev_online 〰️ Личный telegram: https://t.me/max_seainside 〰️ Оборудование: https://github.com/MorevM/use/ --- Music I Use: Bensound.com/free-music-for-videos License code: XLKPKAAUKEBFF0QW