Создание анимации для веб-дизайна
Анимацией называют последовательный показ графических документов для имитации движения рисованных объектов. Простейшая анимация в интернете представлена в виде различных GIF файлов и рекламных баннеров, а более сложная — в кинематографе, компьютерных играх и т.д.
Как создать анимированный баннер с помощью онлайн-сервисов?
Создание статического изображения
Создать простейший баннер можно как, например, в фотошопе, так и воспользовавшись одним из многочисленных онлайн-сервисов — например, Banner Fans. Главными достоинствами данного ресурса являются полная поддержка кириллицы и высокая скорость работы.
Для того чтобы понимать принцип работы данного сервиса, рассмотрим создание простого баннера на практическом примере.
Перейдите на главную страницу сервиса Banner Fans и пройдите регистрацию, которая позволит хранить созданные файлы не только на компьютере, но и в самом сервисе.
В правом верхнем углу установите русский язык, перевод на который, хоть и немного кривоват, но всё же понятен. Верхняя часть рабочей области содержит окно макета баннера, а нижняя — панель инструментов.
- Макет:
- Размер баннера: 700 px – 100 px;
- Фоновый режим: градиент цвета;
- Цвет градиента: первый 003c99, второй 49b9ff.
Нажмите кнопку «Изменить баннер» в центральной части панели и посмотрите на результат:
- Текст:
- Ваш текст: Линия 1: «Заголовок баннера», Линия 2: «Текст баннера»;
- Шрифт. Для того чтобы выбрать кириллицу, щёлкните на название текущего шрифта и в правом верхнем углу выберите любой шрифт из Stock;
- Размер: Линия 1: 22 пикселя, Линия 2: 14 пикселей;
- Цвет: ffffff;
- Вращение: 0
Нажмите «Изменить баннер»:
Осуществите выравнивание надписи, захватив мышкой строку баннера и переместив её в нужное место, и снова нажмите на «Изменить баннер».
- Воздействие: Тень, расстояние, цвет, яркость, текст плана и наброски цветов настраиваются отдельно для каждой строки. Оставим всё без изменений.
- Пограничная: Выберите стиль границ: Оставим значение по умолчанию.
- После того, как вы завершите редактирование, перейдите на вкладку «Формат», выберите подходящее расширение файла и сохраните только что созданную картинку на компьютер. Помимо всего прочего данный сервис имеет удобную функцию «Получить код».
Для того чтобы ей воспользоваться просто введите в верхнем окне ссылку на нужную вам страницу и обновите код. Функция удобна для тех, кто размещает реферальные ссылки на различных форумах, досках объявлений и в социальных сетях:
Простой баннер готов, однако теперь ему необходимо придать движение: динамическая реклама намного эффективнее выполняет свою роль, нежели статическая:
Рекомендуем воспользоваться ещё одним бесплатным онлайн-сервисом minimultik.ru.
Анимация статического баннера
Для того чтобы из созданной нами картинки сделать анимированную, необходимо скачать с сервиса Banner Fans два файла в формате gif (гиф): один с пустым изображением, а другой содержащий надписи. Перейдите на minimultik.ru.
Так же, как и на Banner Fans, регистрация в данном сервисе не является обязательной. Загрузите подготовленные файлы:
Следующее, что вам необходимо сделать — выполнить настройки будущей анимации:
Для того чтобы выбрать эффекты, которые будут использоваться в переходах баннера, отметьте оранжевым цветом те, которые вам понравились:
Нажмите «Создать анимацию» и затем «Скачать»:
В конечном итоге получился такой простой баннер:
Таким образом, используя два совершенно бесплатных сервиса, можно сделать простую анимацию без использования дополнительного программного обеспечения.
Однако зачастую требуется создать более сложные с технической точки зрения баннеры, которые требуют покадрового прорисовывания. В таком случае вам необходимо воспользоваться графическим редактором Adobe Photoshop.
Создание анимированного изображения в Adobe Photoshop
Анимация в фотошопе — не удел великих программистов или дизайнеров, ведь это всего лишь множество картинок, следующих друг за другом в определённой последовательности.
Откройте Photoshop и создайте новый файл, предварительно указав его размер:
Включите в вашу рабочую область панель анимации («Окно -> Шкала времени»). Появится блок с кадрами:
Нарисуйте на первом слое холста какой-нибудь рисунок и создайте новый кадр. Добавьте новый слой:
Нарисуйте новую картинку вашей анимации в только что созданном новом слое:
После этого необходимо установить скорость, с которой кадры будут меняться. Для этого двигайте нижний ползунок вправо, масштабируя кадровую строку до нужных вам размеров, и измените длину блоков:
Проверьте поведение анимации, нажав на «Play». Если готовый результат вас устраивает, сохраните работу, нажав «Файл» -> «Сохранить для WEB устройств»:
Таким образом, мы научились работать с простейшей анимацией в редакторе Adobe Photoshop. По такому покадровому принципу можно создать хоть интересный и продающий рекламный баннер, хоть аватарку для любимого форума.
Как создать анимированную gif картинку
Перед тем, как создавать анимированную картинку, Вы должны предварительно иметь статические изображения и понимать что именно вы хотите создать.
- Переходите на сайт gifovina.ru
- Нажимаете на синюю кнопку добавить кадры в правом верхнем углу.
- Добавляете необходимые кадры.
- Справа настройки: размер, режим подгонки, длительность кадров, эффект.
- Как только все настроили нажимаете “Готово” и перед вами ваша gif картинка.
- Если вас все устраивает, просто нажимате скачать, и скачиваете ее на свой компьютер.
