Перед нами стоит задача сделать простой анимированный баннер для сайта. И главное не сам баннер, а принцип создания баннера. Когда понимаешь, как работает анимация, возможности по созданию своего баннера, многократно выше. Рисовать будем в бесплатном свободном графическом редакторе Gimp.
Что такое анимированный баннер ? По сути это несколько изображений, которые последовательно выводятся перед нами на экране. Время показа каждого изображения задается при создании баннера. Показ изображения зацикливается. Картинки просто листаются одна за другой. Простая мультипликация из нескольких кадров.
Анимированный баннер делаем размером 300*600 пикселей. Открываем Файл_Создать проект. Указываем размеры, подтверждаем.
Пишем текст. Каждую строку текста и каждый элемент баннера создаем в отдельном слое. Выбираем инструмент Текст и пишем первую строку _ Это вкусное.
Подбираем шрифт и размер текста.
Немного украсим текст. Сделаем небольшую тень от текста. Открываем раздел Фильтры _ Свет и тень _ Длинная тень.
Пробуем различные параметры тени. Цвет тени, длина тени, наклон тени.
Можно сделать любое количество теней разных цветов. Просто фантазируем. Используя фильтры, можно создать бесконечное разнообразие и текста, и фигур, и изображений.
Добавляем все сроки текста. Делаем тени от текста, повторяя предыдущее действие.
Находим в интернете подходящую картинку пирожного. Вырезаем картинку и сохраняем в отдельном файле с расширением PNG. Этот формат позволяет сохранять изображение без фона. Открываем вырезанную картинку пирожного, выбираем пункт Выделение _ Выделить все. Потом Правка _ Копировать. Переходим к баннеру. В новом слое делаем Правка _Вставить. Как правило, вырезанная картинка будет иметь больший размер, чем наш баннер. Поэтому после вставки уменьшаем изображение пирожного. Выбираем инструмент Масштаб, уменьшаем и позиционируем изображение.
Выбираем инструмент Перемещение и равняем надписи.
Пишем еще одну фразу ПОРАДУЙ СЕБЯ. Делаем ее без тени, но заключаем в рамку.
Сначала пишем текст. Потом в новом слое делаем прямоугольное выделение. Далее инструментом Плоская заливка заливаем выделение.
Слой с текстом, чтобы был виден, должен быть выше слоя с залитой рамкой. Выбрав слой с залитой рамкой, используя разные фильтры, можно подобрать разные виды рамки.
Заливаем фоновый слой цветом. Обратите внимание. Слои необходимо расположить снизу вверх, в том порядке в каком они должны появляться при анимации.
Перед тем, как анимировать баннер, необходимо оптимизировать изображение. Слои преобразуются в gif формат, имея минимальные размеры. Для оптимизации изображения выбираем Фильтры _ Анимация _ Оптимизация.
Для включения анимации выбираем Фильтры _ Анимация _ Воспроизведение.
Выбрав режим анимации, включаем воспроизведение. Получаем мелькание каждого изображения со временем 100 мс. Для изменения времени показа каждого изображения (слоя), необходимо установить время в мс. Время указано в скобках на каждом слое.
Для плавного появления изображения любого слоя, нужно создать несколько слоев с различной прозрачностью. Создаем 10 слоев с изображением пирожного и 10 слоев с фоном. Для создания копии слоя, кликаем на выбранном слое правой кнопкой мышки. Выбираем _ Создать копию слоя.
После создания копий слоев, располагаем под каждым слоем изображения пирожного слой с фоном. Располагаем простым перетаскиванием. Следующим этапом меняем прозрачность слоев с пирожным. Начиная с нижнего слоя устанавливаем непрозрачность. Нижний слой непрозрачность 10 процентов, следующий 20 процентов и так далее. Последний слой непрозрачность 100 процентов.
Дальше необходимо объединить слои. Объединяем по два слоя. Слой с изображением пирожного и слой фона. Слой фона должен быть снизу. Выделяем слой с пирожным, кликаем правой кнопкой мышки. Выбираем Объединить с предыдущим.
В итоге получилось 10 слое с изображением пирожного с разной прозрачностью.
Включаем анимацию и проверяем , что получилось.
Для сохранения готового анимированного баннера выбираем Файл _ Экспортировать как. Сохраняем с расширением gif.
Ставим флажок Сохранить ка анимацию и Бесконечный цикл. Нажимаем Экспорт.
