Использование обтравочной маски при создании текстовых эффектов

Добавление градиента

Как я уже говорил выше, начнём мы с добавления градиента. Перейдите в нижнюю часть панели «Слои» и кликните по значку Create New Fill or Adjustment Layer (Создание нового корректирующего слоя или слоя-заливки). Из раскрывающего списка выберите Gradient (Градиент).


В результате появится диалоговое окно «Градиентная заливка». Начнём с угла, измените с 90 градусов на -90 градусов. Этим мы просто перевернём градиент наоборот. Затем в раскрывающемся списке Gradient (Градиент) я поменял оригинальный серый цвет на тёмный жёлто-оранжевый оттенок.

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

Вот результат проделанной работы:

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

Давайте изменим цвета на изображении путём изменения режима смешивания для градиента на Subtract (Вычитание) и понижения непрозрачности до 50%.

На данном этапе изображение выглядит так:

Эффект получился неплохой.

Что такое Обтравочная Маска (Clipping Mask)?

Что бы мы ни начинали изучть, сначала надо разобраться, с чем мы имеем дело. Adobe так объясняет этот инструмент: «Обтравочная маска — это объект, фигура которого маскирует другие объекты, и только области, лежащие внутри маски, видны глазу».

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

Как вы заметили из определения, только объект (то есть, векторная фигура) может стать обтравочной маской. Можно что угодно поместить под маску (и вектор, и растровое изображение), но нельзя поместить векторы под маску из растрового изображения — (jpeg, png, и пр).

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

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

Должен признаться, сначала я был ошеломлен набором опций в Иллюстраторе, начиная с того, как работают слои, и заканчивая принципами создания Обтравочных Масок. Позже я стал представлять все на моей Монтажной Области (Artboard) в виде кусочков бумаги — белой, цветной, прозрачной — и это помогло мне все видеть в ином свете.

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

Выделение слонов

Как я уже говорил, мне не нужно, чтобы градиент накладывался на слонов. Как видите, из-за применённого градиента, на слонах появился синий оттенок. В этом шаге мы их выделим при помощи инструмента «Быстрое выделение», чтобы начать процесс удаления синего оттенка.

Для начала выберите слой со слонами на панели слоёв, затем перейдите на панель инструментов, выберите инструмент «Быстрое выделение» и выделите слонов.

Вот как получилось у меня:

Хорошо, на первый взгляд моё выделение получилось не таким уж плохим. Но, если тщательно изучить выделяемые объекты, то можно увидеть, что мною были пропущены некоторые труднодоступные края и случайно включены лишние области, которых не должно быть в выделении. Инструмент «Быстрое выделение» не всегда идеален, особенно при работе в узких областях, поэтому теперь я бы хотел воспользоваться именно инструментом «Быстрая маска», чтобы подкорректировать выделение.

Зачем нужны маски?

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

Маска представляет собой чёрно-белое изображение такого же размера, как и любой слой. Цвет маски кодирует прозрачность слоя. Белый цвет означает нормальную видимость слоя, чёрный цвет – его абсолютную прозрачность. Различные оттенки серого цвета соответствуют различным степеням прозрачности – чем темнее, тем прозрачнее. Таким образом, если маска содержит участки белого цвета, соответствующие им участки слоя сохраняют свою исходную плотность, а там, где маска окрашена в чёрный цвет, изображение станет невидимым, и через него будет просвечивать нижележащий слой. Участки же, обозначенные на маске серым цветом, будут лишь частично прозрачны.

Чтобы увидеть маску целиком достаточно зажать Alt/Option и кликнуть по иконке маски.

Маска, созданная с помощью команды «Добавить маску слоя», вся залита белым цветом, т.е. оставляет слой полностью видимым. Если щёлкнуть по иконке маски и нажать Ctrl/Cmd+I маска будет инвертирована и окрасится в чёрный цвет. Слой при этом полностью исчезнет из виду, т.е. будет замаскирован.

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

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

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

End Caps


End Caps enable you to add styling to terminal points on an unclosed path. The first three also apply to the ends of each dash of a dash pattern. The default Cap style is None so lines and dash patterns track the dash length specified. You can also select from these other styles:

  • None (default): No cap is applied. The terminal point is the end of the path.
  • Square: A cap half the stroke width is applied and the corners are square.
  • Round: A cap half the stroke width is applied and the corners are rounded to 50%.
  • Line Arrow: Two 45-degree line segments are applied to either side of the terminal point(s) with the same stroke width as the path.
  • Triangle Arrow: An equilateral triangle is applied to the terminal point(s).

Как создать Обтравочную Маску?

Если вы не знаете — не беспокойтесь, это на самом деле легко.

Попробуем освоить это на практике. Рисуем желтый прямоугольник 320 x 320 px. Он будет и объектом снизу, и Обтравочной Маской. Добавляем эллипс 554 x 230 px, который будет представлять поле.

