Kako napraviti super jednostavnu animiranu pozadinu

Tako da je ovo Pločica pozadine od 404 stranice je samo animirani GIF. Vrlo stara škola tehnologija, ali s njima se još uvijek možete jako zabavljati.

1. Stvorite pozadinsku pločicu

Svojom pozadinskom slikom pokušao sam stvoriti potpuno slučajnu / ludu šahovsku ploču koja se mijenja. Da ne bih izgledao kao da se jedna slika ponavlja na ekranu, prvo sam morao napraviti pozadinsku pločicu kvadratom od devet slika u jednoj.





2. Stvorite različite verzije

Zatim sam stvorio pet različitih verzija svoje pozadinske pločice; svaki s različitom ilustracijom na svakom kvadratu. U ovom slučaju odabirem stvoriti pet verzija pozadinske pločice jer sam pretpostavio da će to biti dovoljno za stvaranje efekta koji sam tražio. Mogao si ih imati koliko ili koliko si htio.

3. Animirajte u Photoshopu

Nakon što sam stvorio svojih pet različitih pozadinskih pločica, tada sam ih animirao u Photoshopu. Ovo je stvarno lako. U Photoshopu idite na: Prozor / Animacija da biste otvorili paletu animacija.



photoshop zamjenjuje boju specifičnom bojom

Za ovu animaciju koristimo okvire. Dakle, paleta animacija trebala bi izgledati ovako:



Ako, kada je otvoren, prikazuje prikaz vremenske trake, samo kliknite ikonu 'okviri' u donjem desnom kutu palete. Na ovoj slici možete vidjeti da prikazuje ikonu vremenske crte jer već koristimo 'okvire':

4. Odlučite o broju okvira

Sve što sada radimo je odabrati koliko okvira želimo. Dodao sam pet. To radite klikom na malu ikonu 'list stranice' na dnu palete okvira za animaciju. Zatim povežete okvir sa slojem. Ako želite da okvir 3 prikazuje sloj 3, kliknite okvir 3, a zatim se pobrinite da se sloj 3 prikazuje u paleti slojeva i tako dalje.

5. Postavite brzinu kadra

Jedino što preostaje sada je postaviti brzinu kadra i postaviti animaciju da se zauvijek petlja. U ovom slučaju postavljam svaki kadar da se prikazuje 0,13 sekunde. To radite klikom na vrijeme prikazano ispod svakog okvira.

referentne slike ljudskog tijela za 3d modeliranje

kako crtati realističnog psa lako

Napokon da biste zauvijek postavili petlju, samo kliknite riječ 'Jednom' u donjem lijevom dijelu animacijske palete, a zatim odaberite 'jednom' ili 'zauvijek'.

Možete se zabavljati s animiranim GIF-ovima, učiniti ih jednostavnima ili složenima koliko želite. U osnovi snimate mali film - što je prilično cool!

6. CSS

Kratka završna napomena o CSS-u. Ovdje je vrlo malo posla osim primjene pozadinske slike:

body {color: #fff; margin: 0;background: url(img/multi3.gif) repeat;}

Također, zaokružio sam kutove spremnika u kojem se nalazi poruka 404 i upotrijebio sam RGBA za smanjenje neprozirnosti spremnika, tako da možete vidjeti pozadinu kroz spremnik. Relevantni CSS možete vidjeti u nastavku:

.container { background:rgba(255, 255, 255, .9); border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; o-border-radius:5px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 4px 4px #rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); -o-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); }

Sad kad je CSS završen, možete uživati ​​u svojoj zabavnoj novoj 404 stranici.