Створення анімованих банерів онлайн російською (Flash, Gif і ін) під стандартні і власні розміри.
Інформаційний портал »Покращуємо сайт» Створення анімованих банерів онлайн російською (Flash, Gif і ін) під стандартні і власні розміри.
ПРИКЛАД самостійно виготовленого банера
Ось про це і піде мова в даній статті.
Я не буду розповідати вам які банери бувають і в чому їх переваги і недоліки. Це вже багато разів і так описано в інеті і знайти цю інформацію не становить труднощів. Зазначу лише що я використовую виключно Gif анімацію, тобто банери збережені в формат gif.
Для себе я шукав якийсь онлайн сервіс з виготовлення анімованих банерів і дуже бажано російською мовою з можливістю виготовляти банер обов'язково під свої розміри. а не жорстко задані в шаблонах.
Іскал..і знайшов завдяки ресурсу Дмитра (KtoNaNovenkogo.ru) передплатником якого я є вже кілька років і неодноразово його ресурс допомагав мені вирішити ту чи іншу задачу. Так сталося і цього разу.
Поговоримо ми сьогодні про сервіси bannerfans.com і xgif.ru
bannerfans.com
Перш ніж створювати банер раджу вам зареєструватися на цьому сервісі. Реєстрація дуже проста та забере у вас не більше 1 хвилини зате ви отримаєте можливість зберігати ваші банери і в подальшому при необхідності їх редагувати, що мені особисто відразу ж стало в нагоді, коли я подивившись на створений мною банер захотів його трохи підкоригувати.
«У цьому сервісі є російськомовний інтерфейс, можливість використання шрифтів з підтримкою російських букв, ну і просто досить зручний і інтуїтивно зрозумілий онлайн генератор банерів.
Реєстрація на сервісі не обов'язкова і потрібна тільки для збереження зроблених вами банерів, але ж їх можна буде просто завантажити на свій комп'ютер. Для перемикання інтерфейсу генератора на російську мову, просто виберіть його зі списку розташованого справа вгорі (над кнопкою реєстрації). Тепер можна приступати до виготовлення банера.
На першій вкладці «Макет» вам буде запропоновано вибрати розмір майбутнього банера зі списку стандартних розмірів, або вказати свій власний нестандартний розмір. Далі вам потрібно буде вибрати колірне рішення для банера:
- однотонну заливку одним вибраним кольором
- градієнтну заливку (використовується за умовчанням) з вибором обох кольорів і способу перетікання градієнта
- завантажити зображення, яке буде використовувати в якості фону.
Щоб вироблені вами зміни відобразилися на макеті, натисніть на розташовану трохи нижче кнопку «Змінити банер». Переходимо на вкладку «Текст». Залежно від типу і розміру підсумкового банера ви зможете задіяти від однієї до шести ліній з текстом (за замовчуванням використовується дві).
Для кожної лінії вам так само надається можливість вибрати розмір і колір шрифту, а так же кут повороту тексту щодо горизонталі.
ВАЖЛИВО! Текст біля вийшла зображенні можна переміщати в будь-яке бажане вами місце. Досить навести на них курсор мишки і натиснувши ліву кнопку мишки перетягнути в потрібне місце. Тобто позиціонувати їх на отриманому зображенні.
Вписуєте потрібний вам текст для кожної лінії і вибираєте тип шрифту, яким будуть прописані слова. Шрифтів дуже багато, але підтримку російської я знайшов тільки в групі «Stock»:
На наступній вкладці «Вплив» ви зможете задати напрямок падіння світла для відкидання тіні, власне, ширину тіні, її колір, а також ширину і колір обведення букв тексту ліній вашого банера:
Не забувайте після кожної зміни параметрів застосовувати їх до створюваного банеру, натиснувши на кнопку «Змінити банер».
Ну ось, на наступній вкладці вибираєте тип рамки для створюваного банера (якщо вона взагалі потрібна), а тому вже на вкладці «Формат» вибираєте тип зображення растрової графіки, в якому ви віддаєте перевагу зберегти даний шедевр (jpg, png або gif).
Який саме формат вибирати, вирішувати потрібно вам самим, але можете просто спробувати все, а при натисканні на кнопку «Завантажити банер» подивитися, який же формат є найбільш економічним для вашого випадку. Будемо вважати, що зробити простий баннер нам вдалося. Але найбільшим ефектом буде володіти анімований банер. Як можна його зробити?
Ну, для початку буде достатньо виготовити кілька кадрів майбутнього анімованого шедевра в уже описаному сервісі Bannerfans. Зберігати підсумкові зображення потрібно буде вже строго в форматі Gif бо тільки він дозволить нам досягти бажаного результату (правда, сервіс зі створення анімованих банерів може і перетворити в Gif інші формати, але краще буде відразу відповідати). Можна, наприклад, на одному кадрі залишити тільки верхню лінію, на другому додати ще й нижню, а потім написати якусь замануха-небилицю. Загалом, все залежить від багатства фантазії.
Отримані кадри в форматі Gif потрібно буде завантажити вже в іншій онлайн сервіс (xgif.ru), де можна буде налаштувати порядок чергування кадрів і отримати цілком робочий анімований банер зроблений повністю онлайн. Всі операції, які вам необхідно буде зробити на цьому сервісі, описані в усіх подробицях, так що і додати нема чого. Хоча ...
Просто перетягніть потрібну кількість фрагментів майбутнього банера на салатовий прямокутник, після чого для настройки послідовності кадрів перемістити їх мишею між собою в потрібному порядку. Обрізка кутів і плавні переходи мені не сподобалися, тому прибрав все це як надмірність і натиснув кнопку «Створити анімацію»:
Якщо отриманий результат створення анімації вас влаштовує, то тисніть на кнопку «Завантажити», а якщо не влаштовують, то «Продовжити редагування»:
Так при бажанні ви можете отримати HTML код для вставки вийшла анімації в структуру вашого сайту. Якщо бажаєте поділитися вашим банером з друзями і знайомими то можете отримати пряме посилання на нього. »
Велика частина тексту і частина картинок до статті взяті з сайту KtoNaNovenkogo.ru
Швидше за все у вас в опері варто якесь доповнення блокуючу відображення gif картинок, або блокування вмісту. Погуглити це питання, напевно знайдеться рішення. Про всяк випадок загляньте в «загальні настройки» - «розширені» - «вміст» і подивіться чи варто галочка в пункті «Включити анімацію зображень». Це ось прям найпростіше що швидко знайшов.
Привіт Кирил. Ні не підкажу. Свого часу я то ж щось подібне підшукував, але мабуть щось конкретного не знайшов.