42239

Создание анимационных изображений в Adobe Photoshop

Лабораторная работа

Информатика, кибернетика и программирование

На панели этого инструмента можно задать следующие опции: вид гарнитуру шрифта – ; стиль шрифта Regulr – обычный Itlic – курсив Bold – жирный Bold Itlic – жирный курсив – ; размер шрифта в пунктах – ; режим сглаживания для границ символов – ; режим выравнивания – выравнивание влево по центру или вправо; цвет текста – при щелчке по этому прямоугольнику открывается окно Палитра цветов в котором можно задать цвет текста ; деформация текста вывод текста по заданной кривой – ; включение выключение палитры символов...

Русский

2013-10-27

781.5 KB

8 чел.

36

 36 -

 

Лабораторная работа 2-03

Создание анимационных изображений в Adobe Photoshop  

1. Цель работы

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

2. Состав рабочего места

2.1. Оборудование: IBM-совместимый   персональный компьютер (ПК).

2.2. Программное обеспечение: операционная система Windows, Web-браузер Internet Explorer версии 6.0 и выше, графический редактор Adobe Photoshop версии CS2 и выше.

3. Краткие теоретические сведения

3.1. Графический редактор ImageReady

Графический редактор ImageReady, который является компонентом Photoshop, наряду с основными инструментами рисования, выбора и коррекции, содержит также набор средств, ориентированных на использование в Web-страницах, в том числе средства для оптимизации и предварительного просмотра изображений, совместной обработки изображений и создания анимационных изображений в формате GIF.

Запуск Photoshop выполняется с помощью значка , либо (при работе в Photoshop) с помощью значка на панели инструментов Photoshop.

3.2. Панель инструментов ImageReady

Панель инструментов редактора ImageReady представлена на рис. 3.1.

Рис. 3.1. Инструментальная панель ImageReady 

3.2.1. Инструменты работы с изображением

3.2.1.1. Инструменты группы Кисть

Инструменты группы Кисть (Paintbrush) в ImageReady представлены на рис. 3.2.

Инструменты группы Кисть (рис. 3.2) позволяют рисовать изображение (инструменты Кисть и Карандаш), корректировать изображение (инструмент Штамп) и выполнять заливку слоя или выделенного фрагмента заданным цветом (инструмент Заливка).

Рис. 3.2. Инструменты группы Кисть

Инструмент Кисть (Paintbrush) предназначен для нанесения мягких мазков и имитирует кисть художника, а инструмент Карандаш (Pencil) позволяет пользователю рисовать произвольные линии с жесткими границами. Для рисования прямых линий необходимо выполнять рисование при  нажатой клавише Shift. На панели этих инструментов можно задать размер и форму кисти или карандаша, режим рисования, степень непрозрачности (плотность покрытия рисуемой области) и, для инструмента Карандаш (Pencil), режим автостирания (рисования цветом фона для областей, содержащих цвет переднего плана).

Инструмент Штамп (Stamp), предоставляет возможность создавать точные копии элементов графического изображения и цветовых образцов или модифицировать их в том же изображении, либо в другом документе.

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

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

Инструмент Заливка (Paint Bucket) позволяет заполнить  замкнутую фигуру или выделенную область цветом переднего плана. Для этого инструмента можно выбрать режим смешивания, степень непрозрачности заливки, допуск (диапазон похожих друг на друга заливаемых цветов), режим сглаживания, режим заливки смежных пикселей, режим заливки смешанным цветом всех видимых слоев (переключатель Все слои).

3.2.1.2. Инструменты группы Фигура

Инструменты группы Фигура (Shape) представлены на рис. 3.3.

Рис. 3.3. Инструменты группы Фигура

Инструменты из этой группы позволяют нарисовать соответствующую фигуру: прямоугольник, прямоугольник со скругленными углами и эллипс. На панелях этих инструментов задаются следующие общие элементы:  – выбор одного из двух режимов: рисование фигуры в отдельном слое или рисование фигуры с заполнением цветом переднего плана; режим задания ширины и высоты фигуры (переключатель Размер); поля ширины и высоты фигуры (заполняются при включенном переключателе Размер); стиль фигуры (выбирается из раскрывающегося меню); режим смешивания и степень непрозрачности.

Кроме этого, для прямоугольника со скругленными углами можно задать радиус закругления (поле Радиус).

3.2.1.3. Инструменты группы Фигура 1

Инструменты группы Фигура 1 (Shape 1) представлены на рис. 3.4.

Рис. 3.4. Инструменты группы Фигура 1

Инструмент Закладка (Tab Rectangle) позволяют нарисовать  прямоугольник с двумя скругленными  верхними углами, а инструмент Контурный прямоугольник (Pill Rectangle) – прямоугольник со всеми скругленными  углами, по форме напоминающий таблетку (pill). На панелях этих инструментов задаются следующие общие элементы:  – выбор одного из двух режимов: рисование фигуры в отдельном слое или рисование фигуры с заполнением цветом переднего плана; режим задания ширины и высоты фигуры (переключатель Размер); поля ширины и высоты фигуры (заполняются при включенном переключателе Размер); стиль фигуры (выбирается из раскрывающегося меню); режим смешивания и степень непрозрачности.

Кроме этого, для Инструмент Закладка (Tab Rectangle) можно задать радиус закругления (поле Радиус).

3.2.1.4. Инструмент Прямая линия

Инструмент  Прямая линия (Line) позволяет нарисовать прямую линию. Если при рисовании линии удерживать нажатой клавишу Alt, то можно нарисовать горизонтальную линию, вертикальную линию или линию, наклоненную под углом 45°.

На панели этого инструмента задаются следующие элементы:  – выбор одного из двух режимов: рисование фигуры в отдельном слое или рисование фигуры с заполнением цветом переднего плана; задание рисования стрелок в начале и/или в конце линии (диалоговое окно, которое появляется при нажатии кнопки Форма, позволяет задать форму стрелки;  стиль фигуры (выбирается из раскрывающегося меню); режим смешивания и степень непрозрачности.

3.2.1.5. Инструменты группы Область

Инструменты группы Область в ImageReady приведены на рис. 3.5.

Рис. 3.5. Инструменты группы Область

Первые три инструмента Прямоугольная область (Rectangular Marquee), Прямоугольная область со скругленными углами (Rounded Rectangular Marquee) и (Elliptical Marquee) выделяют соответственно прямоугольную область, прямоугольную область со скругленными углами и овал (Elliptical Marquee) (при нажатой клавише Shift – круг). Следующие два инструмента – Область (горизонтальная строка) (Single Row Marquee) и Область (вертикальная строка) (Single Column Marquee) определяют выделенную область как горизонтальную или вертикальную строку толщиной в один пиксель, проходящую по всей ширине или высоте рисунка.

Для инструментов Прямоугольная область, Прямоугольная область со скругленными углами и Овальная область в панели опций активного инструмента можно задать опции выделения (рис. 3.6), а также растушевку, включение или выключение сглаживания и алгоритм выделения:

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

Рис. 3.6. Опции выделения: 1) новая выделенная область; 2) добавление к выделенной области; 3) вычитание из выделенной области; 4) пересечение с выделенной областью

Для инструмента Прямоугольная область со скругленными углами на его панели дополнительно задается радиус закругления (поле Радиус).

Для того чтобы выделить сложный объект, состоящий из некоторого количества прямоугольников и овалов, достаточно воспользоваться поочередно соответствующими инструментами, удерживая при этом клавишу Shift. Это так называемый режим присоединения. Курсор мыши при этом приобретает вид перекрестия с плюсом. При нажатой клавише Alt работает режим высечения, курсор мыши при этом выглядит как перекрестие с минусом.

Для инструментов  Область (горизонтальная строка) (Single Row Marquee) и Область (вертикальная строка) (Single Column Marquee) на их панели задаются опции выделения (рис. 3.6) и величина растушевки.

Инструмент  Лассо (Lasso) позволяет производить выделение от руки, рисуя его, а инструмент Прямолинейное лассо (Polygonal Lasso) – выделение границы как многоугольника, задавая его вершины.  Чтобы замкнуть границу выделения, достаточно подвести курсор мыши к начальной точке выделения и, когда курсор мыши изменит свои вид, отпустить кнопку мыши. Для этих двух инструментов на их панели можно задать опции выделения (рис. 3.4), а также растушевку и сглаживание.

Инструмент Волшебная палочка (Magic Wand) позволяет выделять фрагменты изображения, основываясь на подобии цветов смежных пикселей; т.е. позволяет выделить изображение по его контуру, что в некоторых случаях избавляет от необходимости кропотливого ручного предварительного очерчивания границ выделяемых областей с помощью другого инструмента выделения. Для этого инструмента можно задать опции выделения (рис. 3.6), допуск на подобие или отличие соседних пикселей при выделении, учет сглаживания и смежных пикселей, а также возможность выделения фрагмента для всех слоев.

