Banner de animație. Cum se face un banner animat GIF.

Astăzi ne vom uita la o lecție foarte simplă, ci o lecție foarte interesantă pentru a crea un banner animat GIF.

Pentru a fi mai clară despre ce vorbim și că, în cele din urmă, se va dovedi, ne uităm la rezultatul final al muncii noastre ulterioare.

Astăzi, cele mai populare bannere făcute practic pe toate site-urile web și pe toate rețelele de schimb de bannere sunt banner bazate pe animație GIF sau flash de dimensiune standard: 468x60, 100x100, 120x60, 88x31.

Vom lua în considerare un exemplu de creare banner animat Cu dimensiuni de 468x60, care este exemplul menționat mai sus.

Deci, primul lucru pe care trebuie să-l faceți este să determinați cum ați dori ca bannerul dvs. să se uite în cele din urmă. Vino cu o parte a textului și conceptul de mișcări ale cuvintelor, imaginilor și altor persoane. Încercarea de a crea o animație fără a gândi să înceapă să se încheie - o afacere liberă.

După cum se poate vedea pe exemplu, bannerul nu este complicat deloc și are trei etape de informații.

1. Primul bloc de text "Creați site-ul dvs." implică informații despre chestionar.

2. Cel de-al doilea bloc text "poate fiecare" ca și cum răspunsul la acesta.

3. Esența informațională a bannerului în sine. Adică un răspuns clar formulat, unde să înveți acest lucru))

Cred că teoria este suficientă. Practica Domnului!

Crea un nou document Cu dimensiuni de 468x60 pixeli.

Acum, să punem fiecare parte a informațiilor banner pe un strat separat. (În imaginea de mai jos, am străpuns fișierele de claritate, ar trebui să o faceți într-un singur document, pur și simplu plasați straturile peste celelalte)

De asemenea, vom avea nevoie de câteva imagini de fundal, în cazul nostru este o textura cu divorțuri albastru. De asemenea, trebuie să separe straturile.

Acum mergem la meniul derulant fereastră și porniți panoul Animație.

Aici sunt afișate aceleași straturi, numai cu posibilitatea de a implementa pe toată lumea.

În starea desfășurată, fiecare strat are mai mulți parametri.

Poziţie - Responsabil pentru mutarea imaginii situate pe acest strat.

Opacitate. - Responsabil pentru transparență

Stil. - Responsabil pentru aducerea imaginii stratului de stiluri, adică. Umbre, iluminare, extrudare și altele.

Înfășurarea textului.(Dacă acest strat de text) este conceput pentru a curbura textului.

Fiecare dintre acești parametri are propria cale temporară pe care pot fi plasate markeri, ca și cum ar fi fixarea stării actuale.

Metoda de construire a unei animații este simplă de nebunie. De exemplu, avem nevoie de imagine pentru a vă deplasa în partea stângă a dreptului. Pentru a face acest lucru, faceți clic pe ceasul de lângă poziția de inscripție, după care deplasați alergătorul spre dreapta la punctul dorit al cronologiei și pur și simplu prin imagine din lateral. Programul în sine va adăuga toate cadrele necesare. Veți fi lăsat doar pentru a ajusta perioada de timp, cu ajutorul markerilor pe cronologie. Același fel funcționează transparența, adăugarea stilurilor și textului curburii.

Mai jos este un exemplu pentru proprietatea transparenței (opacitate).

Faceți acest pas cu animația de a dispari pe primul strat "Creați site-ul dvs.". Dacă vă uitați cu atenție la bannerul din partea de sus a lecției, observați că, în plus față de dispariția textului, există și o iluminare. Animația iluminării este similară cu acțiunile de transparență, dar când iluminarea strălucitoarelor exterioare este pornită în proprietățile stratului. Cadrul inițial este iluminarea cu parametrul \u003d 0 și în finala:

