Святкові вогники

У цьому уроці навчимося робити ось такі вогники на ялинці, гірлянді або на задньому плані:

З чим ми познайомимося в уроці: використання інструменту Brush tool з низьким opacity

Потрібно знання уроків: Плавний перехід між кадрами

Отже, у нас є ось такий вихідник:

1.Відкриваємо його у програмі Adobe Photoshop командою File (файл)—Open (відкрити) або Ctrl-O Обрізаємо за допомогою інструмента Crop (обрізати):

У мене вийшло так:

2. Робота зі статикою. Я трохи висвітлю картинку командою Image (зображення) - Adjustments (Налаштування) - Exposure (експозиція). Застосую фільтр Sharpen (Різкість) командою Filter (Фільтри) – Sharpen (Різкість) – Sharpen (Різкість). І додам трохи контрасту командою Image (Зображення) – Adjustments (Налаштування) – Brightness/Contrast (Освітлення/Контраст)

Тепер починаємо малювати вогники.

3. Кнопкою “Create a new layer”(Створити новий шар) створюємо 3 прозорі шари над базовим і називаємо їх «Вогники1», «Вогники2» та «Вогники3». Для того, щоб перейменувати шар, скористайтесь командою Layer(Шар) – Layer Properties (Властивості шару) або клацніть двічі за назвою шару в панелі "Layers" (шари) і впишіть свою назву.

4. Тепер зробіть активним шар «Вогники1» просто натиснувши на ньогоо.

Виберіть інструмент Brush tool (пензель) круглу кисть, краще з розмитими краями, підберіть відповідний розмір під вогники, що у нас є на картинці. У нашому випадку це пензель в 52px:

5. Тепер на вибраному прозорому шарі намалюйте вогники поверх вже наявних. Так я намалювала:

6. Далі зробіть активним наступний шар «Вогники2» (натиснувши на нього) На ньому намалюйте інші вогники поверх наявних на вихідній картинці.

Примітка: краще залишити видимими всі шари з вогниками, щоб бачити, де ви вже малювали. Ось як це виглядає, якщо залишити видимими обидва шари:

7. Активуємо шар «Вогники3» (натиснувши на нього) І малюємо вогники в місцях, де їх не було на шарах «Вогники1» і «Вогники2», але поверх наявних на базовій картинці.

Примітка: у деяких випадках можна домальовувати і неіснуючі вогники, але не в нашому. Так як у нас вихідник з великим планом і для найбільшої реалістичності краще відзначати вогні. Отже, вийшло ось що: -при всіх видимих ​​шарах:

-при видимому шарі «Вогники3»:

8. Але вогники наші вийшли надто яскравими, така ілюмінація нам не потрібна :) Ми намагаємося домогтися легкого ніжного переливу на задньому плані. Тому на всіх трьох шарах з вогниками ми зменшуємо непрозорість до 50% (підкресленочервоним на скрині):

ДОБИВАЄМОСЯ РЕАЛІСТИЧНОСТІ

Тепер трохи відвернемося від самих вогників і подивимося на кульки. Вони висвітлюються цими ж вогниками і, за логікою, при зміні свічення вогнів мають бути і зміни у відблисках на кульках, га?

Малюємо відблиски: * Для того, щоб домалювати відблиски на кулях, я створю ще один прозорий шар над кожним із шарів з вогниками, назвавши їх «Блики1», «Блики2» і «Блики3»:

Навіщо я створюю окремі шари для відблисків? Тому що поверхня кульок, у нашому випадку, матова, і вогні на ній відбиватимуться менш насиченими та яскравими, ніж вони є. Тому рівень непрозорості у цих шарів буде ще нижчим.

* З шаром «Блики1» я покажу при видимому шарі «Вогники1»:

При цьому рівень непрозорості на всіх шарах з відблисками буде - 20% Шар «Блики2» - при видимому шарі «Вогники2»:

Шар «Блики3» - при видимому шарі «Вогники3»:

Тепер, щоб нам потім не заплутатися у всіх цих шарах, об'єднаємо між собою шари з відблисками та шари з вогниками: 1) для початку перевіряємо, що на всіх шарах стоїть той рівень непрозорості, який нам потрібен – 20% на відблисках, 50% на вогниках; 2) тепер робимо видимими шари «Бліки3» і «Вогники3»(значок ока), робимо активним шар «Бліки3» (натиснувши на нього), тиснемо на нього правою кнопкою миші, з'являється таке вікно:

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

9. Тепер діємо залежно від того, яка у вас версія AdobePhotoshop : - Якщо AdobePhotoshop CS2, то переходимо в Adobe Image Ready (натиснувши кнопку переходу внизу панелі інструментів) і виконуйте всі описані нижче дії в цій програмі. - Якщо AdobePhotoshopCS4, як у мене, то відкриваємо вікно анімації командою Window(Вікно) – Animation (Анімація) З'явиться таке вікно:

10. У вікні "Animation" (Анімація) дублюємо наш вихідний кадр тричі за допомогою кнопки "Duplicate current frame" (копіювати вихідний кадр):

У нас три кадри.

11. Виставляємо видимість шарів.

На першому кадрі має бути видно базовий шар і шар “Вогники1” (має активувати значок «очей» біля шару). На другому кадрі має бути видно лише базовий шар та шар «Вогники2». На третьому кадрі має бути видно лише базовий шар та шар «Вогники3». Ось так:

12. Тепер у вікні анімації виставляємо час затримки на кадрі. Я поставила 0,2 секунди.

Але якщо ми зараз натиснемо на кнопку Plays animation (Програти анімацію), ми побачимо, що вийшло різкувато.

13. Щоб пом'якшити мерехтіння, додамо проміжних кадрів. Для цього при активному першому кадрі у вікні анімації натиснемо кнопку Tweens animation frames (Створити проміжні кадри)

З'явиться таке вікно:

У ньому встановлюємо кількість проміжних кадрів навпроти напису Frames to Add (Додати кадрів), я поставила одну, щоб не обтяжити надмірно анімацію. Тепер вікно анімації виглядає так:

Переносимо виділення на 3 кадр (він раніше був другим) таповторюємо вищеописані дії створення проміжного кадру.

14. Робимо реверс. Щоб мерехтіння вогників було плавним, а не переривалася в кінці, виділяємо останній кадр, натискаємо Tweens animation frames (Створити проміжні кадри), але у вікні, що з'явилося, вибираємо First frame (перший кадр), тоді кадри вставляться між останнім та першим кадром.

Ось як виглядає тепер вікно анімації:

Загалом у нас вийшло 6 кадрів.

15. Тепер потрібно зменшити зображення до 100 на 100 пікселів (ну або скільки вам потрібно). Для цього скористаємося командою Image (Зображення) - Image Size (Розмір зображення) або Alt-Ctrl-I. З'являється вікно Image Size(Розмір зображення):

У ньому виставляємо розміри: по 100 грн.

16. Зберігаємо анімацію.

- В AdobePhotoshop до CS3 версії зберігаємо анімацію в ІМедж Ріді за допомогою команди "File - Save Optimized as" (попередньо виставляємо налаштування оптимізації в однойменному вікні - Optimized)

- В AdobePhotoshop CS3-CS4 викликаємо вікно оптимізації командою File (Файл) - Save for Web & Devices (Зберегти для Інтернету), відкривається однойменне вікно. У ньому видно результат нашої роботи і оптимізація налаштовується у правій частині цього вікна: можна виставити кількість квітів, дизеринг і т. п.

У такий же спосіб створені й ці користувачі: