realizzazione
siti web a Bologna

dal 2002
10 anni di siti web

realizzare un banner con gli angoli arrotondati

28/05/2013

realizzare un banner con gli angoli arrotondati per il vostro sito web

La realizzazione di box e banner con gli angoli arrotondati è in un certo senso un «classico» della grafica web, almeno finché i CSS3 non ci sono venuti in soccorso. Tuttavia, può ancora capitare — a me è capitato oggi — di dover produrre degli elementi grafici stondati e allora ecco che ci torna utile il caro vecchio GIMP.

Realizzare elementi grafici con gli angoli arrotondati in GIMP è veramente molto facile, in quanto esiste uno strumento apposito per farlo; iniziamo quindi creando una nuova immagine delle dimensioni che ci interessano.

angoli arrotondati con GIMP - preparazione dell'immagine
preparazione dell'immagine da arrotondare

Ora apriamo il menù filtri e scegliamo decorativi e poi angoli arrotondati.

angoli arrotondati con GIMP - filtro decorativo angoli arrotondati
menù filtri, voce decorativi, sottovoce angoli arrotondati

Si aprirà una semplice maschera dove possiamo impostare il comportamento del filtro. Per questo esempio, ho eliminato l'ombra e richiesto a GIMP di non lavorare su una copia del file.

angoli arrotondati con GIMP - maschera del filtro decorativo angoli arrotondati
maschera delle impostazioni del filtro per l'arrotondamento degli angoli

Una volta applicato il filtro, il nostro rettangolo avrà gli angoli arrotondati e potremo vedere la trasparenza di sfondo.

angoli arrotondati con GIMP - dettaglio dell'angolo appena arrotondato
dettaglio dell'angolo appena arrotondato

Tutta l'operazione richiede al massimo qualche minuto. Ora vediamo come si può rendere un po' più interessante il nostro box con l'aggiunta di un bordo colorato.

aggiungere il bordo

Per aggiungere un bordo colorato ci limiteremo a creare due box stondati di dimensioni e colori diversi, in modo che lo sfalsamento fra i due produca l'effetto di un bordo. Avremmo anche potuto procedere diversamente in quanto esiste un filtro apposta per aggiungere un bordo agli oggetti, ma lo vedremo in un articolo successivo.

angoli arrotondati con GIMP - duplicazione e riempimento del layer
creazione e riempimento di un duplicato del layer di sfondo

Creiamo quindi un duplicato del nostro livello con gli angoli arrotondati e riempiamolo con il colore che desideriamo.

angoli arrotondati con GIMP - scalamento del layer interno
scalamento del layer interno

Scalando il box rimasto bianco, otterremo che una sottile striscia di arancione diventi visibile tutt'attorno.

angoli arrotondati con GIMP - risultato finale
il banner finito con bordo e angoli arrotondati

Ecco il nostro box arrotondato e bordato, in pochi minuti e senza nessun problema!

conclusioni

GIMP è un programma estremamente potente, performante e flessibile. Si tratta di una valida alternativa Open e Free ai programmi commerciali. Con un po' di esperienza, e conoscendo la tecnica giusta, è possibile utilizzarlo per ottenere rapidamente quasi qualsiasi effetto grafico si desideri. Se non ci credete, provate a cercare altre guide su internet oppure scaricatelo e iniziate a giocarci!