3.2.1.6. Инструмент Рамка

Инструмент  Рамка (Crop) создает прямоугольную область с фиксированными вершинами и отмеченным центром, относительно которых в дальнейшем можно производить точные настройки размера и ориентации. При двойном щелчке мышью по выделенной области или выборе пункта Кадрировать в контекстном меню выделенный кадр вырезается из изображения. На панели этого инструмента можно задать (при включенном переключателе Размер) ширину (Ш или W) и высоту (В или H) выделенной области, а также с помощью кнопки Образец выделить область размером во все изображение. Кроме этого, на панели задается режим вывода отсеченной области (удалить или скрыть), установить режим вывода экрана для отсеченной области, а также цвет и прозрачность для отсеченной области. Инструменты   позволяют соответственно отменить или выполнить операцию отрезания.

3.2.1.7. Инструмент Перемещение

Инструмент  Перемещение (Move) выполняет перемещение выделенной области (объекта или слоя) при нажатой левой клавише мыши. На панели этого инструмента можно выбрать один из трех инструментов: Перемещение, Выбор слоя или Стрелка, а также задать режим вывода элементов преобразования на границах перемещаемого фрагмента (переключатель Показывать ограничительную рамку). С помощью инструмента можно также выравнивать предварительно выделенные фрагменты изображения относительно выделенных слоев (рис. 3.7).

Рис. 3.7. Опции выравнивания выделенного фрагмента для инструмента Перемещение: 1) выравнивание по верхнему краю; 2) выравнивание центров по вертикали; 3) выравнивание по нижнему краю; 4) выравнивание по левому краю; 5) выравнивание центров по горизонтали; 6) выравнивание по правому краю

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

Рис. 3.8. Опции выравнивания слоев для инструмента Перемещение: 1) распределение верхних краев; 2) распределение центров по вертикали; 3) распределение нижних краев; 4) распределение левых краев; 5) распределение центров по горизонтали;

6) распределение правых краев

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

3.2.1.8. Инструмент Рука

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

3.2.1.9. Вывод и задание цвета переднего плана и цвета фона

Индикатор цвета переднего плана и цвета фона (рис. 3.9)  (Foreground Color/Background Color) показывает текущие цвета, выбранные для применения в качестве цветов фона и переднего плана.

Рис. 3.9. Индикатор цвета переднего плана и цвета фона

Левый верхний квадрат показывает цвет переднего плана, а правый нижний квадрат – цвет фона. Щелчок мышью на любом квадрате открывает диалоговое окно Палитра цветов (Color Picker), где можно выбрать новый цвет переднего плана или фона, используя либо аппаратно-зависимую модель RGB, либо перцепционную модель HSB. Переключатель Только Web-цвета в диалоговом окне включает/выключает вывод только цветов, определенных в спецификации HTML.

В индикатор входят два дополнительных значка:

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

3.2.1.10. Инструмент Пипетка

Инструмент  Пипетка (Eyedropper) позволяет скопировать цвет фрагмента изображения. Размер фрагмента задается на панели инструмента в поле Размер образца и может иметь одно из следующих значений: Точка (один пиксель), Среднее 33 (усредненный цвет для области 3 на 3 пикселя) и Среднее 55 (усредненный цвет для области 5 на 5 пикселей). При включенном переключателе Привязать к Web-цветам копируются цвета, которые входят в список цветов, определенных в спецификации HTML.  

Скопированный (при щелчке мышью по точке или области изображения) цвет автоматически становится цветом переднего плана на индикаторе цветов переднего плана и фона. Для изменения цвета фона щелчок мышью выполняется при нажатой клавише Alt.

3.2.1.11. Инструменты группы Ластик

Инструменты группы Ластик (Eraser) представлены на рис. 3.10.

Рис. 3.10. Инструменты группы Ластик

Инструмент Ластик (Eraser) заменяет цвета на рисунке либо на цвет фона,  либо делает их прозрачными. На панели этого инструмента выбирается один из четырех режимов работы: Кисть, Карандаш, Аэрограф или Блок. Для режимов Кисть, Карандаш и Аэрограф можно задать размер и форму ластика. Кроме того, для всех режимов  может быть задана степень непрозрачности для стирания.

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

3.2.1.12. Инструмент Масштаб

Инструмент  Масштаб (Zoom) позволяет увеличить или уменьшить изображение. На панели этого инструмента можно задать режим увеличения () или уменьшения (), режим настройки размера окон при увеличении или уменьшении (переключатель Настраивать размер окон). Кнопка Реальный размер задает масштаб 1:1, а кнопка Во весь экран масштабирует окно по размеру экрана.

3.2.1.13. Режимы просмотра изображения

В ImageReady можно задать один из трех режимов просмотра изображения:

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

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

3.2.1.14. Переход в Photoshop

Кнопка  Редактировать в Photoshop выполняет переход в Photoshop и дает возможность одновременно работать с изображением и в Photoshop, и в ImageReady).  

3.2.2. Вставка текста

Вставка текста в изображение выполняется с помощью инструмента  Текст (Type).

На панели этого инструмента можно задать следующие опции:

  •  вид (гарнитуру) шрифта – ;
  •  стиль шрифта (Regular – обычный, Italic – курсив, Bold – жирный, Bold Italic – жирный курсив) – ;
  •  размер шрифта (в пунктах) – ;
  •  режим сглаживания для границ символов – ;
  •  режим выравнивания – (выравнивание влево, по центру или вправо);
  •  цвет текста – (при щелчке по этому прямоугольнику открывается окно Палитра цветов, в котором можно задать цвет текста) ;
  •  деформация текста (вывод текста по заданной кривой) – ;
  •  включение/выключение палитры символов и абзацев (см. ниже) – .

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

Если необходимо отредактировать уже набранный текст, надо снова выбрать инструмент Текст (Type), с помощью которого производился набор текста, а затем щелкнуть мышью над текстом. Набранный или редактируемый текст можно перетащить в другое место изображения с помощью инструмента Перемещение.

3.2.3. Работа с фрагментами изображения

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

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

В Photoshop определены два типа фрагментов: фрагменты на основе слоев (layer-based slices) и пользовательские фрагменты (user slices). Кроме того, для тех участков изображения, которые не стали фрагментами, создаются автоматические фрагменты (auto slices). Пересекающие участки нескольких фрагментов образуют фрагменты фрагментов (subslices). Границы фрагментов на основе слоев и пользовательских фрагментов обозначаются непрерывной линией, а границы автоматических фрагментов – штриховой линией.

3.2.3.1. Создание фрагментов

Фрагмент для выделенного слоя в палитре Слои (Layers) создается (в Photoshop и ImageReady) с помощью пункта Новый фрагмент из слоя (New Layer Based Slice) меню Слой (Layer).

Для создания пользовательских фрагментов используется инструмент  Раскройка (Slice). Этот инструмент есть и в Photoshop и в ImageReadyPhotoshop он, вместе с инструментом Выделение фрагмента, образует группу). Каждому фрагменту (в том числе и перекрывающему фрагменту) автоматически присваивается номер.

На панели инструмента Раскройка (Slice) задается один из трех режимов раскройки: Нормальный режим,  в котором фрагменты просто рисуются на изображении; Заданные пропорции, при котором изображение рисуется с заданным отношением между шириной и высотой и Заданный размер для рисования фрагмента заданного размера. Для последних двух режимов в полях Ширина и Высота задаются соответственно пропорция между шириной и высотой, либо ширина и высота фрагмента (в пикселях).

В ImageReady пользовательский фрагмент можно создать также из участка изображения, полученного с помощью одного из инструментов выделения.  Эта операция выполняется с  помощью пункта Создать фрагмент из выделенной области (Create Slice From Selection) меню Выделение (Select).

3.2.3.2. Выделение фрагментов

Инструмент  Выделение фрагмента (Slice Select) (в Photoshop и в ImageReady) позволяет выделить один или несколько фрагментов изображения для выполнения над ними различных операций: перемещения, масштабирования, деления, слияния и т.д.

