Иллюзия движения в Фотошоп / Creativo.one

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

Итоговый результат

Исходные материалы:

Архив

Шаг 1

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

Откройте изображение “Автомобиль” в программе Photoshop и далее продублируйте изображение с автомобилем Ctrl + J.

Шаг 2

Примените фильтр Размытие в Движении (Motion Blur), для этого идём Фильтр- Размытие – Размытие в Движении (Filter > Blur > Motion Blur).

Шаг 3

К дубликату слоя с размытием добавьте слой-маску, для этого идём

Слой – Слой-маска – Показать всё (Layer > Layer Mask > Reveal All).

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

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

Результат должен быть, как на скриншоте ниже.

Шаг 4

Нажмите клавиши Ctrl + Shift + Alt + E, чтобы объединить все видимые слои в один слой, а затем с помощью инструмента Овальная область (Elliptical Marquee Tool), создайте выделение вокруг переднего колеса автомобиля.

Шаг 5

Далее, к выделенной области, примените фильтр Радиальное Размытие (Radial Blur), для этого идём Фильтр – Размытие – Радиальное Размытие

(Filter > Blur > Radial Blur). В параметре Метод (Method Blur), выберите опцию Кольцевой (Spin) и сместите бегунок параметра Степени (Amount) до конца вправо. В этом шаге, мы применим Кольцевое Размытие (Spin Blur) к нашему колесу, чтобы оно выглядело, как будто быстро вращается.

Колесо должно выглядеть, как показано на скриншоте ниже:

Шаг 6

Повторите действие с радиальным размытием к заднему колесу. Результат должен быть, как на скриншоте ниже.

Шаг 7

Добавьте слой-маску к слою с радиальным размытием, идём Слой – Слой-маска – Показать всё (Layer > Layer Mask > Reveal All) и с помощью мягкой чёрной кисти с непрозрачностью 50%, прокрасьте вокруг краёв вращающихся колёс, чтобы скрыть какие-либо заметные / грубые линии.

Шаг 8

Создайте ещё один объединённый слой из всех видимых слоёв, нажав клавиши Ctrl + Shift + Alt + E. А затем к объединённому слою, добавьте Размытие в Движении (Motion blur), установите значение Смещения (Distance) 700px.

Результат Размытия в Движении (Motion Blur):

Шаг 9

Поменяйте режим наложения для данного слоя на Осветление (Screen), далее, добавьте слой-маску, для этого идём Слой- Слой-маска – Скрыть всё (Layer > Layer Mask > Hide All).

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

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

 

 

Продублируйте данный слой, нажав клавиши Ctrl + J. Далее, нажмите Alt + Backspace, чтобы залить слой-маску чёрным цветом, затем сместите слой немного верх (удерживая клавиши Ctrl + Shift + нажмите клавишу со стрелкой ВЕРХ один раз):

Прокрасьте на слой-маске белой кистью, как показано на скриншоте ниже:

Итоговый результат:

Другие типы Размытия

Ещё один интересный эффект, который вы могли бы применить к объекту или человеку, создавая ощущение, что он бежит очень быстро, это Линейное Размытие (Zoom Blur).

Откройте изображение “Бегущий человек”, также продублируйте слой с изображением бегущего человека.

Далее, идём Фильтр – Размытие – Радиальное Размытие (Filter > Blur > Radial Blur). В параметре

Метод (Method Blur), выберите опцию Линейное Размытие (Zoom Blur).

К дубликату слоя с размытием, добавьте слой-маску, для этого идём Слой- Слой-маска – Скрыть всё (Layer > Layer Mask > Hide All). Аккуратно прокрасьте с помощью белой кисти на слой-маске слоя, чтобы проявилось только изображение бегущего человека, а также немного прокрасьте участок земли перед человеком. Результат должен быть, как на скриншоте ниже.

Другая техника – это применение фокуса к изображению объекта или человека с помощью Размытия по Гауссу (Gaussian Blur) и размытия картинки за исключением объекта / человека, на котором мы хотим сфокусироваться. Итак, давайте попробуем.
Откройте изображение “Тинэйджеры”, также продублируйте слой с изображением тинэйджеров.

Примените Размытие по Гауссу (Gaussian Blur), установите радиус размытия  3.5px. Для этого идём

Фильтр – Размытие- Размытие по Гауссу (Filter > Blur > Gaussian Blur).

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

К дубликату слоя с размытием, добавьте слой-маску, для этого идём Слой – Слой-маска – Показать всё (Layer > Layer Mask > Reveal All) и с помощью мягкой чёрной кисти, прокрасьте поверх верхней части девушки, которая расположена в середине. При прокрашивании, будьте аккуратны, не заходите кистью дальше от объекта фокусирования. Как вы можете увидеть, эффект – нежный, но ощутимый.

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

Автор:

Adrian Scheff

Как сделать эффект движения в программе фотошоп

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

Для примера я взял фото автомобиля, стоящего на дороге, к которому в ходе урока и будет применен эффект движения.

1) Для начала необходимо скопировать сам автомобиль на новый слой, для этого его нужно выделить удобным для Вас инструментом выделения программы Photoshop и сделать копию на новый слой. Если хотите качественно вырезать объект (авто), то для выделения лучше использовать инструмент «Перо», я же в данном уроке использую инструмент «Быстрое выделение». Выбираем инструмент «Быстрое выделение» в левой боковой панели программы и нажатием левой кнопки мыши (удерживая) выделяем необходимый нам объект на изображении.

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

Если область выделения залезла за края объекта ее можно стереть, использую тот же инструмент «Быстрое выделение», зажав и удерживая кнопку Alt.

2) После того, как мы выделили полностью необходимый объект на изображении необходимо кликнуть по нему правой кнопкой мыши и выбрать в открывшемся окошке действие «Скопировать на новый слой».

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

3) Теперь сделаем размытие нижнего фона (придадим ему эффект размытия в движении). Для этого выделяем данный слой, кликнув по нему левой кнопкой мыши и выбираем в верхнем меню «Фильтр» — «Размытие» — «Размытие в движении».

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

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

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

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

Настроив значения в окошке нажимаем «Ок» и получаем эффект вращения колеса. Аналогичным образом поступаем со вторым колесом автомобиля.

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

Эффект Драгана в Photoshop

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

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

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

Шаг 1

Для начала создадим новый корректирующий слой Уровни (Levels) и выставим значения приблизительно равные тем, что на картинке снизу. Этим шагом мы увеличили контраст.

Шаг 2

Создадим новый Корректирующий слой Цветовой тон/Насыщенность (Hue/Saturation) и уменьшим насыщенность. На свое усмотрение, вы можете подкорректировать и цветовой тон.

Шаг 3

Теперь добавляем корректирующий слой с Кривыми (Curves), чтобы отрегулировать контраст и яркие тона. Создайте три точки на кривой и приведите ее к следующему виду:

Шаг 4

Теперь мы повысим четкость, используя Цветовой Сдвиг (High Pass). Для этого дублируем фоновый слой (Background Layer) и во вкладке Фильтр (Filter) выбираем Другое (Other) и далее Цветовой Сдвиг (High Pass). Выставляем значение не менее 10.

Режим наложения слоя выбираем Overlay.

Шаг 5

Финальная часть обработки. Используя технику Dodge and Burn или одноименные инструменты, мы акцентируем внимание на отдельных фрагментах портрета. Обратите внимание на то, что лицо в некоторых местах явно засвечено. 

Используя инструмент Burn (Затемнитель) с экспозицией равной 50%, затемняем области, выделенные на фотографии ниже красным цветом.

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

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

Автор: NATHAN BROWN

Фильтры размытия для создания эффекта движения в Photoshop

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

 

Шаг 1

Откройте изображение и активируйте слои, с которыми будете работать. Если документ состоит из нескольких слоев, кликните по слою, чтобы активировать его, затем, зажав Shift, кликните по следующему слою. Таким образом активируйте все слои, которые хотите использовать. Затем выберите Filter> Convert for Smart Filters/Фильтр>Преобразовать для смарт-фильтров.

После этого Photoshop скажет вам, что собирается создать смарт-объект из активных слоев. Представляйте себе смарт-объект как защитную упаковку. Так фильтр действует на упаковку, а не на само изображение. Нажмите ОК. Если вам понадобится отредактировать оригинальные слои, дважды кликните по иконке слоя смарт-объекта и Photoshop откроет исходные слои во временном документе. Когда вы закончите вносить изменения, сохраните временный документ, нажав Command-S (PC: Ctrl-S), закройте его, и ваши изменения будут обновлены в исходном документе.

Шаг 2

Вернитесь обратно в меню Filter/Фильтр и выберите Blur> Motion Blur/Размытие>Размытие в движении. В появившемся диалоговом окне настройте угол так, чтобы размытие осуществилось в нужном вам направлении. Например, чтобы создать идеально вертикальное размытие, укажите угол в 90°. Чтобы регулировать степень размытия, перетащите ползунок  Distance/Расстояние вправо (для усиления размытия) или влево (для уменьшения). Нажмите OK когда закончите.

Шаг 3

Чтобы скрыть эффект движения в части изображения, (например с голов членов супер-семейки с фото) зайдите в палитру Layers/Слои и активируйте Smart Filters mask/Маска для смарт-фильтра. Под иконкой слоя со смарт-объектом появится иконка белого слоя. Когда слой-маска активен, он обведен небольшими белыми рамками.

Шаг 4

Чтобы скрыть размытие, необходимо закрасить желаемое место черным цветом внутри маски. Нажмите D, чтобы установить цвета по умолчанию (черный и белый). Затем нажмите X, чтобы черный цвет оказался сверху. Запомните, что в маске черный цвет скрывает, а белый наоборот проявляет, показывает.

Шаг 5

Нажмите B, чтобы выбрать инструмент Brush/Кисть. Выберите кисть с мягкими, растушеванными краями. Установите размер в 250 пикселей. Совет: Вы можете нажать клавишу левой скобки ([) для уменьшения размера кисти, или клавишу правой скобки (]) для увеличения.

Шаг 6

Рисуйте черным цветом поверх голов членов супер-семейки (убедитесь что активен слой маски). Если вы откроете слишком много оригинального изображения, нажмите X, чтобы вновь переключиться между цветами и рисуйте белым цветом в нужных местах, чтобы добавить им размытия.

Шаг 7

В меню выберите File>Save As/Файл> Сохранить как и выберите Photoshop в выпадающем меню Format/Формат. Сохраните копию документа. Чтобы изменить параметры размытия позже, просто откройте документ и дважды щелкните по названию фильтра в палитре Layers/Слои. Откроется диалоговое окно настроек фильтра. Сравните изображения до и после:

Радиальное размытие

Еще один полезный метод, особенно для фотографии — фильтр Radial Blur/Радиальное размытие. С его помощью можно создать эффект наезда. Вот два примера, скаченные с iStockphoto.com (оба были скачены более тысячи раз):

