Как наложить гифку на гифку в фотошопе

Обновлено: 21.11.2024

В этом уроке вы узнаете, как я добавляю этот блестящий движущийся эффект к изображениям, как я сделал для этих правок: x x x. он будет охватывать как метод покадровой анимации, так и метод временной шкалы, поэтому вы можете увидеть, какой метод вы предпочитаете. это легко, если вы уже знаете основы фотошопа и умеете делать гифки!

вам понадобится:

– Adobe Photoshop: я использую версию cc 2017/2018
– базовое изображение
– оверлейные GIF-файлы: это я буду использовать

лайкните/сделайте репост, если считаете это полезным

сначала подготовьте базовое изображение, которое вы используете: загрузите несколько psd-файлов с ресурсных сайтов или раскрасьте его самостоятельно (это урок по раскрашиванию, который я сделал), обрежьте его, повысьте резкость. все это необязательно, но я настоятельно рекомендую это сделать, потому что кто не хочет сделать свою графику красивой? :D

теперь примените наложение. сначала я продемонстрирую метод покадровой анимации:

откройте оверлейный gif в фотошопе, прокрутите вправо на панели покадровой анимации и посмотрите, сколько кадров в гифке:

В этом оверлее, который я использую, 38 кадров, поэтому я возвращаюсь к основному изображению и добавляю еще 37 новых кадров, щелкнув значок "дублировать выбранные кадры":

снова перейдите к оверлею gif, выберите все слои, щелкнув первый слой, затем Shift + последний слой, и сгруппируйте их вместе, нажав значок «создать новую группу»:

выделить все кадры (щелкнув первый кадр, затем Shift + последний кадр), затем скопировать кадры:

выберите все кадры в базовом изображении, затем вставьте кадры. прошлый метод должен быть «чрезмерным выделением» и не забудьте проверить «связать добавленные слои»:

[Примечание 1: при необходимости измените размер оверлея (например, когда оверлей слишком мал или слишком велик). нажмите L или M на клавиатуре (или щелкните инструмент лассо/выделение на панели инструментов), выберите «свободное преобразование», затем перетащите точки привязки в угол/поле]

выберите новую группу вверху и измените режим наложения с «сквозной» на «экран»:

нажмите V (инструмент перемещения) и переместите наложение в нужное место на изображении.

Если вы хотите наложить наложение только на определенную область, используйте инструмент "Лассо" (в основном я использую инструмент "Магнитное лассо"), чтобы выбрать нужную область:

В большинстве случаев он не должен быть очень тонким (в зависимости от базового изображения и наложений), поэтому достаточно приблизительной формы. после этого добавьте маску слоя (убедитесь, что выбрана группа наложения):

маска слоя будет черной, за исключением области, выбранной ранее. его можно редактировать, рисуя с помощью инструмента «Кисть/ластик», инструмента «Ведро с краской» и т. д. Белая область представляет собой область, в которой должно появиться наложение:

[примечание 2: если вам нужно переместить наложение после добавления маски слоя, отсоедините маску, щелкнув цепочку между папкой группы и маской (верхняя папка не связана, а нижняя связана) ]

(я добавил еще один оверлейный gif в шапку, потому что понял, что в предварительном просмотре оверлей на фоне будет не очень четко отображаться из-за изменения размера)

Теперь примените еще одно наложение с помощью метода временной шкалы. щелкните значок «Преобразовать в временную шкалу видео» на основном изображении и наложенном gif-файле соответственно:

[примечание 3: если вы используете более одного наложения, как я делаю в этом руководстве, проверяйте задержку кадра, чтобы убедиться, что частота кадров соответствует вашим требованиям, каждый раз, прежде чем переключаться на временную шкалу. я установил и базу, и оверлей на 0,05]

выделите все слои накладываемого gif-файла, щелкните правой кнопкой мыши и преобразуйте его в смарт-объект:

Щелкните правой кнопкой мыши и скопируйте слой на основу:

выберите новый слой в базовом документе с изображением и измените режим наложения с «сквозного» на «экранный»:

[при необходимости измените размер оверлея — прокрутите немного вверх, чтобы увидеть примечание 1]

