Зображення · Генератор спрайтів

Створення CSS-спрайтів на Mac

Пакуйте піктограми в одне зображення з CSS для показу кожної та HTML-переглядом.

Працює на вашому Mac

Запитати ШІChatGPTClaudePerplexityРежим ШІGrokMarkdown

Завантажити OneMacTools Більше інструментів: Зображення

Генератор спрайтів на Mac

Генератор спрайтів зі зразковими файлами та його параметрами

Що Генератор спрайтів створив зі зразкових файлів

Знімки екрана програми зі зразками файлів.

Як користуватися «Генератор спрайтів»

1
Перетягніть свої піктограми
Додайте два або більше зображень. Кожна назва файлу стає класом CSS, тож спершу дайте їм вдалі назви, наприклад «search.png» і «cart.png».
2
Задайте проміжок і префікс
Виберіть проміжок між піктограмами й префікс класу CSS.
3
Позначте піктограми для Retina
Якщо ваші піктограми @2x, увімкніть параметр Retina, щоб вони показувалися вдвічі меншими й чіткими.
4
Клацніть «Створити спрайт»
Піктограми пакуються в рядки й зберігаються як sprite.png разом із sprite.css і сторінкою preview.html у папці з датою в «Завантаження › OneMacTools».
5
Використовуйте на своєму сайті
Покладіть sprite.png і sprite.css поруч, під'єднайте CSS і додайте класи до елементів. Відкрийте preview.html, щоб побачити кожен клас.

Що робить Генератор спрайтів

Піктограми будь-якого розміру щільно пакуються в рядки, кожна отримує власний клас CSS з правильним положенням і розміром, а сторінка попереднього перегляду показує їх усі. Задайте проміжок між піктограмами, префікс класу та чи є піктограми @2x для чітких Retina-екранів.

Чудово підходить для

Завантажуйте набір піктограм одним запитом
Створіть спрайт-лист для гри
Зберіть прапорці чи емодзі для сайту в один файл

Пояснення параметрів

Відступ між піктограмами: 0, 2, 4 або 8 px; типово 2 px. Невеликий проміжок не дає сусіднім піктограмам «наповзати» одна на одну, коли сторінку масштабують.
Піктограми @2x (показуйте вдвічі меншими для чітких Retina-екранів): За замовчуванням вимкнено. Якщо ввімкнено, CSS показує кожну піктограму в половині її розміру в пікселях і відповідно масштабує спрайт, тож піктограми подвійної роздільності чітко виглядають на екранах Retina.
Префікс класу CSS: Початок назви кожного класу; «icon», якщо порожньо. З префіксом icon «search.png» стає .icon-search.

Найкращі практики

Перш ніж почати, назвіть файли малими літерами через дефіс. З них утворюються назви класів, а «@2x» відкидається автоматично.
Використовуйте піктограми з прозорим тлом, щоб аркуш працював на сторінці будь-якого кольору.
Створюйте піктограми Retina рівно вдвічі більшими за розмір показу, з парними розмірами в пікселях, щоб половинні розміри були цілими пікселями.
Потім стисніть sprite.png у «Стисненні PNG»; для аркушів піктограм PNG з палітрою часто значно менший.
Використовуйте проміжок 2 px або більше, якщо піктограми масштабуватимуться чи показуватимуться під час масштабування сторінки.

Працює з

У: Два або більше зображень будь-яких розмірів, зазвичай піктограми PNG.
Вихід: sprite.png (усі піктограми, зібрані разом), sprite.css (по одному класу на піктограму з її розміром і положенням) і preview.html.

Піктограми різних розмірів щільно пакуються в рядки, найвищі — першими.
Файли з однаковою назвою отримують пронумеровані класи, як-от -2, тож нічого не губиться.

Запитання про Генератор спрайтів

Що таке спрайт-аркуш CSS?

Одне зображення з багатьма піктограмами та CSS, який показує лише одну піктограму на елемент, зсуваючи тло. Усі піктограми завантажуються одним запитом.

Як використати спрайт на своєму вебсайті?

Завантажте sprite.png і sprite.css в одну папку, підключіть CSS на сторінці й додайте до елемента класи на кшталт class="icon icon-search".

Як утворюються назви класів?

З назви кожного файлу, малими літерами, з пробілами й символами, заміненими дефісами, після вашого префікса. «Shopping Cart.png» з префіксом icon стає .icon-shopping-cart.

Чи можна використовувати піктограми різного розміру?

Так. Кожна піктограма зберігає власний розмір, а її клас CSS отримує відповідні ширину й висоту.

Як зробити спрайти чіткими на екранах Retina?

Створюйте піктограми вдвічі більшими, ніж показуватимете, і ввімкніть параметр @2x. CSS покаже їх у половинному розмірі, і на екранах із високою роздільністю вони виглядатимуть чітко.

Чи можна використати це для ігрових спрайтів?

Так. sprite.css містить положення й розмір кожного зображення на аркуші, які можна зчитати в ігровий рушій чи код canvas.

Чи вивантажує «Генератор спрайтів» мої файли?

Ні. Генератор спрайтів працює повністю на вашому Mac, тож ваші файли ніколи його не залишають, і все працює офлайн.

Чи змінить Генератор спрайтів мої оригінальні файли?

Ні. Результати зберігаються як нові файли в папці з датою в «Завантаження» › OneMacTools, а оригінали лишаються точно такими, як були, якщо ви не ввімкнете параметр, який каже інше.

Що потрібно для Генератор спрайтів?

Лише Mac з macOS 26 або новішою. Більше нічого встановлювати не треба.