На панели этого инструмента содержатся следующие параметры:

  •    – изменение порядка перекрывающихся фрагментов: на передний план, переложить вперед, переложить назад, на задний план (по умолчанию перекрывающиеся фрагменты располагаются в вертикальной плоскости снизу вверх, т.е. последний созданный фрагмент является самым верхним);
  •  кнопка В пользовательский (Promote) – преобразование автоматического фрагмента в пользовательский фрагмент (в Photoshop), в ImageReady эта операция выполняется с помощью пункта Преобразовать в пользовательские фрагменты (Promote To User-slices) меню Фрагменты (Slices);
  •  кнопка Разделить фрагмент (Divide Slice) – разделение выделенного фрагмента или фрагментов горизонтально, вертикально или в обоих направлениях (в Photoshop), в ImageReady эта операция выполняется с помощью пункта Разделить фрагмент (Divide Slice) меню Фрагменты (Slices);
  •  опции выравнивания выделенного фрагмента: по верхнему краю, центров по вертикали,  по нижнему краю, по левому краю, центров по горизонтали,  по правому краю (рис.3.7);
  •  опции распределения краев фрагмента: верхних краев, центров по вертикали,  нижних краев, левых краев, центров по горизонтали,  правых краев (рис. 3.8);
  •  значок для вывода на экран палитры Фрагмент (Slice) (в ImageReady);
  •  кнопка Спрятать автоматические фрагменты/Показать автоматические фрагменты (Hide Auto Slices/Show Auto Slices) – делает видимыми или невидимыми автоматические фрагменты.

3.2.3.3. Операции над фрагментами

Отменить вывод фрагментов на дисплей или показывать фрагменты изображения в ImageReady можно с помощью инструмента .

Для выделения фрагмента нужно щелкнуть по нему мышью. Для добавления к выделенному фрагменту новых фрагментов надо щелкнуть по ним мышью при нажатой клавише Shift.

Для связывания фрагментов между собой надо выбрать пункт Связать фрагменты для оптимизации (Link Slices For Optimization) в меню Фрагменты (Slices), а для отмены связывания фрагментов – пункт Отменить связь между фрагментами (Unlink Slices) в меню Фрагменты (Slices). К связанным фрагментам можно применять одинаковые параметры оптимизации.

Вырезание и копирование фрагментов (в ImageReady) выполняется с помощью пунктов Вырезать фрагмент (Move Slice) и  Копировать фрагмент (Copy Slice) меню Редактирование (Edit),  а вставка – с помощью пункта Вклеить (Paste) меню Редактирование (Edit). Для удаления выделенного фрагмента или фрагмента надо нажать на клавишу Del (Delete) или Backspace ().

Сохранить выделенный сегмент или сегментыImageReady) можно с помощью пункта Сохранить выделение фрагмента (Save Slice Selection) меню Фрагменты (Slices). Загрузить сохраненные фрагменты можно с помощью пункта Загрузить выделение фрагмента (Load Slice Selection) меню Фрагменты (Slices).

Для создания набора из выделенного фрагмента или фрагментов (в ImageReady) используется пункт Новый набор фрагментов (New Slice Set) меню Фрагменты (Slices).

Фрагмент изображения можно перетащить на новую позицию. Для изменения размеров фрагмента нужно просто перетащить его границу или угол.

Для формирования из выделенных фрагментов таблицы HTMLImageReady) надо выбрать пункт Сгруппировать фрагменты в таблицу (Group Slices Into Table) меню   Фрагменты (Slices).

Предварительно просмотреть полученные фрагменты в Web-браузере можно с помощью инструмента Просмотр в браузере (рис. 3.11).

Рис. 3.11. Инструмент Просмотр в браузере

Сохранить созданную Web-страницу с таблицей можно с помощью пункта Сохранить оптимизированный (Save Optimized) или Сохранить оптимизированный как (Save Optimized As) меню Файл (File).

3.2.4. Работа с картами ссылок

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

3.2.4.1. Создание карты ссылок

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

Рис. 3.12. Инструменты для создания карт ссылок

   

Инструмент Прямоугольная карта ссылок (Rectangle Image Map) задает прямоугольный участок. Этот участок создается с помощью перетаскивания мыши над изображением. При нажатой клавише Shift участок будет иметь форму квадрата, а при нажатой клавише Alt прямоугольник будет рисоваться из центра. Для задания прямоугольника определенного размера надо на панели инструмента включить переключатель Заданный размер и задать в полях Ширина и Высота величины для ширины и высоты прямоугольника.

Инструмент Круглая карта ссылок (Circle Image Map) задает участок в виде круга. Этот участок также создается с помощью перетаскивания мыши над изображением. При нажатой клавише Alt круг будет рисоваться из центра. Для задания прямоугольника определенного размера надо на панели инструмента включить переключатель Заданный размер и задать в поле Радиус величину радиуса круга.

Инструмент Многоугольная карта ссылок (Polygon Image Map) задает участок в виде многоугольника с помощью щелчков мыши в углах создаваемого многоугольника. Чтобы замкнуть фигуру (соединить первую точку многоугольника с последней) надо либо дважды щелкнуть по последней точки фигуры, либо щелкнуть по первой точке (при этом рядом с точкой появляется маленький кружок). Этот инструмент не имеет параметров.

3.2.4.2. Вывод и изменение фигуры для карты ссылок

Чтобы включить или выключить вывод контуров карт ссылок на изображении, необходимо использовать значок на панели инструментов.

Для перемещения или изменения размеров фигуры, используемой в карте ссылок, надо выбрать инструмент  Выделение фрагмента (Image Map Select), а затем щелкнуть мышью по фигуре, которую надо переместить или изменить. Чтобы переместить фигуру, надо просто перетащить ее мышью. Для изменения размеров прямоугольника или круга надо перетащить их границы или углы, а для изменения многоугольника – перетащить его углы.    

3.3. Палитры ImageReady

По умолчанию палитры ImageReady, так же, как и палитры Photoshop, объединены в группы. Для управления отображением палитр на экране необходимо обратиться к меню Окно (Window), где надо выбрать имя соответствующей  палитры. Переключение между палитрами группы производится с помощью щелчка по вкладке группы. Черный треугольник в правом верхнем углу означает, что в палитре имеется меню. Для вызова этого меню следует указать мышью на черный треугольник. Любую палитру можно поместить в контейнер панели активных инструментов (в правой части панели) с помощью пункта Поместить в контейнер панели параметров в меню палитры.

3.3.1. Палитры группы Инфо

3.3.1.1. Палитра Инфо

Палитра Инфо (Info) (рис. 3.13) отображает информацию о характеристиках точки, над которой находится курсор мыши.

Рис. 3.13. Палитра Инфо

Для этой точки выводятся следующие характеристики:

  •  компоненты цвета в модели RGB (поля R, G и B);
  •  значение непрозрачности (поле Нп);
  •  шестнадцатеричное значение цвета в модели RGB (поле Шестнадцатеричный);
  •  индекс цвета в цветовой таблице в палитре Образцы (Swatches);
  •  координаты точки (поля X и Y);
  •  ширина и высота выделенной области (поля Ш и В) при использовании инструментов Рамка (Crop),  Раскройка (Slice) или Масштаб (Zoom), а также инструментов для рисования фигур;
  •  процентное изменение ширины и высоты выделенной области (поля Ш и В), угол вращения поле У), угол горизонтального или вертикального наклона  (поля Г и В) при использовании пунктов Свободное трансформирование (Free Transform) или Трансформирование (Transform) меню Редактирование (Edit).  

3.3.1.2. Палитра Оптимизация

Создание небольших графических файлов является важной проблемой в Web, поскольку, чем меньше файл, тем быстрее он передается по сети и тем быстрее он загружается на Web-браузер.  Палитра Оптимизация (Optimize) (рис. 3.14) предоставляет эффективные средства оптимизации качества изображения для использования в Web.  

Рис. 3.14. Палитра Оптимизация

Палитра Оптимизация (Optimize) позволяет установить следующие характеристики изображения:

  •  формат графического файла для Web: GIF, JPEG, PNG-8, PNG-24 или WBMP (черно-белый формат для мобильных телефонов);
  •  используемую таблицу цветов (значок позволяет использовать канал для изменения редукции цвета, а значок открывает палитру Таблица цветов);
  •  параметры сглаживания (дизеринга);
  •  параметры прозрачности;
  •  параметры, специфичные для заданного графического формата.

 

Значок создает небольшое приложение, в котором сохраняются заданные настройки оптимизации, например:

Если перетащить мышью значок рисунка (например Var2-1.png) на значок Создать PNG-8.exe, то рисунок будет преобразован в соответствии с параметрами настройки, заданными в приложении, называемом дроплетом (в данном случае Создать PNG-8.exe).

3.3.1.3. Палитра Композиции слоев

Палитра Композиции слоев (Layer Comps) позволяет создать несколько вариантов (композиций) одного изображения. Так, на рис. 3.15 показаны 4 варианта одного изображения, сохраненные в палитре Композиции слоев (Layer Comps).

Рис. 3.15. Варианты изображения в палитре Композиции слоев

Композиция является фиксацией текущего состояния палитры Слои (Layers). Создание новой композиции выполняется либо при нажатии кнопки в нижней части палитры, либо при выборе пункта меню Новая композиция слоев (New Layer Comp) в меню палитры. При создании композиции фиксируются три типа параметров слоя: видимость, позиция в изображении, а также стиль и режим смешивания.

