Как выполнить обводку в фотошопе: как ее сделать и настроить

Содержание

Работа с изображениями и объектами в Фотошопе

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

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

Photoshop: как растянуть изображение

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

Если вам нужно вручную изменить изображение, растянуть его, например, воспользуйтесь функцией выделения «Прямоугольная область». Чтобы сразу выделить картинку, нажмите «Ctrl+T». После этого потяните за нужный угол и выведите изображение за рабочую область. При этом изображение может деформироваться, пропорции исказиться. Чтобы сохранить пропорции при растягивании изображения, удерживайте Shift при работе с масштабом.

Как размыть в Фотошопе

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

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

Как обрезать фото в Фотошопе

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

  • Выделите изображение при помощи функции «Овальная область, например», и после этого во вкладке «Изображения» нажмите «Кадрировать». Часть изображения, вне овала будет удалена.
  • Вы можете обрезать картинку справа или слева, например, чтобы удалить ненужные объекты. В таком случае, выделите ненужный участок указанным выше способом и нажмите во вкладке «Редактирование» пункт «Вырезать».

Как вырезать объект в Фотошопе

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

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

Как выделить объект в Фотошопе

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

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

Photoshop: как уменьшить объект

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

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

Как вставить вырезанное изображение в Фотошопе

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

Если же вы собираетесь вставить изображение на другое фото во вкладке «Редактирование» выберите пункт «Вставить». Для упрощения задачи можно воспользоваться клавишами «Ctrl+V» для вставки фото. Чтобы скопировать объект примените «Ctrl+C».

Как нарисовать линию в Фотошопе

Для создания линии в редакторе на панели инструментов существует пункт «Линия». Выберите данный инструмент и проведите линию в нужном направлении. Вы можете задать толщину линии, ее цвет и направление.

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

Как сделать обводку в Фотошопе

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

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

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

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

Два способа создания обводки

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

Обводка слоя в «Фотошопе»

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

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

  1. Выбрать слой.
  2. В пункте меню вкладки «Редактирование» выбрать «Выполнить обводку».

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

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

  • по границе слоя снаружи;
  • так, чтобы граница была ее центром;
  • по границе внутри.

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

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

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

Другое диалоговое окно «Обводка»

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

Это же окно со стилями вызывается нажатием кнопки «Добавить стиль слоя» в окне «Слои».

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

Для этого пройдите в меню «Редактирование», далее - «Клавиатурные сокращения», найдите по одному из указанных выше путей по пунктам меню и задайте удобную для вас комбинацию.

Смысл существования двух диалоговых окон «Обводка»

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

Обводка по контуру

Как сделать обводку в «Фотошопе?» Второй способ - это создание контура и его прорисовка.

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

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

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

Обратите внимание на то, что обводка в этом случае будет размещена на указанном вами слое, в том числе новом.

Обводка текста по контуру

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

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

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

Диалоговое окно стиля русскоязычном и англоязычном Photoshop:

Размер (Size)

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

Положение (Position)

Интерфейс опции выполнен в виде выпадающего списка, состоящего из трёх пунктов, задающих положение обводки относительно края объекта:
Снаружи (Outside) - обводка находится за краями объекта
Внутри (Inside) - внутри краёв
Из центра (Center) - середина обводки совпадает проходит по краю объекта

С этим всё понятно. А теперь о тонкостях взаимодействия с другими стилями. На рисунке ниже я привёл примеры. Обводку частично перекрывает стиль слоя "Тиснение" (Bevel and Emboss) , но в свою очередь, обводка перекрывает внешнюю Тень (Drop Shadow), а стили "Наложение узора" (Pattern Overlay), "Наложение цвета" (Color Overlay) её не перекрывают:

Создание контура объекта (фигуры) из выделения в программе Фотошоп различных версий

Создание контура объекта (фигуры) из выделения в программе Фотошоп различных версий

Мне кажется, что каждый из нас  хоть раз в своей жизни обводил карандашом  кисть своей руки, положив её на лист бумаги. А может быть это происходило на пляже. Кисть руки лежала на песке и мы обводили её какой-нибудь палочкой или длинным камушком. И в том и другом случае у нас получался контур. А давайте сделаем что-то подобное, но теперь в программе Фотошоп.

Помогать нам будет фото кисти руки:

Для работы в Фотошопе данное изображение ладони, — материал идеальный и простой. И вот почему. Однотонный, белого цвета фон и объект — кисть руки, тоже можно считать относительно однотонной, а на белом фоне рука выглядит довольно контрастно.

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

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

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

Мы можем просто нажать кнопку «Ок», а можем, после появления этого окошка, сразу же на клавиатуре что-то написать, то есть присвоить слою имя, ну или название и уже после этого нажать кнопку «Ок». Делаем на своё усмотрение.

Я просто нажал кнопку «Ок»:

Готово! Слой-дубликат появился в палитре (окне) слоёв.

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

Обратимся к перечню режимов наложения в верхней менюшке окна слоёв, раскрыв список режимов обычным щелчком мыши по кнопке-стрелке:

Перед нашими глазами появился перечень режимов наложения слоя:

A давайте усилим контрастность, так усилим. Выберем из перечня режим «Линейный затемнитель»:

И вот что мы получили в результате:

Ну вот, для работы инструментом «Быстрое выделение» всё готово. Наводим курсор мыши на нужный нам в данный момент инструмент «Быстрое выделение» в окошке инструментов:

И щелчком левой кнопки мыши выбираем его. Курсор мыши превратился в кружок с перекрестием внутри.

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

Инструмент должен работать в режиме «Добавить к выделенной области». Чтобы так и было, нажмём на значок инструмента с плюсиком. Если значок подсвечивается синим цветом, то тогда щёлкать мышкой по нему не нужно, — режим уже активизирован:

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

 

Если установить значение 3 или 5, то выделение будет более чётким. Если выбрать значение значительно больше видимого нам сейчас, а видим мы значение 18, то начав выделять ладонь, мы будем захватывать белый фон, так как с большим диаметром инструмента уменьшится его чувствительность.

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

Чтобы инструмент работал, как говорится, «на полную катушку», жёсткость нужно установить 100%. Ну вот у нас всё готово к выделению кисти руки. Предлагаю начать выделение с запястья:

 

Интервалы пунктира-выделения тоже устанавливаем не очень большие. В моём случае 7%. Если мы установим интервалы выделения значительно больше, то выделение будет менее ровным, я бы даже сказал, грубым или черновым. Но и это может быть в некоторых случаях нужным. Делаем всё, конечно же, на своё усмотрение.

Ну что же, начнём. Подводим курсор инструмента к запястью. Нажав и удерживая левую кнопку мыши, начинаем вести инструмент вверх по направлению к кончикам пальцев:

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

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

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

Что же делать, если в область выделения всё же попал белый фон? Можно отменить выделение вообще, нажав сочетание клавиш Ctrl+D и начать выделять ладонь заново. А можно обратиться к блоку технических настроек инструмента и переключить режим его работы щелчком мыши, но теперь уже по значку инструмента с минусом:

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

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

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

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

В том случае, когда мы всё же залезли выделением на ладонь, то тогда нам нужно вновь переключить режим работы инструмента, нажав его значок с плюсом и плавными движениями сместить выделение к краю (контуру) ладони. Для того чтобы выделение было качественным и чётко обтекало контур кисти руки, да и нам самим было удобнее работать лучшим будет, приступая к выделению, увеличить масштаб видимости:

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

Кисть выделена — «муравьи» выделения активно бегут по её контуру, а мы производим смену инструмента и создаём новый слой в окошке слоёв.

Давайте начнём с создания нового слоя. Нажмём в нижней менюшке окна слоёв, значок создания нового слоя. Готово:

Этот новый слой через несколько секунд превратится в слой-контур ладони, а точнее будущий контур. У нас есть пока только выделенная область, а создание контура впереди.

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

