Cum se face bannere în Photoshop. Cum se creează un banner animat în Photoshop - o lecție video gratuită.

Bună ziua tuturor, ridicați astăzi acest subiect publicitate Banner. Î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 ochii puțin

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!

noi predam banner animat Pentru site-ul dvs.

Să deschidem sursa pentru banner, dimensiunea sa este de 468x60. Dacă nu aveți astfel de surse, bannerul utilizat în această lecție poate fi descărcat și, în general, puteți utiliza orice dreptunghi de care aveți nevoie de dimensiunea dimensiunilor, umplute cu o anumită textură adecvată.

Selectați instrumentul "Text orizontal".

Adăugați un stil de strat în text. Pentru a face acest lucru, în paletă, apăsați pictograma FX din paletă și alegeți stilul "umbrei".

Se afișează caseta de dialog "stil de strat", selectați aproximativ parametrii specificați în figură. În general, sunteți liber să alegeți ceea ce gustați.

Adăugați cursa cu culoarea neagră 1 pixel lățime. Faceți clic pe "Da."

Textul nostru a fost transformat.

Pentru a oferi un nou strat aceleași stiluri de strat, urcați tasta ALT și trageți pictograma FX de la primul strat de text la al doilea.

Deblocați planul nostru principal "Planul de spate". Pentru a face acest lucru, butonul stâng al mouse-ului de două ori cu el pe el. Apare o fereastră "NEW strat", în care nu schimbăm nimic, ci pur și simplu faceți clic pe "Da".

Prin pur și simplu tragând "stratul 0" la al doilea drept, pictograma de a crea un strat nou va crea trei copii ale stratului "stratul 0".

Vom plasa aceste straturi, astfel încât o copie a "stratului 0" a fost localizată sub fiecare strat de text.

Făcând activă strat de text, Apăsați combinația Ctrl + E Key. Astfel, îmbinăm împreună un strat de text activ și o copie a copiei "Layer 0" de sub ea.

La fel și cu toate straturile. Ca rezultat, vom avea doar patru straturi. Această lucrare pregătitoare este finalizată.

Deschideți paleta "Animație". Pentru a face acest lucru, selectați "Fereastră - Animație".

Vom vedea paleta "Animație".

Faceți clic pe săgeata situată în colțul din dreapta sus al paletei și în lista care se deschide, selectați "Creați cadre din strat".

Deoarece avem patru straturi, patru cadre vor apărea în paleta "Animație".

Alegeți timpul în care va fi afișat fiecare cadru. Pentru a face acest lucru, faceți clic pe săgeata neagră a fiecărui cadru situat în colțul din dreapta jos al fiecărui cadru și în meniul derulant, alegeți valoarea de care aveți nevoie.

Apoi faceți clic pe săgeata neagră sub primul cadru și selectați numele afișajului de animație - va fi afișat o dată, întotdeauna sau puteți alege numărul necesar de ori. Am ales mereu.

Vom reține animația noastră. Mergem la "Fișier - Salvare pentru Web" sau pur și simplu apăsați Alt + Ctrl + Shift + S.

În fereastra care apare, am pus formatul GIF., Selectați 256 de culori și faceți clic pe "Salvați".

În fereastra de salvare a documentelor, selectați dosarul unde vom salva fișierul, scrieți un nume pentru animație și faceți clic pe "Salvați".

Asta am făcut.

În această lecție lucrați cu Photoshop. Vă voi arăta cum puteți crea cu ușurință un banner animat cu o publicitate sau un alt text adecvat pentru site-ul dvs.


Publicații similare:

  • tutorial video "Cum de a face text "
  • tutorial video "Cum de a face un banner pentru site"
  • lecția "Creați un buton animat pentru site-ul dvs."

(Smooth-Scroll-top)

