1. Sukuriame naują dokumentą (Ctrl+N), nustatome banerio dydį. Naudokite standartinius dydžius, tokius kaip 750x100, 468x60, 120x60, 120x120 ir t.t.
2. Jeigu pas jus išjungtas "Animation" langas, viršutiniame Photoshop meniu spauskite "Window" ir padėkite varnelę prie "Animation".
Įsijungėte "Animation" langą:
Trumpai apibūdinsiu "Animation" lango turinį:
1) Animacijos kartojimas. Galite pasirinkti Once (animacija bus rodoma 1 kartą), Forever (animacija bus kartojama nuolatos) arba Other (galėsite įvesti kiek kartų pakartoti animaciją).
2) Animacijos peržiūra. Šie mygtukai leis peržiūrėti animaciją gyvai arba junginėti ankstesnę/sekančią skaidrę, tačiau tai padaryti galima tiesiog paspaudus ant reikiamos skaidrės, o animacijos grojimas (peržiūra) gali striginėti dėl per didelės kompiuterio apkrovos. Rezultatą geriausia peržiūrėti išsaugojus GIF paveikslėlį ir jį atsidarius per interneto naršyklę (apie tai vėliau).
3) Tween mygtukas. Automatiškai sukuria pereinamąsias skaidres tarp pradinės ir paskutinės efekto skaidrės.
4) Skaidrės dublikavimas. Paprasčiausiai sukuria pasirinktos skaidrės kopiją.
5) Pasirinktos skaidrės trynimas
6) Frame delay (skaidrės uždelsimas). Tam, kad efektai nestriginėtų pasirinkite "Other..." ir įveskite 0,03 s. Jeigu Jums nereikia didelės kardų spartos, jų ir nenaudokite. Kuo mažesnis skaidrės uždelsimas, tuo daugiau skaidrių Jums reikės, kartu padidės ir paveiksliuko užimama vieta.
3. Geriausia suplanuoti reklaminio skydelio animaciją/turinį iš pat pradžių ir sukurti visus reikiamus layerius. Pavyzdyje sukursime 4 sluoksnius (layers):
1) Fonas, šįsyk paprasčiausias patternas.
2) Tekstinis sluoksnis su svetainės adresu.
3) Reklaminė informacija, pavyzdyje - tinklapio moto.
4) Apvadas (rėmelis). Šį sluoksnį patalpinsime viršuje, kad tekstas, išeinantis iš už banerio ribų tarsi pasislėptų už rėmelio.
Sukūrę naują sluoksnį spauskite Ctrl+A (pažymėti viską), Edit > Stroke.
Nustatykite: Width: 1 px; Location: Inside (viduje, nes "outside" būtų už paveiksliuko ribų ir jo nesimatytų).
4. Jau turime pradinę skaidrę. Jeigu viskas tinkamai išdėstyta, dublikuojame kadrą (4 mygtukas). Antroje skaidrėje atliekame norimas pertvarkas. Pvz. jeigu norite, kad tekstas pasislinktų iš esamos vietos į kitą, tiesiog nutempiame teksto sluoksnį į norimą vietą. Taip pat galite ir keisti sluoksnio opacity, fill bei kitus nustatymus. Pavyzdyje nutempiau "KurkIT.lt" sluoksnį aukštyn:
5. Pradedame magiją... Spauskite Tween mygtuką (nr.3):
Optimaliam veikimui reikia nuimti varneles nuo "Parametrers", kurių nekeičiame, šiuo atveju nuo opacity bei Effects, paliekant tik Position. Svarbiausia dalis yra "Frames to add". Čia reikia įvesti kiek tarpinių skaidrių norite įterpti. Nepamirškite, kad vienos skaidrės uždelsimas - 0,03 sekundės. Skaidrių skaičių teks apsiskaičiuoti/išbandyti pagal save. Pavyzdyje panaudojau 15, šioje stadijoje rezultatas atrodo taip:
6. Metas kitiems efektams. Dublikuojame paskutinę skaidrę ir dublikate atliekame naujas pertvarkas. Analogiškus veiksmus padariau ir su tinklapio moto (30 frames):
7. Sujunkime kelis efektus. Galima atlikti veiksmus su kiek tik norite sluoksnių vienu metu. Pavyzdyje abu tekstinius sluoksnius nutempsime žemyn bei pridėsime išblukimo efektą - nustatysime opacity:0%.
Paspaudę ALT pažymime abu tekstinius sluoksnius "Layers" meniu:
Nutempiame abu sluoksnius už kadro ribų (žemyn) ir nustatome kiekvienam iš jų opacity:0. Nepamirškite Tween meniu vėl pažymėti "Opacity". Rezultatas:
8. Pasaulis apvalus. Turime "sugrįžti" į pirmąją skaidrę. T.y. jeigu jau išėjome už kadro, tai turime į sugrįžti. Pavyzdyje "KurkIT.lt" nusileis iš viršaus, o moto įskries iš dešinės.
9. Finaliniai akordai. Baneris juda per greitai. Kai tekstas pasiekia galiutinę etapo vietą reikia nustatyti ilgesnį uždelsimą. Kodėl to nepadariau iš karto? Dublikuojant skaidres nusikopijuoja ir uždelsimas, galite net nepastebėti, kai iš 0,03s. pasidarys 1s., o vėliau tai atitaisyti būtų labai nepatogu, be to, kūrybos eigoje vistiek tektų redaguoti uždelsimo ilgumą.
Galutinis mūsų rezultatas:
10. Spaudžiame Alt+Shift+Ctrl+S (arba File > Safe For Web & Devices). Tiesiog išsaugoję paveikslėlį GIF formatu prarasite informaciją apie animaciją. Ir, žinoma, išsisaugokite PSD failą ateičiai.
Reziume...
Mūsų pavyzdinis baneris tuštokas, savajame pateikite daugiau informacijos. Nebijokite panaudoti kelių efektų, taip pat ir Blending Options. Stenkitės sukoncentruoti lankytojų dėmesį į esmines detales, tačiau nepersistenkite. Mirgsintys ar temos neatitinkantys baneriai tikrai nepakels pasitikėjimo Jūsų tinklapiu.
Prisegsiu ir PSD failą, gal būt kas nors panorės peržiūrėti viską patys...
Parsisiųsti