Шейпы в фотошопе что это

Обновлено: 03.07.2024

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

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

Однако не любую анимированную картинку визуально схожую по характеристикам с векторным изображением можно считать шейповой анимацией. Шейповая анимация или анимация вектора потому и шейповая поскольку существует возможность непосредственно анимировать точки кривой Безье в окне вьюпорта (Flash, After Effects). Уверен, что есть огромное количество ПО которое имеет не меньше, а местами даже больше возможностей по работе с анимацией векторной графики.

Совсем не означает, что любой ролик в котором можно обнаружить схожие характерные черты с векторной графикой могли быть созданы с помощью инструмента Shape Layer, или созданы в After Effects.

Для примера возьмем часто используемое в сети новомодное сочетание слов "flat design". Многие до конца не понимая значения слов "стиль" и "вектор" путают эти понятия принимая стиль в котором создан ролик за метод создания графики.

Внимательно прочитав определение:
Стиль — совокупность признаков, характеризующих искусство определённого времени, направления или индивидуальную манеру художника.

Можно с легкостью понять, что совокупность признаков, таких как одноцветные заливки - совсем не определяют метод создания графики и ПО в котором она создавалась, скорее наталкивают на возможный метод создания или метод с помощью которого (субъективно) проще всего было бы создать нечто подобное. То есть используя инструмент Shape Layer в After Effects.

Кому то проще работается с готовыми векторными изображениями нарисованными в Adobe Illustrator, чем разбираться с инструментом создания векторной графики Shape Layer в AE, а это не одно и тоже.

Используйте те средства которые вам удобны.
Шейпы - это не тренд, а инструмент для создания и анимации векторной графики. Спасибо за внимание.


Это руководство для Photoshop CS5 и более ранних версий . Пользователи Photoshop CS6 (и CC) захотят ознакомиться с нашим полностью обновленным учебным пособием « Как использовать инструмент Custom Shape Tool в Photoshop» .

Пользовательский инструмент Shape

Нажмите и удерживайте Rectangle Tool, затем выберите Custom Shape Tool из выпадающего меню. Если другой инструмент Shape уже активен, пользовательский инструмент Shape можно выбрать на панели параметров.

Выбор пользовательской формы

После того, как мы выбрали инструмент Custom Shape Tool, нам нужно выбрать форму, которую мы хотим нарисовать. Миниатюра предварительного просмотра формы появится на панели параметров справа от значка «Пользовательский инструмент формы». На миниатюре отображается выбранная фигура:

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

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

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

Чтобы выбрать форму, просто нажмите на ее миниатюру, затем нажмите Enter (Win) / Return (Mac), чтобы закрыть форму выбора. Или дважды щелкните по миниатюре, которая выберет форму и закроет инструмент выбора формы для вас. Я выберу форму сердца:

Выбор цвета для фигуры

После того как вы выбрали свою форму, выберите цвет для нее, нажав на образец цвета справа от слова « Цвет» на панели параметров:

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

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

Выбор цвета из палитры цветов в Photoshop.

Выберите опцию «Shape Layers»

Как я упоминал в предыдущем уроке , Photoshop позволяет нам рисовать три очень разных вида фигур с помощью инструментов Shape. Мы можем рисовать векторные фигуры , которые не зависят от разрешения и полностью масштабируются без потери качества изображения (фигуры того же типа, которые мы рисуем в программе, такой как Illustrator). Мы также можем рисовать контуры , которые являются просто контурами фигур, или мы можем рисовать пиксельные формы, где Photoshop заполняет форму цветными пикселями. В большинстве случаев мы хотим рисовать векторные фигуры, и для этого нам нужно выбрать опцию Shape Layers на панели параметров. Это левый значок в группе из трех значков в дальнем левом углу панели параметров:

Выберите параметр «Слои фигур» на панели параметров, чтобы нарисовать векторные фигуры.

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

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

Отпустите кнопку мыши, чтобы завершить форму, после чего Photoshop заполнит ее цветом, выбранным на панели параметров:

Photoshop заполняет форму цветом, когда вы отпускаете кнопку мыши.

Рисование фигуры с правильными пропорциями