Для создания этого эффекта, выполните описанные выше шаги, только вместо Motion Blur/Размытия в движении во втором шаге выберите Radial Blur/Радиальное размытие. В появившемся диалоговом окне установите параметры как показано на картинке ниже. Кликните в области предварительного просмотра фильтра, и перетащите центр размытия (точку, в которой происходит увеличение). Если с первого раза не получилось правильно позиционировать центр, дважды щелкните по фильтру Radial Blur/Радиальное размытие в палитре Layers/Слои, чтобы открыть диалоговое окно фильтра.

Используйте Smart Filters mask/Маску для смарт-фильтра, чтобы скрыть эффект размытия в области, где он не желателен.

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

Автор урока KelbyOne

Перевод — Дежурка

Смотрите также:

Эффект длинной выдержки в Photoshop

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

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

Таблица показывает пересчет выдержки при использовании фильтра на 10 стопов слева и на 6 стопов справа.

При помощи Фотошопа и большого количества снимков можно создать настоящее произведение искусства. Суть заключается в том, чтобы сделать порядка 100 – 500 снимков на протяжении 5-20 минут.

Процесс фотографирования

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

Обработка снимков

Снимки у нас уже есть. Это пейзаж и на нём движение облаков от кадра к кадру.

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

Очень важно учесть, что не смотря на то, что мы фотографировали в формате RAW, загружать эти снимки в Фотошоп нельзя, так как даже самые современные компьютеры не смогут обработать более 200 RAW-фотографий. Это очень большой объём данных для которого нужны невероятные вычислительные мощности. Поэтому в любом RAW-конвертере производим обработку и пакетно синхронизируем внесённые настройки с остальными снимками. Экспортируем фотографии в JPG с наилучшим качеством. Разрешение также желательно уменьшить примерно до 2500 пикселей.

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

Далее нужно загрузить все снимки в Adobe Photoshop. В старых версиях это было очень просто сделать через Adobe Bridge, где следовало выделить необходимые снимки и нажать Tools — Photoshop — Load into layers. Этот параметр загружал все снимки в один файл, раскидывая их по слоям. В версиях программы Adobe Bridge CC данную опцию убрали.

Воспользоваться можно другой функцией. Открываем программу Photoshop и переходим в Files — Scripts — Load Files into Stack.

В открывшемся окне можно выбрать необходимые файлы. Если вы случайно во время съёмки задели штатив или на объектив села чайка, то желательно выравнять кадры. Для этого нужно поставить галочку в соответствующем пункте. Также нужно поставить галочку на пункте Создать Smart Object. Выравнивание кадров происходит очень долго. По этой причине лучше удостовериться, что штатив стоит хорошо и не двигается.

Теперь нужно перейти в меню Layer — Smart Object — Stack Mode. Из списка потребуется два пункта: Mean и Median.

Пример собранных десяти кадров с использованием настройки Mean.

50 кадров с настройкой Mean

200 кадров с параметром Mean

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

У режима Median результат более необычный и неестественный.

Пример собранных пятидесяти кадров в режиме Median

200 кадров в режиме Median

На основе материалов с сайта: timon-timonich.livejournal.com

Как сделать эффект фокуса в Photoshop.

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

Вот что получится в конце урока.

Шаг1

Вот оригинальная фотография.

Шаг 2

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

Шаг 3

Возьмем инструмент Растушевка. Для этого зайдем в меню Выделение, перейдем в Модификация, затем Растушевка. Или сочетание клавиш Shift+F6.

Установим следующее значение.

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

Вот что должно получится.

Шаг 4

Инвертируйте выделение, (можно с помощью меню Выделение или с помощью сочетания клавиш Ctrl+F2)

Примените размытие по Гауссу.

Установите следующее значение.

Вот что должно получиться

Шаг 5

Мы знаем, что фокус должен быть постепенным, поэтому мы должны немного увеличить область выделения и добавить больше размытия. Сделаем снова инверсию (Ctrl+F2) и увеличим выделенный диапазон.

Установим значение в 50 пикселей.

Шаг 6

Снова инвертируем выделение (Ctrl+F2) и сделаем размытие по Гауссу со следующим значением.

Шаг 7

Эффект фокуса мы закончили. Но теперь, для увеличения эффекта, мы добавим немного черно-белого градиента. Создайте копию выделенного фрагмента в новый слой (Ctrl+C, Ctrl+V).

Обесцветим новый слой. Для этого зайдем в меню Изображение, выберем пункт Коррекция, после чего, выберем пункт Обесцветить. Или воспользуемся сочетанием клавиш Shift+Ctrl+U.

Шаг 8

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

Вот и готово!

Создайте собственный след движения из вашего объекта с помощью Photoshop

Как создать собственный эффект следа движения

Шаг 1. Выберите главный объект на фотографии

С изображением, только что открытым в Photoshop, начните с выбора основного объекта на фотографии с помощью инструмента выделения по вашему выбору ( Lasso Tool , Quick Selection Tool , Pen Tool и т. Д.). Для своего изображения я буду использовать инструмент быстрого выбора, который впервые был представлен в Photoshop CS3, но, конечно, вы можете использовать другой инструмент выбора, если хотите.Я выберу инструмент быстрого выбора на панели инструментов:

Выбор инструмента быстрого выбора.

Затем, с помощью инструмента быстрого выбора в руке, я щелкаю в любом месте внутри спортсмена и, удерживая кнопку мыши нажатой, просто перетаскиваю инструмент поверх него, пока он полностью не выделится. Независимо от того, какой инструмент выделения вы использовали, по завершении вы должны увидеть контур выделения вокруг объекта:

Теперь основная тема выбрана.

Шаг 2. Сделайте две копии объекта

Выбрав тему, перейдите в меню Layer в строке меню в верхней части экрана, выберите New , затем выберите Layer через Copy или нажмите Ctrl + J (Win) / Command + J (Mac) на клавиатуре, чтобы быстро выбрать ту же команду с помощью сочетания клавиш:

