​Как создать GIF-анимацию в Photoshop
GIF-анимация — простой и популярный формат, серьёзно повлиявший на развитие Интернета. Изображения в данном формате сжимаются без потери качества. GIF получил широкое распространение в Сети из-за малого объёма и большого потенциала. Пожалуй, сложно найти сайт, где совсем нет GIF-картинок. Аббревиатура GIF переводится как "формат для обмена изображениями", и это как нельзя лучше характеризует его, особенно в последние лет десять.
W440x0

Относительно недавно, с появлением имиджбордов и соцсетей, этот формат берётся на вооружение пользователями Интернета. Гифки превращаются в новый способ графического общения: с помощью анимированных картинок выражают свои мысли, высмеивают, ставят эффектную точку в дискуссии.

Научиться делать свои гифки несложно, и в этом нам поможет Photoshop. Можно, конечно, воспользоваться интернет-сервисами по созданию GIF-анимации, но оставим этот вариант другим. Во-первых, доступ в Интернет есть не всегда, во-вторых, сервис, как правило, оставляет свои "водяные знаки" на готовом изображении, в-третьих, навыки создания GIF-изображений относятся к разряду базовых и ими просто надо обладать.

Есть два варианта создания GIF-анимации: гифки из нескольких изображений и из видео. Создать нужное изображение из видео проще, чем из пары картинок. Графический редактор выполняет это действие автоматически, наше участие в процессе минимально. Начнём с создания гифки из видео.

GIF-анимация из видеофайла

Для создания гифки из видео нам нужен файл-источник и редактор Photoshop. Вы должны представлять, сколько по времени будет длиться цикл GIF-изображения, и заранее обрезать видео, чтобы соблюсти нужный хронометраж. Лучше всего, если видео будет в популярном формате: .avi, .mov, .mp4 и т.п. Далее открываем видеоролик в редакторе. Обратите внимание, чем больше размер видео, тем дольше Photoshop будет открывать и оптимизировать его. 

После открытия видеоролик будет разложен по шкале времени. Здесь с роликом можно немного "поиграться": обрезать, наложить переход, настроить цикличность. После нам нужно сохранить видео в GIF, но сделать это не через основную команду "Сохранить как", а с помощью "Сохранить для Web" (⌥⇧⌘S). Откроется окно с кучей настроек.

Выбираем формат, в котором будем сохранять. В нашем случае это GIF. Далее нас в первую очередь интересуют два параметра: "Набор" и "Цвета". Жонглируя ими, можно добиться желаемого — качественного изображения небольшого веса. 

С помощью набора мы выбираем, какой будет наша гифка. Photoshop предлагает нам сохранить изображение с применением дизеринга или нет, в формате 32, 64 или 128 цветов. Дизеринг — это подмешивание в первичный сигнал псевдослучайного шума со специально подобранным спектром. Функция дизеринга помогает улучшать качество картинки, смешивая цвета. По сравнению с оригиналом качество почти не теряется, однако GIF-изображение становится существенно легче. 

В формате GIF-изображения от 2 до 256 цветов. Если ваша картинка монохромная или не отличается цветовым разнообразием, имеет смысл уменьшить количество цветов. В таком случае гибка станет гораздо легче.

Поигравшись с настройками и добившись оптимального результата, сохраняйте GIF-изображение. Готово! 

GIF-изображение, 128 цветов, без дизеринга.

GIF-изображение, 128 цветов, дизеринг.

GIF-анимация из нескольких изображений

Чтобы сделать гифку из нескольких картинок, нужно приложить чуть больше усилий. Для начала решите для себя, что вы хотите получить. Баннер на сайт? Смешную картинку для друга? Качественное циклическое изображение на аватар без следов склейки? Хотя вне зависимости от задачи нам нужны две вещи: открытый графический редактор и несколько изображений (от двух до бесконечности).

Отметим, что некоторые гифки ценны тем, что на них незаметен момент склейки между фрагментами. Создаётся эффект бесконечного видео, на котором сложно увидеть следы монтажа. Кто видел оскароносный фильм "Бёрдмэн", тот меня поймёт. Сейчас мы попробуем проделать подобную работу (я не про "Бёрдмэн", друзья).

Для примера я решил воплотить в GIF заставку, которая появляется при загрузке Windows XP. Задача — составить из отдельных фрагментов цикличную гифку без следов склейки. Я прикинул, что на создание подобной работы уйдёт примерно 20 кусочков, которые будут менять друг друга в нашей анимации, создавая эффект бесконечного видео.

Сначала нужно подготовить изображения. Я сделал 17 копий скриншота загрузки Windows XP. Каждая отличалась друг от друга лишь положением синей полоски. Если их распечатать, положить в стопку и быстро пролистать, то полоска начнёт двигаться вправо. Примерно то же самое мы сейчас сделаем в Photoshop.

Подготовив картинки, лучше всего пронумеровать их для порядка. Для начала мы открываем изображение №1, оно будет основным. Далее переходим в раздел "Окно" и вызываем окошко "Шкала времени". Если мы добавим изображения в наш макет, то они выстроятся в ряд, расположившись на шкале. Чтобы добавить изображения, выбираем "Файл", затем "Поместить". Открываем папку с остальными картинками, которые мы подготовили, и добавляем их по очереди в наш документ, в компанию к изображению №1.   

Основная работа проделана, теперь нужно выбрать хронометраж для каждого изображения. Для этого нужно поместить курсор на край изображения на шкале времени, зажать его и двигать влево или вправо, в зависимости от того, хотите вы увеличить или уменьшить время отображения картинки в нашей гифке. Общее время воспроизведения моей гифки — около 1,23 сек., т.е. по 0,06 сек. на одно изображение. Перед сохранением обязательно проверяйте, что у вас получилось — запускайте GIF-анимацию и смотрите, всё ли в порядке, ровно ли склеены края, изображения выстроены по очереди или закралась ошибка. После проверки нажимаем "Сохранить для Web" (⌥⇧⌘S).

Перед тем как сделать гифку, пробежитесь по настройкам. Не забудьте о параметрах "Набор", "Цвета", о которых было упомянуто в первой части урока. Если вы делаете цикличное GIF-изображение, не забудьте о пункте "Параметры повторов". Здесь нужно выбрать режим "постоянная анимация". Сохраняем, смотрим, отправляем друзьям.

По-моему, получилось неплохо.

комментировать Комментарии 0

Будьте первыми, кто прокомментирует эту статью!

Ваш комментарий
Авторизуйтесь чтобы можно было оставлять комментарии.