Banner publicitar în tutoriale Photoshop. Cum se creează un banner în Photoshop: instrucțiuni pas cu pas, sfaturi pentru începători

Bună, dragi prieteni. Astăzi vom vorbi despre bannere, cum să faci un banner animat în Photoshop. Ați văzut bannere pe multe site-uri de mai multe ori este posibil să fi plasat aceste bannere pe site-urile dvs. Desigur, scopul oricărui banner este de a atrage atenția vizitatorului. Și dacă alegi imagini bune, nu este dificil să faci un banner decent.

Deci, pentru a salva bannerul animat, trebuie să deschideți elementul de meniu "Fişier"— „Salvați pentru web”.

Acum sarcina ta este să alegi formatul GIF, Photoshop se va ocupa de restul pentru tine. Desigur, puteți experimenta cu setările. Dar nu cred că acest lucru va fi necesar.

Drept urmare, veți obține un banner similar.

Cum se instalează un banner pe un site web

Nu este suficient să faci un banner frumos. Mai trebuie instalat pe site. Pentru a face acest lucru, bannerul în sine trebuie să fie încărcat pe site-ul dvs. web. Acest lucru se poate face folosind sau prin .

Acum, în locul de pe site unde trebuie să afișați bannerul, introduceți acest cod:

Nu uitați, codurile sunt inserate în codul sursă al site-ului sau prin widget-uri. Nu uitați să schimbați link-urile și dimensiunile bannerelor.

Bannerul pe care l-am creat este de dimensiunea ideală pentru bara de site, așa că este cel mai ușor să-l inserați prin widget.

Pentru a face acest lucru, deschideți panoul de administrare WordPress - "Aspect"- - tip widget "Text".

Apoi adăugați widget-ul în bara de site și inserați codul bannerului în el. Nu uitați să schimbați link-urile!

Gata, să ne bucurăm de roadele muncii noastre.

Acum să urmărim tutorialul video, în el veți vedea totul clar și multe întrebări vor fi rezolvate de la sine.

Prieteni, asta e tot pentru azi. Iti doresc mult succes si buna dispozitie! Ne vedem în articole noi.

Î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 creați o campanie publicitară, aceasta are o casetă de selectare pentru schimbarea 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, adaugă blocuri de publicitate de diferite dimensiuni pentru afișarea reclamelor. 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.

În cazul meu, am făcut această imagine mare, am făcut o fotografie lui Nick și am 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 în 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 pe care l-am adăugat aici a fost Nick. 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 se desenează folosind instrumentul Rounded Rectangle, shortcut U. L-am desenat în aceeași 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 il pornesc si o sa vezi ca am doua 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 o animație puțin mai 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 Button, dau clic dreapta, selectez Duplicate group, sunt de acord și voi avea un nou grup Copy Button.

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 (fă dublu clic pe strat). Și în loc de Shadow, pun Inner Shadow și merg la setări: blending mode 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ă selectăm formatul GIF. Dacă alegem formatul JPEG sau PNG, atunci animația noastră nu va funcționa și va exista 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 este 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 mai mici și acolo le putem salva în siguranță ca GIF-uri. 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 digital și selectaț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ă v-a plăcut, asigurați-vă că îi dați un like și vă abonați la al meu, pentru că sunt multe alte videoclipuri interesante care vă așteaptă. Denis Gerasimov a fost cu tine, la revedere!

Vă urez bun venit pe paginile blogului meu. Articolul de astăzi va vorbi despre bannere sau, mai precis, despre crearea lor folosind Photoshop. În primul rând, lecția de astăzi se adresează celor care ar dori să câștige bani. Voi scrie despre a face bani în acest fel puțin mai târziu în noul meu caz. Acum pot spune că acesta este un meșteșug foarte profitabil și relativ simplu. Realizarea unui banner ca cel din lecția noastră costă 500 de ruble sau mai mult.

Bannerele sunt astăzi o componentă importantă a marketingului pe Internet. Astăzi este greu de imaginat cum ar arăta Internetul fără ele. Aproape oricine are unul le folosește. Dar pentru a crea un banner pentru un site web, trebuie fie să plătiți bani, fie să utilizați servicii online slabe în care nu există libertate de acțiune.

Dar există o a treia opțiune - crearea unui banner în Photoshop. Cred că această metodă este cea mai bună. Si de aceea:

• Gratuit;
• Libertate totală de acțiune;
• Rezultate rapide;
• O mulțime de materiale educaționale gratuite;
• Șabloanele pot fi întotdeauna editate rapid.

Cu toate acestea, mai întâi trebuie să stăpâniți această metodă. Nu trebuie să fii un fel de artist sau persoană creativă. Uită-te la bannerele mele din bara laterală din dreapta - le-am făcut eu pe toate. Și în tutorialul video de mai jos, voi arăta principalele tehnici pe care le-am folosit și le folosesc în continuare:

Ca rezultat, ar trebui să puteți crea un banner publicitar ca acesta:

Ce crezi? A ieșit în regulă?

Folosind instrucțiunile mele, puteți crea cu ușurință un banner publicitar pentru site-ul dvs. web. Sper că după vizionare te vei convinge de asta.

Materiale suplimentare

În videoclip, am promis să împărtășesc cu voi șabloane PSD ale tuturor bannere-urilor pe care le-am făcut vreodată. Îmi voi ține promisiunea, dar puțin mai târziu. .

Și, la finalul articolului, aș vrea să anunț o mică promovare: De îndată ce articolul primește 50 de comentarii, chiar dacă este un an mai târziu, voi înregistra o altă instrucțiune video pe aceeași temă, dar cu un alt exemplu. . Astfel vei afla despre și mai multe trucuri și bunătăți, care te vor face un freelancer mai căutat și mai bine plătit.

Practic, despre asta am vrut să scriu. Mă voi bucura foarte mult dacă acest videoclip va ajuta cu adevărat pe cineva.

Cu stima, Serghei Ivanisov.

Ține minte, mintea este cel mai bun mușchi al tău

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 redusă
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 apăsând 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. Așa că 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 nou document ș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ă. Îl voi picta în 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 nuanță. Ș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 - nuanțare. 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 o inscripție: „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 „Lipiți stilul stratului”. 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ă. Ideea este că cauți tot ce ține de 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 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. Încercați să faceți singur un banner și veți înțelege că nu este dificil. 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 greu, 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

Cel mai bannere mici de 88x31 pixeli sau butoanele de bliț sunt populare pe merit. Nu ocupă mult spațiu și cântăresc mai puțin, așa că webmasterii site-urilor terțe sunt mai dispuși să le plaseze pe resursele lor decât pe cele mari. Pe cealaltă parte faceți un banner în photoshopîntr-o dimensiune mică, astfel încât să fie informativ și frumos, este uneori mult mai dificil decât unul mare. Animația Flash strălucitoare și captivantă pe un câmp mic nu arată la fel de impresionantă ca pe unul mare și este mai probabil să enerveze vizitatorul decât să-l încurajeze să facă clic pe banner.

Plasarea întregului text necesar pe 2728 de pixeli, astfel încât nu numai să arate bine, dar să fie cel puțin lizibil este o sarcină extrem de dificilă. Pe baza acestor premise, vom crea banner GIF animatîn puternicul editor grafic Photoshop. Alegerea a căzut pe seama ei, deoarece vă permite să lucrați cu straturi de imagine și să ajustați mai bine rezultatele intermediare și finale.

Dacă aveți nevoie de un motor electric autohton sau de import, atunci SZEMO vă poate furniza motoare cu standarde GOST și DIN. Dar ei sunt angajați nu numai în producția și furnizarea, ci și în întreținerea acestor motoare. Acest lucru este convenabil dacă trebuie să efectuați întreținere în timp ce utilizați motorul. Puteți obține sfaturi cu privire la achiziționarea și întreținerea motoarelor electrice sunând la numărul federal 8-800-550-00-93.

Crearea unui banner în Photoshop

Deschideți editorul, faceți clic pe „Fișier” -> „Creare” și creați un nou document cu parametrii specificați.

Selectați culoarea de fundal într-un mod convenabil pentru dvs. și utilizați instrumentul Umplere.

Oferim bannerului un efect tridimensional. Pentru a face acest lucru, comutați de la „Umplere” la „Gradient”.

