Faceți un banner frumos în Photoshop. Cum se creează un banner în Photoshop: instrucțiuni pas cu pas, sfaturi pentru începători

Salutare tuturor. În articolul actual vă voi arăta cum puteți face banner gif folosind Photoshop. În general, sunt obișnuit să fac bannere și animații în . Desigur, Photoshop nu se poate compara cu acest pachet în ceea ce privește funcționalitatea de animație. Dar tot poti face bannere destul de simple si interesante in Photoshop, pentru ca in noile sale versiuni, incepand cu CS5, din cate stiu eu, a devenit posibila crearea de animatii de transparenta, scalare, perspectiva etc. Să ne uităm la procesul de creare a unui banner GIF în Photoshop folosind exemplul lucrării aflat în titlul articolului.

Să creăm document nou mărimea 600 până la 200px. Fundal - #589fff

Mai întâi, să asamblam bannerul într-o formă statică. Să plasăm personajul nostru principal – peștele – pe strat, unde poți obține resurse gratuite pentru munca ta, am scris în articolul „”:

Folosind „ Figura liberă » plasați o înștiințare cu dialogul pe strat.

Permiteți-mi să vă reamintesc că puteți edita o formă (obiect vectorial) folosind instrumentul „Selectarea unui nod”.

Asta am făcut - am șters-o elemente inutileîn stratul cu prima formă și a adăugat încă 3 elipse pentru a face să pară că acest nor de dialog vine din gura peștelui. S-au întâmplat următoarele.

Acum să plasăm textul pe straturile documentului, în ordinea în care va apărea. Deoarece textul nostru va apărea unul după altul, este firesc ca în versiunea statică straturile să se suprapună. Voi afișa toate straturile cu ultimul strat de text dezactivat.

Și vă rugăm să rețineți că straturile noastre de text trebuie decupate la dimensiunea stratului cu forma de nor de dialog, astfel încât să servească drept cadru, datorită căruia textul nu va mai fi vizibil.

Deci, toate straturile noastre sunt gata. Aranjate în ordinea apariției lor (de jos în sus). Putem începe animația.

Selectați un articol Fereastra – Cronologie.În panoul care apare, selectați butonul Creați o cronologie pentru videoclip. Ca urmare, va fi creată o cronologie, cu toate straturile noastre, pe care deja le putem muta și anima.

Deoarece avem un strat de fundal cu blocare, acesta nu va fi afișat pe cronologia, va fi întotdeauna prezent neschimbat. Dacă doriți să animați fundalul, deblocați stratul acestuia făcând dublu clic pe butonul stâng al mouse-ului.

Fiecare strat din cronologia are atribute pentru animație. Ele pot fi văzute dacă extindeți lista din stânga numelui stratului. Putem schimba poziția, opacitatea, stilul.

La fel, dacă dați clic tasta dreapta faceți clic pe numele stratului însuși pe pista cronologică, se va deschide o listă de acțiuni suplimentare de animație.

Puteți activa crearea de cadre cheie pentru o anumită pistă cu un strat făcând clic pe pictograma ceas de lângă numele atributului de animație.

Un diamant galben (pictograma cadru cheie) va apărea acolo unde se află marcatorul de timp pe cronologia. De exemplu, la început. Puteți modifica valoarea unui atribut de obiect, cum ar fi poziția, iar valoarea acestuia va fi salvată pentru acel cadru cheie. Apoi, pentru a seta o nouă valoare și un nou cadru cheie, trebuie să mutați indicatorul de timp în noua locație. Faceți clic pe pictograma diamant de lângă numele atributului (o nouă pictogramă cadru cheie va apărea pe cronologie) și setați o nouă valoare a atributului. De exemplu, mutați un obiect într-o locație nouă.

Acum să încercăm să aplicăm cunoștințele dobândite. Peștele nostru ar trebui să apară de la stânga la dreapta, iar transparența acestuia ar trebui să se schimbe de la 0 la 100%. Iată cum va arăta scala de timp: în acest caz,.

