Як створити анімований банер з допомогою онлайн-сервісів?
Створення статичного зображення
Створити найпростіший банер можна як, наприклад, в фотошопі, так і скориставшись одним з численних онлайн-сервісів - наприклад, Banner Fans. Головними перевагами даного ресурсу є повна підтримка кирилиці і висока швидкість роботи.
Для того щоб розуміти принцип роботи даного сервісу, розглянемо створення простого банера на практичному прикладі.
Перейдіть на головну сторінку сервісу Banner Fans і пройдіть реєстрацію, яка дозволить зберігати створені файли не тільки на комп'ютері, але і в самому сервісі.
У правому верхньому куті встановіть російську мову, переклад на який, хоч і трохи кривувато, але все ж зрозумілий. Верхня частина робочої області містить вікно макета банера, а нижня - панель інструментів.
- макет:
- Розмір банера: 700 px - 100 px;
- Фоновий режим: градієнт кольору;
- Колір градієнта: перший 003c99, другий 49b9ff.
Натисніть кнопку «Змінити банер» в центральній частині панелі і подивіться на результат:
![Створення анімації для веб-дизайну, photoshop (сервісу Banner Fans) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-c86de046.png)
- Ваш текст: Лінія 1: «Тема банера», Лінія 2: «Текст банера»;
- Шрифт. Для того щоб вибрати кирилицю, клацніть на назву поточного шрифту і в правому верхньому куті виберіть будь-який шрифт з Stock;
- Розмір: Лінія 1: 22 пікселя, Лінія 2: 14 пікселів;
- Колір: ffffff;
- Обертання: 0
Натисніть «Змінити банер»:
![Створення анімації для веб-дизайну, photoshop (правому верхньому куті) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-45852355.png)
![Створення анімації для веб-дизайну, photoshop (сервісу Banner Fans) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-c4041b55.png)
Рекомендуємо скористатися ще одним безкоштовним онлайн-сервісом minimultik.ru.
Анімація статичного банера
Для того щоб з створеної нами картинки зробити анімовану, необхідно завантажити з сервісу Banner Fans два файли в форматі gif (гіф): один з порожнім зображенням, а інший містить написи. Перейдіть на minimultik.ru.
Так само, як і на Banner Fans, реєстрація в даному сервісі не є обов'язковою. Завантажте підготовлені файли:
![Створення анімації для веб-дизайну, photoshop (photoshop) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-5cf3a317.png)
Наступне, що вам необхідно зробити - виконати настройки майбутньої анімації:
![Створення анімації для веб-дизайну, photoshop (анімації) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-3a11493c.png)
Для того щоб вибрати ефекти, які будуть використовуватися в переходах банера, відзначте помаранчевим кольором ті, які вам сподобалися:
![Створення анімації для веб-дизайну, photoshop (сервісу Banner Fans) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-382e44b4.png)
Натисніть «Створити анімацію» і потім «Завантажити»:
![Створення анімації для веб-дизайну, photoshop (анімація в фотошопі) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-a06153ab.png)
В кінцевому підсумку вийшов такий простий банер:
Таким чином, використовуючи два абсолютно безкоштовних сервісу, можна зробити просту анімацію без використання додаткового програмного забезпечення.
Створення анімованого зображення в Adobe Photoshop
Анімація в фотошопі - поза справами великих програмістів або дизайнерів, адже це всього лише безліч картинок, що слідують один за одним у певній послідовності.
Відкрийте Photoshop і створіть новий файл, попередньо вказавши його розмір:
![Створення анімації для веб-дизайну, photoshop (анімації) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-219773fc.png)
Включіть в вашу робочу область панель анімації ( «Вікно -> Шкала часу»). З'явиться блок з кадрами:
![Створення анімації для веб-дизайну, photoshop (анімації) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-5d90c887.png)
Намалюйте на першому шарі полотна якийсь малюнок і створіть новий кадр. Додайте новий шар:
![Створення анімації для веб-дизайну, photoshop (створення) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-0e7c8576.png)
Намалюйте нову картинку вашої анімації в щойно створеному новому шарі:
![Створення анімації для веб-дизайну, photoshop (анімація в фотошопі) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-6d2341fc.png)
Після цього необхідно встановити швидкість, з якою кадри будуть змінюватися. Для цього рухайте нижній повзунок вправо, масштабуючи кадрову рядок до потрібних вам розмірів, і змініть довжину блоків:
![Створення анімації для веб-дизайну, photoshop (photoshop) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-1ebbd4ab.png)
Перевірте поведінку анімації, натиснувши на «Play». Якщо готовий результат вас влаштовує, збережіть роботу, натиснувши «Файл» -> «Зберегти для WEB пристроїв»:
![Створення анімації для веб-дизайну, photoshop (анімація в фотошопі) Створення анімації для веб-дизайну, photoshop](https://images-on-off.com/images/149/sozdanieanimatsiidlyavebdizaynaphotoshop-efefd607.png)
Сподіваємося, що наші уроки корисні для вас. Бажаємо творчих успіхів!