Cum să faci un banner în Photoshop. Crearea unui banner în Photoshop, un GIF animat Banner Photoshop.

Salutări pentru tine pe paginile blogului meu. Discursul în articolul de astăzi va merge despre bannere și va fi mai precis, apoi despre crearea lor folosind programul Photoshop. În primul rând, lecția de astăzi se concentrează asupra celor care ar dori să facă bani. Voi scrie despre câștiguri în acest fel în noul meu caz. Acum pot spune că acest lucru este foarte favorabil și relativ doar artizanal. Faceți un astfel de banner, ca în lecția noastră, costurile de la 500 de ruble și multe altele.

Bannerele de astăzi reprezintă o componentă importantă a marketingului pe Internet. Astăzi este greu de imaginat cum a privit Internetul fără ei. Ei folosesc aproape orice persoană care are. Dar pentru a crea un banner pentru site, trebuie să cadă din bani, fie să profitați de cei slabi servicii on-lineîn care nu există libertate de acțiune.

Dar există oa treia opțiune - aceasta este crearea unui banner în Photoshop. Consider că în acest fel este cel mai bun. Si de aceea:

• Gratuit;
• Libertatea completă de acțiune;
• Rezultat rapid;
• Multe materiale de învățare gratuite;
• Șabloanele pot fi întotdeauna reprezentate rapid.

Cu toate acestea, mai întâi trebuie să stăpâniți în acest fel. Nu este necesar să fii un fel de artist sau o persoană creativă. Uită-te la bannerele mele din bara laterală din dreapta - am făcut-o pe toți. Și în Tutorialul video mai departe, voi arăta tehnicile de bază pe care le-am folosit și voi continua să le folosesc:

Ca rezultat, ar trebui să creați astfel publicitate Banner.:

Ce crezi? Operator OK?

Instrucțiuni

Deschis Adobe Photoshop. și determină dimensiunea viitorului banner.Și - de exemplu, puteți face banner. Format standard 468x60 pixeli. Alegeți imaginile potrivite sau logo-urile pe care le porniți banner., culori și fonturi.

Determinați exact ce veți scrie banner.e și ce elemente vor fi animate. Crea un nou document Dimensiunea dorită cu o umplere transparentă sau albă, apoi plasați imaginile și ilustrațiile pe care le alegeți pe suprafața noului fișier, plasând fiecare element grafic la un nou strat. Sursă banner. Cadru subțire. Astfel, creați unul dintre cadrele de animație viitoare.

În ultimul cadru, activați adresa site-ului și informațiile de contact. Distribuiți cadre pe straturi, apoi ascunderea straturilor inutile pentru fiecare cadru specific, salvați-le alternativ în format GIF într-un dosar separat. De exemplu, ca primul cadru, salvați fundalul banner.a, ca un al doilea - fundal cu un logo, ca al treilea logo cu semnătura și așa mai departe. Puteți obține cinci sau mai multe cadre - de la toate aceste imagini în format GIF trebuie să colectați o animație simplă.

Pentru a face acest lucru, deschideți animatorul GIF Ulead și selectați opțiunea "Animație Wizard". Specificați dimensiunea dvs. banner.a și B. următoarea sesiune Încărcați toate cadrele pe care le-ați creat făcând clic pe butonul Adăugare imagine.

Setați viteza de schimbare corespunzătoare și timpul de întârziere fiecare dintre ele și apoi setați ordinea cadrelor în animație. Dacă este necesar, duplicați unele cadre prin crearea de copii.

Apăsați butonul de previzualizare pentru a vedea cum va arăta animația finalizată în rețea. Dacă totul se potrivește, salvează banner. În format GIF și îl publicați în rețea.

Vei avea nevoie

• - computer cu acces la internet;
• - Adobe Photoshop;
• - Ulead GIF animator.

Instrucțiuni

Pregătiți cadre pentru banner pentru a crea o animație în format GIF. Utilizați pentru acest lucru programul Adobe. Photoshop. Decideți ce dimensiune ar trebui să fie animația dvs. și cu ce scenariu va fi la banner, care se va mișca în ea și cum. Gândiți-vă la proiect înainte de a crea un animat gif..

Rulați programul Adobe Photoshop, creați un fișier nou cu dimensiuni 468 la 60. Adăugați graficul dorit, plasați toate informațiile din partea vizibilă a fișierului, aliniați. Fiecare element de imagine este situat pe un strat separat. Straturi, la rândul său, grup în foldere pentru comoditate. După crearea cadrelor, faceți ca cadrele să fie animate.