După ce peștele a apărut, un nor de dialog va apărea în părți. Mai întâi elipsele, apoi figura în sine. Putem muta urmele fiecărui strat pe linia temporală, așa că le vom distribui pozițiile astfel încât să apară la intervalul de timp dorit și vom seta animația la parametru Opacitate pentru fiecare strat.

Pentru figură aplicăm aceiași pași.

Acum să creăm o animație pentru text folosind același algoritm. Doar textul va avea un parametru nu Poziție, ci Perspectivă și vom putea nu numai să schimbăm poziția, ci și să schimbăm scara de la mai mic la mai mare, atunci când textul începe să se miște. În acest scop este folosit instrument standard transformarea obiectului ( Ctrl +T). Deoarece inițial straturile de text sunt decupate în funcție de forma figurii, acestea vor fi vizibile numai în limitele acesteia. Am schimbat și stilul celui de-al doilea text. S-a adăugat un gradient în opțiunile de amestecare a straturilor.

Acum să aliniem toate marginile pistelor la sfârșit. Pentru a face acest lucru, trebuie să trageți de marginea dreaptă a fiecărei piese și să reglați totul în același timp. Pentru ca toate obiectele să nu dispară brusc. Pentru fiecare piesă, puteți seta opacitatea la 0. Redați ceea ce sa întâmplat. Puteți apăsa tasta spaţiu.

Deși Photoshop nu este creat pentru nicio animație complexă (și acest lucru este rezonabil), dar cu ajutorul unor astfel de acțiuni simple puteți obține un rezultat decent atunci când crearea unui gif banner. Mai ales dacă te simți mai confortabil în Photoshop decât atunci când lucrezi în Flash.

(Vizitat de 2.407 ori, 4 vizite astăzi)

În această transcriere, vom vorbi despre cum să faceți un banner în Photoshop cu animație simplă pentru Yandex.Direct.

Yandex.Direct a început recent să accepte bannere și presupun că doriți ca bannerul dvs. să aibă animație pentru a atrage atenția vizitatorilor pe diverse site-uri. Vom (se deschide într-o fereastră nouă) și vom transcrie împreună pentru a face un banner animat în Photoshop, cu un buton care se schimbă.

Ce este necesar pentru a face un banner animat în Photoshop?

Să începem cu limitele

Ce restricții avem?

Avem cerințe de moderare și există cerințe de dimensiune. Putem încărca următoarele dimensiuni (240x400, 300x250, 300x500, 300x600, 336x280, 640x100, 640x200, 640x960, 728x90, 960x640, 970x250), iar banner -ul ar trebui să cântărească până la 120 kb. Adică, dacă facem multă animație pe un banner mare, atunci cel mai probabil nu se va potrivi cu greutatea, acest lucru este de înțeles.

Unde să adăugați bannere gata făcute?

Să vorbim imediat despre unde să adăugați aceste anunțuri imagine. Când creezi campanie publicitara, apoi are o casetă de selectare pentru modificarea tipului de anunț.

Dacă selectați Grafic, atunci puteți adăuga o imagine (încărcați-o de pe computer, de exemplu) și se adaugă un link către site. Probabil că veți adăuga o serie de anunțuri aici, ceea ce înseamnă că veți adăuga mai multe bannere pentru un singur tip de direcționare. Acest lucru se datorează faptului că există multe site-uri diferite în YAN și, în funcție de designul lor, se adaugă blocuri de publicitate marimi diferite pentru a afișa reclame. Cred că și acest lucru este de înțeles.

Deci, am decis să creăm un banner. De ce avem nevoie pentru asta?

Avem nevoie de grafică

Unul dintre principiile creării unui banner bun este menținerea continuității. Adică: textul, stilul care se află pe pagina de destinație trebuie să fie parțial transferat pe bannerul nostru. Astfel încât utilizatorul, atunci când dă clic pe banner, are impresia că a mers unde și-a dorit.

In cazul meu am luat asta imagine mare, a făcut fotografia lui Nick și a desenat un buton în același stil ca pe pagina de destinație. La fel și textul, în același stil ca pe pagina de destinație. Fontul poate fi diferit, dar ideea este aceeași.

Editor grafic pentru crearea unui banner

În continuare avem nevoie de un editor. Desenez bannere Adobe Photoshop CC 2015. În cazul dvs., poate exista un editor grafic diferit, mă simt confortabil cu el, așa că voi arăta Adobe Photoshop ca exemplu.

Desenarea unui banner în Adobe Photoshop CC 2015

Apoi, creați un document nou, vă recomand să începeți cu o dimensiune mare. Acest lucru se datorează faptului că atunci când desenați primul banner mare și vi se potrivește complet dvs. sau clientului dvs., atunci puteți pur și simplu să glisați și să plasați toate elementele pe care le-ați pus aici pe alt document.

De exemplu, am nevoie de Nick. Selectez acest strat și pur și simplu îl trag într-un document nou, iar acum îl am pe Nick în noul document. Aici, în Adobe Photoshop, pot apăsa Ctrl+T sau Command+T și am acces la instrumentul Transform. Si aici pot sa schimb marimile, e foarte comod. Prin urmare, vă recomand să începeți cu siguranță să desenați bannere la dimensiuni mari.

Straturi banner în Photoshop

Deci, avem Adobe Photoshop, avem grafică, am creat un document (în cazul meu este 960x640), am adăugat un fundal aici - este doar o pânză albă. Acest lucru a fost făcut pentru ca următorul meu strat să nu atragă atenția - are un grad de transparență (am setat umplerea la 80%), deoarece fotografia este de o calitate destul de înaltă și clară și, prin urmare, dacă las umplerea la 100% , va atrage prea multă atenție. Următorul element L-am adăugat pe Nick aici. Vedeți, a fost decupat dintr-o fotografie de studio. Toate acestea pot fi combinate.

Un alt aspect este că în Adobe Photoshop, straturile superioare se suprapun cu straturile inferioare. Adică, dacă stratul cu Nick se afla sub stratul cu fotografia moscheii, atunci acesta ar fi blocat de moscheea Kul Sharif. De aceea e aici sus.

Una dintre cerințele Yandex.Direct este ca bannerul să conțină sigla organizației sau OGRN. Le-am adăugat imediat pe ambele, astfel încât să poată fi folosit același banner, de exemplu, în myTarget. Am adăugat și „6+” aici, aceasta este, de asemenea, o cerință de la Yandex.Direct ca bannerele evenimentului să aibă un semn de vârstă.

Un buton care se va mișca

Ei bine, butonul în sine. L-am desenat, constă dintr-o formă care este desenată folosind instrumentul dreptunghi rotunjit, scurtătură U. Pictat in aceeasi culoare ca pe site. Și apoi am scris textul „cumpără un bilet” cu roșu, la fel ca pe site.

Am și un efect de umbră asupra dreptunghiului (apropo, îl au și alte elemente ale acestui banner - textul). Să ne mutăm aici și să vedem ce este această umbră. Am făcut dublu clic pe strat și am mers la Stiluri strat. Și aici există un parametru Shadow. Mod de amestecare Normal, opacitate 100%, unghi 90 de grade și offset 0. Deoarece se aplică această umbră, apare un efect aerisit, ca și cum obiectul ar fi mai aproape de privitor.

Cum să faceți o animație a butonului nostru în Photoshop

Acum avem toate obiectele.

Ce trebuie să faceți pentru a crea o animație simplă?

Deschideți fereastra Cronologie

Pentru a face acest lucru, selectați meniul Fereastră și bifați caseta Cronologie. Acum, dacă îl scot acum, nu voi putea crea animație de cadru. Acum o voi porni și o să vezi că am două cadre. Îl șterg pe al doilea și am un cadru.

Dacă îl salvez așa, atunci nu se produce nicio schimbare pentru mine. Tot aici am setat imediat întârzierea la 1 secundă. Faptul este că acestea sunt cerințe Yandex.Direct.

Dacă animam un obiect cu text, atunci acest text trebuie să aibă timp să fie citit. O secundă este suficientă pentru a citi textul.

Creați un nou cadru

