Animacija banner. Kako napraviti animirani GIF banner.
Danas ćemo pogledati ne vrlo jednostavno, već vrlo zanimljivu lekciju za stvaranje animiranog GIF bannera.
Da bi bili jasniji o čemu govorimo, i da će se na kraju ispasti, gledamo na krajnji rezultat našeg daljnjeg rada.
Danas, najpopularniji transparenteri napravili praktički na svim web stranicama i na svim banner-exchange mrežama su banner na temelju GIF ili Flash animacije standardne veličine: 468x60, 100x100, 120x60, 88x31.
Razmotrit ćemo primjer stvaranja animirani banner S dimenzijama 468x60, što je gore spomenuti primjer.
Dakle, prva stvar koju treba učiniti je odrediti kako želite da vaš banner izgleda u konačnici. Dođite do tekstualnog dijela i koncept kretanja riječi, slika i drugih. Pokušavajući stvoriti animaciju bez razmišljanja od početka do kraja - labav posao.
Kao što se može vidjeti na primjeru, banner uopće nije kompliciran i ima tri faze informacija.
1. Prvi blok teksta "Stvorite svoju web-lokaciju" podrazumijeva podatke o upitniku.
2. Drugi blok teksta "može svaki" kao odgovor na njega.
3. Informativna suština same zastave. To jest, jasno formulirani odgovor, gdje to naučiti)))
Mislim da je teorija dovoljna. Vježba Gospodina!
Stvoriti novi dokument S dimenzijama od 468x60 piksela.
Sada, stavimo svaki dio informacija o banneru na poseban sloj. (Na donjoj slici, probio sam datoteke za jasnoću, trebali biste to učiniti u jednom dokumentu, jednostavno postavljanje slojeva preko drugog)
Također, trebat ćemo nekoliko pozadinskih slika, u našem slučaju to je tekstura s plavkastim razvodom. Također mora razdvojiti slojeve.
Sada idemo na padajućeg izbornika prozora i uključite animacijsku ploču.
Ovdje se prikazuju isti slojevi, samo s mogućnošću raspoređivanja svakog.
U raspoređenoj državi svaki sloj ima nekoliko parametara.
Položaj - Odgovoran za pomicanje slike koja se nalazi na ovom sloju.
Neprozirnost. - Odgovorna za transparentnost
Stil. - Odgovoran za dovođenje na sliku sloja stilova, tj. Sjene, osvjetljenje, ekstruzija i drugo.
Tekst omot.(Ako je ovaj tekstni sloj) dizajniran za zakrivljenost teksta.
Svaki od ovih parametara ima vlastiti privremeni zapis na kojem se mogu postaviti markeri, kao da fiksiraju trenutno stanje.
Metoda izgradnje animacije je jednostavan za ludilo. Na primjer, trebamo sliku za pomicanje lijevo od desne strane. Da biste to učinili, kliknite na sat pored položaja natpisa, nakon čega pomičemo trkač na desnoj strani na željenoj točki vremenske trake i jednostavno slikom na stranu. Sam program će dodati sve potrebne okvire. Ostavite samo da podesite vremensko razdoblje, uz pomoć markera na vremenskoj traci. Na isti način radi transparentnost, dodajući stilove i tekst zakrivljenosti.
U nastavku je primjer za nekretninu (neprozirnost).
Učinite ovaj korak s animacijom teksta da nestane na prvom sloju "Stvorite svoju web-lokaciju". Ako pažljivo pogledate banner na vrhu lekcije, onda primijetite da osim nestanka teksta postoji i osvjetljenje. Animacija osvjetljenja je slična akcijama transparentnosti, ali kada je vanjsko osvjetljenje sjaja uključen u svojstva sloja. Početni okvir je osvjetljenje s parametrom \u003d 0, au finalu:
Također, postoji unutarnji sjaj na sloj, odgovoran je za unutarnje svjetlo teksta. Izvršene radnje su identične. Početni okvir je mala vrijednost, krajnji - veliki.
Sljedeći sloj "svibanj svaki" radi na isti način, ali uz uvjet da se pomakne vremenski okvir, budući da se drugi sloj počinje prikazivati \u200b\u200bnakon što je prvi postao potpuno transparentan.
I još jedan, posljednji sloj na broju 3, na vremenskoj liniji počinje djelovati kada je drugi postao potpuno transparentan.
Prvi put je jedva da neće uspjeti, pa će doći pokušati, ali sve dolazi s iskustvom.
Nakon svakog dijela će se jasno pridržavati svog područja vremena, možete pretpostaviti da je sve spremno. Sada kliknite Ctrl + Shift + Alt + S (spremanje za web)i spasimo našu bannera gIF format, On, kao što već znate, podržava očuvanje animacije.
Zdravo prijatelji! Danas sam došao razgovarati o tome kako stvoriti animaciju ili u Photoshopu. Zašto trebate? Ako zaradite svoj blog s, obično se događa uz pomoć bannera.
Većina informacija poslovnih ljudi pružaju svoje partnere već spremne transparente, animirani i u obliku jednostavne slike s vašom affiliate link. Ostaje samo kopirati kôd i instalirati na svoj blog.
A što ako odlučite ne staviti sliku koju daje vlasnik affiliate programa u kojem sudjelujete, ali da biste sami? Ili ovaj mali čovjek vam nije pružio ništa osim affiliate linkova. Da, i to se događa.
Mislim da će se mnogi složiti sa mnom da se pozornost blog posjetitelja bolje privlači animiranim slikama nego uobičajeno. Time povećava konverziju prijelaza i prodaje.
Počnimo, i počnimo stvarati animaciju s slika u programu Photoshop. Kao rezultat toga, imat ćemo banner koji će promijeniti njezin sadržaj, to jest, postat će animirano.
I tako, pokrenite Photoshop program. Nadam se da je instaliran.
Imam rusan verziju Photoshopa (CS6), pa ću napraviti svoju animaciju i reći kako se to radi u njemu.
U izborniku odaberite "File - Stvaranje", kako biste stvorili novi dokument.
U prozoru se otvara, postavljamo svoje postavke budućeg animiranog bannera. Preporučujem da dimenzije (visina, širina) nisu nasumce, ali biraju standard. Ja, na primjer, odaberite jednu od standardnih veličina bannera, je 468 za 60 piksela. Kliknite "U redu".
Imamo čist dokument u kojem ćemo već napraviti animaciju.
Moja animacija će se sastojati samo od teksta, to jest, tekst će se međusobno zamijeniti kroz određeno vremensko razdoblje koje ćemo instalirati malo kasnije. Možete koristiti samo slike ili koristiti i tekst i slike. Ali zapamtite, više slika ćete koristiti za svoj animirani banner, to će više težiti.
I tako, u izborniku s Photoshop alatima odabirem tekst alat. Pišem tekst za mene na dokumentu koji stvaramo i pritisnite potvrdni okvir na vrhu prozora. Naš tekst je stvoren na novom sloju. Kako odabrati i konfigurirati font, boju fonta, nadam se da znate.
Sada isključimo sloj s prvim tekstom klikom na očnu jabučicu pored željenog sloja i ponovno odabirom "Tekst" alat, napišite sljedeći niz. Novi se tekst ponovno pojavljuje na novom sloju.
Sada imamo tri sloja. Prvi sloj je pozadina koju možete sipati u bilo koju boju i dva sloja s tekstom.
Naši slojevi za stvaranje animacije (animirani banner) su spremni. Sada se okrećemo stvaranju animacije stoke i oživite naš banner.
U izborniku, pređite na karticu "prozor" i stavite kvačicu pored stavke "Time Scale".
Na dnu prozora Photoshop treba pojaviti dodatni prozor "vremenske skale". Već ima prvi okvir naše animacije. Budući da će se moja animacija sastojati samo od dva okvira, stvaram još jedan okvir. Da biste to učinili, kliknite na ikonu "Copy Copy Creation" (vidi sliku).
Sada imamo dva okvira s istim sadržajem. Trebali smo da bi sadržaj osoblja bio drugačiji, tako da se tekst ili slika našeg animiranog bannera promijenila kada je okvir prikazan.
Učinite klik na prvi okvir, a time ga dodijelili. Sada otvorite prozor s našim slojevima i ostavite ikone ikone tek pored onih koji bi trebali biti na okviru. U mom slučaju, ovo je natpis "stvaranje animiranog bannera" i sloja s pozadinom.
Zatim označite drugi okvir klikom na njega. Ponovno idemo na slojeve i uključite te slojeve koji bi trebali biti na drugom okviru. Ekstraly isključiti. U mom slučaju, to je opet pozadinski sloj i drugi natpis "u programu Photoshop". Sloj "Napravite animirani banner", isključujem, jer na drugom okviru nije dovoljno biti.
U načelu, naša animacija je spremna. Ali ako ga počnemo sada klikom na gumb za reprodukciju ispod vremenske skale, to će se pomicati s ludom brzinom. Sve zbog činjenice da je prema zadanim postavkama za svaki okvir, vrijeme showa je 0 sek.
Moramo prikazati vrijeme svakog okvira za promjenu. Da biste to učinili, kliknite na trokut, pored mjerač vremena, a na popisu koji se otvara, odaberite vrijeme koje nam je potrebno. Stavio sam 2 sekunde. Za svaki okvir.
Sada ponovno pokrećemo animaciju i vidimo rezultat. Ako vam sve odgovara, onda se možete preseliti na očuvanje našeg animiranog bannera.
To se dogodilo u meni uz ovu lekciju.
Za bolje razumijevanje kako stvoriti animaciju u Photoshopu, snimio sam lekciju u video formatu. Pogledajte i ostavite svoj komentar 🙂
Sljedeći put ćemo to uzeti u obzir kada kliknete na njega, možete otići na druge web-lokacije.
To je sve! Na nove sastanke.
Iz kojeg ćete naučiti kako napraviti animirani GIF banner za web-lokaciju, Osim toga, lekcija će razmotriti proces optimizacija grafičke animacije I pitanje instaliranja bannera na web-lokaciju. Dakle, bit će zanimljivo. Ići.
Svaki dan vidimo ogroman broj svih vrsta bannera, ne samo na internetu, već iu stvaran život, U bilo kojem gradu možete upoznati plakati na cesti s oglašavanjem - to je također neka vrsta bannera. Oglašavanje, oglašavanje, gdje ne gledati oglašavanje. Što je banner? Hajde da vidimo.
Što je banner?
Kao jedna pametna wiki enciklopedija kaže, onda
Dakle, baner izgleda kao "Mamac"za klijenta tako da je kliknuo na njega i uhvatio "Na štapici za ribolov", Odavde slijedi banner mora privući Naš pogled i uzrokuju emocije. Ali o tome malo niže.
Koje su veličine grafičkih bannera?
Postoje bezbroj različitih formata bannera. Dat ću vam samo nepotpun popis standardne veličine bannera:
88 × 31, 100 × 100, 100 × 200, 120 × 60, 120 × 240, 120 × 600, 120 × 65, 125 × 125, 125 × 250, 160 × 60, 160 × 120, 160 × 120,160 × 240,160 × 600, 240 × 400, 250 × 250, 336 x 280, 460 × 60, 728 x 90 i mnogih drugih.
Kao što možete vidjeti, ima mnogo veličina - odaberite ne želim!, Osim navedenog popisa, nemate nikoga sprječava banner u svojim jedinstvenim dimenzijama.
Banner - kao psihološki triger
Oglašavanje, oglašavanje, ali gdje bez njega. Oglašavanje - Kako kažu, to je trgovački motor, i da bi se oglašavao radio, trebate učinkovit banner, da bi privukli. Dakle, željeli smo robu i uslugu da oglašavaju banner.
Kao napraviti ulančavajući baner? I ovi prijatelji su cijela znanost. Nemoj vjerovati? Onda budite sigurni da pronađete i čitate knjige Viktora Orlova (Čarolija vaših tekstova, super-naslov, samohrana autorska prava, čarobne riječi). Nakon što čitate, nećete imati sumnje kako napraviti tekst oglašavanja banner ispravno.
Ako možete opisati više, atrakcija klijenta ide na nekoliko koraka:
- Mi ukazuje na problem u pitanju (glavobolja? Novac je potreban? Trebamo web-lokaciju? Itd.)
- Informiramo da postoji čarobna tableta
- Želite li znati više? I nazovite za radnju (kupite, kliknite, naručivanje, pogledajte ovdje, kliknite na link, itd.)
Ništa ne podsjeća? Da, ista trgovina na kauču. Samo je sve izgrađeno na ljudskoj psihologiji i stoga radi. Vidite prijatelje, cijelu ovu znanost. Dakle, tko je zainteresiran, trčanje iza knjiga Vika Orlov u trgovinu ili traže na internetu.
I kako se ta znanost odnosi na našu lekciju? Sve je jednostavno, učinit ćemo animirani bannerkoji će se sastojati od tri različita slajdova. Svaki slajd je odvojeni korak od gore navedenog popisa. Uhvaćen na trenutak? Jeste li spremni učiniti vaš banner za nijanse? Onda počinjemo i za to ćemo trebati samo jedan.
Kako napraviti animirani GIF banner u GIMP-u?
Korak 1.Trčanje urednik GIMP-a I stvoriti novi projekt. Za ovim primjerom Odabrao sam veličinu bannera od 468 × 60 piksela. Možete odabrati drugi koji ćete najviše voljeti.
Korak 2.Kao što sam spomenuo gore, naše baner će se sastojati od tri okvira, tj. Moramo stvoriti tri odvojena sloja s vama. Sjećaš li se kako smo? Sada, za mjesto slojeva s brojevima, imat ćemo slojeve s tekstualnim natpisima, razlika u načelu nije.
I tako da je jedan okvir brže prikazan, a drugi, na primjer, posljednji okvir animacije, bio je odgođen duži, promijenit ćemo prikazano vrijeme okvira, postavljanje različitih parametara na sloju.
Da biste stvorili natpis teksta, odaberite "Tekst" alat i stvorite natpis 
Korak 3. Sada morate kombinirati tekstualni sloj s donjem bijelom. Kliknite na gornji sloj desno miša i odaberite "Spoji s prethodnom".
Korak 4.To je prvi okvir koji označava problem, spremni smo. Idemo dalje i stvaramo novi sloj s bijelim punjenjem klikom na ikonu "Stvaranje novog sloja"
Zatim ponovno odabiremo alat "Text" i napišite natpis 
Također, kombiniramo tekstualni sloj s bijelim podlogom. U ovom trenutku već imamo dva odvojena sloja u ploči slojeva.
Korak 5.Stvorite još jedan bijeli sloj i tekst. Ovaj put sam izabrao boju teksta crne, a ne crvene. 
Promijenite boju prednjeg plana na plavoj boji.
Odaberite alat "Četka" I obojite natpis "ovdje." To je ono što sam učinio.
Kombiniramo sloj s tekstom i bijelom pozadinom, kao što smo učinili više. Kao rezultat tih radnji, spremni smo za tri okvira, našu budućnost animirani banner, Također, za jednostavnost, možete preimenovati slojeve, na primjer, ovako:
Korak 6. Sada, za stimulirajući učinak, dodajte uz pomoć ovih četkica, mali kursor rukom ispod natpisa "ovdje". Kako instalirati nove četke u GIMP Editor, možete.
Kursor dodati na najviši sloj