Как научиться работать с масками? Разбираем на примере Дуба + Алгоритм

Как не запутаться во всем этом безобразии с многослойными масками? Как их группировать, понять и простить? Разбираем на понятном примере, составим алгоритм работы для Figma и Illustrator. Кратко и понятно.

Пример с масками в быту

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

Ля, какая красота<br />
Ля, какая красота

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

Спасибо, бабуль, картина супер<br />
Спасибо, бабуль, картина супер

Определились с расположением фото. Надо повесить на стену. Стена — та же область с рамкой — та же маска. Картину вы можете повесить куда угодно на стене, но вы же не сможете повесить картину за пределами стены: за окном или первой половиной на одной стене, а второй половиной на следующей стене: картина «твердая» и пополам она не согнется, как бы вы ни хотели

И правда — «твердая»<br />
И правда — «твердая»

Резюмирую. У вас есть объект (фото), вы задаете ему ограничение в виде определенной области (рамки). А новую группу (фото под рамкой) размещаете уже на другой области (стена), которая тоже является ограничителем.

Алгоритм: Figma

  • Строим все объекты: обои, рамка, фото, стены
  • По лесенке — сначала все объекты обтравливаем по стене
  • Потом внутри этой группы обрезаем фото рамкой.
Вот так группируется все в Фигме<br />
Вот так группируется все в Фигме

Алгоритм: Illustrator

  • Строим объект — задаем ограничение
  • Строим новое ограничение — применяем маску к первому объекту
А вот так в Иллюстраторе<br />
А вот так в Иллюстраторе

В фигме сначала строим все — потом обрезаем, а в иллюстраторе алгоритм гибкий: объект — обрезал — новое ограничение — обрезал и тд.
Если вам была полезна эта статья — подпишитесь на мой личный телеграм канал, там вы разовьете насмотренность и научитесь фишкам, которые увеличат ваш заработок в 2 раза.
Подпишись, ты не пожалеешь:

11
Начать дискуссию