Як робити гифки в фотошопі?
Програма «Фотошоп» - універсальний інструмент, що дозволяє працювати з різними форматами графічних файлів. У числі таких - GIF, за допомогою якого можна створювати так звані гифки. У чому особливість даних файлів? Як робити гифки в фотошопі?
Відповісти на це питання ми можемо:
- дослідивши специфіку гифок;
- розглянувши основні інструменти створення відповідних типів файлів, які є в фотошопі.
Почнемо з першого пункту.
Що являють собою гифки?
Під ДІФКУ розуміють найчастіше анімовані зображення в графічному форматі GIF. У більшості випадків вони розміщуються на веб-сторінках і можуть використовуватися, наприклад, в якості рекламного банера, елемента дизайну на сайті, носія мультимедійного контенту. GIF - один з найпоширеніших форматів графічних файлів, поряд з JPEG, PNG, BMP. Головні його переваги, які спричиняють, зокрема, популярність гифок в середовищі веб-дизайнерів, в тому, що:
- з`являється можливість створювати графічні файли невеликого розміру (це дозволяє істотно економити ресурси інтернет-серверів за допомогою зменшення трафіку);
- робити анімовані зображення у вигляді гифок при залученні популярних програм, зокрема фотошопа, дуже просто - цим може почати займатися навіть недосвідчений користувач;
- розглянутий графічний формат універсальний (GIF-файли підтримуються практично всіма сучасними комп`ютерними платформами, браузерами і більшістю програм для обробки графіки).
Гифки здатні відображати не надто багато квітів - тільки 256 (для порівняння, в JPEG відповідний показник становить близько 16,7 млн), але цього в багатьох випадках досить для створення тематичних «клипартів», значків, анімаційних банерів або роликів. До слова, в деяких випадках спочатку повнокольорові зображення, переформатувати в GIF, виглядають по-своєму ефектно.
Тому зазначену особливість гифок - відображення обмеженої кількості квітів - не завжди слід розглядати як недолік формату.
Однак найчастіше GIF-файли стають затребуваними завдяки можливості створювати при їх залученні анімацію. Їх структура може бути представлена кількома кадрами в заданій послідовності, а також алгоритмами, відповідно до яких визначається тривалість показу на екрані окремих картинок. Анімація за допомогою гифок часто налаштована на циклічне відтворення кадрів (коли по завершенні програвання ряду запускається перша картинка). Можна відзначити, що ролики в стандартних мультимедійних форматах, таких як, наприклад, AVI, Quick Time, MPEG-4, не містять внутрішніх алгоритмів, що дозволяють реалізувати циклічне відтворення - відповідна функція виконується програмою-програвачем.
Формат GIF має аналоги - наприклад, APNG. Однак стандарт APNG менш поширений і не настільки універсальний. Зокрема, фотошоп його не підтримує. На відміну від гифок - які дана програма може обробляти різними способами. Вивчимо найпростіший алгоритм створення відповідного типу анімації в фотошопі.
Алгоритм створення анімованих гифок в фотошопі
Ключовий принцип приведення GIF-зображень в рух - той же, що застосовується у звичайній кіноплівці. Її структура представлена, як відомо, послідовністю кадрів, розміщених на пластиковому носії. Кіноплівка, в свою чергу, відтворюється на екрані із заданою швидкістю.
Таким чином, для того, щоб створити анімовану гифку, нам, перш за все, знадобляться «кадри», з яких ми будемо потім вибудовувати необхідну послідовність, «плівка», на якій їх необхідно буде розмістити, а також механізм «відтворення» кадрів.
Першим компонентом з числа зазначених вище здатні стати звичайні картинки. Створювати їх допустимо в будь-якому файловому форматі - власне GIF, JPG або, наприклад, PNG, і задіяний при цьому цілком може бути сам фотошоп.
Для розгляду алгоритму створення гифок ми задіємо Photoshop у версії CS6, однією з найпоширеніших в Росії і в світі. Нехай він буде в англійській версії - багато любителів комп`ютерної графіки воліють користуватися саме їй, оскільки величезна кількість документації для фотошопа складається мовою Шекспіра.
Відкриваємо, таким чином, фотошоп, вибираємо пункт File, а потім - New. Нехай величина створюваного зображення буде 800 на 200 пікселів.
Після цього, використавши інструмент Gradient, розташований на панелі ліворуч, ми можемо надати фону картинки певний ефект. Його задіяння здійснюється просто - потрібно, клацнувши на відповідному значку і затиснувши ліву кнопку миші, промальовувати лінію прямо на зображенні. Залежно від її довжини градієнт пошириться по картинці в тій чи іншій пропорції.
Далі можна написати на тлі, який залитий зазначеним способом, деякий текст за допомогою відповідного інструменту - Text, також наявного на панелі, що знаходиться в лівій частині вікна фотошопу. Нехай на першому кадрі нашої гифки буде слово TheDifference. Написавши його, можна відредагувати колір шрифту, розмір (відповідні опції після вибору інструменту Text відкриються у верхній частині вікна програми), а також додати обведення (клацнувши правою кнопкою на текстовому шарі, який буде називатися, як і текст, TheDifference, вибравши Blending Options, а потім - Stroke).
Перший кадр готовий. Його потрібно коректно зберегти. Вибираємо File, потім - Save As. Оптимальний формат файлу в даному випадку - PNG (при його залученні щодо плавно відображаються літери). Але перш ніж вибирати його зі списку пропонованих розширень, слід обов`язково поставити галочку напроти пункту Save Copy. Це буде означати, що в вікні фотошопа залишиться «исходник» цього файлу, який можна буде редагувати. Зберігши перший кадр, ми продовжимо роботу з цим самим «ісходником».
У команді TheDifference прийнято відрізнятися якістю. Тому, знову вибравши інструмент Text, замість слова TheDifference впишемо «Відрізняємося». Це буде другий кадр - зберігаємо його відповідним способом у форматі PNG.
Після цього повертаємося до «ісходнику» і вписуємо замість «Відрізняємося» слово «Якістю». Зберігаємо файл.
Тепер в нашому розпорядженні - 3 кадри, з яких цілком реально сформувати анімацію виду «TheDifference - відрізняємося якістю».
Закриваємо всі вікна в фотошопі (можна навіть для надійності повністю вийти з програми, а потім завантажити її знову). Після - натискаємо File, потім - Open, і вибираємо всі 3 збережених файлу. На екрані з`являться 3 кадри - TheDifference, «Відрізняємося», «Якістю».
Тепер потрібно здійснити одну незвичайну операцію - розташувати дані кадри один на одному. Самим нижнім буде, очевидно, TheDifference. Решта ми станемо накладати на нього. Робити це дуже просто.
Треба, вибравши інструмент Move Tool - також на панелі ліворуч, клацнути мишкою на кадрі «Відрізняємося». Потім, задіявши поєднання клавіш Ctrl і A, необхідно виділити всю область зображення і скопіювати його - за допомогою Ctrl і C, а потім - Ctrl і V, в кадр TheDifference. Так як вони - однакові за розміром, то копируемое зображення повністю закриє перше. Ту ж саму процедуру потрібно провести з кадром «Якістю» - скопіювати його на TheDifference, закритий картинкою «Відрізняємося». Тепер уже всі попередні кадри закриються словом «Якістю».
Після цього переходимо на панель шарів, розташовану праворуч у вікні фотошопу, і робимо кадри, розташовані поверх TheDifference, невидимими. Для цього слід клацнути лівою кнопкою мишки на зображеннях невеликих «очей», розташованих зліва від назви шарів (Layer 1 і Layer 2).
В результаті видимим стане тільки кадр TheDifference. При цьому він буде відзначений як Background, тобто є фоном. Напроти нього «очей» повинен відображатися. Вікна з двома іншими файлами - «Відрізняємося» і «Якістю», спочатку завантаженими в програму разом з кадром TheDifference, - можна закрити.
Наступний крок - активація найважливішого інструменту фотошопа, а саме - шкали часу, або Timeline. Її можна вважати аналогом «плівки» - другого компонента анімації. На ній потрібно буде розміщувати кадри, створені нами. Для того щоб активувати інструмент Timeline, слід вибрати пункт меню Window, потім - Timeline.
Після цього в нижній частині вікна фотошопу (під робочою областю, на якій розташований кадр TheDifference, а також два прихованих - «Відрізняємося» і «Якістю») відкриється нова панель. Це і є шкала часу. На ній буде кнопка Create Video Timeline. Слід натиснути її, після чого завантажиться анімаційна шкала, а в ній - три кадри, з якими ми працювали вище. Для зручності її можна перемкнути в режим фреймів - натиснувши на значок у вигляді трьох прямокутників, який розташований зліва.
Кожен фрейм буде вміщати в себе конкретний кадр. Першим на черзі буде той, що відповідає наявному на екрані - в якому видимої є картинка TheDifference, а «Відрізняємося» і «Якістю» - невидимі зображення.
Наше завдання - створити наступні кадри, розмістивши їх у відповідних фреймах. Для цього потрібно клікнути мишкою на значку у вигляді чотирьох горизонтальних смуг і вибрати пункт New Frame.
Таким чином, новий фрейм - наступний за першим - буде другим кадром. У ньому треба, в свою чергу, активувати картинку «Відрізняємося» - щоб вона виступила на передньому фоні, закривши собою TheDifference. Для цього виділяємо другий фрейм мишкою, після чого натискаємо на квадратику, розташованому навпроти назви відповідного шару - Layer 1. Він повинен перетворитися в «око», внаслідок чого видимої картинкою на другому кадрі буде слово «Відрізняємося».
Наступний крок - створення третього кадру. Аналогічно - з допомогою опції New Frame. Третій фрейм буде розміщувати, відповідно, кадр «Якістю». У ньому потрібно, в свою чергу, деактивувати «очей» навпроти картинки «Відрізняємося» і активувати відповідний елемент, який розташовується навпроти необхідного шару, тобто Layer 2.
Всі три кадри, таким чином, розмістяться по черзі на «плівці», якій є інструмент Timeline.
Тепер можна налаштувати деякі опції відтворення майбутньої анімації. Наприклад, тривалість показу кожного кадру. Потрібно виділити по черзі всі фрейми - це легко зробити мишкою, затиснувши Ctrl, потім - натиснути на стрілку, розташовану на крайньому правому кадрі, після - вибрати бажане значення для відповідного параметра. Наприклад - 2 секунди.
Наступний крок - задіяння механізму «відтворення» анімації. У цій іпостасі буде виступати, власне, сам GIF-файл. Для того щоб створити його, потрібно зберегти нашу анімацію в даному форматі. Натискаємо File, після - вибираємо пункт меню Save For Web. Відкриється вікно налаштування GIF-файлу.
У ньому - величезна кількість опцій. За бажанням можна поекспериментувати з ними. Але поки що нічого не змінюємо, нехай все буде виставлено за замовчуванням. Натискаємо на Save, вказуємо ім`я GIF-файлу і місце, куди він повинен бути збережений.
Відкривати готові анімовані гифки найкраще в будь-якому браузері. Справа в тому, що якщо запустити GIF-файл в редакторі, то кадри програватися, швидше за все, не будуть.
Якщо відкрити гифку в браузері - наприклад, Opera, Mozilla, Chrome, Internet Explorer, то запуститься анімація, в якій по черзі будуть відтворюватися слова TheDifference, «Відрізняємося», «Якістю».
Отже, ми вивчили те, як робити гифки в Photoshop. Замість використаних нами кадрів можуть бути задіяні будь-які зображення, і їх кількість здатна бути дуже великим - обмежуватися воно буде хіба що продуктивністю комп`ютера. При бажанні нескладно створити в фотошопі, задіюючи доступні інструменти роботи з GIF-анімацією, цілий мультфільм або, наприклад, презентацію.
