Flacari animate la infinit, in Photoshop

Am avut nevoie la un moment-dat de o animatie cu niste flacari, care
1. sa mearga in “seamless loop” (sa nu-ti dai seama cand o ia de la capat, sa mearga continuu, de parca ar fi filmata)
2. sa fie tile-able (repetabila pe orizontata la infinit, fara sa-ti dai seama de asta)

Am cautat pe net de-am rupt google-n doua, dar n-am gasit mare lucru, in afara unui mic tutorial care vorbea despre blending modes. Asa ca pornind de la acel mic tutorial, cu oarece munca in Photoshop, am reusit sa obtin ce-am vrut – ceva in genul asta:


Cum poti face si tu asa ceva? Simplu, urmeaza pasii de mai jos:
(English version here)

Partea intai: Flacarile

1. Deschide Photoshopul

2. Creaza un nou fisier: File > New…
fire_01.gif

3. Din paleta de scule, seteaza un Foreground ALB si un Background NEGRU:
fire_02.gif

4. In paleta de Layere fa dublu-click pe layerul Background
fire_03.gif
… se deschide o noua fereastra:
fire_04.gif
da un nou nume layerului, dupa care apasa OK (asta va debloca layerul nostru, lucru de care o sa avem nevoie un pic mai incolo)

5. Cu layerul cel nou selectat, alege din meniul programului: Filter > Render > Clouds. Asta va umple imaginea noastra cu ceva in genul asta:
fire_05.gif

6. Duplica layerul nostru (click-dreapta pe el > Duplicate Layer… > in fereastra noua ii dai numele “background fix” de data asta)

7. Cu layerul nou selectat, Apasa CTRL + F (asta va repeta efectul de Clouds de mai devreme, intrucat cele 2 layere trebuie sa aiba 2 desene diferite pe ele). Paleta de layere va arata acum cam asa:
fire_06.gif

Urmeaza o serie de pasi care vor trebui repetati pentru fiecare din cele 2 layere in parte, si care vor avea ca scop sa facem cele 2 backgrounduri repetabile “smooth” pe orizontala. Voi explica acesti pasi pentru layerul “background mobil”, dar tu o sa-i repeti apoi si pentru layerul “background fix”

8-1. Ascunde layerul celalalt, apasand iconitza din stanga lui, in forma de ochi, ca sa vezi ce se intampla sub ea, mai departe:
fire_07.gif

8-2. Duplica layerul (stii deja cum)

8-3. Muta layerul nou in asa fel incat cele doua sa vina unul in continuarea celuilalt, iesind din ecran dar ramanand lipit in afara de marginea din dreapta (daca tii apasata tasta “Shift” in timp ce tragi de un layer, te asiguri ca miscarea va fi limitata pe orizontala/verticala – pe noi ne intereseaza orizontala – ca sa fii sigur ca la sfarsitul miscarii cele 2 layere vor ramane aliniate):
fire_08.gif

8-4. Muta impreuna cele doua layere spre stanga, in asa fel incat linia de demarcatie dintre ele sa ajunga la mijlocul ecranului:
fire_09.gif

8-5. Odata potrivite incat sa se lipeasca perfect, uneste cele 2 layere noi intr-unul singur, selectandu-le cu “Shift” si apasand apoi CTRL+E

8-6. Acum stii sigur ca ceea ce incepe in stanga se continua in dreapta la urmatoarea imagine. Dar a ramas linia de demarcatie, urata, intre cele doua imagini. Ca sa o faci sa dispara, foloseste tool-ul “Stamp”,
fire_10.gif
la niste dimensiuni ale brush-ului care sa permita realizarea in final a unei treceri neobservabile intre cele 2 jumatati (o sa pornesc de la presupunerea ca stii sa-l folosesti)

9. Repeta pasii de la 8-1 la 8-6, de data asta pentru layerul “background fix” (asta, bineinteles, dupa ce-l re-faci sa fie vizibil)

10. Selecteaza din nou “background mobil” si creaza deasupra lui inca 3 layere noi, apasand pe butonul de creare de layer nou:
fire_11.gif

