Softonic

Afgeronde hoeken van de afbeelding

Stap 1 / 3 Hoekradius

Besturingssystemen, appwinkels en UI-ontwerpsystemen houden allemaal van afgeronde hoeken: iOS-iconen, Material-kaarten en moderne Tailwind-componenten. Upload een willekeurige afbeelding; deze tool rondt de vier hoeken af tot de straal die u instelt, exporteert als PNG met transparante hoeken en past desgewenst per hoek een andere straal toe voor het uiterlijk van een afscheurstrookje of een tekstballon.

Zo rondt u de hoeken van een afbeelding af

  1. 1

    Een afbeelding uploaden

    JPG, PNG of WebP.

  2. 2

    Kies een straal

    In pixels of als procent van de kortere zijde.

  3. 3

    Optioneel: verschillend per hoek

    Rond alleen de bovenste hoeken af (kaart) of asymmetrisch (kaartje).

  4. 4

    Kies achtergrond

    Transparant (PNG) of in een vaste kleur wanneer je het als JPG slaat.

  5. 5

    Exporteren

    PNG behoudt een afgeronde rand; JPG wordt uitgevlakt naar de gekozen kleur.

Keuzes voor de straal van veelvoorkomende gebruikersinterface-vormen

Voorinstellingen voor de straal

Vorm Straal
Subtiele UI-kaart 4–8 px
Material Design-kaart 4 px (of 8 px in M3)
iOS-appicoon 22,37% van de zijde (de ‘squircle’)
macOS-appicoon 18,75% van de zijde
Instagram-storyballon 12–16 px
Afgeronde avatar 50% van de korte zijde (volledig rond)
Afscheurstrookje Asymmetrisch – rond slechts één of twee hoeken af
Staartzijde van chatballon Eén hoek klein, de rest groter

Het squircle-probleem

iOS-iconen zijn geen eenvoudige afgeronde rechthoeken; ze gebruiken een ‘superellips’ die wiskundig gezien een soepeler overgang heeft. Echte squircles gaan verder dan wat een CSS border-radius of een eenvoudig alfamasker kan weergeven; de tool benadert ze met een afgeronde rechthoek van hoge orde die bij typische icoongroottes niet te onderscheiden is.

Transparantiegedrag

  • PNG-uitvoer is de standaard: de afgeronde hoeken worden transparante pixels. Handig voor appiconen, UI-kaarten en overal waar u de afbeelding op een wisselende achtergrond moet plaatsen.
  • JPG-uitvoer kan niet transparant zijn. De afgeronde hoeken worden gevuld met een door u gekozen kleur, waardoor de foto ingelijst lijkt.

Verschillende straal per hoek

Een chatballon-look: rond drie hoeken af op 12 px en laat er één op 0 px (de hoek waar de ‘staart’ zou aanhaken). Een afscheurstrookje: twee scherpe en twee afgeronde hoeken. Asymmetrische stralen zijn een snelle manier om te suggereren dat de afbeelding aan iets anders vastzit.

Anti-aliasing

Hoekcurven worden getekend met 4x super-sampling, waardoor ze scherp overkomen bij standaard weergaveafstanden. Zowel bij printen als bij sterke zoom blijft de straal duidelijk glad.

Veelgestelde vragen

Apple gebruikt een squircle waarvan de hoekkromming ongeveer 22,37% van de zijde van het icoon bedraagt. Op een canvas van 1024 × 1024 pixels komt dit neer op een effectieve hoekstraal van circa 229 pixels; de precieze berekening verschilt echter iets van die van een eenvoudige afgeronde rechthoek.

Ja. De straal wordt per hoek toegepast, onafhankelijk van de beeldverhouding. Bij extreme verhoudingen (heel breed of heel hoog) levert een straal van 50% van de korte zijde een capsulevorm op.

Nee – JPG ondersteunt geen transparantie. Exporteer het bestand als PNG om de afgeronde alpha-waarden te behouden, of kies een achtergrondkleur voor het JPG; de hoeken worden dan gevuld met die kleur.

Ja. Het hulpmiddel voegt alleen een alfa-masker toe en verandert de afmetingen van het beeld niet. Als u afgeronde randen wilt combineren met een aanpassing van de afmetingen, moet u eerst de schaalfunctie gebruiken.

Gerelateerde tools

LEGO-mozaïek maken

Maak van je foto een mozaïekplan van 16 × 16, 32 × 32 of 48 × 48 vakjes. Bekijk benaderde kleuren, tel 1×1-plaatjes en download een genummerd bouwschema.

Muziekpapier met notenbalken maken

Maak leeg muziekpapier met notenbalken van vijf lijnen. Kies het aantal balken, de lijnafstand, het papierformaat, de marges en eventueel een G- of F-markering. Download als pdf of SVG.

Contactblad maken

Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.

Ruitjespapier-generator

Maak online afdrukbaar ruitjespapier: kies een ruit- of stippenraster, stel de afstand in mm in, kies A4 of Letter en een eigen lijnkleur, en print of download een strak SVG-bestand.

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

Material Design-kleurkiezer

Blader door het Material Design-kleurenpalet. Kopieer elke tint (van 50 tot A700) als HEX-, RGB- of HSL-waarde met één tik.

Tool beschikbaar in andere talen