GIF

Исследовательска
я работа на тему:
GIF-анимация к
сайту
Работу выполнила: Фисенко Н.П.
Цель:
Создать анимированную рекламу для сайта
Гипотеза:
Чтобы получить красочную анимированную рекламу,
достаточно в качестве исходника брать фотографию
Задачи:
1. Изучение теории
2. Создание GIF-анимации из фотографии
3. Оптимизация полученного файла
Задача 1.
Изучение теории
Каждый из пользователей Интернет уже вполне привычно
воспринимает появляющиеся почти на каждой странице
картинки-мультфильмы, так называемые динамические,
или анимационные (animated) GIFы. Чаще всего именно
такими являются рекламные баннеры.
Динамический GIF можно определить, как стандарт
графического файла, позволяющий размещать в одном
файле несколько изображений, для их
последовательного вывода на экран с целью создания
эффекта мультипликации.
Формат GIF (Graphics Interchange Format) разрабатывался
специально для внутрисетевого обмена растровыми
изображениями.
Основные характеристики формата GIF:
• Способность сохранять изображения в 256 цветовой
гамме;
• Малый вес изображения
• Графические форматы в GIF хранятся построчно,
поддерживая лишь определенную цветовую палитру
(256 цветов);
• При этом один из 256 оттенков может быть помечен как
прозрачный;
• Поддержка анимированных объектов.
Задача 2.
Создание GIF-анимации
(провести исследование)
Для анимированных изображений используется формат GIF. Вы
научитесь делать анимацию из картинок с нуля, или сможете
редактировать кадры готового анимационного GIF-файла.
Редактором анимации в Photoshop выступает панель Анимация,
расположенная на правом крае рабочего пространства
программы. Она вызывается из основного меню командой:
«Окно - Анимация». Это горизонтальная панель — рассмотрим
её инструменты:
Анимированное изображение состоит из кадров. Первоначально,
при его создании — это один кадр, который повторяет текущий
слой активного документа. Наша задача — создать
последующие кадры из других слоёв документа.
Для этого жмём значок дублирования кадра и создаём столько
копий, сколько нужно. В нашем примере — создаём 2-ой кадр и
выбираем его кликом:
Затем переходим в панель Слои: «Окно - Слои» (F7), и выделяем
«Слой 2» — он устанавливается во 2-ом кадре панели Анимация:
Далее нужно просто повторить эту процедуру с
остальными кадрами и слоями, если они есть.
Осталось рассказать о создании промежуточных кадров
— это возможность автоматизации процесса создания
анимации. В нашем примере используются два слоя —
две такие картинки:
Если всё оставить как есть, то при
переходе кадров будет скачок. Если
использовать промежуточные кадры,
то можно сгладить переход —
сделать его плавным.
Жмём значок и добавляем несколько
промежуточных кадров в нашу
анимацию, задав их количество в
открывающемся окошке:
Для промежуточных кадров устанавливаем близкую к
минимальной длительность показа и получаем мягкий переход
кадров. В примере мы оставили 4 промежуточных кадра,
которые, кстати, можно дорабатывать через панель Слои. Вот
что получилось — анимированное изображение из 6 кадров,
зацикленное на постоянный показ
Таким образом, мы выяснили, что, применив всего
два-три кадра можно оживить любую картинку.
Теперь вы сможете сами редактировать любые
готовые анимационные GIF-изображения, в файлах
которых сохраняются все слои.
В результате проведенного исследования мы
выяснили, что из обычной картинки (Рис. 1)
можно сделать небольшую рекламку (Рис. 2)
Рис. 1
Рис. 2
Задача 3.
Оптимизация
Используя программу Photoshop, научится получать
изображения в формате GIF с минимальным весом
при сохранении приемлемого качества.
Чтобы начать «колдовать» над изображением, откроем
панель оптимизации — выбираем меню File -> Save
for web &Devices (Файл -> сохранить для Веб).
Сейчас подробно
разберем настройки
оптимизации:
Если в таблице цветов исходного изображения отсутствует нужный
цвет, то приложение подбирает ближайший цвет из таблицы или
имитирует цвет с помощью сочетания доступных цветов.
Алгоритм сокращения цветов определяет, какой схемой
воспользуется Photoshop при преобразовании полноцветного
изображения в индексированное (таблицу цветов):
Perceptual (палитра на восприятие)
– создает цветовую таблицу на основе текущих цветов
изображения. Преимущество данной таблицы заключается в
сохранении целостности цвета;
Selective (выборочная палитра)
– аналогичная первой, довольно близко сохраняет исходные
цвета;
Adaptive (адаптивная палитра)
– создаст цветовую таблицу из цветов, наиболее часто
встречающихся в исходном изображении;
Custom (заказная)
– палитра из выбранных пользователем цветов.
А вот какой выбрать однозначно посоветовать не получается: для
разных изображений лучшим может оказаться любой, нужно
пробовать и сравнивать.
Для данной картинки мы
остановились на методе
Perceptual: он сжал файл лучше,
чем Selective и Adaptive.
Количество цветов имеет самое большое влияние на вес файла: чем
меньше цветов будет в изображении, тем оно будет легче. Но нужно
следить за тем, чтобы картинка теряла качество незаметно или еле
заметно. Сначала в выпадающем списке выбираем такое
количество цветов, при котором вес файла будет минимальным и
качество изображения удовлетворительным.
Тут мне нравится больше всего
вариант со 128 цветами: качество
изображения почти не пострадало и
размер файла прилично
уменьшился. Но, что будет если при
таком количестве цветов изменить
алгоритм палитры:
Adaptive при уменьшении цветов показывает лучшее
сжатие файла. Вывод: первоначальный выбор
алгоритма получения палитры не всегда будет
оптимальным. Итак, останавливаем свой выбор на
Adaptive 128 цветов. Затем пробуем еще
уменьшить число цветов тонкой настройкой. Для
этой картинке удалось уменьшить количество
цветов до 109 без особых потерь качества.
Обратим внимание как изменяется таблица
цветов при манипуляциях с настройками
оптимизации:
Кроме того, проанализировав другие источники, мы
выяснили, что существует еще несколько способов
создания GIF-анимация без потери качества:
1. Чем меньше цветов, тем больше сжатие, файл можно
сделать легким, но ужасно некрасивым.
2. Можно выкрутить цвета на максимум, но опять же картинка уже будет с потерей, а вес приличным.
3. Можно сделать анимацию в формате-> "APNG" в
графическом редакторе GIMP-> потери качества не
будет, но вес анимации значительно возрастёт.
Вывод
Проведя исследование по созданию GIFанимаций в программе Photoshop можно
сказать, что наша гипотеза подвергается
опровержению. Как бы мы не хотели получить
красочную анимированную рекламу, качество
картинки всё равно будет снижаться, хоть и
незаметно.
Следует запомнить несколько правил:
1. качество картинки будет низким, если
на фото присутствует большое кол-во
цветов
2. желательно не использовать локальных
палитр - такие картинки читаются, но в
некоторых случаях, это приводит к
неправильному изображению цветов.
Список литературы
На данном сайте вы сможете создать GIF-анимацию
онлайн:
1. http://gifovina.ru/
Дополнительные сайты с информацией про Gif-анимацию:
1. http://www.internettechnologies.ru/articles/article_2331.html
2. http://home.onego.ru/~chiezo/gif.htm
3. http://www.drawanime.ru/?pg=art&id=73
4. http://winru.ru/ter/6/1_11.htm
5. http://doc.marsu.ru/graphic/gifanimate/index.html