Как видите, поле далеко выходит за пределы прямоугольника, чего мы не хотим.

Здесь на помощь приходит Обтравочная Маска. Копируем прямоугольник, вставляем поверх поля (это объект, который мы закроем маской). Эта копия прямоугольника станет маской. Затем выделяем обе фигуры и создаем маску любым методом внизу:

Метод 1: Правый щелчок > Сделать Обтравочную Маску (Make Clipping Mask).

Метод 3: Объект > Обтравочная Маска (Clipping Mask) > Образовать (Make)

Метод 4: Панель Слоев (Layers Panel) > Образовать / Отменить Обтравочную Маску (Make/Release Clipping Mask)

Удаление цвета

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

Далее перейдите в меню Edit > Fill (Редактирование – Выполнить заливку).

В открывшемся диалоговом окне «Заполнить» в раскрывающемся списке Contents (Использовать) выберите Black (Чёрный) и нажмите OK, чтобы применить заливку.

Как только мы это сделаем, то увидим, что цвета градиента исчезли из выделенных объектов. Мы их не удалили, а скрыли, так как использовали чёрную заливку на маске слоя с градиентом. Это можно было сделать и вручную, но использование инструмента «Быстрое выделение» и режима быстрой маски, безусловно, ускорили нам процесс. Эти инструменты также дали нам гораздо лучший и более точный результат.

Чтобы отменить выделение, перейдите в меню Select > Deselect (Выделение – Отменить выделение) или нажмите комбинацию клавиш Ctrl + D. Вот конечный результат:

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

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

Я надеюсь, что в доступной форме объяснил и обозначил ценность использования режима быстрой маски в Adobe Photoshop для повышения эффективности работы и уточнения выделения

Спасибо за внимание!

Adjust properties of the frame

In the past, it was possible to adjust the properties of child objects when you selected the Frame. Now, you can adjust the properties of the frame itself.

  • Select a child object by using the keyboard shortcut:EnterorReturn.
  • Press the Tab key to select the next sibling.
  • Press Shift + Tab to select the previous sibling.
  • Press Shift + Enter to select the parent

If you want to adjust the fill and stroke properties of a frame and it’s children, you can use Selection colors to view or adjust colors in a mixed selection.

Nest frames within other frames

In Figma, you can create frames within other frames. We call this process nesting. This allows you to combine frames with different properties to build complex interfaces.

This creates new hierarchies or relationships:

  • Top-level frames: Any frame that is directly on the canvas. For a frame to be a top-level frame, you can’t nest it within another frame, group, or object.
  • Nested frame: Any frame that is placed within another frame. You can place frames within top-level frames, or within other nested frames. Nested frames are both a parent and a child.
  • Children: Any object that is within a frame. 

Learn more about parent, child, and sibling relationships.

Nested frames

Nested frames are frames that you place within another frame or object. This makes them both a parent and a child. You can place frames within:

  • Top-level frames
  • Other nested frames
  • In groups

In our example below, each of our elements are in their own frame. We have a status bar at the top and a navigation menu at the bottom. We also have a card that includes the details of our Upcoming Tickets.

Using one of our device presets, we can create a top-level frame for our elements. We can add our elements to the top-level frame to build a single screen in our mobile app.

Resize frames

You can interact with frames like any other object on the canvas, including change the size or scale of frames. There are a few ways to change the size of a Frame:

Эффект текст из текста

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

Первое, что я сделаю, — это скрою слой с изображением львов, кликнув по значку глаза слева от миниатюры нужного слоя. Затем при помощи инструмента Горизонтальный текст (T) вставлю на новый слой абзац случайного текста. Я использую случайный текст, потому что это всего лишь пример. Если бы я делал что-то конкретное, то случайный текст здесь был бы не уместен. Для текста я использовал чёрный цвет. А цвет текста LION я сменил на белый. Вот, что у меня получилось по окончании первого шага:

Расположение слоёв такое же, случайный текст располагается выше текста LION, а фоновый ниже всех.

Слой со львами отключен, поэтому просто проигнорируйте его.


Итак, пришло время второго шага, в котором случайный текст будет отображаться в тексте LION. Я последую инструкции, которую делал ранее. Наведите курсор мыши на линию между слоями со случайным текстом и текстом LION и нажмите Alt. Когда курсор превратится в стрелку, сделайте клик мышью. Вот, что у меня получилось:

За два простых шага можно добиться таких потрясающих эффектов.

Надеюсь, что я понятно объяснил, как работает обтравочная маска в Photoshop

Спасибо за внимание!

Подготовка

Откройте Photoshop и создайте пустой слой. Выберите инструмент Horizontal Type Tool (T) (Горизонтальный текст) и напишите слово LION.

Вот, что у меня получилось:

Как видите я создал документ с белым фотоном и чёрным текстом, хотя цвета здесь не имеют никакого значения.

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