Чтобы просмотреть композиции надо сначала выделить одну из композиций, щелкнув по ней мышью, либо выбрать для композиции пункт Применить композицию слоев (Apply Layer Comp) в контекстном меню композиции или меню палитры (при этом слева от имени композиции появится  значок ). С помощью кнопки    в нижней части палитры или пункта меню Предыдущая  композиция слоев (Previous Layer Comp) в меню палитры можно просмотреть предыдущую композицию, а с помощью кнопки    в нижней части палитры или пункта меню Следующая  композиция слоев (Next Layer Comp) в меню палитры можно просмотреть следующую композицию. Для восстановления изображения в то состояние, в котором оно было перед просмотром слоев, надо щелкнуть мышью по области Последнее состояние документа (Last Document State) на палитре.

Для изменения композиции надо сначала выделить композицию на палитре, выполнить изменения в изображении, а затем нажать кнопку в нижней части палитры, либо выбрать пункт меню Обновить композицию слоев (Update Layer Comp) в контекстном меню композиции или меню палитры. Для модификации параметров композиции надо выбрать пункт Параметры композиции слоев (Layer Comp Options)  в контекстном меню композиции или меню палитры и в диалоговом окне внести изменения.

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

3.3.2. Палитры группы Цвет

3.3.2.1. Палитра Цвет

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

Рис. 3.16. Палитра Цвет

Цветовая модель (RGB, HSB, CMYK, Lab или цвета Web) задается в меню палитры. Цвета переднего и заднего плана выделены в палитре прямоугольными рамками и, в зависимости от того, какая рамка активна, выбранный цвет будет цветом переднего плана или фона. Вторая группа пунктов меню палитры позволяет задать цветовую модель для спектра, выводимого в нижней части палитры. Последний пункт меню позволяет сделать диапазон цветов безопасным для Web.

3.3.2.2. Палитра Образцы

Палитра Образцы (Swatches) (рис. 3.17) содержит  набор наиболее часто используемых цветов.

Рис. 3.17. Палитра Образцы 

Для задания цвета переднего плана достаточно щелкнуть по соответствующему квадратику цвета в палитре, а для задания цвета фона необходимо при щелчке нажать клавишу Ctrl.

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

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

3.3.2.3. Палитра Стили

Палитра Стили (Styles) (рис. 3.18) дает возможность задать заливку слоя или выделенного участка узорами, получаемыми с помощью использования одного или нескольких эффектов для слоя.

Рис. 3.18. Палитра Стили

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

Кнопка  в нижней части палитры позволяют создать новый стиль, а кнопки и – удалить стиль.

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

3.3.2.4. Палитра Таблица цветов

Палитра Таблица цветов (Color Table) (рис. 3.19) задает цветовую таблицу для заданного в панели Цвет (Color) цвета, что позволяет, в частности, выбирать оттенки этого цвета.

Рис. 3.19. Палитра Таблица цветов

Слева в нижней части палитры выводится текущее количество цветов в палитре.

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

Выделение всех цветов выполняется с помощью пункта Выделить все цвета (Select All Colors) меню палитры, выделение цветов Web – с помощью пункта Выделить все Web-цвета (Select All Web Colors), выделение всех цветов, кроме цветов  Web – с помощью пункта Выделить все цвета, кроме Web-цветов (Select All Colors Except Web Colors), выделение всех цветов из выделенной области  – с помощью пункта Выделить все цвета из выделенной области (Select All From Selection).

Значок в нижней части палитры закрепляет выделенные цвета, отменяя их удаление, или отменяет закрепление. Те же действия выполняют пункты Закрепить выделенные цвета (Lock Selected Colors) и Отменить закрепление всех цветов (Unlock Selected Colors) в меню палитры.

Значок в нижней части палитры включает замещение выделенных цветов цветами Web-палитры  или отменяет замещение. Те же действия выполняют пункты Заменить выделенные цвета на Web-цвета (Shift Selected Colors) и Отменить замену всех цветов Web-цветами (Unshift Selected Colors) в меню палитры.

Значок в нижней части палитры включает замещение выделенных цветов прозрачностью  или отменяет закрепление. Те же действия выполняют пункты Преобразовать выделенные цвета в прозрачные (Map Selected Colors To Transparent) и Отменить выделение всех прозрачных цветов (Unmap Selected Colors from Transparent) в меню палитры.

Перестройка таблицы цветов выполняется с помощью пункта Перестроить таблицу цветов (Rebuild Color Table) в меню палитры.

С помощью пунктов Сортировать по тону (Sort By Hue), Сортировать по светимости (Sort By Luminance) и Сортировать по частоте использования (Sort By Popularity) меню палитры можно отсортировать вывод цветов в палитре по заданному критерию. Пункт Без сортировки (Unsort) отменяет сортировку в таблице цветов.

Таблицу цветов для изображения можно сохранить для использования в других изображениях с помощью пункта Сохранить таблицу цветов (Save Color Table) меню палитры. Загрузка сохраненной таблицы выполняется с помощью пункта Загрузить таблицу цветов (Load Color Table) меню палитры.

Величину значков для цветов в таблице можно менять с помощью пунктов Маленькие образцы (Small Samples) и Большие образцы (Big Samples) в меню палитры.

3.3.3. Палитры группы Слои

3.3.3.1. Палитра Слои

Палитра Слои (Layers) (рис. 3.20) предназначена для работы со слоями в ImageReady.

Рис. 3.20. Палитра Слои

Работа со слоями и палитрой Слои (Layers) описана в лабораторной работе 2-01 в разделах 3.4.3.1-3.4.3.3, поэтому в этом разделе описываются только компоненты палитры в ImageReady, которые несколько отличаются от компонентов аналогичной палитры в Photoshop.

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

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

При реализации анимации или «наката» для сохранения применения изменений ко всем состояниям или кадрам необходимо использовать следующие кнопки: – для положения состояния или кадра,    – для видимости состояния или кадра и – для стилей состояния или кадра.   

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

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

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

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

3.3.3.2. Палитра История

Палитра История (History) (рис. 3.21) запоминает последние изменения, сделанные в изображении (по умолчанию до 20 значений).

Рис. 3.21. Палитра История 

Нажатие кнопки в нижней части палитры или выделение пункта меню палитры Отменить (Undo) позволяют вернуться на один шаг назад изменениям в изображении, а нажатие  кнопки в нижней части палитры или выделение пункта меню палитры Повторить (Redo) позволяют продвинуться на один шаг вперед по изменениям в изображении. Пункт Очистить отмены/повторы (Clear Undo/Redo) очищает содержимое палитры.

3.3.3.3. Палитра Операции

Операции с процедурами выполняются в ImageReady с помощью палитры Процедуры (Actions) (рис. 3.22).

Рис. 3.22. Палитра Процедуры

Создать новую операцию в наборе можно с помощью кнопки в нижней части палитры или пункта Новая операция (New Action) в меню палитры. После задания параметров операции каждая выполняемая команда начинает автоматически записываться в операцию. Пункты Записать повторно (Record Again), Вставить остановку (Insert Stop), Ввести условие (Insert Conditional), Вставить назначение выходной папки (Insert Set Output Folder) и Вставить параметры оптимизации (Insert Set Optimization Settings To) меню палитры управляют записью операции. Эти же действия можно выполнить с помощью одноименных пунктов раскрывающегося меню кнопки в нижней части палитры.

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

  •  перестановка команды с помощью операции перетаскивания;
  •  удаление выделенных команд с помощью кнопки в нижней части палитры или пункта Удалить (Delete) в меню палитры;
  •  добавление команды с помощью ее перетаскивания с палитры История (History);
  •  добавление команды или команд с помощью выделения команды, после которой будет вставлена новая команда и запись вставляемых команд.  

Создание дубликата (копии) выполняется с помощью пункта Создать дубликат (Duplicate), а удаление набора операции или отдельной операции – с помощью кнопки в нижней части палитры или пункта Удалить (Delete) в меню палитры. Чтобы переименовать операцию, надо дважды щелкнуть мышью по ее имени в палитре и затем ввести новое имя. Команда Просмотреть повторно (Repeat Browse) заново прокручивает все операции в палитре.

Запуск операции выполняется с помощью кнопки в нижней части палитры или пункта Воспроизведение (Play) в меню палитры. Можно также запустить операцию, начиная с заданной команды, выделив эту команду в операции, а затем запустить операцию. Для выполнения единственной команды операции надо щелкнуть по этой команде при нажатой клавише Ctrl. Если требуется пропустить команду при выполнении операции, перед запуском надо выключить переключатель слева от команды (при этом аналогичный переключатель перед операцией станет красного цвета – ). Если в операцию вставлены остановки, выполнение операции продолжается после повторного нажатия кнопки или выделения пункта  Воспроизведение (Play) в меню палитры.

