Facebook:

1 martie 2011

Animated banner tutorial


In acest tutorial va voi arata cum sa faceti un banner animat pentru banner exchange

Preview la ce veti crea:
Gigi.Muschi's Blog

Veti avea nevoie de:
- Adobe Photoshop cs5 (o versiune anterioara nu este buna +ca pe torrente este plin de asa ceva)
- Adobe After Effects cs5 (tot asa intro versiune mai noua nu functioneaza..thepiratebay.org ;) )
- Quicktime player

First.
- Deschideti After effects si apasati pe "New Composition"



2.
- In fereastra urmatoare faceti urmatoarele modificari:
- Composition Name : banner
- Width 125px
- Height 125px
- Frame Rate: 15
- Apasati ok


3.
- Da-ti click dreapta in stanga jos si alegeti New>Solid
- Ii schimbam culoarea in orice culoare doriti deoarece aceasta va putea fi modificata ulterior


4.
- Mergem in tabul "Effects & Presets" scriem ramp, ne asiguram ca suntem pe layer-ul cu solidul si dam un dublu click pe Ramp
- Aici se modifica dupa preferinte.. in dreapta sus apar proprietatile effectului ramp pe care le putem modifica..
- Modificati negrul executand dublu click pe el, la fel si culoare alba.... Le inlocuiti cu culorile pe care le doriti


5.
- Adaugam textul...
- Dam click dreapta unde am dat si pentru solid si Mergem la New>Text
- Introducem textul dorit

6.
- Aflandu-ne pe layer-ul cu text apasam pe "P" si va aparea "Position"
- acum vine partea ce mai importanta
- Mergem la secunda doi mutand sliderul si apasam pe iconita cronometru de la Position
- ne intoarcem inapoi la secunda 0 mutand sliderul, iar apoi mutam scrisul creat afara din banner
*acum a-ti creat un effect in care textul apare practic de nicaieri si intra pe suprafata banneru-ului
*Daca sunteti multumit de rezultat puteti sa sariti peste urmatorii pasi


7.
- Puteti adauga mai mult text repetand pasul cu numarul 5
- Apasati pe P pentru a aparea Position, iar pentru a face ca noul text sa apara mai tarziu trebuie sa puneti keyframe-ul cu pozitia originala la sa zicem 2 secunde distanta de ultimul keyframe, al ultimului text


* Puteti adauga si alte effecte dar in acest tutorial voi cuprinde doar acest effect.

8.
- Pentru a salva animatia mergem la Composition>Add to render queue

9.
- Aici dam click in partea de jos pe "lossless" schimbam "Format" din AVI la "Quicktime" si apasam ok
- Apasam pe Banner.mov din dreapta "lossless" si setam destinatia videoclipului si numele acestuia

10.
- Apasam pe "Render" si asteptam pana ce se termina... iar dupa aceea puteti sa inchideti After effects.


11.
- Deschidem Photoshop Cs 5

12.
- Mergem la File>Open si deschidem fisierul .mov pe care tocmai l-am salvat in after effects

13.
- Mergem la File>Save for Web & Devices selectam din box-ul dropdown GIF
- Mergem jos la Looping options si selectam "Forever"

14.
- Apasam pe Save dupa aceea la File name: Punem ce nume vrem
- La Format lasam Images only si apasam din nou pe save

15.
- pentru a viziona fisierul apasati click dreapta pe el si dati open with: Internet Explorer

16.
- pentru a pune bannerul pe web, upluadati fisierul .gif pe picasa.webgoogle sau imageshack, sau orice alt image hosting
- copiati codul de pe pagina asta si inlocuiti link-ul meu cu link-ul blog-ului personal, url-ul imaginii mele cu url imagini dumneavoastra si numele la alt tag cu numele care doriti sa fie afisat cand se sta cu mouse-ul deasupra banner-ului :)


Stay tuned and don't forget to comment and subscribe
*tutorial realizat de Gigi.Muschi™ :)

4 comentarii:

  1. Hmm ms de ajutor chiar aveam nevoie pt un site :P tineo tot asa esty tare ;)

    RăspundețiȘtergere
  2. Felicitari !

    Se vede ca nu ai avut somn aseara.. :))

    RăspundețiȘtergere
  3. Heya i am foг the fiгst time here.
    I found thiѕ board anԁ І in fіnding It truly
    useful & it helpeԁ me out much. I hope to
    prοvіde one thing again anԁ help others
    like you helped mе.

    Loοk at my web-site: payday
    Also see my web page - payday

    RăspundețiȘtergere
  4. Excellent, what a blog it is! Thіs ωebsіtе provides ѵaluаble facts to
    uѕ, keep it up.

    Chеcκ out my weblog :: payday loans

    RăspundețiȘtergere