Как удалить фон из гифок в фотошопе
Обновлено: 03.07.2024
Требования: базовые знания GIF (если нет, нажмите здесь), Photoshop CS5 или более поздней версии (поскольку я буду использовать инструмент «Быстрое выделение»), время и терпение!
Начнем с PSD (чтобы сэкономить время в этом руководстве)
Конечный результат PSD (для лучшего визуального восприятия/понимания)
Шаг 1:
Откройте Photoshop. Импортируйте GIF-файл в Photoshop и удалите все лишние кадры, которые вам не нужны. Примечание. GIF, который я использую для этого урока, состоит из двенадцати кадров. И если вы хотите сохранить некоторую работу и следовать дальше, я настоятельно рекомендую вам загрузить первый PSD, на который я дал ссылку. Я уже импортировал GIF, сгруппировал слои и переместил/изменил размер для вас! Перейдите к шагу 4, если вы используете PSD, на который я ссылаюсь.
Шаг 2:
После импорта GIF и удаления лишних кадров и слоев сгруппируйте слои в группу слоев, выбрав все слои и нажав ctrl + G (command + G, если вы используете Mac). Примечание. На приведенном ниже снимке экрана уже прозрачный фон, потому что я выполнял шаги немного в другом порядке, так что пока просто игнорируйте это.
Шаг 3:
После того, как вы сгруппировали слои, убедитесь, что размер холста составляет 500 пикселей в ширину. (Изображение >> Размер холста). Затем выберите группу в окне «Слои» и измените ее размер/переместите (используя инструмент «Перемещение») к центру. (Не обращайте внимания на зеленый фон на скриншоте, опять же, я делаю немного в другом порядке.)
Шаг 4:
Теперь, когда у вас есть группа GIF/слоев и холст нужного размера, пришло время приступить к удалению фона. К сожалению, нет возможности удалить фон GIF в Photoshop сразу, поэтому мы должны делать это кадр за кадром и слой за слоем, но с помощью инструмента быстрого выделения это совсем не займет много времени! Выберите свой первый кадр и первый слой и используйте инструмент быстрого выбора, чтобы выбрать контур персонажа Логана Лермана. Это займет всего одну-две секунды (отличный инструмент)!
Шаг 5:
После того, как вы сделаете свой выбор, мы уточним границу. Для этого убедитесь, что ваш инструмент выделения все еще активен, а затем нажмите «Уточнить край» в меню «Параметры». Появится диалоговое окно. Это настройки, которые я использовал, чтобы немного смягчить края. Нажмите "ОК".
Шаг 6:
После уточнения выбора он все равно должен быть выбран. Затем убедитесь, что у вас по-прежнему выделены первый слой и первый кадр, и в окне «Слои» создайте маску слоя для первого слоя.
Шаг 7:
Повторите шаги 4–6 для каждого кадра, убедившись, что для каждого кадра выбран правильный соответствующий слой (второй слой для второго кадра, третий слой для третьего кадра и т. д.).
Вот как теперь выглядит мой интерфейс после выполнения всех быстрых выделений, уточнения краев и создания масок слоев (обратите внимание, что на этом снимке экрана слои не сгруппированы, поскольку я выполнял шаги в другом порядке):< /p>
Шаг 8:
Итак, теперь ваш GIF должен воспроизводиться с прозрачным фоном. Чтобы придать ему цветной фон, создайте новый слой в окне «Слои», перетащите его вниз и залейте любым цветом, который хотите, с помощью инструмента «Заливка». (В данном случае светло-зеленый).
Шаг 9:
Когда у вас есть зеленый (или любой другой цвет) фон, пришло время начать раскрашивать только лицо/тело Логана Лермана. Если у вас нет Photoshop CS6, этот процесс будет немного утомительным, но не займет слишком много времени.
По сути, вы создадите корректирующие слои для каждого отдельного слоя в GIF и создадите обтравочные маски для этих слоев.
Если у вас CS6, просто создайте корректирующие слои (я использовал «Кривые» и карту коричневато-бежевого градиента) и перетащите их поверх группы слоев. Затем наведите указатель мыши между каждым корректирующим слоем и группой под ним, затем нажмите Alt и щелкните. Это должно создать обтравочную маску, чтобы корректирующие слои влияли только на группу слоев, а не на фон. Чтобы лучше понять это, ознакомьтесь с шагом 6 в этом моем руководстве.
Если у вас нет CS6, вам нужно создать корректирующие слои и создать дубликаты этих корректирующих слоев и перетащить каждый из них над каждым слоем. Затем, удерживая нажатой клавишу «Alt», щелкните мышью, наведя указатель мыши между двумя слоями, чтобы создать обтравочную маску, например.
За исключением того, что после применения обтравочных масок убедитесь, что все корректирующие слои расположены в одинаковом порядке для каждого слоя. Итак, убедитесь, что карта градиента всегда находится над кривыми или наоборот (на снимке экрана выше я еще не исправил это для слоя 20, если вы видите).
Если этот шаг сбивает с толку, снова обратитесь к шагу 6 этого руководства.
Шаг 10:
После того, как вы придали Логану (и только Логану, фон не должен измениться, если вы правильно выполнили шаг 9) вид сепии, пришло время добавить текст на фон.
Это текст, который использовался на оригинальном плакате, и я тоже буду использовать:
Итак, это моя жизнь. И я хочу, чтобы вы знали, что я одновременно счастлив и опечален, и все еще пытаюсь понять, как это могло быть.
С помощью инструмента «Текст» (выглядит как большая буква «Т» на панели инструментов) вы можете перетащить текстовое поле, щелкнув и перетащив его так, чтобы оно заполнило холст, а затем скопируйте и вставьте текст выше внутрь. Затем перетащите текстовый слой над фоновым слоем, но ниже группы слоев вашего gif (не обращайте внимания на то, что текст на снимке экрана ниже красный):
Я использовал следующие настройки шрифта:
Интерстейт, 40,3 пикселя, резкий, зеленый
Затем я использовал инструменты "Масштаб по вертикали" и "Масштаб по горизонтали" в
Окно символов, чтобы сделать определенные линии более широкими или высокими. (Окно >> Персонаж) Вы также можете выделить определенные слова, если хотите. Примечание. Прежде чем вносить изменения в окно персонажа, убедитесь, что весь текст, который вы хотите изменить, выделен.
Как только вы будете удовлетворены своим текстом, продублируйте слой и перетащите его под текущий текстовый слой. Однако измените цвет на светло-бежевый. Затем переместите слой с бежевым текстом немного влево, чтобы придать тексту эффект тени.
Совет. Вы также можете «связать» текстовые слои, если хотите переместить или настроить оба слоя одновременно, выбрав слои и щелкнув маленький значок ссылки в нижней части окна «Слои»! (первая слева)
И все! Это, опять же, то, как выглядит мой окончательный GIF (посмотрите на конечный результат PSD, на который я ссылался в начале этого урока, и посмотрите на каждый отдельный кадр, чтобы лучше понять, что я сделал, или если ваш GIF не получилось вот так):
Примечание: этот GIF я увеличил резкость, и вы можете легко сделать все сразу с помощью этого урока!
Шаг 11:
Обязательно измените скорость задержки кадров в окне анимации, а для сохранения перейдите в «Файл» >> «Сохранить для Интернета и устройств», убедитесь, что в раскрывающемся меню выбран «GIF», «Опция зацикливания». установлен на «Навсегда», а размер GIF для Tumblr меньше 1 МБ!
Надеюсь, это помогло! Возможно, это было немного запутанно в некоторых частях, поэтому, если вы хотите, чтобы я что-то прояснил, или у вас есть какие-либо вопросы, не стесняйтесь, дайте мне знать!
GIF — это здорово.Они связаны, привлекают внимание читателя и могут вызвать у вашей аудитории столь необходимое хихиканье, чтобы скрасить их день. Но как убрать фон из GIF? У нас есть вы.
Мы собираемся показать вам, как вы можете сделать это всего за несколько секунд прямо здесь, используя Unscreen . Если у вас еще нет GIF, давайте углубимся в то, где вы можете найти бесплатные GIF и как создать свой собственный.
Где найти бесплатные GIF-файлы
Хотите использовать GIF в своих маркетинговых материалах? Лучше всего убедиться, что это бесплатно — так вы защитите и себя, и свою компанию.
Без лицензионных отчислений означает, что вы можете использовать изображение в коммерческих целях бесплатно без аккредитации создателя. Вы можете найти бесплатные GIF-файлы на Giphy.
Мы пошли дальше и нашли маленькую симпатичную божью коровку, которая поможет вам изменить фон GIF.
Вы можете сохранить GIF в Giphy, щелкнув правой кнопкой мыши GIF и выбрав > «Сохранить изображение как…»
Как удалить фон из GIF-изображения онлайн на Unscreen
После того как вы сохранили свой GIF, пришло время выяснить, как удалить фон из GIF. Удаление фона означает, что вы можете заменить его другим цветом, изображением или видео — или даже добавить GIF в набор слайдов, и фон останется нетронутым.
Самый быстрый способ удалить фон из GIF – это перейти к пункту "Снять экран" .
Как убрать белый фон из GIF
<р>1. Откройте Unscreen .
<р>2. Перетащите GIF на экран. Вот так:
Как изменить фон GIF
После того как вы удалили фон своего GIF-файла, изменить его на другой можно всего за пару кликов. В Unscreen вы просто:
<р>1. Нажмите кнопку под GIF с надписью «Изменить фон».2. Теперь вы можете выбрать «Видео», если хотите, чтобы фоном вашего GIF было видео — это придает GIF очень динамичный вид.
Это будет выглядеть примерно так:
<р>3. Если вы хотите просто изменить цвет фона, перейдите на вкладку цвета. 
Это может выглядеть примерно так:
<р>4. Вы также можете добавить фотографию в качестве фона, выбрав вкладку «Изображение». 
Мы выбрали фото травы — кажется подходящим, верно?
Как удалить фон из GIF в After Effects
Хотя это немного сложнее, вы также можете удалить фон GIF в After Effects.
Сначала создайте новую композицию.
Если у вас не зеленый фон экрана, вам потребуется использовать инструмент "Кисть для ротоскопии" в After Effects.
Идите вперед и загрузите свой GIF или выберите видео со своего компьютера, перетащив его в проект в левой части After Effects.
После загрузки в After Effects добавьте черновик на временную шкалу.
На верхней левой панели инструментов After Effects найдите инструмент «Кисть для ротоскопии».
Затем дважды щелкните видео и нарисуйте внутри объект или человека, которого хотите сохранить в GIF. Когда вы закончите рисовать внутри объекта или человека, отпустите кнопку мыши, и края станут розовыми.
Если у вас есть кровотечение, вы можете нажать Option и закрасить области, которые вы хотите удалить с фоном. Когда вы закончите, вы увидите, что розовый контур переместился, чтобы указать, какие части будут сохранены.
Под видео вы найдете зеленую полосу. А под ней вы найдете еще одну серую полосу, которая указывает, к какой части видео будет применена кисть для ротоскопии. Перетащите его вправо по всей временной шкале, чтобы применить эффект ко всему видео.
Нажмите пробел, чтобы сохранить изменения; это может занять пару минут.
Теперь вы увидите, что ваш фон видео или GIF был удален. Чтобы создать прозрачный фон, выберите > Toggle Transparency Grid; это добавит прозрачный фон.
Теперь пришло время экспортировать видео в формате GIF. Идите вперед и перейдите в> Файл> Экспорт> Добавить в очередь рендеринга.
Теперь вы увидите, что ваши настройки рендеринга появятся в очереди рендеринга. Идите вперед и выберите > Render Settings > Best Settings. Затем выберите > Модуль вывода. Убедитесь, что для вашего канала установлено значение > QuickTime. Каналы должны быть установлены > RGB + Alpha. Глубина должна быть > Миллионы цветов + . Примените эти настройки и нажмите > Сохранить. Теперь ваше видео будет обработано.
Теперь вам нужно открыть Photoshop .
Перетащите файл GIF.mov, который вы только что экспортировали из After Effects.
Загрузив видео в Photoshop, выберите > Файл > Экспорт > Сохранить для Интернета (предыдущая версия).
Выберите > Оригинал на вкладках, измените предустановку на > GIF 126 Dithered . Убедитесь, что установлен флажок "Прозрачность".
Теперь нажмите > Сохранить.
Если вам нужно более подробное руководство, ознакомьтесь с нашей статьей о том, как удалить фон видео в After Effects.
Вот оно! Мы только что рассказали вам, как удалить фон GIF онлайн и в After Effects + Photoshop. Оказывается, это немного сложнее, поэтому, если вам нужно быстрое решение, переходите к Unscreen.
Знаете ли вы, что в Photoshop можно удалить фон анимированного GIF-файла? Мы собираемся показать вам, как это сделать.
Хотя Adobe Photoshop является основным программным обеспечением для обработки и редактирования фотографий, его также можно использовать для редактирования коротких видеороликов и файлов GIF. Если вы чувствуете себя комфортно в Photoshop и хотите отредактировать GIF, вам не нужно устанавливать дополнительное программное обеспечение.
Photoshop предоставляет простые в использовании и понятные инструменты для редактирования видео, которые идеально подходят для коротких проектов. Если вы хотите узнать, как удалить фон из GIF в Photoshop, продолжайте читать!
Шаг 1. Импортируйте файл
Во-первых, вам необходимо импортировать короткое видео или GIF-файл в Photoshop. Вы можете сделать это так же, как вы открываете другие проекты. Нажмите и перетащите файл со своего ПК в Photoshop или выберите «Файл» > «Открыть» и дважды щелкните файл, который хотите импортировать.
Шаг 2. Настройте свой проект
Чтобы удалить фон или какие-либо определенные части из вашего GIF, вы должны иметь возможность редактировать каждый кадр отдельно. Для этого щелкните правой кнопкой мыши группу видео, расположенную в правой части Photoshop, и выберите «Разгруппировать слои».
В результате у вас останется только видеослой, который затем нужно преобразовать в смарт-объект. Щелкните правой кнопкой мыши слой 1 и выберите «Преобразовать в смарт-объект». После этого снова щелкните правой кнопкой мыши слой 1 и выберите «Редактировать содержимое».
Откроется новая вкладка в Photoshop, где вы сможете редактировать все файлы GIF. Теперь вы можете закрыть исходную вкладку.
Шаг 3. Приступим к редактированию
Внизу экрана находится временная шкала, на которой можно редактировать GIF. Внизу экрана есть ползунок, с помощью которого можно увеличить кадры, чтобы вам было проще их разделить.
Самый точный способ удалить фон из GIF — это покадровое удаление. Это означает, что вам придется удалять фон из каждого кадра отдельно. Это займет некоторое время, особенно если ваше видео длинное.
Перемещая синюю стрелку с красной линией на видео, вы можете перемещать свой GIF кадр за кадром.
Как удалить фон GIF
Есть несколько способов удалить фон.
Сначала нажмите на кадр, который вы хотите отредактировать, а затем начните удалять фон. Вы можете использовать любой метод удаления фона, от инструмента «Быстрое выделение» до инструмента «Многоугольное лассо».
Имейте в виду, что вам нужно сделать это для каждого отдельного кадра в вашем GIF. Конечный результат должен выглядеть примерно так, как показано на изображении ниже.
Шаг 4. Сохраните проект в формате GIF
Photoshop позволяет сохранить проект в формате GIF. Для этого выберите «Файл» > «Сохранить как» и выберите GIF в качестве типа вывода.
Фотошопу может потребоваться некоторое время для обработки этого действия в зависимости от размера проекта, так что наберитесь терпения. Когда появятся параметры сохранения, просто нажмите «ОК». Сохраненный проект должен быть анимированным GIF.
Удалить фон анимированного GIF в Photoshop
Adobe Photoshop предлагает множество замечательных функций, в том числе возможность редактировать анимированные GIF-файлы и короткие видеоролики. Если вы выполните описанные выше шаги, вы можете легко удалить фон из своего GIF или видео. Довольно круто, правда?
Пытаюсь отредактировать простой анимированный gif и не могу убрать синий фон. Я попробовал два метода, и оба раза я получил эффект двоения.
Я удаляю синий фон с помощью. щелкая по всем слоям и делая это. Затем я также попытался сохранить для Интернета и заменить синие квадраты прозрачными. Оба раза это происходит.
это легко исправить?
Это странная ошибка с фотошопом. Он никогда не вводит информацию о слое в кадр gif, поэтому, когда браузер его видит, он предполагает, что видны все кадры, вместо того, чтобы следовать функции перехода к следующему слою.
изменить: переключиться на временную шкалу видео в фотошопе, и она должна правильно передавать прозрачность для каждого кадра
В любом случае, Adobe действительно нужно это исправить, поскольку в Photoshop временная шкала видео сохраняет эту информацию, а в обычном редакторе gif — нет.
Спасибо за объяснение. А еще за то, что сделал гифку для меня. Я только что попробовал то, что вы сказали, но я действительно не понимаю, как использовать временную шкалу видео прямо сейчас. Как ни странно, я переключился на временную шкалу видео, а затем обратно на обычную временную шкалу. И баг действительно пропал. Я смог удалить фон и сохранить без проблем. Я не знаю, это еще один обходной путь или что-то еще, но это работает.
Gif отлично выглядит. Для того, для чего он будет использоваться, вы даже не заметите краев. Еще раз спасибо.
Это не ошибка. С помощью GIF вы можете не отбрасывать («удалять») информацию из предыдущего кадра при рисовании нового.
Выберите фреймы, щелкните правой кнопкой мыши и установите для параметра удаления значение "Автоматически".
Вот я написал чушь!
Это объясняет, ПОЧЕМУ это происходит, а не то, как это исправить.
Редактировать. Иногда проще всего создать папку и экспортировать каждый кадр в отдельный файл. Отредактируйте их каждый по отдельности, а затем создайте из них гифку. Имейте в виду, что GIF используют 8-битную прозрачность. Это означает, что пиксель виден либо на 100%, либо на 0%. Только 24-битная прозрачность допускает полувидимые пиксели, доступные в других форматах. SWF, MNG, APNG, MOV могут использоваться для 24-битной прозрачной анимации, но имеют разные уровни поддержки.
Читайте также: