В 20-м упражнении электронного практикума курса «Юный дизайнер» ребята создают свою гиф-анимацию. А после этого урока у детворы появляется масса дополнительных вопросов о том, как изменять готовую чужую «гифку». Сегодня мы разберём самые популярные задачки маленьких почемучек:
- как уменьшить или увеличить размер картинки-анимации (высота; ширина);
- как добавить в анимацию новый фон или подпись;
- как перемещать движущийся объект на всех кадрах анимации;
- как уменьшить «вес» файла с анимацией.
Открытие файла с анимацией
Для создания или редактирования анимированных файлов формата GIF используется множество программ. В курсе «Юный дизайнер» анимированный рисунок создаётся с помощью программы Image Ready из пакета Adobe.
Обращаю ваше внимание, что в пакете программ Adobe программа Image Ready есть только до версии Adobe Photoshop CS2 (включительно). В последующих версиях Image Ready вливается в программу Adobe Photoshop, где функции Image Ready выполняет палитра Animation (Анимация). Чтобы её отобразить на рабочем столе программы, необходимо выполнить команду меню Window → Animation (Окно → Анимация).
Создать анимацию в Adobe Photoshop CS3 ещё можно, а вот при редактировании уже созданной картинки с анимацией возникают некоторые сложности, например, при открытии готовой GIF-анимации программа заменяет прозрачный фон белым.
Для удобства и меньшей загрузки компьютера, так как Adobe Photoshop CS3 значительно менее требователен к ресурсам, а при этом содержит весь инструментарий, необходимый для изучения курса, я рекомендую пользоваться программой Adobe Photoshop CS2 вкупе с ImageReady.
На примере этой программы мы и рассмотрим поставленные задачи (тем не менее, некоторые необходимые рекомендации для последующих версий будут вноситься отдельным блоком).
Прежде всего, запомните: чтобы в готовой GIF-анимации сохранилась разбивка по слоям и кадрам, открывать файл нужно только с помощью программы Image Ready CS2.
И на вопрос ребят: «Почему у меня открылся только один слой или кадр?», можно смело отвечать: «Потому что вы открыли файл в Adobe Photoshop!». (Это самая типичная ошибка.)
[показать] Adobe Photoshop CS3 и последующие версии
Уменьшение/увеличение области рисунка
Если необходимо увеличить размер кадра, поможет знакомая ещё из программы Adobe Photoshop команда меню Image → Canvas Size (Изображение → Изменение размера холста):
| Оригинальная анимация | Увеличенный размер холста |
|
[показать] |
[показать] |
Чаще всего требуется уменьшить большую готовую картинку для аватара на сайте. На всех сайтах есть свои требования по высоте и ширине аватара, а когда известны требуемые конечные размеры рисунка, можно воспользоваться не менее известной командой менюImage → Image Size (Изображение → Изменение размера изображения).
При уменьшении рисунка советую выставлять Quality (Качество) в значение Bicubic Sharper (Бикубическая резкость), тогда картинка получится более чёткой:
| Оригинальная анимация | Уменьшенный вариант |
|
[показать] |
[показать] |
Объединение слоёв в группу
Часто в анимации нужно не только уменьшить размер, но и выполнить трансформацию, изменить положение объекта на рисунке, и прочие изменения, которые касаются не одного кадра, а всей анимации. В таком случае советую воспользоваться группировкой слоёв (Set), которая значительно облегчит вам эту работу.
- Для создания новой группы в палитре Layers (Слои) сначала выделите верхний слой, а потом щёлкните по кнопке Create a new set (Создать новую группу):
- Созданную группу Set 1 можно переименовывать так же, как и слои:
- Пока ещё наша группа не функциональна. Выделите первый кадр в палитре Animation (Анимация) и все слои на палитре Layers(Слои):
- Напомню: чтобы выделить все слои, нужно сначала выделить первый слой, а затем, удерживая нажатой клавишу Shift, щёлкнуть по последнему слою.
- Затем в палитре Layers перетащите все слои на название группы так, чтобы название выделилось:
- Отпустив мышку, вы увидите, что изображение осталось только в одном кадре, остальные кадры стали пустые:
- Чтобы это исправить, отключите и снова включите видимость у созданной группы — кадры восстановятся:
- Для удобства слои в группе можно свернуть:
Теперь для выделения всех слоёв достаточно просто щёлкнуть по названию группы.
Трансформация или перемещение объекта анимации сразу на всех кадрах
Для использования команд Transform (Трансформация) достаточно, чтобы группа была выделена, в таком случае все производимые изменения будут происходить на всех кадрах и слоях сразу:
Иногда необходимо передвинуть весь рисунок в кадре, для этого можно воспользоваться инструментом [показать] Move (Перемещение). И тут есть небольшая хитрость: если выделен первый кадр, то при перемещении мы двигаем весь рисунок целиком в каждом кадре, а если выделен любой другой кадр, то перемещение будет в этом конкретном кадре:
Добавление нового фона или подписи
Вставить другой фон в анимацию достаточно просто, особенно если вы используете группу. Для этого следует открыть нужный нам рисунок-фон и просто перетащить его на нашу анимацию.
Возьмём для примера уже знакомого львёнка, поместим его на цветной фон.
-
С помощью инструмента [показать] Move (Перемещение) перетащите новый фон в файл со львёнком:
- Затем перетащите наш фон-слой так, чтобы он был самым нижним слоем, тогда он не будет перекрывать другие слои:
- Ну и, конечно, выделите все кадры, отключите и снова включите для фона видимость:
В итоге мы получаем львёнка на другом фоне. Таким же образом можно добавить подпись либо воспользоваться инструментом Type(Текст).
Сохранение и оптимизация файла с анимацией
Осталось сохранить изменённую анимированную картинку.
В программе Adobe Photoshop CS3 сохранить и оптимизировать анимацию очень просто, нужно воспользоваться старой доброй командой меню File → Save for Web & Devices... (Файл → Сохранить для веб и устройств...) и в диалоговом окне выбрать 4-Up. Теперь можно, подбирая разные параметры, сразу посмотреть общий вес картинки и то, как она будет выглядеть:
Чтобы в программе Image Ready сравнить несколько изображений, полученных с разными параметрами оптимизации, можно открыть вкладку 2-Up или 4-Up. После этого для каждого из изображений можно выставлять свои параметры и сравнивать результат:
Настройки для оптимизации файла выполняются в палитре Optimized (Оптимизация).
Выбрав необходимый результат, выбираем команду меню File → Save Optimized as... (Файл → Сохранить оптимизацию как…) и сохраняем свою работу в GIF-формат. Например:
| Итоговое изображение | Размер |
|
[показать] |
188 Кб. |
|
[показать] |
319 Кб. |
Сегодня вы выполняете последнее домашнее задание этого мастер-класса.