Ascundeți toate straturile, cu excepția fundului, salvați fundalul banner în format GIF. Apoi, salvați fișierul cu logo-ul (în mod similar, faceți toate celelalte straturi invizibile). Și la fel și cu toate straturile în mod consecvent. Ca rezultat, veți primi 5 statici gif.- Fișiere de la care trebuie să montați un fișier animat în format GIF.

Rulați programul Ulead GIF animator pentru a crea animat gif banner.. Rulați expertul Animație (din meniul Fișier). Selectați dimensiunea bannerului dorit, faceți clic pe Următorul. În pasul următor, adăugați cadre create anterior de animație viitoare. Faceți clic pe butonul "Adăugați imaginea", țineți cont, evidențiați toate fișiere. La un moment dat, adăugați-le la maestru. Selectați viteza necesară cu care vor fi înlocuite cadrele. Faceți clic pe "Next". Lucrarea Maestrului este finalizată.

Setați cadre în secvența dorită, setați timpul de întârziere pentru fiecare cadru, selectați proprietățile sale apelând meniul contextual pe acesta. Schimbați ora indicată a bannerului, faceți clic pe cadrul, în câmpul de sus, introduceți ora. Faceți o previzualizare a fișierului viitor, pentru a selecta fila "Scriere". Salvați fișierul în format GIF.

Video pe subiect

Bannerele animate sunt utilizate în mod activ în designul web, deoarece acestea sunt capabile nu numai pentru a oferi utilizatorului mai multe informații, dar și pentru a atrage atenția. Există mai multe modalități de a crea astfel de imagini.

Instrucțiuni

Pentru a crea un banner animat, veți avea nevoie de unul dintre editorii grafică. Există două modalități de a rezolva problema. Primul este utilizarea unui program pentru a crea fiecare cadru de banner ca un separat fișier grafic. Cu asocierea lor ulterioară într-una. Al doilea este lucrarea într-un editor grafic care vă permite să creați imediat imagini animate.

Bună ziua toată lumea, astăzi va ridica acest subiect pentru a face un banner publicitar în Photoshop, am scris recent un post similar, astăzi, în principiu, pentru un articol nu va fi știri, ci pentru alții, voi dezvălui un pic

Oamenii mă scriu despre cum să descriu totul mai detaliat și să arătăm (vreau să fac un banner pentru site). Deci astăzi va fi așa! Vă voi arăta ce se face în detaliu.

În articolul "" Am spus că în acest program "Swishmax3"puteți face, de asemenea, un banner bun, dar există un mic, dar ... Atunci când salvați un banner, în format GIF, programul Swich salvează într-o sumă foarte mare încât site-ul nu este foarte bun, deoarece bannerul va încărca a perioadă lungă de timp. În acest program puteți crea un frumos banner proaspăt.

Cum se face un banner publicitar în Photoshop

Voi arăta un exemplu "Adobe Photoshop CS6"puteți utiliza și 5, dar recomand versiunea pentru cel mai nou. Pe site, programe juridice gratuite pentru un computer în limba rusă http://programmybesplatno.com Puteți descărca orice program

Inducem în program, creăm un nou fișier, voi crea un banner obișnuit cu o dimensiune de 468 × 68, aceasta este o dimensiune standard. Pentru a începe cu, vă voi arăta ce banner voi face:

După cum puteți vedea, totul este simplu și fără bibeluri, deoarece acum este mai ușor de subiecte și nu vă exprimă ochii, în stilul de stil.

Așadar, a creat un nou fișier cu dimensiuni acum trebuie să desenezi tot ce ai nevoie. Deci, a fost mai ușor, puteți desena pe hârtie ceea ce va merge, astfel încât în \u200b\u200bPhotoshop doar să deseneze și să facă totul într-o grămadă.

Probabil că nu este de a descrie tot semnificația, deoarece am înregistrat un videoclip care durează o lungime de 35 de minute, pentru că vă doresc o vizionare bună și creați un barner frumos pentru site-urile dvs.

Vă mulțumesc tuturor pentru atenția dvs., așteptând comentariile dvs.

În cele din urmă, știrile

Doar ieri mi-am cumpărat ieri cele două noi pești noi, chiar poți spune că nu pește și giganți). Scalari mari, bine, eliminate pentru tine un videoclip scurt despre asta, asa ca arata.

Cine au întrebări Puneți întrebări!

Cum de a crea un banner în Photoshop - 5.0 din 5 Pe baza a 3 voturi

În această lecție, vom analiza cum să creăm un banner în Photoshop folosind câteva instrumente simple ale acestui program.

Ca de obicei, veți învăța foarte mult sovietici utile și tehnici care vă vor potrivi în viitor atunci când creați diferite elemente grafice în acest program.

1. La început, creați un nou document. Setați numele, lățimea, înălțimea și permisiunea pentru noul document. În acest caz, vom crea un banner standard de 468 × 60.

2. Când faceți toate cele de mai sus, faceți clic pe "OK".

3. Faceți clic pe stratul de două ori.

4. Introduceți numele stratului.

5. Faceți clic pe butonul "OK", acum stratul dvs. are un nume și va fi, de asemenea, deblocat.

6. Acum faceți clic de două ori pe pictograma stratului pentru a deschide opțiunile de suprapunere (opțiuni de amestecare).

7. Selectați suprapunerea gradientului (suprapunerea gradientului) și specificați gradientul de la gri până la alb.

8. Când faceți totul, faceți clic pe butonul "OK"

9. Acum trebuie să creați un nou strat, pentru acest clic pe pictograma "Creați nou strat".

10. Selectați instrumentul de scule Pen și trageți forma ca în figura de mai sus.

11. Faceți clic pe fila contururi (căi).

12. Selectați "Contour de operare".

13. Faceți clic pe pictograma "Încărcare ca selecție" (Calea de încărcare ca selecție), apoi luați instrumentul "zona dreptunghiulară" (M) și apăsați combinația de taste (SHFT + CNTR + I). După aceea, selectați instrumentul "Fill" (G).

14. Instalați culoarea din prim plan: # 3129C3.

15. Faceți clic pe selecție pentru ao completa cu culoarea selectată.

16. Faceți clic pe fila "straturi".

17. Faceți dublu clic pe miniatura stratului pentru a deschide parametrii suprapunerii.

18. Faceți clic pe fila Stroke (Stroke), selectați culoarea portocalie și dimensiunea cursei de 2 pixeli. După instalarea parametrilor necesari, faceți clic pe butonul "OK" pentru a aplica cursa.

Notă: Repetați pașii de la 10 la 18 pentru a adăuga o altă figură ca figura de mai jos.

19. Selectați scula rotundă dreptunghiulară (instrumentul rotund dreptunghiular).

20. Alegeți o culoare pentru o cifră nouă, pe care o vom crea. Valoarea de culoare poate specifica: # A51219.

În această transcriere, vom vorbi despre cum să facem un banner în Photoshop cu animație simplă pentru yandex.direct.

Yandex.Direct a început recent să ia, adică bannere și cred că doriți ca animația să participe la bannerul dvs. pentru a atrage atenția vizitatorilor la diferite site-uri. Noi suntem în (se deschide într-o fereastră nouă) și în traccarbarea împreună vom 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 limita

Care sunt restricțiile?

Avem cerințele pentru moderare și există cerințe pentru dimensiuni. Putem încărca următoarele dimensiuni (240 × 400, 300 × 250, 300 × 500, 300 × 600, 336 × 280, 640 × 100, 640 × 200, 640 × 960, 728 × 90, 960 × 640, 970 × 250 ) Și bannerul nostru trebuie să cântărească până la 120 KB. Asta este, dacă facem o mulțime de animație de la un banner mare, atunci cel mai probabil nu va trece în greutate, este de înțeles.

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

Să vorbim imediat, unde să adăugăm aceste anunțuri grafice. Când creați o campanie de publicitate, acesta are modificări de casete de selectare în tipul de anunțuri.

Dacă alegeți graficul, atunci puteți adăuga o imagine (de exemplu, descărcați-o de pe un computer, de exemplu) și se adaugă un link către site. Cel mai probabil, veți adăuga un număr de anunțuri aici, adică pentru un tip de direcționare, adăugați o varietate de bannere. Acest lucru se datorează faptului că există multe site-uri diferite și depind de designul lor adăugați blocuri promoționale de diferite dimensiuni pentru a afișa anunțuri. Cred că este de asemenea clar.

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

Avem nevoie de grafică

Unul dintre principiile creării unui banner bun este de a menține continuitatea. Acesta este: textul acel text, stilul care se află pe pagina de aterizare, trebuie să fie parțial transferat bannerului nostru. Pentru ca utilizatorul, atunci când face clic pe banner, se părea că a ajuns acolo, unde dorea.

Prin urmare, dacă ați configurat publicitate la comandă, trebuie să întrebați proprietarul paginii de destinație cu proprietarul. Dacă faceți publicitate propriul dvs. site web, alegeți același program. Asta este, totul este logic.

În cazul meu, am luat această imagine mare, am făcut o fotografie a lui Nick și am pictat butonul în același stil ca și pe pagina de aterizare. Același text, în același stil ca și pe pagina de destinație. Poate că fontul este diferit, dar ideea este aceeași.

