Continua l’avventura con la rubrica BecomeDesigner su JuliusDesign in cui impareremo come utilizzare al meglio Adobe Photoshop CS3

Vi presento TheMaker de L’arte Del Web, il secondo WebDesigner selezionato che ci accompagnerà duarante questa rubrica

Tutti i video tutorial verranno aggiornati e inseriti nella sezione Video Tutorial

Andiamo a vedere il Tutorial nei dettagli e il file PSD sorgente da scaricare

In questo tutorial per Adobe Photoshop vedremo come creare un’icona Fedd RSS in stile web 2.0

Per prima cosa, apriamo un nuovo documento (grandezze a piacere), con uno sfondo bianco o comunque chiaro.

Attraverso gli strumenti “Forma” (shapes), andiamo a creare la forma base della nostra icona mantenendo premuto il tasto “Maiusc” in modo tale che la forma si produca in maniera proporzionale.

Ora applichiamo un colore alla nostra icona in questo modo:

Livello > Stile Livello > Opzioni di fusione (Layer > Layer style > Bleding Options..), e impostiamo come segue:

Ora posizioniamo al centro della nostra icona il simbolo dei feed RSS al centro della nostra icona

Duplichiamo il simbolo cliccando su Livello > Duplica livello (Layer > Duplicate layer) o tramite la combinazione dei tasti “Ctrl+J”.

In seguito andiamo a spostare (attraverso lo strumento muovi) di 2 pixel verso sinistra e di 2 pixel verso il basso (naturalmente sempre in proporzione al vostro documento di lavoro) la copia dell’icona (quella che nella paletta si trova più in basso) e la coloriamo con una tonalità di marrone scuro.

Ora è il momento di applicare l’effetto lucido che contraddistingue numerosi loghi di applicazioni web 2.0.

Per farlo, innanzitutto selezioniamo la nostra icona (posizioniamoci sul livello della base dell’icona e clicchiamo con Ctrl sulla sua miniatura).

Andiamo, ora, su Seleziona > Modifica > Contrai (Select > Modify > Contract), e immettiamo un raggio di contrazione di 3-4 pixel (sempre in base alla grandezza della vostra icona).

Ora creiamo un nuovo livello e, grazie allo strumento sfumatura (dal bianco verso il trasparente), andiamo a creare una sfumatura, in maniera
perpendicolare, dall’alto verso il basso della nostra selezione.

Lasciando sempre attiva la selezione, creiamo un nuovo livello dove andremo a porre un ulteriore effetto lucido.

Come prima andiamo a sfumare, però dal basso verso l’alto e con un raggio di sfumatura minore.

Assicuriamoci di essere sullo strumento selezione e andiamo a spostare la selezione di qualche pixel verso l’alto. In seguito cancelliamo e abbassiamo leggermente l’opacità.

Dovremmo avere un risultato simile a questo:

Inseriamo ora il riflesso, selezioniamo tutti i livelli, li duplichiamo andando su (Livello-> Duplica livello) e li uniamo (Ctrl+E o Livello > Unisci livelli > Layer > Merge layers).

Spostiamo il livello appena creato, nella parte bassa del documento e attiviamo la modalità trasformazione libera tramite i comandi Ctrl+T (oppure andando su Modifica > Trasformazione libera > Edit > Free trasform).

Nell’area della trasformazione libera, clicchiamo con il tasto destro e andiamo sull’opzione Rifletti verticale (flip vertical).

Creiamo una maschera di livello, cliccando sulla apposita icona e, dopo esserci assicurati di tenerla attiva, per mezzo dello strumento sfumatura (dal
nero verso il trasparente), andiamo a sfumare la nostra icona.

Abbassiamo l’opacità, et voilà, la nostra icona è completa!

Per chi volesse visionare il file .PSD è possibile scaricare il file progetto creato con Photoshop CS3

Letture Consigliate per Adobe

Articoli simili


Autore:

Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.