De asemenea, există un efect de strălucire interioară asupra stratului, este responsabil pentru lumina interioară a textului. Acțiunile efectuate sunt identice. Cadrul inițial este o valoare mică, ultimul - mare.

Următorul strat "poate funcționa fiecare" în același mod, dar cu condiția de compensare a cronologiei, deoarece cel de-al doilea strat începe să fie afișat după ce primul a devenit complet transparent.

Și unul mai mult, ultimul strat la numărul 3, pe cronologia începe să acționeze atunci când al doilea a devenit complet transparent.

Prima dată nu este puțin probabil să reușească, așa că va veni să încerce, dar totul vine cu experiență.

După fiecare parte, va respecta în mod clar zona de timp, puteți presupune că totul este gata. Acum faceți clic pe Ctrl + Shift + Alt + S (Salvare pentru Web)și ne salvăm bannerul în formatul GIF., El, după cum știți deja, susține conservarea animației.

Salut prieteni! Astăzi am venit să vorbesc despre cum creați animație sau în Photoshop. De ce ai nevoie? Dacă câștigi blogul dvs., atunci se întâmplă de obicei cu ajutorul bannerelor.

Majoritatea oamenilor de afaceri de informare oferă partenerilor deja bannere gata, atât animate, cât și sub forma unei imagini simple cu legătura dvs. afiliată. Rămâne doar pentru a copia codul și pentru a instala pe blogul dvs.

Și dacă decideți să nu puneți imaginea furnizată de proprietarul programului afiliat în care participați, ci să vă faceți propria dvs.? Sau acest mic om nu ți-a oferit nimic decât legăturile de afiliere. Da, și se întâmplă.

Cred că mulți vor fi de acord cu mine că atenția vizitatorilor blogului este mai bine atrasă de imaginile animate decât de obicei. Creșterea astfel conversia tranzițiilor și a vânzărilor.

Să începem și să începem să creăm o animație din imagini din programul Photoshop. Ca rezultat, vom avea un banner care își va schimba conținutul, adică va deveni animat.

Și așa, lansați programul Photoshop. Sper că este instalat.

Am o versiune rusificată a Photoshop (CS6), așa că voi face animația mea și voi spune cum se face în ea.

În meniu, selectați "Fișier - creați", pentru a crea un nou document.

În fereastra care se deschide, ne-am stabilit setările viitorului banner animat. Vă recomandăm ca dimensiunile (înălțimea, lățimea) să nu fie la întâmplare, dar alegeți standard. Eu, de exemplu, alegeți una dintre dimensiunile standard ale bannerului, este de 468 de 60 de pixeli. Faceți clic pe "OK".

Avem un document curat în care vom face deja o animație.

Animația mea va consta doar din text, adică textul se va înlocui reciproc printr-o anumită perioadă de timp pe care vom instala puțin mai târziu. Puteți utiliza numai imagini sau utilizați și text și imagini. Dar amintiți-vă, cu atât mai multe fotografii veți folosi pentru bannerul dvs. animat, cu atât mai mult va cântări.

Și așa, în meniul cu instrumente Photoshop, aleg instrumentul de text. Îmi scriu textul pe documentul pe care îl creăm și apăsați caseta de selectare din partea de sus a ferestrei. Textul nostru este creat pe un nou strat. Cum să alegeți și să configurați fontul, culoarea fontului, sper că știți.

Acum, dezactivăm stratul cu primul text făcând clic pe globul ocular de lângă stratul dorit și din nou selectând instrumentul "Text", scrieți următorul șir. Noul text apare din nou pe noul strat.

Acum avem trei straturi. Primul strat este un fundal pe care îl puteți turnați în orice culoare și două straturi cu text.

Straturile noastre de a crea animație (banner animat) sunt gata. Acum ne întoarcem la crearea unei animații de bovine și reînvie bannerul nostru.

În meniu, treceți peste fila "Fereastră" și puneți o bifă lângă elementul "Time Scale".

