Как просто сделать анимацию в фотошопе из картинок, видео урок

Обновлено:

Здравствуйте, друзья! В этой статье я хочу поделиться с вами готовыми и простыми способами, как создать gif анимацию при помощи всего нескольких кнопок в программе Adobe Photoshop. 

Я занимаюсь блогерством самостоятельно и поэтому я не плачу онлайн-фрилансерам за создание gif анимации, они не рисуют мне дизайны, баннеры и т. п. и мне приходится осваивать все принципы и основы работы в программе photoshop самостоятельно и то, как сделать анимированную картинку 2d в частности.

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

Я сейчас вам покажу три не сложных, но очень интересных примеров, по которым в дальнейшем вы сможете создавать различные анимационные гифки, главное — это понять от шага к шагу последовательность, создания гиф в фоторедакторе Adobe Photoshop и я уверена, что вы сможете выбрать самый подходящий для вас.

Adobe Photoshop — один из самых популярных профессиональных графических редакторов, который работает на компьютерах с операционной системой:

  • macOS
  • Windows
  • iOS (мобильная версия)
  • Windows Phone (мобильная версия)
  • Android (мобильная версия)

Photoshop — это совершенно современный, многофункциональный и абсолютно доступный  инструмент, который хорош в любой составляющей:

  • параметры форматов сохранения картинок
  • удобные разделы с внутренними отдельными группами встроенных инструментов
  • параметры эффектов 
  • добавление текста разных вариантов на фото 
  • большая коллекция фильтров

Всем этим сервис Adobe Photoshop позволяет пользователю решить ряд своих основных задач, которые необходимы для блогеров, держателей сайтов и для простых пользователей интернет, а это:

  • создавать анимированные видео в gif формате
  • создавать видео в 2d графике (двухмерные картинки)
  • создавать видео в 3d графике (трёхмерные картинки)
  • производить редактирование векторных рисунков
  • создавать рекламные баннеры 
  • создавать красивые баннеры для youtube, групп в соцсетях, презентаций и многое-многое другое.

На самом деле здесь ничего трудного нет и если иметь хоть какие-то базовые навыки работы с инструментами программы adobe photoshop, то можно научиться с лёгкостью создавать в разных стилях уже свои анимированные картинки с помощью этого сервиса.

Как сделать гиф анимацию в фотошопе 3 способами и что это

Гиф анимация из фото (animated gif) — это проще говоря изображение в движении или движущаяся картинка. Помните как в школе, берёшь тетрадку и в правом нижнем углу рисуешь мультяшку, также на следующей странице в углу, потом опять и так почти до конца тетради.

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

Так вот создание гиф анимации, можно сказать, чем-то схоже по самой структуре и замыслу, только мультипликационные элементы полностью создаются через современную высокотехнологичную программу Adobe Photoshop, а не рисуются обычной пастой ручки. А также бегающие тексты в картинке, наверняка вам и такие гифки встречались в интернете? Так это также работа в программе фотошоп, все мультипликационные движущиеся рисунки, создаются именно на ней.

Добавляя на любой свой онлайн-сервис или на один из ваших сайтов объект имитирующий какой-то тематический эффект из покадровых анимаций, тем самым вы позволяете создавать ещё один вытекающий дополнительный более важный эффект — это внимание и задержка вашей аудитории, за счёт задержки на объекте, а следовательно, вы повышаете поведенческий фактор своему контенту, а также трафик. 

Как сделать гифку из фото в фотошопе | Способ 1

В этой инструкции мы рассмотрим, как можно делать гифки 2d с иллюзией бегающего квадрата динамичными перелистываниями. Эта та самая gif, которая подвигла меня написать статью с подробной инструкцией, как создавать гиф в фотошопе. Поэтому этот gif на первом месте из трёх примеров.

1. Подготовьте заранее три квадрата разным цветом. Я для примера выберу ярко-жёлтый, второй тусклее, а третий ещё тусклее.

2. Нужно открыть программу Adobe Photoshop и добавить на чистый холст последовательные объекты в ряд, от яркого цвета к тусклому. И очень важно, для того, чтобы объект (в нашем случае это квадрат) не потерял своей формы, я нажму на кнопку расположенной на верхней панели инструментов, как показано на скриншоте ниже — «Сохранение пропорций».

Чтобы поместить элемент в программу фотошоп, просто мышью перетащите её на середину холста и отпустите клавишу.

3. Затем, среди иконок инструментов на панели справа, найдите кнопку «Кодирование» и с помощью неё обрежьте лишние края сверху и снизу.

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

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

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

Так как нам придётся картинки чередовать, то подписывайте каждую с названиями по номеру, например, эта будет под цифрой 1, так и назовите. Если вы сделаете это, то вам будет проще работать. 

