• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

KevinGenoves3

<IMG SRC="http://i37.tinypic.com/2rdw3nr.png">
Autore del topic
1 Giugno 2009
3.754
0
Miglior risposta
0
Questo effetto è davvero molto bello, in quanto l'effetto finale è in piena regola tridimensionale e ha quel senso chiaro/scuro come le vere progressbar.

PASSO 1

Per crearlo dobbiamo creare un file di 3x3 e con la matita fare a questo modo:
rsgapt.png

(E' stato zoommato).
Adesso facciamo:
Modifica -> Definisci pattern.

PASSO 2

Adesso creiamo l'userbar, ovvero un documento di 350x19 pixel e facciamo:

Modifica -> riempi -> pattern -> (nostro pattern) 100%.

Poi, sul livello appena riempito, premiamo ctrl+t(trasformazione libera) e allungiamolo come in foto:

wol_error.gif
Questa immagine è stata ridimensionata poiche troppo grande. Clicca su questa barra per vederla.
2mwgklg.png


Premendo applica, si otterrà l'effetto chiaro/scuro che volevamo.


Ora ci serve lo sfondo, possiamo farlo animato, anche semplice, percui, per motivi di tempo, scelgo la modalità più semplice e veloce.

Scegliamo un grigio abbastanza chiaro, e, in un livello sotto il nostro pattern modificato, riempiamo tutto.
Poi, in una porzione desiderata di quel livello, facciamo la stessa cosa con un verde acceso.
33tl1jk.png


Adesso, applichiamo una traccia (nuovo livello sopra tutto, ctrl+a, tasto destro, traccia [interna,1px] e con una sfumatura rettangolare sfumata a 2px, creiamo l'effetto 'tondeggiante' delle progressbar(con riempi -> bianco al 20%).
1htlw5.png


Infine, applichiamo modifiche varie e otterremo un immagine come questa:
16bylbs.gif


Divertitevi ^^
 
Bellissimo il tutorial ti ringrazio

appena riesco a farlo ti posto outcome ;)