Давайте самый верхний. Он же первый сверху вниз, носящий название «Прямоугольная область»:

Итак, новый пока ещё пустой слой создан, смена инструмента произведена и теперь, мы заводим курсор инструмента на область ладони и оказываемся курсором внутри выделения. Курсор инструмента имеет вид двух крестиков. Один большой, а другой маленький. Делаем щелчок правой кнопкой мыши. Появилось окошко опций, в котором нам в данный момент интересна опция «Выполнить обводку»:

Выберем её. И вот появилось следующее окошко настроек:

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

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

Далее обратимся к верхнему меню и нажмём кнопку «Выделение», открыв этим действием нужное нам окошко опций, в котором выберем действие «Отменить выделение»:

 

Ну вот, другое дело:

Чтобы быть уверенными в том, что созданный нами контур без изъянов и дефектов, увеличим масштаб видимости (версия Фотошоп CS5):

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

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

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

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

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

Оставить комментарий

Как в фотошопе имитировать нажим кисти при рисовании линии | DesigNonstop

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

14

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

Шаг 1
Создаем в фотошопе новый документ, заливаем его цветом #001d2d.

Шаг 2
Выбираем инструмент «Кисть» (Brush Tool), потом нажимаем F5 и настраиваем кисть, как на рисунке ниже на закладке «Форма отпечатка кисти» (Brush Tip Shapes). Кисть я выбрала мягкую, размером 3 пикселя из базового набора кистей в фотошопе.

Шаг 3
Потом идем в закладку «Динамика формы» (Shape Dynamics) и смотрим, чтобы настройки были такие же, как на рисунке ниже.

Шаг 4
Теперь выбираем инструмент «Перо» (Pen Tool). На новом слое ставим сначала одну опорную точку, а потом другую, чтобы получить прямую линию.

Шаг 5
После этого щелкаем правой кнопкой мыши и выбираем пункт «Выполнить обводку контура…» (Stroke Path).

Шаг 6
После этого в появившемся диалоговом окошке ставим галку напротив пункта «Имитировать нажим» (Simulate pressure).

Шаг 7
На этой стадии у меня получился такой результат.

 

Шаг 8
Теперь нажимаем Ctrl+H, чтобы убрать контур, и получаем такую вот линию, имитирующую нажим пера.

Шаг 9
Если чувствуете в себе силы, то можно задавать более сложные контуры, состоящие из трех и более точек.

Шаг 10
А в итоге получить, например, такой результат.

Создавайте интересные эффекты, применяя мазки кисти к векторным путям в Photoshop.

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

1. Создайте новый документ Photoshop 600 x 300 пикселей и добавьте текст.Я использовал Arial Bold размером 200 пикселей и установил красный цвет переднего плана. На этом этапе не имеет значения, какой цвет вы выберете, потому что вы можете выбрать цвет позже, когда воспользуетесь кистью.

2. Теперь сделаем контур из текста. Выберите «Слой»> «Текст»> «Создать рабочий контур». Затем отключите видимость текстового слоя, чтобы видеть только контур букв.

3. Выберите инструмент «Кисть» (BE) на панели инструментов и на панели параметров кисти в верхней части экрана выберите кончик кисти «Fuzzball».Установите диаметр кисти примерно 70 пикселей.

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

Откройте палитру кистей, выбрав «Окно»> «Кисти» или нажав F5. Щелкните на слове «Динамика формы» в левой части палитры кистей. Установите дрожание размера на 100%, минимальный диаметр на 80% и колебание угла на 30%. Когда вы вносите изменения в настройки, вы увидите эффект в области предварительного просмотра на панели в нижней части палитры кистей.

5. Теперь щелкните по слову «Рассеивание». Установите Scatter на 0% и установите Count на 16%.

6.Щелкните слово «Динамика цвета». Установите джиттер переднего плана / фона примерно на 70%. Этот параметр влияет на то, как цвета переднего плана и фона смешиваются вместе, когда мы используем кисть.

Хорошо, вот и настроена наша нечеткая кисть.

7. На панели инструментов установите цвет переднего плана - я использовал красный `# 9

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

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

9. Откройте палитру «Пути», выбрав «Окна»> «Пути». Вы должны увидеть миниатюру с контуром слова Fuzzy.

10. Щелкните рабочий путь, чтобы выбрать его. Вы должны увидеть контур пути в окне документа. Теперь щелкните значок Stroke Path внизу палитры Paths, и ваша кисть будет применена к пути.

Если вы все еще видите контур пути, просто щелкните в любом месте серой области внутри палитры Paths.

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

Холст, пастель, 33 пикселя

Жирный кончик, акварель, 35 пикселей

25 Pixel Hypno Lines (в кистях для спецэффектов)

5 Pixel Heavy Stipple (в кистях для влажных носителей)

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

Как создать расширенную анимацию в 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 + щелкнуть» по маске на панели «Слои» для включения или выключения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 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)

Paint Stroke Photoshop Brushes Цифровые кисти для рисования длинные

Этот БОЛЬШОЙ НАБОР кистей Photoshop с длинными сухими мазками - абсолютно выгодная покупка, поскольку в этом наборе кистей Photoshop есть 64 высококачественные кисти Photoshop с высоким разрешением. Каждая кисть поставляется в устаревшем размере 2500 пикселей для пользователей CS-CS5, а также в огромных версиях шириной 5000 пикселей для пользователей Photoshop CS6 и выше.

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

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

Набор

включает: -
64 кисти Photoshop .abr размером 2500 пикселей для старых пользователей.
64 .abr Кисти Photoshop с размером 5000 пикселей для пользователей Photoshop CS6 и более поздних версий.
64 файла прозрачного изображения .png, размер 5000 пикселей.

Обратите внимание: загружаемый файл имеет размер 423 МБ из-за файлов с высоким разрешением.

Также доступны:
Кисти и наложения Water Color Arsenal
https://www.etsy.com/au/listing/161051958
Кисти Water Color Arsenal Dry Brushes
https://www.etsy.com/au/listing/161060403
Water Color Arsenal Кисти для брызг
http://www.etsy.com/au/listing/161060575
Water Color Arsenal Wet Brushes
http: //www.etsy.com / au /isting / 161060737
Water Color Arsenal Overlays
http://www.etsy.com/au/listing/161061017

Кисти Photoshop большие, с высоким разрешением 300ppi. Этот продукт является цифровым и доступен ТОЛЬКО для мгновенной ЗАГРУЗКИ.

Мои продукты поставляются с лицензией на ПРОФЕССИОНАЛЬНОЕ ИСПОЛЬЗОВАНИЕ, подробности см. В моем FAQ.

Почему бы не проверить мои многие другие полезные кисти для Photoshop: https://www.etsy.com/au/shop/ClikchicDesign?section_id=13926629

СПЕЦИАЛЬНОЕ ПРЕДЛОЖЕНИЕ!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~
** Коды СПЕЦИАЛЬНОЙ СКИДКИ для оптовых покупок мгновенных загрузок **

Потратьте 10 долларов и получите скидку 10%, используйте код купона SPEND10GET10OFF
Потратьте 20 долларов и получите скидку 20%, используйте код купона SPEND20GET20OFF
Потратьте 30 долларов и получите скидку 30%, используя код купона SPEND30GET30OFF

Примечание. ** Не включает отпечатки на холсте.

Как легко использовать кисти Photoshop в Clip Studio Paint

Это может показаться неожиданным, но вы действительно можете использовать кисти Photoshop в Clip Studio Paint, и я собираюсь объяснить, как это сделать! Когда я впервые начал использовать Clip Studio, мне было очень грустно, что я не смог найти для него много кистей и использовать те, которые использовал в Photoshop.

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

Как можно использовать кисти Photoshop в программе Clip Studio Paint? Вам необходимо преобразовать кисти в формат .png с помощью AbrMate. Затем вы можете открыть эти изображения в Clip Studio и зарегистрировать их как материалы.Наконец, продублируйте существующую кисть и измените ее кончик кисти на материал, который вы только что зарегистрировали.

Я знаю, что сейчас это не имеет большого смысла, особенно если вы еще не привыкли к Clip Studio. Следуйте приведенному ниже руководству, и вы убедитесь, насколько это просто! Я добавил кучу изображений, чтобы помочь вам лучше. Вы увидите, что менее чем через минуту у вас будут готовы к использованию ваши любимые кисти Photoshop!

Как использовать и преобразовывать кисти Photoshop в программе Clip Studio Paint

Переход от Photoshop к Clip Studio означает разные файлы для кистей.Многие люди использовали Photoshop до Clip Studio. Я знаю, что сделал. Естественно, желание работать с теми же кистями, что и раньше, вполне нормально.

Это инструменты, к которым мы привыкли. Кроме того, не так уж часто встречаются кисти, созданные для Clip Studio. Сегодня мы начинаем видеть больше их, но все же существует большее количество кистей Photoshop.

К сожалению, тип файла другой. Но не расстраивайтесь! Более чем возможно использовать ваши любимые кисти Photoshop и в программе Clip Studio Paint.Это займет всего несколько шагов.

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

1- Скачать abrMate

кистей Photoshop обычно упакованы в один пакет.

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

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

Выберите папку, в которую вы хотите поместить файл .png, и нажмите ОК!

2- Открыть Clip Studio

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

Щелкните слой правой кнопкой мыши и выберите «Преобразовать слой…» . Появится новое окно. Здесь перейдите к опции Expression Color ' и выберите «Gray» . Теперь нажмите ОК.

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

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

3- Зарегистрируйте материал

В программе Clip Studio Paint кисти, узоры, текстуры и другие элементы называются материалами. Вы можете создать свои собственные или загрузить их через приложение Asset в программном обеспечении. Например, при создании собственных кистей вам необходимо зарегистрировать их как материал, чтобы иметь возможность использовать позже!

Для этого перейдите в «Правка -> Зарегистрировать материал… -> Изображение» .Должно появиться новое окно. Здесь вы можете назвать свой новый материал / кисть, которую я рекомендую, чтобы вы могли легко найти ее на более позднем этапе.

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

Например, вы можете выбрать, где вы хотите сохранить свой материал. В Clip Studio есть несколько папок с материалами, из которых вы можете выбирать или создавать свои собственные.

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

По завершении нажмите «ОК» . Ваша новая переделанная кисть почти готова к использованию!

4- Импортируйте свою кисть

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

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

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

Появится новое окно с множеством опций.Перейдите к «Наконечник кисти» и затем выберите «Материал» . Щелкните рамку, и откроется новое окно. Появится окно с несколькими кончиками кистей. Просто выберите тот, который вы только что создали, и нажмите ОК.

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

Наслаждайтесь любимой кистью Photoshop в программе Clip Studio Paint

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

Теперь просто повторите те же действия со всеми другими созданными вами .png! Как я уже сказал, к сожалению, вы не можете преобразовать все кисти сразу, поэтому вам придется преобразовывать их по отдельности, пока они все не будут готовы к использованию в Clip Studio. Следует отметить, что после того, как вы зарегистрируете эти изображения в материалах, они всегда будут готовы для использования в Clip Studio Paint.

Вернуться к блогу

Инструмент анализа мазков Photoshop в MainKeys

добавить для сравнения Adobe - Help Resource Center

help.adobe.com


9
добавить для сравнения eHow | Как сделать почти все! | Видео и статьи с инструкциями

ehow.com

Узнайте, как делать практически все на eHow. Expert Village теперь является частью eHow, добавляя экспертные видеоролики How To в eHow, the world


2
добавить для сравнения Учебники по Photoshop - где каждый может изучить основы Photoshop

photoshopessentials.com

Простые пошаговые уроки Photoshop, которые делают изучение Photoshop увлекательным и легким, идеально подходят для начинающих или любого уровня навыков! Покрытие Photoshop CS2 до CS5! Учебники по основам Photoshop, ретуши фотографий, фотоэффектам, текстовым эффектам и многому другому на сайте Phot ...


22
добавить к сравнению Главная | Форма Сарай

Форма.com

Джордж Орнбо - веб-разработчик-фрилансер, живущий в Лондоне, Великобритания.


2
добавить для сравнения О графическом программном обеспечении - Учебные пособия Обзоры Советы и справка по работе с графикой

graphicssoft.about.com

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


8
добавить для сравнения wikiHow - Практическое руководство, которое вы можете редактировать

wikihow.com

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


0
добавить для сравнения Справка с практическими рекомендациями и видео - для чайников

dummies.com

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


13
добавить для сравнения Бета-версия графического дизайна - Stack Exchange

graphicdesign.stackexchange.com


11
добавить к сравнению Psdtuts + | Учебники по Adobe Photoshop, от новичка до продвинутого.

psd.tutsplus.com

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


-2
добавить для сравнения Онлайн-руководства, советы и новости по Photoshop.| Планета Photoshop

planetphotoshop.com


12

Размытие фотографий в Photoshop - Основные советы для начинающих [С рисунками]

Фильтр размытия в Photoshop - важная функция Photoshop. Photoshop может применять различные методы размытия для всех изображений или их части. Просто ознакомьтесь с 4 часто используемыми методами в этой части.

Создание размытия объектива в Photoshop

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

Шаг 1: Дублируйте фоновый слой. Что касается пользователей Windows, вы можете нажать «Ctrl» и «J», а пользователи Mac нажмите «Command» и «J».

Шаг 2: Перейдите к «Палитре каналов» вашего нового фонового слоя.Щелкните значок «Новый канал», чтобы создать новый канал в палитре RGB, Red, Green и Blue Channel. Используйте инструмент «Кисть» на правой панели и установите непрозрачность на 50%.

Шаг 3. Вернитесь к своему каналу и щелкните глаз перед каналом RGB, чтобы сделать его видимым. Установите цвет переднего плана на белый, а затем с помощью кисти нарисуйте область размытия линзы в Photoshop. Кисть с мягкими краями сначала может быть большой, позже вам нужно будет уменьшить ее, чтобы рисовать.

Шаг 4: По-прежнему щелкните канал RGB, после чего вернитесь к слоям.В раскрывающемся списке «Объектив» выберите «Размытие при линзах». Когда вы увидите диалог, выберите имя вашего нового слоя для карты глубины, не забудьте поставить галочку «Инвертировать».

Шаг 5: С помощью ползунка «Радиус» установите область эффекта размытия. Вы обнаружите, что размытие объектива в Photoshop распространяется плавно, что похоже на фотографии с зеркальных фотокамер.

Размытие поля дизайна в Photoshop

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

Шаг 1: Выберите «Размытие поля» в меню «Размытие». Используйте ползунок размытия в Photoshop CS6. Контролируйте степень размытия поля в Photoshop. Вы можете предварительно просмотреть во время поворота булавки, чтобы увидеть эффект размытия в Photoshop.

Шаг 2: Щелкните значок булавки, а затем выберите опцию «Добавить», чтобы создать дополнительные булавки, для которых можно настроить размытие поля в Photoshop.

Шаг 3: Повторить вращение булавок для настройки различных эффектов размытия в Photoshop.Вы можете перемещать различные ползунки на правой панели. Степень размытия легко настроить.

Шаг 4: Вы можете добавить булавки к другим частям изображения, чтобы создать эффект размытия всего поля в Photoshop. Щелкните значок «ОК», чтобы применить эффект размытия поля в Photoshop.

Шаг 5: Вы можете нажать «H», чтобы временно скрыть эти булавки для предварительного просмотра эффекта размытия.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *