Анимированный баннер в Фотошопе. | Как создать свой сайт

Как сделать анимированный баннер в Фотошопе

Ноя-30-2010 Автор: VeryOldMan

Реклама в Интернете давно уже стала его неотъемлемой частью. Практически на любом сайте можно увидеть рекламные объявления в том или ином виде. Особое внимание привлекают так называемые анимированные баннеры. В отличие от статичной рекламы, реклама в виде динамичного изображения, а таким и есть анимированный баннер или как его еще называют gif  баннер, намного лучше справляется с задачей привлекать внимание посетителя сайта. Да Вы и сами об этом знаете. Как создаются анимированные баннеры. Самый простой способ создания – это создать отдельные кадры анимации в программе Фотошоп, а затем уже непосредственно сделать gif  баннер в программе для создания анимации. Например, в такой как Ulead GIF Animator. Прежде чем непосредственно начать создание баннера, определимся почему анимированный баннер называют gif  баннером. GIF – это один из форматов изображения. Одно из основных свойств формата GIF это то, что файл в данном формате может содержать несколько кадров, которые сменяют друг друга через заранее заданный промежуток времени. Короче говоря — позволяет создавать анимацию. Так давайте ее и создадим.

Итак, запускаем программу Фотошоп. Через меню Файл – Новый создаем новый файл с размерами 468 на 60 пикселей. Почему такого размера? А это стандартный размер баннера для сайта. Вернее один из стандартных размеров баннеров для сайта. Естественно, Вы можете выбрать любой другой размер или сделать анимированный баннер своего размера, если Вам так хочется. А посмотреть какие же бывают стандартные размеры баннеров, Вы можете ВОТ НА ЭТОМ сайте.

А мы продолжаем создание анимированного баннера. Остановились мы на том, что создали новый файл с размерами нашего будущего анимационного баннера. Создадим для него бекграунд, с помощью заливки каким-либо цветом. Я выбрал цвет f2f2f2. Сделаем это в меню Редактирование – Выполнить заливку:

 анимированный баннер в Фотошопе

Считаем это слой первым кадром баннера и создаем новый слой, который как Вы понимаете, будет вторым кадром. На этом слое делаем надпись:

анимированный баннер в Фотошопе

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

анимированный баннер в Фотошопе Создаем следующий слой:

анимированный баннер в Фотошопе

Еще один:

анимированный баннер в Фотошопе Еще один:

И последний слой, который будет содержать полное изображение анимированного баннера. На этом слое мы добавим рисунок кактуса.

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

анимированный баннер в Фотошопе

Правда, кадрами они станут в другой программе, а пока нужно сохранить их в порядке возрастания, чтобы потом не перепутать. Как это сделать. Для начала создадим для кадров баннера отдельную папку. Отключаем видимость всех слоев, кроме первого, щелкая по «глазам» напротив каждого слоя. С помощью меню Файл – Сохранить для WEB и устройств сохраняем первый кадр анимационного баннера, само собой разумеется, в формате gif под номером 1. Дальше включаем второй слой баннера, щелкнув по «глазу» напротив и сохраняем второй кадр, так же как и первый, но под номером 2. Точно так же как первые два кадра, сохраняем все остальные под номерами 3, 4 и.т.д. На этом работа с программой Фотошоп закончена.

А теперь перейдем на страницу Создание анимированного баннера в Ulead GIF Animatorгде в программе для создания gif анимации, непосредственно будем создавать анимированный баннер.






4 комментария
  1. Владимир Пишет,

    Банеры стандартных размеров лучше не делать, т.к. существуют плагины блокирующие рекламу именно по размеру банера ( у самого такой стоит в браузере ).

  2. Алексей Пишет,

    Спасибо, очень полезная статья))

  3. Евгений Пишет,

    Подскажите пожалуйста как мне разместить банер в gif формате на сайте вордпресс?

  4. VeryOldMan Пишет,

    Так же как любой другой баннер или картинку в любом фоормате

Добавить комментарий