Editor grafic pentru a crea banner

Apoi, avem nevoie de editor. Eu desenez bannere în Adobe Photoshop CC 2015. În cazul tău, poate exista altul editor graficSunt doar confortabil în ea, așa că voi arăta exemplul Adobe Photoshop.

Desenați un banner în Adobe Photoshop CC 2015

Apoi, creați un nou document, vă recomand să începeți cu o dimensiune mare. Acest lucru se datorează faptului că atunci când trageți un mare banner mare și vă va potrivi complet cu clientul dvs., atunci sunteți toate elementele care au fost livrate aici, puteți trece la un alt document cu o limbă simplă.

De exemplu, am nevoie de o porecla. Eu aleg acest strat și pur și simplu trageți într-un document nou, iar aici am o porecla într-un document nou. Aici, în Adobe Photoshop, pot apăsa combinația Ctrl + T sau Command + T cheie și am acces la instrumentul de transformare. Și aici pot schimba dimensiunea, este foarte convenabil. Prin urmare, vă recomandăm să începeți cu siguranță să trageți bannere cu o dimensiune mare.

Banner straturi în Photoshop

Deci, avem Adobe Photoshop, există grafică, am creat un document (în cazul meu este de 960x640), am adăugat aici un fundal - este doar o panza albă. Acest lucru se face astfel încât următorul strat meu să nu atragă atenția - are un grad de transparență (am pus umplutura de 80%), deoarece fotografia este destul de înaltă calitate, clară și, prin urmare, dacă lăsați umplerea 100% , atunci atrage atenția. Am adăugat elementul următor al lui Nick. Vedeți, este sculptat dintr-o fotografie de studio. Toate acestea pot fi combinate.

Un alt moment, în Adobe Photoshop, straturile superioare se suprapun straturile de fund. Aceasta este, dacă stratul cu porecla a fost sub stratul cu fotografia moscheii, el ar fi blocat de moscheea Kul Sharif. Prin urmare, este aici, de mai sus.

Una dintre cerințele lui Yandex.Direct, astfel încât bannerul este logo-ul sau organizația OGRN. Am adăugat imediat atât același banner să utilizeze, de exemplu, în mytarget. De asemenea, am adăugat aici "6+", aceasta este, de asemenea, o cerință de la Yandex.Direct, astfel încât pe bannere cu evenimente a existat o marcă de vârstă.

Butonul care se va mișca

Ei bine, butonul însuși. Am pictat-o, constă dintr-o figură care este trasă folosind instrumentul dreptunghi cu colțuri rotunjite, cheia rapidă U. a atras în aceeași culoare ca pe site. Și apoi a provocat textul "Cumpărați un bilet" în roșu, ca pe site.

De asemenea, am un dreptunghi cu efect umbra (apropo, este, de asemenea, de la alte elemente ale acestui banner - în text). Să mergem aici și să vedem ce este pentru umbră. Am făcut clic pe stratul de două ori și am intrat în stilurile de straturi. Și aici există un parametru de umbră. Modul suprapus este normal, opacitatea 100%, unghiul 90 de grade și offset 0. Datorită faptului că apare o astfel de umbră, apare efectul industriei aeriene, ca și cum obiectul este mai aproape de spectator.

Cum de a face o animație în Photoshop of nostru

Acum avem toate obiectele.

Ce trebuie făcut pentru a crea o animație simplă?

Deschideți fereastra de timp

Pentru a face acest lucru, selectați fereastra de meniu și verificați scala de timp. Acum, dacă îl închiriez acum, nu pot crea o animație a cadrului. Acum voi include și veți vedea că am două cadre. Al doilea va șterge și am un cadru.

Dacă am salvat atât de mult, atunci nu am nici o schimbare. De asemenea, am stabilit imediat o întârziere de 1 secundă. Faptul este că acestea sunt cerințele lui Yandex.Direct.

Dacă avem o animație a unui obiect cu text, atunci acest text ar trebui să aibă un timp de citit. O secundă este suficientă pentru a citi textul.

Creați un cadru nou

Pentru a crea următorul cadru, trebuie să faceți clic pe butonul Nou Frame. Și putem îndepărta pur și simplu pe acest cadru, facem un buton invizibil. Asta este, pe un cadru avem un buton și nu există pe al doilea. Și dacă fac clic pe Redare, atunci animația noastră este creată.

Mai complexe de animație a butonului GIF