Перейдите в меню «Слой»> «Создать»> «Слой через копирование» или нажмите Ctrl + J (Win) / Command + J (Mac).

В окне документа ничего не произойдет, но Photoshop сделает копию вашего объекта и поместит ее на новый слой с именем Layer 1 над исходным изображением на панели слоев (исходное изображение находится на фоновом слое):

Копия выбранного изображения появится над исходной фотографией.

Когда у вас будет первая копия объекта, сделайте вторую копию, вернувшись в меню Layer , выбрав New , затем выбрав Layer через Copy или нажав Ctrl + J (Win) / Command + J (Mac) на клавиатуре.Теперь у вас будет две копии вашего объекта, каждая на отдельном слое, над исходной фотографией:

Вторая копия объекта появится на панели «Слои».

Шаг 3: Выберите слой 1

Щелкните Layer 1 на панели Layers, чтобы выбрать его:

Выбор уровня 1.

Шаг 4. Выберите инструмент «Перемещение»

Выберите Photoshop Move Tool в верхней части панели инструментов. Вы также можете нажать на клавиатуре букву V , чтобы выбрать ее с помощью сочетания клавиш:

Выберите инструмент «Перемещение».

Шаг 5. Перетащите копию подальше от темы

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

Щелкните и перетащите копию за основным объектом в том направлении, откуда они должны исходить.

Шаг 6: Измените режим наложения слоя на Мягкий свет

Перейдите к опции Blend Mode в верхнем левом углу панели Layers и измените режим наложения слоя с Normal на Soft Light :

Измените режим наложения для слоя 1 на «Мягкий свет».

Это смешивает копию позади объекта с фоном, создавая блеклое «призрачное» изображение человека:

Копия позади основного объекта теперь сливается с фоном.

Шаг 7. Перетащите еще одну копию в том же направлении

При активном инструменте «Перемещение», удерживая нажатой клавишу Alt (Win) / Option (Mac), щелкните внутри изображения и перетащите в том же направлении, что и минуту назад. Удерживая нажатой клавишу Alt (Win) / Option (Mac), Photoshop делает копию слоя при перетаскивании с помощью инструмента «Перемещение», что дает нам еще одну копию нашего объекта.Перетащите эту новую копию в том же направлении, что и раньше, но сделайте расстояние между ними немного шире, чем вы делали ранее:

Удерживая Alt (Win) / Option (Mac), перетащите еще одну копию объекта в том же направлении.

Шаг 8: Уменьшите непрозрачность слоя

Если мы посмотрим на панель «Слои», то увидим, что теперь у нас есть три копии нашего основного объекта, каждая на отдельном слое. Тот, который мы только что создали, выбирается и выделяется. Нам нужно, чтобы новая копия нашего объекта выглядела более блеклой на изображении, чем предыдущая, поэтому уменьшите ее значение Opacity до 65% :

Обесцветьте новую копию объекта, уменьшив ее непрозрачность.

Эффект следа движения теперь начинает обретать форму, при этом копии выглядят более блеклыми по мере удаления от объекта:

Новая копия выглядит более блеклой, чем предыдущая.

Шаг 9: повторите шаги 7 и 8 еще несколько раз

Чтобы завершить эффект следа движения, нам просто нужно повторить ту же пару шагов (шаги 7 и 8) еще два или три раза. Удерживая нажатой клавишу Alt (Win) / Option (Mac), щелкните внутри документа с помощью инструмента «Перемещение» и перетащите другую копию объекта в том же направлении, увеличивая расстояние между копиями каждый раз. .Затем уменьшите непрозрачность новой копии, чтобы она затухала больше, чем предыдущая. Я вытащу еще две копии моего предмета. Я уменьшу непрозрачность первой копии до 35% , а второй до 15% , так что она едва видна. На панели «Слои» мы видим, что у меня теперь всего пять копий моего объекта:

Панель «Слои», показывающая все копии объекта, необходимые для создания следа движения.

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

Вот мой последний эффект «следа движения» после внесения незначительных изменений в расстояние между копиями:

Окончательный результат.

Как создать расширенную анимацию в Photoshop — Smashing Magazine

Об авторе

Стивен Г. Петрэни — штатный графический дизайнер и по совместительству инструктор в Университете Брэдли в США. Ему нравится работать в Photoshop … Больше о Стивен Petrany …

Хотя анимация в Photoshop не является новой концепцией, она определенно прошла долгий путь за последние несколько лет: панель «Таймлайн» была переработана, добавлены видеослои, а также возможность создавать анимацию по ключевым кадрам.Эти дополнения действительно улучшили возможности Photoshop. Несмотря на то, что Photoshop все еще далек от возможности создавать высококачественные и кинематографические анимации таких программ, как After Effects, у него все же достаточно мощности для создания сложной анимации , что особенно полезно, если вы не хотите потратить время на изучение нового приложения.

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

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

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

Дополнительная информация о SmashingMag:

Обзор панели временной шкалы

Открытие панели временной шкалы («Окно» → «Временная шкала») позволяет вам выбирать между двумя типами временных шкал: видео и кадром. Временная шкала кадров предназначена для покадровой анимации и может быть очень ограниченной.Обычно он работает путем преобразования слоев на панели «Слои» в отдельные кадры. Я не буду вдаваться в подробности об этой временной шкале; Я хочу сосредоточиться на временной шкале видео.

Photoshop предлагает вам на выбор две шкалы времени. (Просмотр большой версии)

Временная шкала видео

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

