Анимация текста с помощью обтравочной маски в фотошоп

В предыдущем уроке мы изучили основы и основы использования обтравочных масок в Photoshop, чтобы скрыть нежелательные части слоя от просмотра в наших проектах и ​​документах.

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

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

Как мы увидим в этом уроке, слои Type в Photoshop отличаются от слоев на основе пикселей тем, что в слое Type нет реальных «прозрачных» областей. Сам тип просто становится содержимым слоя.

Когда мы используем обтравочную маску со слоем «Текст», любая часть изображения на верхнем слое, которая находится непосредственно над текстом, остается видимой в документе, а области изображения, которые выходят за пределы текста, скрыты.

Это создает иллюзию, что изображение на самом деле находится внутри текста! Посмотрим, как это работает.

Как и в предыдущем уроке, я буду использовать Photoshop CS6 здесь, но все, что мы рассмотрим, относится к любой последней версии Photoshop.

Вот документ, который я открыл, содержащий два изображения. Первое фото в нижнем фоновом слое будет использоваться в качестве основного изображения для проекта ( друзья наслаждаются снегопадом из Shutterstock):

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

И если я включу верхний слой, нажав на его значок видимости на панели слоев:

Анимация текста с помощью обтравочной маски в Фотошоп
Нажав значок видимости слоя («глазное яблоко») для верхнего слоя.

Мы видим изображение, которое я собираюсь разместить внутри некоторого текста ( абстрактный зимний фон от Shutterstock):

Это интересно: Easy Soft Glow Effect с фотошопом

Анимация текста с помощью обтравочной маски в Фотошоп
Изображение, которое будет внутри текста.

Шаг 1: добавь свой текст

Давайте продолжим и добавим текст в документ. Во-первых, я хочу, чтобы мой текст отображался перед другими изображениями (чтобы я мог видеть, что я делаю), поэтому, прежде чем добавить какой-либо текст, я нажму на верхний слой на панели «Слои», чтобы выбрать его, и сделать его активным:

Анимация текста с помощью обтравочной маски в Фотошоп

С выбранным верхним слоем я добавлю свой текст. Если вам нужна дополнительная информация о работе с шрифтом в Photoshop, обязательно ознакомьтесь с нашим полным руководством по Photoshop Type Essentials , первым из нескольких руководств, охватывающих все, что вам нужно знать. Здесь я начну с выбора инструмента «Текст» на панели «Инструменты»:

Выбор инструмента «Текст».

Выбрав инструмент «Текст», я выберу свой шрифт на панели параметров в верхней части экрана.

Когда вы знаете, что будете размещать изображение внутри своего текста, вам обычно нужно выбрать шрифт с толстыми буквами, чтобы вы могли видеть больше изображения.

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

Анимация текста с помощью обтравочной маски в Фотошоп
Выбор параметров шрифта на панели параметров.

Выбрав детали моего шрифта, я щелкну внутри документа с помощью инструмента «Текст», чтобы начать добавление текста. Я наберу слова «Счастливых праздников»:

Анимация текста с помощью обтравочной маски в Фотошоп
Добавление типа в документ.

Когда вы закончите, нажмите галочку на панели параметров, чтобы принять тип и выйти из режима редактирования текста:

Анимация текста с помощью обтравочной маски в Фотошоп
Нажав на галочку в панели параметров.

Если мы посмотрим на панель «Слои», то увидим новый слой «Тип», который был помещен над двумя другими слоями. Photoshop размещает новые слои типа «Текст» непосредственно над тем, который был ранее активен, поэтому сначала я щелкнул «Слой 1», чтобы выбрать его перед добавлением текста:

Анимация текста с помощью обтравочной маски в Фотошоп
Панель «Слои» с новым слоем «Тип».

Шаг 2: измените размер текста с помощью бесплатной трансформации

К сожалению, размер шрифта, который я выбрал на панели параметров, был слишком мал для моего дизайна, но это нормально, потому что есть простой способ изменить размер текста . Мы просто будем использовать команду Photoshop Free Transform .

Я выберу его, зайдя в меню « Правка» в строке меню в верхней части экрана и выбрав « Свободное преобразование» .