нажмите V (инструмент перемещения) и переместите наложение в нужное место на изображении. если вы хотите наложить наложение только на определенную область, используйте инструмент лассо (в основном я использую инструмент магнитного лассо), чтобы выбрать нужную область:

В большинстве случаев он не должен быть очень тонким (в зависимости от базового изображения и наложений), поэтому достаточно приблизительной формы. после этого добавьте маску слоя (убедитесь, что выбрана группа наложения):

маска слоя будет черной, за исключением области, выбранной ранее. его можно редактировать, рисуя с помощью инструмента «Кисть/ластик», инструмента «Ведро с краской» и т. д. Белая область представляет собой область, в которой должно появиться наложение:

[примечание 2: если вам нужно переместить наложение после добавления маски слоя, отсоедините маску, щелкнув цепочку между папкой/объектом группы и маской (верхняя и средняя не связаны, а нижняя один связан)]

перед сохранением проверьте правильность рабочей области. поскольку мой оверлейный gif длиннее моей базы (вместе с двумя другими оверлеями), мне нужно укоротить рабочую область до длины самого короткого (самого короткого) объекта:

Джастин Пот

Джастин Пот
Писатель

Джастин Пот пишет о технологиях уже более десяти лет. Его работы публикуются в журналах Digital Trends, The Next Web, Lifehacker, MakeUseOf и в блоге Zapier. Он также руководит Hillsboro Signal, местным новостным агентством, которое он основал на добровольных началах. Подробнее.

Иногда одного GIF недостаточно. иногда хочется добавить немного текста. Photoshop может справиться с этой задачей, но этот процесс не так интуитивно понятен, как вы думаете, особенно если вы никогда раньше не редактировали анимацию в Photoshop.

При импорте GIF в Photoshop вы заметите, что каждый кадр отображается в разделе «Слои». Примечательно, что изменение порядка слоев не влияет на порядок воспроизведения кадров. Что именно происходит?

Чтобы узнать это, вам нужно открыть окно временной шкалы, которое находится в разделе "Окно" > "Временная шкала".

Это добавит новое окно, в котором вы сможете увидеть кадры в своем GIF и даже нажать кнопку воспроизведения для предварительного просмотра воспроизведения.

Все может быть немного запутанным, так что давайте повторим. Для целей нашего упражнения…

  • Окно «Временная шкала» позволяет управлять порядком воспроизведения кадров и предварительно просматривать анимацию.
  • Окно «Слои» определяет, поверх каких кадров будут отображаться прозрачные наложения. Например, наложение в верхней части списка будет отображаться поверх всех кадров.

Имея доступ к этому, давайте добавим наш оверлей. В этом примере мы будем добавлять текст, поэтому создайте текстовое поле, как обычно.

Как всегда, ваш текст будет добавлен на новый слой. Перетащите это наложение в начало списка слоев.

Точно так же текстовое наложение будет отображаться поверх всех ваших GIF-файлов.

Если это все, что вы хотите сделать, все готово! Но если вы хотите, чтобы ваш оверлей отображался в определенный момент анимации, все становится немного сложнее. Перетащите текстовое поле в центр, чтобы понять, что я имею в виду.

В моем примере это привело к тому, что текст появлялся в первой половине кадров, а затем исчезал.

Возможно, это противоположно тому, что вы хотите, и единственный способ исправить это – переупорядочить все слои. Перетащите ранние кадры в начало списка, поместите текст в середину.

Это позволяет вашему тексту отображаться на полпути к GIF. Позже вы даже можете добавить еще немного текста.

Чтобы сделать все правильно, может потребоваться некоторое время, но поиграйте с порядком слоев достаточно долго, и ваш текст будет отображаться именно тогда, когда вы этого хотите.

Когда вы будете готовы, я предлагаю вам нажать «Файл» > «Сохранить для Интернета», чтобы экспортировать GIF; вы получите большой контроль над качеством, что может помочь уменьшить размер файла. Наслаждайтесь своим новым готовым GIF!

  • ›5 шрифтов, которые следует прекратить использовать (и лучшие альтернативы)
  • › Худшее, что есть в телефонах Samsung, — это программное обеспечение Samsung.
  • › Что означает XD и как вы его используете?
  • › Почему СМС должен умереть
  • › Почему прозрачные чехлы для телефонов желтеют?
  • › Как восстановить метки панели задач в Windows 11

