[Tutorial] Creare una Barra con effetti 3D

« Older   Newer »
  Share  
~Requiem
view post Posted on 31/7/2009, 16:37




In questo tutorial, imparerete a realizzare una barra con degli effetti incassati e tridimensionali ad alta professionalità come la seguente:

c'e da dire che per riuscire a realizzarla, bisogna conoscere almeno per il 50% percento delle funzionalità di Photoshop cs2 (vanno bene anche le altre versioni che contengono l'opzione "altera") e un buon occhio per individuare le parti incassate.

1.
Inanzitutto creiamo un nuovo livello di dimensioni personali, (io 400x35px) trasparente e andiamo a creare lo sfondo con una sfumatura che non sia troppo accentuata, attraverso lo strumento sfumatura che si trova insieme al secchiello, cliccato ciò apriamo la finestra e impostiamo la sfumatura così:


2. come avrete notato, i due punti colore agli estremi sono piu' scuri rispetto al centrale,fate ciò anche voi e una volta finito cliccate su ok e create la sfumatura nella vostra barra, per farlo basta portare il cursore al centro del livello, e tenendo il cursore premuto creare una linea verticale, il risultato dovrebbe essere simile:


3. adesso iniziamo la decorazione tridimensionale, io ho scelto un rettangolo smussato e alterato di color rosso chiaro, ho creato la forma che più mi soddisfava e alal fine ho rasterizzato il livello, ecco il risultato:


4.
Fatto ciò bisogna rendere questa forma geometrica tridimensionale, se il risultato verrà bene la barra assume il 90% della professionalità, quindi un buon risultato della tridimensionalità implica fortemente l'effetto professionale finale, per fare ciò lasciamo assolutamente perdere lo smusso effetto rilievo, ma sfruttiamo l'effetto sfumatura (livello->stile livello->effetto sfumatura) e inserite nella parte destra della sfumatura un colore un pò po scuro, nell'altra estremità invece lo stesso medesimo colore, come quest'esempio:


5. finito ciò inserite una traccia da 1 pixel di colore leggermente piu' scuro. Adesso duplicate il livello del rettangolo alterato e settate uno dei due livelli al 40% d'opacità, selezionate i due livelli e andate su livello->unisci livelli. Adesso inseriremo un ulteriore traccia, fate molta attenzione a questo passaggio perchè è molto importante.
Livello ->stile livello->traccia
inserite una grandezza di 2 px
e sostituite il tipo di riempimento con: Sfumatura.
inserite una sfumatura che si adatti allo sfondo della barra (nel mio caso quel grigio chiaro), i quadrati estremi dovranno avere un colore leggermente più chiaro, il centrale invece leggermente più scuro così:

cliccate OK e impostate l'angolo a -11
il nostro elemento alterato sta per essere completato, un'altro passaggio fondamentale è arricchirlo internamente, per fare ciò basta aumentare lo zoom al 700% e con lo strumento Linea creiamo una diagonale che parta dall'angolo superiore sinistro e termini all'angolo inferiore destro che sia leggermente più scuro del colore base della figura alterata, adesso andate su : modifica->trasforma tracciato-> altera e ondulatela in questo modo:

6. ho sottolineato con dei piccoli cerchi le parti in cui ho alterato la linea, appena vi soddisfa rasterizzate il livello e inserite una traccia di 1px che sia leggermente più chiara del colore di sfondo del rettangolo alterato, cancellate con la gomma/pennello gli estremi della linea e dovrebbe uscire un lavoro simile:

(io ho creato due ilinee al posto di una.)
7. Adesso come potete notare abbiamo creato degli effetti scavati, tridimensionali senza l'utilizzo dello smusso.. rimane un'ultimo tocco professionale per rendere il tutto più shic.
Selezionate lo strumento forma (cerchio) e create un piccolo cerchio bianco all'interno della figura incassata e alteratela così:

rasterizzate il livello, abbassate l'opacità e cancellate con una gomma morbida i bordi, ripetete il seguente passaggio negli altri solchi ed ecco il risultato:

8. Adesso non rimane che decorare lo sfondo della barra, per fare ciò dobbiamo ripetere gli stessi passaggi di prima, linee e forme alterate con un pixel di traccia più chiaro dello sfondo, ecco un esempio della mia barra:

Ovviamente voi potete continuare inserendo altri punti o linee alterate..
9. Adesso non rimane che la parte incassata dove andrà inserito il testo, per fare ciò basta care un passaggio molto semplice, create un rettangolo smussato al centro della barra e andate su modifica->trasforma tracciato->prospettiva:

inserite il solito pixel di bordo leggermente più chiaro.
10. Adesso andate su sovrapposizione sfumatura e inserite i seguenti parametri:

______________________________________________________________

Ed ecco la Barra ultimata, con tanto di testo prova:


Spero sia stato di vostro gradimento.

image
Tutorial interamente ideaato da ~Requiem
Non spacciare per proprio e non postare in altri forum/siti senza il mio consenso.

 
Top
~ Sy
view post Posted on 31/7/2009, 17:19




davvero bello *-*
 
Top
fede6889
view post Posted on 31/7/2009, 20:11




ottimo tutorial =)
 
Top
~Requiem
view post Posted on 31/7/2009, 20:15




grazie ^^
 
Top
†Chobits•Lockhart†
view post Posted on 16/8/2009, 16:22




non so se posso postare non essendomi (ancora) presentata, ma....
volevo ringraziarvi di cuore per questo tutorial, era un pò che volevo capire come si facesse l'effetto 3d sopratutto i colpi di luce...
ho provato a fare la mia prima barra prendendo spunto dal tutorial, se può interessarvi eccola qui ^^

SPOILER (click to view)
imageimageimageimage


 
Top
~Requiem
view post Posted on 16/8/2009, 22:15




beh non ci vuole moltissimo a presentarsi ma spero lo farai in seguito,
i miei complimenti per gli effetti ricavati, mifa piacere che ti sia stato d'aiuto ^^
 
Top
PokemonFantasyWorld_Staff
view post Posted on 26/1/2011, 15:32




Complimenti :)
 
Top
7 replies since 31/7/2009, 16:37   627 views
  Share