Как сделать gif

Создаем баннер

Перед тем, как начать, уточните, где вам необходимо будет его разместить, определите нужные размеры и ограничения по весу. Например, для рекламной сети Яндекс (РСЯ) вес gif-баннера не должен превышать 120 кб.


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

Раскадровка gif-баннера

Для создания анимации gif-баннера необходимо в верхнем меню фотошопа сменить рабочую среду с той, в которой вы обычно работаете, на рабочую среду под названием “движение”:

Под рабочей областью появится поле для работы со шкалой времени:

В этом поле нам нужно выбрать режим “Анимация кадра”, так как мы будем делать покадровую анимацию:Наверно вы уже представляете, как это будет работать. Думаю, каждый из вас в детстве делал рисунки на полях тетради, где каждый последующий рисунок был немного изменен, и при быстром перелистывании кадров получалась анимация. Так вот тут это работает аналогичным образом.Теперь надо нарисовать элементы, которые будут друг друга сменять

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

Теперь самое простое! Выключаем один слой с кнопкой:

В панели со шкалой времени нужно создать еще один кадр


Для этого нажимаем кнопку “Создание копии выделенного кадра”:

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

Теперь у нас есть два кадра с разными кнопками. После нам нужно выставить длительность отображения каждого кадра. Для этого есть всплывающее меню под каждым кадром, где мы можем выставить время в секундах. В фотошопе есть заготовки, а также можно установить собственное время. На скрине показано, как изменить время кадра для gif анимации:

Видеокурс “Баннера в Photoshop своими руками”

Теперь возвращаемся непосредственно к видеокурсу «Баннера в Photoshop своими руками». И если уж вас заинтересовала данная статья, значит, вы ищите ответ на вопрос как сделать баннер самостоятельно.

Понятно, что лучше Владимира – человека, который непосредственно занимается данной деятельностью, объяснить  этот материал не сможет никто. Видеокурс Владимира Фирсова «Баннера в Photoshop своими руками» включает в себя полных 12 видеоуроков по созданию баннеров в фотошопе.


Сейчас в Интернете часто можно встретить такую фразу «много- мало воды» в отношении курсов, тренингов и т.д. Именно в уроках Владимира «воды» нет вообще! Очень понятно и подробно он показывает куда и как «тыкнуть» в программе, что разберется даже самый-самый новичок! Мне приходилось иногда ставить на паузу, чтобы зафиксировать очередное действие, потому что ничего лишнего нет, и ты постоянно в течение всего урока находишься во внимании.

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

Во втором уроке Владимир знакомит нас программой Фотошоп. Естественно официально она предлагается в платном варианте с бесплатным тестированием в 30 дней. Но все знают, что скачать ее можно и бесплатно, если хорошенечко «пошерстить» в Интернете. Я всегда в таких случаях пользуюсь Ютубом.

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

В четвертом уроке Владимир объясняет, как создать баннер анимированный. Лично для меня это была очень нужная информация! Когда-то я пользовалась специальными сервисами в Интернете в качестве эксперимента для создания анимированных баннеров, но, как оказалось, создавать в фотошопе анимированные баннера не так уж и сложно. А возможно просто Владимир Фирсов очень хороший «учитель»).


Понятно, что создавать баннера можно для себя, т.е. например, рекламировать свои инфопродукты, если они у вас есть, экономя свой бюджет. Но можно ведь и зарабатывать на создании рекламных баннеров для клиентов. И этой теме посвящен пятый и шестой урок видеокурса «Баннера в Photoshop своими руками». В 5 уроке Владимир проводит анализ стоимости рекламных баннеров, а в 6 – объясняет, как можно заработать на создании баннеров. И здесь вам в помощь будет биржа фриланса Offerlancer.

Итак, если вас заинтересовала тема как сделать баннер своими руками, настоятельно рекомендую пройти бесплатный обучающий видеокурс «Баннера в Photoshop своими руками» Владимира Фирсова. Времени на изучении он у вас займет немного, но всю ценную и необходимую информацию по созданию баннеров вы оттуда почерпнете! И все, что вам останется сделать – это реализовать свои знания в «жизнь» и заработать на этом неплохие деньги (по желанию конечно)!

Сохранение gif — анимации в фотошопе

  1. Gif — баннер в фотошопе сохраняется так же, как и обычное изображение. Жмем удобное сочетание горячих клавиш Ctrl + Alt + Shift + S или идем в меню Файл → Экспортировать → Сохранить для веб. Далее появится форма с кучей настроек для сохранения:
  2. Выбираем тип файла GIF, тип дизеринга устанавливаем регулярный и количество цветов устанавливаем 256:
  3. Так же у вас есть возможность регулирования параметров повторов. Если вы установите режим “Однократно”, то ваша gif — анимация один раз проиграется и остановится. При выборе режима “Постоянно” баннер будет зациклен и будет радовать глаз бесконечно) Этот режим меняется тут:

Вес gif баннера:

  1. В этой же форме в фотошопе можно отслеживать вес gif анимации:
  2. Если в вашем баннере много кадров и цветов, а также он большого размера, то его вес может составлять 130кб и больше. Для того, чтобы сократить вес gif — анимации, нужно уменьшить количество цветов:

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

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

Создать баннер в фотошопе

Имя Владимира Фирсова достаточно давно «на слуху»: он является создателем баннеров для проектов клуба Offerinvest – это хостинг Offerhost и биржа фриланса Offerlancer. Возможно, существуют еще его работы именно в Офферинвест, но, к сожалению, я лишь пишу о том, что знаю. На мой взгляд, все баннера выполнены очень профессионально: без сомнения у Владимира Фирсова есть дизайнерский талант!

Кроме этого совершенно случайно по какому-то запросу уже достаточно давно я наткнулась на канал Владимира Фирсова на Ютуб под названием Info Navigator. Любите смотреть обзоры тренингов и курсов?  – добро пожаловать на канал Владимира! И что меня очень приятно удивило – Владимир Фирсов является владельцем магазина мягких игрушек в Санкт-Петербурге Большой-мишка. рф.


С этим читают