Панель временной шкалы видео показывает слой (1) со свойствами слоя (2). На временной шкале отображается индикатор текущего времени (3) и существующие ключевые кадры (4). (Просмотреть большую версию)

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

Значок секундомера был выбран для свойства «Положение». На шкалу времени автоматически добавляется ключевой кадр. (Просмотр большой версии)

Переместите индикатор текущего времени в другую точку временной шкалы и переместите слой. И снова к временной шкале будет автоматически добавлен другой ключевой кадр.

При перемещении слоя автоматически добавляется ключевой кадр в положение индикатора текущего времени на временной шкале.(Просмотр большой версии)

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

Photoshop автоматически создает анимацию между ключевыми кадрами.

Типы слоев

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

Стандартный (пиксельный) слой — это слой, содержащий информацию о пикселях. Это самый распространенный (и самый простой) слой в Photoshop. Свойства слоя включают:

Стандартный слой на шкале времени с открытыми свойствами слоя.

Добавление маски слоя или векторной маски к любому слою привнесет дополнительные свойства, специфичные для этой маски. Свойства слоя, которые добавляются к существующим свойствам, включают:

• положение слоя или векторной маски
• слой или векторная маска, разрешающая

Слой с маской слоя на временной шкале.
Слой с векторной маской на шкале времени.

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

• , непрозрачность
• , стили
• , положение векторной маски
• , включение векторной маски
• .

Слой-фигура на временной шкале с открытыми свойствами слоя.

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

• , непрозрачность
• , стили
• , деформацию текста
• .

Текстовый слой на временной шкале с открытыми свойствами слоя.

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

• , непрозрачность
• , стили
• .

Текстовый слой на временной шкале с открытыми свойствами слоя.

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

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

Группа видеослоя на временной шкале с открытыми свойствами слоя.
3D-слой на шкале времени с открытыми свойствами слоя.

Я рекомендую вам изучить эти два типа слоев самостоятельно. В оставшейся части статьи я сосредоточусь только на традиционных типах слоев, исключая видео и 3D.

Свойства слоя

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

Свойство Position позволяет перемещаться по осям X и Y. Управляйте положением объекта с помощью инструмента «Перемещение».

Для свойства Position объекта был задан ключевой кадр, позволяющий перемещать мяч назад и вперед по оси x.

Непрозрачность позволяет задавать ключевые кадры непрозрачности слоя.Элемент управления «Непрозрачность» находится на панели «Слои».

Непрозрачность объекта была установлена ​​на 100% и 0% по ключевым кадрам для создания затухающей анимации.

Свойство Style позволяет создавать ключевые кадры для стилей слоя. Чтобы получить доступ к стилям слоев, дважды щелкните слой на панели «Слои».

Стили слоя объекта (Bevel & Emboss, Color Overlay и Drop Shadow) были созданы по ключевым кадрам для создания пульсирующей анимации.

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

Положение маски настроено по ключевым кадрам для перемещения по слою, открывая фоновый слой.

Также возможно включение или отключение слоя или векторной маски . Чтобы включить или отключить маску слоя, перейдите в «Слой» → «Маска слоя» и выберите «Включить» или «Отключить». Для векторных масок перейдите в «Слой» → «Векторная маска».Кроме того, вы можете «Shift + щелкнуть» по маске на панели «Слои» для включения или выключения.

Маска включается по ключевым кадрам, а затем через короткое время отключается, вызывая раскрытие.

Свойство Text Warp , относящееся к текстовым слоям, позволяет создавать ключевые кадры для любой деформации текста, применяемой к текстовому слою. Вы можете получить доступ к списку эффектов деформации текста, выбрав «Тип» → «Деформация текста».

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

Свойство Преобразовать позволяет преобразовать ключевые кадры в слой. К различным преобразованиям (таким как поворот и масштаб) можно получить доступ, выбрав «Правка» → «Преобразовать» или нажав Control + T для входа в режим свободного преобразования.

Масштаб и вращение объекта настроены по ключевым кадрам для создания вращающейся звезды, которая растет и сжимается.

Изучение новых методов

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

Использование шаблонных слоев с анимацией смарт-объектов

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

Красная точка, движущаяся по кругу.

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

Шаг 1: Сцена, состоящая из двух слоев, красной точки и большого серого круга.(Просмотр большой версии)

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

Шаг 2: Преобразуйте слои в смарт-объект. (Посмотреть большую версию)

Теперь мы можем анимировать оба объекта как один слой. Поскольку это смарт-объект, у меня есть доступ к свойству Transform на панели Timeline, которое позволяет мне вращать ключевые кадры. Я добавил ключевой кадр при каждом половинном повороте для одного полного поворота.В результате получился круг, вращающийся на 360 градусов.

Шаг 3: Оба слоя вращаются как один.

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

Шаг 4: Скройте слой «Форма шаблона». (Просмотр большой версии)

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

Красная точка, движущаяся по кругу.

Встраивание анимации в смарт-объекты

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

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

В сцене ниже я уже настроил простую анимацию вращения желтой точки на синем фоне.

Шаг 1. Желтая точка, вращающаяся на холсте.

Затем я перейду на панель «Слои», щелкните правой кнопкой мыши слой «Точка» и выберите «Преобразовать в смарт-объект».

Шаг 2: Преобразуйте слой с желтыми точками в смарт-объект.(Просмотр большой версии)

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

Шаг 3. Новые ключевые кадры создают эффект отражения.

Давайте продолжим. Преобразуйте этот слой смарт-объекта в другой смарт-объект.Это даст нам новый смарт-объект для редактирования. Затем мы добавим преобразование к этому смарт-объекту. Перейдите в «Правка» → «Свободное преобразование» и настройте ручки так, чтобы смарт-объект отображался в перспективе.

