Как в фотошопе сделать анимацию сердца
Перейти к содержимому

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

  • автор:

Уроки по фотошопу. Фотошоп онлайн.

Привет! Спасибо что вы посетили мой блог! Подписывайтесь
на RSS канал чтобы всегда быть в курсе новостей блога!

Самые актуальные статьи.

Анимация в Photoshop. Бьющееся сердце

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

Добавить в закладки:

Похожие фотошоп уроки:

  1. Анимация в фотошопе урок — Анимация в Photoshop учебник
  2. Уроки Adobe Photoshop онлайн — простая анимация
  3. Урок по фотошопу «Анимация пульса» в фотошопе
  4. Уроки по фотошопу — анимация, баннер
  5. Как создать объемны 3D фигуры в Photoshop CS5
  6. Анимация на отдельных частях изображения в фотошопе
  7. Анимация перемещения и исчезновения в Photoshop CS5
  8. Покадровая анимация в Фотошоп CS5
  9. Анимация блика в фотошопе онлайн
  • анимированное изображение «бьющееся сердце».
  • как сделать бьющейся серце в фотошопе
  • как сделать анимацию в фотошопе бьющегося сердца
  • анимация сердца в фотошопе
  • бьющееся сердечко урок
  • как сделать в фотошопе CS5 сердечко бьющимся
  • изображение бьющегося сердца
  • сердечка анимация на photo shop
  • создать анимацию бьющегося сердца

Теги: Photoshop, анимация, Бьющееся, сердце

Вы можете оставить комментарий, или поставить трэкбек со своего сайта.

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

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

Создадим новый документ произвольных размеров — Ctrl+N .

Окно

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

Произвольная фигура

Удерживая клавишу Shift (для соблюдения пропорций) нарисуем сердце на новом документе.

Сердце

Два раза левой кнопкой мыши щёлкнем по слою.

Палитра

Появится окно » Стиль слоя «, в котором делаем активной вкладку » Наложение градиента «. Угол и масштаб устанавливаем примерно такими, как показано на скриншоте ниже. Для редактирования градиента щёлкаем по полю градиента.

Окно

Устанавливаем тёмно-красный цвет для левой контрольной точки, а для правой — ярко-красный. На всякий случай напомню, как это делается. Щёлкаем левой кнопкой мыши по контрольной точке (ползунок, находящийся под градиентной шкалой), становится активным окно » Цвет » в нижнем левом углу окна » Редактор градиентов «. Щёлкаем по полю правее слова » Цвет «, появляется окно » Выберите цвет «, подбираем необходимый цвет и нажимаем » Да «. Точно так же поступаем и со второй контрольной точкой, только цвет, естественно, выбираем другой.

Окно

Делаем активной вкладку » Тиснение » и устанавливаем примерно такие параметры, которые Вы видите на рисунке ниже. Не забудьте сделать тень красного цвета (правый нижний угол окна).

Вкладка

Получаем объёмное сердце.

Сердце

Создадим новый слой, для чего щёлкнем по второй справа иконке в палитре » Слои «.

Палитра

Удерживая клавишу Ctrl , щёлкнем по маске слоя. Загрузится выделение сердца.

Палитра

Выбираем инструмент » Кисть » ( В ), цвет переднего плана белый, непрозрачность около 40%, жёсткость кисти 0%. Выбираем большой размер кисти и несколько раз проводим по верхней части сердца.

Инструмент

Снимаем выделение — Ctrl+D и получаем сердце в 3D формате.

Снимаем выделение - Ctrl+D

Теперь создадим новую кисть, которая нам потребуется для дальнейшей работы. Создаём новый документ — Ctrl+N . Размеры Вы видите ниже на скриншоте. Увеличьте масштаб изображения Ctrl + » + «.

Параметры нового документа

Выбираем поочереди инструменты » Область (горизонтальная строка) » и » Область (вертикальная строка) » в режиме » Добавления к выделенной области «.

Инструменты

В новом документе делаем один клик мыши одним инструментом и один клик — другим инструментом. Получаем выделение в виде крестика.

Крестик

Нажимаем клавишу D (устанавливаем цвета по умолчанию), затем сочетание клавиш Alt+Delete (заливаем выделение цветом переднего плана) и Ctrl+D (снимаем выделение). Получаем чёрный крестик.

Создаём кисть

Переходим в » Редактирование — Определить кисть «.

Редактирование - Определить кисть

В появившемся окне даём имя кисти, к примеру » Крестик «.

Окно

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

Документ

Настраиваем кисть. Для этого нажимаем F5 , появляется окно » Кисти «. При активной вкладке » Форма отпечатка кисти » увеличиваем интервал примерно так, как показано на рисунке ниже.

Палитра

Делаем активной вкладку » Динамика формы » и увеличиваем параметр » Колебания размера » примерно до 80-90%. Настройка кисти завершена.

Вкладка

Сливаем слои — Shift+Ctrl+E .

Палитра

Создаём новый слой, для чего щёлкнем по второй справа иконке в палитре » Слои «. Установим чёрный цвет в качестве цвета переднего плана (нажмём клавишу D ), а затем нажмём сочетание клавиш Alt+Delete (заливаем новый слой чёрным цветом). Новый слой делаем нижним в палитре » Слои «.

Палитра

Как описано выше, создаём новый слой и перемещаем его на самый верх палитры » Слои «.

Палитра

Выбираем инструмент » Кисть » ( В ), цвет переднего плана — белый. Рисуем кистью по сердечку.

Выбираем инструмент

Создаём ещё один новый слой, размещаем его на самый верх палитры » Слои «. Два раза левой кнопкой мыши щёлкаем по новому слою.

Палитра

В окне » Стиль слоя » делаем активной вкладку » Внешнее свечение » и увеличиваем размер примерно до 10 пикселов.

Окно

Несколько раз «проходимся» кистью по сердцу.

Сердце

Удаляем слой с чёрной заливкой, для чего перетаскиваем его на крайнюю правую иконку в палитре » Слои » (значок мусорной корзины).

Палитра

Удерживая клавишу Ctrl , щёлкнем по миниатюре слоя с сердцем, загрузится выделение сердца. Инвертируем выделение — Shift+Ctrl+I . Заливаем выделение белым цветом — Alt+Delete (цвет переднего плана — белый). Снимаем выделение — Ctrl+D .

Палитра

Получаем сердце на белом фоне.

Сердце

Сейчас в палитре » Слои » три слоя: нижний с сердцем, средний с обычными мазками кисти и верхний — с мазками кисти, к которым применён стиль слоя » Внешнее свечение «.

Палитра

Вызываем окно » Анимация «: » Окно — Анимация «.

Окно - Анимация

Сейчас в палитре » Анимация» у нас один кадр, который создаётся по умолчанию.

Палитра

Щёлкаем по второй справа иконке и тем самым, создаём ещё один кадр в палитре » Анимация «.

Палитра

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

Делаем активным средний слой

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

Палитра

Точно так же создаём ещё один кадр, делаем активным средний слой и перемещаем крестики. Затем создаём ещё один кадр, делаем активным верхний слой и перемещаем крестики. В палитре » Анимация » получилось 5 кадров (Вы можете создать сколько Вам угодно).

Палитра

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

Палитра

Щёлкаем по чёрной стрелочке в правом нижнем углу любого кадра и выбираем время отображения кадров 0,2 секунды. Всё наша анимация готова. Нажимаем по кнопке » Play » и любуемся полученным результатом.

Палитра

Для сохранения анимации нажимаем сочетание клавиш Shift+Ctrl+Alt+S , появляется окно » Сохранить для WEB и устройств «. В нем, прежде всего, выбираем формат файла » GIF «, при необходимости уменьшить размер файла, можно «поиграться» значениями » Потери «, » Цвета » и «Дизеринг». Нажимаем » Да «.

Окно

Получаем анимацию сердца. Мы с Вами ответили на вопрос: «Как в фотошопе сделать анимацию сердца?».

Вот работа от Зои Богдановой. Высказывайте своё мнение в комментариях:

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

Скачать урок (737 Кб) в формате PDF можно здесь.

Бьющееся сердце анимация

Автор: Ольга Максимчук (Princypessa). Дата публикации: 20 марта 2020 . Категория: Уроки анимации в фотошопе.

Бьющееся сердце анимация

В сегодняшнем уроке «Бьющееся сердце анимация» мы будем создавать красивую анимацию того, как бьётся сердце.

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

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

Создаем в фотошоп (Ctrl+N) новый документ с параметрами, как на рисунке ниже.

1

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

2

2

22

2

2

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

8

В панели слоев дважды щелкаем по слою «Сердце», чтобы открыть стили слоя.

Во вкладке Внутренняя тень меняем оттенок на # c64e4e и вводим настройки, как на рисунке ниже.

9

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

10

Во вкладке Наложение градиента кликаем по строке выбора градиента, чтобы открыть Редактор градиентов. В Редакторе градиентов создаем новый градиент. Для этого кликаем по нижним Контрольным точкам и вводим следующие значения: для левой Контрольной точки (позиция 0%) оттенок # 000000 (черный), для правой (позиция 100%) – оттенок # ffffff (белый). Для верхних Контрольных точек устанавливаем 100% прозрачность. Полные настройки для вкладки Наложение градиента на последнем скриншоте.

11

11

11

Во вкладке Внешнее свечение используем оттенок # ffffff и вводим настройки, как на картинке ниже.

14

Во вкладке Тень меняем оттенок на # d33b44 и вводим настройки, как на изображении.

15

Результат после применения стилей слоя.

16

В панели слоев щелкаем ПКМ по слою «Сердце» и выбираем «Растрировать стиль слоя».

17

В панели слоев создаем три копии слоя с сердечком. Чтобы создать копию слоя, нажмите на клавиатуре сочетание клавиш Ctrl+J. Переименовываем слои снизу вверх, соответственно, в «Сердце 2», «Сердце 3» и «Сердце 4».

18

В панели слоев отключаем видимость двух верхних слоев с сердечками, нажав на «глазики» около слоев. Активируем слой «Сердце 2» и вызываем Свободное трансформирование (Ctrl+T или Редактирование-Свободное трансформирование). В верхней панели настроек инструмента Свободное трансформирование вводим значение, как на рисунке ниже, чтобы увеличить наше сердечко на 5%.

19

19

19

19

В панели слоев активируем слой «Сердце 3» и снова переходим в Свободное трансформирование (Ctrl+T). В верхней панели настроек инструмента Свободное трансформирование вводим настройки, как на картинке.

23

23

Активируем в панели слоев последний слой, «Сердце 4» и при помощи Свободного трансформирования увеличиваем его.

25

25

Теперь нам осталось анимировать наше сердечко.

Переходим в меню Окно-Шкала времени.

27

Далее кликаем по кнопке «Создать шкалу времени для видео».

28

В завершение нажимаем на иконку, отмеченную ниже.

29

Появится окно анимации.

30

Нажав на иконку, отмеченную ниже, создаем три новых кадра.

3131

В панели анимации (шкале времени) делаем активным первый кадр, а в панели слоев оставляем видимыми фоновый слой и слой «Сердце».

33

33

Переходим ко второму кадру и в панели слоев оставляем видимость фоновому слою и слою «Сердце 2».

35

35

Для третьего кадра делаем видимыми слой «Сердце 3» и фоновый слой в панели слоев.

37

37

При активном четвертом кадре на шкале времени в панели слоев оставляем видимость фоновому слою и слою «Сердце 4».

39

39

Выделяем все кадры при помощи клавиши Ctrl, щелкаем по времени и в открывшемся меню выбираем время проигрывания кадра, например, 0,1 секунды.

41

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

42

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

43

Переходим в Файл-Сохранить для Web. В зависимости от версии фотошоп название этого пункта варьируется.

44

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

45

Урок «Бьющееся сердце анимация» завершен. Анимация бьющегося сердца готова!

Отличного настроения и творческих успехов!

БЕСПЛАТНЫЕ РАССЫЛКИ УРОКОВ ВКОНТАКТЕ:

Photoshop от Елены Клейн

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

Начнем с открытия программы Photoshop и создания нового файла с такими параметрами:

При помощи инструмента Заливка (Paint Bucket Tool) заливаем изображение черным цветом. Где найти инструмент «Заливка»? Как он выглядит? Выглядит «Заливка» как банка, из которой льется краска. Но на кнопке этого инструмента еще живет и инструмент «Градиент», которым могли пользоваться недавно. Если вы не видите банку с краской, щелкните правой кнопкой по «Градиенту» и выберите «Заливку».

Чтобы залить черным цветом, необходимо, чтоб рабочий цвет был выбран черным. Помните, у нас есть два квадрата: передний — рабочий цвет, задний — фоновый, в самом низу панели инструментов? Так вот, если передний квадратик у вас не черный, нажмите клавишу на клавиатуре, и цвета квадратов станут по умолчанию: передний — черный, задний — белый. Или просто поменяйте цвет переднего квадрата, щелкнув по нему ЛКМ.

Если вы все сделали верно, перед вами картина Малевича «Черный квадрат».
Теперь создаем новый слой. Это можно сделать несколькими способами. Выберите один из возможных.

  1. Нажать комбинацию ++. Вот прямо три кнопки сразу.
  2. В главном меню выбрать Слой — Новый — Слой
  3. В нижней части панели слоев нажать на кнопку «Создать новый слой». Вот такую:

Теперь на панели слоев у вас два слоя: «Черный квадрат» и «Квадрат в клеточку», потому, что созданный нами только что слой — прозрачный. Работать мы будем на этом новом, прозрачном слое. Убедитесь, что в панели слоев выделен именно он.

Выбираем инструмент «Кисть». Только я прошу вас — просто кисть, а не «Архивную кисть, которая на два инструмента ниже. Можно нажать просто кнопку на клавиатуре.

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

А теперь настроим кисть следующим образом:

Внимание! Если у вас нет МЯГКОЙ кисти размером 200 — (мягкая — это с размытыми краями, жесткая — с четко очерченным контуром), то вы берете ЛЮБУЮ круглую кисть, и ставите ползунок «Главный диаметр» в значение 200, а ползунок «Жесткость» в значение 0%. Мы можем сделать любую кисть сами!

Тыкаем инструментом «Кисть» с указанными настройками в центр нашего «Черного квадрата» на рабочем поле. Получаем примерно такую картинку:

СОЗДАЕМ НОВЫЙ СЛОЙ. Как это сделать было написано чуть выше. И теперь в панели слоев у нас Слой 1, Слой 2, Слой 3.

Выбираем инструмент «Произвольная фигура» с вот такими настройками:

Не можете найти инструмент? Пусть эта картинка вам поможет.

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

Если у вас не получилось растянуть ровное сердечко с первого раза, сразу отмените последнее действие через «Историю». Или удалите верхний слой, тот, на котором рисовали сердечко, и создайте его заново, опять растянув контур — с большим успехом, я надеюсь. Если вы оставите мусор в виде мелких контуров на этом слое — красивое сердечко в конце работы будет сопровождаться появлением каких-то неопознанных мерцающих объектов. Оно вам надо?

Выбираем инструмент Кисть (Brush Tool), выбираем кисть с жесткими краями, размером 9 пикселей.
Устанавливаем рабочий цвет — белый.
Открываем окно настройки кисти. Для этого нажимаем кнопку и видим такое окно:

Поставьте все настройки, как на рисунке. О! Вы не видите ползунка «Интервалы? А вы щелкнули ЛКМ по словам «Форма отпечатка кисти»? Теперь все в порядке?

Закончили настройку? Нажмите кнопку еще раз — окно спрячется.

Переходим на панель «Контуры». Если вы не видите ее в правой части экрана, сходите в меню Окно — Контуры. Нам нужно выполнить команду «Обвести по контуру», для этого достаточно нажать на выделенную на рисунке кнопку.

После нажатия на эту кнопку наше сердечко выглядит так:

Теперь найдем панель Стили. Если ее нет — идем в Главное меню — Окно — Стили и видим примерно такую картинку:

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

Скорее всего, на вашем экране появится такое диалоговое окно, в котором я рекомендую нажать кнопку «Да».

Теперь ваше окно Стили выглядит примерно так, как на рисунке, и нам надо выбрать стиль «Crumble Metall» (Металлическая крошка), который выделен на рисунке красным квадратом.

Теперь ваше сердечко должно выглядеть примерно так:

Теперь все еще проще, чем было до этого.

  1. Создаем новый слой (ну правда же, вы знаете, как? Выше посмотрите, если что.)
  2. Главное меню — Редактирование — Трансформирование контура — Масштабирование

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

Получаем такой результат:

4. Теперь идем знакомой дорожкой: Контуры — Обводка контура — Стили — «Crumble Metall». И получаем два красивых сердечка. Если «Обводка контура» не хочет нажиматься, проверьте, применили ли вы трансформирование.

Переходим на панель «Слои» и повторяем пункты 1-4 еще раз. Имеем три сердечка разных размеров.

После всех этих действий у нас есть: Слой 1 и Слой 2 — фон, Слой 3 — самое большое сердце, Слой 4 — среднее, Слой 5 — самое маленькое.

В нижней части экрана у нас есть панель анимации. Если нет — Главное меню — Окно — Анимация.

Как мы учились на прошлом уроке , создаем еще 3 кадра анимации с помощью кнопки «Создание копий выделенных кадров»

На первом кадре оставляем видимыми фон и самое большое сердце (убрать видимость — отключить изображение глаза — рядом со слоями Слой 4 и Слой 5)

На втором кадре оставляем видимыми фон и среднее сердце (убрать видимость — отключить изображение глаза — рядом со слоями Слой 3 и Слой 5)

На третьем кадре оставляем видимыми фон и самое маленькое сердце (убрать видимость — отключить изображение глаза — рядом со слоями Слой 3 и Слой 4)

На четвертом кадре оставляем видимыми фон и среднее сердце (убрать видимость — отключить изображение глаза — рядом со слоями Слой 3 и Слой 5)

Теперь под каждым кадром ставим длительность 0,2 сек, запускаем просмотр, и, если нас все устраивает, ПРАВИЛЬНО сохраняем файл:

Главное меню — Файл — Сохранить для Web и устройств — Сохранить — в нужную папку.

Сверните Photoshop и проверьте, работает ли сохраненное вами сердечко. Если все хорошо — разворачиваем и закрываем программу.

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

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