Название Совмещение фона и анимированного гифа
Автор Iliti
В этом уроке будем учиться размещать гиф-анимацию поверх любого фона.
В качестве фона вы можете взять все, что угодно: картинку, фото, рисунок и. т.д. Делать будем в Adobe Photoshop CS5 Extended, но и в других версиях CS, я думаю, все точно так же. Проверено на CS2.
Работать будем сразу с тремя гифами, чтобы стал понятен принцип наложения на фон любого их количества.
ВАЖНО! Чтобы все они работали одновременно, количество кадров в них должно быть одинаковым! Т.е. Вам нужно предварительно их подготовить, удалив лишние кадры из более длинных.
Представьте, у вас есть три гифа – 10 кадров, 20 кадров, 30 кадров.
Начав работать одновременно, 10-кадровый заканчивается и исчезает, потом заканчивается 20-кадровый и тоже пропадает, а самый длинный продолжает работать. Потом все начинается начала. Такой эффект мелькания, в принципе, тоже можно оставить, если он вас устраивает, но мы сейчас рассмотрим вариант одновременной работы всех трех.
Подровнять такие разные по количеству кадров гифы тоже не проблема. Нужно просто склеить последовательно два гифа, например, по 10 кадров и у вас получится 20- кадровый гиф. Как это будет в итоге выглядеть? За один проход 20 кадрового гифа, 10-кадровый пройдет два раза. Варианты склейки рассмотрим в другой раз.
Итак, у вас есть фон и 3 гифа. Размер гифов, т.е ширина и высота, не имеют значения. Важно лишь одинаковое количество кадров. В обязательном порядке на столе должны так же быть панель Анимации и панель Слоев.
1. Активируем Первый гиф, просто нажимаем на него и он откроется у вас в панели Анимации и панели Слоев.
- Жмем уже знакомую нам стрелку в правом верхнем углу панели Анимации и выбираем Выделить все кадры… Все они станут синего цвета.
- Снова жмем нашу стрелку и выбираем Скопировать кадры.
- Активируем наш фон (жмем на него)
В панели Анимации, в том же правом углу по нашей стрелке выбираем Вставить кадры…
Появится вот такое окно, в котором нужно указать, как именно вы хотите вклеить кадры.
Выбираем Вклеить поверх выделенной области Внизу обязательно поставьте галку в окошке Связать добавленные слои.
Лучше, при вклейке гифов, чтобы она всегда там была. Это не дает гифу распадаться на отдельные кадры.
Жмем ОК.
Получаем вот что.
По умолчанию гиф вклеивается в левый верхний угол фона. Обратите внимание на панель слоев. Все слои гифа оказались поверх слоя фона.
2. Теперь, чтобы наш фон был виден во всех кадрах, его нужно синхронизировать. Для этого нажимаем значок Глаза с замком в верхней части панели Слоев.
Наш фон появился во всех кадрах.
3. Теперь нам нужно переместить наш гиф по фону.
Стоя на Первом кадре и Первом слое нашего Гифа (гифа, а не фона), инструментом Перемещение тащим его в нужное место.
Справа в Панели слоев вы видите на слоях гифа изображение цепочки. Это значит, что все слои связаны между собой и перемещаться будут все вместе, как один. Вот для чего собственно необходимо связывание слоев.
Если на этом вы решили остановиться, то уже можете … Файл -Сохранить для Web и устройств и любоваться проделанной работой. Если же решили вклеивать больше одного гифа, тогда продолжаем…
4. Активируем Второй гиф Повторяем те же действия, что и с Первым (пункт 1) Выделить все кадры-Скопировать кадры. Активируем Фон с наклеенным на него Первым Гифом.
Жмем знакомую стрелку в правом верхнем углу панели Анимации и выбираем сначала
-Выделить все кадры (все они станут синего цвета)
Затем
-Вставить кадры… -В окошке Методов вклеивания опять выбираем Вклеить поверх выделенной области. (Проверьте, есть ли галка в окошке Связать добавленные слои)
Будет вот так…
Наш Второй гиф оказался в левом верхнем углу, а его слои поверх слоев Первого гифа (смотрим в панели Слоев)
Активируем ЕГО Первый Слой и стрелкой Перемещение устанавливаем в нужное место.
При этом у вас должен быть выделен либо Первый кадр, либо все кадры, но никак не 2, 10 или любой другой.
5. Активируем Третий Гиф и в точности повторяем все те же действия, что и со Вторым.
Взгляните на Панель Слоев. Она напоминает большой слоеный пирог, где три гифа расположены друг над другом и в то же время, поверх Фона. Все то же самое, что и при создании неподвижной картинки в ФШ, только слоев гораздо больше.
Проверяем, все ли наши кадры имеют одинаковое время воспроизведения (если не задумывалось иначе)
Проверяем Цикл Воспроизведения в левом нижнем углу панели Анимация. Должно стоять Постоянно Получаем вот это..
Всё. Можно запустить стрелкой на панели анимации и просмотреть, что у вас получилось. Лучше конечно запускать и проверять после каждого наклеенного гифа. Только не забывайте потом обязательно возвращаться на Первый кадр.
Теперь Сохраняем для Веб и устройств, как описано в Первом уроке и любуемся.
В следующем уроке будем поворачивать и искажать гифы.
Ниже вы можете задать вопросы, показать результат, изложить свой вариант создания.
Отредактировано:Iliti12.03.2014 02:23:31
Когда я умру, то попаду на небеса, потому что провожу свое время в аду
Катенька пишет:
Ошибку поняла. smile:facepalm: Вот такой абы какой гиф получился.
Молодец, Катюш! Здесь главное внимательно соблюсти последовательность действий.
Техника очень простая, но требует точности, иначе все будет прыгать и скакать Отлично все получилось Техника - 5 баллов Единственное, что, желательно уменьшить работу целиком Ну не предполагают гифы обойных размеров. Тяжеловаты получаются
Когда я умру, то попаду на небеса, потому что провожу свое время в аду
Iliti пишет:
Отлично все получилосьТехника - 5 баллов
Да вас с Юлей мне еще ого-го!)))
Цитата
Iliti пишет:
Единственное, что, желательно уменьшить работу целиком Ну не предполагают гифы обойных размеров. Тяжеловаты получаются
Да, это я и сама во время создания поняла. Когда пыталась сохранить, еще более ранний вариант, ругался ФШ, что недостаточно места, слишком большой размер и что-то в этом роде.
ВАЖНО! Чтобы все они работали одновременно, количество кадров в них должно быть одинаковым! Т.е. Вам нужно предварительно их подготовить, удалив лишние кадры из более длинных.
Ну не предполагают гифы обойных размеров. Тяжеловаты получаются 
Да вас с Юлей мне еще ого-го!)))
Все знать невозможно. Но чем сможем, поможем