Asorti

Урок "Праздничные огоньки"

как делать новогодние мерцающие огоньки?
А ничего сложного

вот такой эффект получится у нас в конце нашего урока

1. Подготовка базы
Подбираем исходник для работы.
http://s60.radikal.ru/i168/0812/7f/fb7d3c1c9951.jpg
Обрезаем с помощью инструмента Crop(обрезать)
вот что получилось

Далее я немного осветлю картинку
Image(изображение)– Adjustments (Регуляторы)– Exposure (экспозиция)

если картинка не четкая, добавлю резкости
Filter(Фильтры) – Sharpen(Резкость) – Sharpen(Умная Резкость)
2. Теперь начинаем рисовать огоньки:
Кнопкой “Create a new layer”(Создать новый слой) создаем 3 прозрачных слоя над базовым и называем их «Огоньки1», «Огоньки2» и «Огоньки3». Для того, чтобы переименовать слой воспользуйтесь командой Layer (Слой)– Layer Properties(Свойства слоя).

Теперь сделайте активным слой «Огоньки1» просто нажав на него.
Выберите кисть круглую, лучше с размытыми краями, подберите подходящий размер под те огоньки, что у нас есть на картинке.
в моем случае я сначала буду брать огоньки что еле видны, на заднем плане.
размер кисти 42
Теперь на выбранном нами прозрачном слое нарисуйте огоньки поверх уже имеющихся. Я их просто дорисую

Далее сделайте активным следующий слой «Огоньки2»(нажав на него)
На нем нарисуйте другие огоньки поверх имеющихся на исходной картинке
Примечание: лучше оставить пока видимыми все слои с огоньками, чтобы видеть, где вы уже рисовали.

Активируем слой «Огоньки3»(нажав на него)
И рисуем огоньки в местах, где их не было на слоях «Огоньки1» и «Огоньки2», но поверх имеющихся на базовой картинке.
Примечание:в некоторых случаях можно дорисовывать и несуществующие огоньки но в нашем случае я просто выделила имеющиеся огоники более ярко
Итак, получилось вот что:
-при всех видимых слоях:

Но огоньки наши получились слишком яркими, такая иллюминация нам не нужнаJ Мы пытаемся добиться легкого нежного перелива на заднем плане. Поэтому на всех трех слоях с огоньками мы уменьшаем непрозрачность до 70 %(подчеркнуто красным на скрине)

3. Рисуем блики
Теперь немного отвлечемся от самих огоньков и посмотрим на шарик. Он освещаются этими же огоньками и, по логике, при изменении свечения огней должны быть и изменения в бликах на шарике, так?
Для того, чтобы дорисовать блики на шарах, я создам по еще одному прозрачному слою над каждым из слоев с огоньками, назвав их «Блики1», «Блики2» и «Блики3»

Зачем мы создаем отдельные слои для бликов? Потому что когда каждый слой из огоньков будет менятся, менятся будет и блик тоже. Плюс сам блик должен быть еще бледнее чем сами огоньки
Слой «Блики1» я покажу при видимом слое «Огоньки1»
При этом уровень непрозрачности Блика1 будет 20%

Слой «Блики2» - при видимом слое «Огоньки2»

При этом прозрачность слоя с бликом2 я ставлю на 10%
Слой «Блики3» - при видимом слое «Огоньки3»

прозрачность слоя Блики3 15%
4. Обьединение
Теперь, для того что бы нам потом не запутаться во всех этих слоях, объединим между собой слои с бликами и слои с огоньками:
1)для начала проверяем, что на всех слоях стоит тот уровень непрозрачности, который нам нужен
2)теперь делаем видимыми слои «Блики3» и «Огоньки3»(значок глазика), делаем активным слой «Блики3» (нажав на него), жмем на него правой кнопкой мыши, появляется такое окно

Выбираем Merge Down (Объединить с предыдущим) и наши 2 слоя объединяются в один «Огоньки3», с общим уровнем непрозрачности 100%, который нас теперь вполне устраивает.
Так же объединяем в один слои «Блики2» и «Огоньки2» и слои «Блики1» и «Огоньки1». Таким образом, у нас должны получиться три слоя «Огоньки1», «Огоньки2», «Огоньки3», помимо базового. Вот так:

5. Анимация
Теперь действуем в зависимости от того, какая у вас версия AdobePhotoshop
Если AdobePhotoshop CS2, то переходим в Adobe Image Ready(нажав на кнопку перехода внизу панели инструментов) и выполняйте все описанные ниже действия в этой программе.
Если AdobePhotoshopCS4, то открываем окно анимации командой Window(Окно) –Animation(Анимация)
Появится вот такое окно:

В этом окне на первом кадре должен быть виден базовый слой и слой “Огоньки1»(должен быть активирован значок «глаз» возле слоя) Вот так

В окне анимации дублируем кадр, нажав кнопку Duplicates selected frames(Дублировать выделенные кадры)
На втором кадре должен быть виден только базовый слой и слой «Огоньки2».
В окне анимации дублируем кадр еще раз, нажав кнопку Duplicatesselectedframes(Дублировать выделенные кадры). На третьем кадре должен быть виден только базовый слой и слой «Огоньки3».
Теперь в окне анимации выставляем время задержки на кадре. Я поставила 0,2 секунды.
Но если мы сейчас нажмем на кнопку Plays animation(Проиграть анимацию), мы увидим, что получилось резковато.
Нужно добавить промежуточные кадры
Для этого при активном первом кадре в окне анимации нажмем кнопку Tweens animation frames(Создать промежуточные кадры)

Появится такое окно:

В нем устанавливаем кол-во промежуточных кадров напротив надписи Frames to Add (Добавить кадров), я поставила 1, что бы не утяжелить чрезмерно анимацию.
Теперь окно анимации выглядит так:

Далее переносим выделение на 3 кадр(он раньше был вторым) и повторяем действия выше
Затем выделяем последний кадр, нажимаем Tweens animation frames(Создать промежуточные кадры), но в появившемся окне выбираем First frame(первый кадр), тогда кадры вставятся между последним и первым кадром.

Всего у нас получилось 6 кадров.
Теперь нужно уменьшить изображение до 100 на 100 пикселей( ну или сколько вам нужно). Для этого воспользуемся командой Image(Изображение) – Image Size(Размер изображения) или Alt-Ctrl-I. Появляется окно Image Size(Размер изображения):

В нем выставляем размеры: по 100 рх.
В AdobePhotoshop CS4 вызываем окно оптимизации командой File(Файл)—Save for Web & Devices(Сохранить для Веб), открывается одноименное окно. В нем виден результат нашей работы и оптимизация настраивается в правой части этого окна: можно выставить кол-во цветов, дизеринг и т. п. Подробно об оптимизации можно прочитать в этом уроке(ссылка).
Вес нашей анимации 54,6 кб, что нас вполне устраивает и мы сохраняем аватар. В AdobePhotoshop CS4 в окне оптимизации просто нажимаем кнопку Save(Сохранить).
А в Adobe Image Ready сохраняем с помощью команды File(Файл)-Save optimizade as(Сохранить оптимизированный как).
Вот наш результат:

еще аватары сделанные таким способом:

(если нужно конечно)