Создание анимации для веб-дизайна

Анимацией называют последовательный показ графических документов для имитации движения рисованных объектов. Простейшая анимация в интернете представлена в виде различных GIF файлов и рекламных баннеров, а более сложная — в кинематографе, компьютерных играх и т.д.

Как создать анимированный баннер с помощью онлайн-сервисов?

Создание статического изображения

Создать простейший баннер можно как, например, в фотошопе, так и воспользовавшись одним из многочисленных онлайн-сервисов — например, Banner Fans. Главными достоинствами данного ресурса являются полная поддержка кириллицы и высокая скорость работы.

Для того чтобы понимать принцип работы данного сервиса, рассмотрим создание простого баннера на практическом примере.

Перейдите на главную страницу сервиса Banner Fans и пройдите регистрацию, которая позволит хранить созданные файлы не только на компьютере, но и в самом сервисе.

В правом верхнем углу установите русский язык, перевод на который, хоть и немного кривоват, но всё же понятен. Верхняя часть рабочей области содержит окно макета баннера, а нижняя — панель инструментов.

  1. Макет:
    • Размер баннера: 700 px – 100 px;
    • Фоновый режим: градиент цвета;
    • Цвет градиента: первый 003c99, второй 49b9ff.

    Нажмите кнопку «Изменить баннер» в центральной части панели и посмотрите на результат:

    Макет
  2. Текст:
    • Ваш текст: Линия 1: «Заголовок баннера», Линия 2: «Текст баннера»;
    • Шрифт. Для того чтобы выбрать кириллицу, щёлкните на название текущего шрифта и в правом верхнем углу выберите любой шрифт из Stock;
    • Размер: Линия 1: 22 пикселя, Линия 2: 14 пикселей;
    • Цвет: ffffff;
    • Вращение: 0

    Нажмите «Изменить баннер»:

    Текст

    Осуществите выравнивание надписи, захватив мышкой строку баннера и переместив её в нужное место, и снова нажмите на «Изменить баннер».

  3. Воздействие: Тень, расстояние, цвет, яркость, текст плана и наброски цветов настраиваются отдельно для каждой строки. Оставим всё без изменений.
  4. Пограничная: Выберите стиль границ: Оставим значение по умолчанию.
  5. После того, как вы завершите редактирование, перейдите на вкладку «Формат», выберите подходящее расширение файла и сохраните только что созданную картинку на компьютер. Помимо всего прочего данный сервис имеет удобную функцию «Получить код».

Для того чтобы ей воспользоваться просто введите в верхнем окне ссылку на нужную вам страницу и обновите код. Функция удобна для тех, кто размещает реферальные ссылки на различных форумах, досках объявлений и в социальных сетях:

«Формат»

Простой баннер готов, однако теперь ему необходимо придать движение: динамическая реклама намного эффективнее выполняет свою роль, нежели статическая:

Простой баннер

Рекомендуем воспользоваться ещё одним бесплатным онлайн-сервисом minimultik.ru.

Анимация статического баннера

Для того чтобы из созданной нами картинки сделать анимированную, необходимо скачать с сервиса Banner Fans два файла в формате gif (гиф): один с пустым изображением, а другой содержащий надписи. Перейдите на minimultik.ru.

Так же, как и на Banner Fans, регистрация в данном сервисе не является обязательной. Загрузите подготовленные файлы:

Banner Fans

Следующее, что вам необходимо сделать — выполнить настройки будущей анимации:

настройки

Для того чтобы выбрать эффекты, которые будут использоваться в переходах баннера, отметьте оранжевым цветом те, которые вам понравились:

эффекты

Нажмите «Создать анимацию» и затем «Скачать»:

Создать анимацию

В конечном итоге получился такой простой баннер:

простой баннер

Таким образом, используя два совершенно бесплатных сервиса, можно сделать простую анимацию без использования дополнительного программного обеспечения.

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

Создание анимированного изображения в Adobe Photoshop

Анимация в фотошопе — не удел великих программистов или дизайнеров, ведь это всего лишь множество картинок, следующих друг за другом в определённой последовательности.

Откройте Photoshop и создайте новый файл, предварительно указав его размер:

Анимация в фотошопе

Включите в вашу рабочую область панель анимации («Окно -> Шкала времени»). Появится блок с кадрами:

панель анимации

Нарисуйте на первом слое холста какой-нибудь рисунок и создайте новый кадр. Добавьте новый слой:

новый слой

Нарисуйте новую картинку вашей анимации в только что созданном новом слое:

картинка анимации

После этого необходимо установить скорость, с которой кадры будут меняться. Для этого двигайте нижний ползунок вправо, масштабируя кадровую строку до нужных вам размеров, и измените длину блоков:

установить скорость

Проверьте поведение анимации, нажав на «Play». Если готовый результат вас устраивает, сохраните работу, нажав «Файл» -> «Сохранить для WEB устройств»:

поведение анимации

Таким образом, мы научились работать с простейшей анимацией в редакторе Adobe Photoshop. По такому покадровому принципу можно создать хоть интересный и продающий рекламный баннер, хоть аватарку для любимого форума.

Надеемся, что наши уроки полезны для вас. Желаем творческих успехов!