Як створити анімований gif в adobe photoshop

Дуже красиво виглядають ворушаться смайлики в асьці, що підморгують аватарки на форумах і майже живі фотографії. Що й казати, статика в інтернеті давно поступилося місцем динаміці і анімації. Кожному з нас хочеться здивувати товаришів по всесвітній павутині, намалювавши щось «таке», несхоже на інших. Якщо у вас є програма Adobe Photoshop, то створити анімовану картинку у форматі gif не складе труднощів. Розглянутий нами спосіб підійде не тільки для аватар і смайликів, але і для будь-якої анімації в форматі gif: рекламних банерів для сайтів, листівок і т.п.

Для роботи нам знадобиться програма Adobe Photoshop і Adobe ImageReady. У першій ми підготуємо кадри для майбутньої анімації, а в другій будемо її оживляти. Але перш скажемо кілька слів про принцип роботи анімації.
Всі ми дивилися мультики і знаємо, що анімація - це змінюють один одного статичні кадри. Багато хто навіть бавилися в блокнотиках, малюючи на кожному його листочку по кадрик і швидко гортаючи сторінки - виходило щось, схоже на ранні примітивні анімашки. Той же принцип діє в Adobe Photoshop: спочатку необхідно створити статичні кадри для нашого мультика. Кадрів цих може бути 2-5, а може бути і 50. Чим більше кадрів, тим яскравіше анімація, але тим більше розмір одержуваного анімаційного файлу.
Кожен кадр в Adobe Photoshop повинен бути створений на окремому шарі. Шар - це як сторінка блокнотик. В анімації всі верстви шикуються по порядку в логічній послідовності, створюючи закінчену дію. Для кожного шару-кадру визначається час його показу. Крім того, анімацію можна переглянути один або кілька разів, а можна зробити закільцьованої - повторюваної нескінченно.

Єдиний формат, в якому Adobe Photoshop зберігає анімацію - це gif. GIF - від англійського «Graphics Interchange Format» - формат для обміну зображеннями. Формат gif добре стискає графічні файли і широко використовується в інтернеті, але здатний якісно передавати зображення, що містять тільки до 256 кольорів. Обов`язково враховуйте дану особливість при підготовці вихідних зображень для анімації.

Мабуть, з теорією ми на цьому закінчимо, і перейдемо до анімастроітельству.
Перш за все, підготуємо кадри майбутньої анімації в програмі Adobe Photoshop. Для цього створимо новий документ (меню «Файл» - «Новий») з прозорим фоном і розмірами, наприклад, 300 на 300 пікселів.

Ми вирішили намалювати прямокутник із закругленими кутами і залити його рожевим кольором. Це буде фон нашого зображення. Вибираємо колір, вибираємо інструмент «закруглений прямокутник» і малюємо.

Зверніть увагу, що в списку Шарів з`явився наш фон.

Якщо віконце зі списком шарів не відображається, натисніть F7 на клавіатурі або відзначте в меню «Вікно» пункт «Шари».

Тепер створюємо наступний кадр анімації - додаємо новий шар. Зробити це можна в віконці шарів, натиснувши маленьку кнопульку «Створити новий шар». Або через меню «Шари» - «Новий» - «Шар».

Що буде на новому шарі - вирішувати вам. Ви маєте можливість копіювати туди якусь картинку, можна намалювати візерунок спеціальними кистями. Ми просто додамо в новий кадр сердечко, яке тут же відобразиться на шарі в віконці Шарів.

Знову створюємо новий шар. На нього ми вирішили додати текст «Я тебе люблю». Для більшого ефекту кожне слово розмістимо на окремому шарі. В результаті у нас вийде 3 текстових шару, по слову на кожному.

Далі додамо ще кілька сердечок - кожне на новому шарі. Принцип скрізь один і той же - створюємо шар і додаємо об`єкт. Пам`ятайте: кожному об`єкту - свій шар! Якщо доданий шар вас не влаштовує, його можна видалити - клацніть по ньому правою кнопкою миші і виберіть «Видалити шар». Можна просто перетягнути шар в кошик, яка знаходиться в нижній частині вікна Шари.
В результаті у нас вийшла валентинка з наступними складовими: фон, 6 шарів з картинками і 3 текстових шару.

Тепер нам потрібно перетворити текст, оскільки в такому вигляді, в якому він у нас зараз, gif його не зрозуміє. Для анімованих gif-ів текст переводять в растр. Не будемо вдаватися в технічні подробиці, просто клацнемо по текстовому шару правою кнопкою мишки і виберемо «Растеризация шару». Растеризувати шар перестане бути текстовим і придбає властивості картинки: текст на ньому вже не можна правити.

Перед створенням анімації необхідно растеризувати все текстові шари.
Наші кадри готові. Відправляємо їх в програму Adobe ImageReady, яка поставляється разом з Adobe Photoshop. Зробити це можна через меню «Файл» - «Редагувати в ImageReady»…

...або натиснувши відповідну кнопочку на Панелі.

Якщо і та й інша опції неактивні, збережіть зображення у форматі PSD за допомогою меню «Файл» - «Зберегти як», а потім відкрийте його в ImageReady через меню «Файл» - «Відкрити».
В Adobe ImageReady нам належить оживити шари і перетворити наше зображення в повноцінну gif-анімацію. Для комфортної роботи у вас обов`язково повинні бути відкриті віконця Шари, Оптимізація і Анімація: відзначте відповідні пункти в меню «Вікно» ( «Window») ImageReady.

В результаті ваш робочий простір в ImageReady має виглядати наступним чином.

У віконці Animation ми будемо налаштовувати послідовність кадрів і час показу кожного з них. У віконці Layers ми будемо включати і вимикати шари для їх відображення в кадрах. Віконце Optimize служить для оптимізації готової анімації і її збереження в прийнятній якості в форматі gif. І, нарешті, в самому головному віконці перегляду з вкладками Original і Optimized ми будемо спостерігати кадри нашої анімації в оригінальному і оптимізованому вигляді відповідно.
Поки в віконці Animation ми бачимо єдиний кадр - нашу картинку в повний зріст. Щоб створити нові кадри, перш за все, відключимо непотрібні шари. Робиться це в віконці Layers. Якщо навпаки шару ви бачите значок очка, значить, шар бачимо. Щоб зробити його невидимим просто клацніть по око лівою кнопкою мишки.
Ми відключимо всі верстви крім Шаруючи 1.

Тепер створимо новий кадр анімації, клацнувши в віконці Animation маленьку кнопочку.

Включимо наступний усе своєю чергою шар, щоб він відобразився в щойно створеному кадрик. Для цього клацнемо лівою кнопкою миші в порожньому прямокутнику шару з назвою «Я». Шар стане видимим, і в прямокутнику з`явиться значок очка.

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

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

У віконці Animation кадри можна міняти місцями: наведіть курсор мишки на кадр, натисніть ліву кнопку і, не відпускаючи її, перетягніть кадр в потрібне місце анімації.
Тепер задамо час показу кожного кадру. Для цього клацніть стрілку поруч з написом 0 sec (0 секунд) і виберіть потрібний час. Якщо необхідного часу показу кадру немає в списку, виберіть «Other ...» і введіть в поле необхідну кількість секунд.

Ми задали для всіх кадрів час показу 1 секунду, вибравши в списку «1.0».
Щоб задати число повторень анімації натисніть на «Forever» і виберіть зі списку потрібний пункт.
«Forever» означає, що анімація буде повторюватися нескінченно,
«Once» - один раз,
«Other» - ви самі встановлюєте кількість повторень.

На цьому підготовка анімації завершена. Щоб переглянути отриманий результат у вікні перегляду ImageReady натисніть кнопку «Preview Document».

Кадрики будуть змінювати один одного зі встановленою вами послідовністю і часом показу. Якщо щось не влаштовує, ви завжди можете перервати перегляд тієї ж кнопкою і внести необхідні зміни.
Для перегляду анімації у вікні браузера Internet Explorer натисніть кнопку поруч.

Анімація буде показана у вікні браузера. Нижче ви побачите html-код, який вставляє дане зображення на веб-сторінку.

Переконавшись, що отримана анімація відповідає нашим бажанням, збережемо її. Але перед цим подивимося на можливий результат оптимізації зображення для формату gif. У цьому нам допоможе віконце Optimize. Методом проб і помилок ми визначили, що хорошої якості можна домогтися, використовуючи наступні настройки.

Зауважимо, що зазначені опції індивідуальні для кожного зображення. Якщо якість оптимізованої анімації вас не влаштовує, є сенс погратися з настройками. З зображеннями, які не вміщаються в палітру 256 кольорів формату gif, доведеться попрощатися. З чорно-білими зображеннями немає сенсу використовувати всі 256 кольорів, досить залишити 128 або відтінки сірого. Тут у вас велике поле для експериментів.
Нарешті, збережемо анімацію у форматі gif, вибравши в меню «File» пункт «Save Optimized» або «Save Optimized As». Після цього програму можна закрити.

Створення gif-анімації завершено. Звичайно, ми розглянули самі основи роботи в Adobe ImageReady, але вже цього досить, щоб у вас вийшли барвисті і цікаві анімашки.

Спеціально для проекту Ячайнік, Олена Карлтон

{Mosloadposition cpanel}