Логотип сайту

Як анімовані картинки?

Как анимировать картинки?

Дивіться відео

Як анімовані картинки?

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

Величезна кількість таких зображень можна знайти на просторах інтернету, але більшою індивідуальністю буде володіти та, що зроблена своїми руками. При цьому анімувати зображення зовсім не складно.

Що таке анімована картинка?

Перш ніж приступити до створення анімованих зображень слід зрозуміти, що вони з себе представляють. Це набагато спростить розуміння процесу їх виготовлення.

Говорячи простою мовою, анимашка - це файл, що містить одразу кілька зображень з певними параметрами їх чергування. Коли відбувається відкриття такого файлу зображення (шари) програються поступово, подібно до того, як кадри кінострічки змінюють один одного при програванні.

Тобто, достатньо зробити кілька зображень, кожне з яких буде певним чином відрізнятися від попереднього, встановити час їх затримки і «упакувати» в GIF файл, щоб отримати анімоване зображення. Одним з найбільш зручних інструментів для цього є Adobe Photoshop.

Підготовка Adobe Photoshop до роботи

Щоб не шукати той чи інший інструмент у програмі в процесі роботи слід заздалегідь відкрити необхідні панелі:

  • На панелі з правого боку екрану натиснути на кнопку «Шари» - виникне однойменна панель праворуч;
  • У верхній частині екрана вибрати кнопку «Вікно» і поставити галочку навпроти рядка «Анімація» - з'явиться однойменна панель внизу.
  • Анімацію картинки (ефект блиску)

    Даний ефект можна застосувати практично до будь-якого зображення або його частини без зміни загального фону. Для того щоб відкрити зображення в Photoshop, необхідно:

  • Натиснути кнопку «Файл»;
  • Натиснути на рядок «Відкрити...»;
  • Вибрати потрібне зображення.
  • Для наочності всього процесу уявімо, що ми маємо картинку, де в синій трикутник вписаний червоний круг. В даному випадку трикутник буде грати роль фону, а колі належить надати ефект блиску.

    Насамперед, слід створити 2 шари, на яких буде тільки коло. Для цього:

  • Виділяємо його зручним способом (у даному випадку це «Овальна область»;
  • Наводимо на обведений пунктиром коло курсор і натискаємо праву кнопку миші;
  • Вибираємо в меню «Скопіювати на новий шар»;
  • Знову наводимо на коло курсор і натискаємо праву кнопку миші;
  • Вибираємо в меню «Створити дублікат шару...»;
  • Підтверджуємо дію кнопкою «ОК» у виниклому меню.
  • Після цього у відкритій раніше панелі «Шари» з'явиться 3 рядки: «Фон», «Шар 1», «Шар 1 копія». Найпростіше створити блиск за допомогою звичайного фільтру «Шум». Для цього:

  • Вибираємо «Шар 1» у панелі «Шари»;
  • Натискаємо кнопку «Фільтр» на панелі у верхній частині екрана;
  • Вибираємо пункт «Шум», а потім «Додати шум»;
  • У вікні в полі «Ефект» пишемо "15" і натискаємо «ОК»;
  • Вибираємо «Шар 1 копія» у панелі «Шари»;
  • Натискаємо кнопку «Фільтр» на панелі у верхній частині екрана;
  • Вибираємо пункт «Шум», а потім «Додати шум»;
  • У вікні в полі «Ефект» пишемо "20" і натискаємо «ОК».
  • Шари готові для «зборки» анімованого зображення, яка виробляється так:

  • У раніше відкритій панелі «Анімація» в правому нижньому куті натискаємо на кнопку з зображенням зірочок (переводимо панель у режим покадрової анімації);
  • У панелі «Шари» натискаємо на зображення ока навпроти рядка «Шар 1» (очей повинен зникнути);
  • В нижній частині панелі «Анімація» натискаємо кнопку з зображенням квадрата з вписаним кутом (створюємо копію кадру);
  • У панелі «Шари» повертаємо зображення ока навпроти рядка «Шар 1» і прибираємо його навпроти «Шар 1 копія»;
  • В панелі «Анімація» по черзі натискаємо на кнопку випадаючого списку під кожним з двох кадрів і вибираємо «0,2 сек»;
  • В панелі «Анімація» у нижньому лівому куті натискаємо на випадаючий список і вибираємо рядок «Постійно».
  • Анімоване зображення готове. Залишилося тільки його зберегти, для чого:

  • У верхній панелі натискаємо на кнопку «Файл»;
  • Вибираємо пункт «Зберегти для Web і пристроїв»;
  • Вказуємо бажану назву файлу та місце його розміщення;
  • Натискаємо кнопку «Зберегти».
  • В даному випадку ми працювали з 2 кадрами. На першому були зображені «Фон» і «Шар 1», а на другому «Фон» і «Шар 1 копія». Цього вдалося домогтися виставленням або зняттям значка «око» навпроти назв шарів.

    За таким же принципом створюються і більш складні анімації. Замість фільтра «Шум» у них можна застосовувати інші способи зміни (додавання об'єктів з інших фото, зміна текстури, переміщення, стиль, прозорість шарів і багато іншого).

    Велику роботу при складному анімуванні картинки слід приділяти роботі над шарами. Скомпонувати ж їх легко з допомогою додавання нових кадрів в панелі «Анімація» і послідовного проставлення значків із зображенням ока.

    Додати коментар
    Ім'я:*
    Пошук по сайту