В сети много вариантов создания разных баннеров. Каждый автор имеет свои подходы и пользуется своими инструментами.
В этой статье я покажу вариант, которым давно и успешно пользуюсь.
Для тех, кто хотел бы более подробно разобраться в данном методе, я привожу пошаговую инструкцию, в которой даны скриншоты из моего фильма.
Сочетание статьи и видеоролика позволят более полно разобраться в этой методике.
В данной методике я использую алгоритм, работая с тремя программами: PowerPoint, Fast Stone Capture и gifovina.
Компоновка и создание отдельных слайдов я выполняю в PowerPoint. В нем удобно создавать нужные рисунки и просто работать с их уровнями. Хотя это на любителя. У каждого может быть свой стиль и свои инструменты. Часто можно встретить методики работы со слоями в PotoShop, но в PowerPoint проще.
В данном баннере фон оставался постоянным, а менялось насыщение рисунка отдельными блоками. Поэтому необходимо было создать отдельные слайды без смещения контуров. Для этого вначале выбирается фон и устанавливается на рабочем поле.
В зависимости от формата баннера создается рамка без заливки и с хорошо читаемыми контурами. Рамка устанавливается в нужном месте фона.
Дальше выбирается рисунок с прозрачным фоном (png) и формируются текстовые блоки. В нашем случае два текстовых блока, которые в баннере будут появляться последовательно.
Скриншоты мне удобно выполнять в среде FastStone Capture. Это простая программа с хорошим интерфейсом и большим набором полезных функций. Можно снимать скриншот с экрана и захватывать видео, редактировать графику, поворачивать, изменять размер и многое другое.
В интернете много информации по этому редактору.
Скачать его можно по ссылке: FastStone Capture
https://www.dvdvideosoft.com/ru/products/dvd/Free-Screen-Video-Recorder.htm
На панели управления находим функцию выделения прямоугольной области и аккуратно по контурам рамки копируем отдельные слайды с нужным набором блоков. Первый слайд с фоном, второй с первым текстовым блоком, на третьем добавляется второй текстовый блок, четвертый слайд с фигурой девушки.
Полученные файлы сохраняем на компьютере в отдельной папке.
Для окончательной компоновки и создания анимации я использую простую и удобную программу Gifovina. С ней можно работать перейдя по ссылке http://gifovina.ru
В открывшейся панели нажимаем кнопку «Добавить кадр» и вставляем из папки сохраненные файлы. Порядок кадров можно изменять при редактировании.
Для создания нужного формата баннера воспользуемся меню, где можно оставить формат, заданный в картинках, или выбрать новый.
Следующий шаг - расположение последовательности слайдов для анимации и времени их демонстрации. Нажимая на окно под слайдом устанавливаем время демонстрации. Есть возможность установить одинаковое время или для каждого слайда свое.
Следующий этап - выбор эффекта перехода между слайдами и его времени. Эффект выбирается из встлывающего окна, а время устанавливается в окошке между слайдами. Время может быть для всех переходов одинаковым или для каждого перехода свое.
После нажатия на кнопку «Готово» в рабочем окне сайта начинает демонстрироваться, созданный банер и появляются кнопки «Поделиться», «Скачать» и «Закрыть». Если не устраивают отдельные элементы баннера (последовательность, время демонстрации слайдов, эффекты переходов) можно выполнить изменения. Для этого нажимаем кнопку «Закрыть» и возвращаемся к редактированию.
Для сохранения баннера нажимаем на «Скачать» и сохраняем файл в нужном месте на компьютере.
При нажатии на кнопку «Поделиться» появляются «ссылка» и «код». Копируем их и сохраняем в блокноте или в любом другом текстовом редакторе для дальнейшего использования. Для выхода на соцсеть есть кнопка «Загрузить В Контакте».
Сохраненную ссылку и код в дальнейшем используем для размещения баннера на сайтах и в других целях.
Для четкого определения последовательности действий при создании анимированного баннера можно использовать чек-лист.
Попробуйте такую методику создания анимированого баннера.
Буду благодарен за отзывы на эту статью.
Комментариев нет:
Отправить комментарий