Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>6 дек 2022</li>

3 <li>0</li>

4 </ul><h2>Что такое маска? Объясняем простыми словами</h2>

5 Заходят как-то в бар дизайнер и айтишник, а джун их спрашивает: "И как это понимать?"

6 Иллюстрация: Оля Ежак для Skillbox Media

7 Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.

8 Маска - это термин, который встречается и в дизайне, и в айти. Он означает одно и то же? Или в каждой области подразумевается своё значение?

9 Простыми словами объясняют, что такое маска, экспертка в композитинге Ольга Константинова и эксперт в веб-разработке Ануар Мендубаев.

10 Специалистка по композитингу: создаёт целостные изображения, совмещая отдельные слои видеосъёмки, анимации, компьютерной графики. Работала в компании CG Factory и других крупных российских студиях, делала графику для фильмов "Экипаж", "Время первых", "Движение вверх", "Последний богатырь", "Сердце Пармы".

11 <h2>Что такое маска в графике</h2>

12 Русское слово "маска" может путать. Когда мы слышим слово "маска", что мы себе представляем? Я, например, сразу думаю о карнавальной маске: человек надел на себя какую-то маску зайчика или снежинки и будто перевоплотился. Или из косметики маска: наносим, и получается лицо без морщин.

13 Но на языке компьютерной графики это понятие roto, и оно дословно переводится "внутри".

14 Rotoscoping - это буквально искусство обрисовки какого-то объекта, а на привычном русском - рисование маски на нём.

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

16 Это означает, что в кадре или на картинке есть какая-то конкретная область, с которой мы хотим работать. Например, поменять цвет футболки на человеке. И нам каким-то образом нужно выделить эту область и к ней применить другой цвет или перекрасить её.

17 Выделили зелёную область экрана и добавили в неё картинку в правильной проекцииИзображение: Ayaan Mehedi /<a>Behance</a>При работе в 2D-пространстве - с фотографией, иллюстрацией или шотом из видео - для этого есть два способа:

18 <ul><li>Ручная обводка. Например, в Adobe Photoshop есть инструмент "лассо", с помощью которого можно захватить кусочек изображения и прицельно с ним работать. Эта обводка - маска.</li>

19 </ul>Это не синий Гослинг, а маски в программе SilhouetteСкриншот: PixelSpark Studios / Youtube<ul><li>Кеинг. Это означает работать с конкретным цветом, оттенком, яркостью и так далее - например, с зелёным хромакеем. Мы выбираем зелёный цвет специальным инструментом и вычитаем его из изображения. Останутся только те части картинки, где зелёного нет. Это тоже маска.</li>

20 </ul>КеингИзображение: предоставлено Ольгой Константиновой, материал компании CG FactoryУ тех, кто работает с 3D-пространствами, тоже есть возможность выделять отдельные области какого-то объекта на модельке, но для этого уже используют не ротоскопинг и не кеинг. Они тоже рисуют маску, но по xyz-координатам в пространстве.

21 Маску можно применять где угодно и для разных задач. Не только в обработке фотографий и компьютерной графике.

22 Например, как трафарет. Простой пример: надо нарисовать на асфальте указатель к ломбарду - текст со стрелочкой. Человек берёт трафарет с вырезанными контурами, брызгает баллончиком, и получается, что часть поверхности закрыта, а на отверстия он применяет краску. Или мы ходим на пляж и, чтобы плечи не сгорели, мажем их кремом - применяем защиту от солнца. На эту маску солнечные лучи не проходят, а всё остальное тело, естественно, сгорает.

23 Кеинг и ротоскопингИзображение: предоставлено Ольгой Константиновой, материал компании CG FactoryTeam Lead Developer в Antro.cx

24 В IT "маска" может нести в себе разные смыслы. Например, как лук зелёный и лук для стрельбы.

25 Давайте разберём основные термины:

26 <ul><li>Битовая маска.</li>

27 <li>Маска полей.</li>

28 </ul>Битовая маска - это целое число, которое хранит в себе множество логических значений. Любое целое число можно рассматривать как массив булевых значений. Например, 100 - это 1100100 в двоичном коде, где 1 и 0 - true и false.

29 Значит, битовая маска - это двоичное число.

30 Она может применяться в масках подсетей, которые описаны ниже, а также при расчёте контрольных сумм и при создании битовых строк.

31 С битовой маской вы можете столкнуться при работе не только с низкоуровневыми языками программирования, но и с высокоуровневыми - при взаимодействии непосредственно с железом, например при работе с Java или семейством C.

32 Для работы с масками используют побитовые операции AND, OR, XOR, NOT, left/right shift.

33 Битовая маска помогает получить значение определённого бита: для этого нам нужно отключить все остальные биты с помощью побитовой операции AND. Например, чтобы получить значения второго бита (слева) числа 1100100, нужно использовать маску 0100000.

34 Получение второго бита из числа 1100100Изображение: предоставлено Ануаром МендубаевымМаска поля - это такая функциональная деталь, которая помогает пользователю ввести свои данные по определённому паттерну.

35 Маску поля делают в любых формах на сайтах, в приложениях и онлайн-сервисах.

36 Например, маски используют для стандартных полей:

37 <ul><li>телефона;</li>

38 <li>даты рождения;</li>

39 <li>числового, если это поле не реализовано через <input type="number" /></li>

40 </ul>Как работает маска поля?

41 При вводе первого символа маска автоматически подставляет в самое начало +. Например, если ввести 8, то маска исправит 8 на +7. Это сделано не только для удобства юзера, но и для стандартизации формата телефонов, которые хранятся в базе данных.

42 Пример работы маски телефона у "Тинькофф"Скриншот: сайт "Тинькофф" / Ануар МендубаевТакже можно часто встретить маску для поля типа "дата" - например, при вводе своей даты рождения. Маска будет автоматически подставлять разделители по заданному формату - точку, слеш или тире.

43 Обычно маску реализуют только на фронтенде, тем самым определяя формат поля для бэкенда и помогая юзеру при вводе телефона. Стандартная реализация маски - с помощью JavaScript. Есть разные события, которые определяют нажатие клавиши на клиенте, одно из них - keypress.

44 Пример реализации маски ввода только чисел на чистом JavaScriptИзображение: предоставлено Ануаром Мендубаевым<a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>