Как я могу удалить линии границ из 2 кадров GIF в фотошопе?

Я создаю анимированный логотип для своего веб-сайта. Это простая 2-кадровая гифка. Единственная разница между двумя кадрами заключается в том, что в первом есть светящийся объект, а во втором нет.

Вот первый кадр .

Теперь, нажав «Сохранить для Интернета», я решил не использовать матовый цвет, потому что цвет фона, который я использую на веб-сайте, — это градиент. И это создает эту уродливую вещь .

Как я уже говорил, я не могу просто использовать матовый цвет, потому что цвет фона моего веб-сайта — градиент серого и черного.

Могу ли я что-нибудь сделать? Мне нужно, чтобы этот логотип был чистым, без линий, и он должен соответствовать градиенту на моем веб-сайте.

Привет, user385, добро пожаловать в GDSE и спасибо за вопрос. Если вы хотите узнать больше о сайте, обратитесь в справочный центр или свяжитесь с одним из нас в чате , как только ваша репутация станет достаточной (20). Продолжайте вносить свой вклад и наслаждайтесь сайтом!

Ответы (2)

.gifне поддерживает альфа-прозрачность, поэтому вокруг вашего логотипа появляется «линия». Самый простой способ — включить градиент в фон.

Единственной проблемой будет динамически меняющийся фон. Чтобы получить альфа-прозрачность в Интернете, используется файл .png, который не поддерживает анимацию. Но поскольку у вас есть только два кадра, вы можете имитировать анимацию с помощью простой анимации CSS или JS.

Как предлагает Afterlame, лучшим решением вашей проблемы является:

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

ИЛИ

  1. Смоделируйте свою анимацию с помощью CSS или JS. Это гораздо лучший вариант, поскольку он дает вам полный контроль над ситуацией. Вам не придется редактировать gif или любой другой сложный ресурс в рамке. Вы можете просто создать два статических изображения и переключать их вперед и назад, даже применяя изящные анимации и переходы. Это определенно выход в данном случае.

Например, можно создать DIV с фоном вашего первого изображения, а затем поместить в него второй кадр в виде IMG. Используя css/js, просто увеличивайте и уменьшайте вложенный IMG, чтобы добиться нужного эффекта.