Или я могу нажать Ctrl + T (Win) / Command + T (Mac) на клавиатуре, чтобы выбрать Free Transform с помощью ярлыка. В любом случае это хорошо:

Анимация текста с помощью обтравочной маски в Фотошоп
Собираемся Правка> Свободное Преобразование.

Это помещает поле Free Transform и обрабатывает (маленькие квадраты) вокруг типа. Чтобы изменить размер шрифта, я просто нажму и перетащу угловые маркеры наружу, чтобы сделать текст настолько большим, насколько мне нужно.

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

Когда вы закончите, нажмите Enter (Win) / Return (Mac) на клавиатуре, чтобы принять преобразование и выйти из команды Free Transform:

Удерживая Shift и перетаскивая угловые маркеры, измените размер текста.

Шаг 3: создайте обтравочную маску

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

Изображение, которое я хочу разместить внутри своего текста, находится на слое 1, но слой 1 в настоящее время находится ниже моего слоя типа, и, как мы узнали из учебного пособия « Обтравочные маски» , нам нужен слой, который будет служить обтравочной маской (в этом case, слой Type) должен быть ниже слоя, который будет «обрезан» (Layer 1). Это означает, что мне сначала нужно переместить слой типа ниже слоя 1.

Чтобы переместить слой «Тип», я щелкну по нему на панели «Слои» и, удерживая нажатой кнопку мыши, начну перетаскивать слой вниз, пока не увидите горизонтальную полосу выделения между слоем 1 и фоновым слоем:

Перетаскивая слой Тип под Слой 1.

Когда появится панель выделения, я отпущу кнопку мыши, и слой Type будет перемещен туда, где он мне нужен, прямо под Layer 1:

Слой 1 теперь расположен над слоем Тип.

Далее нам нужно убедиться, что у нас есть слой, который будет «обрезан» выбранной обтравочной маской, поэтому я выберу слой 1:

Это интересно: Как выпрямить кривые фотографии в фотошопе

Выбор слоя изображения над слоем Тип.

Теперь, когда слой «Тип» находится прямо под изображением и выбран слой «Слой», я добавлю обтравочную маску, зайдя в меню « Слой» в верхней части экрана и выбрав « Создать обтравочную маску» :

Идем в Layer> Create Clipping Mask.

Если мы снова посмотрим на панель «Слои», то увидим, что слой 1 теперь имеет отступ вправо, с маленькой стрелкой слева от миниатюры предварительного просмотра, указывающей вниз на слой типа под ним. Это говорит нам о том, что слой 1 теперь обрезается слоем типа:

Панель «Слои» с обтравочной маской.

И если мы посмотрим в окно документа, то увидим, что изображение на уровне 1 теперь оказывается внутри текста! Это не совсем внутри текста. Это выглядит так только потому, что любая часть изображения, которая не находится непосредственно над типом, скрыта от просмотра благодаря обтравочной маске:

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

Шаг 4: измени текст

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

Нажав на слой типа, чтобы выбрать его.

Затем я возьму инструмент « Перемещение» в Photoshop с верхней части панели «Инструменты»:

Выбор инструмента перемещения.

Выбрав слой «Тип» и инструмент «Перемещение», я просто нажму на текст в документе и перетащу его над двумя людьми на фотографии. Даже если текст движется, изображение внутри текста остается на месте. Он не двигается вообще. Таким образом, с текстом, который теперь находится выше в документе, мы видим другую часть изображения внутри текста.

Текст и изображение внутри него на самом деле можно перемещать независимо друг от друга , поэтому, если бы я захотел, я мог бы также выбрать слой изображения (Слой 1) на панели «Слои» и, держа инструмент «Перемещение» в руке, перетащить изображение. вокруг внутри текста, чтобы переместить его.

Это будет перемещать изображение, пока текст остается на месте:

Используйте инструмент «Перемещение» для перемещения текста или изображения внутри текста (в зависимости от того, какой слой выбран на панели «Слои»).

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

Если вы вдруг поняли, что допустили орфографическую ошибку, просто выберите инструмент «Текст», выделите ошибку, щелкнув и перетащив ее, введите исправление, а затем нажмите галочку на панели параметров, чтобы принять ее.

