Adobe Photoshop и Macromedia Flash

Федеральное агентство по образованию Российской Федерации Государственное образовательное учреждение высшего профессионального образования Уфимский государственный авиационный технический университет Кафедра экономической информатики Отчет

ADOBE PHOTOSHOP и Macromedia Flash

по дисциплине «Основы Интернет-технологий»

Выполнила:

студентка группы ФК-246

Мукминова А.М.

Проверил:

Собко Сергей Николаевич Уфа-2011

Adobe Photoshop

Задания.

1. Выделение и трансформация: Соберите головоломку, используя возможности выделения и трансформирования.

2. Эффекты слоев: Вставьте текст, рисунок. Примените к ним различные эффекты слоев на ваш выбор

3. Кнопка — Создайте дизайн кнопки (выберите 1 из примеров)

4. Фильтры — Надпись огнем. Сделайте, используя учебник

5. Слои, Градиентное выделение — выполните монтаж изображений

Цель работы

Приобретение практического опыта по создании и корректировки иллюстраций для оформления Web-страниц Порядок выполнения работы.

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

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

Далее следует отделить фрагмент от фона. Для используем Выделение/Цветовой ряд. Используем меню Выделение.

Щелкаем пипеткой по любой точке фона Требуется инвертировать выделение, т. е. поменять выделенное на невыделенное и наоборот. Для этого поставьте галочку Инвертировать. Затем требуется определить диапазон цветов. Для этого воспользуйтесь ползунком Размытие.

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

После перейдите в обычный режим. Скопируйте, вставьте поверх доски.

После того, как все фрагменты будут размещены, необходимо их собрать, склеить и закрасить границы:

Когда все фрагменты, займут свои места, склейте их: Слои/Выполнить сведение.

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

Надпись.

Создадим новый документ. Поместим рисунок и введем текст. Далее меню Слой/Эффекты слоя/ Настройка смешивания.

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

Разделите картинку на 3 части.

1. Ровно по центру вырежьте тонкую полоску.

Останутся еще 2 фрагмента: Слева и справа Создайте новый документ, вставьте полоску.

Командой «Изображение/ Размер изображения» (Image/Image Size) увеличиваем ширину полоски (не забудьте убрать галку в окошке рядом с надписью Сохранение пропорций (Constrain Proportions)).

Переходим к первому изображению. Выделяем его командой Выделение / Все (Select/All) или клавишами CTRL+A. Копируем его Edit/Copy (CTRL+C). Вставляем его в третье изображение и передвигаем влево. Со вторым изображением поступаем также только помещаем его справа. Совмещаем все слои в один Слой/Склеить слои (Layer/Flatten Image.)

Фильтры — Надпись огнем.

Создадим новое изображение к примеру 300×100 пикселов и пишем на нем текст черным цветом, желательно чтобы шрифт был жирным.

Выполняем команду Выделение/ Загрузить выделение. Инвертируем выделение. — Должно быть выделено все, кроме текста.

Совмещаем слои командой Слой /Выполнить сведение Применяем фильтр Фильтр/Оформление/Кристаллизация Размер ячейки от 4 до 6. Убираем выделение (Выделение/Отменить выделения) Делаем изображение негативным Изображение/Регулировки/Инвертировать (Image/Adjust/Invert) и поворачиваем его на 90^o градусов по часовой либо против часовой стрелик: Изображение/ Повернуть холст/90^o (Image/Rotate Canvas/90^o).

Применяем фильтр Фильтр/Стилизация/Ветер Filter/Stylize/Wind.

В окне настроек фильтра Ветер метод выберите так, чтобы направление пламени было вверх.

Чтобы языки пламени, были изогнутыми, Используем фильтр Фильтр/Искажение/Рябь Filter/Distort/Ripple Amount-40 Size-Large. (Можете попробовать другой филтр из группы Фильтр/Искажение/…) И возвращаем изображение в горизонтальное положение: поворачиваем в обратную сторону.

