statistiche siti

Immagini con angoli arrotondati

http://senzaweb.it/images/angolo1.gif

In questo articolo tutorial vedremo come arrotondare i bordi delle nostre immagini e quindi avere una cosa del genere:
Esempio:
Prima immagine

Seconda immagine

Questa guida si basa su Photoshop, ma per creare dei bordi arrotondati, potete utilizzare altri programmi di grafica (quali gimp, Jasc Paint Pro)

Passo 1 – CREA UN NUOVO FILE
Apriamo Photoshop ed apriamo un nuovo file (File>>New)

Cambiamo i valori del width (larghezza) e di height (altezza) a seconda delle nostre preferenze.
Nel Background Contents scegliamo la voce “Trasparent”, questo ci servirà per avere uno sfondo trasparente, per cui quando applicheremo l’immagine con i bordi arrotondati, il backgound dell’immagine sarà quello della pagina web.

Passo 2 – ROUNDED RECTANGOL TOOL
Dopo aver creato il nostro file, possiamo iniziare a creare le immagini con gli angoli smussati.
Quindi selezioniamo il Rounded Rectangol Tool, come si vede nelle seguenti immagini:

Passo 3 – SELEZIONA IL RADIUS
Dopo aver selezionato il bordo arrotondato sul Photoshop, possiamo selezionare un radius in pixel. Maggiore sarà il numero di radius e maggiore sarà l’angolo di rotondità. Per mio gusto personale, ho selezionato radius 7px .

Passo 4 – CREA L’IMMAGINE CON I BORDI ARROTONDATI
Adesso siamo pronti per creare la nostra prima immagine con i bordi arrotondati.
Scegliamo il colore di background da dare alla nostra immagine:

Il colore di background che ho utilizzato per quest’immagine è a5c7ee .

Assicuriamoci che la crocetta del nostro mouse sia quanto più vicina al bordo sinistro, come nella seguente immagine:

E quindi tracciamo la nostra immagine con gli angoli arrotondati:

In modo tale da avere un’immagine di questo genere:

Adesso clicchiamo su Save >> Save for web (scegliendo .GIF come estensione)

Passo 5 – CREARE UN’IMMAGINE ARROTONDATA INFERIORE
A questo punto abbiamo già un’immagine con i bordi arrotondati, da applicare alla parte superiore del box.
Ma se volessimo un’immagine identica però inversa, e quindi da applicare alla parte inferiore del box?
Con la stessa immagine, clicchiamo su Image >> Rotate Canvas >> Flip Canvas Vertical :

Così otterremo la nostra immagine al contrario:

Come abbiamo fatto con l’immagine superiore, salviamo l’immagine (File >> Save for web).

Leggete la guida su come utilizzare i bordi arrotondati all’interno della vostra pagina web.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *