titolo

Vietata la ridistribuzione, la copia di tutto o in parte e la traduzione senza permesso scritto.

Ogni riferimento a tutorials già presenti in rete è puramente casuale (non conosco tutti i tutorials presenti in rete),in quanto questo tutorial è frutto della mia sperimentazione personale degli strumenti del programma (sperimentazione avvenuta anche attraverso altri tutorials presenti in rete).

Le immagini sono state prelevate nel web, non ne conosco la provenienza, per cui ogni violazione di copyright è del tutto non intezionale.I copyright di queste immagini appartengono ai rispettivi proprietari.

 

userbar

 

Questo tutorial e' stato scritto da Angeloblue il 04/08/08

software di grafica usato cs3 extendedpuoi scaricare la versione 30 giorni da Qui

Tubes QUI

In questo tutorial vi spiego come fare una userbar animata .Le userbar vengono definiti i banner del web 2.0 e sono quelli che al momento vanno di piu' ,a me sinceramente piacciono molto .

Per prima cosa ci servira creare il nostro pattern che salveremo nei predefiniti in modo da poterlo usare tutte le volte che vogliamo.

Apri una tela 4x4 px con la lente di ingrandimento portala al 1600% in modo da poter inserire poi la riga

step1

ora prendi lo strumento matita imposta ad 1 px ,colore di primo piano #3e0019 e pixel per pixel disegna una lina di traverso vedi nello step sotto

step2

vai su modifica -definisci pattern,puoi dare un nome al tuo pattern o lasciare quello di default che ti da photoshop l'importante che tu lo salvi per lavori futuri dai ok e questo e' fatto.

Ora apri una nuova tela 350x20 ,io per comodita' mi sono salvato anche questa misura come predefinita ,poi vedi tu cmq come colore di primo piano metti #944f6c e colore di sfondo #7b1e40,prendi lo strumento sfumatura e trascina il colore da destra a sinistra,pressapoco così

step3

ora dalla finestra livelli clicca sull'icona stili di livello-sovrapponi pattern e cerca quello che hai salvato

step4

Ora aggiungi un nuovo livello e con lo strumento elisse traccia nella parte alta verso circa la meta una selezione tipo cosi

step5

vai su modifica-riempi-usa bianco e porta opacita' di questo livello a 32% deseleziona e abbiamo fatto il riflesso.

prendi lo strumento testo e scrivi quello che vuoi colore nero e con font che a te piace di più ma ti consiglio uno ben definito in modo che poi quando metti la traccia non venga pastrocchiato,sempre da stile livello aggiungi una traccia di colore bianco a 1px e unisci visibile.

Ora aggiungi una traccia anche alla userbar completa ,metti come vedi nello step

step6

e unisci in unico livello,siccome te lo trasforma in sfondo per poter continuare a lavorarci lo devi fare diventare livello,per fare questo clicca due volte sopra e te lo converte in livello 0.

Bene ora e' venuto il momento di animarla,per prima cosa apri il tubes selezione-seleziona tutto ,poi modifica-copia vai nella userbar modifica-incolla ,ora per richiamare la finestra delle animazioni vai appunto su finestra-animazioni e dovresti essere cosi

step7

se al posto dei fotogrammi ti ritrovi la timeline clicca dove vedi la manina.

Ora fatto il primo fotogramma clicca sulla freccia che trovi a destra

step8

poi copia fotogramma,ritorna sulla freccia nera e sempre dal menu a tendina copia fotogramma e dalla finestra che si apre devi avere spuntato incolla dopo la selezione

step9

ora nella finestra animazione dovresti avere due fotogrammi uguali ,ma tu devi solo spostare un po il tube in modo da dare impressione che si alzi ,fatto questo non ti resta altro che fare altri passaggi come questi in modo da mandare il tubes un po per volta tutto in alto,a me sono venuti 7 fotogrammi ,ma e' chiaro + fotogrammi hai piu' dura animazione e forse anche piu' lineare io per fare in fretta ne ho messe solo 7 .

Ora hai rimasto da settare il tempo, per fare cio' devi andare sotto ogni fotogramma dovresti avere una freccia nera clicca li e ti apre un menu dove puoi scegliere il tempo di durata da un fotogramma all'altro

step10

ora invece devi decidere se vedere animazione una volta sola e che duri sempre ,allora clicca nell'altra freccia nera che trovi nella barretta degli strumenti e devi spuntare sempre

step11

ora per provare animazione se ti soddisfa clicca sul triangolino

step12

se sei soddisfatto vai su file e salva per il web ti apre una finestra grande dove vedi il tuo lavoro e nella parte destra i vari settaggi tu metti come vedi nello step

step13

dai ok e il lavoro e' terminato ,fare le animazioni con cs3 e' piu' facile che scrivere questo tutorial una volta presa la mano vedrai ti verra facilissimo ,l'importante e' provare e riprovare .Premessa io ho animato l'immagine ma puoi decidere di animare solo la scritta i passaggi sono gli stessi .

Ti auguro buon lavoro

::Tutorial::

::Home::

TWI

Tutorial regolarmente registrato e protetto da copy

 

Creative Commons License
Questo/a opera e' pubblicato sotto una Licenza Creative Commons

w3c


Copyright © Angeloblue.net ..All rights Reserved