Иногда одного GIF недостаточно. иногда хочется добавить немного текста. Photoshop может справиться с этой задачей, но этот процесс не так интуитивно понятен, как вы думаете, особенно если вы никогда раньше не редактировали анимацию в Photoshop.

При импорте GIF в Photoshop вы заметите, что каждый кадр отображается в разделе «Слои». Примечательно, что изменение порядка слоев не влияет на порядок воспроизведения кадров. Что именно происходит?

Чтобы узнать это, вам нужно открыть окно временной шкалы, которое находится в разделе "Окно" > "Временная шкала".

Это добавит новое окно, в котором вы сможете увидеть кадры в своем GIF и даже нажать кнопку воспроизведения для предварительного просмотра воспроизведения.

Все может быть немного запутанным, так что давайте повторим. Для целей нашего упражнения…

  • Окно «Временная шкала» позволяет управлять порядком воспроизведения кадров и предварительно просматривать анимацию.
  • Окно «Слои» определяет, поверх каких кадров будут отображаться прозрачные наложения. Например, наложение в верхней части списка будет отображаться поверх всех кадров.

Имея доступ к этому, давайте добавим наш оверлей. В этом примере мы будем добавлять текст, поэтому создайте текстовое поле, как обычно.

Как всегда, ваш текст будет добавлен на новый слой. Перетащите это наложение в начало списка слоев.

Точно так же текстовое наложение будет отображаться поверх всех ваших GIF-файлов.

Если это все, что вы хотите сделать, все готово! Но если вы хотите, чтобы ваш оверлей отображался в определенный момент анимации, все становится немного сложнее. Перетащите текстовое поле в центр, чтобы понять, что я имею в виду.

В моем примере это привело к тому, что текст появлялся в первой половине кадров, а затем исчезал.

Возможно, это противоположно тому, что вы хотите, и единственный способ исправить это – переупорядочить все слои. Перетащите ранние кадры в начало списка, поместите текст в середину.

Это позволяет вашему тексту отображаться на полпути к GIF. Позже вы даже можете добавить еще немного текста.

Чтобы сделать все правильно, может потребоваться некоторое время, но поиграйте с порядком слоев достаточно долго, и ваш текст будет отображаться именно тогда, когда вы этого хотите.

Когда вы будете готовы, я предлагаю вам нажать «Файл» > «Сохранить для Интернета», чтобы экспортировать GIF; вы получите большой контроль над качеством, что может помочь уменьшить размер файла. Наслаждайтесь своим новым готовым GIF!

Рекомендуемые истории

HTC Vive Deluxe Audio Strap делает гарнитуру виртуальной реальности более удобной Гарнитура SteamVR теперь имеет встроенные наушники и более удобное крепление для головы. По сравнению с Playstation VR и Oculus Rift, гарнитура виртуальной реальности HTC Vive выглядит немного непривлекательно. Он предлагает окно в красивые виртуальные миры и может похвастаться отслеживанием движения в масштабе комнаты, но, ну, это просто не очень удобно. Вскоре это может измениться. Компания HTC только что объявила о создании ремешка Vive Deluxe Audio Strap, который заменит эластичный головной убор гарнитуры. Новый ремешок не только выглядит намного более эргономичным, но и сочетает в себе одну из самых удобных функций Oculus Rift: встроенные наушники. На первый взгляд, новое крепление для головы Vive выглядит как нечто среднее между ребристым ремешком Rift и регулируемым пластиковым ремешком PlayStation VR. Он достигает макушки головы пользователя, как и существующие мягкие ремни Rift и Vive, но по-прежнему имеет регулируемый размерный диск для затягивания ремешка. Это должно быть заметным улучшением по сравнению с регуляторами ремня на липучке, которые поставляются со стандартной лентой. HTC мало рассказала о наушниках, входящих в комплект, но похоже, что они представляют собой съемное накладное решение, мало чем отличающееся от того, что поставляется с Oculus Rift. Другими словами, вы по-прежнему сможете использовать свои собственные наушники, если встроенный звук вам не нравится. В конце концов, HTC Vive по-прежнему остается более тяжелой гарнитурой виртуальной реальности, чем ее конкуренты, но это может иметь большое значение для смягчения самого большого недостатка Vive.Сколько будет стоить вам это исправление, все еще неизвестно: HTC сообщает, что новый головной убор планируется выпустить где-то во втором квартале, но пока не хочет раскрывать цену.

