Главная » Уроки » Уроки по фотошопу » Движение фона у картинки

Движение фона у картинки

	31-07-2013			Просмотров: 30260

31-07-2013

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

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

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

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

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

Откройте для себя мир военного антиквариата. Широкий выбор холодного антикварного оружия России, Европы, Японии...

Униформа, полевое снаряжение всех стран, участниц второй мировой войны. И все на сайте antic-war.ru

ШАГ 1.
Подыскиваем подходящие картинки. В данном случае это самолет и облака.
(Для урока можете взять эти же, что и у меня. По щелчку по картинке она откроется в новом окне в полном размере. Картинка самолета в формате png без фона.)

ШАГ 2. Переименовываем слой

Открываем картинку с облаками в фотошопе. Снимаем замочек, блокирующий слой. Для этого просто перетаскиваем иконку замочка со слоя в корзину (правый нижний угол окна слоев).

Переименовываем слой, даем имя Облака 1.

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

ШАГ 3.

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

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

Поэтому выполняем следующие действия:

Удлиняем картинку с облаками.
Даем команду Изображение - Размер холста (Image - Canvas Size...)
В открывшемся окошке изменяем сначала центр холста, выбираем левый центральный, чтобы холст увеличивался в одну сторону. А затем вводим длину холста в два раза больше исходной. Снизу на картинке видно, что исходная ширина (Width) 600px, а новая ширина 1200px.

Изменение размеров холста

Копируем слой с облаками.
Для этого выделяем слой и нажимаем комбинацию клавиш Ctrl+J или даем команду Слой - Дублировать слой (Layer - Duplicate Layer).
Два слоя с облаками

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

Для того, чтобы развернуть картинку, выделяем ее (клавиша Ctrl + щелчок мышкой по картинке на соответствующем слое), нажимаем комбинацию клавиш Ctrl+T, щелкаем по картинке правой кнопкой мыши и в открывшемся меню выбираем пункт Повернуть по горизонтали (Flip Horizontal)

Удлиняем картинку с облаками

Склеиваем оба слоя. Для этого проще всего выделить верхний слой и нажать комбинацию Ctrl+E, ну или выделить оба слоя и дать команду Слой - Слить слои (Layer - Merge Layers).
В итоге получаем вот такую длинную картинку с облаками:
Облака

ШАГ 4.Устанавливаем картинку по левому краю холста

Приступаем к созданию движения.

Возвращаем исходный размер холста у картинки облаков.

Даем команду Изображение - Размер холста (Image - Canvas Size...) и указываем исходную ширину в 600px.

Двигаем картинку так, чтобы совместить левый край холста и левый край картинки с облаками. Лучше пользоваться не инструментом Перемещение (Move Tool) , а клавишами управления курсором.

Открываем панель анимации. Окно - Анимация (Window - Animation).
Так как у нас один слой, то и на панели анимации мы увидим всего один кадр.
Добавляем еще один кадр к анимации. На этом кадре сдвигаем картинку с облаками влево, пока не совместим правый край холста и правый край картинки.
Внизу на иллюстрации стрелками показана кнопка создания кадров, новый кадр и правая граница холста и картинки.
Создаем новый кадр

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

Между первым и вторым кадрами вставиться еще 15, то есть второй кадр станет 17. Нам он не нужен больше (16 и 17 полностью совпадают), поэтому удаляем его.Выставляем время смены кадров в 0,1 сек и делаем повторение анимации постоянным (Forever). Удаляем последний кадр

В итоге получаем вот такую анимацию движущихся облаков.
Облака

ШАГ 5.

Осталось добавить рисунок самолета. Если у вас рисунок с фоном, то фон, конечно же нужно удалить. У меня самолет сразу в формате png с прозрачностью.Поэтому я просто открываю его в фотошопе, затем выделяю все 16 кадров на анимации с облаками (Shift) и вставляю самолет на новый слой.
Самолет на новом слое
Вот в принципе и все!
Сохраняем наше произведение следующим способом.
Даем команду:
Файл - Сохранить для WEB и устройств. В открывшемся окне ОБЯЗАТЕЛЬНО выбираем формат GIF и сохраняем с нужным именем.
Самолет, летящий в облаках

Комментариев: 0

Виктория

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

Цитировать

Комментариев: 0

Eyef

Как сделать такое же движение фона, без центрального изображения, чтобы при этом 2 анимированные картинки, стоящие впритык рядом выглядели как единая анимация? Чтобы анимация как бы перетекала из одной картинки в другую?

Цитировать

Комментариев: 22

galina2601

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

Цитировать

Комментариев: 0

Eyef

Есть такая картинка https://s15.postimg.org/v63t8dbh7/fssnhlm.png Это снежные холмы. Картинка горизонтально бесшовная. Т.е. если соединить левый или правый край с копией это же текстуры, то стыка нет. Если же взять по этому уроку сделать фон, т.е. картинку размером холста меньше целой картинки, первый кадр - левая половина, второй кадр - правая половина. И сделать промежуточные кадры, то последний кадр всегда не совпадает с первым. Примерно 1-2 кадров не хватает. В анимации получается резкий рывок после последнего кадра. Но проблема даже не в этом. Я теоретически путём перетягивания ещё левее могу создать ещё пару кадров вручную. Однако реальной бесшовности не выходит. Как бы вам объяснить то... Представьте 3 одинаковых gif-картинки, выстроенных в линию без стыка. Т.е. правый край первой картинки совпадет с левым краем второй, и тоже самое со второй и третьей картинкой. При этом должно возникать ощущение что эта полоса движется из крайней правой картинки в крайнюю левую. Как если бы человек шёл бы справа налево, переходя из самой правой картинки в центральную, потом в самую левую и не было заметно остановки и рывка. Не могу ещё понятнее объяснить...

Цитировать

Комментариев: 22

galina2601

По уроку получается как раз бесшовный фон. То есть левый и правый край фоновой картинки совпадают полностью.

Цитировать

Комментариев: 0

Eyef

Мне нужно чтобы копии одной и той же анимации, поставленные справа или слева от картинки выглядели как единое целое. Сама то картинка получается бесшовной. Но пытаюсь понять как её сделать бесшовной даже рядом с самой собой. Как то сделать так, чтобы если поставить пару копий картинки рядом, казалось что содержимое картинки перетекает из одной в другую. Как если бы что-то исчезало в левой половине картинки, а затем вылезало справа. Короче чтобы не было видно стыка между двумя копиями одной картинки, стоящими впритык. При том что одиночная картинка итак бесшовная справа и слева, но она больше, чем размер кадра. Или надо размер кадра как-то подгонять под размеры картинки... https://youtu.be/bZwLXE7WxdU - Вот пример того как выглядит 2 копии вашей картинки рядом, и какой у меня получается стык. Хотя одиночная картинка в анимации выглядит вполне непрерывной.

Цитировать

Комментариев: 22