Deschideți sursa pentru banner, dimensiunea sa 468x60.. Dacă nu aveți astfel de surse, bannerul utilizat în această lecție poate fi descărcat și, în general, puteți utiliza orice dreptunghi de care aveți nevoie de dimensiunea dimensiunilor, umplute cu o anumită textură adecvată.






Alegeți instrumentul " Text orizontal".




Vom scrie orice text pe bannerul nostru, am ales potrivit pentru site-ul meu.






Adăugați un stil de strat în text. Pentru a face acest lucru în paletă " Straturile"Apăsați a doua pictogramă stânga fX. și alegeți stilul " Umbră".






Apare o casetă de dialog " Stilul stratului", Selectați despre astfel de parametri care sunt listați în figură. În general, sunteți liber să alegeți ceea ce gustați.






Adăugați cursa cu culoarea neagră 1 pixel lățime. Faceți clic pe " da".






mic; "\u003e Textul nostru a fost transformat.






Vom dezactiva vizibilitatea stratului cu textul și vom adăuga un nou strat de text. Scrie ceva.






Pentru a da noului strat aceleași stiluri de strat, eu înșurubați cheia Alt.și trageți pictograma fX.de la primul strat de text de pe cea de-a doua.






Stratul nostru de sus a primit aceleași parametri de stil de strat ca primul strat de text.






În același mod, creați un al treilea strat de text și dați-i aceleași efecte.






În cele din urmă, creați ultimul strat cu aceleași stiluri de strat.






Un total de patru straturi cu text.






Deblocați stratul nostru principal " fundal"Pentru asta, butonul stâng al mouse-ului de două ori cu el. O fereastră va apărea" Nou strat"În care nu schimbăm nimic, ci doar faceți clic pe" da".






Simplu tragere " Stratul 0."În al doilea drept, pictograma de a crea un strat nou va crea trei copii ale stratului" Stratul 0.".






Vom plasa aceste straturi, astfel încât a existat o copie sub fiecare strat de text " Stratul 0.".






Facem un strat de text activ, apăsați tasta tastaturii Ctrl + E.. Astfel, evacuăm împreună stratul de text activ superior și copia de mai jos " Stratul 0.".






De asemenea, facem cu toate straturile. Ca rezultat, vom avea doar patru straturi. Această parte pregătitoare a lucrării la crearea de animație este finalizată.






Deschideți paleta " Animaţie"Pentru a face acest lucru, alegeți" Fereastră - Animație".




Vom vedea paleta " Animaţie".






Faceți clic pe săgeata situată în colțul din dreapta sus al paletei și în lista care se deschide va alege " Creați cadre dintr-un strat".




Deoarece avem patru straturi, apoi în paletă " Animaţie"Vor apărea patru cadre.




Alegeți ora în care va fi afișat fiecare cadru. Pentru a face acest lucru, faceți clic pe săgeata neagră situată în colțul din dreapta jos al fiecărui cadru și în meniul derulant, alegeți valoarea de care aveți nevoie.




Apoi faceți clic pe săgeata neagră sub primul cadru și selectați numele afișajului de animație - va fi afișat o dată, întotdeauna sau puteți alege numărul necesar de ori. Am ales "întotdeauna".







Vom reține animația noastră. Mergem la " Fișier - Salvare pentru web"Sau pur și simplu apăsați Alt + Ctrl + Shift + S.




În fereastra care apare, am pus formatul Gif., Alegeți 256 de culori și faceți clic pe " Salvați." (salvați).






În fereastra de conservare, selectați dosarul în care vom salva fișierul, scrie un nume pentru animație și faceți clic pe " Salvați".





(Smooth-Scroll-top)

Salut prieteni! Cu tine din nou - Vladimir Savelyev și astăzi continuăm subiectul creării de bannere pentru site! În prima parte a articolului, v-am spus despre cine vă va ajuta să realizați ideile cele mai îndrăznețe!

