Generatore di Immagini con Angoli Arrotondati

Cosa rende diverso questo arrotondatore: ogni angolo puo avere un raggio proprio, il raggio puo essere espresso in pixel o come percentuale del lato minore, e l'angolo stesso puo essere un arco arrotondato semplice, uno squircle morbido, uno smusso dritto o uno scavato verso l'interno. Lo strumento stampa anche la regola CSS border-radius corrispondente, cosi la stessa forma puo essere riprodotta nel codice invece che come file.

Perche arrotondare gli angoli di un'immagine?

Come aggiungere angoli arrotondati a un'immagine

1. Carica l'immagine. Trascina un file sull'area di rilascio o scegli Seleziona Immagine. JPG, PNG, WebP, GIF, BMP, AVIF e SVG funzionano, a patto che il browser riesca a decodificarli.
2. Imposta il raggio. Trascina una delle maniglie degli angoli sull'anteprima, sposta il cursore Raggio dell'angolo, oppure digita un numero esatto e passa l'unita tra px e %.
3. Scegli uno stile di angolo. Arrotondato, Squircle, Smusso o Scavato. Disattiva Collega tutti gli angoli per dare a ciascun angolo un valore proprio, disposti sullo schermo esattamente come gli angoli che controllano.
4. Aggiungi padding, uno sfondo o un bordo, se lo vuoi. Il padding allarga il canvas intorno all'immagine, lo sfondo lo riempie e l'anello del bordo segue il contorno arrotondato invece del vecchio rettangolo.
5. Scarica. Tieni PNG per angoli trasparenti, poi fai clic su Scarica Immagine. Il pannello riporta le dimensioni esportate e la dimensione del file, e la casella CSS mostra la regola equivalente del foglio di stile.

Raggio in pixel o in percentuale

Un raggio in pixel e assoluto: 32 px sono 32 px sia che l'immagine sia larga 400 o 4000 pixel, quindi lo stesso valore sembra drastico su una miniatura piccola e quasi invisibile su una foto grande. Un raggio in percentuale si misura rispetto al lato minore dell'immagine, quindi scala con la foto e ha lo stesso aspetto in ogni export. Il 50% e il valore utile massimo e produce un cerchio su un'immagine quadrata e una pillola su un rettangolo.

I quattro stili di angolo

• Arrotondato — un quarto di cerchio, la stessa geometria che un browser disegna per border-radius. Prevedibile, ed e l'unico stile che corrisponde uno a uno al CSS.
• Squircle — un angolo in stile superellisse. La curva inizia piu avanti su ciascun bordo e fluisce nel lato dritto senza il cambio improvviso di curvatura di un cerchio, ed e per questo che le linee guida delle icone delle app su iOS e Android usano questa forma.
• Smusso — l'angolo viene tagliato da una diagonale dritta. Piu netto e tecnico di una curva, e resta nitido anche a dimensioni piccole.
• Scavato — l'arco curva verso l'interno, togliendo un morso concavo. Due angoli scavati su lati opposti si leggono subito come un biglietto o un'etichetta.

Scegliere il formato di output

Poiche il JPG non ha canale alfa, esportarne uno riempie gli angoli ritagliati con il colore di sfondo scelto invece di lasciarli vuoti. Spesso e esattamente quello che vuoi — una foto arrotondata bianca su una pagina bianca — ma non e trasparenza, e non si puo annullare in seguito.

Funzioni principali

• Privato per progettazione: il file viene letto con l'API FileReader del browser e disegnato su un canvas in locale. Non viene mai caricato.
• Modifica trascinando l'angolo: tira una maniglia in diagonale sull'anteprima e guarda il raggio seguire il dito o il cursore.
• Controllo per angolo: arrotonda solo i due angoli in alto, oppure scava un lato e lascia il resto quadrato.
• Sfondi di anteprima: passa tra una scacchiera di trasparenza, bianco, scuro e un gradiente di colore per controllare il bordo alfa prima di scaricare.
• Padding, riempimento dello sfondo e un anello del bordo che seguono tutti lo stesso contorno arrotondato.
• Scala di output: esporta alla risoluzione originale, oppure riduci al 75%, 50% o 25% nello stesso passaggio.
• CSS copiabile: la regola border-radius generata riproduce la stessa forma in un foglio di stile quando un file non e la risposta giusta.
• Bordi con antialiasing: l'angolo viene disegnato come un percorso di ritaglio, cosi la curva resta liscia invece di mostrare un bordo a scalini.

File immagine o CSS?

Se l'immagine arrotondata va in un mazzo di slide, un PDF, una firma e-mail, un annuncio di marketplace o qualsiasi strumento che non eseguira il tuo foglio di stile, ti serve un file vero con trasparenza vera — esporta un PNG. Se va su una pagina web che controlli tu, una regola CSS e piu leggera, resta nitida a qualsiasi dimensione ed e piu facile da cambiare in seguito; copia il frammento. Le due cose non si escludono: molti team spediscono il PNG per l'uso esterno e il CSS per il sito.

Risoluzione dei problemi

• L'angolo sembra frastagliato: l'origine e probabilmente gia piccola. Arrotonda alla risoluzione piu grande disponibile, poi riduci, invece di arrotondare un'immagine che e stata ingrandita.
• Compare un sottile alone chiaro su uno sfondo scuro: l'immagine aveva un fondo bianco incorporato. Aggiungi uno o due pixel di padding in un colore corrispondente, oppure aumenta un po' il raggio cosi l'alone viene tagliato via.
• Il download si apre come un quadrato bianco: il formato e JPG oppure lo sfondo non e impostato su Trasparente. Passa il formato di output a PNG.
• Una foto molto grande sembra lenta: il canvas ridisegna l'immagine a piena risoluzione a ogni movimento del cursore. Lascia il cursore e dai un attimo al browser, oppure riduci la scala di output.
• Un GIF animato perde l'animazione: il canvas esporta un solo fotogramma. Solo il primo fotogramma viene arrotondato e salvato.

Domande frequenti

La mia immagine viene caricata su un server?

No. Il file viene letto dal browser con l'API FileReader e disegnato su un canvas HTML sul tuo dispositivo. Non viene inviato nulla a miniwebtool, quindi screenshot privati, opere di clienti e foto personali non lasciano mai il computer. La pagina stessa ha comunque bisogno di una connessione a Internet per caricarsi.

Perche i miei angoli arrotondati appaiono bianchi o neri invece che trasparenti?

Solo PNG e WebP possono memorizzare la trasparenza. Se esporti JPG, il formato non ha canale alfa, quindi gli angoli ritagliati vengono riempiti con il colore di sfondo. Scegli PNG nell'elenco Formato di output e imposta lo sfondo su Trasparente. Se gli angoli sembrano ancora sbagliati, verifica che l'app o il sito in cui incolli supporti l'alfa, perche alcuni editor appiattiscono la trasparenza PNG sul bianco.

Come ottengo un'immagine perfettamente circolare?

Passa l'unita del raggio a percentuale e imposta il raggio al 50%. Su un'immagine quadrata ottieni un cerchio perfetto. Su un rettangolo ottieni una forma a pillola o a stadio, perche un raggio in percentuale si misura rispetto al lato minore. Usa la preimpostazione Cerchio per ritagliare a quadrato e arrotondare con un clic.

Qual e la differenza tra angoli arrotondato, squircle, smusso e scavato?

Arrotondato e un quarto di cerchio semplice, la stessa forma che disegna il border-radius CSS. Squircle estende la curva piu avanti su ciascun bordo, cosi il raccordo e liscio e continuo, lo stile usato dalle icone delle app iOS e Android. Smusso taglia l'angolo con una linea diagonale dritta. Scavato curva verso l'interno invece che verso l'esterno e intaglia un morso concavo in ciascun angolo, adatto a biglietti, coupon e badge.

Il raggio in pixel corrisponde al border-radius CSS del mio sito?

Il raggio viene applicato nei pixel dell'immagine, quindi corrisponde al CSS solo quando l'immagine e visualizzata alle dimensioni naturali. Un export largo 1200 pixel mostrato in una colonna da 600 pixel viene ridotto della meta, cosi un raggio di 48 pixel sembra di 24 pixel sullo schermo. Usa l'unita percentuale per un risultato indipendente dalle dimensioni, oppure copia il frammento CSS che lo strumento genera, che riporta gia l'equivalente ridimensionato.

Posso mantenere la qualita dell'immagine e la risoluzione originale?

Si. L'export mantiene le dimensioni originali in pixel a meno che tu non cambi la scala di output o aggiunga padding, e il PNG e senza perdita, quindi nulla viene ricompresso. Cambiano solo i pixel degli angoli, da opachi a trasparenti. WebP e JPG sono con perdita, quindi usali quando le dimensioni del file contano piu di una copia esatta dei pixel di origine.