În partea de jos a ferestrei Photoshop, ar trebui să apară o fereastră suplimentară "de timp". Are deja primul cadru al animației noastre. Deoarece animația mea va consta doar din două cadre, creez un alt cadru. Pentru a face acest lucru, faceți clic pe pictograma "Copy Copy Creare" (a se vedea figura).

Acum avem două cadre cu același conținut. Aveam nevoie de faptul că conținutul personalului ar fi diferit, astfel încât textul sau imaginea bannerului nostru animat sa schimbat când este afișat cadrul.

Faceți clic pe primul cadru, alocându-l astfel. Acum deschideți fereastra cu straturile noastre și lăsați pictogramele pictograme numai lângă cele care ar trebui să fie pe cadru. În cazul meu, aceasta este inscripția "făcând un banner animat" și un strat cu fundal.

Apoi, evidențiam al doilea cadru făcând clic pe el. Mergem din nou la straturi și pornim acele straturi care ar trebui să fie pe al doilea cadru. Se oprește foarte mult. În cazul meu, este din nou stratul de fundal și a doua inscripție "în programul Photoshop". Stratul "Faceți un banner animat" am dezactivat, deoarece pe al doilea cadru nu este suficient să fie.

În principiu, animația noastră este gata. Dar dacă începem acum făcând clic pe butonul de redare sub scara de timp, acesta va derula cu o viteză nebună. Toate datorită faptului că, în mod implicit, pentru fiecare cadru, timpul de spectacol este de 0 sec.

Trebuie să afișăm timpul fiecărui cadru pentru a schimba. Pentru a face acest lucru, faceți clic pe triunghi, lângă contorul de timp și în lista care se deschide, selectați timpul necesar. Am pus 2 secunde. Pentru fiecare cadru.

Acum începem animația din nou și vedem rezultatul. Dacă totul se potrivește, atunci puteți trece la conservarea bannerului nostru animat.

Asta sa întâmplat în mine de-a lungul acestei lecții.

Pentru o mai bună înțelegere a modului de a crea o animație în Photoshop, am înregistrat o lecție în format video. Uite și lăsați comentariul dvs. 🙂

Data viitoare vom considera că atunci când faceți clic pe acesta, puteți merge la alte site-uri.

Asta e tot! La noi întâlniri.

De la care veți învăța cum se face un banner animat GIF pentru site. În plus, lecția va lua în considerare procesul optimizarea animației grafice Și problema instalării bannerului pe site. Deci, va fi interesant. Merge.

În fiecare zi vedem un număr mare de toate tipurile de bannere, nu numai pe Internet, ci și în viata reala. În orice oraș puteți întâlni postere pe marginea drumului cu publicitate - acest lucru este, de asemenea, un fel de bannere. Publicitate, publicitate, în cazul în care nu să arate publicitate. Ce este un banner? Să aflăm.

Ce este un banner?

Așa cum spune o enciclopedie inteligentă Wiki, atunci

Astfel, bannerul pare "Momeală"pentru client, astfel încât el a făcut clic pe el și a prins "Pe tija de pescuit". De aici urmează bannerul trebuie să atragă Vederea noastră și provocarea emoției. Dar despre ea puțin mai mică.

Care sunt dimensiunea bannerelor grafice?

Există nenumărate formate diferite ale bannerelor. Vă voi da doar o listă incompletă dimensiuni standard ale bannerelor:

88 × 31, 100 × 100, 100 × 200, 120 × 60, 120 × 90, 120 × 240, 120 × 600, 125 × 125, 125 × 250, 160 × 60, 160 × 120,160 × 240,160 × 600, 240 × 400, 250 × 250, 336 x 280, 460 × 60, 728 x 90 și multe altele.

După cum puteți vedea, există o mulțime de dimensiuni - alegeți că nu vreau!. În plus față de lista de mai sus, nu aveți pe nimeni să împiedice bannerul în dimensiunile sale unice.

Banner - ca un declanșator psihologic

