Опубликован: 27.07.2006 | Уровень: для всех | Доступ: платный
Лекция 3:

Графика на компьютере

Функции меню

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

Нажатие правой клавиши мыши на любом из слоев в окне Диалог слоев приводит к появлению всплывающего меню.


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

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

Следующая группа пунктов меню позволяет производить изменения размеров слоя.

Размер границы слоя ("Слой Boundary Size") позволяет уменьшить или увеличить размер слоя, не затрагивая размер изображения, что полезно, например, в случае, когда размер изображения в слое намного меньше самого слоя.

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

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

Третья группа пунктов меню производит объединениe слоев.

Объединить видимые слои - объединяет все видимые слои, при этом предоставляет выбор нескольких вариантов размера объединенного слоя.

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

Свести изображение - объединяет все слои в один, не отображая при этом скрытые слои.

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

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

Альфа-канал -> выделенная область - создает контур выделения по прозрачным участкам изображения.


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

Правка атрибутов слоя позволяет изменить имя слоя.

Понятие маски слоя

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

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

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

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

Маска бывает трех типов: Белая (непрозрачная), Черная (прозрачная) и Альфа-канал слоя. Последний пункт означает, что мы получим маску слоя, в которой черный цвет будет соответствовать прозрачным местам изображения, а белый - непрозрачным. В данном примере нам нужна белая маска.

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

Нужно лишь щелкнуть мышкой на ее изображение в списке слоев. Скопируем ( Ctrl-c ) второе изображение и вставим ( Ctrl-v ) его в маску первого. Для большей наглядности поместим под первый слой заливку под дерево.

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

Рассмотрим остальные пункты меню для работы с масками.

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

Удалить маску слоя - удаляет маску слоя.

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

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

Слои, каналы, контуры - открывает диалог слоев.

Вращение - позволяет врящать слой относительно остальных.

Центрировать слой - помещает слой по центру изображения.

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

Анимация в GIMP

Анимационные изображения в формате GIF встречаются в сети Интернет повсеместно. Баннеры, кнопки, логотипы, - все они, используя даже простейшую анимацию, вносят в содержание HTML-страницы некую динамику.

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

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

Итак, для создания анимационного gif нужно иметь несколько слоев изображения. Рассмотрим простейший пример. Создадим новое изображение. Самый нижний слой оставим белым. На других четырех нарисуем появляющиеся буквы слова GIMP.

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


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

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


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

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

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

Расположение кадра - имеет три режима. Первый (по умолчанию) - I Don`t Care (мне все равно) - позволяет GIMP распорядиться самостоятельно. Второй режим - Combine (наложение слоев) - последовательно накладывает один слой на другой. Таким образом, если у вас есть прозрачные места в слоях, предыдущие слои будут сквозь них проглядывать. По умолчанию GIMP обычно использует именно этот режим, как наиболее гибкий. Третий режим - Replace (один кадр на слой) - замещает предыдущий слой на новый.

Используем в рассматриваемом примере расположение слоев по умолчанию, а время между кадрами установим равным 200 миллисекунд (мс).

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

Редактируя наименование слоя, можно задать каждому слою свое персональное время отображения (в мс). Если для последнего слоя установить значение равное 500 мс, то полная надпись будет оставаться на экране подольше.

Это был самый простой пример создания анимационного изображения. Но всегда хочется большего! Настало время обратиться к пункту Анимация из меню Фильтры. В нем содержится три подпункта - Воспроизведение, Оптимизация и Разоптимизация.

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


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

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

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

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


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

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

Пункт Разоптимизация производит обратное действие.

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

  1. Каждый кадр анимации представляет собой отдельный слой изображения.
  2. Каждый кадр имеет два параметра: время показа в микросекундах и его тип, combine (объединение) или replace (замещение). Параметры задаются в имени слоя и заключаются в скобки, например: Слой1 (1000ms)(combine).
  3. Оптимизация слоев позволяет заметно уменьшить размеры анимационного изображения.

Задание

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

Дмитрий Фаттахов
Дмитрий Фаттахов
Виктория Бельгесова
Виктория Бельгесова

Добрый день. Как получить удостоверение о прохождении данного курса?

Николай Серков
Николай Серков
Россия, г. Санкт-Петербург
Елена Сочнева
Елена Сочнева
Россия