Реклама в Интернете давно уже стала его неотъемлемой частью. Практически на любом сайте можно увидеть рекламные объявления в том или ином виде. Особое внимание привлекают так называемые анимированные баннеры. В отличие от статичной рекламы, реклама в виде динамичного изображения, а таким и есть анимированный баннер или как его еще называют gif баннер, намного лучше справляется с задачей привлекать внимание посетителя сайта. Да Вы и сами об этом знаете.
Как создаются анимированные баннеры. Самый простой способ создания – это создать отдельные кадры анимации в программе Photoshop, а затем уже непосредственно сделать gif баннер в программе для создания анимации. Например, в такой как Ulead GIF Animator.
Прежде чем непосредственно начать создание баннера, определимся почему анимационный баннер называют gif баннером. GIF – это один из форматов изображения. Одно из основных свойств формата GIF это то, что файл в данном формате может содержать несколько кадров, которые сменяют друг друга через заранее заданный промежуток времени. Короче говоря — позволяет создавать анимацию. Так давайте ее и создадим.
Итак, запускаем программу Photoshop. Через меню Файл – Новый создаем новый файл с размерами 468 на 60 пикселей. Почему такого размера? А это стандартный размер баннера для сайта. Вернее один из стандартных размеров баннеров для сайта. Естественно, Вы можете выбрать любой другой размер или сделать баннер своего размера, если Вам так хочется. А посмотреть какие же бывают стандартные размеры баннеров, Вы можете ВОТ НА ЭТОМ сайте.
А мы продолжаем создание анимированного баннера. Остановились мы на том, что создали новый файл с размерами нашего будущего анимационного баннера. Создадим для него бекграунд, с помощью заливки каким-либо цветом. Я выбрал цвет f2f2f2. Сделаем это в меню Редактирование – Выполнить заливку:
Считаем это слой первым кадром баннера и создаем новый слой, который как Вы понимаете, будет вторым кадром. На этом слое делаем надпись:
Я полностью отдаю себе отчет в том, что это не шедевр. Так, что не судите строго, это всего лишь пример для того, чтобы просто показать как сделать анимированный баннер для сайта. Едем дальше. Создаем новый слой, на котором делаем надпись:
И последний слой, который будет содержать полное изображение анимированного баннера. На этом слое мы добавим рисунок кактуса.
Итак, мы имеем семь слоев в фотошопе или семь кадров будущего gif баннера.
Правда, кадрами они станут в другой программе, а пока нужно сохранить их в порядке возрастания, чтобы потом не перепутать. Как это сделать. Для начала создадим для кадров баннера отдельную папку. Отключаем видимость всех слоев, кроме первого, щелкая по «глазам» напротив каждого слоя. С помощью меню Файл – Сохранить для WEB и устройств сохраняем первый кадр анимационного баннера, само собой разумеется, в формате gif под номером 1. Дальше включаем второй слой баннера, щелкнув по «глазу» напротив и сохраняем второй кадр, так же как и первый, но под номером 2. Точно так же как первые два кадра, сохраняем все остальные под номерами 3, 4 и.т.д. На этом работа с программой Photoshop закончена.
А теперь перейдем на страницу Создание анимированного баннера в Ulead GIF Animator, где в программе для создания gif анимации, непосредственно будем создавать анимированный баннер.
Банеры стандартных размеров лучше не делать, т.к. существуют плагины блокирующие рекламу именно по размеру банера ( у самого такой стоит в браузере ).
Спасибо, очень полезная статья))
Подскажите пожалуйста как мне разместить банер в gif формате на сайте вордпресс?
Так же как любой другой баннер или картинку в любом фоормате