Пункт Параметры операции (Action Options) меню палитры позволяет просмотреть или изменить параметры операции, а  пункт Параметры пакетной обработки  (Batch Options) задает параметры для одновременной (пакетной) обработки нескольких файлов.  

Пункты Сохранить операции (Save Actions) и Загрузить операции (Load Actions) соответственно сохраняют операции и выполняют загрузку сохраненных операций.  

Созданную операцию можно сохранить в виде приложения – дроплета  (файла с расширением .exe и значком ) с помощью пункта Создать дроплет (Create Droplet) меню палитры. Если перетащить значок изображения на значок дроплета, то над этим файлом будут выполнены все команды, заданные в операции. Редактирование дроплета выполняется аналогично редактированию операции в окне, которое выводится после выполнения пункта Открыть (Open) меню Файл (File) для дроплета.

3.3.4. Палитры работы с текстом

3.3.4.1. Палитра Символ

Палитра Символ (Character) (рис. 3.23) задает параметры шрифта для текста. Эта палитра может быть выведена как с помощью пункта Символ (Character) меню Окно (Windows), так и с помощью кнопки на панели текстового инструмента.   

Рис. 3.23. Палитра Символ

Раскрывающиеся меню и текстовые поля палитры позволяют задать следующие характеристики текста: гарнитуру (вид) шрифта; стиль (начертание): обычный (Regular), курсив (Italic), жирный (Bold) и жирный курсив (Bold Italic); размер шрифта, расстояние между строками (интерлиньяж); кернинг между символами (уменьшение или увеличение расстояния между некоторыми парами символов); увеличение или уменьшение расстояния между выделенными символами; масштаб (увеличение или уменьшение) текста по вертикали и горизонтали; смещение символа по вертикали вверх или вниз (позволяет задавать верхние и нижние индексы); цвет текста; язык текста; режим сглаживания.

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

Пункт меню палитры Изменить ориентацию текста (Change Text Orientation) меняет ориентацию текста на вертикальной на горизонтальную и обратно, а пункт меню Стандартная вертикальная ориентация (Standard Vertical Roman Alignment) возвращает горизонтальную ориентацию текста.

По умолчанию, расстояние между символами можно менять с использованием дробных долей пикселей. Чтобы расстояния между символами измерялись в пикселях, необходимо отключить пункт Дробная ширина (Fractional widths) в меню палитры, а для того, чтобы просмотреть текст так, как он выводится в операционной системе, в которой запущен Photoshop, необходимо включить пункт Системная конфигурация (System Layout) в меню палитры. Для того, чтобы исключить нежелательные разрывы слов необходимо включить пункт Не переносить (No Break) в меню палитры. Для восстановления измененных характеристик шрифта надо выбрать пункт меню Восстановить палитру "Символ" (Restore Character Palette).

3.3.4.2. Палитра Абзац

Палитра Абзац (Paragraph) (рис. 3.24) задает форматирование колонок и абзацев. Эта палитра может быть выведена как с помощью пункта Абзац (Paragraph) меню Окно (Windows), так и с помощью кнопки на панели текстового инструмента.

Рис. 3.24. Палитра Абзац

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

Пункт Висячая пунктуация романских шрифтов (Roman Hanging Punctuation) меню палитры включает или выключает вынос символов переноса, апострофов, тире и некоторых других символов за условную рамку, ограничивающую абзац.

Диалоговое окно пункта Выключка (Spacing) меню палитры позволяет задать минимальные, желательные и максимальные интервалы между буквами и словами, а также  минимальный, желательный и максимальный масштаб для глифа (изображения) символа и автоматическое расстояние между строками (автоинтерлиньяж), а диалоговое окно пункта Расстановка переносов (Hyphenation) меню палитры позволяет задать правила переноса слов в тексте.

Пункты Многострочный компоновщик Adobe (The Adobe Every-line Composer) и Однострочный компоновщик Adobe (The Adobe Single-line Composer) меню палитры позволяют либо включить компоновщик текста, учитывающий расположения текста в разных строках с целью уменьшения пробелов между словами и нежелательных переносов, либо выполнять компоновку текста отдельно в пределах каждой строки.

Для восстановления измененных характеристик абзаца надо выбрать пункт меню Восстановить палитру "Абзац" (Restore Paragraph Palette).

3.3.5. Палитры работы с Web

3.3.5.1. Палитра Фрагмент

Палитра Фрагмент (Slice) (рис. 3.25) предназначена для просмотра и установки параметров фрагментов изображения, выводимого как таблица в Web-странице.  

Рис. 3.25. Палитра Фрагмент

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

  •   – фрагмент является изображением;
  •   – фрагмент не является изображением (обычно это текстовый фрагмент);
  •   – фрагмент базируется на слое;
  •   – фрагмент связан с другим фрагментом;
  •   – фрагмент включает эффект «наката»;
  •   – фрагмент отображает активное состояние «наката»;
  •   – фрагмент является ячейкой вложенной таблицы;
  •   – фрагмент является удаленным переключателем;
  •   – фрагмент является удаленной мишенью (target).

Фрагмент может имеет один из трех типов: изображение, не изображение (обычно текстовый фрагмент) или таблица. Тип фрагмента задается в поле Тип (Type).

Другие параметры фрагмента, выводимые в палитре:

  •  имя фрагмента (генерируется автоматически из имени изображения и номера фрагмента, но может быть заменено другим именем);
  •  значение атрибута href в элементе a – имя Web-страницы, на которую выполняется переход при щелчке мышью по фрагменту (URLUniform Resource Locator – универсальный указатель на ресурс);
  •  значение атрибута target (цель) в элементе a – имя фрейма, в который будет выводиться Web-страница или одно из значений: _blank, _self, _parent или _top;
  •  значение атрибута alt в элементе img (в некоторых Web-браузерах значение этого атрибута выводится при наведении курсора мыши на фрагмент);
  •  область для ввода текста и текстовый переключатель Текст HTML (рис. 3.26) (выводится вместо полей Имя, URL, Цель и Alt, если для поля Тип задано значение Без изображения);
  •  координаты X и Y левого верхнего угла фрагмента, значения атрибутов width и height – ширина (Ш) и высота (В) фрагмента, а также переключатель  для включения/выключения сохранения пропорций при изменении значений ширины и высоты;
  •  значения атрибутов align и valign в элементе td таблицы – горизонтальное и вертикальное выравнивание в ячейках таблицы;
  •  значения атрибута bgcolor в элементе td таблицы – цвет фона ячейки таблицы;
  •  текст сообщения в строке состояния Web-браузера – появляется, если курсор мыши наведен на строку состояния.

Рис. 3. 26. Поле Текст и переключатель Текст HTML для ввода текста

при значении Без изображения в поле Тип

Изображение, приведенное на рис. 3.25, разбито на 4 фрагмента. Параметры первого фрагмента показаны на рисунке. Для второго фрагмента задан тип Без изображения и текст, показанный на рис. 3.26. Третий и четвертый фрагмент, также являющиеся изображениями, объединены в таблицу.

По заданным в палитре параметрам ImageReady формирует Web-страницу с таблицей для изображения и вложенной в нее таблицей для третьего и четвертого фрагментов. Эту Web-страницу можно просмотреть с помощью инструмента Просмотр в браузере (рис. 3.11). Полученное изображение приведено на рис. 3.27.

Рис. 3.27. Пример вывода изображения, разбитого на фрагменты

Текст фрагмента Web-страницы, сформированного ImageReady и содержащего изображение, разбитое на фрагменты:

<table id="Table_01" width="245" height="226"

border="0" cellpadding="0" cellspacing="0">

<tr>

  <td align="left" valign="middle"

bgcolor="#FFFF99">

  <a href="Page-01.html" target="_parent"

onmouseover="window.status='Пример изображения с фрагментами';  return true;"

  onmouseout="window.status='';  return true;">

   <img

src="images/SliceExample_Фигура-1_01.gif" width="96" height="126" border="0" alt="Фрагмент 01">

</a>

</td>

 <td width="149" height="126"><b><font color="red"

size="4">

Пример использования фрагментов</font></b></td>

 </tr>

<tr>

 <td colspan="2">

  <table id="Table_02" width="245" height="100"

border="0" cellpadding="0" cellspacing="0">

   <tr>

    <td>

     <img width="96" height="100"

src="images/SliceExample_Фигура-1_03.gif" alt="">

</td>

    <td>

<img width="149" height="100" src="images/SliceExample_Фигура-1_04.gif" alt="">

</td>

   </tr>

  </table>

</td>

</tr>

</table>