Гарнитура SteamVR теперь имеет встроенные наушники и более удобное крепление для головы.

Как создать обычный текстовый список всех учетных записей пользователей Windows и их настроек

Вы всегда можете найти учетные записи пользователей в системе Windows с помощью интерфейса настроек, но если вы хотите сохранить красивый файл для печати с этой информацией, проще всего обратиться к командной строке.

Как включить (или отключить) поиск Google в клавиатуре Gboard Android

Клавиатура Google для Android получила новое название: Gboard. Это ставит ее в один ряд с одноименной клавиатурой iOS, перенося многие из ее функций (и многое другое) на Android. Одной из лучших новых функций Gboard является встроенный поиск Google из любого места, где есть доступ к клавиатуре (подумайте об этом как о «портативном»

Как найти и подписаться на календари практически для чего угодно с помощью iCalShare

Каждый день происходят тысячи событий. Годовщина свадьбы, местные хоккейные матчи, дни рождения, кинопремьеры, национальные праздники… список можно продолжить. Трудно отслеживать только избранных, которые имеют отношение к вам. Вот почему мы используем календари.

Как исправить ошибку «Обнаружено наложение экрана» на Android

Начиная с Android Marshmallow, появляется любопытная ошибка, которая иногда показывает свое лицо, но понять ее причину бывает сложно. Ошибка «обнаружено наложение экрана» не позволяет запускать определенные приложения, что делает ее настоящей неприятностью.

Еще истории

Basslet – тактильный сабвуфер на запястье

Basslet — это наручный сабвуфер, который вы "чувствуете".

Законопроект будет штрафовать незаконные автономные транспортные средства на 25 тысяч долларов в день

Разрешения, которые стоят всего 150 долларов США, безусловно, стоят того, чтобы потратить время на их получение, если это окажется альтернативой.

Как отключить заставку при запуске LibreOffice в Windows и Linux

Каждый раз, когда вы открываете программу LibreOffice или даже Центр запуска LibreOffice, появляется экран-заставка. Этот экран-заставка не имеет реальной цели, поэтому, если вы не хотите его видеть, мы покажем вам, как отключить его в Windows и Linux.

Область мозга, которая распознает лица, продолжает расти во взрослом возрасте

Исследователи считали, что после полового созревания мозг фиксируется.

Выпуск ноутбука Pinebook Linux за 89 долларов США ожидается в феврале

11,6-дюймовый ноутбук ARM за 89 долларов – выгодная покупка, но есть и 14-дюймовая модель за 99 долларов США.

Будущее телефона LeEco может быть связано с DirecTV

Телефонам китайской компании, ориентированным на контент, нужно отличное видео. AT&T может предоставить.

Руководства: немного ненужный, но великолепный телефон Kodak Ektra

Ektra не уступает по качеству фотографий, но она великолепна.

Компания ADT Anywhere отслеживает и защищает всю вашу семью

Отслеживание местоположения, обмен личными сообщениями и круглосуточное реагирование на чрезвычайные ситуации звучит как приложение мечты для родителей.

Автономная система Delphi будет доступна автопроизводителям в 2019 году

Не радуйтесь: сначала он будет использоваться в транспортных средствах для совместного использования.

6 инструментов для ускоренного продвижения вашего контент-маркетинга в 2017 году

Буфер. Всемогущий. Нажимать. СумоМе. Почему бы не использовать их все вместе в одном динамичном рабочем процессе?

itsphotoshop – это коллекция всевозможных ресурсов для редактирования в Photoshop, таких как учебные пособия, текстуры, раскраски, шрифты. Здесь вы также найдете руководства по созданию и настройке тем Tumblr. Все организовано с помощью продуманной системы тегов и множества страниц, которые, мы надеемся, сделают вашу работу с сайтом проще и приятнее.

страницы

программа для создания скриншотов

все наши ресурсы

наши темы

статус

Могу ли я задавать вопросы?

Как отправить свои ресурсы?

Наш ящик для отправки всегда открыт, не стесняйтесь его использовать! Однако вы также можете отправить свои ресурсы, добавив itsphotoshop в первые четыре тега своих сообщений. Мы просим вас использовать только один метод и никогда оба.

В настоящее время мы не принимаем запросы. Это может измениться в будущем. Обычно мы принимаем запросы на обучение, но никогда не воссоздаем раскраски.

администраторы

статистика

отказ от ответственности

Мы понимаем этот блог как набор ресурсов – архив, который мы стараемся поддерживать в порядке. Мы всегда думаем о том, как улучшить наши страницы и методы пометки. Большинство ресурсов создается пользователями Tumblr, которые отправляют их нам, однако, если вы хотите, чтобы ваш контент был удален, немедленно сообщите нам об этом.

его фотошоп © 2012–2022

У меня был запрос о том, как сделать перекрывающиеся GIF-файлы, как в этом наборе здесь. Я действительно обнаружил это, экспериментируя, и я уверен, что есть лучшие/более простые способы сделать это, но это то, что я сделал. Если у вас есть какие-либо вопросы, не стесняйтесь, пишите мне! Я использовал Photoshop CS5 для этого набора, но я уверен, что он работает со всеми версиями.

примечание от фотошопа: временная шкала не нужна

Сначала вам понадобится базовая концепция создания GIF. (Есть множество руководств, если вы не знаете, как это сделать) Выберите две сцены, людей и т. д., которые вы хотите перекрыть, и сделайте две отдельные гифки. Вы обрежете их до любого размера, который вы хотите, чтобы ваш gif был. В случае с этим уроком мой пример — 245 на 200 пикселей. Убедитесь, что у них одинаковое количество кадров.

1) После того, как вы раскрасили, увеличили резкость и сделали свой GIF по своему вкусу, вы собираетесь выбрать все кадры и выбрать «Свести кадры в слои» на обоих GIF.

