Afbeeldingen · Spritesheetmaker

Een CSS-spritesheet maken op een Mac

Bundel iconen in één afbeelding met de CSS om elk ervan te tonen, plus een HTML-voorvertoning.

Werkt op je Mac

Vraag AIChatGPTClaudePerplexityAI-modusGrokMarkdown

Download OneMacTools Meer tools voor Afbeeldingen

Spritesheetmaker op een Mac

Spritesheetmaker met voorbeeldbestanden en de opties

Wat Spritesheetmaker van de voorbeeldbestanden heeft gemaakt

Schermafbeeldingen uit de app, met voorbeeldbestanden.

Zo gebruik je Spritesheetmaker

1
Sleep je iconen erin
Voeg twee of meer afbeeldingen toe. Elke bestandsnaam wordt een CSS-klasse, dus geef ze eerst goede namen, bijvoorbeeld “search.png” en “cart.png”.
2
Stel de tussenruimte en het voorvoegsel in
Kies de ruimte tussen iconen en het voorvoegsel van de CSS-klasse.
3
Markeer retina-iconen
Als je iconen @2x zijn, zet dan de retinaoptie aan zodat ze scherp op halve grootte worden getoond.
4
Klik op Maak sheet
Iconen worden in rijen gezet en bewaard als sprite.png, met sprite.css en een pagina preview.html, in een map met datum in Downloads › OneMacTools.
5
Gebruik het op je site
Zet sprite.png en sprite.css bij elkaar, koppel de CSS en voeg de klassen toe aan elementen. Open preview.html om elke klasse te zien.

Wat Spritesheetmaker doet

Iconen van elk formaat worden strak in rijen gezet, elk krijgt een eigen CSS-klasse met de juiste positie en grootte, en een voorvertoningspagina toont ze allemaal. Stel de ruimte tussen iconen in, het klassevoorvoegsel en of de iconen @2x zijn voor scherpe retinaschermen.

Ideaal voor

Laad een set iconen in één verzoek
Maak een spritesheet voor een game
Vlaggen of emoji bundelen voor een website

Opties uitgelegd

Ruimte tussen iconen: 0, 2, 4 of 8 px; standaard 2 px. Een kleine tussenruimte voorkomt dat naburige iconen in elkaar overlopen als de pagina wordt ingezoomd.
Iconen zijn @2x (toon op halve grootte voor scherpe Retina-schermen): Standaard uit. Als het aanstaat, toont de CSS elk icoon op de helft van zijn pixelgrootte en schaalt het vel mee, zodat iconen met dubbele resolutie scherp ogen op retinaschermen.
CSS-klassevoorvoegsel: Het begin van elke klassenaam; “icon” als je het leeg laat. Met het voorvoegsel icon wordt “search.png” .icon-search.

Tips

Geef bestanden vooraf namen in kleine letters met koppeltekens. De klassenamen worden daaruit afgeleid en “@2x” wordt automatisch weggelaten.
Gebruik iconen met een transparante achtergrond, zodat het vel op elke paginakleur werkt.
Maak retina-iconen op precies twee keer de weergavegrootte, met even pixelgroottes, zodat de gehalveerde formaten hele pixels zijn.
Comprimeer sprite.png daarna met Comprimeer PNG; een PNG met palet is voor iconensheets vaak veel kleiner.
Gebruik een tussenruimte van 2 px of meer als de iconen worden geschaald of getoond terwijl de pagina is ingezoomd.

Werkt met

In: Twee of meer afbeeldingen, meestal PNG-iconen, van elk formaat.
Uit: sprite.png (alle iconen samengevoegd), sprite.css (één klasse per icoon met formaat en positie) en preview.html.

Iconen van verschillende formaten worden strak in rijen gezet, de hoogste eerst.
Bestanden met dezelfde naam krijgen genummerde klassen, zoals -2, zodat er geen verloren gaat.

Vragen over Spritesheetmaker

Wat is een CSS-spritesheet?

Eén afbeelding met veel iconen, met CSS die per element maar één icoon toont door de achtergrond te verschuiven. Al je iconen worden zo in één verzoek geladen.

Hoe gebruik ik de sprite op mijn website?

Upload sprite.png en sprite.css naar dezelfde map, koppel de CSS in je pagina en voeg klassen zoals class="icon icon-search" toe aan een element.

Hoe worden de klassenamen gemaakt?

Uit elke bestandsnaam, in kleine letters met spaties en symbolen omgezet in streepjes, na je voorvoegsel. “Shopping Cart.png” met het voorvoegsel icon wordt .icon-shopping-cart.

Kan ik iconen van verschillende formaten gebruiken?

Ja. Elk icoon behoudt zijn eigen formaat, en de CSS-klasse krijgt de bijbehorende breedte en hoogte.

Hoe maak ik sprites scherp op retinaschermen?

Maak de iconen twee keer zo groot als je ze toont en zet de optie @2x aan. De CSS toont ze dan op halve grootte, wat scherp oogt op schermen met een hoge resolutie.

Kan ik het gebruiken voor gamesprites?

Ja. sprite.css vermeldt de positie en het formaat van elke afbeelding op het vel, en dat kun je inlezen in een game-engine of canvascode.

Uploadt Spritesheetmaker mijn bestanden?

Nee. Spritesheetmaker werkt volledig op je Mac, dus je bestanden verlaten hem nooit en het werkt offline.

Verandert Spritesheetmaker mijn originele bestanden?

Nee. Resultaten worden als nieuwe bestanden bewaard in een map met datum in Downloads › OneMacTools, en je originelen blijven precies zoals ze waren, tenzij je een optie aanzet die iets anders zegt.

Wat heeft Spritesheetmaker nodig?

Alleen een Mac met macOS 26 of nieuwer. Je hoeft verder niets te installeren.