Sa ne ocupam acum de cele 3 layere noi (inainte de orice, ascunde layerul “background fix” ca sa vedem ce se intampla sub el):

11-1. Umple Layer 1 cu ALB (Edit > Fill… )
fire_12.gif

11-2. Click-dreapta pe Layer 1 > Blending Options:
fire_13.gif
Apasa OK

11-3. In paleta Layers, seteaza Fill pentru Layer 1 la valoarea 0 (zero)
fire_14.gif

Nota: Am creat aici un gradient, care va defini mai tarziu ce e vizibil si ce e invizibil din flacara. In loc de gradient poti interveni oricand cu un brush, si sa creezi forme de flacara izolata, de pilda, daca vrei. Tine de imaginatia ta.

12-1 Umple Layer 2 cu culoarea HEX ffa800 (R:255; G:168; B:0):
fire_15.gif

12-2. Seteaza “Blending Mode” pentru Layer 2 sa fie “Color Dodge”:
fire_16.gif

13-1. Similar cu pasul 12-1, umple Layer 3 cu culoarea HEX ff7e00 (R:255; G:126; B:0)

13-2. Similar cu pasul 12-2, seteaza “Blending Mode” pentru Layer 3 sa fie “Color”

14-1. Ajungem din nou la layerul “background fix”. In primul rand, facem click-dreapta pe el si alegem “Blending Mode…”, iar in fereastra deschisa, la “color overlay”, setam “Blend Mode” pe “Darken” iar culoarea sa fie un galben pur (HEX ffff00 (R:255; G:255; B:0))
fire_17.gif

14-2. Similar cu pasul 12-2, seteaza “Blending Mode” pentru “background fix” sa fie “Color Burn”

Bun, am terminat partea statica a tutorialului. Pana acum ar trebui sa ai ceva de genul asta:
fire_18.gif

Daca vrei sa vezi cum stam si cu animatia, “plimba” un pic “background mobil” pe sub toata treaba asta, si-o sa vezi flacarile noastra cum prind viata. Cu un CTRL+Z pune apoi layerul la loc – mai avem treaba cu el.

Partea a doua: Animatia

Ca sa creem impresia de flacari care se inaltza, va trebui sa “plimbam” layerul “background mobil” in sus, pe o lungime de fix 2 ecrane, ca sa obtinem ideea de bucla continua. Pentru asta o sa trebuiasca sa repetam intr-un fel, cu mici diferente, operatiunile de la punctele 8-1 – 8-6, doar ca de data asta pe verticala.

15. Incepe prin a ascunde toate celalalte layere:
fire_19.gif

16. Duplica layerul ramas vizibil, si “du-l” in sus, tinand apasata tasta “Shift”, exact pana cand marginea de jos layerului duplicat iese din ecran prin partea de sus.

17. Selecteaza cele 2 layere, si adu-le in jos impreuna, cam pana pe la jumatatea ecranului, ca sa te poti asigura ca sunt “lipite” perfect impreuna:
fire_20.gif

18. Selectand layerul duplicat, il intorci cu susu-n jos (Edit > Transform > Flip Vertical). Ai obtinut o trecere destul de fina intre cele 2 layere, mult mai buna decat inainte de “flip”.
fire_21.gif

19. Uneste cele 2 layere intr-unul singur (le selectezi impreuna sinand apasata tasta “Shift”, dupa care apesi CTRL+E)

20. Duplica din nou layerul astfel obtinut, si repeta operatiunea de “lipire” – un layer in continuarea celuilalt. Ar trebui sa ai acum un layer inalt cat 4 ecrane, ceva in genul:
fire_22.gif

Daca te apuci acum sa plimbi layerul asta lung in sus si in jos, obtii exact senzatia de foc care se intalta sau se retrage. Gasesti fisierul cu ce am lucrat pana acum aici, si am creat si un set de actiuni care, play-ate in Photoshop, iti arata pas cu pas tot tutorialul, pe care il gasesti aici.