Теперь давайте переместим изображение на текстовый документ. После этого я выровняю изображение так, чтобы оно соответствовала краям текстового документа. Вот, как теперь выглядит моя панель слоёв:

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

Редактирование в режиме «Быстрая маска»

Режим быстрой маски – это очень крутая область Photoshop, позволяющая создавать выделение с помощью кисти. По сути он создаёт цветное наложение любой непрозрачности. Активируя кисть в этом режиме, вы можете приступать к рисованию в любой области, чтобы включить или исключить её из выделения. Это очень удобно и не сложно, потому что в труднодоступных областях легче рисовать (включать или исключать из выделения), нежели выделять одним из инструментов выделения. Эти инструменты, как правило, привязываются к краям, в то время как рисование больше зависит от редактора, то есть от нас.

Для начала перейдите в режим быстрой маски, для этого на панели инструментов кликните по значку Quick Mask Mode (Режим «Быстрая маска»). Находится он непосредственно под цветными квадратиками выбора цвета. Или же вы можете просто нажать на клавиатуре клавишу Q.

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

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

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

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

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

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

Работа в режиме быстрой маски аналогична работе в любом режиме маски. Чёрный цвет скрывает, а белый отображает. Имея это ввиду, я увеличу изображение и начну рисовать с помощью кисти чёрного цвета, чтобы убрать все ранее выделенные области, которые не должны быть выделены. Затем я буду рисовать белым цветом, чтобы включить области, которые должны быть в выделении.

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

Если вы хотите выйти из режима быстрой маски, то кликните по тому же значку на панели инструментов или нажмите клавишу Q на клавиатуре. На скриншоте ниже представлено доработанное и более точное выделение.

Viewing Distances (Redlines)

With a top level frame selected, hold Option (macOS) or Control (Windows) as you click and drag out a guide. You will see the distance (in pixels) between your guide and the frame. This distance is also reflected in the ruler. When the guide intersects your frame it will begin measuring distances between the guide and objects in the frame. 

In addition, with a frame selected the rulers highlight in blue, calling attention to the coordinates of the frame on your canvas. When you select objects in the frame, you’ll see the same blue highlights for the selected object. 

Guides inside frames are recognized as another object in the frame. This means you can view redline distances between the guide itself and other elements in the frame, as well as the parent frame. 

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

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


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

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

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

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

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

Extra functionality

Frames allow you to access extra functionality in Figma. You will need to use Frames to use the following features or functions:

  • Layout Grids: Apply transparent grids, columns, and/or rows to Frames to provide visual structure
  • Constraints : Define how child objects respond when you resize a Frame. Apply Constraints toobjectswithin a Frame.
  • Auto Layout: Add Auto Layout to Frames to create dynamic layouts that respond to their contents
  • Prototyping: Create interactive prototypes that move between Frames in your Canvas

A Frame is aparentobject. This means that it can control or influence anychildobjects you place within it. Learn more about parent/child relationships in ourRelationships in Figmaarticle.

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

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

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

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

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

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

Корректирующие слои

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

Добавление нового корректирующего слоя осуществляется через специальную палитру Adjustments, либо через соответствующую кнопку в палитре Layers, либо через меню Layer > New Adjustment Layer.

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

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

Спасибо за внимание!

Василий А.

Properties Panel

Update the Frame’s Width and Height using the Properties Panel in the right sidebar.

Enter a new number in the W and H fields, or hover over the icon to scrub the field. Drag left to decrease and right to increase.

Toggle on the link button next to theWidth andHeight to constraint resizing to the current proportions.

Tip! You can use the dimension fields to perform calculations. This allows you to quickly scale or resize objects.

  • %Percentage e.g. 50%
  • +Add e.g. +100
  • - Subtract, e.g. -20
  • * Multiply, e.g. *4
  • Divide, e.g. /8

It’s not possible tomultiplya width or height by apercentagee.g. *50% will result in a value 50x the original, not 50%.

Types of Boolean Operations

Boolean operations combine any set of shape layers through one of four formulas: Union, Subtract, Intersect, and Exclude. 

Boolean groups are treated as a single shape layer and share fill and stroke properties and can be combined with other boolean groups through subsequent boolean operations.

  • Union: Union combines the selected shapes into a boolean group. If the objects overlap, the new shape’s outer path consists of the composite of its sublayers’ paths minus any segments that overlap. The stroke would then be applied to that outer path ignoring any path segments which overlap each other.
  • Subtract: Subtract is the opposite of Union. Subtract removes the area of a shape or set of shapes from a base shape. Only the bottom shape layer is solid, the rest are subtracted from it.
  • Intersect: Intersect creates a boolean group whose shape consists only of the overlapping parts of its sublayers.
  • Exclude: Exclude is the opposite of Intersect. Exclude shows only the areas of its sublayers that do not overlap.

С этим читают