salta alla navigazione

Riflessi web 2.0 a testi ed oggetti con Photoshop settembre 19, 2007

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5 out of 5)
Loading ... Loading ...
Inviato da Carlos in : Grafica, Photoshop CS2, Photoshop CS3, Tutorials , trackback

Nel seguente tutorial, vedremo come creare dei riflessi al testo ed agli oggetti utilizzando Photoshop. Il procedimento è semplice, ma deve essere seguito con attenzione per evitare errori banali. La versione che utilizzo è la CS2, ma potete utilizzare anche la CS3. Nonostante io abbia quest’ultima, molti utenti mi hanno chiesto di utilizzare la CS2 perché con i comandi degli screenshots in inglese si trovano meglio. In futuro vedremo se continuare così.

00pres190907.png

Cominciamo quindi aprendo Photoshop e creando un nuovo documento di misure a vostro piacimento cliccando su File —> Nuovo… (File —> New…). Io ho creato un documento di 600×400px e l’ho riempito di bianco.

01image190907.png

Fatto questo, inseriamo una parola con lo Strumento testo orizzontale (Horizontal type tool) indicato dalla freccia nella seguente immagine:

02text190907.png

Selezionate il vostro font preferito {1} e la grandezza desiderata {2}.

Bene, adesso potete impostare un colore per il testo selezionandolo con lo Strumento testo orizzontale (Horizontal type tool) (basta fare anche doppio click sopra la scritta), scegliendo poi il colore che preferite dal pulsante Imposta il colore del testo (Set the text color) (indicato dalla freccia rossa in immagine). Io ho scelto #ff1a00:

03colortext190907.png

Ok, ora duplichiamo il livello con il testo trascinandolo nell’apposita icona Crea un nuovo livello (Create a new layer) (cliccate con il tasto sinistro e non rilasciatelo fino a che non siete sopra l’icona), per ottenere una situazione simile:

04duplicate190907.png

05layers190907.png

Assicuratevi di aver selezionato il livello copiato ed andate su Modifica —> Trasformazione —> Rifletti verticale (Edit —> Transform —> Flip Vertical), poi con lo Strumento sposta (Move tool), andate a spostare il livello trasformato fino a far combaciare la parte alta di questa scritta con la parte bassa della scritta iniziale (vedere linea blu):

06flipv190907.png

Assicuratevi ancora che il livello “capovolto” sia selezionato ed aggiungetegli una maschera di livello cliccando nell’icona Aggiunge una maschera di livello (Add layer mask):

07layerm190907.png

Bene, ora con lo Strumento sfumatura (Gradient tool), tracceremo una sfumatura dal basso verso l’alto della scritta copiata; prima di fare questo assicuratevi di: aver selezionato lo strumento, aver impostato come colore di primo piano il nero (Foreground color: black) e come colore di sfondo il bianco (Background color: white), aver impostato come impostazione predefinita Primo piano a sfondo (Presets: foreground to background), aver selezionato la Sfumatura lineare (Linear gradient) ed infine di aver selezionato la maschera del livello (select layer mask) e non il livello stesso (basta cliccarci sopra).

Sistemate tutte le opzioni tracciate una linea verticale dal basso verso l’alto (tenete premuto SHIFT per farla dritta) come indicato dalla freccia gialla. L’evidenziazione della maschera la potete vedere nell’immagine precedente, mentre le altre cose a cui prestare attenzione sono tutte indicate dalle frecce blu:

08sfum190907.png

Questo dovrebbe essere il risultato:

09res190907.png

Per ottenere una sfumatura buona, senza essere costretti ad abbassare successivamente l’opacità del livello, basta ricordare che tracciando una retta che va dalla metà della scritta capovolta, alla metà della scritta normale, si ottiene un risultato ottimale che non ha bisogno di modifiche.

10obj190907.png

Altri articoli che potrebbero interessarti:

Commenti»

1. Andrea Opletal - settembre 20, 2007

come sempre grandissimo !!!!….
stasera provo subitissimo… ciau

2. Noeren - settembre 20, 2007

Grazie io sbagliavo alcune impostazioni, ora vengono perfetti ^^

3. Carlos - settembre 21, 2007

@Andrea: troppo buono :D

@Noeren: felice di averti accontentato :D

4. YouON - settembre 22, 2007

questo è un effetto semplice ma hai fatto bene a ricordarlo visto che va di moda … io ci ho pure fatto un video ehehe http://it.youtube.com/watch?v=Fe1wEtoQUvU

5. Carlos - settembre 23, 2007

Bel lavoro, presto arriverà anche il video :D

Ciao

6. Izzyweb - settembre 28, 2007

Come vedi seguo sempre il tuo lavoro con estrema attenzione, complimenti per questo bel tutorial
Fabio

7. Carlos - settembre 28, 2007

Felice che ti sia piaciuto :)

Ciao

8. Sabrina - ottobre 10, 2007

ciao !
avrei bisogno di un grosso aiuto, ho appena installato il photoshop e sono DAVVERO a digiuno (per non dire INCOMPETENTE). Avrei bisogno di modificare una scritta su un’immagine, in pratica quello che ho fatto è scaricare un’etichetta con immagine da internet ed ora vorrei riadattarla con delle scritte a mi piacimento.
E’ possibile?
scusate per il disturbo, so che queste sono cose da ultraprincipianti!
vi ringrazio in anticipo.
S.

9. Carlos - ottobre 11, 2007

Non ho capito bene, ma credo che tu debba prima cancellare le scritte sull’etichetta e scriverci di sana pianta con lo strumento testo. Ti consiglio di colorare le parti che devi cancellare, dello stesso colore dell’etichetta oppure creare un nuovo livello della stessa forma dell’etichetta e riempirlo di un colore a tua scelta.

Bisognerebbe capire meglio quello che vuoi ottenere per essere precisi nella descrizione :)

Ciao

10. anna - ottobre 15, 2007

ciao.
hai dei tutorial interessanti, davvero una bella scoperta per me!
una domanda: in questo tutorial, il tuo risultato finale con i riflessi non è lo stesso che appare in cima alla pagina. come si fa ad ottenere una scritta con i riflessi e anche con quegli effetti di luce?
Grazie, se continui con questi tutorial diventerò un’affezionata del blog!!
Ciao

11. Carlos - ottobre 16, 2007

Ciao quello della scritta è uno stile che si può applicare agendo sulle opzioni di fusione (blending options). Per spiegarlo bene ci vorrebbe un tutorial. Ora vediamo se farlo :)

Ciao

12. gelcor - novembre 17, 2007

http://image.forumfree.it/774836/1195313588.jpg

che ne dici ?consigli….grazie !!!!

13. Carlos - novembre 18, 2007

Ciao, purtroppo non riesco a vedere niente perché quell’hosting immagini è riservato ai soli iscritti di forumfree :(

Posta l’immagine su imageshack

14. vicky - novembre 22, 2007

Sono riuscita a farlo. l’unico problema è che la scritta che dovrebbe avere l’effetto sfumato risulta solamente in parte sfumata ma non risulta l’effetto di riflesso.
ho provato a farlo diverse volte ma il risultato è sempre lo stesso.
come posso raggiungere una vera e propria riflessione.
thanks

15. Carlos - novembre 23, 2007

Non ho capito qual è il problema, che passaggi hai fatto?

16. Desmond - novembre 24, 2007

Grazie, è proprio quello che cercavo!

17. Carlos - novembre 25, 2007

Bene :D

18. gelcor - novembre 27, 2007

http://img20.imageshack.us/my.php?image=buonanottesu5.jpg
spero si veda!!! aspetto tuoi consigli

19. Carlos - novembre 29, 2007

Ciao, non male, ma hai provato a tracciare la sfumatura da metà scritta capovolta a metà scritta normale? La scritta capovolta non si deve vedere in maniera totale. Prova a mettere nella sfumatura un estremo con opacità 0% e vedi se riesce meglio :)

20. gelcor - novembre 29, 2007

grazie!!

21. Carlos - dicembre 1, 2007

Grazia a te :)

22. Matteo - dicembre 3, 2007

Ti faccio i complimenti per la chiarezza del tutorial, esplicato in ogni sua parte e con tanto di immagini.
Molti tutorial che ho trovato sul web danno per scontato alcune cose, facendo penare chi è alle prime armi ;)

Grazie.

23. Carlos - dicembre 5, 2007

Felice di averti potuto aiutare :)

Ciao

24. Ecco i nuovi link su carlosweb.net :) « ◄::..carlos web..::► - gennaio 31, 2008

[...] Riflessi web 2.0 a testi ed oggetti con Photoshop [...]

25. Sottomarina - marzo 31, 2008

ciao Carlo,
provato!!! è venuto benissimo!! grazie per questo bellissimo tutorial
che spiega tutto in modo semplice e dettagliato

http://i29.tinypic.com/35hreba.jpg

26. Carlos - aprile 22, 2008

Bel lavoro :D ! (Scusa per il ritardo della risposta :( )

Grazie per i complimenti :)