GIF to Sprite Sheet converter
A sprites sheet (or sprite strip) is a single image file containing multiple other images, for example animation frames. Sprite sheets are often used in web and game development.
Upload animated image and this tool will convert it to PNG or GIF sprite sheet (with transparent background).
It extracts animation frames and stacks side by side (horizontally), one under another (vertically) or using custom column count, generating a single image file.
You can also specify the size of tiles, how you want the images to be resized and margin between tiles and image edges.
It can perform GIF to sprite sheet, APNG to sprite sheet and WebP to sprite sheet conversions.
If you want to save each frame as a seperate image file, use our GIF splitter instead.
- Ezgif resources
- Help / FAQ
- About and contacts
- Privacy and Cookies
- Search ezgif.com
- Video tools
- GIF to MP4 converter
- Online video cutter
- Video reverser
- Video crop tool
- Video rotator
- Popular file converters
- PDF to GIF converter
- PNG to JPG converter
- WebP to JPG converter
- HEIC to JPG converter
- AVIF to JPG converter
- Other image tools
- Image to Data URI
- Cursor converter (.ani)
- TIFF converter
- MNG tools
- FLIF tools
2 лучших способа конвертировать GIF в лист спрайтов (100% работа)
Хотите знать, как сделать лист спрайтов из GIF? Не волнуйтесь, эта статья расскажет вам о двух создателях таблиц спрайтов и научит их использовать для преобразования GIF в лист спрайтов. Если вы хотите создать GIF из видео, порекомендуйте бесплатный инструмент для создания GIF — MiniTool MovieMaker .
Быстрая навигация:
Сделать лист спрайтов из GIF очень просто. Все, что вам нужно, это средство для создания листов спрайтов. Здесь представлены 2 лучших онлайн-создателя спрайтов. Они бесплатны и работают на 100%. А теперь давайте погрузимся в этот пост и посмотрим, как бесплатно конвертировать GIF в таблицу спрайтов.
2 лучших способа конвертировать GIF в лист спрайтов
- Конвертируйте GIF в Sprite Sheet с EZgif.com
- Преобразование GIF в лист спрайтов с помощью функции «Превратить GIF в лист спрайтов»
Способ 1. Преобразование GIF в лист спрайтов с EZgif.com
EZgif.com — это веб-сайт, предоставляющий услуги редактирования GIF. Он позволяет конвертировать GIF в лист спрайтов, конвертировать лист спрайтов в GIF, превращать видео в GIF, подвергать цензуре GIF, добавлять оверлей в GIF, обрезать GIF, изменять размер GIF, добавить текст в GIF , разделить GIF, обратный GIF, поворот гифка , и т.д.
Этот конвертер GIF в лист спрайтов поддерживает не только GIF, но и другие форматы анимированных изображений, включая APNG, WebP, MNG и FLIF. Таким образом, ожидая преобразования GIF в лист спрайтов, вы можете превратить другие форматы анимированных изображений в лист спрайтов.
Кроме того, он предлагает вам 2 варианта загрузки. Вы можете загрузить GIF с локального адреса или по URL. Кроме того, он также позволяет редактировать видео, например изменять скорость видео, изменять размер видео, обрезать видео, вырезать видео, отключать видео, вращать видео и перевернуть видео.
Вот как конвертировать GIF в таблицу спрайтов онлайн.
Шаг 1. Откройте EZgif.com, чтобы получить его основной интерфейс.
Шаг 2. Нажмите на Трещина для запуска инструмента извлечения кадров GIF.
Шаг 3. На этой странице переключитесь на GIF в лист спрайтов таб.
Шаг 4. Нажмите на Выбрать файл открыть Проводник и выберите целевой GIF, который вы хотите превратить в лист спрайтов. Или вставьте ссылку GIF в поле поиска. Затем нажмите кнопку Загрузить кнопка.
Шаг 5. Здесь вы можете настроить параметры вывода. Вы можете настроить выравнивание плитки, размер плитки и изменить выходной формат, например PNG, GIF или JPG.
Шаг 6. После этого нажмите кнопку Преобразовать в лист спрайтов кнопку для предварительного просмотра листа спрайтов. Если все в порядке, нажмите Сохранить чтобы скачать его из Интернета.
Как выполнить обратный поиск GIF — 4 лучших поисковых систем
Есть ли поисковая система обратного GIF? Как выполнить обратный поиск изображений в формате GIF? В этом посте есть 4 лучших поисковика обратных GIF. Прочтите этот пост прямо сейчас!
Способ 2. Преобразование GIF в лист спрайтов с помощью функции «Превратить GIF в лист спрайтов»
Этот инструмент представляет собой простой инструмент для создания таблиц спрайтов, который поддерживает только импорт файлов GIF. Используя этот конвертер GIF в лист спрайтов, вы можете создать лист спрайтов из GIF в формате PNG или JPG.
Выполните следующие действия, чтобы узнать, как создать таблицу спрайтов из GIF.
Шаг 2. Выберите желаемый выходной формат и загрузите GIF.
Шаг 3. Через некоторое время появится спрайт-лист. Щелкните его правой кнопкой мыши и выберите Сохранить изображение как… возможность сохранить лист спрайтов.
Связанная статья: Топ-3 онлайн-конвертеров GIF в PNG .
Как превратить лист спрайтов в GIF
Если вы хотите преобразовать лист спрайтов в формат GIF, EZgif.com также может вам помочь.
Вот краткое руководство.
Шаг 1. Зайдите на EZgif.com.
Шаг 2. Перейдите к Трещина > Резак для листов Sprite .
Шаг 3. Загрузите лист спрайтов и нажмите Загрузить .
Шаг 4. Затем прокрутите страницу вниз и найдите Метод резки .
Шаг 5. Отметьте понравившийся метод резки и нажмите Порез .
Шаг 6. После этого нажмите кнопку Создание GIF-анимации кнопку для создания GIF.
Шаг 7. Наконец, сохраните его с сайта.
Заключение
В этом посте показано, как преобразовать GIF в лист спрайтов и наоборот. Хотите сделать лист спрайтов из GIF? Попробуйте вышеуказанные методы!
Как создать спрайт-лист с игровым персонажем в Affinity Designer
Если вы когда-нибудь хотели попробовать себя в разработке игр и дизайне персонажей, это руководство для вас! Сегодня мы будем создавать спрайт-лист для сказочного птицеобразного существа для мобильных и видеоигр при помощи различных инструментов и функций в Affinity Designer. Мы пройдём через весь процесс от создания контура эскиза до раскраски и создания ряда поз, которые можно будет использовать в анимации. Давайте начнём!
1. Рисуем базовые части персонажа
Шаг 1
Я обычно начинаю создавать персонажа с эскиза и попытки найти нужное изображение, интересную форму и необычный внешний вид. В поиске оригинальных и необычных решений объединяйте вымышленные детали животных или объектов, которых встречаете в реальности. Вы можете вдохновиться просмотром разделов с игровыми персонажами или игровыми спрайтами на Envato Market, либо поискать спрайты с игровыми персонажами на Pinterest. Попытайтесь придумать свои собственные оригинальные идеи, создавая неожиданные комбинации.
Когда создадите несколько вариаций, выберите одну, которая понравится больше всего, и продолжайте с ней работать. Протестируйте различные позы и выражения лиц.
Я делаю множество приблизительных эскизов, и это помогает мне понять, как двигается мой персонаж, выглядит ли он интересно и оригинально, вписывается ли в окружающую среду или концепт нашей будущей игры и т.д.
Когда я, наконец, довольна сказочным, загадочным видом этого маленького парня, то могу представить эскиз, с которым мы будем работать в этом руководстве. Можете скачать его прямо отсюда – просто кликните правой кнопкой мыши на картинке и сохраните её на свой компьютер.
Шаг 2
Мы будем работать с Векторным режимом Affinity Designer, используя его векторные функции для создания спрайт-листа нашего персонажа для видеоигр, которого легко можно анимировать в различных положениях.
Давайте создадим Новый документ размером 600 х 800 пикселей. Используйте Инструмент «Поместить изображение» для импорта эскиза и расположения в середине холста.
Давайте обведём персонажа. Возьмите Инструмент «Эллипс» (М) и создайте фигуру, подходящую под размер лица. Возьмите Инструмент «Карандаш» (N) и нарисуйте клюв, следуя эскизу. . Можете изменить линии при помощи Инструмента «Узел» (А), чтобы сделать их более плавными.
Шаг 3
Выделите обе созданные нами фигуры и примените Операцию добавления на верхней контекстной панели инструментов. Таким образом мы объединили оба элемента в единую фигуру.
Теперь возьмите Инструмент «Эллипс» (М) для создания глаза и добавьте ещё пару эллипсов, чтобы сделать глаз более детальным. Следуйте линиям эскиза, чтобы фигуры соответствовали эскизу.
Шаг 4
При помощи Инструмента «Карандаш» (N) нарисуйте длинную, дугообразную линию поперёк лица и, если необходимо, измените её при помощи Инструмента «Узел» (А). Мы можем изменить Стиль, Ширину и другие параметры нашей линии на панели Обводки (вы найдёте её в одной из вкладок возле панели Цветов).
Здесь давайте установим Ширину на 11 и перейдём вниз к выпадающему окну «Нажатие». Здесь мы можем изменить ширину отдельных сегментов линии при помощи графика. Выделите правую точку кривой на графике и перетащите её вниз, чтобы сделать правую часть обводки тоньше (нос персонажа).
Шаг 5
Теперь возьмите Инструмент «Прямоугольник» (М) – перейдём к телу. Создайте прямоугольник, подстроив его под тело, и Преобразуйте его в Кривые на верхней контекстной панели инструментов. Перейдите к Инструменту «Узел» (А) и начните сдвигать нижние узлы в разные стороны друг от друга, сделав нижнюю часть шире.
Выделите оба верхних узла и перетащите их вверх, чтобы закрыть голову нашего персонажа. Затем выделите верхний правый узел и используйте функцию «Конвертировать в плавную линию» на верхней контекстной панели инструментов, сделав правую часть прямоугольника плавной и скруглённой.
Шаг 6
Теперь используйте Инструмент «Узел» (А) для изменения левой части тела, добавив больше узлов, сделав углы плавными и контур – соответствующим эскизу.
Шаг 7
Давайте добавим перья в нижней части тела, сформировав что-то вроде юбки. Возьмите Инструмент «Эллипс» (М) и сформируйте сжатую фигуру в нижней левой части тела. Нажмите Option-Shift и перетащите фигуру вправо, создав копию. Повторите то же действие, создав больше копий и заполнив всю нижнюю часть.
Наконец, выделите фигуру тела и перья, перейдите к верхней контекстной панели инструментов и примените «Добавить операции». Отлично! Теперь мы объединили элементы в единую фигуру.
Шаг 8
Теперь переходим к ноге. Давайте сделаем её простой: нарисуйте прямую вертикальную линию с маленькой ступнёй внизу. Перейдите на панель Обводки и добавьте больше глубины ноге, сделав её толще. Установите значение Ширины на 60 и примените график Нажатия, чтобы сделать нижнюю часть тоньше, как показано на скриншоте ниже.
Шаг 9
Теперь нам нужно превратить обводку в фигуру, чтобы мы могли изменять её, добавлять детали, контуры и т.д. Выделив ногу, перейдите в Слой > Разобрать обводку. Фигура выглядит достаточно хорошо, хотя у неё могло бы быть множество узлов.
Т.к. фигура всё ещё выглядит плавной, может быть достаточно затруднительно и времязатратно удалять все ненужные узлы вручную. Здесь у нас есть два варианта: либо оставить фигуру как есть с кучей узлов, либо, если вы – за качество, создать новую фигуру.
Здесь мы можем использовать один из инструментов рисования – либо Инструмент «Карандаш» (N), либо Инструмент «Перо» (P). Я предпочитаю Инструмент «Перо» (P). Просто обведите созданную ногу по верху, создав плавную, скруглённую фигуру, и при помощи Инструмента «Узел» (А) двигайте узлы вокруг.
Шаг 10
У нас есть двухслойная перьевая «юбка» на нашем эскизе, давайте добавим второй слой с телом, покрытым перьями. Скопируйте фигуру тела и вытяните её вниз, сделав фигуру высокой, чтобы она вписалась в эскиз. Удалите верхнюю часть вытянутой фигуры, оставив только юбку. Удалите верхнюю часть растянутой фигуры, оставив только юбку. Можете сделать это при помощи Инструмента «Узел» (А), выделив все ненужные верхние узлы и удалив их.
Как вариант, вы просто можете стереть верхнюю часть фигуры Инструментом «Векторная обрезка». Однако, я предпочитаю первый метод, т.к. Инструмент «Векторная обрезка» оставляет стёртую часть спрятанной внутри обтравочной маски. Во многих случаях это может быть достаточно полезно, например, когда вам нужно сохранить фигуру, но сейчас нам это не нужно.
Шаг 11
Теперь давайте сформируем стилизованную руку или крыло нашего птицеобразного персонажа. Создайте эллипс под размер руки на эскизе и Преобразуйте его в Кривые. Слегка перетащите обе боковые опорные точки, сделав фигуру шире внизу. Добавьте ещё один эллипс, сделав руку согнутой в локте.
Шаг 12
Преобразуйте второй эллипс в Кривые и используйте Инструмент «Узел» (А), чтобы двигать линии и подогнать их под эскиз. При помощи Операции добавления объедините фигуры и сделайте все узлы плавными.
Шаг 13
Наконец, при помощи Инструмента «Карандаш» (N) нарисуйте маленькую кисточку перьев на локте и объедините её с рукой.
Отлично! Контуры готовы. Теперь добавим цвета!
2. Применяя цвета и варьируя позы
Шаг 1
Мы будем работать с тёмно-фиолетовой палитрой. Я обычно выбираю цвета при помощи панели Цветов и Инструмента «Пипетка», которые можно найти над цветовым колесом на панели Цветов.
Постарайтесь сделать верхние части персонажа светлее нижний частей, чтобы отделить элементы друг от друга, сделав их выделяющимися. Сделайте лицо светло-бежевым, создав яркий контраст, чтобы показать главный элемент персонажа, привлекающий внимание зрителей.
Шаг 2
Теперь давайте поработаем над лицом. Примените цвета к всем трём эллипсам глаза, сделав его внутреннюю часть темнее, создав дыру. Давайте изменим красную линию поперёк лица. Сделайте её толще, увеличив Толщину обводки на панели Обводки. Вырежьте (Command-X) линию, выделите бежевую фигуру лица и перейдите в Редактировать > Вставить внутрь. Отлично! Теперь линия находится внутри фигуры лица, как внутри обтравочной маски. Мы всё ещё при желании можем изменить её.
Шаг 3
Давайте добавим немного теней, сделав персонажа более детальным. Возьмите Инструмент «Карандаш» (N) и начните рисовать фигуру, частично закрывающую левую сторону тела. Она не должна быть идеальной, т.к. мы её Вырежем (Command-X) и затем перейдём в Редактировать > Вставить внутри фигуры тела. Сделайте тень слегка темнее тела.
Шаг 4
Используйте Инструмент «Эллипс» (М) для добавления группы мелких кругов вдоль края тени, перекрывающих друг друга и придающих тени текстурный вид. Удерживайте клавишу Shift, чтобы сделать круги идеально ровными.
Добавьте тёмно-фиолетовый эллипс для тени за овалом лица (несколько раз нажмите Command-[, чтобы сдвинуть эллипс за фигуру лица). Добавьте больше деталей, сформировав тёмную тень на нижней «юбке», и добавьте синий оттенок с пёстрыми кругами на правой стороне тела персонажа. Наконец, сделайте руку намного светлее тела, отделив её от остальных элементов.
Не забудьте добавить две маленькие, скруглённые тени на ногах, сделав их более трёхмерными.
Шаг 5
Снизьте Непрозрачность ярко-синего блика на панели Слоёв, чтобы сделать его более мягким.
Если вы хотите поэкспериментировать с цветами, сделать их более яркими, используйте Инструмент «Пипетка», чтобы взять цвет одного элемента и применить его к другому элементу. Если вы ещё не пользовались этим инструментом в Affinity Designer, сначала он может показаться сложным, однако и очень удобным.
Найдите иконку Пипетки на панели Цвета и перетащите её прямо на свою картинку. Вы увидите линзу, которая поможет выбрать нужный цвет, который появится возле иконки Пипетки на панели Цвета. Теперь можете применить его к любой выбранной фигуре, просто кликнув на маленьком цветном кружке на панели Цвета.
Шаг 6
Давайте добавим больше деталей нашему персонажу. Добавьте тени ко всем частям тела, включая голову и руку (если ещё не добавили) и создайте ещё несколько пятен на лице, чтобы сделать его более текстурным.
Поместите ещё пару эллипсов внутри глаза, понемногу делая цвета ярче, чтобы глаза получились сияющими. Вы можете видеть мою панель Слоёв на скриншоте ниже, на котором изображены все части группы глаза.
Шаг 7
Наш персонаж уже выглядит хорошо на этом этапе, но если мы хотим видеть его на детальном фоне для видеоигры, он может сливаться с фоном, если цветовая палитра элементов похожа. Нам нужно сделать нашего персонажа более выделяющимся на любом фоне. Он должен быть привлекательным и хорошо видимым при первом взгляде. Вот простой способ визуально отделить персонажа: нам нужно использовать контуры! Чем толще контур вокруг персонажа, тем более выделяющимся он становится!
Выделите руку, перейдите на панель Цветов и примените чёрную Обводку со значением Ширины 3. Добавьте контур лицу и ногам. Вам может понадобиться выделить элементы внутри группы при помощи панели Слоёв, чтобы применить Обводку.
Шаг 8
Что касается тела, я хочу применить единую обводку ко всей фигуре. Тело состоит из двух элементов, поэтому мы применим небольшой приём. Выделите обе части тела и скопируйте их (Command-C > Command-V). Вы увидите копии на панели Слоёв. Выделите копии и объедините их в единую фигуру при помощи Операции добавления.
Теперь мы можем удалить цвет Заливки объединённой фигуры на панели Цветов и применить жирную Обводку 4, сохраняя контур поверх тела.
Шаг 9
Давайте посмотрим, что у нас получилось. Мы создали фантазийного персонажа, состоящего из тела (вместе с лицом), пары крылатых рук и пары забавных ног. И этого нам хватит для создания двигающегося игрового спрайта! Убедитесь, что вы Сгруппировали (Command-G) все части на панели Слоёв, чтобы работа оставалась аккуратной и единой.
Теперь мы можем создать определённый набор поз, которые будет показывать наш персонаж во время игры. Вы можете поискать раздел со спрайт-листом для игрового персонажа на GraphicRiver, чтобы увидеть, какие позы обычно используются в играх, или создать свои.
Здесь я представила базовые позы, просто двигая части нашего спрайта – стоя, в беге, в прыжке или в обмороке. Обратите внимание, что я удалила сияние из глаз в обморочной позе, чтобы персонаж выглядел более бессознательным.
Победа! Наш спрайт-лист для персонажа фантазийной игры готов!
Отличная работа! Мы только что закончили создание нашего птицеобразного создания и сделали спрайт-лист из нескольких простых поз, которые можно использовать в анимации. Надеюсь, вы нашли для себя полезные приёмы и советы, которые помогут вам получше узнать Affinity Designer или создать несколько новых, уникальных персонажей и спрайт-листы для игр для ПК, браузера или телефонов.
Если хотите получить готовый векторный EPS-файл с нашей птичкой, включая детальные рамки для каждой позы, взгляните на этот спрайт-лист. Его можно использовать для простой анимации.
Наслаждайтесь созданием новых персонажей и не забудьте поделиться своими результатами!
Sprite sheets
A sprite sheet is one big image with several frames of the same sprite on it. For example, you can save this animation:
Like an horizontal sprite sheet:
In the following section you will know how to export and import this kind of images into Aseprite.
Import
To import a sprite sheet use File > Import Sprite Sheet option. Then you can select the file to import with an assigned offset x , y and sprite width , height .
Padding is available if there are gaps between sprites, and the sheet type will affect the order of the sprites taken in.
Export
To export a sprite sheet use File > Export Sprite Sheet option. You can select all visible layers or a certain layer, and select the frames based on tags.
Automate from Command Line
Texture Atlases
A texture atlas is an huge image with all the graphics, sprites and images that a game will use. It’s called «texture» because the image can be loaded into the video memory, to render graphics on screen with hardware acceleration.