2) Теперь выберите, какую гифку вы хотите поместить на другую. Я не думаю, что это действительно имеет значение, но некоторые из них выглядят лучше в конечном продукте. В этом случае я накладываю гифку Изабель на свою гифку с Саймоном. Поэтому оставьте все кадры выделенными после того, как вы их объединили, и выберите «Копировать кадры» в меню анимации.

3) Теперь перенесите эти кадры на другую гифку, в моем случае на Саймона. Выделите все кадры на втором gif (один из My Simon). После того, как они выбраны, перейдите в меню анимации и нажмите «Вставить кадры». Появится меню, и вам нужно использовать эти настройки:

4) Теперь ваша первая гифка вставлена ​​во вторую гифку. Вы должны видеть только первую гифку, в моем случае Изабель, потому что я поместил ее сверху, а другая ваша гифка — снизу.

5) Перейдите в палитру слоев и выберите все кадры для гифки сверху (мой Изабель). Они будут верхними слоями в палитре и будут иметь замки рядом с ними, так как мы связали слои, так что вы сможете найти их в порядке.

6) Теперь нажмите «control + g», чтобы сгруппировать все эти слои вместе.

7) Оставьте выбранной группу и добавьте маску слоя. (я обвела)

И теперь это должно выглядеть так:

8) Теперь мы готовы стереть часть гифки сверху. Выберите инструмент ластик, и вы можете выбрать размер ластика, как вы хотите. Но я использую этот, так что он дает эффект свечения:

9) Просто начните стирать там, где вы хотите, чтобы внизу отображалась гифка (Саймон внизу). Убедитесь, что маска слоя и группа все еще выделены. И просто нажмите на первый кадр GIF перед удалением.

Маска слоя должна показывать, где вы стираете:

И тогда вы должны начать видеть свою нижнюю гифку, когда стираете:

10) Завершите стирание сколько хотите. Установите время GIF, и все готово! Возможно, вам придется использовать ластик меньшего размера, чтобы добраться до небольших мест, в зависимости от того, сколько вы стираете.

Я надеюсь, что это имеет смысл, и если у кого-то есть вопросы, не стесняйтесь задавать их мне! Поставьте лайк или сделайте репост этой записи, если она оказалась вам полезной.

Читайте также: