Online sprite generator: CSS Sprite Generator, Editor, and Code

Преобразование листа спрайтов в формат GIF – онлайн-инструменты для работы с файлами GIF

Самый простой в мире инструмент для создания файлов GIF

Эта онлайн-утилита позволяет преобразовывать листы спрайтов в анимированные файлы GIF. Вы можете настроить ширину и высоту отдельных спрайтов, а также задать ориентацию листа спрайтов. Кроме того, вы можете изменить уровень масштабирования и фон выходного GIF. Создан экспертами GIF из команды Browserling.

мы в твиттере! tweet tweet

Любите то, что мы делаем? Вы можете следить за нами в Twitter для получения обновлений!

лист спрайтов

Щелкните здесь, чтобы выбрать изображение с вашего устройства, нажмите Ctrl+V, чтобы использовать изображение из буфера обмена, перетащите файл с рабочего стола или загрузите изображение из любого примера ниже.

Отпустите кнопку мыши, чтобы импортировать этот файл.

Ваш файл импортируется…

Импорт из файла

Сохранить как. ..

Копировать в буфер обмена

Скачать

Экспорт в Pastebin

gif

Не могу конвертировать.

Произошла ошибка.

Цепочка с…

Удалить цепочку

Сохранить как…

Загрузить

Экспортировать в Pastebin

Удалить инструменты?

Этот инструмент нельзя объединить в цепочку.

Бесплатный план позволяет использовать инструменты GIF только для личного использования . Перейдите на премиум-план, чтобы использовать инструменты GIF в коммерческих целях. Кроме того, эти функции будут разблокированы при обновлении:

Коммерческое использование

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

Нет времени ожидания

Пропустите таймер ожидания загрузки и мгновенно загрузите GIF.

Неограниченное использование

Используйте все инструменты GIF столько раз в день, сколько хотите.

Мгновенная загрузка

Пропустите это диалоговое окно и загрузите GIF одним щелчком мыши.

Нет рекламы

Вы не увидите ни одной рекламы.

Мгновенное копирование в буфер обмена

Скопируйте GIF в буфер обмена одним щелчком мыши.

Бесплатный план позволяет использовать инструменты GIF только для личного использования . Перейдите на премиум-план, чтобы использовать инструменты GIF в коммерческих целях. Кроме того, эти функции будут разблокированы при обновлении:

Коммерческое использование

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

Нет времени ожидания

Пропустите таймер ожидания загрузки и мгновенно загрузите GIF.

Неограниченное использование

Используйте все инструменты GIF столько раз в день, сколько захотите.

Мгновенная загрузка

Пропустите это диалоговое окно и загрузите GIF одним щелчком мыши.

Нет рекламы

Вы не увидите ни одной рекламы.

Мгновенное копирование в буфер обмена

Скопируйте GIF в буфер обмена одним щелчком мыши.

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

Коммерческое использование

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

Нет времени ожидания

Пропустите таймер ожидания загрузки и мгновенно загрузите GIF.

Неограниченное использование

Используйте все инструменты GIF столько раз в день, сколько хотите.

Мгновенная загрузка

Пропустите это диалоговое окно и загрузите GIF одним щелчком мыши.

Нет рекламы

Вы не увидите ни одной рекламы.

Мгновенное копирование в буфер обмена

Скопируйте GIF в буфер обмена одним щелчком мыши.

Параметры преобразования листа спрайтов в gif

Свойства кадра GIF

Ширина кадра Ширина кадра.

Высота рамыВысота рамы.

Смещение XЛевый угол кадра (x).

Смещение YВерхний угол рамы (y).

Игнорируемые кадрыИгнорируйте эти кадры в GIF.
Примеры: «2, 5», «6-12», «1, 4-6».

Проигрыватель GIF и масштабирование Уровень

Запустить GIF PlayerПоказать покадровую анимацию.

Задержка кадраЗадержка между кадрами (миллисекунды).

Слева направоСправа налевоСверху внизСнизу вверх

Ориентация кадраОриентация воспроизведения кадра.

ZoomZoom уровень воспроизведения и

выходной GIF.

Изменить фон GIF

Фон вводаЦвет, который вы хотите изменить.
(Оставьте пустым, чтобы ничего не делать).
(Введите «прозрачный», чтобы заполнить
прозрачных областей.)

ThresholdMatch оттенки цвета.
Измеряется в процентах
от 0% до 100%.

Фон вывода Установите фон вывода GIF.

Что такое конвертер спрайтов в gif?

