15

Definiamo la nostra icona

Nello scorso tutorial abbiamo appreso le impostazioni base per realizzare un’ icona, oggi invece, svilupperemo la nostra icona per darle un aspetto più gradevole. Prima di cominciare potete scaricare l’immagine del legno da qui.

Partiamo dalla nostra forma base e selezionando il livello, duplichiamolo con la combinazione di tasti cmd+j su mac, ctrl+j su win, il livello precedente possiamo anche disabilitarlo cliccando sul piccolo occhio affianco.

2 Definiamo la nostra icona

 

Ora andate su File > Inserisci e aprite l’immagine del legno che vi ho allegato e vi ritroverete l’immagine in questo modo.

 

3 Definiamo la nostra icona

Tenendo premuto Shift agite su una delle maniglie negli angoli per ingrandire l’immagine fino a coprire tutto il lavoro.

4 Definiamo la nostra icona

Assicuratevi che l’immagine si trovi sopra al livello duplicato in precedenza, selezionatela, click con il destro e selezionate Crea Maschera di ritaglio.

5 Definiamo la nostra icona

Utilizzando questo sistema usiamo la forma dell’icona sottostante per mascherare l’immagine del legno e adesso il nostro lavoro dovrebbe apparire così.

61 Definiamo la nostra icona

Creiamo una cartella, chiamiamola Base e trasciniamo dentro i due livelli così da tenere il tutto ordinato senza perderci la testa icon biggrin Definiamo la nostra icona

7 Definiamo la nostra icona

Duplichiamo il livello base e chiamiamolo Profondità, restando sempre in questo livello, selezioniamo la base e ridimensioniamola come in figura.

8 Definiamo la nostra icona

Premiamo invio, sembra non essere cambiato nulla ma ora selezioniamo il livello legno e andiamo su Filtro > Distorsione > Coordinate  polari assicuriamoci che sia selezionata la voce Rettangolare a polare e clicchiamo su ok.

Ora vi ritroverete in una situazione del genere.

9 Definiamo la nostra icona

Nulla di preoccupante, con lo strumento sposta ( tasto V ) spostiamo l’immagine fino a centrarla.

10 Definiamo la nostra icona

 

 

Una volta centrata l’immagine selezioniamo la forma base e tramite gli effetti applichiamo un’ombra esterna per accentuare di poco il bordo.

11 Definiamo la nostra icona

 

12 Definiamo la nostra icona

 

Ora riselezioniamo il livello Base, duplichiamolo e posizioniamolo sopra il livello Profondità. A questo punto ridimensioniamolo come in figura.

13 Definiamo la nostra icona

Adesso la nostra icona ha un aspetto più tridimensionale.

Sempre nel livello Fondo creiamo un nuovo livello sopra quello del legno e tenendo premuto cmd su mac o ctrl su win clicchiamo sul livello base, ora dovrebbe apparire la selezione.

14 Definiamo la nostra icona

 

Andiamo su Selezione > Modifica > Sfuma e modifichiamo il raggio a 10, adesso applichiamo un gradiente nero sfumato con opacità a 0%

15 Definiamo la nostra icona

 

Partendo dall’alto sfumate verso il basso di qualche cm senza arrivare al centro, eventualmente posizionate la sfumatura leggermente più in alto come in figura.

16 Definiamo la nostra icona

 

Torniamo al livello Profondità, selezioniamo il livello base, craimo un nuovo livello e spostiamolo sopra il livello del legno.

17 Definiamo la nostra icona

Sempre partendo dall’alto e con lo stesso gradiente creiamo un’altra ombra ma questa volta non la sfumeremo perché è all’interno della nostra maschera.

18 Definiamo la nostra icona

Per adesso ci fermiamo qui e nel prossimo tutorial vedremo come aggiungere elementi dentro la nostra icona icon smile Definiamo la nostra icona

share small Definiamo la nostra icona
Avatar of Vicio Graphic & UI/UX designer

3 Comments

  • Sebastian Scaramuzza

    30 dicembre 2011, 19:08

    Ma questo tutorial è bellissimo!!! Wow, complimenti.

    Mi è venuta voglia di smanettare su Photostop :-)

  • Avatar of Lauryn

    Lauryn

    30 dicembre 2011, 20:44

    i bei tutorial di un tempo :D

  • aledesign.it

    31 dicembre 2011, 10:01

    WOW che bello questo post…da tempo non ne vedevo uno così carino..purtroppo terminato sul più bello! In attesa del resto!

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>