Или, если вам не нравится шрифт, который вы выбрали изначально, снова выберите инструмент «Текст», щелкните слой «Тип» на панели «Слои», чтобы сделать его активным, затем выберите другой шрифт на панели параметров (вам может потребоваться использовать «Свободный»).

Преобразуйте снова, чтобы изменить размер шрифта, если вы измените шрифты). Опять же, я расскажу обо всем этом и многом другом, начиная с нашего урока Photoshop Type Essentials .

Читайте также:  Создание механической девушки в photoshop

Деформирование и изменение типа

Кроме того, поскольку тип все еще является типом, это означает, что вы можете даже деформировать его в различные формы! Сначала убедитесь, что у вас выбран слой «Тип» на панели «Слои», затем перейдите в меню « Правка» в верхней части экрана, выберите « Преобразование» , а затем выберите « Деформация» :

Собираемся Edit> Transform> Warp.

Выбрав команду «Деформация», посмотрите в крайнем левом углу панели параметров в верхней части экрана, и вы увидите параметр Деформация , для которого по умолчанию установлено значение « Нет» :

Вариант деформации на панели параметров.

При нажатии на слово «Нет» открывается раскрывающийся список нескольких предустановленных стилей деформации . В качестве примера я выберу один из самых популярных стилей — Wave :

Выбор Wave из списка предустановленных стилей деформации.

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

Текст после применения команды Деформация.

Добавление стилей слоя

Мы также узнали из учебного пособия « Обтравочные маски», что мы можем добавлять стили слоя в обтравочные маски, и это верно даже при использовании типа. Чтобы быстро закончить, я добавлю стиль слоя к тексту, чтобы он лучше сочетался с основной фотографией позади него. Сначала я выберу слой «Тип» на панели «Слои»:

  • Затем я нажму на иконку Layer Styles внизу панели Layers:

Нажав на значок Стили слоя.

Я выберу Outer Glow из появившегося списка стилей слоя:

Откроется диалоговое окно «Стиль слоя» в Photoshop с настройками «Внешнее свечение» в средней колонке. Я изменю цвет моего внешнего свечения белый, нажав на образец цвета и выбрав белый из палитры цветов , которая появляется.

Затем я уменьшу непрозрачность свечения до 30% и увеличу размер свечения примерно до 32 пикселей .

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

  1. Я нажму OK в верхнем правом углу диалогового окна Layer Style, чтобы закрыть его. Мы можем видеть стиль Outer Glow под слоем Type на панели Layers:

Стиль Outer Glow появится под слоем Type.

И с этим мы закончили! Вот мой окончательный результат с добавлением Outer Glow к тексту (я также использовал инструмент Move Tool, чтобы немного переместить тип вниз, чтобы он выглядел более по центру между двумя девушками и верхней частью изображения):

Окончательный результат «изображение в тексте».

Источник: https://wm-web.org/osnovy/obtravochnye-maski-i-tip-razmeschenie-izobrazheniya-v-tekste-s-pomosch-yu-photoshop.html

Фотошоп для начинающих: Обтравочная маска (Clipping Mask) ., Уроки

Сегодня мы познакомимся с еще одним необходимым инструментом Фотошоп: Обтравочная маска. Что же она из себя представляет и в чем состоит необходимость ее использования при работе?

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

Теоретически это довольно сложно понять, так что мы рассмотрим инструмент Обтравочной маски (Clipping Mask) на практических примерах данного урока.

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

Анимация текста с помощью обтравочной маски в Фотошоп

Вы могли бы данный эффект сделать, создав выше изображения слой прямоугольника со скругленными углами и снизив его непрозрачность (Opacity) до 0% для видимости основного изображения внутри него. Но если бы вдруг вам захотелось изменить форму фото с прямоугольной на любую другую? Тогда пришлось бы начинать все сначала, расходуя драгоценное время.

Идеальный способ легко сделать изменение формы изображения – это применить Обтравочную маску (Clipping Mask) . По своей сути, обтравочная маска состоит из двух слоев:

1. Основной слой (базовый), который обеспечивает форму (в данном случае прямоугольник со скругленными углами);

2. Второй слой, «обрезанный» по форме предыдущего слоя и находящийся внутри него.

Это довольно удобный метод, который будет неотъемлемой частью вашего творчества.

