Share
La oss lage et animert pre-loader gif for ditt neste UI-prosjekt. Du trenger den Utvidede versjonen Photoshop CS3 eller høyere.
Vi skal lage et lite animert gif som kan brukes til en rekke widgets, når som helst ajax innhold blir forespurt, filer lastes opp, uansett hva du har lyst på. Du er velkommen til å blande inn dine egne stiler og variasjoner til lasteren når vi går. Det er tre hovedavdelinger vi skal gjøre:
Klar. Sett. Gå…
Begynn med å sette opp lerretets størrelse, og legg til en rask bakgrunn for å komme i gang.
Bare for spark, legger vi til et foret mønster i bakgrunnen, og deretter starter arbeidet med lasteren.
Opprett et nytt gjennomsiktig dokument: (7px ved 7px). Tegn en diagonal linje med et 1px svart blyantverktøy (klikk øverst til venstre piksel, hold nede skift og klikk nederst til høyre piksel)
Definer og navn mønsteret (Rediger-meny> Definer mønster).
Det gjøres, hopp tilbake til det opprinnelige dokumentet og opprett en lagsstil av "Mønsteroverlegg" på vårt grå bakgrunnslag: (Lagmeny> Lagstil> Mønsteroverlegg). Velg mønsteret fra mønsterboksen, og senk opaciteten (jeg brukte 20%).
Vi skal sette opp noen få karakterer som vil fungere som guider for å hjelpe oss sammen - vi vil bruke kommandoen "Transform Again" for å få fart på det.
Tegn en 1px vertikal hvit linje med linjestykket på dokumentet ditt:
For å sikre at den er justert i midten, velg både laget og bakgrunnslaget, ta tak i flytteverktøyet, og klikk på alternativet Juster horisontale sentre slik:
Roter linjen 45 ° (Velg linjen Rediger-meny> Fri transformasjon || Kontroll / kommando + T)
Velg Rediger-meny> Transform> "Transform Again" mens du holder nede "Option / Alt" -tasten (Command / Control + Option / Alt + Shift + T)
Utfør denne kommandoen flere ganger til linjen har rotert hele veien rundt, slik som:
Ved å bruke samme teknikk som forklart ovenfor, skal vi legge til noen små kryssmerker på hver rutenett for å gjøre lasteren gå rundt og rundt ... Her går.
Legg til noen guider rundt der du vil at ditt første "Tick Mark" skal vises (sørg for at guider er på hele piksler, ikke del opp piksler).
Opprett et avrundet rektangel med en radius på 1 px i våre guidelinjer (sørg for at du har slått på for guider: Se meny> Snap)
Ved hjelp av Direct Selection Tool flytter du nedre hjørner (noder) av rektanglet-tippformen innover, slik at formen taper.
Bruk det samme "Transform Again" -tricket vi brukte ovenfor, for å duplisere formen helt rundt merkene våre (Når du roterer 45 °, må du sette transformasjonspunktet til midten av rutenettet, ikke midt i rektanglet form, som det der det er standard).
Velg Rediger-meny> Transform> "Transform Again" mens du holder nede "Option / Alt" -tasten (Command / Control + Option / Alt + Shift + T) til krysset er kopiert hele veien rundt. Det skal se slik ut:
Lagkontroll: Kontroller at lagpanelet ser slik ut:
Puh. Vi har pre-pre-formene alle opprettet, nå skal vi bare legge til en haug med lagstiler for å spore ting opp litt. Som vanlig, salt å smake. Vi skal legge til lagestiler som alle kan finnes i "Lag-meny> Lagstilter".
Legg til en "Fargeoverlegg" -lagsstil til fikselaget (jeg brukte # 242424).
Legg til en "Drop Shadow" -lagsstil til fikselaget:
Legg til en "Innerskygge" -lagsstil til fikselaget:
Din laster skal nå se slik ut:
Det er noen måter vi kunne gå om denne neste gangen, men for å gjøre ting enklere, skal vi duplisere vårt krysslag fem ganger, og deretter slette alle formskinnene som ikke tilhører de bestemte formlagene. Vi vil ikke ha noen overlappende flåttmerker fra lagene under, da lagstiler vi legger til, vil stakke og forårsake overeksponerte lette effekter.
Dupliser ditt basepiktlag fire ganger, og start deretter å slette merketrykk på hvert lag til du ender opp med følgende:
Du kan bruke Direct Selection-verktøyet til å slette tickformene fra hvert lag.
Nå legger vi til noen stiler til hvert enkelt avmerkingslag som vi skilt ut. Jeg refererer til mine egne lagnavn.
Til laget som heter "Shine-Active", legg til / endre "Outer Glow" -lagsstilen:
Til det samme laget, legg til / endre "Inner Glow" -lagsstilen:
Legg deretter til / endre "Color Overlay" -lagsstilen (jeg brukte # 0087c6):
Til laget som heter "Shine-Fading1", legg til nøyaktig samme stiler over, utelat "Outter Glow" -lagsstilen:
Til laget som heter "Shine-Fading2", legg til / endre "Innerskygge" -lagsstilen:
Til det samme laget, legg til / endre "Innerskygge" -lagsstilen (jeg brukte # 0087c6).
Deretter legger du til / lag "Lagerskygge" -lagstypen på laget som heter "Shine-Fading3" (Legg også merke til endringen i opacity):
Din loader burde nå se slik ut (tweak layer styles to your liking):
Ok, vi har grunnleggende stiler satt opp, nå er det på tide å duplisere lagene en hel haug (som vil gjøre animering et snap) og skape vår animasjon .gif
Grupper alle lagene som utgjør vårt merkepunkt (merk dem alle + Lag-menyen> Gruppelag)
Dupliser hele gruppen, og drei den 45 ° (Rediger-meny> Gratis transformasjon). Gjenta trinn 2 til du har rotert kryssmarkeringen hele veien rundt (du har totalt åtte grupper).
Din laster skal se slik ut:
OK, våre lag er alle satt opp, og vi er klare til å animere. Vi skal holde fast med vanlig ramme for ramme animasjon, selv om vi kunne oppnå de samme tingene med tidslinjebasert animasjon.
Åpne animasjonspanelet: (Vindu> Animasjon). Slå av alle kryssgruppelagene bortsett fra den første, og klikk deretter på "Kopier valgte rammer" i animasjonspanelet.
Slå av det første grupperte laget, og slå på det andre grupperte laget.
Gjenta det forrige trinnet for hvert av gruppelagene. Fremhev alle rammer i animasjonslaget ditt (Shift + Klikk på hver ramme) og sett rammevarighet til .1 sek
Velg Arkiv> Lagre for web og enheter og bruk følgende innstillinger for den animerte .gif
Åpne din .gif i en nettleser og beundre din nye fancy loader! Til slutt, få litt iskrem.
Det er det. Jeg håper du har likt å skape lasteren! Det var gøy for meg å sette opp. Last opp og lenke til noen av dine kreasjoner i kommentarene, og still spørsmål du måtte ha.
Accentsconagua