Animate banner

Fișierele GIF animate nu sunt foarte populare printre designeri și perceput ca o glumă. Deoarece imaginile animate nu au fost de calitate foarte bună, și de multe ori distrage atenția utilizatorului de la citirea conținutului paginii. Dar dacă acesta este plasat corect pe pagina, animația poate atrage interesul. Dupa ce a citit acest tutorial, veți învăța cum să creați un banner animat cu ușurință în Photoshop.







Pasul 1. Deschideți programul Photoshop și crează un nou document Ctrl + N, dimensiunea de 250x250 pixeli cu 70 de pixeli / inch, rezoluție. Cu ajutorul instrumentului Paint Bucket Tool (G) (umplere) umple de culoare de fundal # f2f2f2.

Cum de a crea un banner animat

Cum de a crea un banner animat

Pasul 2. Așezați logo-ul în centrul părții superioare a instrumentului.

Cum de a crea un banner animat

Pasul 3: Sub logo-ul a scrie un slogan folosind Type Tool orizontal (T) (orizontal Tip).

Cum de a crea un banner animat

Pasul 4. În bara de instrumente selectați Rectangular Marquee Tool (M) (suprafață dreptunghiulară) și un nou strat de a face o selecție ca imaginea de mai jos. Umple-l cu culoarea # b90909.

Cum de a crea un banner animat

Cum de a crea un banner animat

Deschideți stiluri de straturi pentru a face dublu click pe stratul cu o dungă roșie și se aplică aceste stiluri:

Umbră (Shadow):

Cum de a crea un banner animat

Acoperire degrade (gradient overlay):

Cum de a crea un banner animat

Cum de a crea un banner animat






Pasul 5. Se adaugă mai mult text pe straturi diferite. În acest caz, am scris aceste cuvinte: Tutoriale, articole, sfaturi, Freebies, Basix, Video, Premuim. A se vedea imaginea de mai jos.

Cum de a crea un banner animat

Rasteriza toate straturile de text, pentru aceasta vă rugăm să faceți clic pe butonul din dreapta al mouse-ului pe stratul de text, și, din meniul selectați Rasteriza Text (rasteriza textul), și apoi să creați pentru ei o mască de tăiere de a merge la Layer> Adăugați mască de tăiere (straturi - Creare mască de tăiere) . Opriți vizibilitatea straturilor cu excepția stratului Tutoriale, făcând clic pe pictograma ochi din partea stângă a numelui stratului.

Cum de a crea un banner animat

Pasul 6: Adăugați unele pictograma atractiv. Am ales icoana PSDTUTS, puteți alege orice alt.

Cum de a crea un banner animat

Pasul 7. La partea de jos a banner-ului a scrie un text.

Cum de a crea un banner animat

Etapa 8: Pe un nou strat de a crea o zonă ovală și umple-l cu #fdfcfc culoare.

Cum de a crea un banner animat

Cum de a crea un banner animat

Pentru a forma rezultată se aplică aceste stiluri:

Drop Shadow (Shadow):

Cum de a crea un banner animat

Strălucire interioară (Strălucire interioară)

Cum de a crea un banner animat

Acoperire degrade (gradient overlay):

Cum de a crea un banner animat

Cum de a crea un banner animat

Pasul 9. Banner nostru este gata! Acum vom ajunge să lucreze la animație. În primul rând, deschideți fereastra panoul> Animație Animație (Fereastră - Animație). Voi lucra cu o cronologie, (nu time-lapse animație).

Notă: Această funcție este disponibilă numai pentru Photoshop Extended.

Asigurați-vă toate straturile și valoarea inferioară Opacitate (opacitate) până la 0%.

Cum de a crea un banner animat

Etapa 10. Bazat pe imaginea de mai jos, introduceți cadrele cheie și în cazul în care aveți nevoie pentru a crește opacitatea.

Etapa 11. cronologia noastră este să se uite după lucrările de făcut acest lucru:

Cum de a crea un banner animat

Pasul 12. Animație este gata! Faceți clic pe Play și vedeți rezultatul. Dacă este necesar, puteți schimba. Pentru a salva banner-ul, mergeți la File> Salvare pentru Web Dispozitive (Fișier - Salvare pentru Web și dispozitive). Setați parametrii așa cum se arată mai jos, apoi faceți clic pe Save (Salvare).

Cum de a crea un banner animat