Шаг 4: Преобразуйте анимацию. (Просмотр большой версии)

Теперь, когда вы воспроизводите анимацию, она будет анимироваться внутри искаженного смарт-объекта.

Анимация воспроизводится внутри преобразования.

Анимация фильтров

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

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

Шаг 1. Анимация смарт-объекта в виде желтой точки, движущейся по красному фону.

Поскольку наша анимация уже находится в смарт-объекте, я могу добавить фильтр прямо к нему.В этом случае я перейду к «Фильтр» → «Искажение» → «Вращение».

Шаг 2: Применение фильтра Twirl к анимации смарт-объекта. (Просмотр большой версии)

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

Анимация фильтра Twirl.

Добавление стилей слоя к анимации смарт-объекта

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

В сцене ниже у меня уже есть смарт-объект, содержащий простую анимацию точки, движущейся по белому фону.

Шаг 1. Простая анимация смарт-объекта.

Моя цель — применить стиль слоя Bevel & Emboss к точке. Однако, если я попытаюсь применить стиль слоя к смарт-объекту на этом этапе, это повлияет на весь смарт-объект, белый фон и все остальное.

Шаг 2. Стили слоя применяются ко всему изображению в целом.

Чтобы исправить это, мне нужно удалить белый фон. Ранее я упоминал, что мы можем редактировать смарт-объект, чтобы скрыть лишние слои. В этом примере я хочу продемонстрировать другой метод.

Пока существует хороший тональный контраст между слоями, мы можем использовать параметры Blend If на панели Layer Styles для удаления фона. Дважды щелкните слой смарт-объекта, чтобы открыть панель «Стили слоя», и регулируйте ползунок «Наложить, если» → «Этот слой», пока фон не исчезнет.

Совет. Удерживая нажатой кнопку Опция разделяет ползунки, обеспечивая более плавный переход.

Шаг 3: Отрегулируйте ползунки «Смешать, если». (См. Большую версию)

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

Шаг 4: Преобразование в смарт-объект. (Просмотр большой версии)

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

В анимацию смарт-объекта добавлены стили слоя.

Изменение анимации с помощью корректирующих слоев

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

В приведенной ниже сцене я установил простую анимацию в оттенках серого с двумя точками, одна над другой.

Шаг 1: Анимация двух точек в оттенках серого.

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

Шаг 2. Настройки для корректирующего слоя «Карта градиента» (Просмотр в большом размере)

В результате получается анимация, окрашенная в соответствии со свойствами корректирующего слоя.

Анимация окрашена корректирующим слоем.

Создание органических эффектов с помощью корректирующих слоев

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

Эффект органической анимации.

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

Шаг 1. Размытая точка, анимированная поверх другой.

Теперь мы добавим корректирующий слой уровней. Используйте панель «Свойства», чтобы добавить ползунки теней и светов, пока края объектов не станут четкими.

Шаг 2: Редактирование корректирующего слоя уровней. (Просмотр большой версии)

Воспроизведение анимации даст нам уникальный органичный эффект.

Эффект органической анимации.

Объединяем все вместе

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

Создание часов с движущимися стрелками

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

Анимация стрелок часов.

Сцена начинается с двух новых слоев: один содержит форму минутной стрелки (красный), а другой — объект нашего шаблона (серый).

Шаг 1: Два новых слоя: минутная стрелка и слой шаблона. (Просмотр большой версии)

Как мы узнали ранее, мы конвертируем эти два слоя в смарт-объект и анимируем вращение.

Шаг 2. Слои, объединенные в смарт-объект, анимируются как один.

Чтобы заблокировать анимацию, преобразуйте слои в другой смарт-объект. Это позволит нам преобразовать ( Control + T ) смарт-объект так, чтобы он выглядел в перспективе, как показано на изображении ниже.

Шаг 3: Анимация преобразуется в перспективу.

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

Шаг 4: Анимация со скрытым слоем шаблона.

Добавление стиля слоя Drop Shadow с настройкой «Spread» на 100% имитирует некоторую глубину.

Шаг 5: Drop Shadow имитирует края часовой стрелки.

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

Шаг 6: Анимация часовой и минутной стрелок.

Наконец, мы можем создать остальные часы, используя традиционные методы Photoshop. В результате получаются живые часы в перспективе.

Анимация стрелок часов.

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

Создание вращающегося шара

В этом уроке мы применим фильтры к анимированным смарт-объектам, чтобы создать новый эффект.Вот что мы будем создавать:

Анимация вращающегося земного шара.

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

Шаг 1: Изображение повторяющейся графики, которая будет анимирована. (Просмотр большой версии)

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

Шаг 2: Анимация простого цикла.

Затем преобразуйте этот слой в смарт-объект.

Шаг 3. Преобразование простой анимации в смарт-объект. (Просмотр большой версии)

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

Шаг 4. Границы слоя, видимые во время анимации.

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

Шаг 5: Фильтр применен к границам слоя.

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

Шаг 6: Добавлена ​​новая маска слоя. (Просмотр большой версии)

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

Шаг 7: Фильтр применен к границам холста.

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

Шаг 8: Маска слоя скрывает все, что находится за пределами формы глобуса.

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

Анимация вращающегося земного шара.

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

Создание анимации пламени

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

Анимация пламени в органической технике.

Для начала нам нужно создать очень высокую сцену. В данном случае у меня есть сцена размером примерно 500 × 10 000 пикселей. На новом слое я нарисовал очень грубую линию с помощью инструмента «Кисть».

Шаг 1: Высокая белая линия с мягкими краями

Затем создайте новую сцену размером 500 × 500 пикселей с черным фоном. Перенесите высокую линию, которую мы только что создали, в эту новую сцену и создайте простую анимацию прокрутки.

Шаг 2: Простая анимация полосы прокрутки.

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

Шаг 3: Пунктирная линия представляет форму маски слоя. (Просмотр большой версии)

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

Шаг 4: Простая анимация с маской слоя.

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

Шаг 5: Корректирующий слой уточняет форму.

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

Шаг 6. Размытие смарт-объекта с последующим повторением слоя регулировки уровней создает более плавное движение.

Есть несколько способов добавить цвет.Я хочу показать один способ, который хорошо сработал для меня. Создайте новый слой и с помощью инструмента «Кисть» нарисуйте синий (на основании) и желтый (вверху) блики на пламени. Изменив режим наложения этого слоя на «Hard Mix», мы получим несколько ярких цветных полос.

Шаг 7. Использование режимов наложения для добавления цвета.

Поскольку переходы между цветами слишком резкие, нам нужно их смягчить. Для этого снова выберите все слои ( Alt + Control + A ) и преобразуйте их в другой смарт-объект.Теперь мы можем добавить фильтр «Размытие в движении», чтобы лучше смешивать цвета.

Шаг 8: Добавление Motion Blur смешивает цвета.

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

Анимация пламени в органической технике.

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

Photoshop Animation Заключение

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

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

Дополнительная литература

(ml, al)

Как создать эффект фальшивого размытия в движении в Photoshop

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

Я использую стандартный инструмент «Перо», чтобы выделить автомобиль. просто проведите по краям автомобиля.
щелкните, удерживая нажатой клавишу «Alt» (для Windows) и «Option» (для пользователей Mac OS), чтобы нарисовать путь от руки.
после Завершите путь. щелкните правой кнопкой мыши путь и выберите «Сделать выбор». Добавьте маску к выделенному, чтобы был виден только выбранный объект.

Затем мы размываем фон с помощью Motion Blur. Обычно задайте направление угла горизонтально по отношению к дороге.
Теперь мы убираем автомобиль со слоя и заполняем его содержимым. Щелкните маску автомобиля и увеличьте выделение на 12 пикселей. Здесь количество пикселей зависит от размера фотографии.
преобразовать слой в смарт-объект и применить к нему фильтр размытия движения.Отрегулируйте расстояние в пикселях и нажмите ОК.

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

Еще один способ по-новому, который работает только в Photoshop CC.
перейдите в галерею размытия и выберите размытие при вращении.
Используя эффект Spin Blur, вы можете вращать и размывать изображение вокруг одной или нескольких точек.
Чтобы изменить размер эллипса равномерно, перетащите его границу.
Photoshop позволяет работать с центральными точками, размером и формой размытия и другими настройками, одновременно просматривая предварительный просмотр изменений.
Чтобы добавить новое размытие при вращении, щелкните в нужном месте изображения.

вот фотографии до и после.

советов по созданию специальных эффектов в After Effects

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

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

Готовы? Давайте начнем!

---

Ключевое изображение на зеленом экране

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

Ключевое изображение зеленого экрана в Adobe.

---

Подбор цвета

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

Создайте корректирующий слой.

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

Примените эффект «Оттенок», удалите корректирующий слой, затем уменьшите значение «Оттенок».

Затем примените эффект Tint к составному элементу. (В моем примере это космический корабль.) Теперь используйте палитру цветов в эффекте «Оттенок» для настроек Map Black to и Map White to . Выберите более темный цвет и более светлый цвет для фонового материала рядом с местом, где будет компоноваться ваш объект.

Теперь удалите корректирующий слой с эффектом «Размытие по Гауссу» и установите для параметра «Оттенок» меньшее значение. Обычно около 10% -15% , но иногда до 50% , если ваш объект находится на большом расстоянии от неба, как в этом случае.

Вуаля! Конечный продукт.

---

Легкая пленка

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

Имитируйте естественный свет, создавая эффект светового обертывания.

Сначала продублируйте фоновый материал и переместите его копию в верхнюю часть композиции.Он будет служить нашим световым слоем после того, как мы применим к нему некоторые эффекты. Примените Gaussian Blur effect и установите Blurriness на 100 .

Затем примените эффект Set Matte и установите Take Matte From Layer для видеоряда зеленого экрана. Также обратите внимание на Invert Matte . Затем примените эффект Channel Blur и установите для Alpha Blurriness значение 50-80 . Наконец, примените второй эффект Set Matte и снова установите Take Matte From Layer для видеоряда зеленого экрана.

Не забудьте настроить прозрачность.

В результате должен получиться слой, на котором будет только ваша светлая пленка. Установите для слоя режим наложения Screen и настройте параметр Alpha Blurriness , чтобы отрегулировать количество света, которое вы хотите. Я также рекомендую отрегулировать непрозрачность слоя светового обтекания, если необходимо.

---

Добавление размытия в движении

После того, как вы настроили видео на зеленом экране, вы можете заметить, что он немного нервный.Это связано с тем, что во время движения по краям объекта исчезает большое количество естественного размытия при движении. Однако мы можем добавить это обратно, используя Pixel Motion Blur в After Effects.

Добавьте размытие в движении к своему изображению с помощью Pixel Motion Blur.

Во-первых, предварительно скомпонует вашего видео с зеленого экрана. Затем примените эффект Pixel Motion Blur . Установите Shutter Samples между 12-16 (или выше) в зависимости от того, насколько быстро движется ваш объект.Вы также можете увеличить значение Shutter Angle , чтобы добавить еще больше размытия при движении, если это необходимо.

Добавьте еще больше размытия при движении, увеличив значение Shudder Angle .

---

Использование цветных фонарей

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

Совместите сцену с фоном, используя цветные гели или цветные огни RGB.

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

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

Свет на заднем плане соответствует свету, отраженному от объекта.

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

Осветите объект во время съемки.

---

Заинтересованы бесплатными треками, которые мы использовали для создания этого видео? Послушайте еще раз:

Узнайте больше советов по созданию видео и найдите БЕСПЛАТНЫЕ видеоэлементы:

Challenge: Создание эффекта движения — Видеоурок по Photoshop

Обзор Стенограммы Файлы упражнений Просмотр в автономном режиме

Детали курса

Фильтры Photoshop охватывают весь спектр от простого до сложного.В этом курсе фотограф и преподаватель Крис Орвиг делится некоторыми передовыми методами и выделяет оптимальные фильтры для фотографов, желающих улучшить свои изображения. Крис показывает, как повысить гибкость при работе со смарт-фильтрами, и описывает рабочие процессы смарт-фильтров в Photoshop, Lightroom и Camera Raw. Он также исследует, как исправить и улучшить ваши фотографии с помощью Camera Raw, применить творческие эффекты с фильтрами и использовать фильтры плагинов для повышения вашего творчества.

Инструктор

• Крис Орвиг

  Фотограф / Автор / Учитель / Провидец

  Крис Орвиг — знаменитый фотограф, писатель и учитель, который привносит страсть во все, что он делает.

  Он является автором курсов для LinkedIn Learning и Lynda.com, работал преподавателем в Институте Брукса в Санта-Барбаре, Калифорния. Как учитель, Крис разделяет идею У. Б. Йейтса о том, что «образование — это не наполнение ведра, а разжигание огня». Как фотограф он соглашается с наблюдением Марка Рибу о том, что «фотографировать — это интенсивно наслаждаться жизнью, каждую сотую секунды». Для получения дополнительной информации и вдохновения посетите www.chrisorwig.com.

  Узнать больше Видеть меньше

Навыки, описанные в этом курсе

Зрители этого курса

9827 человек смотрели этот курс

Связанные курсы

Добро пожаловать

«

(нарезка тарелок) — [Инструктор] Ваша следующая задача — создать эффект движения с помощью этой фотографии.Здесь вы можете видеть, что у меня есть исходное изображение, с которым вы будете работать, и это цель, и цель состоит в том, чтобы работать со смарт-фильтрами, маскированием и смешиванием, чтобы создать такой вид, где у нас есть это движение эффект размытия всего фона таким образом. Лицо объекта совсем не размыто, поэтому вы можете увидеть до и после воздействия на внешнюю область изображения. На это задание дайте себе три-пять минут, а затем, когда вы его закончите, вернитесь к следующему фильму, и я покажу вам свой подход к этому.Удачи и увидимся через минуту.

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

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

Скачивайте курсы и учитесь на ходу

Смотрите курсы на мобильном устройстве без подключения к Интернету.Загрузите курсы с помощью приложения LinkedIn Learning для iOS или Android.

11 ЛУЧШИХ альтернатив After Effects в 2020 году (бесплатно и платно)

• Home

• Тестирование

  • • Назад
    • Agile-тестирование
    • BugZilla
    • Cucumber
    • Тестирование базы данных
    • Тестирование ETL
    JIRA
    • Назад
    • JUnit
    • LoadRunner
    • Ручное тестирование
    • Мобильное тестирование
    • Mantis
    • Почтальон
    • QTP
    • Назад
    • Центр качества (ALM) 9020 Тестирование
    • Центр качества (ALM) 9020 Selenium
    • SoapUI
    • Управление тестированием
    • TestLink

• SAP

  • • Назад
    9 0200 ABAP
    • APO
    • Начинающий
    • Basis
    • BODS
    • BI
    • BPC
    • CO
    • Назад
    • CRM
    • Crystal Reports
    • FICO
    • HANA 9020 MM
    • FICO
    • HANA 9020
    • Расчет заработной платы
    • Назад
    • PI / PO
    • PP
    • SD
    • SAPUI5
    • Безопасность
    • Менеджер решений
    • Successfactors
    • SAP Tutorials
• Web
• Apache
• AngularJS
• ASP.Net
• C
• C #
• C ++
• CodeIgniter
• СУБД
• JavaScript

• Назад
• Java
• JSP
• Kotlin
• Linux
• MariaDB
• MS Access
• MS Access
• MS Access js
• Perl

• Назад
• PHP
• PL / SQL
• PostgreSQL
• Python
• ReactJS
• Ruby & Rails
• Scala
• SQL
• SQLite

UML

VB.Net

VBScript

Веб-службы

WPF

Обязательно изучите!

• • Назад
  • Бухгалтерский учет
  • Алгоритмы
  • Android
  • Блокчейн
  • Business Analyst
  • Создание веб-сайта
  • Облачные вычисления
  • COBOL
  • Дизайн компилятора
  200
  • Встроенные системы
  200 Встроенные
  • 9020
  • Учебники по Excel
  • Программирование на Go
  • IoT
  • ITIL
  • Jenkins
  • MIS
  • Сеть
  Операционная система
  • Назад
  • Prep
  • Обзоры
  • PMP
  • Управление проектами в Photoshop
  Salesforce
  • SEO
  • Разработка программного обеспечения
  • VBA
  902 01

Большие данные

• • Назад
  • AWS
  • BigData
  • Cassandra
  • Cognos
  • Хранилище данных
  • DevOps
  • 9020 HBase
• Назад Hive
• MongoDB
• NiFi

.