Сохранить созданную ImageReady Web-страницу с таблицей можно с помощью пункта Сохранить оптимизированный (Save Optimized) или Сохранить оптимизированный как (Save Optimized As) меню Файл (File). Изменить Web-страницу можно с помощью команды Обновить HTML (Update HTML) меню Файл (File).

Команда меню палитры Показать/Спрятать параметры (Hide/Show Options) выключает/включает вывод параметров палитры на экран.   

Дублирование фрагмента, деление фрагмента и удаление фрагмента выполняется с помощью пунктов Создать дубликат фрагмента (Duplicate Slice), Разделить фрагмент (Divide Slice) и Удалить фрагмент (Delete Slice) меню палитры. Команда Отменить связь фрагмента (Unlink Slices) отменяет связывание фрагментов между собой.

3.3.5.2. Палитра Таблица

Палитра Таблица (Table) (рис. 3.28) предназначена для задания дополнительных параметров выводимой таблицы, содержащей изображения или вложенной таблицы.

Рис. 3.28. Палитра Таблица

  

С помощью палитры Таблица (Table) можно задать следующие параметры:

  •  значение атрибута id элемента table – имя таблицы;
  •  координаты X и Y левого верхнего угла таблицы, а также значения атрибутов width и height – ширина (Ш) и высота (В) таблицы;
  •  предпочтительное форматирование фрагментов в таблице: по умолчанию, как столбцы (rowspans) или как строки (colspans);
  •  значение атрибута border в элементе table – толщину границы ячейки (в пикселях) (поле Граница);
  •  значение атрибута cellpadding в элементе table – расстояние между границей ячейки и ее содержимым (в пикселях) (поле Планшет);
  •  значение атрибута cellspacing в элементе table – расстояние между границами двух соседних ячеек (в пикселях) (поле Пробел).

Команда меню палитры Показать/Спрятать параметры (Hide/Show Options) выключает/включает вывод параметров палитры на экран.

Вывод таблицы, с помощью инструмента Просмотр в браузере (рис. 3.11), для третьего и четвертого фрагментов изображения (рис. 3.25) в соответствии с параметрами, заданными на рис. 3.28, приведен на рис. 3.29.

Рис. 3.29. Пример вывода изображения, разбитого на фрагменты,

с использованием палитры Таблица

 

Измененный элемент table для таблицы с идентификатором Table_02 будет иметь следующий вид:

<table id="Table_02" width="245" height="100"

border="2" cellpadding="1" cellspacing="1">.

Сохранить созданную ImageReady Web-страницу с таблицей можно с помощью пункта Сохранить оптимизированный (Save Optimized) или Сохранить оптимизированный как (Save Optimized As) меню Файл (File). Изменить Web-страницу можно с помощью команды Обновить HTML (Update HTML) меню Файл (File).

3.3.5.3. Палитра Карта ссылок

Палитра Карта ссылок (Image Map) (рис. 3.30) позволяет задавать разные ссылки на заданные фрагменты изображения. Пример использования этой палитры для задания ссылок на другие Web-страницы приведен на рис. 3.30. Области ссылок были предварительно  нарисованы с помощью инструментов создания карт ссылок (рис. 3.12) .

Рис. 3.30. Пример использования палитры Карта ссылок

Палитра Карта ссылок (Image Map) содержит следующие параметры:

  •  имя области (генерируется автоматически, но может быть заменено другим именем);
  •  атрибут href в элементе area – имя Web-страницы, на которую выполняется переход при щелчке мышью по области (URLUniform Resource Locator – универсальный указатель на ресурс);
  •  значение атрибута target (цель) в элементе area – имя фрейма, в который будет выводиться Web-страница или одно из значений: _blank, _self, _parent или _top;
  •  значение атрибута alt в элементе area (в некоторых Web-браузерах значение этого атрибута выводится при наведении курсора мыши на фрагмент);
  •  для прямоугольной области – координаты X и Y левого верхнего угла, а также ширина (Ш) и высота (В) (в атрибуте coords элемента area задаются координаты  X и Y левого верхнего угла и правого нижнего угла);
  •  для круговой области – координаты X и Y центра и радиус (эти значения задаются в атрибуте coords элемента area).

Команда меню палитры Показать/Спрятать параметры (Hide/Show Options) выключает/включает вывод параметров палитры на экран.

Удаление и дублирование карты ссылок выполняется с помощью пунктов Удалить карту ссылок (Delete Image Map Areas) и Создать дубликат карты ссылок (Duplicate Image Map Areas) меню палитры. Команда Преобразовать слоевую карту ссылок (Promote Layer Based Image Map Area) создает карту ссылок из слоя.

Сохранить созданную ImageReady Web-страницу с картами ссылок можно с помощью пункта Сохранить оптимизированный (Save Optimized) или Сохранить оптимизированный как (Save Optimized As) меню Файл (File). Изменить Web-страницу можно с помощью команды Обновить HTML (Update HTML) меню Файл (File).

Фрагмент Web-страницы с картами ссылок, приведенных на рис. 3.30, имеет следующий вид:

<img src="images/Pointer.gif" width="574" height="123"

border="0" alt="" usemap="#Pointer_Map">

<map name="Pointer_Map">

<area shape="poly" alt="Ссылка на следующую страницу"

coords="404,35, 404,88, 519,88, 519,116, 562,63, 519,8, 519,35" href="Page-03.html" target="main">

<area shape="rect" alt="Ссылка на содержание"

coords="226,33,339,90" href="content.html"

target="main">

<area shape="circle" alt="Ссылка на содержание"

coords="226,61,29" href="content.html" target="main">

<area shape="circle" alt="Ссылка на содержание"

coords="340,61,29" href="content.html" target="main">

<area shape="poly" alt="Ссылка на предыдущую страницу"

coords="53,88, 53,118, 10,62, 53,8, 53,34, 168,34,

168,88" href="Page-01.html" target="main">

</map>.

3.3.5.4. Палитра Анимация

Палитра Анимация (Animation) (рис. 3.31) используется для создания анимационных рисунков в формате GIF. На эту панель помещается последовательность кадров анимации, либо создаваемых вручную, либо представленных в виде слоев изображения. Для последовательности кадров указывается частота их смены. Полученная последовательность сохраняется как рисунок формата GIF.

Рис. 3.31. Палитра Анимация

Создание нового кадра выполняется с помощью пункта Новый кадр (New Frame) в меню палитры.

В качестве первого кадра анимации выступает исходное изображение. В примере на рис. 3.31 это изображение содержит три слоя: фон голубого цвета, красный шарик и зеленый шарик. Для установки промежутка между кадрами необходимо щелкнуть мышью в нижней части кадра и в раскрывающемся меню выбрать нужное значение (в примере это значение равно 0,1 секунды).

Для добавления кадра 2 используется кнопка в нижней части палитры. Первоначально добавленный кадр является точной копией предыдущего кадра. Изменения кадра производятся в изображении с использованием  палитры Слои (Layers) (каждый шарик перемещается в своем слое) (рис. 3.32). Перед началом изменений необходимо в меню палитры Слои (Layers) выключить переключатель Сохранять изменения кадра 1.

Рис. 3.32. Первые два кадра анимации

 

В этих кадрах положение шариков существенно отличается друг от друга. Чтобы сделать этот переход плавным между этими кадрами можно вставить промежуточные кадры, в которых автоматически будут произведены необходимые перемещения. Для вставки промежуточного кадра необходимо сначала выделить кадры 1 и 2.

Для выделения кадра надо щелкнуть по нему мышью, а для выделения нескольких кадров надо щелкнуть по ним мышью при нажатой клавише Shift, а команда Выделить все кадры (Select All) выделяет все кадры анимации.

После выделения кадров 1 и 2 нажимается кнопка или выбирается пункт Создать промежуточные кадры (Tween) в меню палитры. Затем в диалоговом окне задаются следующие параметры:

  •  кадр, к которого будет начинаться вставка (в примере это Выделенный кадр);
  •  количество вставляемых кадров (в примере – 5);
  •  слои, в которых будут отслеживаться изменения (в примере – Все слои);
  •  атрибуты слоя, изменения которых будут отслеживаться (в примере – Положение, но можно включить все переключатели).

В результате выполнения операции вставки палитра анимации принимает вид, показанный на рис. 3.33.

Рис. 3.33. Вставка промежуточных кадров

Добавим кадр 8, а затем изменим его, а затем добавим кадр 9 и также изменим его. Кадр 10 является копией кадра 1. Эта операция выполняется с помощью пунктов Скопировать кадр (Copy Frame) и Вклеить кадр (Paste Frame) в меню палитры.

В результате выполнения этих операций палитра анимации принимает вид, показанный на рис. 3.34.

Рис. 3.33. Вставка кадров 8, 9 и 10

Теперь можно вставить между кадрами 7 и 8, затем между кадрами 13 и 14  и, наконец, между кадрами  19 и 20 промежуточные кадры (при вставке номера кадров будут изменяться). После удаления последнего кадра (дублирующего первый кадр) анимация будет состоять из 24 кадров.

Сохранить созданное ImageReady анимационное изображение (в формате .gif) можно с помощью пункта Сохранить оптимизированный (Save Optimized) или Сохранить оптимизированный как (Save Optimized As) меню Файл (File).

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

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

Анимацию можно создать и из слоев изображения (каждый слой рассматривается как кадр анимации).

Пусть исходное изображение (слой 1) в Photoshop имеет вид, приведенный на рис. 3.34а.

Добавим к изображению четыре синих штриха (слои 2-5) (рис. 3.34б). Сделаем дубликаты слоев 3-5 (слои 6-8). Сделаем слои 2-5 невидимыми и сдвинем штрихи в слоях 6-8. В результате изображение примет вид, представленный на рис. 3.34в. Затем сделаем слои 2-5 снова видимыми.

Сделаем дубликат слоя 1 и поместим его выше слоя 5. Выполним слияние слоев 6, 7, 8 и дубликата слоя 1, а затем выполним слияние слоев 1, 2, 3, 4 и 5. В результате в изображении останется два слоя.

Рис. 3.34. Исходное изображение для анимации

Перенесем (с помощью кнопки ) изображение в ImageReady и в меню палитры Анимация (Animation) выберем пункт Создать кадры из слоев (Make Frames From Layers), который автоматически создает кадры из слоев изображения (каждый слой преобразуется в один кадр), затем установим значение интервала 0,2 секунды (рис. 3.35). После этого сохраним изображение как анимированный GIF.

Рис. 3.35. Преобразование слоев изображения в кадры

   

Для удаление выделенных кадров надо нажать кнопку в нижней части палитры или выделить пункт    Удалить кадр (Delete Frame) в меню палитры. Чтобы удалить все кадры анимации, можно использовать пункт  Удалить анимацию (Delete Animation) в меню палитры.     

Пункт  Реверс кадров  (Reverse Frames) меню палитры переставляет кадры анимационного изображения в обратном порядке.

Чтобы уменьшить размер анимационного изображения можно использовать пункт Оптимизировать анимацию (Optimize Animation).

Пункт Объединить кадры в слои (Flatten Frames Into Layers) объединяет кадры анимации в один слой, а пункт Создать слой для каждого нового кадра (Create Layer For Each New Frame) для каждого кадра в палитре создает свой слой.

Пункт Параметры палитры (Palette Options) обеспечивает три возможные настройки размера для воспроизведения кадров.

3.3.5.5. Палитра Web-содержимое

Палитра Web-содержимое (Web Content) (рис. 3.34) используется для создания набора эффектов «наката» (ролловера) (rollover). Палитра позволяет  создать несколько вариантов  изображения: обычное изображение и изображения, на которое меняется данное изображение, если для него выполняется какая-либо операция мышью (например, если курсор мыши входит в область, занятую изображением).

Рис. 3.34. Палитра Web-содержимое

Кнопка или пункт Новое состояние ролловера (New State) меню палитры задает вариант изображения, которое будет выводиться на экран при следующих операциях с мышью: указатель мыши проходит над изображением (состояние Курсор наведенOver); нажатие кнопки мыши (состояние Кнопка нажатаDown); щелчок мышью (состояние ЩелчокClick); выход указателя мыши за пределы изображения (состояние Курсор отведенOut) и отпускание кнопки мыши (состояние Кнопка отпущенаUp); активизация состояния при выборе фрагмента или карты ссылки (состояние ВыбранноеSelected) и сохранение текущего изображения, но отмена его использования  (состояние ПокойNone).  Можно также задать свой вариант кадра (состояние ЗаказноеCustom). Пункт Параметры состояния ролловера (Rollover State Options) выводит на экран диалоговое окно в котором можно получить или изменить значение для выделенного состояния.

Изменения состояния производятся в изображении с использованием  палитры Слои (Layers). Перед началом изменений необходимо в меню палитры Слои (Layers) выключить переключатель Сохранять изменения кадра 1.

Предварительно просмотреть полученные состояния в Web-браузере можно с помощью инструмента Просмотр в браузере (рис. 3.11).

Сохранить созданную ImageReady Web-страницу (в формате .html) для состояний ролловера можно с помощью пункта Сохранить оптимизированный (Save Optimized) или Сохранить оптимизированный как (Save Optimized As) меню Файл (File). Изменить Web-страницу можно с помощью команды Обновить HTML (Update HTML) меню Файл (File).

Пункт Создать дубликат состояния ролловера (Duplicate Rollover State) меню палитры создает новый вариант с теми же параметрами, что и исходный вариант.

Пункты Скопировать состояние ролловера (Copy Rollover State) и Вклеить состояние ролловера (Paste Rollover State) меню палитры копируют и вставляют выбранный вариант. Нажатие кнопки или выбор пункта Удалить состояние ролловера (Delete State) меню палитры удаляют отдельный вариант ролловера. Пункты Удалить ролловер (Delete Rollover) и Удалить все ролловеры (Delete All Rollovers) соответственно отдельный вариант и всю последовательность вариантов ролловера и все ролловеры палитры.

Нажатие кнопки или выбор пункта Создать слоевой ролловер (Create Layer-Based Rollover) создает ролловер из выделенного слоя.

Команда Параметры палитры (Palette Options) обеспечивает три возможные настройки размера для воспроизведения кадров.

Сгенерированный для состояний, приведенных на рис. 3.34, сценарий JavaScript имеет следующий вид:

<script type="text/javascript">

<!--

function newImage(arg) {

if (document.images) {

 rslt = new Image();

 rslt.src = arg;

 return rslt;

}

}

function changeImages() {

if (document.images && (preloadFlag == true)) {

 for (var i=0;

i<changeImages.arguments.length; i+=2) {

  document[changeImages.arguments[i]].src =

changeImages.arguments[i+1];

 }

}

}

var preloadFlag = false;

function preloadImages() {

if (document.images) {

 _________1_01____ =

newImage("images/Безимени-1_01-над.gif");

 _________1_01_____ =

newImage("images/Безимени-1_01-вниз.gif");

 preloadFlag = true;

}

}

// -->

</script>.

Фрагмент Web-страницы для операций над кнопкой имеет следующий вид:

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0"

marginwidth="0" marginheight="0"

onload="preloadImages();">

<!-- ImageReady Slices (Безимени-1) -->

<a href="#"

onmouseover="changeImages('_________1_01',

'images/Безимени-1_01-над.gif'); return true;"

onmouseout="changeImages('_________1_01',

'images/Безимени-1_01.gif'); return true;"

onmousedown="changeImages('_________1_01',

'images/Безимени-1_01-вниз.gif'); return true;"

onmouseup="changeImages('_________1_01',

'images/Безимени-1_01-над.gif'); return true;">

<img name="_________1_01"

src="images/Безимени-1_01.gif" width="234"

height="70" border="0" alt="">

</a>

<!-- End ImageReady Slices -->

</body>.

Палитра Web-содержимое (Web Content) может использоваться также для вывода фрагментов, карт ссылок и кадров анимации.

4. Порядок выполнения работы

1. Создание анимации из слоев изображения

Добавьте послойную анимацию с помощью штрихов (как показано в п. 3.3.5.4) для вашего варианта рисунка в лабораторной работе 2-01. Варианты анимации для рисунков приведены в табл. 2.1.

Таблица 2.1. Варианты рисунков для послойной анимации

Вариант

Элементы анимации

Цвета штриха

1

Красный цвет

2

Красный цвет

3

Сегмент 1 – желтый цвет

Сегмент 2 – красный цвет

4

Красный цвет

5

Красный цвет

6

Элементы анимации 1 – черным цветом.

Элементы анимации 2 – зеленым цветом

7

Черный цвет

8

Синий цвет

9

Зеленый цвет

10

Зеленый цвет

11

Красный цвет

12

Красный цвет

2. Создание анимации с автоматической вставкой промежуточных кадров

Создайте анимационное изображение со вставкой промежуточных кадров в изображение в соответствии с вариантами, приведенными в табл. 2.2. Количество промежуточных кадров и интервал между кадрами подбираются для плавной передачи изменений в кадрах.

Таблица 2.2. Варианты для покадровой анимации

Вариант

Фон

Слои

Анимационные эффекты для кадров, между которыми вставляются промежуточные кадры

1

RGB(102, 204,

255)

Слой 1 – прямоугольник со скругленными углами (стиль Green Gel).

Слой 2 прямоугольник со скругленными углами (стиль Red Gel).

