Fotodryg.ru - Уроки Фотошоп. анимированная бабочка


Уроки Фотошоп



Полезное на сайте


Смотреть видеоурок



От этого блюда нельзя оторваться




На главную
К списку уроков фотошопа

Урок фотошопа - анимированная бабочка

[2] [3] [4]

1.Создаем новый документ размером 500х500 цветовая модель RGB и прозрачный фон.

2.Залейте его черным цветом при помощи инструмента "заливка". Создаем новый слой при помощи кнопки "создать новый слой" внизу панели СЛОИ.



3.Теперь создаем контур для бабочки - выбрав инструмент "произвольная фигура"на панели инструментов и найдя там форму бабочки. Выберите для контура на панели задач инструмента режим "Контуры". Растяните фигуру бабочки на прозрачном слое.





4.Копируем слой с контуром 2 раза и называем слой 1, слой 2 и слой 3. Делаем активным слой 1.

5.Выберите инструмент кисть, и задайте для нее следующие параметры (окно-кисти) - твердая кисть размером 9 пикселов с интервалом 175 процентов.Теперь ставим основным белый цвет.



6.На панели контуры (рядом с панелью слои) нажимаем кнопку "выполнить обводку контура кистью".



7.Теперь добавим стиль"Crumble Metal" из панели СТИЛИ, если его нет, добавьте все стили из БИБЛИОТЕКИ СТИЛЕЙ. Вы можете добавить несколько точек кистью (на слое с бабочкой), там где вам понравиться, К ним автоматически применен стиль тот же, что и к контуру.



8.Теперь делаем активным слой 2. Выберите инструмент кисть, и задайте для нее следующие параметры (формы отпечатка кисти) - твердая кисть размером 6 пикселов с интервалом 250 процентов.

9.На панели контуры(рядом с панелью слои) нажимаем кнопку "выполнить обводку контура кистью" и добавим стиль"Crumble Metal" из панели СТИЛИ. Снова кистью ставим точки внутри бабочки (желательно не там,где на слое1).

10.Делаем активным слой 3. Выберите инструмент кисть, и задайте для нее следующие параметры(формы отпечатка кисти) - твердая кисть размером 3 пиксела с интервалом 175 процентов.

11.На панели контуры (рядом с панелью слои) нажимаем кнопку "выполнить обводку контура кистью"и добавим стиль"Crumble Metal" из панели СТИЛИ. Снова кистью ставим точки внутри бабочки.

12.Создаем новый прозрачный слой и ставим его над фоновым слоем и большой мягкой кистью (390 пикселей), ставим в центре точку, любого цвета.

13.Откройте панель анимации в Photoshop CS3 (ОКНО-АНИМАЦИЯ) или перейдите в ImageReady CS, при помощи кнопки "Редактировать в ImageReady" (внизу панели инструментов), если вы работаете в более ранней версии программы.



14.Скопируйте первый кадр 2 раза.



15.вернемся к первому кадру анимации (кликнем по нему мышью), на панели Слои оставляем видимыми - фоновый слой, слой 1 и слой с точкой (у остальных слоев отключаем видимость (значек ГЛАЗ)).

16.Во втором кадре оставляем видимыми фоновый слой, слой2 и слой с точкой, причем снижая прозрачность слоя с точкой до 60 процентов.



17.В третьем кадре оставляем видимыми фоновый слой, слой3 и слой с точкой (меняя его прозрачность на 30 процентов).

18.Задайте время задержки каждого кадра 0,2 секунды.



Нажмите кнопку PLAY посмотрите что получилось. Для того, чтобы сохранить анимацию в Photoshop CS 3 заходим в меню ФАЙЛ-СОХРАНИТЬ ДЛЯ ВЭБ и сохраняем изображение в нужную Вам папку, как рисунок и HTML-код в формате GIF. Если сохраняете из Image Ready, то заходим в меню ФАЙЛ-СОХРАНИТЬ ОПТИМИЗИРОВАННЫЙ КАК и сохраняем изображение как рисунок и HTML-код в формате GIF.

Анимированная бриллиантовая бабочка

[2] [3] [4]






Комментарии



Оставляйте пожалуйста Ваши комментарии и советы по уроку. Поля "Текст комментария" и "Имя" обязательны для заполнения

Текст комментария:


Ваше имя:


Оцените урок 1 2 3 4 5

введите цифры с картинки








настя
06:11:2011
почему не работает кнопка выполнить обводку контура



Проверьте в каком режиме вы делали контур бабочки. Скорее всего Вы создали контур в режиме "слой-фигура", а нужно создать в режиме "контур"
Панти
07:11:2011







Алексей
27:10:2011
Огромное спасибо все очень здорово. Вопросик: "А как сделать что бы анимация повторялась по кругу?"



В каком смысле, анимация повторялась по кругу? Чтобы огоньки как бы бежали друг за другом?
Инкогнито
27:10:2011







Яна
15:03:2011
Первый раз сделала анимацию))всё получилось отлично)))






Юля
15:10:2010
Огромное спасибо за уроки! До этого разбиралась,мучилась 3 дня-всё-равно ничего не понимала,а с вашими уроками-всё "как по маслу" получается! Огромное спасибо!






Ирина
26:08:2010
У меня нет стиля с названием Crumble Metal Может он называется еще как-то по другому?



На палитре СТИЛИ в правом верхнем углу жмете на кнопочку с черным треугольником, в выпадающем меню выбираете строчку "Эффекты для текста2", появляется другое окошко где нажимаем ДОБАВИТЬ. У Вас должны добавиться дополнительные стили к уже имеющимся. В некоторых версиях программы стиль "Crumble Metal" называется "Металическая крошка". Если все таки такого стиля у Вас нет, то можно скачать здесь
Панти
26:08:2010


Спасибо!Добавился стиль Металлическая крошка.
Ирина
26:08:2010







Iren
29:03:2010
Спасибо!!!Спасибо!!!Так всё понятно!!!Я сделала сама мне так понравилось!)))Ещё раз спасибки за урок)






Чайник фотошопа
27:01:2010
Спасибо огромное!!!! До этого пробовала делать уроки с анимацией - ничего не получалось (даже в уроках для "самых ленивых"). А тут с первого раза!! Супер! Молодцы! Всё понятно и доступно!






лариса
31:10:2009
замечательные уроки!все получается с первого раза,огромное СПАСИБО!!!!






Flash
17:04:2009
Не получается сохранить файл.Кнопка СОХРАНИТЬ КАК ВЕБ неработает...



Можно попробовать сочетание клавиш Alt+Ctrl+Shift+S (по крайней мере в Фотошоп CS3 это сочетание позволяет сохранить для WEB). А вполне возможно, что у Вас бета версия и не все функции работают.
Олег
18:04:2009







Flash
16:04:2009
Как перейти в Image Ready в Photoshop CS 4



Image Ready в Photoshop CS 4 нет, анимация создается в самом фотошопе. Для создания анимации откройте панель анимации при помощи команды ОКНО - АНИМАЦИЯ, а дальше работаете как в Image Ready.
Панти
17:04:2009







ТЕМА
17:03:2009
СПАСИБО ЗА УРОК.ХОТЬ СРАЗУ И НЕ ВСЕ ПОНЯТНО.ЗАТО ПОТОМ КОГДА РАЗБЕРЕШСЯ ВСЕ ЛЕГО И ПРОСТО КАК ВСЕГДА.У КОГО НЕ ПОЛУЧАЕТСЯ НЕ РАССТРАИВАЙТЕСЬ ,ЧИТАЙТЕ КОМЕНТАРИИ ПОМОГАЕТ.ФОТОДРУГ ТЫ СУПЕР.








[1][2][3]