Статьи

Робимо gif банер самостійно. Другий банер для twich каналу

  1. Робимо gif банер формату 728 на 90.
  2. Додамо зміну кадрів в фотошопі.
  3. Додаємо три кадри в gif банер.
  4. Збережемо gif банер.
  5. Гарний статичний ігровий банер для twich.

Щоб зробити gif банер самому, потрібно мати на своєму комп'ютері програму photoshop

Щоб зробити gif банер самому, потрібно мати на своєму комп'ютері програму photoshop.

По друге треба знати, які бувають розміри банерів в пікселях і їх значення КБ, яке займають на жорсткому диску. Звернемося до вимог до банерів на сайті яндекса.

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

Будемо дотримуватися цих основних правил, інші можна подивитися на сайті yandex.

Зміст статті

Робимо gif банер формату 728 на 90.

Відкриваємо програму фотошопа і створюємо лист в форматі 728 на 90.

Банер буде з продажу відеокарти GeForce GTX 1 080.

Щоб натиснули на банер, є сенс запропонувати додаткову послугу як бонус.

Гра в подарунок з хорошою графікою буде бонусом до покупці дорогої відеокарти.

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

Пишемо зазивають текст, який буде змінюватися три рази в інтервалі три секунди

Додамо зміну кадрів в фотошопі.

  • У photoshop в верхньому меню натискаємо вікно і вибираємо шкала часу. Внизу з'явиться віконце.
  • Натискаємо перетворити в кадрову анімацію.
  • З'явилося вікно з першим кадром.

З'явилося вікно з першим кадром

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

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

У кожному кадрі залишаємо шар з різним текстом по черзі

Збережемо gif банер.

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

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

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

256 кольорів, щоб не втрачати в якості зображення

Одержаний банер.

Одержаний банер

Гарний статичний ігровий банер для twich.

Зробимо красивий банер, для Твіч каналу.

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

Перевіряємо, що вийшло.

Перевіряємо, що вийшло

Новости