Чтобы сделать экспорт изображения, выберите «Файл», «Экспортировать», «Сохранить для Web…» 

5. Далее будем работать по одному и тому же холсту, то есть вам сейчас нужно открыть ту же картинку (которую мы только что создали под названием «1») в программе фотошоп и добавить поверх неё два квадрата. Только нужно на первый квадрат поместить тот, что тусклее, на второй квадрат — первый, самый яркий, а третий оставить без изменений.

Проще говоря, вторая наша картинка будет отличаться от первой месторасположением первого и второго объектов (просто меняются места).

Затем также обрежьте и сохраните эту картинку, как и первую, только дайте название «2».

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

Обрежьте лентой и сохраните, дав название картинки «3».

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

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

Обрежьте картинку и сохраните её с названием «4».

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

После того как вы подготовите свои картинки по нужным параметрам в отдельной папке с наименованиями 1, 2, 3, 4, для создания дальнейших кадров для gif-анимации, вам нужно будет открыть новый холст в программе фотошоп с размерами 1920/1080 и приступить к следующим шагам (или очистить тот, на котором вы создавали под кадровые элементы, тогда не придётся тратить время на обрезку, только вставляй и выравнивай, ведь размеры холста всё равно совпадают с размером картинки).

1. Добавьте в центр холста в программе Photoshop первую картинку. Обрежьте лишнее, ровно по её краям, следом поместите по очереди, вторую, третью и четвёртую одна на другую.

2. Теперь я вам покажу, как собственно анимировать картинку в этой программе. На верхней панели управления программы фотошоп нажмите на вкладку «Окно» и откройте «Шкалу времени», а потом нажмите на кнопку посередине открывшееся шкалы «Создать анимацию кадра».

3. Далее в правом верхнем углу шкалы времени кликните на значок меню (полосочки одна над другой) и выберите «Создать кадры из слоёв». После этих действий все покадровые картинки появятся на шкале, а это четыре картинки и пятая — белый холст. Нам он уже не нужен, поэтому выберите его, просто кликнув по нему кнопкой мыши и нажмите на корзину.

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

Далее настройте повторы кадров, чтобы они перелистывались по кругу, для этого кликните в интерфейсе на кнопку «Постоянно». Всё, теперь вы можете уже воспроизвести свою гифку для её просмотра, нажав на плей, тут же рядом.

Основные настройки сохранения gif в самом фотошопе

Для того чтобы сохранить гиф в фотошопе, а точнее, скачать файл в gif формате, начните сохранять, как обычную картинку — это «Файл», «Экспортировать», «Сохранить как Web…», а дальше внимательнее! Выберите формат gif, как на скриншоте, убедитесь, что параметры повторов выбраны как «Постоянно», можете также нажать на кнопку плей, чтобы проверить, что гифка работает как положено, а только потом можете нажать «Сохранить».

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

Поделюсь ещё одним из примеров гифки — бегающего квадрата

Как делать анимацию в фотошопе | Способ 2

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

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

Сохраните в отдельную папку и назовите «1». То же самое проделайте с остальными персонажами, просто добавляйте следующего, сохраняйте, давайте название «2», также с третьим, четвёртым и т.д.

2. Затем откройте чистый холст в программе фотошоп и добавьте первую картинку, обрежьте сразу с помощью кодирования лишнее сверху и снизу. Потом загрузите остальные объекты по порядку (подравнивая по центру, чтобы было всё ровненькое, если понадобится).

2. Далее в интерфейсе кликайте на «Окно», затем «Шкала времени», а потом нажмите на строку «Создать анимацию кадра», которая находится посередине открытой шкалы времени.

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

4. Выберите в параметрах повторов «Постоянно», а затем настройте промежуточное время на 0,5 секунды. Запустите воспроизведение gif анимации, нажав на кнопку плей в ряду кнопок, для того чтобы убедиться, что всё получилось идеально.

5. Для сохранения gif-анимации кликните на вкладку «Файл», «Экспортировать как Web…», настройте gif формат для файла, потом «Сохранить».  

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

Как сделать gif в фотошопе | Способ 3

В этой инструкции я вам покажу, как самому рисовать анимации в программе Adobe Photoshop, этот шаблон, конечно, будет немного сложнее, чем первые два.

Нужно нарисовать любые кадровые картинки самому, да-да! Нужно научиться пользоваться инструментами и эффектами для рисования, включить своё воображение, фантазию и начать создавать невероятно крутые gif-анимации, а с опытом даже мультфильмы!

Я немного освоила, так сказать, первые азы рисования в photoshop и знаю как можно сделать gif анимацию в фотошопе очень быстро и легко, поэтому продемонстрирую какой-нибудь самый простой пример. Ну так что, начнём?