Daca vrei sa salvezi o animatie continua din treaba asta, am pentru tine urmatoarele sfaturi:

1. Avand in vedere ca nu o sa folosesti nicaieri o imagine animata ATAT de mare, e bine ca, pornind de la fisierul astfel obtinut, de 800x800px, sa ajungi la unul mult mai mic: sa zicem 200x200px (Image > Image Size…)

2. Aliniaza ultimul layer de jos la TOP + LEFT al layoutului

3. Salveaza imaginea

4. Urca “background mobil” cu 10 pixeli in sus (SHIFT + sageata-in-sus)

5. Salveaza noua imagine

6. Repeta pasii 4-5 de mai multe ori, pana obtii toate imaginile de care ai nevoie (2 ecrane minus ultima pozitie) (la o inaltime de 200px si un pas de 10px vei avea nevoie de prima imagine + de 39 de ori pasii 4-5)

Inca odata, ca sa stii pentru ce ai citit atata kil de tutorial:

Comments are closed.

Comments (24)

  1. Scrie-l in engleza ca te pricepi, si o sa te ajute mult 😉

  2. coming soon to a store near you 😀

  3. fucking HOT!
    Bravo. SuperTare!
    P.S. Imi vine computeru luni, si incep si eu sa aplic ce faci tu pe aici 😀
    Iti multumim de efort.

  4. de placere 🙂 tocmai am publicat si o varianta tradusa in engleza, si l-am pus si pe vreo 2 site-uri de tutoriale… astept feedbackuri aici 🙂

  5. robo

    E misto, e ok,…..dar dupa cum ai zis si tu mai demult la o animatie mult mai reala ca trebuie sa tii cont de niste legi ale fizicii. Asta e departe rau…….Dar poate ajuta la ceva 🙂

  6. Petru

    super tare… dar m-ai invatat mai demult jmekeria asta, numai ca o uitasem (evident) L-)
    btw ti-a umflat Johnny Iftimoaie ochii au ba? :))) (pretinii stiu de ce) :D:D

    P.S.: keep these tuts coming ;))

  7. johny sta linistit, e om asezat la casa lui… prietenii zic ca e pacat ca nu si-a terminat site-ul 😉

  8. 7even

    Ca tutorial e foarte ok, dar cine sa mai vrea sa faca asa ceva, animatiile de genul asta parca au disparut acu ceva ani… 🙂

  9. Mihai

    Super Tare!!!!

    Chiar arata super misto!

    Cand mai pui d-astea?

  10. 7even: daca iei animatia respectiva doar ca pe un gif de 2 lei pe care sa-l pui ca page delimiter atunci da, ai dreptate – e super-fumat. daca in schimb se intampla sa ai nevoie de asa ceva (si eu chiar am avut nevoie, la un moment dat, intr-un site – de o linie de foc, de un dragon care sa scoata flacari pe nas – realizate toate cu tehnica asta) – atunci eu pot sa-ti zic ca mie chiar mi-a folosit. din pacate (petrutz shtie despre ce e vorba) site-ul respectiv n-a mai vazut lumina zilei…

    Mihai: multzam de apreciere 🙂 oi mai pune cand mai cereti si voi :p

  11. Salut este incredibil ca am gasit asa ceva. Am citit de cateva ori, este munca cine nu se pricepe normal ca nu apreciaza. Daca mai stii tutoriale te rog vreau si eu un link ceva.Te rog.

  12. adrian: ma bucur ca ti-a placut. cat despre linkuri catre alte tutoriale: sorry, n-am mai cautat asa ceva pe net de multa vreme… n-as sti cu ce sa te ajut… iar in romana, cu atat mai putin. nu stiu, cauta si tu pe google, vezi ce bafta ai…

  13. Misto de tot tutorialul, sper sa am unde sa ma folosesc de flacarile alea :D. La un moment dat am avut nevoie de flacari generate random pt un site in flash shi nu prea am gasit chestii, m-ar fi ajutat mult tutorialul asta. Well, win some loose some. Hafta in continuare.

  14. eu tot nu inteleg cum sa mut layerul nou selectat la pasul acesta:

    8-3. Muta layerul nou in asa fel incat cele doua sa vina unul in continuarea celuilalt, iesind din ecran dar ramanand lipit in afara de marginea din dreapta (daca tii apasata tasta “Shift” in timp ce tragi de un layer, te asiguri ca miscarea va fi limitata pe orizontala/verticala – pe noi ne intereseaza orizontala – ca sa fii sigur ca la sfarsitul miscarii cele 2 layere vor ramane aliniate):
    va rog imi spune cineva?stiu ca e o intrebare stupida dar sunt un mare NOOB cand e vb de photoshop…va rog

  15. alezz: daca esti un noob in domeniu insa (asa cum zici) atunci lasa balta acest tutorial: el este destinat celor care au niste notiuni medii (care shtiu cum se muta un layer, ce e aia snap-to-object etc.) pe care nu o sa ma apuc sa le explic aici…

    daca in schimb te pricepi cat de cat, atunci mai insista. ce sfat pot sa-ti dau: inainte de a face pasul asta, trage un pic layerul original mai in stanga, in asa fel incat sa ai clar in cadru unde se vor lipi cele doua…

  16. dupa cateva luni in care am invatat multe despre photoshopm-am apucat din nou de tutorialul tau si mi-a iesit pana la urma…..meserie mi-a iesit.multumesc!!!!! multa bafta si sa mai faci si altele 😀

  17. alezz: ma bucur mult sa aflu c-ai avansat in Photoshop, si ca ti-a iesit pana la urma tutorialul! hai sa-ti dau o tema: in locul unui gradient, incearca sa folosesti orice alta forma, in asa fel incat sa obtii ceva de genul unei flacari de dragon, sau a unui inel cuprins de flacari… sa vezi ce chestii interesante poti obtine 😉

  18. DKBKBM

    NU INTELEG DELOC AICI:
    “8-3. Muta layerul nou in asa fel incat cele doua sa vina unul in continuarea celuilalt, iesind din ecran dar ramanand lipit in afara de marginea din dreapta (daca tii apasata tasta “Shift” in timp ce tragi de un layer, te asiguri ca miscarea va fi limitata pe orizontala/verticala – pe noi ne intereseaza orizontala – ca sa fii sigur ca la sfarsitul miscarii cele 2 layere vor ramane aliniate):
    ” am incercat de numai stiu de mn.. PLZ HELP

  19. idea de la punctul 8-3, impreuna cu 8-4, este de a duplica acel layer original si de a lipi duplicatul in continuarea originalului, in asa fel incat in loc de un patrat sa obtii 2 patrate lipite… daca ai prins idea asta, poti trece direct la punctul 8-4. e mai lamuritor asa?

  20. Poftim. 😛 Am vorbit pe messenger. 😛 Ti-am promis ca o sa postez aici un rezultat. 😀 Ce-i drept nu are o continuitate asa buna. M-am cam grabit. Nu este asa rapid si eu am scazut umpic opacity layer-ului mobil-sincer sa fiu nici eu nu stiu de ce.
    [img]http://i42.tinypic.com/16m1y15.gif[/img]

  21. @JokerDesign: good work, dude!

  22. Mersi! >:D< Respect pentru tutorial! 🙂

  23. Ionut

    Scuzati daca nu postez unde trebuie,dar as avea si eu o mica problema!!

    Am creat o animatie in PhotoShot si am salvato.
    Mi sa salvat gen psd si nu am pututo uploada
    Am incercat sa o inschimb in alt gen ex:jpg si nu mia ramas animatia
    Cum fac sa salvez sa o pot uploada si sa ramana animatia

  24. Sandu

    Tutorialul este superior celor video, deoarece poţi reveni cu uşurinţă la paşii pe care nu-i înţelegi. Cu răbdare poţi înţelege notiţele autorului. Mulţumesc Eros pentru strădania de a învăţa pe cei ce doresc să se folosească de imagini animate cu flăcări. Felicitări şi succes în pasiunile tale.