Прямоугольники расположены друг над другом.

В первом кадре непрозрачность слоя 1 –100%, стиля 2 – 0%, во втором – 0% для слоя 1 и 100% – для слоя 2.

2

RGB(102, 204,

255)

Слой 1 –  прямоугольник со скругленными углами (стиль Green Gel).

Слой 2 прямоугольник со скругленными углами (стиль Red Gel).

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

3

RGB(102, 204,

255)

Слой 1 – (прямоугольник со скругленными углами красного цвета и зеленой обводкой)

В кадре 2 наложение цвета меняется на желтый цвет – , а в кадре 3 – снова на красный.

4

RGB(102, 204,

255)

Слой 1 – (прямоугольник со скругленными углами красного цвета и зеленой обводкой с внешним свечением – градиент Blue, Yellow, Blue)

В кадре 2 внешнее свечение меняется на градиент Orange, Yellow, Orange , а в кадре 3 – снова на градиент Blue, Yellow, Blue.

5

RGB(102, 204,

255)

Слой 1 – (круг красного цвета с тиснением желтого цвета и углом поворота 120°)

В кадре 2 угол поворота меняется на -60° – , а в кадре 3 – снова на 120°.

6

RGB(102, 204,

255)

Слой 1 – (круг красного цвета с тиснением желтого цвета и углом поворота 120° и высотой 0°)

7

RGB(255, 255,

0)

Слой 1 – (круг зеленого цвета цвета с тенью фиолетового цвета: расстояние 36 пикс., размах 21° и размер 24 пикс.)

В кадре 2 расстояние меняется на 0 пикс.  – , а в кадре 3 – снова на 36 пикс.

8

RGB(255, 255,

0)

Слой 1 – (круг зеленого цвета цвета с тенью фиолетового цвета: расстояние 36 пикс., размах 21° и размер 24 пикс., угол 120°)

В кадре 2 угол меняется на 0° – , а в кадре 3 – снова на 120°.

9

RGB(102, 204,

255)

Слой 1 – круг (стиль Red Paper Clip)

В кадре 2 размер обводки меняется на 30 пикс., а в кадре 3 – снова на 6 пикс.

10

RGB(102, 204,

255)

Слой 1 – круг (стиль Red Paper Clip с обводкой: градиент Orange, Yellow, Orange и размер 36 пикс. )

В кадре 2 размер градиент обводки меняется на Blue, Yellow, blue, а в кадре 3 – снова на Orange, Yellow, Orange.

11

RGB(102, 204,

255)

Слой 1 – прямоугольник (стиль Yellow Gel With Drop отключенным глянцем)

В кадре 2 наложение цвета меняется на RGB(255,0,255), а в кадре 3 – снова на первоначальный цвет RGB(148,147,74).

12

RGB(102, 204,

255)

Слой 1 – прямоугольник (стиль Yellow Gel With Drop отключенным глянцем и внешним свечением, а также наложением красного цвета)

В кадре 2 наложение цвета меняется на RGB(255, 255, 0) и включенным внешним свечением: градиент Spectrum, размахом 55% и размером 41 пикс. , а в кадре 3 – возврат к первоначальному состоянию.

5. Содержание отчета

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

6. Вопросы для самоконтроля

Что такое фрагменты, и для каких целей они используются в редакторе Photoshop?

Как можно одновременно редактировать изображение в нескольких графических редакторах?

Как параметры изображения можно установить с помощью палитры Оптимизация в редакторе Photoshop?

Что такое дроплет, и какие средства его создания и корректировки существуют в редакторе Photoshop?

Чем отличаются средства ввода текста в редакторе ImageReady от средств ввода текста в редакторе Photoshop?

Как можно задать оттенки цвета в редакторе ImageReady?

Какие возможности по заполнению замкнутых фигур предоставляет палитра Styles в редакторе ImageReady?

Что такое процедура в Photoshop, и какие средства создания, корректировки и выполнения процедур существуют в этом редакторе?

Какие средства создания анимационных изображений существуют в редакторе ImageReady?

Какие способы создания анимации используются в редакторе ImageReady?

Какие возможности по созданию динамически меняющихся изображений предлагает

Какие возможности по работе с фрагментами изображений имеются в меню Фрагменты редактора ImageReady?


Область
выделения

Раскройка

Карта ссылок

Текст

Линия

Рамка

Рука

Основной цвет и цвет фона

Редактирование фрагментов

Режим просмотра

Переход в PhotoShop

Выделение фрагмента

Перемещение

Выделение карты ссылок

Ластик

Кисть, карандаш, штамп, заливка

Фигуры

Закладка

Пипетка

Масштаб

Просмотр в

Web-браузерах

3

2

4

3

1

5

4

2

6

3

1

5

4

2

6

Гарнитура

Размер

Кернинг

Масштаб по вертикали

Смещение по горизонтали

Язык

Стиль

Интерлиньяж

Межсимвольное расстояние

Масштаб по горизонтали

Цвет

Сглаживание

Параметры текста

Выравнивание текста влево, по центру и вправо

Выравнивание последней строки абзаца влево, по центру и вправо

Выравнивание текста

по ширине

Отступ абзаца

от левого края

Отступ первой

строки абзаца

от левого края

Добавление отступа перед абзацем

Включение/выключение переноса слов

Отступ абзаца

от правого края

Добавление отступа после абзаца

а)

в)

б)

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элемент анимации

Элемент анимации

Элементы анимации 1

Элементы анимации 2

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации

Элементы анимации


 

А также другие работы, которые могут Вас заинтересовать

1805. Виховна година: Дисципліна та правопорядок. 23.52 KB
  Формування в учнів здатність до самоконтролю, поваги до моралі і правопорядку. Учись бачити себе збоку, постійно звіряй свої вчинки з моральними та правовими нормами. Вивчи і сприймати серцем Заповіді Божі, у них — твій порятунок, джерело духовного зростання.
1806. Щоб не марно в світі жити - треба вчитися дружити 25.38 KB
  Учити дітей сприймати різні життєві ситуації, аналізувати їх і знаходити шляхи виходу з них, виховувати у дітей правильне ставлення до таких понять, як друг, дружба, розвивати в учнів загальнолюдські чесноти.
1807. Виховна година: Ходить осінь гаєм 41.5 KB
  Узагальнити знання прикмет осені, особливостей кожного осіннього місяця. Розвивати артистичні здібності дітей, їх мовлення, логічне мислення. Виховувати любов до природи, свідому дисципліну, колективізм.
1808. Виховна година: Чорнобиль не має минулого 23.52 KB
  Розширити знання дітей про Чорнобильську трагедію, наголосити про потенційну небезпеку радіації для усього живого, розповісти про ліквідаторів аварії на Чорнобильській АЕС, показати, що чужої біди немає. Вчити застосовувати у повсякденному житті елементарні радіаційно-гігієнічні навички. Виховувати любов до рідного краю, природи; виховувати у дітей людяність, доброту та згуртованість.
1809. Виводимо формулу щастя та успіху 46.5 KB
  Узагальнити поняття про складові успіху; про індивідуальність щастя для кожної особистості, дати можливість учням упевнитися, що щастя, життєвий успіх залежить від власних зусиль, від вміння відчувати гармонію в собі; сприяти розвиткові чітких життєвих орієнтирів, формуванню правильної самооцінки.
1810. Виховний захід. У світі тварин 27.63 KB
  Розширити і уточнити знання дітей про тварин та середовище їх існування. Розвивати пізнавальний інтерес учнів, спостережливість, уважність, пам’ять, уяву, кмітливість, логічне мислення, вміння спостерігати за тваринами, описувати зовнішній вигляд тварин, виховувати розумне бережливе ставлення до природи, дружні взаємовідносини під час гри, дбайливе ставлення до тварин, чуйність, доброту, милосердя.
1811. Виховна, соціально-педагогічна робота з дітьми групи ризику 83.5 KB
  Фактори та причини виникнення категорії дітей "групи ризику". Соціально-педагогічна діяльність з дітьми групи ризику. Організація соціально-педагогічної взаємодії для забезпечення роботи з учнями групи ризику. Формування банку даних дітей і підлітків групи ризику.
1812. Интернет-зависимость. Причины, последствия, рекомендации. 36.05 KB
  Развитие навыков эффективного использования компьютера, интернета. Знакомство с правилами безопасного использования интернета. Знакомство с основными причинами, признаками и последствиями интернет-зависимости.
1813. Методы синтеза оптических систем 1.34 MB
  Под синтезом понимается этап проектирования оптической системы, на котором оптик-конструктор устанавливает её структуру, т. е. количество и взаимное расположение линз (зеркал), материалы, из которых они будут выполнены, а также численные значения конструктивных параметров для последующей оптимизации. Понятие об аберрациях.