Придаем изображению цвет огня Изображение/Регулировки (Коррекция)/Оттенок-Насыщение

(Image/Adjust/HueSaturation) включаем Цветоризация Монтаж изображения.

Порядок выполнения.

1. Чтобы отделить отделить деревья от фона.

Используем Выделение/Цветовой ряд, и выделим деревья. Теперь копируем деревья на новый слой (команда Слой/Новый/Копированием).

2. Затем переместим изображение неба так, чтобы оно было между слоем заднего плана и слоем с деревьями. Тучи должны быть между деревьями и фоном.

3. Преместим изображение молнии. (Выделение/ Цветовой ряд.)

4. Для создания солнца добавляем новый слой, выделяем круг и заливаем бледно-желтым цветом. Сняв выделение, выполняем фильтр Размытие по Гауссу.

Flash

Flash МХ — это система для создания векторной анимации, имеющая достаточно развитые возможности программирования.

Для начала следует понять: в чем секрет такой компактности роликов, созданных в Macromedia Flash? Основная причина состоит в том, что технология Flash реализует анимацию векторных объектов. На практике это означает, что для создания элементарного ролика нам нужно один раз создать анимируемый объект и в дальнейшем манипулировать только его атрибутами и формой. Технология так же позволяет использовать и растровые объекты.

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

Преобразования реализуются двумя основными методами:

Движение (Motion-tweening) — метод предназначен для изменения атрибутов объекта.

Превращение (Shape-tweening) — метод предназначен для преобразования формы одного объекта в другой. Для создания аналогичных эффектов вызывает увеличение размера файла ролика по сравнению с Motion-tweening.

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

Интерфейс Меню Панели Рисование Линейка Слои Свойства Метод Shape Tweening

Символы Метод Motion Tweening

Во Flash-анимации должны быть следующие элементы:

1. Shape-tweening

2. Motion-tweening

3. Символ

Фоновый рисунок

На слое 1 должен быть неподвижный рисунок.

Использовали панель рисования, нарисовали фоновый рисунок Установили число кадров в сцене.

Для этого активизировали инструмент Arrow () и на линейке Timeline выделили позицию под числом от 30 до 60. Нажали правой кнопкой мыши и выбрали «Вставить кадр.

Shape-twinning

На монтажном столе зафиксировали Слой1 (знак замка). Добавили новый слой.

Нарисовали облако, которое должно менять форму.

На линейке прокрутки (Timeline) добавили ключевой кадр.

На линейке выделили кадр между 2 ключевыми. Установили пару Shape.

На линейке в слое 2 появилась линия. Нажав CTRL+Enter для просмотра анимации.

Motion-tweening

Зафиксировали Слой 2. Добавили новый слой. Нарисовали элемент, который должен перемещаться по сцене. В нашем примере это птичка.

Motion-tweening применяется только к символам. Поэтому рисунок надо преобразовать в символ. Для этого выбрали инструмент «Стрелка» и выделили объект. Затем нажав правой кнопкой мыши, в контекстном меню выбрали «Преобразовать в символ» .

В появившемся окне выбрали поведение «ролик» .

На последнем кадре линейке в слое3 вставили ключевой кадр Переместили объект в другое место. На линейке в слое 3 выбрали кадр между первым и последним и установили пару Motion.

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

Анимирование символа

Для того, чтобы объект в процессе перемещения махал крыльями, требуется анимировать символ. Для этого дважды щелкнули по объекту на первом кадре. Открылось новое окно. Нажали CTRL+Enter, чтобы просмотреть анимацию. Птичка теперь при перемещении машет крыльями

web photoshop анимация векторный

Вывод: Научились создавать и корректировать иллюстрации с помощью Adobe Photoshop.

Ознакомились с технологией Macromedia Flash, реализацией анимации векторных объектов. Научились создавать ролика.