Создание Обтравочной маски.

Для создания обтравочной маски, сначала убедитесь, что базовый (формовой) слой находится под слоем, который вы хотите обрезать. Удерживая клавишу Alt, наведите курсор между двумя этими слоями. Курсор изменит свою форму на значок двух соединенных кружков со стрелочкой слева. Нажмите кнопку мыши.

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

Другой способ создания Обтравочной маски осуществляется через основное меню программы. Выберите вкладку Слои-Создать обтравочную маску (Layer-Add Clipping Mask) . Горячие клавиши вызова обтравочной маски – Ctrl+Alt+G.

Анимация текста с помощью обтравочной маски в Фотошоп

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

Анимация текста с помощью обтравочной маски в Фотошоп

Удалить обтравочную маску можно также, удерживая Alt и кликнув между ее слоями.

Преимущества использования Обтравочной маски.

Существуют два преимущества использования Обтравочной маски перед деструктивным (разрушающим) редактированием.

Во-первых, внутри обтравочной маски вы всегда можете изменить композицию слоев, меняя их порядок построения, положение. Активируйте инструмент «Перемещение» (Move Tool) и внутри маски передвигайте нужные слои в любом направлении.

Во-вторых, вы всегда можете изменить базовый слой, корректируя его форму. Просто активируйте инструменты редактирования векторных фигур («Стрелка» и «Выделение контура»), нажмите ими для активации контура фигуры и регулируйте кривые, выходящие из опорных точек контура, изменяя форму маски.

Какие слои можно использовать в качестве формы для обтравочной маски?

Любой тип слоя может быть применен как базовый (формовой) для обтравочной маски, будь он векторным или растровым. Давайте рассмотрим некоторые примеры использования разных слоев.

Пример 1. Текстовой слой.

Анимация текста с помощью обтравочной маски в Фотошоп

Здесь базовым слоем является Текст. Изображение, которое расположено выше текстового слоя, находится только в пределах букв слова. Очень удобно то, что даже, являясь маской, данный текст можно редактировать. То есть, в панели этого инструмента (Window- Character) позволительно вносить изменения для слова, как то: смена шрифта, межбуквенного пространства, цвета, стиля написания и т.д.

В первом примере урока мы уже видели векторную фигуру (прямоугольник со скругленными углами), использованную в качестве обтравочной маски. Теперь из палитры инструментов векторной группы выберем инструмент «Произвольная фигура» (Custom Shape) и используем ее в виде маски обтравки.

Анимация текста с помощью обтравочной маски в Фотошоп

Очень удобно использовать прозрачность любого растрового (RGB) слоя в качестве обтравочной маски. В примере ниже базовым слоем является черное пятно, сделанное Кистью (Brush) с мягкими краями большого размера. Внутри такой маски прекрасно смотрится фотография.

Анимация текста с помощью обтравочной маски в Фотошоп

Непрозрачность (Opacity) и режимы смешивания (Blending Mode) .

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

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

Например, если вы установите режим наложения для базового слоя на Мягкий свет (Soft Light) , то все слои, находящиеся внутри маски также будут иметь данный режим смешивания.

Кроме этого, для каждого обтравленного слоя возможна настройка режима смешивания сугубо индивидуально. Такой способ хорош для создания интересного, детального изображения.

В приведенном ниже примере, базовым слоем является форма сердца. Слой «Мох», расположенный выше, служит для текстуры, установленной на 28% непрозрачности. Верхний слой со спутниковой тарелкой имеет режим смешивания Жесткий свет (Hard Light) , и захватывает текстуру «Мох».

Анимация текста с помощью обтравочной маски в Фотошоп

Стили слоя (Layer Style).

Стили слоя, добавленные к базовому слою обтравочной маски, также воздействуют на слои, находящиеся внутри нее. Двойным щелчком по миниатюре базового слоя вызовите окно «Стилей слоя» (Layer Style) и попробуйте применить к нему различные параметры. Вот несколько примеров ниже:

Анимация текста с помощью обтравочной маски в Фотошоп

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

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

Читайте также:  Как сделать из чёрно-белой фотографии цветную

