Create dine egne animerte Pre-loader i Photoshop
Dette innlegget er en del av en serie som heter animasjon i Adobe Photoshop.10 måter å optimalisere en animert GIF FileQuick Tips: Animere en News Ticker GIF Med Photoshop
La oss lage en animert pre-loader gif for din neste UI prosjekt. Du trenger den utvidede versjonen Photoshop CS3 eller nyere.
Vi kommer til å lage en liten animert gif som kan brukes til en rekke widgets, er når som helst ajax innhold blir forespurt , filene blir lastet opp, uansett hva du har lyst på. Føl deg fri til å blande inn dine egne stiler og variasjoner til lasteren som vi går sammen. Det er tre hoveddeler vi skal ta:
Opprette Loader Shapes
Styling Loader Shapes
animere Loader
Ready. Sett. Gå ..
Trinn 1: Opprette Shapes Setup File
Begynn med å sette opp lerretet størrelse, og legge til en rask bakgrunn for å komme i gang
Ny Photoshop. dokument (Fil> Ny) || Kontroll /Command + N
Canvas size: 100px by 100px
Dobbeltklikk BG lag, Konverter til vanlig lag
Sett farge til mørk grå, brukte jeg: # 3d3d3d
Trinn 2:. Opprette Shapes Bakgrunn Pattern
Bare for moro skyld, vil vi legge til en foret mønster til vår bakgrunn, og deretter starte arbeidet med lasteren
Opprett en ny gjennomsiktig dokument: (7px av 7px). Tegn en diagonal linje med en 1px svart blyant verktøyet (klikk øverst til venstre pixel, hold nede shift og klikk nederst i høyre pixel)
Definer og navngi mønster (Rediger> Define Pattern).
< p> Det gjøres, hoppe tilbake til det opprinnelige dokumentet og opprette et lag stil med "Pattern Overlay" på vår grå bakgrunnslaget: (Lag-menyen> Lagstil> Pattern Overlay). Velg ditt mønster fra mønsteret boksen, og senk opacity (jeg brukte 20%)
Trinn 3:. Opprette Former Guides
Vi kommer til å sette opp noen merker som vil handle . som guider for å hjelpe oss sammen - vi vil bruke "Transform Again" Kommando for å få fart på sakene
Tegn en 1px vertikal hvit tråd med linjeverktøyet på dokumentet:
For å gjøre at den er justert i sentrum, velge både laget og bakgrunnslaget, ta tak i flytteverktøyet, og klikk på "Juster Horisontale Centers" alternativet som så:
Roter linje 45-graders (Velg linjen Rediger> Free Transform || Kontroll /Command + T)
Velg Rediger> Transformer> "Transform Again" mens du holder nede "Option /Alt" Key (Kommando /Ctrl + Tilvalg /Alt + Shift + T)
Utfør kommandoen flere ganger til linjen har rotert hele veien rundt, som så:
Trinn 4: Opprette Shapes Tick Marks
Ved hjelp samme teknikk som forklart ovenfor, kommer vi til å legge noen små aksemerker på hver grid linje for å gjøre lasteren går rundt og rundt .. Her går.
Legg noen guider rundt der du vil ha din første " Tick Mark "på nett (pass på at dine guider er på hele piksler, ikke delt piksler).
Opprett en avrundet rektangel med en 1px radius innenfor våre ledelinjer (sørg for at du har festing slått på for guider .: Vis-menyen> Snap)
Bruke Direct Selection Tool flytte de nederste hjørnene (noder) i vår rektangel huke form innover, slik at formen smalner
Utnytte den samme "Transform Again 'trick vi brukte ovenfor, for å kopiere formen hele veien rundt våre merker (Når du roterer 45-graders sørg for å sette transformasjon punktet til sentrum av vår rutenett, ikke midten av rektangelet huke form, som den der den mislighold).
Velg Rediger> Transformer> "Transform Again" mens du holder nede "Option /Alt" Key (Kommando /Ctrl + Tilvalg /Alt + Shift + T) inntil flåtten har blitt kopiert hele veien rundt. Det skal se slik ut:
Layer Sjekk: sikre ditt lag panel ser slik ut:
Trinn 1: Styling Shapes Bygg Vår Tick Marks
Puh. Vi har fått forhånds loader figurer alle skapt, nå er vi bare nødt til å legge en haug med lagstiler å gran ting opp litt. Som vanlig, salt etter smak. Vi kommer til å legge lagstiler som alle kan finnes i "Layer menyen> Layer Styles".
Legg til en "Color Overlay" lag stil til flått laget (jeg brukte # 242424).
Legg til en "Drop Shadow" lag stil til flått lag:
Legg en "Inner Shadow" lag stil til flått lag:
Din loader skal nå se slik ut:
Trinn 2: Styling Shapes Duplisere lag
Det finnes noen måter vi kan gå om dette neste bit, men for å gjøre ting enklere vi kommer til å kopiere våre tick lag fem ganger, og deretter slette alle de form flått som ikke tilhører de spesielle formlag. Vi vil ikke ha noe overlappende flått karakterer fra lagene under, som lagstiler vi skal legge ville stable, forårsaker overeksponert ser effekter.
Duplicate basen tick lag fire ganger, og deretter begynne å slette tick merker på hvert av lagene før du ender opp med følgende:
Du kan bruke segmentmarkøren til å slette flått figurer fra hver av lagene
Trinn 3:. Styling Shapes stil dem Valper
Nå vil vi legge til noen stiler til hver av de enkelte hake lag vi skilt ut. Jeg vil være å registrere mine egne lagnavn
Til lag som heter "Shine-Active", legge til /endre "Ytre Glow" layer style.
Til samme lag, legge til /modifisere "Inner Glow" layer style:
Deretter legger /endre "Color Overlay" lag stil (jeg brukte # 0087c6):
Til lag som heter "Shine-Fading1", legger nøyaktig samme stilene ovenfor, utelate "Outter Glow" layer style:
til laget som heter "Shine-Fading2", legge til /endre "Inner Shadow" layer style:
Til samme lag, legge til /endre "Inner Shadow" layer style (jeg brukte # 0087c6).
Deretter til laget som heter "Shine-Fading3", legge til /endre "Inner Shadow" layer style (note endringen i opacity i tillegg):
Din loader skal nå se omtrent slik ut (tweak lagstiler til din smak):
Trinn 1: Animere Shapes Group & Duplisere
Ok, vi har base stiler satt opp, nå er det på tide å duplisere lag en hel haug (som vil gjøre animere et blunk) og lage vår animere .gif
Gruppe alle lagene som utgjør vår hake (markere dem alle + Lag-menyen> Gruppe Layers)
Duplicate hele gruppen, og roter det 45-graders (Rediger> Free Transform). Gjenta trinn 2 til du har rotert avmerkningsmerket hele veien rundt (har du åtte grupper i totalt)
Din loader skal se omtrent slik ut:.
Trinn 2: Animere Shapes Animate
Alright, er våre lag alle satt opp, og vi er klare til å animere. Vi kommer til å feste med vanlig bilde for bilde-animasjon, selv om vi kunne oppnå de samme tingene med tidsbasert animasjon
Åpne opp Animation Panel:. (Window> Animation). Slå av alle flåttgruppe lag, bortsett fra den første, klikk på "Duplicate Selected Frames" -knappen i animasjonen panel.
Slå av første gruppert lag, og slå på andre gruppert lag. Anmeldelser
Gjenta det forrige trinnet for hvert av konsernlagene. Markere alle rammer i animasjonen lag (Shift + Klikk Hver Frame) og sette rammen varighet til 0,1 sek
Velg Fil> Lagre for Web & Enheter og bruker følgende innstillinger for animerte .gif
Åpne opp .gif i en nettleser og beundre den nye fancy loader! Endelig få litt iskrem.
Konklusjon
Det var det. Jeg håper du har hatt glede av å lage lasteren! Det var moro for meg å sette opp. Last opp og link til noen av dine kreasjoner i kommentarfeltet, og stille eventuelle spørsmål du måtte ha
Andre ressurser
Quick Tips:. Animer en News Ticker GIF Med Photoshop på Webdesigntuts +
Quick Tips: Lag en animert banner annonse i Photoshop CS5 på PSDTUTS +