Создание анимированного баннера для сайта в Gimp.

Перед нами стоит задача сделать простой анимированный баннер для сайта. И главное не сам баннер, а принцип создания баннера. Когда понимаешь, как работает анимация, возможности по созданию своего баннера, многократно выше. Рисовать будем в бесплатном свободном графическом редакторе Gimp.

Кратко о принципе работы анимированного баннера.

анимированный баннер

Что такое анимированный баннер ? По сути это несколько изображений, которые последовательно выводятся перед нами  на экране. Время показа каждого изображения задается при создании баннера. Показ изображения зацикливается. Картинки просто листаются одна за другой. Простая мультипликация из нескольких кадров.

Создаем проект. Пишем текст.

Анимированный баннер делаем размером 300*600 пикселей. Открываем Файл_Создать проект. Указываем размеры, подтверждаем.

Пишем текст. Каждую строку текста и каждый элемент баннера создаем в отдельном слое. Выбираем инструмент Текст и пишем первую строку _ Это вкусное.

текст баннера

Подбираем шрифт и размер текста.

Украшаем текст. Делаем тень от текста.

тень от текста

Немного украсим текст. Сделаем небольшую тень от текста. Открываем раздел Фильтры _ Свет и тень _ Длинная тень.

параметры тени текста

Пробуем различные параметры тени. Цвет тени, длина тени, наклон тени.

Делаем вторую тень текста.

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

параметры тени текста вторая тень

Добавляем остальные текстовые строки.

текст пирожное

Добавляем все сроки текста. Делаем тени от текста, повторяя предыдущее действие.

Вставляем картинку пирожного.

Находим в интернете подходящую картинку пирожного. Вырезаем картинку и сохраняем в отдельном файле с расширением PNG. Этот формат позволяет сохранять изображение без фона. Открываем вырезанную картинку пирожного, выбираем пункт Выделение _ Выделить все. Потом Правка _ Копировать. Переходим к баннеру. В новом слое делаем Правка _Вставить.   Как правило, вырезанная картинка будет иметь больший размер, чем наш баннер. Поэтому после вставки уменьшаем изображение пирожного. Выбираем инструмент  Масштаб, уменьшаем и позиционируем изображение.

вставляем картинку пирожного

Выбираем инструмент Перемещение и равняем надписи.

Надпись в рамке.

Пишем еще одну фразу ПОРАДУЙ СЕБЯ. Делаем ее без тени, но заключаем в рамку.

порадуй себя

Сначала пишем текст. Потом в новом слое делаем прямоугольное выделение. Далее инструментом Плоская заливка заливаем выделение.

Слой с текстом, чтобы был виден, должен быть выше слоя с залитой рамкой. Выбрав слой с залитой рамкой, используя разные фильтры, можно подобрать разные виды рамки.

располагаем слои

Заливаем фоновый слой цветом. Обратите внимание. Слои необходимо расположить снизу вверх, в том порядке в каком они должны появляться при анимации.

Оптимизируем изображение.

Перед тем, как анимировать баннер, необходимо оптимизировать изображение. Слои преобразуются в gif формат, имея минимальные размеры. Для оптимизации изображения выбираем Фильтры _ Анимация _ Оптимизация.

оптимизируем изображение

Включаем анимацию.

Для включения анимации выбираем Фильтры _ Анимация _ Воспроизведение.

 выбираем воспроизведение

Установка времени анимации.

Выбрав режим анимации, включаем воспроизведение. Получаем мелькание каждого изображения со временем 100 мс. Для изменения времени показа каждого изображения (слоя), необходимо установить время в мс. Время указано в скобках на каждом слое.

анимация

Плавное появление изображения.

Для плавного появления изображения любого слоя, нужно создать несколько слоев с различной прозрачностью. Создаем 10 слоев с изображением пирожного и 10 слоев с фоном. Для создания копии слоя, кликаем на выбранном слое правой кнопкой мышки. Выбираем  _ Создать копию слоя.

создаем копии слоев

После создания копий слоев, располагаем под каждым слоем изображения пирожного слой с фоном. Располагаем простым перетаскиванием. Следующим этапом меняем прозрачность слоев с пирожным. Начиная с нижнего слоя устанавливаем непрозрачность. Нижний слой непрозрачность 10 процентов, следующий 20 процентов и так далее. Последний слой непрозрачность 100 процентов.

Объединяем слои.

Дальше необходимо объединить слои. Объединяем по два слоя. Слой с изображением пирожного и слой фона. Слой фона должен быть снизу. Выделяем слой с пирожным, кликаем правой кнопкой мышки. Выбираем Объединить с предыдущим.

 объединяем слои

В итоге получилось 10 слое с изображением пирожного с разной прозрачностью.

 слои разной прозрачности

Включаем анимацию и проверяем , что получилось.

Сохраняем анимированный баннер.

Для сохранения готового анимированного баннера выбираем Файл _ Экспортировать как. Сохраняем с расширением gif.

сохраняем анимированный баннер

Ставим флажок Сохранить ка анимацию и Бесконечный цикл. Нажимаем Экспорт.

Видео  _  Создание анимированного баннера для сайта в Gimp.

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x