Векторные фигуры (прямоугольник со скругленными углами) применены в качестве базового слоя для меню и заголовка сайта, а также промо-области справа. Еще я добавил в «Стилях слоя» параметр «Внутренняя тень» (Inner Shadow) для базовых слоев сайта.

Анимация текста с помощью обтравочной маски в Фотошоп

Итак, из всего вышесказанного можно сделать вывод, что серьезная практическая работа в Фотошоп невозможна без применения инструмента Обтравочная маска. Очень легко создаются изменения на изображении без страха разрушить что-либо важное. Экспериментируйте с Обтравочными масками в своих работах, и вы поймете, как они удобны!

Источник: http://www.photoshop-info.ru/c210-350.html

Обтравочная маска «clipping mask» или техника «alt – клик»

/ Сергей Нуйкин / Теория по фотошопу

Рад приветствовать, друзья! В этом уроке по фотошопу я поделюсь знаниями по обтравочной маске.

Итак, обтравочной маской «clipping mask» называют группу слоев, нижний из которых является базовым, он определяет границы видимости всей группы слоев находящихся над ним.

К примеру, на базовом слое может быть изображена любая фигура, давайте рассмотрим окружность, края этой окружности будут ограничивать видимость остальных слоев находящихся сверху и входящих в группу обтравочной маски (clipping mask).

Следовательно, все, что изображено на слое выше будет обрезаться до границы базового слоя. Отображаться будет только та часть, которая включена в базовый слой.

Также необходимо заметить, что при прозрачности базового слоя, верхний слой также наследует его прозрачность, даже если он имеет 100% непрозрачность.

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

Анимация текста с помощью обтравочной маски в Фотошоп

Также хочу подметить, что при помощи маски можно получить идеальные края фигуры при многократном перекрашивание.

Идеальные края с помощью обтравочной маски

Что я подразумеваю под идеальным краем?

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

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

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

Анимация текста с помощью обтравочной маски в Фотошоп

В техдизайне эту технику называют «alt – клик» она получила это название из-за способа создания маски.

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

  • Анимация текста с помощью обтравочной маски в Фотошоп
  • Также можно создать обтравочную маску при помощи меню слои > создать обтравочную маску там же ее можно и отменить, также можно воспользоваться комбинацией клавиш (ctrl + alt + g).
  • Анимация текста с помощью обтравочной маски в Фотошоп

Чтобы отменить обтравочную маску необходимо произвести те же действия что и при ее создание. Либо вызвав выпадающее меню в слоях правой кнопкой мыши и нажать на пункт меню отменить обтравочную маску.

Анимация текста с помощью обтравочной маски в Фотошоп

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

Где можно использовать обтравочную маску?

Пример обтравочной маски с текстом. Наложение эффектов стиля слоя на базовый слой, и наложение изображения на слой с текстом как маску.

Анимация текста с помощью обтравочной маски в Фотошоп

Пример clipping mask виньетка. Простая виньетка фотография вписанная в фигуру облачка.

Анимация текста с помощью обтравочной маски в Фотошоп

Пример использования в рисование.  Рассмотрим нарисованный объемный шар при помощи обтравочной маски. На скриншоте ниже можете видеть, как выглядит готовый вариант шара и раскадровку. Слой базы является окружность, все остальное рисуется поверх и заключается в группу clipping mask.

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

Анимация текста с помощью обтравочной маски в Фотошоп

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

Анимация текста с помощью обтравочной маски в Фотошоп

На все, заглядывайте чаще на fotodizart.ru, если возникнут вопросы задавайте в х, по возможности всегда отвечу.

Источник: https://fotodizart.ru/obtravochnaya-maska-clipping-mask-ili-texnika-alt-klik.html

Photoshop – Использование обтравочных масок

 Введение
Часто при создании изображений в Photoshop хотелось бы одному слою придать форму, которая находится в другом слое.
Например, как показано на образце ниже, фото приняло форму округленного прямоугольника.Анимация текста с помощью обтравочной маски в Фотошоп
Для достижения этого эффекта можно было бы нарисовать форму и, используя прозрачность формы, удалить лишние пиксели фото.
Таким образом, мы имели бы желаемый результат – фото в особенной форме, но что если бы нам захотелось изменить форму?
Или изменить вид заполнения формы рисунком? То пришлось бы повторить весь процесс снова.
Идеальным способом для достижения этого эффекта является не разрушающее редактирование изображения, а использование
обтравочной маски (clipping mask). Основа обтравочной маски – это два слоя:
1) базовый слой, который предусматривает форму (например, округленный прямоугольник);
2) второй, «обтравочный» слой, который предусматривает «содержимое» (фото).
Эта технология очень полезна и я пользуюсь ею каждый день при разработке графики web-сайтов. Это действительно легко для
работы и может изменить Ваш подход к разработке графики в Photoshop.

