Ноябрь 2017
Автор: Рубрика: Web дизайн Комментариев нет

Делаем gif баннер и баннер для twich


Делаем gif баннер

Чтобы сделать gif баннер самому, нужно иметь на своем компьютере программу photoshop.

Во вторых надо знать, какие бывают размеры баннеров в пикселях и их значение КБайт, которое занимают на жестком диске. Обратимся к требованиям к баннерам на сайте яндекса.

  1. Во первых, размеры указаны до 150 КБ, ко всем форматам для формата gif.
  2. У баннера должна быть рамка в один пиксель, цвет должен не совпадать с фоном и непрозрачность больше 50 процентов.
  3. Баннеры не должны мигать, чтобы не отвлекать пользователя от страницы.
  4. Анимация не больше 15 секунд.

Будем придерживаться этих основных правил, остальные можно посмотреть на сайте yandex.

Делаем gif баннер формата 728 на 90.

Открываем программу фотошопа и создаем лист в формате 728 на 90.

Баннер будет по продаже видеокарты GeForce GTX 1080.

Чтобы нажали на баннер, есть смысл предложить дополнительную услугу как бонус.

Игра в подарок с хорошей графикой будет бонусом к покупке дорогой видеокарты.

  1. Зададим фон баннеру.
  2. Добавим кнопку с градиентом и внешним свечением. Gif баннер будет с правой стороны с призывом к действию.
  3. Добавим изображение игры Assassin's Creed с хорошей графикой. Изображение будет маской прямоугольнику, развернутому под углом.
  4. Пишем зазывающий текст, который будет меняться три раза в интервале три секунды.

Делаем gif баннер формата 728 на 90

Добавим смену кадров в фотошопе.

  • В photoshop в верхнем меню нажимаем окно и выбираем шкала времени. Внизу появится окошко.
  • Нажимаем преобразовать в кадровую анимацию.
  • Появилось окно с первым кадром.

Добавим смену кадров в фотошопе

Добавляем три кадра в gif баннер.

  1. Выставим показывать постоянно.
  2. Нажмем на параметр время и выставим любой интервал чередования.
  3. Для создания нового кадра нажимаем на иконку, создать копию выделенного кадра.
  4. В каждом кадре оставляем слой с разным текстом по очереди.

Добавляем три кадра в gif баннер

Сохраним gif баннер.

Все картинки для landing page и для баннеров сохраняются в программе photoshop только в формате сохранить для web, комбинация клавиш shift+ctrl+alt+s.

Файл сохраняется более компактно, и поисковый робот не ругается, что получилась большого размера картинка.

  • Формат gif при сохранение.
  • 256 цветов, чтобы не терять в качестве изображения.

Сохраним gif баннер

Получившийся баннер.

Красивый статический игровой баннер для twich.

Сделаем красивый баннер, для твич канала.

  1. Находим кисть для фотошопа и добавляем. Делаем мазок по горизонтали кистью.
  2. Скачиваем png героя любой компьютерной игры. Добавляем на баннер.
  3. Скачиваем задний план от игры wow и делаем слой маску к рисунку кисти.
  4. За героем игры делаем красную тень, также кистью для фотошопа.
  5. Скачиваем красивый шрифт, например true lies и делаем надпись в свободной части фона.

Проверяем, что получилось.

Красивый статический игровой баннер для twich

Комментариев нет