Pentru a vedea mai bine rezultatul, uneori este convenabil să măriți folosind navigatorul.

Avem un prim strat, să-l numim „Background”. Pentru a face acest lucru, faceți dublu clic pe butonul stâng al mouse-ului pe cuvântul „Layer 1” și redenumiți-l. Apoi faceți clic dreapta pe câmpul stratului și selectați „Opțiuni de amestecare...”

Aici puteți schimba stratul original dincolo de recunoaștere. În fereastra care se deschide, o selecție de stiluri este disponibilă în stânga, iar în dreapta puteți edita stilurile în sine. Totul depinde de gustul și imaginația ta.
Stratul de fundal este gata, să trecem la crearea inscripțiilor. Pentru a face acest lucru, selectați instrumentul „Text”, selectați zona pentru text cu mouse-ul și tastați-o.

Nu a iesit foarte frumos, dar nu este infricosator. Folosind panoul pentru lucrul cu text, inscripția poate fi corectată, dar în cazul nostru este mai bine să folosim paleta „Personaj” în acest scop.

Selectați textul sau literele necesare și ajustați fontul, dimensiunea, înălțimea, lățimea, spațierea și alți parametri ai inscripției.

Folosind opțiunile de amestecare pentru stratul de text, conturăm textul cu culoarea selectată sau aplicăm orice alt stil.

A ieșit bine. În principiu, acesta este un banner static gata făcut. Îl poți salva în format GIF și îl poți folosi, dar cel animat va arăta mai bine, iar în acest caz poți adăuga una sau mai multe inscripții.

Pentru a crea animația, utilizați butonul „Creați o copie a cadrelor selectate” de pe cronologia.

Pe primul cadru, dezactivați vizibilitatea stratului de text. Textul va dispărea și pe al doilea, deoarece este o copie a acestuia. Apoi activați stratul de text pe al doilea cadru. Să setăm timpul de afișare dorit pentru fiecare cadru, de exemplu prima - 1 secundă și a doua - 2 secunde. Am primit bannerul clasic „lumină intermitentă”, dar astfel de bannere sunt mai susceptibile să irită vizitatorul site-ului decât să-l încurajeze să urmeze linkul.

Pentru a crea efectul apariției și dispariției inscripțiilor, vom folosi funcția de a crea cadre intermediare. În mod implicit, sunt 5, dar este mai bine să faceți mai multe. În acest caz, animația va fi mai fluidă. Este mai bine să alegeți ca timpul de afișare a cadrelor intermediare să fie minim sau egal cu zero, altfel se va „juca” prea mult timp, mai ales dacă există mai multe inscripții. Nu uitați să bifați caseta de selectare „Toate straturile”, altfel stratul de fundal nu va fi vizibil în cadrele intermediare.

Cu ajutorul butoanelor de navigare putem vizualiza rezultatul și face ajustările necesare. Pentru a crea efectul de estompare a inscripției, trebuie să faceți o copie a primului cadru, să o trageți cu mouse-ul până la sfârșitul scalei, să selectați ultimele 2 cadre și să utilizați din nou crearea cadrelor intermediare.

Alte straturi de text sunt create și animate într-un mod similar. Dacă stilurile inscripțiilor banner nu diferă unele de altele, atunci este foarte convenabil să faceți clic dreapta pe primul strat de text și să selectați „Creați un strat duplicat”, apoi faceți dublu clic pe pictograma „T” a duplicați și modificați textul următoarei inscripții. Primul strat de text trebuie făcut invizibil.

Totuși, dacă dorim să salvăm bannerul creat în mod obișnuit folosind funcțiile „Salvare” sau „Salvare ca...”, atunci nimic nu va funcționa. Sau, mai degrabă, va fi salvat un singur cadru static. Pentru a salva animația, trebuie să selectați „Salvare pentru Web...”

În fereastra care se deschide, puteți ajusta setările fișierului de ieșire folosind o previzualizare în Photoshop sau un browser. Acesta din urmă este de preferat, deoarece veți vedea rezultatul final.

Acum știi cum să faci un banner în Photoshop. Lasă o recenzie a articolului, părerea ta este foarte importantă pentru mine. Vă mulțumim pentru atenție.