Создание обтравочной маски

Для создания обтравочной маски, во-первых, конечно нужно сделать базовый слой с помощью палитры «Слои».
Он должен находиться непосредственно под слоем, часть пикселей которого бы Вы хотели скрыть.
Итак, нажмите и удерживайте клавишу Alt (Windows) или Option (Mac OS), затем наведите на линию между двумя слоями
на палитре «Слои». При этом курсор преобразуется в стрелочку, указывающую влево, и два пересекающихся круга,
похожих на маленькую диаграмму Венна.
Кликните мышь. Сразу же Вы увидите фотослой «обтравочный» над базовым слоем. Можно отменить это, нажав на стрелочку,
указывающую вниз, возле прямоугольника на обтравочном слое.Анимация текста с помощью обтравочной маски в Фотошоп
Можно добавить несколько слоев к обтравочной маске, повторяя процедуру. Просто Alt / Option + нажатие на линию между слоями,
если Вы хотели бы пополнить маску. А можно с помощью Shift выделить несколько слоев и добавить их к маске одним
нажатием Alt / Option и линии между самым нижним из выбранных слоев и базовым слоем.
На кадре ниже показано два фотослоя в маске.Анимация текста с помощью обтравочной маски в Фотошоп Чтобы «освободить» объекты маски, просто нужно нажать Alt / Option и снова на разделительную линию между слоями.

Преимущества использования обтравочной маски

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

Какие виды слоев можно использовать в качестве базового слоя для обтравочной маски?

Для создания базового слоя может быть используемо достаточно большое количество различных видов слоев, включая разнообразные
типы векторных и обычных растровых слоев. Давайте посмотрим на несколько примеров из них в работе.Анимация текста с помощью обтравочной маски в Фотошоп Здесь тип слоя – базовый слой, который показывает фото через имеющуюся форму текста. Хорошей новостью будет то,
что и тип слоя можно изменять с помощью инструмента «Тип» даже во время формирования маски. Это дает Вам возможность подбирать
типы и добиваться сложных эффектов, угодных Вашему сердцу!
Один пример векторного слоя Вы уже видели, ниже показан еще один более сложный метод формирования маски.Анимация текста с помощью обтравочной маски в Фотошоп Имеется также возможность использовать прозрачность любого растрового слоя для создания обтравочной маски.
На примере ниже, я использовал слой, содержащий широкий мазок мягкой кистью, в качестве базового слоя.Анимация текста с помощью обтравочной маски в Фотошоп

Полупрозрачность и режимы смешивания

Можно настроить полупрозрачность базового слоя маски, чтобы затемнить все слоя выше него. В других словах, обтравочные
слоя не только принимают форму базового слоя, но и настройки полупрозрачности. Это также относится и к режимам
смешивания базового слоя. К примеру, если Вы применяете режим смешивания «Мягкий свет» для базового слоя,
то этот эффект распространяется и на обтравочные слоя также.
Можно настроить полупрозрачность и режимы смешивания и отдельно для всех обтравочных слоев, что является хорошим
способом создания сочных детальных изображений. На образце ниже, базовый слой – розовое сердце. Слой «мох» обеспечивает
текстуру и установлен на уровне 28% непрозрачности. Слой «техника» (центр спутниковой антенны) настроен на режиме
смешивания «Жесткий свет», позволяющему приобретать структуру слоя «мох».Анимация текста с помощью обтравочной маски в Фотошоп

Читайте также:  Закругление углов фигур и текста в photoshop

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

Анимация текста с помощью обтравочной маски в Фотошоп Заметьте, можно применять стили слоев и к обтравочным слоям.

На практике