Publicitate, publicitate, dar unde fără ea. Publicitate - așa cum se spune, acesta este un motor comercial și pentru a face munca publicitară, aveți nevoie de un banner eficient, astfel încât să atrageți. Așa că am dorit bunurile și serviciul să publicăm un banner.

Ca a face Chelar banner.? Și acești prieteni sunt o știință întreagă. Nu crede? Apoi, asigurați-vă că găsiți și citiți cărțile lui Viktor Orlova (Magic din textele tale, suport, drepturi de autor, cuvinte magice). După citire care, nu veți avea îndoieli cum să faceți corect un text de publicitate banner.

Dacă puteți descrie mai multe, atunci atracția clientului merge la mai mulți pași:

• Indicăm problema în întrebare (dureri de cap? Banii sunt necesare? Avem nevoie de un site? Etc.)
• Vă informăm că există o tabletă magică
• Vrei să știi mai multe? Și apelați la acțiune (cumpărați, faceți clic, comandă, priviți aici, faceți clic pe link etc.)

Nimic nu reamintește? Da, același magazin pe canapea. Doar totul este construit pe psihologia umană și, prin urmare, funcționează. Vedeți prieteni, întreaga știință. Deci, care este interesat, alergând în spatele cărților lui Vika Orlov la un magazin sau căutând pe Internet.

Și cum se aplică această știință lecției noastre? Totul este simplu, vom face banner animatcare va consta din trei diapozitive diferite. Fiecare diapozitiv este un pas separat din lista de mai sus. Prins un moment? Ești gata să faci bannerul tău? Apoi începem și pentru asta vom avea nevoie doar de una.

Cum se face un banner animat GIF în GIMP?

Pasul 1.Alerga gimp Editor Și creați un nou proiect. Pentru acest exemplu Am ales dimensiunea bannerului de 468 × 60 pixeli. Puteți alege celălalt vă place cel mai mult.

Pasul 2.După cum am menționat mai sus, noi banner. va consta din trei cadre, adică Trebuie să creăm trei straturi separate cu dvs. Amintiți-vă cum am făcut? Acum, pentru locul straturilor cu numere, vom avea straturi cu inscripții text, diferența în principiu nu este.

Și astfel încât un cadru este arătat mai repede, iar celălalt, de exemplu, ultimul cadru al animației, a fost întârziat mai mult, vom schimba timpul afișat al cadrului, stabilind diverși parametri la strat.

Pentru a crea o inscripție text, alegeți instrumentul "Text" și să creați o inscripție

Pasul 3. Acum trebuie să combinați stratul de text cu fundul alb. Faceți clic pe butonul Mouse-ului din dreapta sus și alegeți "Mergeți cu cea anterioară".

Pasul 4.Acesta este primul cadru, care denotă problema, suntem gata. Mergem mai departe și creăm un nou strat cu o umplere albă făcând clic pe pictograma "Crearea unei noi straturi"

Apoi, alegem din nou instrumentul "Text" și scrieți inscripția

De asemenea, combinăm stratul de text cu un substrat alb. În momentul în care avem deja două straturi separate în panoul straturilor.

Pasul 5.Creați un alt strat alb și text. De data aceasta am ales culoarea textului negru, nu roșu.

Schimbați culoarea prim-plan pe albastru.

Alegeți instrumentul "Perie" Și vopsea inscripția "aici". Asta am făcut.

Combinăm un strat cu text și fundal alb, așa cum am făcut mai sus. Ca urmare a acestor acțiuni, suntem pregătiți pentru trei cadre, viitorul nostru banner animat. De asemenea, pentru simplitate, puteți redenumi straturile, de exemplu, astfel:

Pasul 6. Acum, pentru un efect stimulativ, adăugați cu ajutorul acestor perii, un cursor de mână mic sub inscripția "Aici". Cum se instalează perii noi la editorul Gimp, puteți.

Cursor Adăugați la stratul superior