Acum este timpul să vă arătăm - cum să creați bannere în Photoshop! De fapt, nimic greu și teribil nu vă va aștepta, repetați toate acțiunile pentru mine și vom ajunge la finala finală împreună, și anume vom crea primul nostru banner publicitar!

Ei bine, nu voi trage o pisică pentru ouă pentru ouă ...

Faceți un banner în Adobe Photoshop

Înainte de a continua cu locul de muncă, este foarte important să simuleze fin caracterul bannerului (dimensiunile sale, static va fi sau animat). De asemenea, este important să se determine gama de culori, utilizarea identității corporative, veniți cu titluri și sloganuri agățate.

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


Afișați panoul de lucru cu straturi "strat".
Ca un strat separat, creăm fundalul - aici vă sfătuim să nu economisiți în mod deosebit și niciun element vizibil al locului de banner strat separat., Până la punctul în care sub fiecare slogan de litere, evidențiați stratul.


Pe un strat separat - un apel publicitar, precum și pre-pregătit de dimensiunea unei fotografii, emblema.


Completați toate elementele de banner și asigurați-vă că ați creat mai multe opțiuni posibilecare nu vă împiedică să discutați cu colegii.


Toate opțiunile, în timp ce într-o versiune multi-strat, salvăm separați fișierele În format PSD (notă, formatul JPG "nu-și amintește" informații despre straturi, va colecta toate straturile într-una și în viitor, defalcarea va fi deja imposibilă).

Este foarte utilă încă de la computer să se îndepărteze, să ia o pauză de la locul de muncă și să se întoarcă la ea a doua zi, astfel încât "aspectul proaspăt" să evalueze realizarea și selectarea versiunii finale, care va fi corectată și tradusă în JPG .

Munca este în mare parte creativă pe punctul de a stăpâni instrumentele programului Photoshop, sentimentele de psihologie, impactul publicității și al subiectului acesteia.

Cum se face un banner în Photoshop animat (FIG-FILE)? Și cu această sarcină, Photoshopul nostru nativ va face față unui bang! Deschideți fila - fereastră - animație.

Apoi, în această fereastră, trebuie să adăugați cadre ascunderea și afișarea straturilor. De asemenea, definim viteza spectacolului cadrului și a loopului său!


Este necesar să înțelegem că deja creați orice videoclip, ceea ce înseamnă să nu faceți fără un mic "script". Cel puțin, va fi foarte important să se determine întreaga natură a animației - partidul fiecărui "erou-strat".

Aici va trebui să determinați cu precizie totul:

  • parametrii temporali ai comportamentului fiecărui strat;
  • comportamentul transparenței sale;
  • traiectoria mișcării.

Cazul nu este deloc dificil, dar te face să simți cât de dificil această profesie este scenariul regizorului.

Toate lucrările sunt asigurate de ideea principală - imagine cu mai multe straturi și abilitatea de a lucra cu fiecare strat complet independent unul de celălalt.

Aici este un astfel de banner pe care l-am creat în 5 minute! El este cu siguranță departe de a fi perfect, dar, la urma urmei, scopul meu a fost să vă arăt posibilitățile Photoshop și cu mine am ajuns cu ea!


Da, aproape am uitat să spun despre găsirea mea în ultimul articol, mi-am spus că am cumpărat cursuri video Serghei Bibarova, despre cum creați bannere și câștiga pe eleFotografiile! După un studiu detaliat (toată ziua am urmărit trucurile și chipsurile video ale lui Serezha), mi-am dat seama că acest tip de cursuri sunt foarte necesare în RUNET! Vă sfătuiesc să dobândiți cu siguranță ...

Până în curând, în noul articol!


Cu sinceritate, Vladimir Savelyev

Lecții premium de la Club Webformyself