В итоге, если Вы хотели бы посмотреть, как я использую обтравочные маски в своей работе каждый день, взгляните на дизайн
web-сайта ниже. Здесь обтравочные маски используются для фона меню, графики заголовка и в области фото справа.
Для базовых слоев я использовал стиль «Внутренняя тень».Анимация текста с помощью обтравочной маски в Фотошоп

Завершение

Как видно, можно действительно обходиться и без обтравочных масок. Но для достижения хороших эффектов они выполняют
очень полезную функцию. С ними удобно и легко работать, в то время как, используя простое редактирование, пришлось бы
сильно постараться, и нет боязни потери пикселей изображения в результате разрушительной коррекции.
Иногда даже потеря небольшой части рисунка является значительной.
Как всегда, хорошего настроения и экспериментируйте!  Здесь можно скачате видеокурс “5 шагов к фотошоп”. Прямая ссылка для скачивания с яндекс диска

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

Код кнопки:

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.

Источник: https://www.site-do.ru/photoshop/photoshop_maski.php

Как использовать обтравочную маску в фотошоп

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

Обтравочная маска (Clipping Mask) – очень полезный инструмент Adobe Photoshop, который помогает экономить много времени и позволяет делать следующие вещи:

  1. обрезка фотографии по контуру фигуры нижележащего слоя,
  2. быстрая вставка фото в рамку, в виньетку. Сюда же можно отнести вставку фото на плакат или баннер города, рекламный щит и пр.,
  3. обрезка элементов, которые не должны выходить за края фигуры.
  4. “заливка” любой текстурой или даже полноценной фотографией отдельного элемента дизайна. Это может быть цветная рамочка, заливка текста (смотри урок – как наложить текстуру на текст) и др.

На самом деле эти все варианты отражают один и тот же процесс – обрезка изображения по краям контура предыдущего слоя.

Простейший пример: создадим новый документ. На нижнем слое нарисуем фигуру, например, круг. А на верхний слой поместим любое изображение. Создадим обтравочную маску, кликнув между слоями с зажатой клавишей ALT. Получим круг с заливкой верхним слоем. Границы изображения, выходящие за пределы круга были обрезаны.

Анимация текста с помощью обтравочной маски в Фотошоп

Пошаговое руководство создания обтравочной маски

  1. Создайте новый документ в фотошоп с произвольными размерами, белый фон, и разрешением 72dpi.
  2. Возьмите инструмент “Произвольная фигура”, выберите любую фигуру (в настройках фигуры у вас должно быть “слой-заливка”, а не контур) и создайте фигуру любого цвета:
    Анимация текста с помощью обтравочной маски в Фотошоп
  3. Теперь открываем любое изображение, например, фото котика ???? и переносим его на наш документ в качестве верхнего слоя. Для этого берем просто инструмент “Перемещение” “Move Tool” и перетягиваем изображение на наш документ. Располагаем наше изображение так, чтобы нижележащий слой с фигурой был полностью скрыт, не виден по верхним слоем. При необходимости, воспользуйтесь трансформированием (для быстрого вызова воспользуйтесь горячими клавишами CTRL + T).
    Анимация текста с помощью обтравочной маски в Фотошоп
  4. Теперь поместите курсор мыши между верхним слоем с изображением и нижележащим слоем с фигурой и нажмите клавишу ALT. Переместите немного курсор при необходимости, удерживая клавишу ALT. Как только между слоями появится значок, состоящий и двух пересеченных окружностей, все также удерживая ALT, сделайте клик левой кнопкой мыши между слоями.
  5. Теперь при помощи инструмента “Перемещение” (Move Tool) при активном верхнем слое вы можете задать более удачное расположение кота в виньетке.

Как вставить фото в рамку при помощи обтравочной маски