узнайте больше об этом инструменте

Это браузерная программа, которая преобразует полосу спрайтов в анимацию GIF. Вы можете загрузить изображение в формате PNG или JPG и превратить его в многокадровую GIF-анимацию, которую можно быстро загрузить. Полоса спрайтов — это изображение, состоящее из серии горизонтальных или вертикальных кадров одинакового размера, образующих анимацию. Когда вы загружаете полосу анимации, приложение рисует зеленые прямоугольники вокруг всех кадров и нумерует их. Если ваш лист спрайтов имеет нестандартный размер, вы можете настроить кадры анимации с помощью параметров ширины кадра, высоты кадра, положения кадра по оси X и положения кадра по оси Y. Если есть какие-либо кадры, которые вы не хотите включать в GIF, вы можете игнорировать их с помощью параметра «Игнорировать кадры». После настройки свойств листа спрайтов вы можете просмотреть анимацию в своем браузере, щелкнув опцию «Запустить GIF Player». Вы можете указать скорость воспроизведения GIF (в миллисекундах на кадр), изменить направление движения кадров (вертикальное или горизонтальное, вперед или назад), а также установить уровень масштабирования, изменяющий размер GIF как в проигрывателе предварительного просмотра, так и в загруженный файл. Поскольку листы спрайтов часто имеют высококонтрастный цвет в качестве фона, вы можете изменить фон анимации. Для этого вам нужно указать исходный цвет фона, настроить процент совпадения оттенков и установить новый цвет фона. Потрясающе!

Примеры преобразования листа спрайтов в gif

Нажмите, чтобы использовать

Создание GIF-файла мыльного пузыря

В этом примере мы преобразуем лист горизонтального спрайта с последовательностью статических кадров в анимированный GIF-файл лопающегося мыльного пузыря в форме сердца . Лист спрайтов состоит из восьми кадров размером 135 на 165 пикселей. Первый кадр начинается в верхнем левом углу с координатами (0, 0). Движение кадров происходит с запада на юг (слева направо), а скорость воспроизведения составляет 180 миллисекунд на спрайт. Размер выходного GIF увеличен до 200%, что делает его вдвое больше (270 на 340 пикселей). (Источник: Freepik, автор: Upklyak.)

Обязательные параметры

Эти параметры будут использоваться автоматически, если вы выберете этот пример.

Ширина кадра Ширина кадра.

Высота рамыВысота рамы.

Смещение XЛевый угол кадра (x).

Смещение YВерхний угол рамы (y).

Игнорируемые кадрыИгнорируйте эти кадры в GIF.
Примеры: «2, 5», «6-12», «1, 4-6».

Запустить GIF PlayerПоказать покадровую анимацию.

Задержка кадраЗадержка между кадрами (миллисекунды).

Слева направоСправа налевоСверху внизСнизу вверх

Ориентация кадраОриентация воспроизведения кадра.

ZoomZoom уровень воспроизведения и
выходной GIF.

Фон вводаЦвет, который вы хотите изменить.
(Оставьте пустым, чтобы ничего не делать).
(Введите «transparent», чтобы заполнить
прозрачных областей.)

ThresholdMatch оттенки цвета.
Измеряется в процентах
от 0% до 100%.

Фон вывода Установите фон вывода GIF.

Мультипликационный запуск ракеты

В этом примере анимируется анимация запуска ракеты из вертикального изображения полосы спрайтов JPG. Чтобы заставить его работать, мы устанавливаем размер спрайта 350×210, устанавливаем направление спрайта сверху вниз (с севера на юг) и включаем проигрыватель GIF. Так как вокруг ракеты много лишнего пространства, мы смещаем прямоугольник ограничивающей рамки вправо на 460 пикселей (смещение по оси x). Мы отображаем GIF в исходном размере (100%) и обновляем задержку кадра до 200 миллисекунд. (Источник: НАСА.)

Обязательные параметры

Эти параметры будут использоваться автоматически, если вы выберете этот пример.

Ширина кадра Ширина кадра.

Высота рамыВысота рамы.

Смещение XЛевый угол кадра (x).

Смещение YВерхний угол рамы (y).

Игнорируемые кадрыИгнорируйте эти кадры в GIF.
Примеры: «2, 5», «6-12», «1, 4-6».

Запустить GIF PlayerПоказать покадровую анимацию.

Задержка кадраЗадержка между кадрами (миллисекунды).

Слева направоСправа налевоСверху внизСнизу вверх

Ориентация кадраОриентация воспроизведения кадра.

