Анимация сердце

Февраль… И скоро весна! И праздники продолжаются!.. В том числе День Святого Валентина, или Праздник всех влюбленных. И это ничего, что специфические свойства нашей широкой славянской души придают этому дню практически национальный масштаб: ученики поздравляют учителей, подчиненные — руководителей, коллеги — друг друга… Я предлагаю создать уникальный подарок к Дню Влюбленных всем, кому интересен творческий процесс.

Анимированная открытка: вращающееся сердце

Итак, нам нужен подходящий фон и непосредственно предмет вращения — сердце. Можно вставить готовый исходник, но можно  сделать сердце самостоятельно, пользуясь замечательным инструментом программы Adobe Photoshop Произвольная фигура (Custom Shape Tool).

Создаем новый документ в Фотошоп: Файл => Создать (File => New) или Ctrl+N. Размер документа может быть любым, на ваше усмотрение, но анимацию лучше не делать  тяжеловесной, а значит, размер должен быть небольшим. Я выбираю 300х300 пикселей.

Создаем новый файл для анимации

Затем выбираем инструмент Произвольная фигура (Custom Shape Tool) на Панели Инструментов или клавишей U. На панели параметров этого инструмента есть выпадающее меню Фигура (Shape), открыв которое, мы можем выбрать сердце.

инструмент произвольная фигура

Выбор цвета в ФотошопЦвет сердца можно выбрать заблаговременно, а можно изменить после создания фигуры. Я выберу цвет #e61d6d. Для этого кликните по значку Основной/Фоновый цвет окошко основной и фоновый цвет  и в открывшемся окне Палитра цветов выберите тот цвет, который придется вам по сердцу :) .Чтобы фигура была пропорциональной, зажмите Shift, а затем растягивайте мышью фигуру на созданном документе, начиная с левого верхнего угла:

анимированное сердцефигура в форме сердца на новом слое

При помощи инструмента Перемещение (Move) (клавиша V) расположите фигуру по центру документа. Заметим, что фигура создана на новом слое. Это будет наш первый кадр анимации, поэтому для удобства можно переименовать слой, дважды кликнув по названию мышью. Назовем его 1.

Раз нашему сердцу предстоит вращаться, следующий кадр должен выглядеть несколько повернутым. Для этого копируем слой 1, перетаскивая его на значок Новый слой (New Layer) значок создать новый слой, или нажав Ctrl+J, или кликом правой кнопкой мыши на слое вызвать контекстное меню => Дублировать слой (Duplicate Layer). Называем его 2. Клавишами Ctrl+T вызываем рамку трансформации и, удерживая Shift для сохранения пропорций и  Alt для того, чтобы не сместился центр трансформируемой фигуры, тянем боковой маркер габаритной рамки к центру, так, чтобы сердце на слое 2 стало примерно на треть уже, чем на слое 1.

кадр 2 анимации сердце

Копируем теперь наш слой 2, называем его 3, вызываем трансформирование Ctrl+T и, удерживая Shift  и  Alt, тянем боковой маркер габаритной рамки к центру, так, чтобы сердце на слое 3 стало еще на треть уже.

анимированное сердце в Фотошоп

Думаю, вы уже догадались, как все это будет выглядеть). Неплохо было бы придать объем нашей симпатичной фигурке, чтобы сердечко не выглядело плоским, словно бумажным. Сделаем это при помощи стилей слоя. Для наглядности встаньте на слой 1, а слои 2 и 3 сделайте невидимыми, нажав значок глаза слева от иконки слоя. Теперь нажмите значок fх Добавить стиль слоя (Layer Style) (или двойной клик по иконке слоя в палитре Слои). Я добавлю Тиснение (Bevel and Emboss), Обводку (Stroke), Внутреннее свечение (Inner Glow) и Тень (Drop Shadow) с такими настройками.

стиль слоя тиснение

стиль слоя обводка

стиль слоя внутреннее свечение

стиль слоя тень

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

Сердце для анимации со стилями слоя

Так мне гораздо больше нравится! Теперь скопируйте стили слоя, вызвав кликом правой кнопки мыши на слое контекстное меню и выбрав Скопировать стиль слоя (Copy Layer Style), а затем последовательно перейдя на слой 2 и 3, включите им видимость и вставьте стили: Вклеить стиль слоя (Paste Layer Style).

Анимация сердце три слоя

(Красота. По-моему, можно уже дарить.))))

Следующий кадр будет самый узкий, как бы сердце в профиль. Создадим выше всех новый слой, нажав значок Новый слой (New Layer) значок создать новый слой в палитре Слои, и с помощью инструмента Овальная область (Elliptical Marquee tool) на этом новом слое создадим выделение в виде узкого овала. Удерживание Alt позволит создавать овал из центра. Старайтесь, чтобы высота овала соответствовала высоте сердца.

Анимация сердца кадр 4

Заливкой (Paint Bucket Tool), клавиша G, заполняем овал тем же цветом, что и остальные кадры. Снимаем выделение Ctrl+D. Копируем со слоя 3 стиль слоя, вклеиваем в слой с овалом, называем его 4.

Я всем рекомендую  в процессе работы периодически сохранять свой файл (по умолчанию он будет сохранен в формате psd). Случаи бывают разные… и очень жаль будет, если придется начинать все заново!..

Что ж, основную работу мы проделали! Давайте же подберем подходящий фон. Можно просто перейти на самый нижний слой Фон (Background), активировать Заливку (Paint Bucket Tool), выбрать цвет, кликнув на окошке Основной/Фоновый цвет и залить этим цветом фон (как на картинке выше с синим фоном). А можно вставить в качестве фона другую картинку, текстуру. Я нашла образец узора как раз размером 300х300, мне даже не придется его трансформировать, открываю и вставляю в свой документ над Фоном и под всеми слоями с сердцем:

смена фона для анимации сердце

Возможно, в вашем случае нужно будет применить трансформирование нового фона, помним, что рамку трансформации вызываем клавишами Ctrl+T. Если не подходит цвет нового фона, его легко можно поменять, нажав Ctrl+U (при этом слой с новым фоном активен) и перемещая движок Цветовой Тон (Hue), Насыщенность (Saturation) и Яркость (Lightness). Варианты могут быть самые неожиданные):

цветовой тон для анимации сердце

цветовой тон для анимации сердце

цветовой тон для анимации сердце

Хочу привлечь ваше внимание к такому моменту: можно корректировать только один цвет на изображении, если выбрать его в выпадающем окошке над движками: посмотрите на скриншоты, в первых двух по умолчанию стоит значение Все (All), поэтому меняются все цвета фона. В третьем случае я выбрала Желтые, и коррекции подверглись только желтые тона моего нового фона, а красные сердечки остались прежними. (Этот прием также используется в уроке по отбеливанию зубов).

Как-то неправдоподобно выглядит наше сердце в профиль, т.е. слой 4. На мой взгляд, нижняя часть широковата, хотелось бы слегка ее сузить. Перехожу на слой 4, жму Ctrl+T, правой клавишей мыши кликаю внутри габаритной рамки и в контекстном меню выбираю Деформация (Warp). Наш овал теперь ограничен сеткой деформации, давайте приблизим друг к другу маркеры двух нижних рядов сетки, аккуратно делая более узкой нижнюю часть сердца. Подтверждаем, нажав на галочку, или двойной клик мышью.

Трансформирование сердца для анимации

Ура,  наконец-то мы приступаем к созданию анимации!..

Итак, у нас есть фон и слои 1,2,3,4. Все они на данный момент видимы. Отключаем видимость слоям 2,3,4, оставив видимым только 1. Фон будет виден всегда, его не трогаем. Слой с первоначальным фоном, белым, я удалила, чтобы не добавлял веса нашему документу.

Палитра Слои при создании анимации сердце

Окно => Анимация (или Шкала времени), при этом в нижней части экрана появится окно анимации.

Окно анимации

Выбираем Создать анимацию кадра. Видим, что миниатюра сердца Кадр 1 анимации сердцепоявилась на шкале в качестве кадра 1.   Нажмем кнопку Создать копию кадра  Копия кадра в окне анимации, теперь у нас два кадра, второй активен, т.е. выделен синим цветом. На втором кадре включаем видимость слою 2, отключаем слою 1. Будьте внимательны, каждый кадр должен содержать лишь один видимый слой, и одинаковых кадров быть не должно.

Снова жмем кнопку Создать копию кадра  Копия кадра. Теперь у нас три кадра, третий активен. На третьем кадре включаем видимость слою 3, отключаем слою 2.

Опять кнопка Создать копию кадра  Копия кадра. Теперь у нас четыре кадра, четвертый активен. На нем включаем видимость слою 4, отключаем слою 3.

Теперь будем идти назад. Создать копию кадра  Копия кадра. На пятом кадре включаем видимость слою 3, отключаем 4.

Создать копию кадра  Копия кадра. На шестом кадре включаем видимость слою 2, отключаем 3.

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

(Создать копию кадра  Копия кадра. На седьмом кадре включаем видимость слою 1, отключаем 2.) Я этого не делаю.

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

Осталось выбрать количество повторов в левой нижней части Окна анимации: Постоянно. И можно жать «Пуск»!!!

Вот как будет выглядеть наше изумительное сердце, если оставить кадры Без задержки (0 сек.):

Анимация вращающееся сердце

Это уменьшенное изображение, 180х180 (60%). Отрегулируйте время задержки, как вам больше нравится, и можно сохранять файл: Файл (File) => Сохранить для Web (Save for Web) (или комбинация клавиш  Alt+Shft+Ctrl+S),  формат файла GIF, количество цветов 256. Мой конечный файл с такими настройками весит 199 Кб. Если нужно уменьшить вес файла — сделайте 128 цветов, хотя будет уже не столь красиво, или уменьшите размер изображения, поставив вместо 100% восемьдесят или шестьдесят процентов.

А вот еще чудесное сердечко, выполненное с задержкой последнего кадра:

Анимированное сердце с бликами

И, конечно, самые важные слова:

анимированное сердце с надписью

О том, как добавить текст в анимацию, поговорим в другом уроке!

Желаю вам тепла, любви, прекрасного настроения и… не менее прекрасных подарков!..

Успешной работы!

data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus"

>

10 комментарий на «Анимация сердце»

    • Думаю, даже одно успокаивающее воздействие очень много значит.
      А еще творчество развивает человека, причем многогранно: развивается мозг, мышление, плюс эмоциональная составляющая становится богаче и разнообразнее. Развивается внутренний мир человека, и это непременно положительно влияет на его реальную жизнь, просто не всегда мы это замечаем.
      Не напрасно малышей учат рисовать, вырезать, лепить и пр. Дело не только в мелкой моторике. И с взрослением развитие человека не останавливается, это было бы очень печально! За границей широко распространены многочисленные курсы для взрослых: рисование, ландшафтный дизайн, керамика и многое другое.
      Так что это не пустая трата времени!

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

  1. Всегда хотела научиться делать анимацию. Спасибо за такой подробный урок! Беру на заметку, и как только будет время — займусь,

Добавить комментарий для Татьяна Отменить ответ

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

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>