Pentru a crea următorul cadru, trebuie să faceți clic pe butonul Cadru nou. Și putem elimina pur și simplu butonul de pe acest cadru și îl facem invizibil. Adică, pe un cadru avem un buton, dar pe al doilea nu. Și dacă apăs pe play, atunci animația noastră este deja creată.

Animație mai complexă a butoanelor GIF

Dar haideți să creăm puțin mai mult animație complexă. Și pentru asta voi face o copie a acestui buton pe al doilea cadru. Grupul Buton conține stratul de text și dreptunghiul de fundal însuși. Pentru a face acest lucru, voi selecta grupul Buton, dau clic Click dreapta mouse, selectează Duplicați grup, sunt de acord și primesc un grup nou butonul Copiere.

Observați că sunt în al doilea cadru și ascund butonul anterior.

Să mergem acum la browser și îți voi spune ce efect vreau să obțin. Aici în fața ta este bannerul pe care ar trebui să-l luăm.

Și vezi că în primul cadru este un efect aerisit, iar în al doilea se pare că este apăsat butonul.

Cum să obțineți efectul pe un banner că butonul este apăsat?

Mă duc la Adobe Photoshop și merg la stilurile de straturi ale grupului dreptunghi-subpunere butonul Copiere ( dublu click pe strat). Și în loc de Shadow am pus Umbra interioarași mergeți la setări: mod amestec Normal, opacitate 100%. Apoi, fac un offset, astfel încât să fie vizibil. 7 pixeli sunt de ajuns. Și puteți schimba și unghiul - să-l facem la 140 de grade, astfel încât umbra să fie în lateral.

Acum avem butonul de aer pe primul cadru și apăsat pe al doilea.

Dar trebuie să recunoști că îi lipsește ceva.

Pentru a face acest lucru, trebuie să mergeți la stratul cu textul din buton, să selectați instrumentul de mutare și să apăsați săgeata în jos de pe tastatură. Așa că mut textul în jos făcând clic de două ori. Și încă de două ori la dreapta.

Puteți adăuga încă un pixel. Acum avem două cadre care se rotesc constant. Putem verifica cum funcționează toate acestea făcând clic pe butonul Play.

Salvați un banner gif cu animație

Pentru a salva, trebuie să selectați Fișier - Salvare pentru Web - și apare o fereastră. Pentru ca animația să funcționeze, trebuie să selectați format GIF. Dacă alegem format JPEG sau PNG, atunci animația noastră nu va funcționa și va apărea doar primul cadru. Selectăm GIF, putem selecta opțiuni de repetare (continuu sau o dată - recomand să-l bifăm) și putem vedea aici cum funcționează animația.

Totul ar fi bine, dar în acest caz vezi că GIF-ul nostru are marime mare. Acest lucru se datorează faptului că dimensiunea bannerului este mare, din această cauză greutatea obiectului nostru este foarte mare. În acest caz, recomand să îl salvați ca JPEG, iar la calitate 50, atunci greutatea sa va fi de 104 KB. Iar limita, permiteți-mi să vă reamintesc, este de 120 KB, adică suntem incluși.

Dar datorită faptului că am făcut o treabă bună în bannerul mare, acum putem transfera aceste obiecte pe bannere dimensiune mai mică, și acolo îl putem salva în siguranță ca GIF. Puteți vedea asta când lucrați. Ca urmare, atunci când îl salvăm, putem încărca deja acest banner în campania noastră publicitară.

Cum să faci un cadru pentru un banner?

De asemenea, aș dori să subliniez că acest fundal are un accident vascular cerebral. Nu se observă prea mult aici, deoarece culoarea este neagră, dar în browser puteți vedea că există un contur violet. Trebuie făcut; un cadru este, de asemenea, una dintre cerințele Yandex.Direct.

Cum se face?

Pentru a face acest lucru, accesați Photoshop, selectați stratul cu imaginea de fundal și, dacă lucrați într-o dimensiune diferită, trebuie să selectați un cadru (instrumentul Decupare) și să-l decupați la dimensiunea documentului.

Bannerele sunt mici, astfel încât obiectul dvs. de fundal va fi probabil mai mare decât bannerul dvs. Prin urmare, va trebui să fie tăiat exact la această dimensiune.

După ce tăiați, faceți dublu clic pe stilurile de strat și utilizați opțiunea de amestecare Stroke, selectați Poziție în interior, selectați culoarea de care aveți nevoie, puteți lipi numărul acesteia aici în formă digitalăși alegeți dimensiunea.

Cred că mai mult de 3 pixeli nu are sens. Grozav, salvează-l. Și acum primești un banner gata făcut pe care îl poți folosi.

Asigurați-vă că salvați sursele în format PSD

De asemenea, salvați acest document în format PSD, astfel încât să puteți face modificări în straturi în viitor. Dintr-o dată evenimentul se mișcă cu o oră, iar pentru a schimba toate acestea, ai nevoie de sursa. Cred ca intelegi si tu logica. Grozav.

Iată cum să faci un banner (ai citit transcrierea). Dacă ți-a plăcut, asigură-te că îi dai un like și te abonează la al meu, pentru că mai sunt multe altele care te așteaptă video interesant. Denis Gerasimov a fost cu tine, la revedere!

Continuăm lecția despre crearea de bannere. Astăzi vom vedea cum puteți face un banner animat pentru site-ul dvs.
În lecția anterioară, am analizat principala diferență dintre un banner animat și un banner animat, subliniind avantajele și dezavantajele acestuia.
Aș dori să vă atrag atenția pe faptul că în lecțiile mele despre crearea de bannere nu iau în considerare scenariul în sine și dezvoltarea ideii de banner. Aceasta este o scenă foarte importantă și, aș spune chiar, principala, pentru că fără să știi exact CE vrei să spui cu bannerul tău și CUM ți-l imaginezi, să începi să faci un banner nu are sens.

Prin urmare, vorbesc doar despre latura tehnică a creării de bannere și că dacă ai o idee și un scenariu, atunci fiecare poate face singur bannerul.
Un banner animat poate fi realizat nu numai în Photoshop, ci și în alte programe special adaptate pentru aceasta, dintre care există foarte multe. Vom vorbi și despre ele, dar puțin mai târziu. Între timp, să începem să creăm un banner în Photoshop-ul meu preferat.

Cum să faci un banner animat în Photoshop.
Opțiunea 1.
Un banner animat rezultat dintr-o simpla schimbare a imaginilor (fonduri, reclame). Pentru a face acest lucru, trebuie să luăm doar trei pași simpli:

Pasul 1. Pregătitor.
selectați dimensiunea bannerului (în cazul nostru 468x60) și creați dosar gol
facem poze pregătite în prealabil pentru bannerul nostru, care sunt deja prezentate în dimensiunea potrivită banner, copiați-le și lipiți fiecare dintre ele în fișierul nostru ca un strat separat (deschideți imaginea - selectați-o - copiați Ctrl + C - mergeți la fișierul nostru - lipiți Ctrl + V). Pentru bannerul meu am pregatit 3 poze (poza A).

Pasul 2. Realizarea unui contur pentru banner:
Selectați stratul 1. Dublu click pe strat, apelați meniul „Stil strat” și selectați „Stroke” din acest meniu.

După ce am selectat lățimea cursei, poziția și culoarea acesteia, reparăm acești parametri făcând clic pe butonul „Aplicați implicit”. Culoarea conturului ar trebui să evidențieze clar contururile bannerului nostru, ceea ce înseamnă că ar trebui să fie moderat luminos și contrastant atât în ​​raport cu fundalul imaginilor, cât și cu fundalul site-ului dvs.
Să trecem la stratul 2. Faceți dublu clic pe el și în fereastra „Layer Style”, pur și simplu selectați „Stroke” și faceți clic pe OK. (lăsăm setările stilului de contur neschimbate)
În mod similar, schițăm ultimul al treilea strat-imagine.

Pasul 3. Creați animația propriu-zisă pentru bannerul nostru.


Selectați în meniul de sus Photoshop „Fereastră” - „Animție” și selectați animația cadru cu cadru. Imaginea B arată în detaliu ce înseamnă fiecare buton individual de pe panoul de animație. (Imaginea B)