Заметьте, однако, что мое сердце выглядит немного искаженным. Это шире и короче, чем я ожидал. Это связано с тем, что по умолчанию Photoshop не пытается сохранить правильные пропорции или пропорции фигуры в том виде, в котором мы ее рисуем. Я нажму Ctrl + Z (Победа) / Command + Z (Mac) на своей клавиатуре, чтобы отменить форму, чтобы я мог попробовать снова.

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

Удерживайте Shift, когда перетаскиваете фигуру, чтобы нарисовать ее в правильных пропорциях.

Когда вы довольны размером фигуры, отпустите кнопку мыши, затем отпустите клавишу Shift (убедитесь, что вы отпустите клавишу Shift после отпускания кнопки мыши). Фотошоп снова заполняет его цветом:

Отпустите клавишу Shift только после того, как вы отпустите кнопку мыши.

Я снова нажму Ctrl + Z (Победа) / Command + Z (Mac) на моей клавиатуре, чтобы отменить форму, затем я выберу другую форму, щелкнув по миниатюре предварительного просмотра на панели параметров, чтобы открыть средство выбора формы. На этот раз я выберу ноты:

Нажав на миниатюру музыкальных нот, чтобы выбрать форму.

Чтобы нарисовать ноты, я щелкну внутри документа, чтобы установить начальную точку, и, удерживая кнопку мыши нажатой, я начну перетаскивать ее из начальной точки. Как только я начну перетаскивать, я нажму и удерживаю клавишу Shift, чтобы заставить форму принимать правильные пропорции, пока я продолжаю перетаскивать:

Удерживая Shift, я перетаскиваю, чтобы сохранить правильные пропорции нот.

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

Новая форма заполнена тем же цветом, что и предыдущая.

Далее мы узнаем, как изменить цвет существующей фигуры и как загрузить все дополнительные настраиваемые фигуры Adobe, включенные в Photoshop!

Изменение цвета существующей фигуры

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

Дважды щелкните образец цвета слоя «Форма», чтобы изменить его цвет.

Photoshop снова откроет палитру цветов, чтобы мы могли выбрать новый цвет. Я выберу фиолетовый:

Выбор нового цвета для пользовательской фигуры из палитры цветов в Photoshop.

Мы можем изменить цвет любой векторной формы в любое время.

Загрузка дополнительных наборов форм

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

Нажмите на маленькую стрелку в правом верхнем углу окна выбора формы.

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

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

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

Выберите «Все», чтобы загрузить все дополнительные пользовательские фигуры в Photoshop.

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

Выберите «Добавить», чтобы загрузить новые формы в Photoshop, сохраняя при этом оригиналы.

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

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

Вот случайный образец некоторых из многих фигур, которые мы теперь имеем в наличии:

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

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

И там у нас это есть! Это основы добавления пользовательских форм в наш документ с помощью инструмента Custom Shape Tool. В следующем уроке мы рассмотрим разницу между векторными фигурами, контурами и пиксельными формами в Photoshop!

В этом уроке я расскажу, как редактировать изображение инструментом Пластика (Liquify Tool) в Фотошопе. С помощью инструмента Пластика (Liquify Tool), Вы сможете редактировать фотографии быстрее, чем когда-либо прежде.

Для того, чтобы перейти к работе с инструментом Пластика (Liquify Tool), перейдите в меню Фильтр – Пластика (Filter > Liquify). Убедитесь, что включен параметр Расширенный режим (Advanced Mode). Он необходим для того, чтобы видеть полный список доступных инструментов.

Ниже я приведу описание каждого из них.

Инструмент Деформация (Forward Warp Tool) (W) – позволяет перемещать пикселы в том направлении, в котором Вы проводите инструментом по изображению.

Инструмент Реконструировать (Reconstruct Tool) (R) – отменяет применение того или иного инструмента фильтра Пластика и возвращает изображению первоначальный вид.

Инструмент Скручивание (Twirl Clockwise Tool) (C)– позволяет вращать пикселы по часовой и против часовой стрелки.

Инструмент Сморщивание (Pucker Tool)(S) – сжимает и перемещает пикселы в центре той области изображения, на которую направлена кисть.

Инструмент Вздутие (Bloat Tool) (B) – перемещает пикселы из центра воздействия кисти на изображение. Отлично подходит для быстрого увеличения или расширения деталей.

