И снова делюсь статьей, написанной для Компьютерной газеты.

Сегодня мы научимся создавать очень интересный эффект — совмещение снимка и реальности. Другими словами, предметы, изображенные на фотографии, будут «выпрыгивать», «вылетать», «выходить» из снимка, частично оставаясь на нем. Лучше всего такой эффект получается, если применять его к снимкам животных, птиц, насекомых, людей. Но это вовсе не значит, что вы не можете поэкспериментировать, заставив, например, дерево «вырастать» из фотографии, на которой оно изображено. Насколько удачным будет результат, зависит от исходного материала и вашей фантазии.

Возьмем фотографию дельфинов в море (рис. 1). К примеру, мы хотим сделать так, чтобы дельфины «выпрыгивали» из одного снимка по направлению к другому, на котором также изображено море.

 

Рис. 1. Исходная фотография

Рассмотрим пошагово, какие действия необходимо выполнить для достижения нужного эффекта.

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

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

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

Итак, начнем.

Для выделения дельфинов будем использовать метод быстрой маски. Войдем в режим быстрой маски, нажав кнопку «Edit in Quick Mask Mode» (рис. 2).

Рис. 2. Кнопка для включения режима быстрой маски

На панели инструментов выберем кисть , установим для нее среднюю степень жесткости, подберем наиболее удобный размер и аккуратно обрисуем дельфинов по контуру (с внутренней стороны). Для изменения размера кисти удобно использовать клавиши с русскими буквами «Х» (уменьшить размер кисти) и «Ъ» (увеличить размер), а степень жесткости настраивается на панели параметров инструмента (рис. 3). Затем увеличим размер кисти и закрасим оставшуюся область внутри. Таким образом мы покроем дельфинов «маской» (рис. 4).

Рис. 3. Настройки кисти на панели параметров

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

Выйдем из режима быстрой маски, нажав ту же кнопку, с помощью которой мы входили в этот режим. Выделенным оказалось все, кроме объектов, «закрытых» маской. Нам нужно, чтобы выделенными были дельфины, поэтому необходимо поменять местами выделенное и невыделенное на снимке (инвертировать выделение). Для этого выберем в меню «Select» команду «Inverse». Теперь выделены дельфины.

Скопируем выделенных дельфинов на новый слой. Для этого можно воспользоываться сочетаниями клавиш: Ctrl+C — копировать, Ctrl+V — вставить. В Photoshop вставляемые объекты всегда помещаются на новый слой. Посмотреть, какие слои имеются на снимке, можно на палитре «Layers»  (рис. 5). Если у вас эта палитра не отображается, выберите в меню «Windows» пункт «Layers».

Рис. 5. Настройки кисти на панели параметров

Теперь создадим новый слой (кнопка  в нижней части палитры «Layers»), зальем его белым цветом и поместим на нижний уровень в списке слоев. Для перемещения слоя необходимо сначала разблокировать основной, фоновый слой «Background»: дважды щелкните на его названии на палитре «Layers» и в появившемся окне нажмите «ОК». Теперь можно просто «ухватиться» за новый слой и «стащить» его на самую нижнюю позицию на палитре слоев. Чтобы залить этот слой белым цветом, выберите инструмент Paint Bucket , установите основной цвет белым и щелкните на любом месте, находясь на нижнем слое.

ВНИМАНИЕ

Чтобы задать основной цвет, щелкните на квадратике «Set Foreground color» в нижней части палитры (рис. 6) с инструментами и выберите нужный цвет в появившемся окне (рис. 7).

Рис. 6. Щелчком на переднем квадратике открывается окно настройки цвета

Рис. 7. Окно выбора цвета переднего плана

Теперь палитра «Layers» должна выглядеть, как показано на рис. 8.

Рис. 8. Палитра «Layers» с тремя слоями

Перейдем на палитре «Layers» на средний слой. Выберем инструмент «Rectangular Marquee» и нарисуем прямоугольное выделение. Это заготовка для снимка, из которого будут «прыгать» дельфины. Скопируем выделение и вставим на новый слой (Ctrl+C — Ctrl+V).

Теперь выделим второй прямоугольник — заготовка для снимка, на который будут попадать дельфины. Инвертируем выделение. Напомню, для этого следует выполнить команду меню «Select» — «Inverse». Выделенным окажется фон, который нужно удалить, нажав клавишу «Delete». После удаления фона дельфины станут «выпрыгивающими» (рис. 9), и останется только придать работе реалистичности.

Рис. 9. Дельфины уже «выпрыгивают»

Снимем выделение, нажав сочетание клавиш «Ctrl+D». Если вы заметили некоторую неаккуратность выделения, можно исправить погрешности, вооружившись ластиком . Обязательно проследите, чтобы активным на палитре «Layers» был слой с вырезанными объектами. Аккуратно пройдитесь вокруг дельфинов мягким ластиком, чтобы стереть ореол, если он проявился после удаления фона.

Теперь займемся снимками. Перейдем на палитре «Layers» на слой, на котором расположен первый снимок, и дважды щелкаем рядом с названием слоя на палитре. Появится окно стилей слоя. В этом окне нам нужно сделать рамки для снимков и настроить падающие от них тени. Щелкнем в левой области окна на названии эффекта «Stroke» — обводка. При этом название эффекта должно выделиться темным фоном, и рядом с ним должен установиться флажок. В правой части окна настроим параметры выбранного эффекта. В раскрывающемся списке «Position» выберем значение «Inside», щелкнем на образце цвета (по умолчанию он красный) и выберем цвет обводки. Затем установим для рамки падающую тень. Для этого включим эффект «Drop Shadow» (щелкнем на его названии, чтобы оно выделилось темным фоном), подрегулируем параметр «Size» (рис. 10). Нажмем «ОК».

 

Рис. 10. Настраиваем стили слоя со снимками

Скопируем эффект слоя с первым снимком на слой со вторым снимком. Для этого выберем слой с настроенными эффектами на палитре «Layers», щелкнем на его эффектах («Effects») правой кнопкой мыши и выберем пункт «Copy Layer Style» (скопировать стиль слоя), затем перейдем на слой со вторым снимком, щелкнем на нем правой кнопкой мыши и выберем пункт «Paste Layer Style» (вставить стиль слоя).

В итоге работа должна выглядеть, примерно как на рис. 11.

Рис. 11. Эффект почти готов

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

Перейдем на слой, на котором расположен первый снимок, и выберем в меню команду «Edit» —«Transform» — «Distort». Вокруг снимка появятся маркеры управления. Передвигая эти маркеры, можно развернуть снимок (рис. 12).

Рис. 12. С помощью команды трансформации разворачиваем снимок

Теперь развернем второй снимок так, чтобы он «лежал» на какой-то поверхности. Перейдем на его слой, выберем в меню команду «Edit» — «Transform» — «Distort» и нужным образом подкорректируем расположение объекта.

Итоговое изображение представлено на рис. 13.

Рис. 13. Переселение дельфинов

Ближайшие курсы в Центре компьютерного образования FreeDom

Этот урок был написал для журнала “Мой нтернет”

Создание баннера во Flash — довольно увлекательное дело. С помощью Flash можно реализовать любые идеи и фантазии. Изучив этот урок, вы научитесь довольно быстро создавать баннер с помощью программы Adobe Flash CS3, благодаря чему вы поймете сам принцип работы программы и создания в ней баннеров. Сразу скажу, что мы не будем делать баннер, в котором один кадр просто сменяет другой и на этом все. Такой баннер проще сделать в программе Adobe Photoshop CS3. Во Flash мы займемся более интересными вещами.

Шаг №1. Придумайте идею баннера

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

Внимание.

Если Вы готовите графику в другой программе, не забудьте поместить объекты на прозрачный фон. Это легко сделать в программе Adobe Photoshop.

Итак, мы сделаем веселый баннер с надписью «Не молчи, как рыба! Общайся! iTUT». При этом сначала будет появляться огромный глаз рыбы, потом вся рыба, а затем надпись.

Шаг №2. Определяемся с размерами баннера.

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

Чтобы определить размер рабочего листа, обратитесь к панели параметров (в нижней части окна) и нажмите кнопку Size (Размер) (рис. 1). В появившемся окне установите значения ширины и высоты будущего баннера. Мы введем значение ширины 468 px, а высоты — 60 px. После нажатия кнопки «ОК» лист изменит размеры.

Рис. 1. Панель параметров рабочего листа

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

Сначала выберем подходящий цвет. Для этого нажмем кнопку Fill Color (Заливка) и на появившейся палитре выберем цвет. Затем на панели инструментов щелкнем на инструменте Rectangle (Прямоугольник) и нарисуем прямоугольник.

Внимание

Чтобы изменить цвет созданной фигуры, нужно выделить ее с помощью инструмента Selection (Выделение) и выбрать требуемый цвет, нажав кнопку Fill Color (Заливка).