Creăm cadre de animație: primul cadru este creat când stăm pe stratul primei imagini, pentru a crea al doilea cadru facem clic pe butonul 7 (poza B) și mergem la al doilea strat, pentru a crea al treilea cadru dăm din nou clic pe pe butonul 7 (imaginea B) și „porniți al treilea strat - stratul celei de-a treia imagini.
Noi decidem timpul de animație. Setăm timpul pe fiecare cadru și apăsăm butonul 4 pentru a vedea cum iese. Dacă ceva nu ți se potrivește, ajustăm ora. Dacă ți se potrivește și nu dorim să schimbăm nimic altceva, atunci salvăm bannerul animat simplu rezultat.

Aici ofer doar partea descriptivă acest pas, îl puteți urmări în videoclip, care este postat la sfârșitul lecției.

Gata, cel mai simplu banner animat din Photoshop este gata.

Când vizionați videoclipul, veți observa că de fapt a durat aproximativ 3 minute pentru a crea.

Opțiunea 2. Un banner animat rezultat din suprapunerea unor fundaluri diferite pe același fundal. mesaje text(sau poate niste imagini).

Nu voi descrie principiul creării unui astfel de banner; practic este similar cu opțiunea 1, singura diferență este în formarea animației cadru:

1 cadru - fundal + primul text
Al 2-lea cadru - fundal + al doilea text
Al treilea cadru - fundal + al treilea text

În videoclip puteți vedea totul în execuție reală.

Animați text pentru a crea un banner animat.
Și în videoclip am arătat cum să faci o animație de text pentru un banner animat. Este prezentat procesul secvenţial de formare a textului „publicitar”. Mai întâi arată cum să faci primul text să se miște de jos în sus, apoi al doilea text se mută de la dreapta la stânga, ca și cum ar fi „sărit”, iar ultimul text este adăugat pur și simplu ca un cadru.

Dacă aveți întrebări, întrebați, cu siguranță voi răspunde în detaliu.

Cred că asta e tot pentru azi. Încearcă, experimentează! Iata videoclipul promis!!!

În general, crearea de bannere animate în Photoshop este un proces fascinant. Dar dacă nu vrei să te deranjezi și să experimentezi, atunci data viitoare vom vorbi despre programe speciale pentru crearea de bannere animate, în care trebuie doar să ai o idee și un scenariu, iar toate manipulările de animație se fac ca prin magie bagheta magica! Și vă voi spune și cum să inserați un banner pe site-ul dvs. și chiar voi încerca să vă arăt cum să faceți unul animat banner flash.

Și încă ceva... Lecțiile despre crearea de bannere animate îți vor fi utile nu numai pentru a crea bannere pentru site-ul tău, ci și pentru a crea orice animație.La urma urmei, principiul animației va rămâne același, doar dimensiunea poza se va schimba!

Așadar, dacă ești interesat de subiectul animației, abonează-te la actualizările blogului pentru a nu pierde nimic!

Bună prieteni! Sunt din nou alături de tine, Vladimir Savelyev, iar astăzi continuăm subiectul creării de bannere pentru site! În prima parte a articolului ți-am povestit lucruri care te vor ajuta să-ți realizezi cele mai nebunești idei!

Acum este timpul să vă arătăm cum sunt create bannerele în Photoshop! De fapt, nu te așteaptă nimic dificil sau teribil, doar repetă toți pașii după mine și împreună vom ajunge la final și anume, vom crea primul nostru banner publicitar!

Ei bine, nu voi trage pisica de mingi prea mult timp, hai să mergem...

Realizarea unui banner în Adobe Photoshop

Înainte de a începe lucrul, este foarte important să modelați cu exactitate însăși natura bannerului (dimensiunea acestuia, dacă va fi static sau animat). De asemenea, este important să decideți schema de culori, utilizare identitate corporativă, veniți cu titluri și sloganuri captivante.

Apoi puteți lansa Photoshop și puteți crea o nouă imagine cu fundal transparent(Fișier/Nou), de exemplu, 468 x 60 pixeli;

Afișați panoul pentru lucrul cu straturi „Layer”.
Creăm fundalul ca un strat separat - vă sfătuim să nu vă zgârciți aici și să plasați orice element vizibil al bannerului pe un strat separat, chiar și până în punctul de a selecta propriul strat pentru fiecare literă a sloganului.

Pe un strat separat - recurs publicitar, precum și o fotografie și o emblemă pregătite în prealabil la dimensiune.

Asamblam toate elementele bannerului și asigurați-vă că creăm mai multe opțiuni posibile, ceea ce nu strică să discutăm cu colegii.

Toate opțiunile, în timp ce sunt într-o versiune multistrat, sunt salvate în fişiere separate V format psd(rețineți că formatul jpg „nu își amintește” informații despre straturi, va colecta toate straturile într-unul singur și, în viitor, partiționarea nu va mai fi posibilă).

Este foarte util să te îndepărtezi de computer deocamdată, să iei o pauză de la muncă și să te întorci la el a doua zi pentru a evalua ceea ce s-a făcut cu un „ochi proaspăt” și a alege versiunea finală, care va fi corectată și tradus în jpg.

Lucrarea este în mare parte creativă în pragul stăpânirii instrumentelor programului Photoshop, simțul psihologiei, impactul publicității și subiectul său.

Cum se face un banner animat în Photoshop (fișier gif)? Și Photoshopul nostru nativ se va descurca cu această sarcină! Deschideți fila - fereastra - Animație.

În continuare, în această fereastră, trebuie să adăugați cadre prin ascunderea și afișarea straturilor. Vom determina, de asemenea, viteza de afișare a cadrului și bucla acestuia!

Trebuie să înțelegeți că deja creați un fel de videoclip, ceea ce înseamnă că nu vă puteți lipsi de un mic „script”. Cel puțin, va fi foarte important să modelați cu precizie întregul personaj al animației - partea fiecărui „strat de erou”.

Aici trebuie să determinați totul cu exactitate:

• parametri de timp ai comportamentului fiecărui strat;
• comportamentul său de transparență;
• traiectoria mișcării.

Treaba nu este deloc complicată, dar te va face să simți cât de dificilă este această meserie de scenarist-regizor.

Toate lucrările sunt susținute de ideea de bază a imaginilor cu mai multe straturi și de capacitatea de a lucra cu fiecare strat complet independent unul de celălalt.

Acesta este bannerul pe care l-am creat în 5 minute! Desigur, este departe de a fi perfect, dar scopul meu a fost să vă arăt posibilitățile Photoshop și am reușit să o fac!

Da, aproape că am uitat să vă spun despre descoperirea mea. În ultimul articol, am vorbit despre cum am cumpărat cursurile video ale lui Serghei Buibarov, despre cum creați bannereȘi face bani din ei! După studiu detaliat(Mi-am petrecut toată ziua urmărind videoclipuri cu trucurile și trucurile lui Seryozha) Mi-am dat seama că acest fel cursurile sunt foarte necesare în RuNet! Recomand cu siguranta achizitionarea...

Fiecare dintre noi întâlnește publicitate în fiecare zi, se uită la televizor, navighează pe internet, se află pe stradă, centru comercial si multe alte locuri. În acest articol vom vorbi despre unul dintre cele mai populare tipuri de publicitate - bannere. Veți afla ce sunt bannerele, ce tipuri există și un banner în Photoshop.

Ce este bannerul publicitar

Banner publicitar - imagine grafică de natură publicitară. Panouri publicitare pe străzi, bannere deasupra magazinelor, imagini pe site-uri de pe internet, când dai clic pe ele mergi pe alt site - toate acestea sunt bannere. Bannerele stradale au aparut cu mult timp in urma, cand inca nu exista nici macar radio. Dar s-au scurs pe internet în 1994 și au început rapid să câștige popularitate. Astăzi, nici o singură afacere nu se poate lipsi de publicitate, și în special de publicitate pe Internet, iar bannerele sunt unul dintre instrumentele foarte eficiente în promovarea bunurilor și serviciilor.

Ce tipuri de bannere există?

