Среда, 04.12.2024, 11:56
Приветствую Вас Гость | RSS
Game-Fresh
Главная | Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Выжегание лазером
BlackAndWhiteДата: Воскресенье, 11.10.2009, 17:03 | Сообщение # 1
Генералиссимус
Группа: Пользователи
Сообщений: 434
Награды: 7
Репутация: « 26 »
Статус:
Бог форума За хорошую посещаемость на форуме За супер посещаемость За Генералиссимуса За помощь народу

За создание сайта За хорошую репутации За хорошую репутации За 10 Сообщений За 20 Сообщений За 30 Сообщений За 40 Сообщений За 60 Сообщений За 80 Сообщений За 90 Сообщений
В этом уроке показано как сделать анимацию выжигания букв лазером.

Шаг 1.
Создайте новый документ (Ctrl+N) нужного размера. Автор создал документ размером 150х150px (на примере аватара).
Для начала нам нужен фон.
Создаем новый слой (Shift+Ctrl+N), берем инструмент Paint Bucket Tool (G)и заливаем этот слой любым цветом.
После этого выполняем Layer » Layer Style » Blending Options и настраиваем, как на картинках:

Шаг 2.
Берем инструмент Horizontal Type Tool (T)и печатаем нашу букву. Выберите ровный шрифт, без засечек (автор использовал шрифт Arial, размер 150pt, цвет буквы неважен):

Шаг 3.
Настроим стиль.
Выполняем Layer » Layer Style » Blending Options и настраиваем по картинкам (естественно настройки могут отличаться, все зависит от размера вашего шрифта):

Шаг 4.
Теперь копируем слой с буквой (Ctrl+J), скрываем оригинал (щелчок по иконке глаза в окне слоев Layers):

Далее убеждаемся, что у нас выбрана копия текста и в окне слоев (Layers) нажимаем на кнопку Add layer mask, для создания маски:

Теперь берем инструмент Brush Tool (B) с твердыми краями (Hardness: 100%), выставляем черный цвет и закрашиваем часть буквы. Буква начнет исчезать, так как мы работаем с маской:

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

Шаг 5.
Теперь будем делать сам лазер.
Скройте все слои с текстом.
Создаем новый слой, над текстовыми слоями.
Берем инструмент Brush Tool (B), выставляем размер кисти 5px, жесткость 100% (Master Diameter: 5px; Hardness: 100%), зажимаем Shift и рисуем вертикальную линию любого цвета (опять же, размер линии может быть другим, он зависит от толщины вашего текста):

Шаг 6.
Далее выполняем Layer » Layer Style » Blending Options и настраиваем по картинкам:

Шаг 7.
Берем инструмент Move Tool (V) и немного поднимаем эту линию, что бы видеть ее край:

Копируем этот слой (Ctrl+J).
Скрываем оригинал слоя с линией, берем инструмент Smudge Tool ® и выставляем такие настройки:
Master Diameter: 5px;
Hardness: 100%;
Mode: Normal;
Strength: 40%;

Далее убеждаемся, что у нас выбран слой с копией линии и размазываем край линии, как на картинке:

Шаг 8.
Повторяя шаг №7, создайте еще 2-3 линии, с разными направлениями "размазанности" (при этом оригинальный слой с линией не изменяйте!). Ниже показаны все слои с линиями автора:

Шаг 9.
Берем инструмент Pencil Tool (B), нажимаем F5 и настраиваем, как на картинках:

Далее слоям с линиями рисуем искры (оригинал слоя с линией не трогаем):

Шаг 10.
Создаем новый слой. В списке слоев располагаем его между слоями с линиями и текстовыми слоями.

Временно сделайте текстовый слой с полным видом буквы видимым.
Берем инструмент Brush Tool (B), выставляем размер кисти 30px, жесткость 0% (Master Diameter: 30px; Hardness: 0%) и используя цвет #F1FDD9 делаем пятно:

В окне слоев меняем режим наложения для этого слоя на Soft Light:

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

Шаг 11.
Приступим к анимации.
1) Если у вас Photoshop CS2 и ниже, то выполняем File » Edit in ImageReady, для перехода в Image Ready.
2) Если у вас Photoshop CS3, то вам не нужно запускать Image Ready, а просто нужно открыть окно анимации, Window » Animation.

Во избежание вопросов, автор объясняет назначение кнопок в окне анимации:

Кнопка №1 – создать новый кадр.
Кнопка №2 – создать промежуточные кадры.
Кнопки №3 – выставить время для кадра.

Ну, начнем.
Скрываем все слои, кроме слоя с основной линией и слоя с полной буквой. С помощью инструмента Move Tool (V) размещаем линию, на начало буквы:

Шаг 12.
Теперь скрываем все слои, кроме фонового:

Создаем новый кадр и делаем видимым слой, на котором видна самая маленькая часть буквы:

Далее делаем видимым слой с оригиналом линии:

После этого нажимаем на кнопку создания промежуточных кадров (Tweens animation frames), в появившемся окне выставляем Previous Frame и Frames to Add: 2:

И получаем такие кадры:

Шаг 13.
Создайте новый кадр.
Скройте слой с частью буквы и сделайте видимым следующий слой, на котором чуть большая часть буквы:

Далее скрываем слой с линией лазера и делаем видимым следующий слой. Инструментом Move Tool (V) размещаем эту линию на край части буквы:

Теперь делаем видимым слой с пятном, которое мы рисовали в шаге №10. На рисунке автор обвел красным, то место в котором должен быть этот слой:

Шаг 14.
Создаем еще один кадр.
Скрываем часть с буквой и делаем видимой следующую:

Скрываем линию лазера, делаем видимой следующую и перемещаем на край буквы:

Передвигаем пятно:

Шаг 15.
Повторяйте шаг №14 до тех пор, пока буква не будет видна полностью.
Не забывайте чередовать слои с линиями лазера.
Так же не забывайте двигать слой с пятном, оно должно идти вслед за линией.
В конце этого шага, у вас должна быть примерно такая картинка:

Шаг 16.
Создаем новый кадр и скрываем слои с линией и пятном:

Шаг 17.
Создаем 1 промежуточный кадр (запомните номер последнего кадра на этом шаге, у автора это кадр №20):

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

Шаг 18.
Теперь для кадра, который вы должны были запомнить, выставляем время 1sec, а для последнего кадра 0,5sec:

Шаг 19.
Теперь нам осталось только сохранить наше творение.
В Photoshop выполняем File » Save for Web (Alt+Shift+Ctrl+S).
В ImageReady выполняем File » Save Optimized As (Alt+Shift+Ctrl+S).
В обоих случаях сохраняем в формате .GIF

*Совет: для уменьшения веса картинки, замените на фоновом слое градиент на однородный цвет.

Вот результат:

Автор урока: SandWicH

Источник:
Урок предоставил [url="http://kazahstan.ucoz.kz"]http://kazahstan.ucoz.kz[/url]


 
  • Страница 1 из 1
  • 1
Поиск:

Copyright MyCorp © 2024 | Конструктор сайтов - uCoz