Dar să creăm o animație ușor mai complexă. Și pentru asta, voi face un buton duplicat pe al doilea cadru. Butonul conține un strat cu text și un substrat dreptunghi. Pentru a face acest lucru, voi alege un buton un buton, apăsați butonul din dreapta al mouse-ului, aleg un grup duplicat, sunt de acord și eu apar un nou grup Copiați butonul.

Notă, sunt pe cel de-al doilea cadru și ascundeți butonul anterior.

Să mergem acum la browser și vă voi spune ce efect vreau să realizez. Aici aveți un banner care ar trebui să aibă.

Și vedeți că primul cadru este efectul aerismului și pe al doilea se pare că butonul este apăsat.

Cum se obține efectul asupra bannerului pe care butonul este apăsat?

Mă întorc la Adobe Photoshop și mă întorc în stilurile grupului de substrat de substrat dreptunghi (faceți dublu clic pe strat). Și în loc de umbră, am pus umbra interioară și am transformat în setări: modul de suprapunere este normal, opacitatea este de 100%. Apoi, fac o deplasare, astfel încât sa observat. 7 pixeli sunt suficienți. Și puteți schimba și unghiul - vom face 140 de grade, astfel încât umbra este pe o parte.

Acum avem un buton cu bile pe primul cadru, iar pe al doilea este apăsat.

Dar sunteți de acord, ea nu are ceva.

Pentru a face acest lucru, trebuie să stați pe strat cu textul din buton, selectați instrumentul Mutare și apăsați săgeata în jos de pe tastatură. Astfel, am schimbat textul în jos prin apăsarea de două ori. Și încă două ori dreapta.

De asemenea, puteți adăuga un pixel unul câte un pixel. Acum avem două cadre care se rotesc constant. Putem verifica cum funcționează toate făcând clic pe butonul de redare.

Salvați bannerul GIF cu animație

Pentru a salva, trebuie să selectați File - Salvare pentru Web - și apare fereastra. Astfel încât să avem o lucrare de animație, trebuie să alegeți formatul GIF.. Dacă alegem formatul JPEG. Sau PNG, atunci animația noastră nu va funcționa și va fi doar primul cadru. Selectați GIF, putem alege parametrii repetați (constant sau o dată - vă recomand să verificați) și putem vedea cum funcționează animația.

Totul este bun, dar în acest caz, vedeți că GIF-ul nostru are o dimensiune mare. Acest lucru se datorează faptului că mărimea bannerului este mare, din acest motiv, greutatea instalației noastre este foarte mare. În acest caz, îl recomand să-l salveze ca JPEG și de 50, atunci greutatea sa va fi de 104 kb. Și limita, amintesc, 120 kB, adică, intrăm.

Dar, datorită faptului că am funcționat bine într-un banner mare, putem transfera aceste obiecte în bannere mai mici și pot fi deja salvate în siguranță în GIF. Puteți să vă asigurați când lucrați. Ca rezultat, atunci când îl salvăm, putem încărca deja acest banner în campania de publicitate.

Cum să faci un cadru banner?

Aș dori totuși să menționez un astfel de moment că acest fundal are un accident vascular cerebral. Nu este foarte vizibil aici, deoarece există o culoare neagră, dar în browser se poate vedea că cursa violet este. Trebuie să se facă, cadrul este, de asemenea, una dintre cerințele lui Yandex.Direct.

Cum să o facă?

Pentru a face acest lucru, mergeți la Photoshop, alegeți un strat cu o imagine de imagine și, dacă lucrați într-o dimensiune diferită, trebuie să selectați un cadru (instrument de decupare) și să-l tăiați în dimensiunea documentului.

Bannerele sunt mici, deci obiectul cu fundalul pe care îl veți avea, cel mai probabil, mai mult decât bannerul dvs. Prin urmare, va trebui să tăiați exact în această dimensiune.

După ce faceți, faceți dublu clic pe stilurile stratului și utilizați opțiunea suprapusă pentru a efectua cursa, selectați poziția din interior, selectați culoarea de care aveți nevoie, o puteți introduce în formă digitală și selectați Dimensiune.

Cred că mai mult de 3 pixeli nu au sens. Mare, salvați. Și acum obțineți un banner gata la ieșire, care poate fi folosit.

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

Acest document păstrează, de asemenea, în format PSD, astfel încât să se poată efectua modificări ulterioare ale straturilor. Dintr-o dată evenimentul va fi transferat timp de o oră și va schimba totul, aveți nevoie de sursă. Logic, cred că înțelegi și tu. Excelent.

Iată cum puteți face un banner (citiți transcrierea). Dacă vă place, atunci ați spus cu siguranță, vă abonați la mine, deoarece așteptați o mulțime de video interesant. Cu tine a fost Denis Gerasimov, în timp ce până acum!