Чтобы сделать gif баннер самому, нужно иметь на своем компьютере программу photoshop.
Во вторых надо знать, какие бывают размеры баннеров в пикселях и их значение КБайт, которое занимают на жестком диске. Обратимся к требованиям к баннерам на сайте яндекса.
- Во первых, размеры указаны до 150 КБ, ко всем форматам для формата gif.
- У баннера должна быть рамка в один пиксель, цвет должен не совпадать с фоном и непрозрачность больше 50 процентов.
- Баннеры не должны мигать, чтобы не отвлекать пользователя от страницы.
- Анимация не больше 15 секунд.
Будем придерживаться этих основных правил, остальные можно посмотреть на сайте yandex.
Содержание статьи
Делаем gif баннер формата 728 на 90.
Открываем программу фотошопа и создаем лист в формате 728 на 90.
Баннер будет по продаже видеокарты GeForce GTX 1080.
Чтобы нажали на баннер, есть смысл предложить дополнительную услугу как бонус.
Игра в подарок с хорошей графикой будет бонусом к покупке дорогой видеокарты.
- Зададим фон баннеру.
- Добавим кнопку с градиентом и внешним свечением. Gif баннер будет с правой стороны с призывом к действию.
- Добавим изображение игры Assassin's Creed с хорошей графикой. Изображение будет маской прямоугольнику, развернутому под углом.
- Пишем зазывающий текст, который будет меняться три раза в интервале три секунды.
Добавим смену кадров в фотошопе.
- В photoshop в верхнем меню нажимаем окно и выбираем шкала времени. Внизу появится окошко.
- Нажимаем преобразовать в кадровую анимацию.
- Появилось окно с первым кадром.
Добавляем три кадра в gif баннер.
- Выставим показывать постоянно.
- Нажмем на параметр время и выставим любой интервал чередования.
- Для создания нового кадра нажимаем на иконку, создать копию выделенного кадра.
- В каждом кадре оставляем слой с разным текстом по очереди.
Сохраним gif баннер.
Все картинки для landing page и для баннеров сохраняются в программе photoshop только в формате сохранить для web, комбинация клавиш shift+ctrl+alt+s.
Файл сохраняется более компактно, и поисковый робот не ругается, что получилась большого размера картинка.
- Формат gif при сохранение.
- 256 цветов, чтобы не терять в качестве изображения.
Получившийся баннер.
Красивый статический игровой баннер для twich.
Сделаем красивый баннер, для твич канала.
- Находим кисть для фотошопа и добавляем. Делаем мазок по горизонтали кистью.
- Скачиваем png героя любой компьютерной игры. Добавляем на баннер.
- Скачиваем задний план от игры wow и делаем слой маску к рисунку кисти.
- За героем игры делаем красную тень, также кистью для фотошопа.
- Скачиваем красивый шрифт, например true lies и делаем надпись в свободной части фона.
Проверяем, что получилось.