Теперь изменим размеры созданного прямоугольника так, чтобы они в точности совпадали с размерами рабочего листа. Для этого выделим прямоугольник инструментом Selection (Выделение) и на панели свойств зададим нужные значения ширины и высоты. Чтобы точно наложить прямоугольник на рабочий лист, там же, на панели свойств, введем значение координат Х и У равными 0 (рис. 2).

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

Шаг №3. Импорт графических объектов

Фон готов, и теперь можно поместить на сцену графические объекты. Обратимся к шкале времени и в левой ее части создадим новый слой, на который поместим рыбу. Чтобы создать новый слой, нужно щелкнуть на кнопке Insert Layer (Вставить слой) (рис. 3). В данном случае рыба была нарисована в программе CorelDRAW. Чтобы импортировать объект, выполните команду File — Import — Import to Stage (Файл — Импорт — Импорт на сцену). После того как объект появится на сцене, разместим его в нужном месте. В данном случае нам нужно повернуть объект и сделать его такого размера, чтобы на рабочем листе был виден только глаз рыбы. Трансформация объекта производится с помощью инструмента Free Transform (Свободная трансформация) .

Рис. 3. Помещайте каждый элемент ролика на новый слой

Внимание

Во время трансформации вы можете изменить центр вращения. В данном случае нужно переместить его внутрь глаза и развернуть рыбу относительно него (рис.3).

Рис. 4. Размещаем объекты в нужном месте

Шаг № 4. Создание анимации

Теперь анимируем нашу рыбу и сделаем так, чтобы она, разворачиваясь, перемещалась в левую часть баннера.

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

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

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

Чтобы исправить это, нужно поставить ключевой кадр слоя с фоном на длину всего флеш-ролика. Можно было бы сделать ключевым также 15 кадр, но нам еще нужно будет добавить надпись, поэтому продлим фон до 50 кадра. Активизируем слой с фоном, на 50 кадре щелкнем правой кнопкой мыши и выберем пункт Insert Keyframe (Вставить ключевой кадр). Перейдем на слой с рыбой и установим ключевой кадр на позиции 50, чтобы после 15 кадра рыба не пропадала (рис. 5).

Рис. 5. Так выглядит монтажная линейка на данном этапе

Шаг №5. Добавление надписи в баннер

Осталось добавить надпись, которая будет появляться после 15 кадра. Создадим еще один слой для надписи. На 15 кадре установим еще один ключевой кадр и добавим надпись. Для создания текста предназначен инструмент Text (текст) . Добавим надпись: «Не молчи, как рыба! Общайся! iTUT». Команды форматирования текста находятся в меню Text (Текст).

Вынесем эту надпись за пределы рабочей области вверх. Затем установим ключевой кадр на 25 кадре и перенесем надпись на рабочий лист. Щелкнем правой кнопкой мыши на 15 кадре и выберем пункт Create Motion Tween (Создать анимацию движения). Теперь при проигрывании ролика надпись будет появляться сверху (рис. 6).

Рис. 6. Так выглядит монтажная линейка, после добавления надписи в ролик

Шаг №6. Тестируем созданную анимацию

Чтобы просмотреть, что у нас получилось в итоге, нажмем сочетание клавиш Сtrl+Enter. Ролик запустится в новом окне.

Шаг №7. Добавляем музыкальное сопровождение

К баннерам нередко добавляют музыкальное сопровождение. Чтобы добавить мелодию, нужно выполнить команду File — Import — Import to Stage (Файл — Импорт — Импорт на сцену) и выбрать музыкальный файл на компьютере. После нажатия кнопки ОК музыкальный файл появится в библиотеке символов. Библиотеку символов можно запустить через меню Window (Окно).

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

Теперь настроим звучание мелодии. На панели параметров звука выберем из списка Sync (Синхронизация) пункт Stream (Поток). В этом случае звук прекратиться после того, как закончит проигрываться анимация, и повторится снова, когда начнет проигрываться первый кадр.

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

Шаг №8. Сохранение и публикация

Перед тем как опубликовать баннер, т.е. сохранить его в формате .swf, сохраним исходный файл в формате .fla в нужное место, выполнив команду File – Save as (Файл — Сохранить как). После этого выполним команду File – Publish (Файл — Публикация). Ролик в формате .swf сохранится в ту же папку, где и хранится исходный flash-файл.

Вот готовый результат.

www.myfreedom.by/banner.swf

 

Центр компьютерного образования FreeДom