Acesta este un nou produs revoluționar în domeniul construcției site-ului de instruire! Toate cele mai bune lecții video sunt colectate într-un singur loc și împărțite în categorii: WordPress, Joomla, PHP, HTML, CSS și JavaScript ... Baza este actualizată în mod constant și acum există mai mult de 200 de lecții în ea! În doar un an - puteți deveni un webmaster cu experiență "cu zero plin"!

Mai multe detalii

Salutare tuturor! Bannerul este o imagine animată a dimensiunilor mici, imaginile din care, de regulă, se schimbă alternativ. Cel mai adesea, bannerul este format din 3-4 imagini, fiecare dintre acestea fiind demonstrat pentru câteva secunde.

Bannerele animate (GIF, Flash) atrag perfect atenția vizitatorilor site-ului, ceea ce înseamnă că traficul poate fi redirecționat dintr-o resursă la alta.

Cum se creează un banner pentru site, cum să îl configurați, precum și ce programe de utilizat, vă voi spune în acest articol.

Programe pentru crearea unui banner

Sunt câteva programe popularepermițându-vă să faceți un banner pentru site. Și, deși nu sunt atât de mult cum aș dori, dar ele sunt libere. Vă recomandăm să utilizați următoarele programe pentru a crea o imagine animată:

  1. Ulead GIF Animator.
  2. Banner Maker Pro 7.0.5
  3. Banner.Designer.Pro.5.0
  4. Easy GIF Animator.

Fiecare dintre ele are avantajele și dezavantajele sale, ceea ce nu are sens. Vă recomandăm să încercați totul (ele sunt mici - fiecare ocupă aproximativ 25 MB) și rămâneți pe cel mai confortabil, în opinia dvs.

Easy GIF Animator.

Voi descrie crearea unui banner folosind programul Easy Animator GIF, deoarece este adesea util pentru ea. Acest program se va potrivi atunci când este necesar să creați rapid un banner simplu și necomplicat format din 2-3 inscripții în schimbare. Interfața programului este foarte convenabilă, ceea ce vă permite să vă dați seama instantaneu. Dar grafica frunze mult de dorit.

În primul rând, va trebui să descărcați acest program Pe Internet - alegeți versiunea dorită, Limba potrivită, descărcarea și începerea lucrului (I, de exemplu, folosind o versiune rusificată "5 pro").

Rularea programului, veți cădea pagina principalăunde va fi necesar să alegeți ce să creați (animație, banner, buton etc.). Alegem un banner animat.


Următorul pas este alegerea culorii. Puteți alege o culoare monotonă și puteți gradient. O paletă de culoare imensă este disponibilă, deci nu vor mai fi probleme cu acest lucru. Du-te înapoi la pasul următor.

A treia etapă este crearea de inscripții care vor fi difuzate. Există multe opțiuni care pot fi ajustate. Schimbați dimensiunea inscripțiilor, animația lor, locația de pe banner etc. Puteți experimenta fontul, precum și culorile inscripțiilor. Puteți crea până la trei mesaje textDin păcate, nu va fi posibil să creați mai mult \u003d).

Spun imediat că Photoshop este foarte program puternicȘi puteți crea pe ea ca imagini foarte simple și necomplicate și bannere animate foarte luminoase.

Am găsit pe Internet două articole foarte interesante, picând diferite opțiuni pentru crearea de logouri frumoase. Vă recomandăm să vă familiarizați cu ei.

    Ambele articole descriu procesul de creare a bannerelor în detaliu, deci nu ar trebui să existe probleme cu percepția lor. Asta e posibil. Dacă aveți câteva întrebări, scrieți în comentariile.

    Cu toate acestea, dacă aveți nevoie de un banner cu adevărat de înaltă calitate, este mai bine să vă întoarceți la cel care este angajat în acest an de mai mulți ani și are feedback bun. Vă recomandăm designerul după numele Dmitry, asigurați-vă că vă uitați la lucrarea sa, puteți merge la site-ul său și puteți comanda un banner pe butonul de mai jos.

    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 vor fi potrivite pentru dvs. î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.