Лабораторная работа №6 / Лабораторная работа 6

Лабораторная работа № 6.

Тема: Создание элементов Web-дизайна в редакторе растровой графики.

Цель: ознакомить студентов с методикой создания элементов Web-дизайна в

GIMP, а также их оптимизации для размещения на сайте.

Теоретические сведения

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

Начинающим дизайнерам сложно начать проектировать стиль сайта с нуля, поэтому, как правило, концепция сайта, его цветовая задумка, уже определены и утверждена заказчиком. От новичка-дизайнера требуется спроектировать элементы дизайна сайта в том же ключе, что и общий стиль сайта.

Впрограмме Gimp есть специальный функционал, который позволяет автоматически создавать некоторые интерактивные объекты веб-дизайна такие, как кнопки. Для этого в Gimp, используя встроенные возможности, можно создавать такие интерактивные объекты, как кнопки, иконки, пикто-

граммы, элементы инфографики и т.д.

Автоматический вариант создания интерактивных кнопок возможен с помощью программ, написанных как на встроенном языке GIMP, так и на языке Python. Библиотечные (или созданные разработчиками программного обеспечения), а также созданные пользователем наборы скриптов для обработки изображений доступны из меню "Фильтры".

Их можно найти в соответствующих пунктах:

•Python-Fu

•Script-Fu

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

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

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

Современные растровые графические редакторы обладают встроенными возможностями, которые позволяют создавать анимационные изображения, при этом, не прибегая к сложным и трудоемким операциям программирования. Формат GIF позволяет хранить изображение в виде набора слоев, в каждом из которых может храниться отдельное изображение или же его логическая часть. Принцип гиф-анимации заключается в том, что каждому слою в gif-изображении можно задать время воспроизведения содержимого слоя, а также время задержки перед показом следующего слоя. Таким образом, чередуя слои с определенной частотой, мы получаем гиф-анима- цию.

ВGIMP так же, как и в любом растровом редакторе осуществляется создание гиф-анимации, при этом принцип создания анимации в разных растровых редакторах практически одинаковый. Отличительные особенности, как правило, заключаются лишь в функциональном решении построения гифанимации, которое зависит от набора инструментов и встроенных возмож-

ностей программы.

Редактор GIMP позволяет создавать гиф-анимацию двумя разными способами:

1.полуавтоматический, который позволяет пользователю применить готовый скрипт – анимационный шаблон к изображению, тем самым получить готовую структуру кадров, которую остается экспортировать в формат gif.

2.ручной, который предполагает, что пользователь самостоятельно создает раскадровку будущей гиф-анимации

Для создания более сложного анимационного изображения, а также уменьшения веса файла гиф-анимации применяются команды, содержащиеся в группе Анимация меню Фильтры. В этой группе содержатся готовые шаблоны анимации такие, как Волны, Вращающийся шар, Рябь и так далее, а также фильтры, позволяющие усложнить и оптимизировать анимацию, созданную вручную: Воспроизведение, Оптимизация и Разоптимизация.

2

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

1.кнопка Пуск/стоп, которая запускает / останавливает гиф-анимацию;

2.кнопки Шаг назад, к предыдущему кадру и перейти на следующий кадр, которые позволяют перемещаться по кадрам гиф-анимации и осуществлять покадровый просмотр анимации вручную в заданном направлении: или вперед, или назад;

3.кнопка Перемотать назад осуществляет возврат воспроизведения анимации к первому кадру.

4.кнопка Отсоединить анимацию от окна диалога позволяет открепить окно, в котором воспроизводится анимация от основного окна Воспроизведение фильма. Если теперь мышкой перетащить окно с изображением в любое место экрана, например, в окно браузера, то можно посмотреть, как будет выглядеть эта гиф-анимация на странице сайта. Этой функцией просмотра можно пользоваться и для не анимированных изображений.

5.кнопка Перезагрузить изображение осуществляет перезагрузку гифанимации.

Рисунок 8. Окно запуска Gif изображения

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

3

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

−просмотреть каждый слой,

−найти в слое точки, отличающиеся от соответствующих точек предыдущего,

−оставить только те точки, которые отличаются от соответствующих точек предыдущего слоя, изменяя размер слоя на минимально возможный.

−все неизменившиеся точки внутри просматриваемого слоя заменить на

прозрачные.

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

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

Алгоритм создания анимации с использованием анимационных шабло-

нов в редакторе растровой графики GIMP следующий:

1.Создать графическую композицию, на основе которой будет создаваться гиф-анимация.

2.Примените к выбранному слою один из анимационных шаблонов, который находится в группе Анимация пункта меню Фильтры

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

a.общие свойства анимации;

b.длительность проигрывания;

c.задержка между кадрами анимации

d.расположение кадров анимации.

4

Алгоритм создания анимации вручную в редакторе растровой графики

GIMP следующий:

1.необходимо каждый элемент будущей анимации расположить на отдельном слое;

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

a.длительность проигрывания;

b.задержка между кадрами анимации

c.расположение кадров анимации.

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

4.применить фильтр Оптимизация (для GIF) из группы Анимация пункта меню Файл.

Примеры.

Пример 1. Создайте плоскую круглую кнопку.

1.Запускаем редактор GIMP.

2.Переходим в пункт меню Файл, выбираем команду Создать и из раскрывающегося списка выбираем Кнопки → Круглая кнопка.

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

5

3.В открывшемся диалоговом окне указываем необходимые параметры:

•В поле Текст – название, которое будет отображаться на кнопке;

•Для текстовой надписи далее указываем тип и размер шрифта в соответствующих полях.

•Цвет кнопки в ее различных состояниях.

•Цвет текста в различных состояниях кнопки.

•Сами состояния кнопки: не нажатая, не нажатая (активная), нажатая.

Рисунок 2.

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

Рисунок 3.

6

Пример 2. Создайте анимированную надпись слова Москва на про-

зрачном фоне.

1.Создайте новое изображение размером 100 × 50 рх.

2.Сделайте фоновый слой активным, для этого двойным щелчком снимите у слоя блокировку на редактирование и сделайте его прозрачным, задав параметр Непрозрачность, равным 0%.

Рисунок 4.

3.Используя инструмент Текст, создайте текстовую надпись со словом Москва.

4.Продублируйте слой с текстовой надписью столько, сколько букв в слове Москва (всего должно получиться 6 текстовых слоев).

5.Отредактируйте каждый текстовый слой следующим образом:

a.На первом текстовом слое удалите все буквы за исключением буквы М

b.На каждом из редактируемых слоев должно отображаться на одну букву больше по сравнению с предыдущим слоем.

7

Рисунок 5.

6.В результате проделанных манипуляций со слоями, получится шесть слоев, один из которых – фон, а пять других представляют собой побуквенно распределенное по слоям слово Москва. Следующий этап в создании гиф-анимации – это сохранение полученного изображения в формате GIF. Для этого в пункте меню Файл выберите команду Экспортировать как, чтобы экспортировать полученное изображение в формат GIF, в открывшемся одноименном диалоговом окне из раскрывающегося списка выбрать соответствующий формат файла – GIF, и затем в открывшемся окне настроек формата GIF установить необходимые параметры экспорта, при этом следует выбрать один из параметров отображения слоев в итоговом гифизображении: объединить слои в одно изображение или сохранить как анимацию. Так как наша задача – создать анимированную текстовую надпись, то устанавливаем галочку напротив параметра Со-

хранить как анимацию.

7.Задайте параметры анимации.

8

Рисунок 6.

Первые два параметра задают общие свойства формата GIF – это через-

строчность и комментарий.

1.Черезстрочность – этот параметр используется в том случае, если планируется использование этого изображения на сайте, его назначение – постепенно загружать изображение при открытии страницы сайта.

2.Комментарий – этот параметр используется в том случае, если у пользователя браузер не поддерживает графику или в силу каких-либо иных причие она отключена, тогда на месте гиф-изображения будет отображаться пустой фрейм с пояснениями (комментариями), однако, есть нюанс – в данном параметре можно использовать символы с кодировкой

ASCII, 8 bit.

3.Бесконечный цикл. Как следует из названия данного параметра, при его использовании гиф-анимация будет проигрываться на сайте бесконечное число раз, пока пользователь не выключит ее принудительно.

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

5.Расположение кадра – параметр, который определяет как кадры будут накладываться друг на друга при воспроизведении гиф-анимации. Имеет три режима:

9

•первый (по умолчанию) –Не важно (I Don`t Care) – используется в гиф-анимации в том случае, если в структуре композиции нет прозрачных слоев, так как при проигрывании анимации каждый последующий слой будет накладываться на предыдущий, тем самым скрывая его.

•второй режим – Наложение слоев (Combine) – используется в гиф-анимации в том случае, если в структуре композиции есть прозрачные слои, так как при проигрывании анимации каждый последующий слой будет накладываться на предыдущий, тем самым постепенно прорисовывая графическую композицию.

•третий режим – Один кадр на слой (Replace) – замещает предыдущий слой новым.

8.Установите для параметра Расположение слоев значение по наложение слоев, а время задержки между кадрами установите равным 200 миллисекунд (мс), после чего нажмите кнопку Экспорт.

9.Откройте это изображение с помощью GIMP. На панели слоев отобразится структура гиф-анимации, а в названии каждого слоя в скобках появится параметр, показывающий время воспроизведения этого слоя.

Рисунок 7.

10.Примените фильтр Оптимизация из группы фильтров Анимация пункта меню Фильтры. Результат применения фильтра Оптимизация показан на рисунке 8.

10