ZoomZoom уровень воспроизведения и
выходной GIF.

Фон вводаЦвет, который вы хотите изменить.
(Оставьте пустым, чтобы ничего не делать).
(Введите «transparent», чтобы заполнить
прозрачных областей.)

ThresholdMatch оттенки цвета.
Измеряется в процентах
от 0% до 100%.

Фон вывода Установите фон вывода GIF.

Анимация игрового спрайта

Лист спрайтов в этом примере содержит несколько полос анимации Mega Man Zero. Чтобы анимировать второй вариант (во второй строке), мы указываем, что левый и верхний углы первого кадра находятся в позиции (10, 130). Установив размер кадра 75х120, мы видим, что образовался ненужный 10-й кадр, поэтому удаляем его в опции «Игнорировать кадры». Мы также меняем цвет входного синего фона (шестнадцатеричный цвет #4CB7E5) на зеленый фон (шестнадцатеричный цвет #28AA54). Исключаем из замены все возможные тона синего, установив порог совпадения тона на 0%. (Источник: SNK Corporation.)

Обязательные параметры

Эти параметры будут использоваться автоматически, если вы выберете этот пример.

Ширина кадра Ширина кадра.

Высота рамыВысота рамы.

Смещение XЛевый угол кадра (x).

Смещение YВерхний угол рамы (y).

Игнорируемые кадрыИгнорируйте эти кадры в GIF.
Примеры: «2, 5», «6-12», «1, 4-6».

Запустить GIF PlayerПоказать покадровую анимацию.

Задержка кадраЗадержка между кадрами (миллисекунды).

Слева направоСправа налевоСверху внизСнизу вверх

Ориентация кадраОриентация воспроизведения кадра.

ZoomZoom уровень воспроизведения и
выходной GIF.

Фон вводаЦвет, который вы хотите изменить.
(Оставьте пустым, чтобы ничего не делать).
(Введите «transparent», чтобы заполнить
прозрачных областей.)

ThresholdMatch оттенки цвета.
Измеряется в процентах
от 0% до 100%.

Фон вывода Установите фон вывода GIF.

Все инструменты GIF

Не нашли нужный инструмент? Дайте нам знать, какого инструмента нам не хватает, и мы его создадим!

Воспроизведение GIF кадр за кадром

Быстрый просмотр, воспроизведение и загрузка отдельных кадров GIF.

Преобразование GIF в лист спрайтов

Быстрое создание листа спрайтов из всех кадров GIF.

Преобразование листа спрайтов в GIF

Быстрое создание анимации GIF из полосы спрайтов.

Изменить скорость воспроизведения GIF

Быстро изменить скорость воспроизведения анимации GIF.

Отразить GIF-анимацию

Быстро перевернуть GIF-анимацию по горизонтали или вертикали.

Инвертировать анимацию GIF

Быстро инвертировать все кадры в анимированном GIF.

Сжатие GIF-анимации

Быстро уменьшите GIF-файл и уменьшите его размер.

Изменить цвет фона GIF

Быстро изменить цвет фона анимированного GIF.

Изменить количество циклов GIF

Быстро изменить количество повторений GIF.

Повернуть анимацию GIF

Быстро повернуть анимацию GIF на заданный угол.

Изменение размера анимации GIF

Быстрое изменение ширины и высоты статического или анимированного GIF.

Обрезать GIF-анимацию

Быстро обрезать область из GIF-анимации.

Цензура анимации GIF

Быстрое удаление конфиденциальной информации из GIF.

Pixelate a GIF Animation

Быстрое пикселирование любой области GIF-анимации.

Размытие GIF-анимации

Быстрое размытие любой области в GIF-анимации.

Повышение резкости анимации GIF

Быстрое повышение резкости любой области анимации GIF.

Изменить яркость GIF

Быстро увеличить или уменьшить яркость GIF.

Изменить контрастность GIF

Быстро увеличить или уменьшить контрастность GIF.

Создать прозрачный GIF

Быстро сделать любой цвет в GIF прозрачным.

Заливка прозрачного GIF

Быстрое заполнение прозрачных областей GIF сплошным цветом.

Удалить кадры GIF

Быстро удалить один или несколько кадров из анимированного GIF.

Извлечение кадров GIF

Быстрое извлечение нескольких кадров из GIF.

Просмотр кадров GIF

Быстрый предварительный просмотр анимации GIF с любой частотой кадров (быстрой или медленной).

Рандомизация кадров GIF

Быстрое перемешивание кадров анимации GIF.

Увеличить анимацию GIF

Быстро увеличить размер GIF.

Изменить продолжительность GIF

Быстро изменить общее время воспроизведения GIF.

Добавить границу GIF

Быстро обведите анимацию GIF рамкой.

Удалить границу GIF

Быстро удалить границу, окружающую анимацию GIF.

Добавить фон GIF

Быстро добавить фон к анимированному GIF.

Удалить фон GIF

Быстро удалить фон из анимированного GIF.

Добавить текст в GIF

Быстро добавить любой текст (титры, субтитры) в анимированный GIF.

Добавление таймера в GIF

Быстрое добавление часов рабочего времени в анимацию GIF.

Добавление счетчика кадров в GIF

Быстрое добавление счетчика, показывающего номера кадров.

Скругление углов GIF

Быстрое скругление углов GIF-анимации.

Преобразование GIF в оттенки серого

Быстро удалить цвета из GIF и оставить только оттенки серого.

Вырезать фрагмент из GIF

Быстро вырезать диапазон кадров или временной интервал из GIF.

Замедление анимации GIF

Быстрое уменьшение частоты кадров анимации GIF.

Ускорение анимации GIF

Быстрое увеличение частоты кадров анимации GIF.

Создание цветного GIF-файла

Быстрое создание сплошного или градиентного GIF-файла.

Создать случайный GIF

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

Создание GIF-файла размером 1×1 Pixel

Быстрое создание крошечного GIF-файла-разделителя 1×1.

Создание GIF-бумеранга

Быстро создавайте цикл GIF вперед и назад.

Добавление белого шума в GIF

Быстрое рисование случайных пикселей в анимированном GIF.

Оптимизация анимации GIF

Быстрая оптимизация анимации GIF для использования меньшего объема памяти.

Анализ GIF-анимации

Быстрая печать низкоуровневых сведений о GIF и его кадрах.

Скоро в продаже Эти инструменты для работы с GIF уже в пути

GIF Creator

Создавайте анимированные GIF-файлы в своем браузере.

Приостановить GIF

Заморозить GIF на определенном кадре.

Изменение порядка кадров GIF

Изменение порядка кадров в анимации GIF.

Добавление кадров в GIF

Вставка одного или нескольких кадров в анимацию GIF.

Уменьшить размер GIF

Уменьшить размер GIF.

Уточнить края GIF

Сгладить края прозрачного GIF.

Добавить звук в GIF

Добавить звуковую дорожку в GIF.

Посмотрите, как GIF выглядит на разном фоне

Нарисуйте GIF на разном фоне, чтобы увидеть, как он выглядит.

Постепенное исчезновение GIF

Постепенное исчезновение кадров GIF.

Постепенное появление GIF

Постепенное появление кадров GIF.

Перекрестное затухание кадров GIF

Перекрестное затухание GIF кадр за кадром.

Кроссфейд двух GIF-файлов

Кроссфейд двух GIF-анимаций.

Превратить один GIF в другой

Плавное преобразование одного GIF в другой GIF.

Остановить зацикливание GIF

Остановить зацикливание GIF и воспроизвести его только один раз.

Нормализовать скорость GIF

Установить одинаковое значение задержки между всеми кадрами GIF.

Изменить частоту кадров GIF

Изменить частоту кадров GIF.

Изменить качество GIF

Изменить качество GIF.

Изменить размер холста GIF

Увеличить или уменьшить размер холста GIF.

Сделать GIF больше

Увеличение ширины и высоты GIF.

Сделать GIF меньше

Уменьшить ширину и высоту GIF.

Преобразовать PGN в GIF

Создать анимацию шахматной партии из файла PGN.

Преобразовать SGF в GIF

Создать анимацию для игры в го из файла SGF.

Преобразовать PDN в GIF

Создать анимацию игры в шашки/шашки из файла PDN.

Создать GIF с эффектом пасьянса

Создать GIF-анимацию выигрыша в пасьянсе.

Анимировать игру «Жизнь»

Создать GIF-анимацию «Игры жизни».

Преобразование GIF в Base64

Base64 — кодирование GIF.

Преобразовать Base64 в GIF

Base64-декодировать GIF.

Преобразование GIF в Base58

Base58-кодирование GIF.

Преобразовать Base58 в GIF

Base58-декодировать GIF.

Преобразование GIF без чересстрочной развертки в GIF с чересстрочной разверткой

Преобразование последовательного GIF в прогрессивный GIF.

Преобразование чересстрочного GIF в не чересстрочный GIF

Преобразование прогрессивного GIF в последовательный GIF.

Преобразование APNG в GIF

Преобразование анимированного PNG в анимированный GIF.

Преобразование GIF в APNG

Преобразование анимированного GIF в анимированный PNG.

Преобразование APNG в GIF

Преобразование анимированного PNG в анимированный GIF.

Преобразование GIF в Webp

Преобразование анимированного GIF в анимированный Webp.

Преобразование Webp в GIF

Преобразование анимированного Webp в анимированный GIF.

Преобразование GIF в AVIF

Преобразование анимации GIF в анимацию AV1 (AVIF).

Преобразование AVIF в GIF

Преобразование анимации AV1 (AVIF) в анимацию GIF.

Преобразование GIF в HEIF

Преобразование анимации GIF в анимацию HEIF.

Преобразование HEIF в GIF

Преобразование анимации HEIF в анимацию GIF.

Преобразование GIF в PNG

Экспорт одного кадра из GIF в PNG.

Преобразование PNG в GIF

Преобразование неподвижного изображения PNG в статический GIF.

Преобразование GIF в JPG

Экспорт одного кадра из GIF в JPEG.

Преобразование JPG в GIF

Преобразование фотографии JPEG в статичный GIF.

Преобразование GIF в BMP

Экспорт одного кадра из GIF в BMP.

Преобразование BMP в GIF

Преобразование неподвижного файла BMP в статический GIF.

Преобразование GIF в BPG

Экспорт анимации GIF в анимацию BPG.

Преобразование BPG в GIF

Преобразование анимированного BPG в анимированный GIF.

Преобразование GIF в AVI

Преобразование анимации GIF в видео AVI.

Преобразование AVI в GIF

Преобразование видео AVI в анимацию GIF.

Преобразование GIF в WMV

Преобразование анимации GIF в видео WMV.

Преобразование WMV в GIF

Преобразование видео WMV в анимацию GIF.

Преобразование GIF в MP4

Преобразование анимации GIF в видео MP4.

Преобразование MP4 в GIF

Преобразование видео MP4 в анимацию GIF.

Преобразование GIF в MKV

Преобразование анимации GIF в видео MKV.

Преобразование MKV в GIF

Преобразование видео MKV в анимацию GIF.

Преобразование GIF в MOV

Преобразование анимации GIF в видео MOV.

Преобразование MOV в GIF

Преобразование видео MOV в анимацию GIF.

Преобразование GIF в GIFV

Преобразование анимации GIF в видео GIF (GIFV).

Преобразование GIFV в GIF

Преобразование видео GIF (GIFV) в анимацию GIF.

Преобразование GIF в URL-адрес данных

Создание URI данных из анимации GIF.

Преобразование URL-адреса данных в GIF

Реконструировать GIF из URI данных.

Преобразовать GIF в ASCII Art

Нарисовать один или несколько кадров GIF как ASCII Art.

Преобразование ASCII-графики в GIF

Создание анимации из нескольких художественных рисунков ASCII.

Преобразовать GIF в ANSI Art

Нарисовать один или несколько кадров GIF как ANSI Art.

Преобразовать ANSI Art в GIF

Создать анимацию из нескольких ANSI художественных рисунков.

Преобразование GIF в Unicode Art

Нарисуйте один или несколько кадров GIF, используя глифы Unicode.

Преобразование Unicode Art в GIF

Создание GIF из нескольких рисунков Unicode.

Преобразование GIF в шрифт Брайля

Нарисуйте один или несколько кадров GIF, используя символы Брайля.

Преобразование рисунков Брайля в GIF

Создание анимации GIF из символов Брайля.

Изменить цвета в GIF

Заменить один цвет в GIF на другой.

Сделать GIF черно-белым

Преобразование всех цветов в GIF только в два черно-белых.

Извлечение цветов GIF

Найдите цветовую палитру, используемую в GIF.

Извлечь индекс цвета GIF

Найти индекс цвета, используемый в GIF.

Произвольный индекс цвета GIF

Произвольное изменение индексов цвета GIF.

Уменьшить количество цветов GIF

Удалить цвета из GIF.

Повторное квантование цветов GIF

Запуск различных алгоритмов квантования цветов в GIF.

Создание GIF в формате True Color

Создание GIF с более чем 256 цветами.

Создание бинарного цветного GIF

Преобразование 256-цветного GIF в 2-цветный GIF.

Добавление дизеринга в GIF

Преобразование GIF без дизеринга в GIF с дизерингом.

Удалить дизеринг из GIF

Объединить пиксели с дизерингом и создать GIF без дизеринга.

Изменить задержку кадров

Изменить интервал задержки между отдельными кадрами GIF.

Разделить GIF

Разделить GIF на два или более GIF.

Объединение файлов GIF

Объединение двух или более файлов GIF в один файл GIF.

Сдвиг GIF

Сдвиг кадров GIF вправо или влево.

Скрыть часть GIF

Скрыть выделенную область в GIF, нарисовав над ней блок.

Разрезать GIF

Извлечь часть (диапазон кадров) из GIF.

Дублировать GIF

Создать несколько копий GIF рядом друг с другом.

Дублирование кадров GIF

Создание нескольких копий отдельных кадров GIF.

Наклон GIF-анимации

Наклон GIF-анимации под углом.

Исправить перекос GIF

Отменить перекос в GIF-анимации.

Закрутить GIF

Создать завихрение пикселей любого радиуса в GIF.

Создать GIF с белым шумом

Создать GIF с анимацией белого шума.

Создать квазистатический GIF

Заставить анимацию GIF двигаться так медленно, чтобы она казалась почти статичной.

Создать однокадровый GIF

Создать статичный GIF, содержащий только один кадр.

Создать пустой GIF

Создать пустой GIF.

Водяной знак для GIF

Добавление полупрозрачного водяного знака в анимацию GIF.

Преобразование GIF в ZIP-архив

Извлеките все кадры GIF из папки и заархивируйте их.

Добавить комментарий к GIF

Добавить скрытый комментарий в раздел метаинформации GIF.

Удалить метаинформацию GIF

Удалить всю метаинформацию из GIF.

Создать GIF из GIF

Одновременно анимировать несколько GIF бок о бок.

Создание анимированного сообщения

Добавление эффекта анимации к сообщению.

Поместите один GIF на другой GIF

Наложите два GIF и поместите один GIF поверх другого GIF.

Поместите GIF на изображение

Наложение анимированного GIF на любое изображение или фотографию.

Поместить изображение в GIF

Наложить любое изображение или фотографию на анимированный GIF.

Эмуляция медленного изображения

Преобразование любого изображения в формат GIF, который имитирует медленную скорость Интернета.

Создать GIF-файл загрузки

Создать GIF-анимацию счетчика загрузки.

Сбой GIF-анимации

Позвольте Zalgo уничтожить GIF-анимацию.

Подпишись! Не пропустите обновления

Уведомления Мы сообщим вам, когда добавим этот инструмент

Будем рады получить от вас обратную связь!

Создано с любовью

51K

@browserling

Мы Browserling — дружелюбная и веселая компания по кросс-браузерному тестированию, работающая на инопланетных технологиях. В Browserling мы любим делать жизнь людей проще, поэтому мы создали эту коллекцию онлайн-инструментов GIF. Нашими инструментами ежемесячно пользуются миллионы случайных пользователей, поскольку наш простой в использовании пользовательский интерфейс не требует продвинутых навыков работы с компьютером. За кулисами наши инструменты GIF на самом деле основаны на наших инструментах веб-разработчика, которые мы создали за последние пару лет. Проверь их!

Секретное сообщение

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

Политика конфиденциальности мы не регистрируем данные!

Все преобразования и расчеты выполняются в вашем браузере с использованием JavaScript. Мы не отправляем ни единого бита о ваших входных данных на наши серверы. Обработки на стороне сервера нет вообще. Мы используем Google Analytics и StatCounter для анализа использования сайта. Ваш IP-адрес сохраняется на нашем веб-сервере для дополнительной аналитики. Бесплатный план не использует файлы cookie и не сохраняет информацию о сеансе в файлах cookie. Премиум и групповые планы используют файлы cookie для хранения информации о сеансе, чтобы вы всегда были в системе. Мы используем локальное хранилище вашего браузера для сохранения ввода инструментов. Он остается на вашем компьютере.

Условия обслуживания юридические вопросы

Используя онлайн-инструменты Gif, вы соглашаетесь с нашими Условиями обслуживания. Все инструменты бесплатны для личного использования, но чтобы использовать их в коммерческих целях, вам необходимо приобрести премиум-план. Вы не можете делать незаконные или сомнительные вещи с нашими инструментами. Мы можем заблокировать ваш доступ к инструментам, если обнаружим, что вы делаете что-то плохое. Мы не несем ответственности за ваши действия и не даем никаких гарантий. Мы можем пересмотреть наши условия в любое время.

9 Бесплатные веб-сайты для создания спрайтов в Интернете

Рейтинги редактора:

Рейтинги пользователей:

[Всего: 1 В среднем: 1]

В этой статье вы прочитаете о 9 бесплатных веб-сайтах для создания спрайт-листов . Это довольно легко объединить несколько изображений в одно изображение. Все, что вам нужно сделать, это перетащить несколько изображений на холст. Если это необходимо, вы можете настроить вывод каждого изображения вручную. Вы можете указать тип файла изображения, в котором вы хотите загрузить изображение. Создатель спрайтов поддерживает форматы файлов PNG, GIF и JPEG. Кроме того, вы можете упомянуть отступы между изображениями. После этого вы можете загрузить объединенный файл изображения.

Большинство сайтов позволяют изменять вывод различными способами. Вы можете изменить выравнивание всех изображений, таких как вертикальное, горизонтальное, диагональное и компактное. Есть и другие варианты, откуда вы можете получить код CSS и HTML. Затем вы можете скопировать их или сохранить в формате TXT.

На каждом веб-сайте есть несколько изображений, которые вызывают HTTP-запрос к серверу. Это может замедлить результат загрузки веб-страницы. Но использование этих онлайн-конструкторов листов спрайтов сводит к минимуму ненужные накладные расходы. Сайты предлагают вам добавить несколько изображений и предоставить вам одно изображение, которое на самом деле является упакованным изображением всех загруженных изображений.

Читайте также: Получите эффекты анимации CSS бесплатно.

Давайте прочитаем о бесплатных веб-сайтах для создания спрайтов.

1. Генератор спрайтов CSS

CSS Sprite Generator — онлайн-конструктор спрайтов. Веб-сайт позволяет создавать, редактировать и кодировать листы спрайтов CSS.

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

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

Чтобы настроить результат, вы можете нажать на опцию Настройка . Оттуда вы можете получить доступ к общим настройкам, таким как исправление макета, CSS/LESS, отступы и префикс стиля. Сайт сохраняет расположение изображений как компактное, горизонтальное и вертикальное. Кроме того, вы можете включить закодированное изображение в CSS. Легко исправить отступы между изображениями в пикселях. Вы можете вручную настроить результат каждого изображения. Для этого щелкните любое изображение, назовите его и зафиксируйте его координаты в пикселях.

После настройки результата его можно сохранить. Когда вы закончите, нажмите «Загрузки». Опция загрузки позволяет сохранить файл в форматах PNG, CSS и HTML. Также вы можете сохранить стиль спрайта в формате TXT.

2. ZeroSprites

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

Используя этот сайт, вы можете загрузить несколько файлов. Все, что вам нужно позаботиться о размере. Размер файла каждого изображения не должен превышать 1 МиБ. Сайт утверждает, что вы можете добавить около 500 файлов изображений. Он поддерживает только формат файла PNG. Кроме того, вы должны убедиться, что вы называете файл буквенно-цифровыми символами.

Чтобы создать листы спрайтов, вы должны перетащить файлы PNG в интерфейс. Все файлы быстро загружаются. Ниже вы можете настроить результат листов спрайтов. Вы можете настроить отступы, чтобы создать пространство между изображениями. Это также позволяет вам включить PNG-8 для квантования изображения с 256 цветами. Кроме того, этот генератор оптимизирует размер файла PNG. После этого вы можете нажать кнопку Pack ниже.

Сайт размещает все изображения одним файлом по вертикали. Сохраняет результат на сайте 30 дней. И если вы нажмете на изображение, оно покажет такие детали, как конфигурация, то есть отступы, оптимизация, png8. Другие детали, такие как CSS, сценарий, сводка и т. д.

3. Toptal

Toptal — еще один хороший веб-сайт для создания листов спрайтов. Это простой веб-сайт, на котором вы можете установить несколько изображений в один файл изображения.

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

Над интерфейсом есть параметры для настройки отступов между изображениями и выравнивания. Вы можете выровнять все изображения в виде двоичного дерева по вертикали, горизонтали и диагонали. Какие бы изменения вы ни внесли, вы можете просмотреть их в правом поле. Затем вы можете нажать кнопку загрузки, чтобы сохранить все изображения только в одном изображении. Изображение сохраняется в формате PNG.

4. Инструмент «Спрайты CSS»

Инструмент «Спрайт CSS» — один из простых инструментов спрайтов. Этот инструмент для создания листов спрайтов позволяет создавать спрайты CSS за считанные минуты. Все, что вам нужно сделать, это перетащить изображения в интерфейсе. Он поддерживает форматы файлов PNG, JEPG, GIF. Вы можете загрузить более одного изображения в этих форматах.

После загрузки изображений вы можете установить параметры для настройки вывода. Вы можете выбрать тип файла изображения, например GIF, JPG, PNG. Также вы можете установить выравнивание в вертикальном или горизонтальном режиме. Отступ по умолчанию равен 0, но вы можете установить его по своему усмотрению. Если вы выберете файл изображения в формате GIF, вы также можете определить прозрачный цвет пикселя. После этого вы можете нажать кнопку «Создать CSS-спрайт». И тогда вы увидите код CSS и HTML ниже. Вы можете скопировать и вставить код на веб-страницу или загрузить изображение таблицы спрайтов CSS. Вы также можете скачать zip-файл.

5. Stitches

Веб-сайт Stitches — еще один производитель листов спрайтов. По сути, это генератор листов HTML-спрайтов. Кроме того, сайт очень похож на первый сайт, упомянутый в этой статье.

Когда вы откроете веб-сайт, вы увидите несколько изображений значков. Вы можете удалить их и загрузить свои изображения. Для этого вы можете нажать «Открыть» и загрузить несколько изображений со своего компьютера. Чтобы изменить результат изображения, вы можете нажать на Настройка вариант. Там вы можете изменить макет как вертикальный, горизонтальный, компактный, CSS, LESS. Кроме того, вы можете настроить отступы между всеми изображениями. Когда вы закончите, вы можете сохранить настройку.

Если вы хотите экспортировать CSS, вы также можете загрузить кодировку в формате TXT. После этого вы можете загрузить изображение в формате CSS, HTML, в формате SpriteSheet или StyleSheet. Файл изображения сохраняется в формате PNG.

6. Free Sprite Sheet Packer

 

Free Sprite Sheet Packer — онлайн-конструктор листов спрайтов. Это альтернатива программному обеспечению TexturePacker. Здесь, используя этот онлайн-инструмент, вы можете создавать спрайты за считанные минуты.

Все, что вам нужно сделать, это открыть веб-сайт и удалить изображения, видимые в интерфейсе. Затем вы можете нажать «Добавить спрайты», чтобы загрузить несколько изображений. Раздел настроек позволяет вам изменить формат данных как CSS, хэш JSON, массив JSON или формат LESS. Вы можете изменить выравнивание как вертикальное, горизонтальное и компактное. Генератор позволяет изменить заполнение в PX. Вы также можете упомянуть префикс класса стиля.

Какие бы изменения вы ни делали, слева отображается предварительный просмотр. Затем вы можете загрузить изображение в формате PNG и JSON.

7. Спрайты CSS

Как следует из названия (спрайты CSS), это онлайн-конструктор листов спрайтов. Используя этот сайт, вы можете загрузить в интерфейс до 2000 файлов. Общий размер файла должен быть 32 МБ.

После просмотра файла изображения с компьютера можно перейти к следующему шагу. На этом этапе вы можете выбрать тип вывода. Рекомендуемый тип файла — PNG. Но вы также можете выбрать JPEG и GIF.

Существует еще один необязательный параметр, в котором вы можете указать префикс класса CSS. Кроме того, вы можете указать отступы между изображениями. Вы можете выбрать отступ между изображениями от 1 до 20 пикселей. После этого вы можете нажать Создать кнопку S prite для создания листов спрайтов. Вы можете сохранить спрайты, щелкнув правой кнопкой мыши. Ниже вы увидите кодировку CSS и HTML каждого загруженного вами изображения. Вы также можете скопировать это, если требуется.

8. CodeShack

CodeShack — самый простой веб-сайт для создания CSS-спрайтов. Здесь вам просто нужно перетащить все изображения в интерфейс. И этот инструмент объединяет все изображения в одно изображение. Затем вы можете загрузить объединенное изображение в формате PNG.

Однако вы не можете настроить вывод изображений. Но ниже есть ссылка, которая называется «Генератор спрайтов CSS». Вы можете открыть это, загрузить одно изображение за раз в интерфейсе. Затем вы можете установить такие параметры, как имя файла, высота, ширина и т. д. Если вы прокрутите страницу вниз, она также покажет кодировку CSS для каждого изображения.

9. Instant Sprite

Instant Sprite также может создавать листы спрайтов. Используя этот веб-сайт, вы можете загрузить несколько изображений и изменить их порядок сверху вниз.