Преобразование листа спрайтов в формат 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
Фон вводаЦвет, который вы хотите изменить.
(Оставьте пустым, чтобы ничего не делать).
(Введите «прозрачный», чтобы заполнить
прозрачных областей.)
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 также может создавать листы спрайтов. Используя этот веб-сайт, вы можете загрузить несколько изображений и изменить их порядок сверху вниз.