Инструмент Смещение пикселов (Push Left Tool)(O) – в зависимости от расположения кисти и движения курсора вверх или вниз, перемещает пикселы вправо или влево.

Инструменты Заморозить/Разморозить маску (Freeze Mask Tool) (F) (Thaw Mask Tool) (D) – благодаря инструменту Заморозить маску (Freeze Mask Tool) (F) Вы можете легко защитить определенные области изображения от воздействия искажения. Просто закрасьте этим инструментом те области, которые не должны быть затронуты при работе с фильтром Пластика.
Для того, чтобы удалить воздействие инструмента Заморозить маску (Freeze Mask Tool) (F), выберите инструмент Разморозить маску (Thaw Mask Tool) (D)и проведите кистью по «замороженному» участку.

Инструменты Рука (Hand) (H) и Масштабирование (Zoom Tools) (Z) – позволяют увеличивать масштаб редактируемого изображения и с легкостью перемещаться в окне предварительного просмотра фильтра Пластика.

Далее, на примере цифрового портрета, я покажу, как работать с фильтром Пластика (Liquify Tool).

Узнайте, как создавать фигуры на холсте и использовать функцию «Свойства интерактивной формы» для взаимодействия с фигурами.

В Photoshop предусмотрена удобная функция рисования и редактирования векторных фигур. Также можно преобразовать векторную фигуру в растровую или пиксельную.

Выполните эти быстрые действия для создания фигур в Photoshop:

Выберите инструмент «Фигура»


На панели инструментов, нажмите и удерживайте значок группы инструментов Фигура (), чтобы вызвать различные варианты инструмента «Фигура» — Прямоугольник, Эллипс, Треугольник, Многоугольник, Линия и Произвольная фигура . Выберите инструмент для рисования нужной фигуры.

Инструменты группы «Фигура» в Photoshop

Настройка параметров инструментов группы «Фигура»

На панели параметров инструментов группы «Фигура» можно задать следующие настройки:


  • Режим : задайте режим для инструмента «Фигура» — Фигура, Контур и Пиксели .
  • Заливка : выберите цвет заливки фигуры.
  • Обводка : выберите цвет, ширину и тип обводки фигуры.
  • Ш и В : вручную задайте ширину и высоту фигуры.
  • Операции с контуром : используйте операции с контуром для настройки взаимодействия фигур друг с другом.
  • Выравнивание контура : используйте этот параметр для выравнивания и распределения компонентов фигуры.
  • Упорядочение контура : используйте этот параметр для настройки порядка расположения создаваемых фигур.
  • Дополнительные параметры фигур и контуров : щелкните значок шестеренки () для доступа к дополнительным параметрам фигур и контуров, чтобы задать такие атрибуты, как ширина и цвет отображаемого на экране контура, и параметры соблюдения пропорций при рисовании фигур.

панель параметров группы инструментов «Фигура»

Рисование фигуры

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

  • Удерживайте клавишу Shift во время рисования, чтобы сделать фигуры пропорциональными.
  • Выбрав слой-фигуру, используйте инструмент Перемещение , чтобы перемещать фигуру и менять ее расположение на холсте.
  • Чтобы легко масштабировать, трансформировать или поворачивать фигуру, выберите Редактирование > Свободное трансформирование или нажмите клавиши Control+T (Win) / Command+T (Mac).

Редактирование свойств фигуры

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

Можно использовать элементы управления трансформированием и скруглением на холсте для коррекции внешнего вида фигуры. Модификаторы клавиатуры будут управлять трансформированием на холсте так же, как при использовании инструмента Трансформирование в Photoshop. Можно изменять радиус всех углов прямоугольника одновременно: удерживайте клавишу Alt (Win) или Option (Mac) во время перетаскивания для изменения радиуса одного угла. У треугольников изменяются все углы, даже если перетащить только один из них. С легкостью поворачивайте фигуру с помощью маркера поворота на холсте, который появляется при наведении курсора мыши на фигуру.


Щелкните значок сброса () на панели «Свойства», чтобы сбросить сразу все изменения.

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

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

Создание прямоугольника

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

Читайте также: