Єдиний формат, в якому Adobe Photoshop зберігає анімацію - це gif. GIF - від англійського «Graphics Interchange Format» - формат для обміну зображеннями. Формат gif добре стискає графічні файли і широко використовується в інтернеті, але здатний якісно передавати зображення, що містять тільки до 256 кольорів. Обов'язково враховуйте дану особливість при підготовці вихідних зображень для анімації.
Мабуть, з теорією ми на цьому закінчимо, і перейдемо до анімастроітельству.
Перш за все, підготуємо кадри майбутньої анімації в програмі Adobe Photoshop. Для цього створимо новий документ (меню «Файл» - «Новий») з прозорим фоном і розмірами, наприклад, 300 на 300 пікселів.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (створити) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-5810b42c.jpg)
Ми вирішили намалювати прямокутник із закругленими кутами і залити його рожевим кольором. Це буде фон нашого зображення. Вибираємо колір, вибираємо інструмент «закруглений прямокутник» і малюємо.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (adobe) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-a625aba3.png)
Зверніть увагу, що в списку Шарів з'явився наш фон.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (ячайнік) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-8b692195.png)
Якщо віконце зі списком шарів не відображається, натисніть F7 на клавіатурі або відзначте в меню «Вікно» пункт «Шари».
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (створення анімації) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-fe6b9cd7.png)
Тепер створюємо наступний кадр анімації - додаємо новий шар. Зробити це можна в віконці шарів, натиснувши маленьку кнопульку «Створити новий шар». Або через меню «Шари» - «Новий» - «Шар».
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (ячайнік) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-d9099a9e.png)
Що буде на новому шарі - вирішувати вам. Ви маєте можливість копіювати туди якусь картинку, можна намалювати візерунок спеціальними кистями. Ми просто додамо в новий кадр сердечко, яке тут же відобразиться на шарі в віконці Шарів.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (створити) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-1c0da091.png)
Знову створюємо новий шар. На нього ми вирішили додати текст «Я тебе люблю». Для більшого ефекту кожне слово розмістимо на окремому шарі. В результаті у нас вийде 3 текстових шару, по слову на кожному.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (створення анімації) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-402d7800.png)
Далі додамо ще кілька сердечок - кожне на новому шарі. Принцип скрізь один і той же - створюємо шар і додаємо об'єкт. Пам'ятайте: кожному об'єкту - свій шар! Якщо доданий шар вас не влаштовує, його можна видалити - клацніть по ньому правою кнопкою миші і виберіть «Видалити шар». Можна просто перетягнути шар в кошик, яка знаходиться в нижній частині вікна Шари.
В результаті у нас вийшла валентинка з наступними складовими: фон, 6 шарів з картинками і 3 текстових шару.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (створити) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-36195f30.png)
Тепер нам потрібно перетворити текст, оскільки в такому вигляді, в якому він у нас зараз, gif його не зрозуміє. Для анімованих gif-ів текст переводять в растр. Не будемо вдаватися в технічні подробиці, просто клацнемо по текстовому шару правою кнопкою мишки і виберемо «Растеризация шару». Растеризувати шар перестане бути текстовим і придбає властивості картинки: текст на ньому вже не можна правити.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (створення анімації) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-66740ecb.png)
Перед створенням анімації необхідно растеризувати все текстові шари.
Наші кадри готові. Відправляємо їх в програму Adobe ImageReady, яка поставляється разом з Adobe Photoshop. Зробити це можна через меню «Файл» - «Редагувати в ImageReady» ...
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (створення анімації) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-a2cb9ed5.png)
... або натиснувши відповідну кнопочку на Панелі.
Якщо і та й інша опції неактивні, збережіть зображення у форматі PSD за допомогою меню «Файл» - «Зберегти як», а потім відкрийте його в ImageReady через меню «Файл» - «Відкрити».
В Adobe ImageReady нам належить оживити шари і перетворити наше зображення в повноцінну gif-анімацію. Для комфортної роботи у вас обов'язково повинні бути відкриті віконця Шари, Оптимізація і Анімація: відзначте відповідні пункти в меню «Вікно» ( «Window») ImageReady.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (як створити gif в adobe photoshop) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-f4ed7423.png)
В результаті ваш робочий простір в ImageReady має виглядати наступним чином.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (як створити gif в adobe photoshop) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-019037ff.jpg)
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (ячайнік) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-c8dc1ce4.png)
Тепер створимо новий кадр анімації, клацнувши в віконці Animation маленьку кнопочку.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (створення анімації) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-b8cf60e0.png)
Включимо наступний усе своєю чергою шар, щоб він відобразився в щойно створеному кадрик. Для цього клацнемо лівою кнопкою миші в порожньому прямокутнику шару з назвою «Я». Шар стане видимим, і в прямокутнику з'явиться значок очка.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (створення анімації) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-151c506d.png)
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (ячайнік) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-7c736561.png)
Створити інші кадри ви можете самостійно. Не забувайте після створення кадру, включати для нього шар з тією картинкою, яку ви хочете на ньому бачити. Всі включені до цього шари також повинні залишатися видимими.
В результаті у нас вийшов наступний набір з 9-ти кадрів.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (photoshop) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-7d8c30c1.jpg)
У віконці Animation кадри можна міняти місцями: наведіть курсор мишки на кадр, натисніть ліву кнопку і, не відпускаючи її, перетягніть кадр в потрібне місце анімації.
Тепер задамо час показу кожного кадру. Для цього клацніть стрілку поруч з написом 0 sec (0 секунд) і виберіть потрібний час. Якщо необхідного часу показу кадру немає в списку, виберіть «Other ...» і введіть в поле необхідну кількість секунд.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (image ready) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-254b2e62.png)
Ми задали для всіх кадрів час показу 1 секунду, вибравши в списку «1.0».
Щоб задати число повторень анімації натисніть на «Forever» і виберіть зі списку потрібний пункт.
«Forever» означає, що анімація буде повторюватися нескінченно,
«Once» - один раз,
«Other» - ви самі встановлюєте кількість повторень.
Анімація буде показана у вікні браузера. Нижче ви побачите html-код, який вставляє дане зображення на веб-сторінку.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (як створити gif в adobe photoshop) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-d8ac1aaf.jpg)
Переконавшись, що отримана анімація відповідає нашим бажанням, збережемо її. Але перед цим подивимося на можливий результат оптимізації зображення для формату gif. У цьому нам допоможе віконце Optimize. Методом проб і помилок ми визначили, що хорошої якості можна домогтися, використовуючи наступні настройки.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (як створити gif в adobe photoshop) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-d1b822d0.png)
Зауважимо, що зазначені опції індивідуальні для кожного зображення. Якщо якість оптимізованої анімації вас не влаштовує, є сенс погратися з настройками. З зображеннями, які не вміщаються в палітру 256 кольорів формату gif, доведеться попрощатися. З чорно-білими зображеннями немає сенсу використовувати всі 256 кольорів, досить залишити 128 або відтінки сірого. Тут у вас велике поле для експериментів.
Нарешті, збережемо анімацію у форматі gif, вибравши в меню «File» пункт «Save Optimized» або «Save Optimized As». Після цього програму можна закрити.
![Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників (ячайнік) Як створити анімований gif в adobe photoshop - ячайнік - сайт для справжніх чайників](https://images-on-off.com/images/132/kaksozdatanimirovanniygifvadobephotoshop-a0e4699c.png)
Створення gif-анімації завершено. Звичайно, ми розглянули самі основи роботи в Adobe ImageReady, але вже цього досить, щоб у вас вийшли барвисті і цікаві анімашки.
Спеціально для проекту Ячайнік. Олена Карлтон