Creare un'icona in stile iPhone

di: Marco Grigis     03 Dicembre 2009

In questo tutorial impareremo a costruire una classica icona per iPhone. Il procedimento è molto semplice e richiede un livello di conoscenza base di Photoshop CS4. Prima di cominciare, vi consigliamo di scaricare Ultimate Web 2.0 Gradient, una comoda raccolta di gradienti 2.0 che velocizzeranno il nostro lavoro. Vedremo più avanti come incorporarli in Photoshop.

Prepariamo l'area di lavoro

Dal menu File, selezioniamo Nuovo. Nell'apposita finestra, inseriamo il valore di 300px sia per l'altezza che per la larghezza, risoluzione a 72 dpi e sfondo bianco (Figura 1). L'icona che andremo a costruire avrà una dimensione inferiore, tuttavia l'utilizzo di uno sfondo decisamente più grande agevolerà il procedimento.

Figura 1

Impostazione area di lavoro

Costruiamo l'icona

Dopo aver rinominato il livello iniziale in Sfondo, premiamo Crtl+T. Il comando abilita la trasformazione dell'immagine, questo piccolo stratagemma ci permetterà di individuare facilmente con il righello il centro del nostro sfondo (Figura 2).

Figura 2

Righelli a centro immagine

Aggiungiamo un Nuovo Livello chiamandolo Quadrato. Attraverso lo Strumento di selezione rettangolare, definiamo a centro immagine un quadrato approssimativo. Clicchiamo con il tasto destro al centro della selezione, scegliamo Trasforma Selezione e, nella barra in alto, ne definiamo altezza e larghezza di 100px (Figura 3). Riposizioniamo, infine, la selezione al centro qualora fosse necessario.

Figura 3

Ampiezza della selezione

Utilizzando lo Strumento Rettangolo Arrotondato riempiamo per intero la nostra selezione. In questo modo, otterremo un quadrato perfettamente di 100x100px (Figura 4). Per il momento, non è essenziale la scelta del colore. Come vedremo più avanti, verranno utilizzate le sfumature per questo scopo.

Figura 4

Creazione del quadrato

Guide Grafica

3D Studio Max - Guida alla modellazione

Dall'interfaccia alla creazione e modellazione di oggetti...

Guida Photoshop CS5

Modifica e ottimizzazione dell'immagine, strumenti di disegno e...

Guida Photoshop CS4

Disegno, fotoritocco, effetti con Photoshop CS4: impariamo a usare...

Altre guide

Newsletter @Grafica e Web Design

Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti