You are here
Новогодняя елка Анимация Компьютерная графика и дизайн Уроки Уроки фотошопа 

Анимация в фотошопе: зажигаем новогоднюю елку

Анимация в фотошопе

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

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

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

Приступаем к работе

Подготовка изображения для анимации

Открываем фотографию — «Ctrl+O», выбираем на компьютере картинку и жмем «Открыть».

Анимация в фотошопе

Заходим в палитру слоев «Layers», нажав клавишу F7.

В палитре первоначально находится только один слой с нашей картинкой.

Создаем новый слой — нажимаем горячие клавиши Crtl+Shift+N, либо щелкаем по значку нового слоя в палитре слоев.

Анимация в фотошопе

На палитре инструментов слева находим инструмент кисть — Brush Tool(B).

Анимация в фотошопе

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

Анимация в фотошопе

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

Анимация в фотошопе

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

Новогодняя елка

Когда расставите все огоньки, создайте дубликат слоя нажав Ctrl+J (чтобы сделать огни еще ярче), затем объедините слои — выделите верхний слой и нажмите Ctrl+E (позволяет слить слой с нижним). Сразу переименуйте слой, дважды щелкнув по названию слоя в палитре слоев. Давайте всем слоям осмысленные названия, чтобы в дальнейшем упростить работу с ними. Я назвала свой слой «Розовые огоньки».

Новогодняя елка

Создаем новый слой -Crtl+Shift+N, либо щелкаем по значку нового слоя в палитре слоев.

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

Рисуем опять огоньки уже в других местах. Называем слой «Голубые огоньки».

Теперь наша новогодняя елка горит огнями двух цветов.

Новогодняя елка

Создадим еще один слой.

Уменьшаем немного диаметр кисти, выбираем белый цвет.

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

Новогодняя елка

 Объединяем слои с розовыми и голубыми огоньками(выделяем слой c голубыми огнями в палитре, жмем Ctrl+E).

Теперь в палитре у нас три слоя: 1.фон, 2.слой с двумя видами огней и 3.слой с белыми серединками.

Анимация в фотошопе

 Выделяем слой с розовыми и голубыми огоньками, он находится в середине. Жмем Сtrl+J, чтобы создать дубликат слоя.

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

Анимация в фотошопе

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

Нажимаем Ctrl+U, чтобы вызвать окно корректировки цветового тона и насыщенности «Hue/Saturation.

Передвигайте ползунок в строке Hue(Цветовой тон) для изменения цвета, остановитесь когда будете удовлетворены результатом. Можете также повысить насыщенность (Saturation), чтобы увеличить глубину цвета.

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

Анимация в фотошопе

Скопируем слой с цветными огнями еще раз Ctrl+J. Отключим видимость предыдущего слоя, щелкнув по глазику.

Анимация в фотошопе

Выделяем третий слой с огоньками опять меняем цвет Ctrl+U, двигаем ползунок Hue (Цветовой тон), жмем Ок.

Теперь у нас три разных есть слоя с цветными огоньками.

Делаем анимацию

Переходим к созданию анимации в фотошопе.

Заходим в меню «Window» —  «Timeline» (Окно — Шкала времени).

Анимация в фотошопе

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

Текущие кадры на шкале времени содержат все видимые слои.

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

Анимация в фотошопе

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

Создаем второй кадр — щелкаем по второй справа иконке внизу временной шкалы.

Анимация в фотошопе

На втором кадре у нас пока находятся такие же слои как и на первом.

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

Анимация в фотошопе

Создаем третий, последний кадр.

Отключаем в палитре слоев второй слой, включаем первый.

Анимация в фотошопе

 Все, ключевые кадры у нас готовы.

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

Выделяем первый кадр на временной шкале. Щелкаем по иконке с кружками.

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

Анимация в фотошопе

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

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

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

Анимация в фотошопе

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

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

Анимация в фотошопе

Чтобы сохранить анимацию, созданную в фотошопе, заходим в меню «File» — «Save For Web & Devices» («Файл» — «Сохранить для Web»).

Анимация в фотошопе

Выбираем формат файла для сохранения «GIF» жмем «Сохранить…», выбираем место, куда будем сохранять,нажимаем  «Сохранить».

Анимация в фотошопе

Готово!

Вот что получилось у меня:

Анимация в фотошопе

В этом уроке мы посмотрели как создается анимация новогодней елки в фотошопе. Надеюсь, урок пришелся вам по душе!

Related posts

6 thoughts on “Анимация в фотошопе: зажигаем новогоднюю елку

  1. Георг

    Болеее чем хорошо жду продолжений- от души!

  2. Александр Николаевич

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

  3. Виктория

    Здравствуйте, Александр Николаевич!
    Да, конечно, главное понять принцип работы, а дальше уже можете использовать описанные приемы и их комбинации для решения самых разнообразных задач:)

  4. Ульяна

    Как мне это пригодилось!

  5. Аноним

    Спасибо за интересный урок!Все получилось с первого раза)

  6. Нина

    Спасибо, Виктория!
    Всё очень доступно!
    Вас с наступающим Новым Годом и такой же красивой ёлки!

Leave a Comment

103 запросов. 0,496 секунд. 24.0033645629882 Мб