Здравствуйте дорогие друзья! В этой статье я хочу поделиться с вами очень быстрым и простым способом создания gif анимаций c помощью программы Adobe Photoshop.
Так как я занимаюсь блогерской деятельностью самостоятельно и не заказываю у фрилансеров готовые картинки, gif и т.п, то мне приходится все осваивать самой, а в этом случае программу photoshop.
И вот совсем недавно при написании своей очередной статьи, мне нужно было создать какую - нибудь картинку формата gif с внутренними элементами формы квадратов, такая у меня была творческая задумка.
И я все таки сделала для этой статьи именно задуманную, классную гифку и тогда я подумала, что было бы не плохо поделиться этим простым шаблоном с читателями, для понимания как создавать гиф через фотошоп, это ведь так легко и прикольно!
Я сейчас вам покажу примеры, по которым в дальнейшем вы сможете создавать классные анимационные гифки, главное - это понять от шага к шагу, что и для чего я проделываю в своем уроке.
На самом деле здесь ничего трудного нет, если знать базовые навыки создания анимационных gif с помощью adobe photoshop, можно реально создавать уникальные, яркие штуковины.
Что такое gif анимация
Гиф анимация (Gif animation) - это проще говоря изображение в движении или движущаяся картинка. Помните как в школе, берешь тетрадку и в правом нижнем углу рисуешь мультяшку, также на следующей странице в углу, потом опять и так почти до конца тетради.
Нужно было нарисовать много картинок, с движением рук или ног героя, или что-то нужно было дорисовать, как дополнительный элемент, чтобы в итоге, листая на большой скорости вырисовывался интересный сюжет. Помните?
Такой же смысл и в процессе создания gif-анимации через программу photoshop. Созданные в фотошопе изображения перелистываются по порядку на большой скорости, создавая тем самым видимость сюжета.
Как сделать гифку в фотошопе | Шаблон 1
В этой инструкции мы рассмотрим гифку, которая создает иллюзию бегающего квадрата. Эта та самая гифка, которая подвигла меня написать статью с подробной инструкцией, как создавать gif через фотошоп. Поэтому этот gif на первом месте из трех примеров.
1. Подготовьте заранее три квадрата одного тона. Я для примера выберу ярко желтый, второй тусклее, а третий еще тусклее.
Добавьте объекты на чистый холст в программе Adobe Photoshop в ряд, от яркого цвета к тусклому. И очень важно, для того, чтобы объект (в нашем случае это квадрат) не потерял своих пропорций, обязательно нажмите кнопку на верхней панели инструментов, как показано на скриншоте ниже.
Кнопка сохранения пропорций.
3. Затем, среди иконок инструментов на панели справа, найдите кнопку “Кодирование” и с помощью нее обрежьте лишние края сверху и снизу.
Сразу поясню почему я при создании gif обрезаю лишние края только поверх нее и снизу, а по бокам не трогаю. Мой сайт работает за счет движка Смарт Блог и в нем запрогамированно расположение гифок с разных ракурсов. Вот обратите внимание на скриншот по левой стороне, там я края по бокам обрезала, а справа нет.
Очевидно, что справа гифка с оставленными краями выглядит намного аккуратней и красивее, нежели слева с обрезанными. Вы можете их обрезать если это необходимо, смотря для каких целей вы создаете gif.
4. Теперь нужно сохранить эту картинку в каком-то месте так, чтобы вы ее долго не искали для дальнейшего использования. Обязательно дайте ей название, чтобы не путаться. Я буду сохранять в отдельную папку.
Так как нам придется картинки чередовать, то подписывайте каждую по номеру, например эта будет под цифрой 1, так и назовите. Если вы сделаете это, то вам будет проще работать.
5. Далее будем работать по одному и тому же холсту, то есть вам сейчас нужно открыть ту же картинку (которую мы только что создали под названием “1”) в программе фотошоп и добавить поверх нее два квадрата. Только нужно на первый квадрат поместить тот, что тусклее, на второй квадрат - первый, самый яркий, а третий оставить без изменений.
Проще говоря, вторая наша картинка будет отличаться от первой месторасположением первого и второго объектов (сменой мест).
Затем также обрежьте и сохраните эту картинку как и первую, только дайте название “2”.
6. Дальше аналогично проделайте те же действия, только на этот раз поменяйте местами второй и третий квадрат, первый оставьте без изменений.
Обрежьте лентой и сохраните, дав название картинки “3”.
Так выглядят изображения сохраненные в папке.
7. Осталось создать последнюю четвёртую кадровую картинку. В ней мы поменяем местами последний объект и первый, тот что посередине оставим без изменений.
Обрежьте картинку, сохраните с названием “4”.
Отлично! Пол пути пройдено! Могу даже сказать, что вы закончили самые по моему мнению трудные и муторные шаги. Дальше, уверяю, будет все намного проще. То есть сам процесс создания gif, в принципе легкотня! Поехали дальше!
После того, как вы подготовите свои картинки в отдельной папке с наименованиями 1, 2, 3, 4, для создания дальнейшей gif-анимации, вам нужно будет открыть новый холст в программе фотошоп с размерами 1920/1080 и приступить к следующим шагам (или очистить тот, на котором вы создавали под кадровые картинки, тогда не придется тратить время на обрезку, только вставляй и выравнивай, ведь размеры холста все равно совпадают с размером картинки).
1. Поместите по центру холста в программе Photoshop первую картинку. Обрежьте лишнее, ровно по ее краям, следом поместите по очереди, вторую, третью и четвертую одна на другую.
2. На верхней панели управления программы фотошоп нажмите на вкладку “Окно” и откройте “Шкалу времени”, а потом нажмите на кнопку по середине открывшееся шкалы “Создать анимацию кадра”.
3. Далее в правом верхнем углу шкалы времени кликните на значок меню (полосочки одна над другой) и выберите “Создать кадры из слоев”. После этих действий все покадровые картинки появятся на шкале, а это четыре картинки и пятая - белый холст. Нам он уже не нужен, поэтому выберите его, просто кликнув по нему кнопкой мыши и нажмите на корзину.
Оставьте промежуточное время между сменой кадров 0 секунд. Если вам нужны перелистывания более плавные, то время нужно будет увеличить, но в нашем случае 0 секунд само то!
Далее настройте повторы кадров, для этого кликните на кнопку “Постоянно”. Все, теперь вы можете уже воспроизвести свою гифку для ее просмотра, нажав на play, тут же рядом.
Основные настройки сохранения gif
Для того, чтобы сохранить гиф в фотошопе, а точнее скачать файл в gif формате, начните сохранять, как обычную картинку - это “Файл”, “Экспортировать”, “Сохранить для Web…”, а дальше внимательнее! Выберите формат gif, как на скриншоте, убедитесь, что параметры повторов выбраны как “Постоянно”, можете также нажать на плей, чтобы проверить, что гифка работает как положено, а только потом можете нажать “Сохранить”.
На этом этапе создание нашей gif-анимации закончено. Ну так что, сложно было сориентироваться по шагам? Даже если с первого раза у вас с трудом получилось сделать гифку, то не переживайте, с каждым последующим разом этот процесс для вас будет казаться все проще и проще.
Еще один пример бегающего квадрата.
Как сделать гифку в фотошопе | Шаблон 2
Можно также создать gif-анимацию по тому же алгоритму, только каждый кадр в ней будет состоять из любой картинки скаченной в интернете. Например с любым мультяшным персонажем.
Подготовьте несколько любых картинок с мультперсонажами, желательно на белом фоне или без него.
1. Далее, поместите на чистый лист холста с размером 1920/1080 в программе Photoshop первую картинку, обрежьте ее сверху и снизу по краям, чтобы получилась длинная лента, так как по бокам обрезать не надо.
Сохраните в отдельную папку и назовите “1”. То же самое проделайте с остальными персонажами, просто добавьте следующего, сохраните и дайте название ”2”, также поступите с третьим, четвертым и т.д.
2. Затем откройте чистый холст в программе фотошоп и поместите первую картинку, обрежьте сразу с помощью кодирования лишнее сверху и снизу. Потом добавьте остальные изображения по порядку (подравнивая по центру, чтобы было все ровненько, если понадобится).
3. Далее откройте “Окно”, потом “Шкала времени”, затем нажмите на строку “Создать анимацию кадра”, которая находится по середине открытой шкалы времени.
4. После, нажмите на значок меню в правом верхнем углу шкалы времени и выберите вкладку “Создать кадры из слоев”. Потом в покадровых картинках на шкале выделите чистый белый холст (фон) и удалите его, нажав на корзину в ряде кнопок, так как он нам в нашей gif как элемент не нужен.
5. Выберите в параметрах повторов “Постоянно”, а затем настройте промежуточное время на 0,5 секунд. Запустите воспроизведение gif анимации, нажав на плей в ряду кнопок, для того, чтобы убедиться что все получилось.
6. Для сохранения gif-анимации кликните на вкладку “Файл”, “Экспортировать для Web…”, настройте gif формат для файла, потом кликните “Сохранить”.
Как видите, в принципе все аналогично, ход действий повторяется так же как и в первом примере. Можно широко пофантазировать и даже создать целый сюжет. Так как cкачать разных картинок в интернете не составит большого труда, а придумать как их расположить в своей гифки я думаю вы сможете.
Как сделать гифку в фотошопе | Шаблон 3
В этой инструкции я вам покажу еще один способ создания гифок в программе Adobe Photoshop, но он более сложнее, чем первые два.
Нужно нарисовать кадровые картинки самому, да да! Нужно научиться пользоваться инструментами и эффектами для рисования, включить свое воображение, фантазию и начать создавать невероятно крутые gif-анимации!
Я немного освоила так сказать первые азы рисования в фотошопе, поэтому продемонстрирую какой-нибудь самый простой пример. Ну так что, начнем?
1. Нарисуйте на чистом холсте любой рисунок, воспользовавшись инструменты таких как краски и кисти например. Сохраните изображение на рабочем столе. Потом откройте рядом еще один чистый холст с размерами 1920/1080, расположите свою картинку посередине, но обязательно уменьшите ее до возможных размеров. Обрежьте ненужные края сверху и снизу, а по бокам не отрезайте, чтобы получилась опять же длинная лента.
Таким способом необходимо нарисовать несколько картинок, листая которые получится сюжет. Сохраните каждую в отдельную папку и дайте название картинкам согласно порядку расположения в гиф-анимации: если первая, то “1”, если вторая, то “2” и т.д.
Вот так примерно должны выглядеть ленты с вашими нарисованными изображениями сохраненные отдельно в папке.
2. Теперь начинаем создавать собственно сам gif animation. Откройте чистый белый холст размера 1920 на 1080. Поместите первую картинку по центру. Обрежьте края сверху и снизу. Дальше добавляете поочередно все остальные (при необходимости поправляйте их, чтобы они все были по центру, край к краю).
3. Кликните на верхней панели инструментов программы Adobe Photoshop на вкладку “Окно”, потом “Шкала времени”. Далее нажмите на строку “Создать анимацию кадра” находящуюся посередине шкалы.
4. Нажмите на значок меню в правом верхнем углу шкалы времени и выберите вкладку “Создать кадры из слоев”, далее нажмите на первый кадр - это белый холст, а затем на урну, чтобы его удалить, так как он нам не нужен для создания gif-анимации.
5. Установите время между перелистыванием кадров из слоев, в своем случае я установлю 0 секунд. Потом настройте параметры повторов выбрав “Постоянно”, это находится внизу, слева, в основных кнопках, рядом с проигрывателем.
6. Гифка готова, пришло время ее экспортировать в gif - формате. Нажмите “Файл”, “Экспортировать”, потом “Сохранить для Web…”, переключите формат на gif, далее нажмите “Сохранить”.
Чек лист для создания гиф через фотошоп
Перед тем как создавать gif анимацию, вам нужно определиться какую конкретно вы будете делать, или бегающий квадрат, или может быть круг, треугольник, не важно, я лишь показала шаблоны, дальше все зависит только от вашей фантазии, а может вы захотите нарисовать сюжет сами, или используйте скачанные изображения с интернета.
В любом случае для начала подготовьте готовые картинки в отдельной папке, с которых вы уже непосредственно будете делать саму гифку. А я для вас расписала последовательность действий по пунктам, пускай они будут для вас небольшой шпаргалкой.
Подготовка картинок
- Откройте чистый лист 1920 на 1080 в программе фотошоп.
- Поместите изображение по середине и обрежьте его по краям. Если у вас такая же ситуация как у меня, что ваш провайдер поддерживает такое расположение гифок, но оно выглядит безобразно, то только сверху и снизу, если нет, то можете обрезать со всех сторон.
- Сделайте первую картинку, сохраните ее в отдельную папку с названием “1”. Дальше проделайте те же действия с остальными изображениями, давая названия каждой нумерованное, чтобы не путаться.
Создание гиф через фотошоп
- Откройте холст 1920 на 1080 в программе Adobe Photoshop и поместите по центру все картинки поочередно начиная с первой. Рекомендую обрезать лишние края сразу после того, как разместите первую, а остальные просто добавляйте подравнивая их по краям.
- Откройте шкалу времени во вкладке “Окно” на верхней панели инструментов.
- Нажмите на кнопку “Создать анимацию кадров”.
- Через меню шкалы времени, расположенной в правом верхнем углу (несколько полосок одна над другой) - создать кадры из слоев.
- Удалите белый холст на шкале времени из кадров.
- Настройте нужное вам время перелистывания кадров из слоев.
- Настройте параметры перелистывания кликнув “Постоянно”.
- Просмотрите готовое gif через плей, там же.
- Сделайте экспорт нажав на вкладку“Файл”, “Экспортировать”, “Сохранить для Web…”, далее настройте формат gif и нажмите "Сохранить".
Завершение
Давайте подытожим. Если вы попробуйте сделать гифку руководствуясь одной из инструкций предложенных мной в этой заметке и поймете саму суть техники создания gif анимаций, то вы без проблем сможете создавать свои уникальные гифки, на автомате так сказать.
Тем более вам будет где разгуляться, ведь если взять даже пример с бегающим квадратом, то пофантазировав можно создавать что-то просто бомбическое, что там уже говорить про картинки нарисованные самостоятельно.
А gif-анимации сделанные с картинок скачанных в интернете, так там вообще пруд пруди фантазий, можно создать изображение с добавлением ни одного элемента, в сети можно найти и скачать реально все что нужно, как мультяшного героя, так и всякие дополняющие объекты, фигурки и т.п.
Главное, нумеруйте подготовленные картинки в названиях, чтобы не запутаться, сохраняйте их для дальнейшей работы в отдельной папке и не забывайте при сохранении устанавливать формат gif.
Вообще хочу честно говоря научиться всем фишкам и приемам фотошопа, а то сама я далеко не уйду. С помощью этой программы ведь можно создавать абсолютно все, даже баннеры, их тоже нужно уметь делать.
Здесь в одной онлайн школе, под названием "Мастер фотошопа", которая кстати себя очень хорошо зарекомендовала на просторах интернета, в отличии от множества непонятных школ, есть отличный курс, в котором можно обучиться навыкам работы в программе фотошоп с нуля.
Могу вам его порекомендовать, ведь сама планирую в ближайшее время пройти обучение на этом курсе и научиться всем приемам и фишкам этой классной программы. Вот ссылка на содержание курса, вот на оформление обучения.
Ну я думаю, что думаю буду заканчивать, не вижу смысла повторяться и тратить свое и ваше время. В инструкциях я думаю понятно все расписано, если есть вопросы, не стесняйтесь задавайте, может что-то не понятно.
Надеюсь моя статья была полезна для вас и вы воспользуйтесь моими инструкциями, для того, чтобы создать свою gif-анимацию. Оставляйте комментарии, подписывайтесь, чтобы не пропустить новых статей на моем блоге и обязательно делайте репост, ведь сделав его вы можете выиграть ноутбук в конкурсе, все подробности вы можете узнать здесь>>
Удачи и пока!
Оставить комментарий