• Banner publicitar exterior. Fabricat din folie specială de clorură de polivinil, hârtie de vinil, latex sau nailon. Este o pânză dreptunghiulară diferite dimensiuni, pe care sunt tipărite informații publicitare. Imprimarea se face de imprimante pentru tipărire în format mare- plotteri.
• Bannere publicitare pe internet. La început au fost imagini luminoase, memorabile, dar odată cu dezvoltarea tehnologiei au apărut bannere cu conținut animat, sub forma unui scurt videoclip, și chiar mini-jocuri interactive. În orice caz, aceasta este o reclamă, deci conține un hyperlink care duce la un anumit site. Chiar dacă nu dați clic pe banner, acesta va rămâne în memorie imagine informativă de natură publicitară.

Tipuri de bannere de internet după metode de implementare

Înainte de a învăța cum să creăm un banner în Photoshop, ne vom familiariza cu diferitele modalități de implementare a acestora.

• Static. Cel mai simplu banner- o poză cu conținut publicitar. Dimensiunea fișierului este mică, așa că se încarcă rapid chiar și pe Internet lent. Este ușor să creezi un banner atât în ​​Photoshop, cât și în altele editori grafici.
• Animat. Ele cântăresc de câteva ori mai mult decât cele statice și, prin urmare, se încarcă mai lent, dar sunt mai vizibile pentru utilizator. Este mult mai dificil să creezi un astfel de banner publicitar în Photoshop.
• Text bogat. Banner similar cu articol informativ cu o componentă grafică.
• HTML5, JS, animație flash. Acestea sunt deja bannere, care sunt mini-programe interactive. De exemplu: diverse teste, jocuri primitive, chestionare. Crearea unui astfel de banner publicitar în Photoshop, după cum înțelegeți, nu va funcționa.

Definirea dimensiunilor bannerului

Înainte de a învăța cum să creați un aspect banner în Photoshop, trebuie să vă decideți asupra dimensiunilor acestuia. Dimensiunea standard este de 100 x 100 pixeli. Opțiunile cele mai des utilizate sunt 468 x 60 și 234 x 60. Primul număr determină lățimea, iar al doilea lungimea. Deci, un banner vertical va avea o dimensiune de, de exemplu, 60 x 468 pixeli. Prin urmare, este important să știi unde îți vei plasa bannerul.

Unde sa încep

Așa că am învățat că puteți crea un banner în Photoshop, cum ar fi dimensiuni mari, și în miniatură. Dar nu este nevoie să vă grăbiți și înainte de a deschide programul pentru a crea un banner, ca în orice efort creativ, trebuie să vă dați seama de design și conținut. Vă recomandăm să faceți acest lucru cu hârtie și creioane. Mai întâi, desenăm un dreptunghi, ținând cont de proporțiile viitorului banner. Venim cu necesarul text publicitar. Apoi stabilim care va fi fundalul. Nu este nevoie să desenați toate acestea; este suficient să scrieți pur și simplu ceea ce ați planificat în cuvinte. Apoi vă puteți da seama ce imagini pot fi inserate și unde să le plasați elegant, inclusiv un posibil logo-ul corporativ. Cel mai probabil, rezultatul pe hârtie va arăta ca un plan schematic. Stadiu final pregătire: căutăm pe internet imagini care se potrivesc cu ideea ta. Este important să ne amintim despre drepturile de autor, așa că selectăm imagini din resurse gratuite.

Realizarea propriului banner publicitar

Deci, aspectul dvs. este gata. Acum să trecem direct la procesul principal.

În acest articol, vom realiza un banner publicitar static orizontal cu dimensiunea de 468 × 60 pixeli și textul „Vânzare iPhone 5. Nu ratați șansa” în versiunea Photoshop CS6.

Acesta a fost un articol introductiv pentru începători cu minim instrucțiuni detaliate crearea unui banner. Există o mulțime de literatură de specialitate și tutoriale video pe Internet. Petrecând câteva zile învățând acest program minunat, poți crea mult mai bine bannere publicitare. De asemenea, este de remarcat faptul că există produse similare cu greutate redusă funcţionalitate, precum și aplicații special create pentru a crea