Cum să faci un banner flash în Photoshop. Cum se creează un banner în Photoshop: instrucțiuni pas cu pas, sfaturi pentru începători

Fiecare dintre noi întâlnește zi de zi publicitatea, se uită la televizor, navighează pe internet, se află pe stradă, într-un centru comercial și în 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

Bannerul publicitar este o 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ă de diferite dimensiuni pe care sunt imprimate informații publicitare. Imprimarea se realizează folosind imprimante pentru tipărirea în format mare - plottere.
• 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 dai clic pe banner, imaginea informațională de natură publicitară va rămâne totuși în memoria ta.

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 este 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 alte editoare grafice.
• 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. Un banner asemănător unui articol de informare 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, atât mare, cât și miniatural. 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 textul publicitar necesar. Apoi stabilim care va fi fundalul. Nu este nevoie să desenezi toate acestea, este suficient să scrii pur și simplu ceea ce ai planificat în cuvinte. Apoi vă puteți da seama ce imagini puteți introduce și unde să le plasați elegant, inclusiv un posibil logo corporativ. Cel mai probabil, rezultatul pe hârtie va arăta ca un plan schematic. Etapa finală a pregătirii: 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 o dimensiune 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 instrucțiuni minime detaliate pentru 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 uimitor, puteți crea anunțuri banner mult mai bune. De asemenea, merită remarcat faptul că există produse similare cu funcționalitate ușoară, precum și aplicații special create pentru a crea

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 obtinut prin simpla schimbare a pozelor (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 un fișier gol
Facem fotografii pregătite în prealabil pentru bannerul nostru, care au fost deja ajustate la dimensiunea dorită a bannerului, le copiam și lipim 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. Faceți dublu clic pe strat pentru a afișa 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 „Fereastră” - „Animție” în meniul de sus al Photoshop ș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 vă prezint doar partea descriptivă a acestui pas o 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 obținut ca urmare a suprapunerii diferitelor mesaje text (sau a unor imagini) pe același fundal gol.

Nu voi descrie principiul creării unui astfel de banner, acesta este practic 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 farmec. ! Ș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 un banner animat și 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ă, dragi prieteni! Blogul meu: - „”, este mereu deschis pentru tine! În articolele anterioare am vorbit despre cum și cum mai târziu pe blog. Astăzi vreau să vă povestesc despre cum sa faci un banner in photoshop .

Bannerele realizate în Photoshop au mai multe avantaje decât dezavantaje.

1. Greutate ușoară
2.Ușor de instalat
3. Afișat pe toate tipurile de dispozitive
4. Ușor de făcut
5. Site-ul nu se încarcă
6. Bannerul poate fi actualizat frecvent

Singurul dezavantaj este că nu este la fel de „live” ca blitz-ul, poți simți diferența dintre un film și o imagine. Dar acesta este singurul dezavantaj și poate fi eliminat parțial folosind o imagine GIF.

Înainte de a începe să creați bannere, trebuie să faceți niște lucrări pregătitoare. Selectați imaginile și butoanele necesare. Decideți ce tip de banner va fi: fix sau animat. Faceți o schiță a viitorului banner pe hârtie pentru a înțelege clar ce doriți să obțineți ca rezultat final.

Colectați toate imaginile pregătite într-un folder separat creat pe desktop. După crearea bannerului, acesta poate fi îndepărtat cu ușurință și nu veți uita să faceți acest lucru, deoarece va fi vizibil. Așadar, pozele sunt pregătite și începem!

Crearea de bannere JPEG statice în Photoshop.

Deschideți Photoshop, creați un document nou: „Fișier” - „Creare”. În fereastra care se deschide, introduceți numele, specificați lățimea în pixeli și înălțimea în pixeli. Veți afla lățimea măsurând bara laterală. Un banner situat pe toată lățimea barei laterale arată frumos. Specificați înălțimea în funcție de înălțimea imaginii pregătite, plus 50 sau 60 de pixeli - spațiu pentru buton.

Rezoluția documentului – specificați 72 de pixeli, aceasta este cea mai optimă rezoluție pentru Internet. Cu o rezoluție mai mare imaginea va fi grea, cu o rezoluție mai mică va fi de proastă calitate. Selectați culoarea de fundal ținând cont de culoarea de fundal a imaginii.

Cum să afli ce înălțime are o imagine? Pentru a face acest lucru, deschideți imaginea în Photoshop, faceți clic pe „imagine” - „dimensiunea imaginii”. În fereastra care se deschide, modificați lățimea imaginii cu lățimea barei laterale. Asigurați-vă că dimensiunea este indicată în pixeli, dacă există alte valori, introduceți pixeli.

Înălțimea se va schimba automat, o va aminti sau o va nota. Faceți clic pe „ok”.
Trageți imaginea pe documentul creat ținând-o cu butonul stâng al mouse-ului și apăsând butonul ALT de pe tastatură. În panoul din stânga al Photoshop, selectați instrumentul „mutare”. Primul de sus. Și folosind săgețile de pe tastatură îl plasăm pe banner.

Faceți dublu clic pe ecran pentru a deschide folderul cu imaginile pregătite și selectați butonul. Îl tragem pe banner și îl instalăm în locul potrivit. Puteți da butonului un efect de umbră. Faceți dublu clic pe stratul cu butonul, în fereastra care se deschide, selectați „umbră” și configurați parametrii necesari.

Gata, bannerul este gata! Îmbinați toate straturile: - „Îmbinați vizibil”. Următorul „fișier” – „Salvare pentru Web...”. Selectați formatul de salvare JPEG. Selectați un dosar de salvat. Faceți clic pe „salvare”.

Crearea unui banner GIF animat în Photoshop.

Crearea unui banner animat diferă de unul static, doar prin aceea că trebuie să creați mai multe straturi diferite care se vor schimba, creând animația imaginii. În primul rând, trebuie să decideți ce va clipi în bannerul dvs. Puteți schimba partea principală a bannerului. Adică o imagine va fi înlocuită cu alta. Puteți face ca butonul să clipească sau eticheta de pe butonul să se schimbe.

Orice ați decide să animați, principiul creației este același. Prin urmare, am decis să vă arăt cum să faceți un buton care clipește și o inscripție în schimbare. Mai întâi, ca și în primul caz, creăm un document nou și tragem toate imaginile necesare pe el. Vă rugăm să rețineți că toate imaginile sunt obținute pe un strat separat.

Acesta este ceea ce ne permite să facem imaginea în mișcare.
Pentru a crea animația pe care o am în minte, vei avea nevoie de un buton fără etichetă. O voi picta in diferite culori. Voi face stratul cu butonul activ (voi face clic pe el o dată). Apoi, „imagine” - „corecție” - „nuanță - saturație”.

În fereastra care se deschide, bifați caseta pentru colorare. Și mișcând glisorul de sus, selectez o culoare care se potrivește cu imaginea mea. Apoi dau clic stânga pe strat și selectez „creează un strat duplicat”. Apare un strat cu exact același buton. Mă duc din nou la „imagine” - „corecție” - „nuanță - saturație”.

Bifez caseta pentru tonifiere. Aleg aceeași culoare, dar cu altă nuanță. Acum am două straturi cu un buton, nuanțe diferite.
E timpul pentru text. În panoul din stânga, selectați instrumentul „text”. Reglez dimensiunea și fontul. Eu scriu un cuvânt.

De exemplu, am decis să fac inscripția: „Ia-l gratuit”. Puteți scrie „Aflați mai multe”. Scriu cuvântul „Obțineți”, în funcție de dimensiunea butonului. Dau clic o dată pe stratul de text. Selectez instrumentul „mutare”. Am pus inscripția strict în centrul butonului.

Iau din nou instrumentul „Text”. Creez un duplicat al stratului de text, selectez textul și îl înlocuiesc cu cuvântul „Free”. În acest caz, cuvântul va fi acolo unde este nevoie, îl puteți muta puțin la dreapta sau la stânga, fără a uita să folosiți instrumentul de mutare.
Tot ce trebuie să facem este să colorăm textul cumva. Faceți dublu clic pe stratul de text În fereastra care se deschide, configurați o umbră, selectați un gradient și faceți o contur.

Alegi totul în funcție de culoarea bannerului, a imaginii și a butoanelor tale. Totul ar trebui să se potrivească armonios.
După ce ați selectat efectele necesare, faceți clic pe „ok”. Apoi, faceți clic dreapta pe stratul cu efectele selectate, iar în fereastră faceți clic pe „Copiați stilul stratului”. Faceți clic pe stratul cu textul fără efecte și faceți clic pe „lipire stil strat”. Acum ambele straturi au aceleași efecte. Bannerul a fost creat, să începem animația.

Animație banner în Photoshop.

Pentru a face acest lucru, deschideți fila „fereastră” din panoul de sus și, în lista derulantă, selectați „scala de timp” și în partea de jos a scării – „creați animație cadru”. Numele poate fi diferit în diferite versiuni de Photoshop. De exemplu, în primele cinci, trebuie să selectați „animație” în fereastră. Concluzia este că căutați tot ce are legătură cu animația cadru. Dacă aveți dificultăți, puneți întrebări în comentarii.

Acum trebuie să închideți ochii tuturor straturilor care ar trebui să rămână invizibile. De exemplu: - avem două butoane, ceea ce înseamnă că închidem vizibilitatea unuia. Avem două cuvinte într-un singur loc - un cuvânt este temporar dezactivat.

Mai jos pe scară am creat deja primul cadru. Selectați ora pentru a afișa cadrul. Nu vă faceți griji, dacă nu vă place, îl puteți schimba oricând. Faceți clic pe frunza de jos și am creat următorul cadru.

Pentru a-l face diferit de primul, am decis să schimb butonul. Adică am deschis stratul cu butonul care era închis și am închis butonul care era vizibil. Fac următoarea lovitură. Este timpul să schimbați nu numai butonul, ci și cuvântul.

Închid cuvântul care era vizibil, deschid ochiul pe stratul închis anterior și schimb, de asemenea, ochii de pe butoane. Și creăm ultimul, al patrulea cadru. Schimbăm doar butoanele. Bifăm caseta pentru a reda animația - „continuu” și începem să verificăm animația. Dacă totul este făcut corect, butoanele vor clipi de două ori mai des decât se vor schimba cuvintele.

Bannerul este gata. Îl salvăm pentru Web, în ​​format Gif.
Pentru a înțelege cum trebuie făcut totul, am înregistrat procesul de creare a bannerelor pe un videoclip. Vă rog să nu judecați strict, deoarece aceasta este prima mea lecție video. Am încercat să nu mă grăbesc pentru a putea vedea procesul de creare a unui banner în Photoshop.

Videoclipul este fără cuvinte, dar cu explicații. L-am înregistrat noaptea, când toată lumea dormea, așa că nu am putut vorbi. Dar puteți asculta un acompaniament muzical plăcut. Vizionare placuta!

Când îți faci propriul banner pentru prima dată, procesul de creare a bannerelor în Photoshop nu ți se va mai părea dificil. Și animația este ușor de făcut, principalul lucru este să nu te încurci în straturi și să schimbi cu atenție ochii.

Folosind același principiu, puteți face o imagine în schimbare. Incearca sa faci singur un banner si vei intelege ca nu este greu. Dacă întâmpinați dificultăți în crearea bannerelor, vă rugăm să mă contactați, vă voi ajuta cu plăcere. Sau poți comanda producția unui banner, iar eu ți-l fac de la început până la sfârșit.

Încărcăm bannerul creat în bibliotecă, îl deschidem într-o filă separată, copiem adresa imaginii și o salvăm. Îl lipim în cod și punem codul în widget.

Cod pentru inserarea unui banner în widget:

Acum este timpul să ne luăm rămas bun, v-am povestit cum să faceți un banner static și animat în Photoshop. Dacă ceva nu îți merge, scrie în comentarii. Și nu uitați să faceți clic pe butoanele rețelei sociale, nu vă este dificil, dar autorul este mulțumit!

PS. Citiți articole despre cum să instalați, să faceți, frumos sau. Nu te grăbi să părăsești blogul, vei găsi o mulțime de informații interesante.
Batalova Irina

Lecție despre cum creați un banner animatîn Photoshop pentru începătorii care nu cunosc instrumentele editorului. Este suficient să poți deschide fișiere grafice în el. Trebuie doar să creez un banner de găzduire afiliat real. Dimensiunea sa va fi de 468 x 60 px - aceasta este una dintre dimensiunile standard (bannerul gata din partea de jos a paginii).

1. În meniul principal al programului, faceți clic pe „Fișier - Nou” (Ctrl+N):

În fereastra trebuie să setați Numele, dimensiunile și selectați Fundal transparent - nu trebuie să atingeți ceilalți parametri, faceți clic pe OK. Dacă aveți o versiune diferită de Photoshop, nu vă faceți griji, toți pașii și instrumentele vor fi la fel. Am plasat o imagine a serverelor pe un banner gol și trebuie să-l deschideți pe al dvs.: „Fișier - Deschidere” (Ctrl + O).

Înălțimea bannerului nostru este de 60 px, ajustați dimensiunea la a dvs.: „Imagine - Dimensiune imagine” (Alt+Ctrl+I).

2. Selectați-l cu instrumentul „Zona dreptunghiulară” (1), sau o parte din acesta, apoi „Editare - Copiere” (Ctrl+C). Acum, pe un banner gol, selectați zona de inserare aproximativă și apoi: „Editare - Lipire” (Ctrl + V). Reglați poziția sa cu instrumentul Mutare (2):

3. Folosind instrumentul Umplere (3), faceți clic pe un spațiu gol din banner. Dacă imaginea dvs. a fost în format JPG, atunci fundalul ei va rămâne, faceți clic pe ea - este posibil să nu funcționeze, zona utilă va fi pictată. În mod ideal, este mai bine să aveți o imagine în format PNG, fără fundal, și să o introduceți într-un banner deja umplut. am facut-o destul de bine:

Pentru a seta o culoare, dați clic pe pătratul (5), iar în „Paleta de culori” care se deschide, selectați-o pe cea dorită, am galben: #f9f100 - o puteți introduce pur și simplu în câmpul din partea de jos a paletei :

4. Selectați dreptunghiul din partea de mijloc a bannerului cu instrumentul „Zona dreptunghiulară” (1), selectați culoarea albă din „Color Picker” (5): #ffffff și completați zona cu instrumentul „Umplere” (3 ). Pentru a anula orice acțiune, utilizați „Editare - Înapoi” (Alt+Ctrl+Z). Acum vom lucra cu instrumentul „Text” (4):

5. Selectați instrumentul „Text orizontal” (4) și faceți clic în zona albă - introduceți textul de care aveți nevoie. Nu acordați atenție locației, apoi mutați inscripția finalizată cu instrumentul „Mutare” (2). Pe panoul de control orizontal, unde sunt butoanele (6) și (7), setați fontul, dimensiunea, claritatea, culoarea inscripției - aceeași „Paletă de culori” (5). Doar evidențiați inscripția făcută cu cursorul și modificați acești parametri.

Pentru prima inscripție „hosting” (font KabelCTT Medium, dimensiune 36pt, culoare #444444), a fost folosit instrumentul „Warp Text” (6), este în captură de ecran; pentru al doilea panou „de la 0,4$” „Simbol” (7) - îngustarea și întinderea caracterelor în lățime și înălțime, densitate etc., nu întreaga inscripție, ci caractere individuale - evidențiind-le separat.

În a doua inscripție: fontul este Arial, dimensiunea sa nu este aceeași, grosimea pentru „0.4” este neagră, pentru „de la..$” este aldine, culoarea este roșie - #ff0000. Pentru a salva textul, faceți clic pe caseta de selectare (8), iar butonul alăturat anulează toate acțiunile nesalvate cu textul. După aceea, puteți muta și alinia inscripția cu instrumentul „Mutare” (2):

Pentru prima inscripție a fost folosit efectul „Umbră”, pentru a doua - efectul „Stroke” le puteți utiliza prin același meniu principal: „Layers - Layer Style”. Experiment. Mai jos vedeți panoul „Layers” (a nu fi confundat cu elementul din meniul principal) - este în dreapta în fereastra de lucru Photoshop, dacă nu acolo, atunci: „Window - Layers” (F7). În el vom lucra cu straturi, avem trei dintre ele - două text.

6. Deocamdată, să combinăm cele trei straturi ale noastre: „Layers - Merge Visible” (Shift+Ctrl+E) - toate au ochi. Ochiul face stratul vizibil dacă faceți clic pe el și eliminați ochiul, acest strat va fi invizibil. Sau o puteți face diferit: selectați toate straturile făcând clic pe fiecare strat în timp ce țineți apăsată tasta Shift, apoi: „Layers - Merge Layers” (Ctrl + E). Va mai rămâne un strat, îi puteți schimba numele (util mai târziu) făcând dublu clic, chiar pe inscripția „Layer 1”:

7. Să conturăm bannerul selectând stratul: „Editare – Stroke”, aici culoarea gri #999999:

8. Avem gata două zone ale bannerului, a treia va fi animată. Acest lucru se face destul de repede. Trebuie doar să creați un strat duplicat făcând clic pe „Layer 1”, apoi în meniul principal: „Layers - Create a duplicate layer”:

Dați-i numele „Layer 2”:

9. Pe acest strat în partea a treia vom scrie o inscripție, ca în capturile de ecran de mai jos - utilizați instrumentul „Text” (4). Se va forma un alt strat - unul text, să-l combinăm din nou cu „Layer 2”. Dacă numele stratului îmbinat este incorect, faceți dublu clic strict pe numele însuși și înlocuiți-l cu „Layer 2”:

10. Duplicați din nou „Layer 2”, obținem „Layer 3” - va rămâne așa (cu text). Și pe „Layer 2”, selectând-l făcând clic, vom face un dreptunghi umplut. Folosind instrumentul „Zona dreptunghiulară” (1), selectați zona cu inscripția, ca în captura de ecran:

Completați-l cu instrumentul Paint Fill (3), culoarea gri #999999 în Color Picker (5), făcând clic puternic pe zona de selecție de câteva ori:

Avem trei straturi: „Layer 1” - gol, „Layer 2” - cu un dreptunghi umplut, „Layer 3” - cu o inscripție. Prin analogie cu ele, trebuie să adăugați încă două inscripții (vezi bannerul finit), adică. încă șase straturi - un total de nouă:

11. Rămâne să animați bannerul în panoul „Animation” dacă nu este în panoul din dreapta, apoi apelați-l din meniul principal: „Fereastră - Animație”.

Apăsând butonul (9), creăm un cadru duplicat (unul va fi deja acolo), îl selectăm cu un clic - va fi într-un cadru. Accesați panoul „Straturi”, scoateți ochiul din „Layer 1”, porniți ochiul în „Layer 2” și selectați stratul făcând clic. Accesați panoul „Animație”, utilizați butonul (9) pentru a crea un al treilea cadru duplicat - puteți crea nouă cadre deodată. Principiul este simplu: cadru 3 - „Layer 3” (porniți ochiul și selectați-l), cadru 4 - „Layer 4”, etc.

Butonul (10) este folosit pentru a șterge cadrele inutile în triunghiul (11) setăm timpul pentru fiecare cadru, în cazul nostru: 0,1 sec. — 0 sec. - 1 secundă, apoi prin analogie. Folosind butonul „Launch” (12) începem animația bannerului.

Atragerea atenției vizitatorilor. Cu cât este mai colorat și mai interesant, cu atât eficiența este mai mare. Cel mai adesea, cei care desfășoară activități comerciale trebuie să plaseze bannere.

Desigur, designeri grafici talentați care sunt capabili să creeze un proiect uimitor sunt căutați pentru a-l crea. Cu toate acestea, după ce ați citit câteva recomandări despre cum să faceți un banner în Photoshop, puteți afla cum să vă creați singuri propriile proiecte interesante. Este posibil ca mai târziu, când îți perfecționezi abilitățile, bannerele tale să fie de interes pentru mulți.

Photoshop are un număr mare de funcții și capabilități, inclusiv crearea de bannere

Cei care au avut deja experiență în crearea de bannere în Adobe Photoshop CS6 pot enumera câteva dintre avantajele lor. În special, sunt destul de ușor de instalat și ocupă foarte puțin spațiu, ceea ce este atât de important atunci când există o lipsă de spațiu liber pe site. De asemenea, este destul de ușor de actualizat și afișat pe toate dispozitivele.

Procesul și regulile de creare a bannerelor statice

Pentru a crea un banner, utilizatorul trebuie mai întâi să se pregătească pentru aceasta. Pregătirea constă în realizarea unei schițe preliminare înfățișată pe o foaie de hârtie albă pentru a avea o idee dinainte despre ceea ce autorul sau clientul dorește să vadă în final. După aceasta, ar trebui să selectați imaginile potrivite și să le plasați pe toate într-un folder separat.

Când etapa pregătitoare este finalizată, puteți începe partea principală, care implică crearea bannerului în sine. Inițial, Photoshop se deschide și este creat un nou document.

În această etapă este important să indicați dimensiunile dorite în pixeli. Lățimea poate fi arbitrară, dar designerii experimentați recomandă setarea lățimii egale cu lățimea barei laterale. Înălțimea se calculează calculând înălțimea imaginii aplicate și adăugând încă 60 de pixeli pentru a găzdui butonul.

Rezoluția unui document nou este stabilită și de utilizatorul însuși, dar este important să țineți cont de unele reguli. În special, se recomandă utilizarea unei rezoluții de 72 de pixeli, deoarece dacă acest indicator este mărit, bannerul finit va fi prea greu pentru site, iar dacă este scăzut, va exista o pierdere de calitate. Fundalul bannerului este potrivit cu cel al imaginii principale.

Imaginea pregătită trebuie mutată în noul document creat, după care, cu ajutorul săgeților, este plasată în locul dorit, care a fost determinat anterior pe schiță. În continuare, pe acest document este mutat un buton, care poate fi decorat puțin, însoțit de o umbră suplimentară. Pentru a face acest lucru, trebuie doar să faceți dublu clic pe el și apoi să introduceți parametrii corespunzători pentru setarea umbrei.

După aceasta, bannerul este considerat gata, tot ce rămâne este să conectați toate straturile utilizate și apoi să salvați rezultatul final în format jpeg, dar asigurați-vă că selectați opțiunea „Salvare pentru Web”.

Crearea de variante animate

Un banner animat poate atrage mai eficient atenția vizitatorilor site-ului. Designerul grafic trebuie să decidă singur ce ar trebui să fie animat. Ar putea fi un buton sau poate fi o imagine. Animația se realizează prin crearea mai multor straturi care încep să se schimbe într-o anumită secvență, creând iluzia mișcării.

Procesul și regulile pentru crearea de bannere animate

După ce v-ați propus să creați un banner animat, ar trebui mai întâi să învățați cum să creați versiuni statice pentru a vă pune mâna bine, iar după aceea, după ce ați studiat recomandările despre cum să faceți un banner în Photoshop cs6, începeți să vă implementați planurile. .

Inițial, utilizatorul trebuie să creeze un banner static simplu, plasând cu succes imaginea principală, butonul și creând inscripții pe acesta. Pentru a face un buton animat, ar trebui să faceți mai multe straturi cu un astfel de buton, dar diferite într-un fel.

Dacă doriți ca butonul să-și schimbe culoarea, ar trebui să faceți clic pe stratul cu butonul, făcându-l activ, apoi să accesați „Imagine”, apoi „Corecție”, apoi să găsiți elementul „Saturație de culoare de fundal”. Făcând clic pe el, se deschide o fereastră în care este selectată nuanțarea, permițând utilizatorului să selecteze nuanța dorită prin mișcarea glisorului.

Când primul strat este finalizat, ar trebui creat un nou strat. Pentru a face acest lucru, accesați panoul „Straturi” și găsiți elementul „Creați un strat duplicat”. Într-un strat nou, ar trebui să faceți din nou aceleași acțiuni cu butonul, numai că atunci când alegeți o culoare ar trebui să alegeți aceeași culoare, dar cu o nuanță diferită.

După selectarea efectelor dorite, trebuie doar să fiți de acord făcând clic pe „Ok”. Apoi, trebuie să faceți clic dreapta pe stratul cu aceste efecte, selectați „Copiați stilul stratului”, apoi faceți clic pe stratul fără efecte și selectați opțiunea „Lipiți stilul stratului”. Ca urmare a unor astfel de acțiuni, sunt create ambele straturi, însoțite de efecte.

Acum nu mai rămâne decât să punem bannerul în mișcare – de fapt, să îl facem animat. Pentru a face acest lucru, deschideți opțiunea „Creează animație cadru”.

Deoarece în acest moment sunt deschise două straturi cu butoane diferite în Photoshop, este important să lăsați primul strat activ și să dezactivați al doilea strat. Acesta va fi considerat primul cadru. Utilizatorul ar trebui să selecteze timpul optim pentru afișarea acestuia, care poate fi ajustat ulterior, dacă se dorește.

În cele din urmă, tot ce rămâne este să bifați „Redați constant” și să îl salvați pentru Web, dar în format gif.

Deci, după ce ați citit instrucțiunile despre cum să creați un banner în Photoshop, puteți începe implementarea practică a planurilor dvs. și puteți vedea din propria experiență că nu este nimic dificil în a crea bannere statice și animate. Odată ce crearea de opțiuni animate simple a fost adusă la automatism, puteți încerca să creați proiecte mai complexe, în care nu doar culoarea butonului se va schimba în același timp, ci și imaginea, inscripția etc.