На нашем сайте описан один из способов вставки фотографии в рамку в фотошопе. Однако при помощи обтравочной маски это сделать еще проще! К тому же в этом лучае вовсе не обязательно, чтобы рамка имела прозрачные пиксели внутри.

  1. Откройте вашу рамку в фотошоп. Для примера я выбрала эту рамку:
    Анимация текста с помощью обтравочной маски в Фотошоп
  2. Откройте в фотошопе фотографию, которую вы хотите вставить в вашу рамочку. У меня это снова кот.
  3. Переместите фотографию документ с рамкой простым перетягиванием при помощи инструмента Move Tool (Перемещение). При необходимости трансформируйте (CTRL + T). Добейтесь того, чтобы после манипуляций, зона, которая должна быть выполнена фотографией (в моей рамке – это белый фон) была полностью перекрыта вашей фотографией:
    Анимация текста с помощью обтравочной маски в Фотошоп
  4. Возьмите инструмент “Волшебная палочка” (Magic Wand), кликните по белому полю в рамочке (слой с рамкой должен быть активен). Загрузится выделение вокруг белого поля.
    Анимация текста с помощью обтравочной маски в Фотошоп
  5. При активном нижнем слое (с рамочкой), не снимая выделение, кликните сочетание клавиш CTRL + J. У вас образуется новый слой, в который скопируется содержимое выделения, т.е. центральная белая область рамки. Так выглядит он, если убрать видимость слоев рамки и фото:
    Анимация текста с помощью обтравочной маски в Фотошоп
  6. Теперь снова включаем видимость всех слоев, зажимаем клавишу ALT и кликаем между слоями верхним и нижележащим (слоем с фотографией и слоем с центральной областью рамки). При помощи обтравочной маски у нас обрезались лишние края, выходящие за пределы области.
    Анимация текста с помощью обтравочной маски в Фотошоп

Еще один пример использования обтравочной маски – это аккуратное рисование

Например, рисование прожилок листа или расчерчивание расписания уроков, или нанесение рисунка на клипарт (ваза, шарик и любой другой) можно сделать аккуратно, даже не стараясь при помощи обтравочной маски. Даже, если вы “вышли за края”, то применив обтравочную маску, все ваши огрехи моментально скроются.

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

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

Если вам понравились наш сайт, то не забудьте подписаться на рассылку или rss, поделиться с друзьями в социальных сетях или добавить в закладки!

Источник: https://VGrafike.ru/obtravochnaya-maska-fotoshop/

Что такое обтравочная маска и как ее использовать

Анимация текста с помощью обтравочной маски в Фотошоп

Обтравочная маска (clipping mask) в программе Photoshop нужна, чтобы скрывать из вида отдельные нежелательные области слоя. Ее очень удобно использовать во многих ситуациях. Давайте научимся это делать.

Обтравочные маски немного похожи на маски слоя (слой-маски) (layer masks), но принцип работы обтравочных масок иной.

При работе с обычными масками слоя нам требуется сначала добавить на слой маску, а затем закрасить скрываемые участки черным цветом, оставить белый там, где нужно показать область, или, при желании, поработать с серым цветом, чтобы скрыть область частично.

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

Обтравочная маска может применяться к большой группе слоев. Самый нижний слой определяет границы видимости всей группы.

Для создания обтравочной маски в фотошопе можно использовать разные методы:

  • На панели «Слои» выделите верхний из двух слоев, которые необходимо сгруппировать, и выберите «Слой» > «Создать обтравочную маску». Или кликните по слою ПКМ > «Создать обтравочную маску»
  • При создании обтравочной маски на основе существующего слоя и создаваемого слоя, сначала выделите существующий слой на панели «Слои». Затем выберите команду «Новый слой» в меню «Слой» или в меню «Дополнительно» на панели «Слои». В диалоговом окне «Новый слой» выберите «Использовать предыдущий слой для создания обтравочной маски», затем нажмите кнопку «ОК».

Применение обтравочных масок

Обтравочные маски используются в паре со смарт-объектами для создания визуализаций — Mockup.

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

Создается, по сути, коллаж, в который встраивается смарт-объект с нужной трансформацией, масштабом, фильтрами. Содержимое можно заменить, и показать заказчику несколько вариантов привлекательной визуализации, не предоставляя исходник.

Что такое смарт-объект, зачем он нужен и как его редактировать

Самоучители по компьютерной графике:

 Анимация текста с помощью обтравочной маски в ФотошопАнимация текста с помощью обтравочной маски в ФотошопАнимация текста с помощью обтравочной маски в ФотошопАнимация текста с помощью обтравочной маски в Фотошоп

Источник: http://mediasvod.ru/clipping-masks/

Ссылка на основную публикацию