Cum sa faci un banner GIF animat pentru un site web in Photoshop CS, blog de afaceri Max Meteleva

Aplicația este întotdeauna același - pentru a atrage atenția vizitatorilor, astfel încât au dus la pagina ta.

Deci, să creați un nou fișier document -> Nou. Nu puteți adera la standardele și alege orice dimensiune sau lungime și înălțime poate alege dimensiunea din lista derulantă de presetări Photoshop.







Mai întâi trebuie să faceți este să vă întreb contureze în jurul banner-ul de 1 pixel.

  • Creați un nou layer și numește-l „Frame“
  • Apăsați CTRL + A, pentru a selecta toate. Apoi, du-te la elementul Edit -> accident vascular cerebral. Următoarele setări se aplică:

Lungime: 1 pixel, culoare: negru, locația (Location): din centrul modului de amestecare (blendingmode): normală, Opacitate (Opacitate): 100%

Acest lucru ne oferă un clar de frontieră de un pixel în jurul valorii de banner-ul nostru. Acum, toate straturile ulterioare sunt suprapuse pe unul de altul, dar cel mai important strat va rămâne vizibilă. Ceea ce am făcut.

Acum trebuie să ne întrebăm de culoare gradient al câmpului oval. Accesați meniul de secțiunea strat (straturi) -> Layer Style -> Blend. Eu folosesc setările implicite în următoarele culori:

De asemenea, se aplică o mică umbră interior. Doar schimba opacitatea la 20%

Apoi, vom crea o altă regiune rotunjite, care va fi amplasat sub logo-ul nostru. Aplicați un gradient de umplere în următoarele culori:

Asigurați-accident vascular cerebral 2px în zona ovală. Dar, în cazul în care este logo-ul, eu umple fundal gri deschis, care nu arata atat de plat.

Și acum trecem la partea cea mai interesanta parte a design-ului nostru banner - animatii.

Pentru a da o perspectivă două blocuri vor fi plasate în zona noastră de bază a textului, adică, ei vor clipi alternativ, mai întâi unul, apoi altul, și va fi o animație banner.







Cu ajutorul funcției „Text“ pentru a crea orice text arbitrar, care s-ar potrivi în zona noastră de frontieră.

Acum ascunde stratul de text și se adaugă un al doilea strat, folosind un text diferit, adăugându-l la locul în care a fost primul.

Selectarea unui al doilea strat cu text, vom obține următoarele:

Suntem acum pe deplin pregătite pentru animație, comutați la modul Image Ready, făcând clic pe butonul corespunzător.

Imaginea Ready, veți vedea următoarele straturi paleta de animație, așa cum se arată mai jos:

Dați clic pe pictograma „noul cadru“ (sau noul cadru), astfel dublezi stratul selectat.

Pornind de la 2 stratului selectat, selectați stratul cu straturi paleta de text vizibil și mutați-l pixel (apăsați pe săgeată în sus de două ori).

Dacă te uiți la primul cadru și al doilea cadru, veți observa o parte din diferența lor unul față de celălalt.

Acum duplica ultimul cadru, apoi utilizați săgeata în jos și pentru a muta stratul de text este de aproximativ 10 pixeli, și setați opacitatea stratului la 70%

Din nou, duplicat ultimul cadru trăgând stratul de text în jos 15 pixeli și setați opacitatea straturilor 40%

Acum lucrăm cu al doilea câmp de text.

Ascundeți câmpul de text anterior și trece la un alt strat, face vizibil. Noi muta precum și cea precedentă, adică 10 pixeli și de a face opacitatea la 40%

Clona ultimul cadru.

Layer acest strat cu textul la aproximativ 15 pixeli și setați opacitatea la 70%

Clone ultimul cadru.

Acum, mutați stratul de text este mai mare cu aproximativ 10 pixeli, și setați opacitatea GIF animat banner-ul 100%

Acum muta zona de text de sub 2 pixeli.

Acum, tot ce trebuie să repetați de la pasul 8, mai târziu, acest strat, și un alt strat cucui.

Dacă ați făcut totul corect, ar trebui să obțineți aproximativ 14 de cadre.

În partea de jos a fiecărui cadru, veți vedea un „0 secunde.“ Acesta este timpul de întârziere între cadre.

Înlocuiți aceste cadre de întârziere de 0,05 sau 0,1, în funcție de cât de repede doriți să rulați banner.

Pentru a seta valoarea la 0.05, faceți clic pe săgeata de lângă 0 secunde și apoi selectați „Altele“ și introduceți numărul dorit.

După cum puteți vedea, textul se foarte repede, atât de repede încât este imposibil să aibă timp pentru a citi. Deci, trebuie să setați valoarea de întârziere de 2 secunde, atunci rezultatul este va avea ceva de genul asta.

se face cu opt trepte).

Dacă pare lecție dură, pe care am atașați de mai jos codul sursă cu banner-ul.