1. Нарисуйте на чистом холсте любой рисунок, воспользовавшись инструментами таких как краски и кисти, например. Сохраните изображение на рабочем столе. Потом откройте рядом ещё один чистый холст с размерами 1920/1080, расположите свою картинку посередине и уменьшите размеры.Обрежьте ненужные края сверху и снизу, а по бокам не отрезайте, чтобы получилась опять же длинная лента.

Таким способом необходимо нарисовать несколько картинок, листая которые получится сюжет. Сохраните каждую в отдельную папку и дайте название картинкам согласно порядку расположения в гиф-анимации: если первая, то «1», если вторая, то «2» и т.д.

Вот так примерно должны выглядеть готовые ленты с вашими нарисованными изображениями сохранённые отдельно в папке.

2. Теперь нужно из всего этого создать быстренько гифку в фотошопе. Откройте чистый белый холст размера 1920 на 1080. Поместите первую картинку по центру и обрежьте края сверху и снизу. Дальше добавляете поочерёдно все остальные картинки (при необходимости поправляйте их, чтобы они все были по центру, одинакового параметра и край к краю).

3. Кликните на верхней панели инструментов программы Adobe Photoshop на вкладку «Окно», потом «Шкала времени». Далее нажмите на строку «Создать анимацию кадра» находящуюся посередине шкалы.

4. Нажмите на значок меню в правом верхнем углу шкалы времени и выберите нужный из разделов «Создать кадры из слоёв», далее нажмите на первый кадр — это белый холст, а затем на урну, чтобы его удалить, так как он нам не нужен для создания gif-анимации.

5. Установите время между перелистыванием кадров из слоёв со скоростью 0 секунд. Потом настройте параметры повторов выбрав «Постоянно», это находится внизу, слева, в основных кнопках, рядом с проигрывателем.

6. Создание гифки подошло к концу, посмотрите какая получилась красота! Пришло время её экспортировать в gif-формате. Нажмите кнопки «Файл», «Экспортировать», потом «Сохранить для Web…», переключите формат на gif, далее нажмите «Сохранить».

Чек лист, как создать гифку из фото в фотошопе 

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

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

Подготовьте изображения, перед тем как создать гиф

  1. Откройте чистый лист 1920 на 1080 в программе фотошоп, затем поместите посередине изображение и обрежьте его сверху и снизу. Если у вас такая же ситуация как у меня, что ваш провайдер поддерживает разные форматы гифок, но каждое их расположение выглядит с разным качеством, то ориентируйтесь уже на свои цели, а я лишь предлагаю шаблон.
  2. Сделайте первую картинку, сохраните её в отдельную папку с названием «1». Дальше проделайте те же действия с остальными изображениями, давая названия каждой последовательное и нумерованное, чтобы дальше не путаться.

Как создать анимацию в фотошопе, сам процесс

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

  1. Откройте холст 1920 на 1080 в программе Adobe Photoshop и вставьте по центру него все картинки поочерёдно начиная с первой. Рекомендую обрезать лишние края сразу после того, как разместите первую, а остальные просто добавляйте и подравнивайте по краям.
  2. В интерфейсе на верхней панели инструментов во вкладке «Окно» кликните на «Создать анимацию кадров».
  3. Через меню на шкале времени, расположенной в правом верхнем углу (несколько полосок одна над другой) — нужно нажать на кнопку «Создать кадры из слоёв».
  4. Удалите белый холст на шкале времени из кадров.
  5. Также вам нужно определиться со скоростью показа слайдов и установить время.
  6. Настройте параметры перелистывания, кликнув “Постоянно”.
  7. Там же просмотрите готовое результаты gif через плей.
  8. Сделайте экспорт нажав на вкладку “Файл”, “Экспортировать”, “Сохранить как Web…”, далее настройте формат gif и нажмите “Сохранить”.

Завершение

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

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

А gif-анимации, сделанные с картинок, скачанных в интернете, так там вообще пруд пруди фантазий, можно создать изображение с добавлением не одного элемента, в сети можно найти и скачать реально всё что нужно как мультяшного героя, так и всякие дополняющие объекты, фигурки и т.п.

Главное, нумеруйте подготовленные картинки в названиях, чтобы не запутаться и сохраняйте их для дальнейшей работы в отдельной папке и не забывайте при сохранении устанавливать формат gif.

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

Здесь в одной онлайн-школе, которая себя хорошо зарекомендовала, в отличие от множества непонятных школ, есть отличный курс, в котором можно обучиться навыкам фотошоп с нуля, могу вам его посоветовать, знаю, многие его выбирают, поэтому и сама обязательно буду обучаться на нём. Перейти на содержание данного курса вы можете нажав здесь>>, а на оформление обучения здесь>>.

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

Нет комментариев

Оставить комментарий

Отправить комментарий Отменить

Сообщение