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

Зрештою, люди почали запитувати нас: «Як ви створюєте GIF анімації?». Настав час розкрити секрет.

Дизайн GIF зображень

1. Секретний інгредієнт

Ось мій невеликий секрет: всі мої анімації GIF спочатку були відео-файлами. Зазвичай я використовую ScreenFlow, який я також застосовую для створення відео наших продуктів. Це проста програма, яка одночасно містить безліч корисних анімаційних інструментів.
Після того як я зберігаю анімацію як відео файл, я імпортую його у Photoshop через File > Import > Video Frames As Layers.

Порада:Якщо ScreenFlow або After Effects вам не по кишені, створіть анімацію в Keynote, і експортуйте її як відео. Нарешті, хоч якесь застосування цієї функції у Keynote.

2. Менше кольорів = більше веселощів

Якщо ви хочете робити круті анімації GIF, то потрібно з особливим трепетом підійти до вибору кольору. Це вплине не тільки на розмір файлу, але й дозволить створити більш тривалі анімації з невеликим розміром файлу. (Для мене маленький – це менше 1MB)

3. Використовуйте розмиття в русі (motion blur), якщо можливо

Такі програми як ScreenFlow та After Effects дозволяють експортувати відео із застосуванням розмиття в русі. Це не тільки надасть вашій анімації професійний вигляд, але й спростить процес зменшення розміру файлу Photoshop.

4. Будьте (частково) лінивими

Уявіть, які ще елементи я зміг би додати до GIF анімації на початку цієї посади. Невеликі тултипи з іменами користувачів, курсор, що натискає кнопку плюс і так далі. Людям не потрібно бачити все це, щоб отримати загальне розуміння побаченого, тому показуйте тільки те, що потрібно – ви обмежені у часі та розмірі файлу.

Експорт GIF анімацій

Перед тим як почати переживати про поради нижче, спробуйте експортувати вашу GIF анімацію. Якщо вона прийнятного розміру, чудова робота! Продовжуйте в такому ж дусі. В іншому випадку спробуйте такі методи.

5. Видаліть кадри-дублікати

Швидше за все, ваша анімація зупиняється або залишається нерухомою на якийсь момент часу. Придивившись, можна побачити, що це момет складається з кількох однакових кадрів. Якщо таких кадрів 10 штук, то видаліть 9 з них і встановіть тривалість кадру, що залишився на, наприклад, 1 секунду.

Якщо це не допоможе, спробуйте імпортувати відео знову, але цього разу виберіть параметр Limit To Every 2 Frames.Це має значно зменшити розмір файлу.

Порада:Якщо анімація складається з понад 150 кадрів, то виникнуть проблеми при спробах зменшити розмір файлу.

6. Менше кольорів

Коли ви зберігаєте GIF анімацію у Photoshop, то побачите меню, що випадає, біля параметра Colors. Поекспериментуйте зі значеннями, спробуйте максимально малу кількість кольорів, яка не перетворить весь файл на сміття.

7. Змініть параметр Lossy* (втрата)

Якщо чесно, я навіть не знаю, що цей параметр означає. Але я точнознаю, що якщо ви поставите його на рівні між 1 і 10, то позбавитеся зайвих кілобайтів без втрати якості.

*«Втрати» (Lossy) - допустимий рівень втрати графічної інформації у растровому файлі, що дозволяє зменшити файловий розмір зображення

Нічого не змінилось! Допоможіть!

Якщо ви спробували все, що було сказано вище, але так і не змогли зменшити розмір GIF анімації, потрібно зробити крок назад. Може, ви хочете неможливого? Чи є інший спосіб досягти бажаного? Чи можна розбити файл на дві GIF анімації? Буде краще, якщо ваша GIF анімація наголосить на одному аспекті.

Від перекладача. З усіма побажаннями та зауваженнями з приводу перекладу прошу звертатися до мене в личку. Дякую!

Чи думали ви, як створюються анімовані GIF-файли? Автор уроку пропонує вам за одну ніч опанувати деякі секрети анімації за допомогою цього уроку. Також ви навчитеся використовувати Шкалу часу (Timeline), яка доступна у версії Photoshop CS6. А тепер почнемо!

Результат уроку.

Крок 1

Створіть новий документ ( Ctrl+N) з розмірами файлу 800 x 500 пікселів. Залийте фон будь-яким кольором, який ви бажаєте. Тепер йдемо в меню Шари- Стильшару- Накладенняградієнта(Layer> Layer Styles> Gradient Overlay). Виконайте такі настройки: Стиль Радіальний(Radial), кольори від чорного (#000000) до синього (#54799b), який буде використовуватись у центрі.

Крок 2

Створіть новий шар та назвіть його Noise Layer. Виберіть інструмент Заливання(Paint Bucket Tool) і залийте створений шар темним кольором (# 231f20). Залишіть активним шар Noise Layerта йдіть у меню Фільтр - Шум - Додати шум(Filter> Noise> Add Noise). У діалоговому вікні параметрів фільтра поставте такі значення: Ефект(Amount) 3%, розподіл Рівномірне(Uniform) та натисніть OK.

Крок 3

Натисніть комбінацію клавіш (Ctrl+U)і в діалоговому вікні налаштувань корекції введіть значення Насиченості(Saturation) 100%: Змініть цей шар режиму накладання на М'яке світло(Soft Light).

Примітка перекладача: Для того щоб досягти такого кольору як у автора на скріншоті, можна при корекції колірний тон / насиченість (Hue/Saturation) значення колірного тону (Hue) поставити на - 140.

Крок 4

Додати будь-який текст, який ви хочете. Тут ми використовуватимемо текст логотипу сайту 123RF. У стилях шару використовуйте Обведення(Stroke). Значення розміру обведення виберіть за своїми перевагами.

Примітка перекладача: На скрині автора вже є растрований текст разом зі стилем Обведення. Щоб у вас вийшло так само, після того, як застосували обведення, приберіть Заливку (Fill) шару з текстом на 0%, перетворіть цей шар на смарт об'єкт, а потім розтрируйте його.

Крок 5

У цьому кроці ми будемо створювати ефект, що світиться для тексту за допомогою стилів шару. Двічі клацніть на шарі, щоб викликати вікно налаштувань стилів. Для налаштування стилів шару використовуйте скріншоти нижче.

Тиснення(Bevel & Emboss)

Внутрішня тінь(Inner Shadow)

Внутрішнє свічення(Inner Glow)

Накладання кольору(Color Overlay)

Зовнішнє світіння(Outer Glow)

Тінь(Drop Shadow)

Крок 6

Як тільки ви закінчите створювати світлові ефекти за допомогою стилів шару, перейдіть в палітру шарів і зменшіть цей шар Заливання(Fill) – на 0%.

Крок 7

Дублюйте шар, який ви створили в кроці 5 і вимкніть цю копію всі стилі шару. Налаштуйте тепер стилі так:

Внутрішня тінь(Inner Shadow)

Внутрішнє свічення(Inner Glow)

Крок 8

Нижче результат після того, як ви застосували стилі шару.

Крок 9

Тепер ми створимо світлові цятки, що рухаються. Створіть 5 шарів поверх існуючих і перейменуйте їх як 1,2,3, R і F. Якщо у вас свій текст створіть шари відповідно до ваших літер. Згрупуйте ці шари в папку, якою дайте назву Light Spotsта змініть режим накладання на Освітлення основи(Color Dodge).

Активуйте інструмент Пензлик(Brush Tool), виберіть м'який пензлик, встановіть Непрозорість(Opacity) на 95% і білим кольором намалюйте цятки поверх тексту. Для кожної літери окрема світлова пляма на своєму шарі. Нижче на скріншоті ви можете розглянути, як шари виглядають у автора на панелі шарів.

Крок 10

Тепер йдемо в меню Вікно - Шкала часу(Window > Timeline). Ви помітите, що ваші шари вже побудовані в цій палітрі в її лівій частині. Виділіть кожен із п'яти шарів зі світловими плямами, які знаходяться в групі Light Spotsі переконайтеся, що індикатор поточного часу (блакитний слайдер) стоїть на нульовому кадрі. Тепер на кожному шарі в групі, за його активності, натисніть на опцію Позиція(Position), щоб створити ключовий кадр.

Примітка перекладача: Щоб активувати шкалу часу, натисніть кнопку Створити тимчасову шкалу для відео(Create Video Timeline) та всі ваші шари завантажаться у шкалу часу. Виділено у ній буде той самий шар чи група, що у палітрі шарів.

Крок 11

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

Крок 12

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

Останнім часом в інтернеті набули великої популярності анімовані картинки – «гіфки», які використовують як рекламні банери і просто для веселощів. У різних соціальних мережах, наприклад, ВКонтакте, люди обмінюються «гіфками» для вираження своїх емоцій і почуттів, замінюючи ними смайли.

Навігація

Однак сьогодні досі багато хто запитує: «Як створити гіфку самому?». Саме на це питання ми і постараємося дати розгорнуту відповідь у цій статті.

Що являє собою GIF-анімація чи «гіфка»?

Що являє собою GIF-анімація чи «гіфка»?

• Гіфка (GIF)- анімована картинка, в якій по черзі змінюються кадри, створюючи тим самим зображення, що рухається. Якщо сказати іншими словами, то це маленький відеоролик, перетворений на графічний формат, який переглядається стандартною програмою для перегляду зображень і відображається на всіх веб-сторінках.
• Так само гіфка важить у 10-100 разів менше відео, залежно від частоти показаних у ній кадрів та розміру зображення. Саме тому GIF-анімацію стали широко використовувати різноманітні інтернет-ресурси ще в середині 2000-х років як рекламні банери.

Приклад вітальної новорічної гіфки

• Оскільки формат GIF є графічним, то для перегляду гіфок не потрібно додаткових плагінів або кодеків. Наприклад, таких як Flash Player. Однак існує низка програм, які не підтримують GIF-анімацію. Однією із таких програм є стандартний графічний редактор Paint. Якщо відкрити в ньому гіфку, то на екрані з'явиться лише перший кадр. Якщо випадково або спеціально зберегти через Paint гіфку, вона перестане рухатися і виглядатиме як стандартне зображення.

Як створити GIF-анімацію чи «гіфку» із відео самому за допомогою програми?

• Ми розібралися, що таке "гіфка" і тепер перейдемо безпосередньо до її створення. Існує безліч програм, за допомогою яких можна перетворити відео на GIF-анімацію. Кожна з них має свої переваги і недоліки. Деякі програми мають велику кількість налаштувань і функцій, що дозволяють створювати гіфки найвищої якості не тільки з відео, але і з простих зображень.
• Однак такі програми належать до професійних, займають багато місця на жорсткому диску та потребують спеціальних творчих навичок. Тому ми розглянемо найпростішу, зручнішу та доступнішу програму для створення GIF-анімації з відео під назвою « ВідеоМАЙСТЕР», Завантажити яку можна з офіційного сайту.

Малюнок 1. Як створити GIF-анімацію чи «гіфку» із відео самому за допомогою програми?

• Програма є компактним і зручним відеоконвертером з безліччю корисних функцій. З його допомогою можна перетворювати відеоролики не тільки на GIF-анімацію, але й в інші формати, такі як AVI, MPG4, MPG-2, 3GP, DivX, XviD, DVD та багато інших.

Відмінною особливістю програми є необхідність налаштування вручну. До неї включено понад 350 попередньо інсталяцій та кодеків, які автоматично налаштовують потрібні налаштування під вибраний формат. Щоб зробити гіфку з відео за допомогою цієї програми, необхідно зробити таке:

• Крок 1. Завантажте програму з офіційного сайту, встановіть її та запустіть. У програмі натисніть на вкладку « Файл» і далі на пункт « Відкрити». У вікні завантажте з комп'ютера відео, з якого Ви хочете зробити GIF-анімацію.

• Крок 2. Після того, як відкрилося вікно роботи з GIF, виберіть шматок відео, який Ви хочете перетворити на анімацію, пересуваючи чорні повзунки на шкалі часу. Паралельно Ви можете переглядати вибраний відрізок у спеціальному плеєрі. Після того, як ви вибрали необхідний відрізок, натисніть кнопку « Далі».

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

• Крок 4. Кінцевим кроком буде налаштування швидкості відтворення, встановлення необхідної кількості кадрів для показу (FPS) та кількість повторів. Кількість повторів рекомендується виставити Повторювати завжди», щоб анімація автоматично оновлювалася. Після виставлення потрібних параметрів натисніть « Створити GIF» та збережіть отриманий файл до себе на комп'ютер.
• Справу зроблено. Тепер у вашому розпорядженні є анімаційне зображення, яке Ви можете завантажити на сторінку ВКонтакті, відправити на стінку друзям і знайомим. На деяких ресурсах такі зображення можна використовувати як аватари.
• Детальну інструкцію щодо користування програмою « ВідеоМАЙСТЕР» можна подивитися на відео наприкінці статті.

Як створити GIF-анімацію чи «гіфку» із відео самому за допомогою інтернет-сервісів?

• Крім різних програм, на просторах інтернету існує кілька сотень онлайн-сервісів, що дозволяють створити GIF-анімацію з відео в режимі онлайн. По суті, це такі ж відеоконвертери, з тим же набором функцій і налаштувань, тільки їх не потрібно завантажувати і встановлювати. Ось кілька найпопулярніших із них:

Але в цій статті ми поговоримо про зарубіжний ресурс Gifs.com, Основною відмінністю якого є можливість створення GIF-анімації з відео з YouTube, Instagram, Facebook та інших популярних соціальних мереж, без необхідності їх завантажувати. Ресурс повністю англійською мовою, проте розібратися в ньому не складе труднощів. І так, приступимо:

• Крок 1. Перейдіть на сайт gifs.com. У вікні Вам пропонують завантажити відео з комп'ютера ( Drag & Drop або select file), або вставити посилання на відео з YouTube або іншого ресурсу ( Search or paste a URL). Спробуємо створити гіфку із популярного серіалу «Теорія великого вибуху». Вставте посилання на відео з YouTube у відповідне поле та дочекайтеся закінчення завантаження.

Малюнок 1. Як створити GIF-анімацію чи «гіфку» із відео самому за допомогою інтернет-сервісів?

• Крок 2. Після закінчення завантаження відкриється редактор відео. Виберіть на тимчасовій шкалі відрізок, який хочете конвертувати в GIF і за потребою додайте різні ефекти з меню ліворуч.

• Крок 3. Після того, як Ви вибрали відрізок, наклали текст та додаткові ефекти, натисніть кнопку « Create GIF», дочекайтеся закінчення конвертації та збережіть отриманий файл у будь-яке місце на жорсткому диску. На виході у нас вийшла така гіфка:

Малюнок 3. Як створити GIF-анімацію чи «гіфку» із відео самому за допомогою інтернет-сервісів?

ВІДЕО: Підручник з конвертації відео у програмі «ВідеоМАЙСТЕР»

Gif анімація або гіфка- Формат картинки, винайдений в далекому 1987 для інтернету. Можливо, ніхто й не думав, що він у наш час буде таким популярним для так званої gif анімації. Але за допомогою таких сайтів, як tumblr та пабліків ВКонтакті начебто #otherдійшов масової культури.

Розглянемо у статті як зробити GIF анімацію, щоб бути у тренді інтернету.

Слідуємо інструкції як створити Gif анімацію

1. Викачуємо програму на свій комп'ютер. (666кб)
2. Запускаємо. Програма автоматично буде поверх всіх вікон зі своєю рамкою.
3. Виділяємо область для запису, просто змінивши розмір рамки, і тиснемо REC.
4. Після запису тиснемо Save.

Інтерфейс програми GifCam

Уявіть, що програма – це камера. Все, що знаходиться всередині рамки, будете вашою гіфкою. Керуйте ним, змінюйте розмір. Записувати можна все, що завгодно, відкриваючи файли на комп'ютері. Ігри, фільми, сайти, себе через веб-сайти або сайти на кшталт YouTube.

Щоб створити ГІФ анімацію з відео, запустіть якесь відео і виділіть потрібну область.

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

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

Можна додати кадри самому, натиснувши FRAME. Що більше кадрів, то більше важить наша картинка. Програма оптимізує картинку: коли картинка статична, замість додавати нові кадри, додаються затримки (delays). Програма GifCam не змальовує постійно нові кадри. Незмінна область стає зеленим екраном для економії пікселів.

Є можливість редагування. Заходимо в Edit і бачимо кадри горизонтального прокручування. Натиснувши правою кнопкою, можна викликати контекстне меню. У ньому є видалення: одного кадру, вибраного кадру до початку або кінця, видалення всіх кадрів. Додавати чи видаляти затримки. Delete even frames потрібно, щоб видалити половину кадрів і зберегти анімацію (для зменшення розміру). Є галочка показувати зелений екран чи ні.

Збереження можливі у 5 форматах різних за якістю: 256 кольорів, 12, сірий тощо.

• Під час запису відео з веб-сайту можна зменшити масштаб сторінки браузера для захоплення GIF меншого розміру.
• Чим менше кольорів GIF, тим менший розмір. Намагайтеся робити трохи більше 15 мб.
• Натиснувши кнопку STOP, можна буде відновити запис, де ви зупинилися. Якщо потрібно почати все знову натисніть NEW в підпунктах кнопки SAVE
• Перш ніж відправляти GIF запитайте себе: Це хороший GIF? Якщо ні, то не надсилайте. Якщо так, то можете залишити у коментарях.
• Багатьох людей дратує анімація.

От і все. Скажіть дякую bahraniappsза створення такої гарної програми. У своєму блозі він пожертвування збирає, до речі. Тепер ви зрозуміли, що жодних складнощів зі створення анімованої картинки немає. І тепер ви зможете створювати GIF без фотошопу та онлайн. Лише за допомогою маленької програми.

У коментарях чекаю ваші улюблені Gif картинки.

3. Шукаємо свою папку з підготовленими фото і натискаємо лівою кнопкою миші на першу фотографію, затискаємо клавішу Shift, і натискаємо на останню, тоді вони виділяються все. Тиснемо ВІДКРИТИ.

4. У фотошопі відкриваються всі фотографії. Починаємо створювати шари, які нам знадобляться для анімації або створення gif картинки. Я відкрила широку фотографію. І вона буде першим шаром.

Щоб перетворити фото на шар, клацаємо по ньому двічі лівою кнопкою миші.

5. Щоб створити другий шар, нам потрібно натиснути на іконку, на яку вказує стрілка. На другому шарі ми будемо мати іншу фотографію.

6. Топаємо в наші фотографії, які відкриті поруч із першою, і вибираємо вузьку фотографію. Нагадую, що це необов'язково… З однаковими фото легше працювати. Отже, знаходимо потрібну фотографію, йдемо в меню – виділення – виділити ВСІ.

7. Після цього навколо картинки почнуть бігати маленькі тире, це виділення. Тепер йдемо в меню – редагування – скопіювати.

8. Повертаємось до нашої першої фотографії, яка вже зі шарами, йдемо в меню – редагування – вставити. І наша вузенька фотографія вставляється на новий шар. Але вона не може залишатися такою вузькою. Нам потрібно додати тло під неї. Для цього клацаємо по іконці (1), перетягуємо шар під вузьке фото, потім піпеткою (2) підбираємо будь-який колір, що сподобався вам, клікнувши курсором по фото. Я вибрала світло-зелений. І заливаємо новий шар, для чого ми активізуємо інструмент заливки (3) і потім клацаємо лівою кнопкою миші по робочому полю фотографії. Зверніть увагу, що в цей момент активним має бути нове прозоре тло. Активні шари вирізняються синім кольором. Після ваших дій прозорий шар забарвиться.

9. Тепер нам треба об'єднати два шари (вузьку фотографію та фон). Настаємо лівою кнопкою миші на перший шар. Затискаємо клавішу Shift і натискаємо по другому шару. Вони виділилися синім кольором. Йдемо в меню – шари – об'єднати шари.

10. Отримуємо таку картинку.

11. Повторюємо пункти 6-10 мого уроку, щоб створити шар з ще однією вузькою фотографією. Він у мене 2 шар. І створюємо ще один новий прозорий шар для розміщення там останньої широкої фотографії (шар 3).

12. Для цього виконуємо пункти уроку 6, 7, 8. Усі. Готово. Шари для нашої gif картинкими створили.

13. Можна розпочинати анімування і з вашими шарами, але я вирішила створити підкладку під нашу картинку. Для цього топаємо в меню - зображення - розмір полотна. Збільшуємо наше полотно на 50 пк по ширині та висоті. Тиснемо ОК.

14. У нас вийшло так.

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

Оформляєте вашу підкладку будь-яким способом. Сподіваюся, що ви знаєте, як виставляються параметри шару, але якщо ні, це просто. Настаєте на потрібний шар і клацаєте по ньому двічі лівою кнопкою миші і у вас відкривається вікно з параметрами вашого шару, а там окремо відкриваєте кожен окремий параметр і ви застосовуєте або змінюєте налаштування. Я застосувала ефект у параметрах шару Внутрішня тінь і Внутрішнє світіння з параметром шару Множення… Колір тіні трохи темніший за тон підкладки. Але тут я не берусь нав'язувати вам мою думку. Ви маєте своє бачення. Спробуйте, змінюйте налаштування. Це не страшно. Завжди можна повернутися до початкового результату, навіщо йдете в меню – редагування – повернутися назад.

До речі, на моїй останній фотографії кущ гліцинії, її багато у Франції та час її цвітіння кінець квітня – початок травня. Цей кущ я сфотографувала у саду у батьків мого друга. У моєму болгарському дворі теж є кущі гліцинії і думаю, що скоро вона порадує нас своїми квітами, схожими на бузкові хмари.

16. Настав час поставити свій логотип, особливо це важливо, якщо ваша картинка розташовуватиметься на вашому сайті. Для звичайних користувачів це не можна застосовувати. Нагадаю, що я робила урок фотошопу о. Пробігу коротко: йдемо в меню - файл - помістити. Шукаємо свій файл PSD з заздалегідь підготовленим логотипом, наступаємо на нього і клацаємо по кнопці Помістити.

17. Перетягуємо шар із логотипом на самий верх, як у мене. За потреби збільшуємо логотип до потрібного розміру, для чого йдемо в меню - редагування - масштабування. Із затиснутою кнопкою Shift розтягуємо або зменшуємо логотип. Активуємо інструмент «переміщення» (найвищий інструмент зі стрілкою та + в панелі інструментів) та переміщуємо логотип на потрібне місце.

Все підготовлено зі створення анімації.

17. У першому кадрі анімації у вас повинна бути відкрита видимість з шаром підкладки, перший шар з вашою фотографією (у моєму випадку шар 0) і логотип (позиція 1). Для гарного перегляду вашої фотографії встановлюємо час затримки 5 сек(Позиція 2). Після визначення часу затримки та встановлення їх у першому кадрі, всі наступні кадри будуть із заданим часом 1 кадру, тобто. 5 сік у моєму випадку. Для створення другого кадру тиснемо на іконку, показану на позиції 3.

18. У другому кадрі змінюємо видимість шару з першої картинки на другу, так само, як показано на моєму скрині.