Створення тізерів (звичайних & анімаційних) в 3 кліка, блог олександра лукьянова

Створення тізерів (звичайних & amp; анімаційних) в 3 кліка, блог олександра лукьянова

Створення тізерів (звичайних & amp; анімаційних) в 3 кліка, блог олександра лукьянова
Перш ніж перейдемо до практичних дій по створенню тізерів (як звичайного так і анімаційного) давайте з перших рядків розберемося, що таке статика і динаміка в графічних поняттях, інакше далі буде плутанина у формулюваннях.

Статичний тизер - нерухома картинка. Найбільш популярні формати даного виду (jpeg, png). Ось приклад статичного:

Створення тізерів (звичайних & amp; анімаційних) в 3 кліка, блог олександра лукьянова

Динамічний (анімаційний) тизер - змінюється картинка. До складу цього виду входить набір кадрів, які змінюються в заданому інтервалі часу. Формат анімаційних тізерів - Gif. Приклад анімаційного тізера:

Про переваги (плюси і мінуси) ми поговоримо в заключній частині статті, а так само підведемо підсумки і з'ясуємо на які моменти варто звернути увагу.
Для практичних дій нам знадобляться такі інструменти як Adobe Photoshop. Easy Gif Animator. Прямі руки.

Створення статичного тізера

1. У програмі Adobe Photoshop створюємо новий полотно розмірів 200 на 200 пікселів. Це буде наша заготовка.

Створення тізерів (звичайних & amp; анімаційних) в 3 кліка, блог олександра лукьянова

2. Пошук картинок в Google. Для прикладу я буду робити тизер пов'язаний з годинами Rolex. Йдемо в Google Картинки вбиваємо запит: «Годинник Rolex» - вибираємо вподобану картинку і зберігаємо собі на комп'ютер

Створення тізерів (звичайних & amp; анімаційних) в 3 кліка, блог олександра лукьянова

Відразу крім самого годинника потрібно ще картинка, це може бути (Акція, Знижка, Кращий товар, Sale, Товар року і т.д.) все в ваших фантазіях. Для прикладу я взяв картинку наступного типу за запитом «хіт продажів png». Розширення png дає зрозуміти пошуку, щоб перебували картинки з прозорим фоном

Створення тізерів (звичайних & amp; анімаційних) в 3 кліка, блог олександра лукьянова

3. Вставка картинок. Беремо ці 2 картинки і перетягуємо в Adobe Photoshop, вони будуть розташовуватися в двох різних вікнах. Разом у нас тепер 3 вікна (1 - це заготовка. 2 і 3 - картинки які ми підготували)

4. Перекидаємо 2 наші картинки на нашу заготовку. Тут все просто - навіщо вчити? Виділяємо необхідну область - потім (Ctrl + C) - вставляємо на полотні (Ctrl + V). Так само чинимо з перебросом картинки «Хіт продажів»

Створення тізерів (звичайних & amp; анімаційних) в 3 кліка, блог олександра лукьянова
4. Збереження. Робіть збереження для Web-ресурсів, так Ви стиснете картинки і мало що втратите в якості. Робиться це в такий спосіб

Створення анімованого тізера

Коротенько трохи розповім який метод я використовую:

Переходимо від слів до справи, насолоджуємося і застосовуємо у себе методи в створенні анімації

Підводимо підсумки:

1. Що використовувати? Статичний або динамічний тизер?

- Ось що точно можу сказати на 100% Тестируйте більше тізерів (як статичних так і динамічні). Створюйте багато варіантів (близько 50 штук)

- Часто буває, що з пачки тізерів в 50 штук, зачепляться і будуть крутитися десь 3-4 тізера в тизерних мережах.

2. Плюси і мінуси

- В анімаційному, Ви зможете показати більше інформації, ніж в статичному

- Використовувати Gif анімацію замість Flash банера. Правда є істотний недолік gif формату - це його великий розмір. (Gif - значно більшого розміру ніж Flash банер)

Як бачите створення тізерів - легке заняття, яке не вимагає супер спец. навичок для створення. Трохи практики і буде виходити краще і красивіше з кожним разом.