Create en animert Interface GIF i Adobe Photoshop
Dette innlegget er en del av en serie kalt animasjon i Adobe Photoshop.Make en animert Pumpkin symbol Bruke Pixel Art i Adobe PhotoshopCreate en Run Cycle Animasjon fra grunnen av i Adobe PhotoshopWhat Du vil være å skape
Noen gang ønsket å slå en app grensesnitt PSD til et fullt animert demo for dine kunder eller siden? Slår ut, kan du bruke Photoshop for det også.
I denne opplæringen, vil vi lage en enkel nyhets iPhone app, og deretter animere det for klient presentasjon og eksportere det som en GIF-fil. Du vil lære alt du trenger for å gå fra idé til animerte demo, alt inni noen nyere versjon av Photoshop.
Instruksjons Eiendeler
've brukt Photoshop CC i denne opplæringen, men CS5 eller 6 ville fungere så godt å følge med. Du vil også trenge følgende lager bilder for å fullføre denne opplæringen. Vennligst last dem før du begynner, eller erstatning med et lignende bilde og justere trinnene tilsvar:
Mobiltelefon - $ 1 +
Tuts + Arkiv Foto Set - gratis
1. Utforme en iPhone App GUI
Trinn 1
Først vil vi begynne å designe programmet grensesnitt. Lag en ny fil ( Ctrl-N
) med lerret størrelse 640 px
av 1136 px
, og klikk deretter OK
.
< p> Hvis stedet du allerede har en app grensesnitt designet, kan du åpne den i Photoshop og deretter hoppe til Trykk
delen av denne opplæringen.
Trinn 2
Klikk View > Guide New
å lage nye guide, som vil hjelpe oss i å plassere grafiske elementer nøyaktig. Sett den til Vertikal
med posisjon 15 px
.
Trinn 3
Legg til en vertikal guide på hver side av lerretet med 15 px avstand mellom hver guide.
Trinn 4
Tegn en annen guide, denne gangen horisontalt på 40 px
, 128 px
, og 220 px
.
Trinn 5
Legg til en statuslinje på den øvre mest delen av lerretet. Hvis du trenger detaljert veibeskrivelse på det, sjekk ut statuslinjen delen av vår tidligere tutorial Hvordan utforme en iOS 7 E App i Photoshop.
Deretter lage en ny layer og velg deretter andre delen, og deretter fylle det en grå farge, # 2c3137.
Trinn 6
Legg appens tittelteksten på den øverste delen av grensesnittet.
Trinn 7
Legg til en logo til tittelen. Jeg trakk bare noen enkle rektangler for logoen, men hvis du har et eksisterende ikon app, kan du bare importere det inn et nytt lag.
Trinn 8
Tegn et forstørrelsesikonet ved hjelp av en kombinasjon av to sirkel former og et avrundet rektangel, med samme farge som app logo. Plasser den på høyre side av app.
Trinn 9
På den andre siden, tegner fire avrundede rektangler for alternativet ikonet.
Trinn 10
< p> Lag et nytt lag med et rektangel del som passer under tittellinjen. Fyll neste avsnitt med en grå farge, akkurat som forrige avsnitt.
Trinn 11
Legg til en lagmaske på laget, og deretter legge til en svart til kvit før bunnen er falmet .
Trinn 12
Legg til en meny ved hjelp av Type Tool
, som inneholder nyhetskategorier. Sett den første menyen i dette tilfellet, Alle
opsjons å være dristig, for å indikere at kategorien er aktiv. Kopiere det ( Ctrl-J
), og angir andre meny i dette tilfellet, Sport
-For å være fet, nok en gang for å indikere hvilken kategori som er valgt.
nå, fra Layers
panel, sett Sport
menyen Opacity
til 0%
å skjule det, som vi ønsker at alle
kategori for å være dristig først.
Trinn 13
Legg til en tynn pil for menynavigering, laget av avrundede rektangler.
Trinn 14
Legg til en pil på den andre siden.
Trinn 15
Fyll resten av grensesnittet med grå farge. Sørg for å sette denne bakgrunnen under alle de grafiske elementene.
Trinn 16
Tegn en lys grå firkant for den enkelte nyhetsseksjonen bakgrunn.
Step 17
Bruk Stroke
, Indre Gl
ow
, og Ytre glød
å legge mer kontrast til nyhetsområdet. Dobbeltklikk på laget, og deretter bruke følgende innstillinger fra bildene nedenfor:
Trinn 18
Tegn en hvit avrundet rektangel på den øverste delen av den tidligere form. Vi vil sette nyheter bilde her
Trinn 19
Bruk Inner Glow
i den hvite formen med følgende innstillinger.
Trinn 20
Velg et bilde fra Tuts + Stock Photo settet du lastet ned tidligere, eller andre bilder du ønsker å bruke, og plasser den dekker den hvite avrundet rektangel form.
Trinn 21
Hit Ctrl-Alt-G
å konvertere valgte bildet lag i en klipping maske. Bildet vil automatisk gå inn lag bak seg. Og, her er hva du ser: En perfekt plassert bilde på toppen av den aktuelle nyhetene området
Step 22
Legg til tekst for nyhetsinnhold.. Sørg for å legge kontrast til nyhetstekst for en bedre leseopplevelse ved å variere skrifttype, farge og størrelse.
Trinn 23
La oss legge ikoner inn i nyhetene element design. Tegn to små avrundede rektangler uten Fyll Hotell og 1 pt
hvit strek.
Trinn 24
Dobbeltklikk på laget og deretter legge lag stil Color Overlay
. Bruk # 708196 for fargen sin.
Trinn 25
Gjenta forrige prosessen, men denne gangen bruker en kombinasjon av et avrundet rektangel og et rektangel.
Trinn 26
Legg en liten sirkel form. Nå har vi en tag ikon. Søt!
Så langt er dette vår app design ved 100% forstørrelse.
Trinn 27
Legg til andre individ nyhetsartikler på appen ved å duplisere nyheter element lag, tilpasse dem på riktig måte.
Trinn 28
Legg større nyheter område. Dette vil bli vist når en person nyheten er valgt.
Trinn 29
Ha alle individuelle nyhetselementer og store nyheter i eget lag grupper. Du ønsker å forsikre alle lag er nøye plassert inn i et lag gruppe i henhold til sitt rette element.
For eksempel vil hvert lag som gjorde den første individuelle nyhetsdelen plassert sammen i et lag gruppe, og elementene for fullt sub-skjermen nyhetsartikler i andre grupper. Dette vil hjelpe deg å arbeide enklere samtidig som animasjon.
For nå, vil vi ikke bruke denne store nyheter delen. Så satt sin Opacity til 0%.
2. Trykk Indikator
Trinn 1
Vi trenger nå å utforme springen indikator. Lag et nytt lag gruppe og gi den navnet på. Deretter tegne en hvit sirkel form. Sett sin Opacity
til 50%
.
Trinn 2
Dupliser sirkel form ved å trykke på Ctrl-J
. Gjør det større, sette hjerneslag
til 3 pt
med en hvit farge, og ta ut Fyll
farge.
Trinn 3
< p> Legg til en sirkel form, denne gangen tynnere. Sette sitt slag størrelse til 2 pt
.
Skjul alle lagene inne springen laggruppe vi nettopp har gjort, som du ikke vil kranene til å dukke opp når UI er første lastede , men i stedet vil bare vise dem når animasjonen er i ferd med å overgang til en valgt element.
3. Bla App
Trinn 1
Nå er vi endelig klar til å begynne å bygge vår UI animasjon. Åpne Tidslinje
panel og deretter lage en ny ramme.
Trinn 2
Gjør en ny ramme.
Trinn 3
nå er det på tide å avsløre springen laggruppe. Når den viser en rullende scene, skjule to strøk sirkler, og vi kommer til å bruke denne betingelsen for å indikere bla gest. Det vil virke mer som en sammenhengende bevegelse, mens de ytre strøk sirkler gi en krusning utseende mer i samsvar med et enkelt trykk for å velge et element.
Trinn 4
Endre varigheten til en andre
for første ramme og 0,2 sekunder
for andre rammen.
Trinn 5
Legg til en annen ramme.
Trinn 6
Aktiver Trykk
laggruppe og alle nyheter grid lag. Bruk Move Tool
å flytte dem opp i listen over lag.
Trinn 7
Hvis du automatisk få en jevn animasjon mellom nåværende og foregående ramme, klikker du på Tween
fra menyen Tidslinje
panel.
Trinn 8
Sett tween til 5
for den ekstra rammen.
nå har vi en animasjon av nyhetene grid flytte oppover på hver rammen.
Trinn 9
Hvis du tror at animasjonen er for fort, du kan gjøre det tregere ved å velge alle rammer og sette varigheten til 0,2 sekunder
.
Test animasjonen ved å klikke på play-ikonet i Tidslinje
panel. Ikke glem å sette animasjonen til Alltid
; denne måten animasjonen sløyfes.
Trinn 10
Vår nåværende animasjon inneholder nyheter rutenettet flytte oppover. I neste bilde, må vi sette den tilbake til tidligere tilstand, så det vil fortsette sømløst med den første rammen. For å gjøre dette, kopiere andre rammen og lim den inn i siste posisjon ved å velge Lim inn utvalg
i dialogboksen.
Trinn 11
Bruk Tween
kommandoen på nytt for å lage en ny animasjon mellom siste og nest siste bildene.
Legg til en ny ramme og skjule springen indikatoren.
Så langt er dette animasjon vi får, noe som gir oss en grunnleggende rulling UI.
4. Trykk Link
Trinn 1
Nå er det på tide å animere valg av en link i menyen. Først må en ny ramme. I denne rammen, sette Opacity
tekstmenyen med valgt fet variant av Alle
fra menyen satt til 0% Hotell og Sport
' s
valgte variant gjennomsiktighet satt til 100%
.
Trinn 2
Aktiver Tap laggruppe og avslører alle sine lag. Endre ramme varighet til 0,2 sekunder
.
Trinn 3
Lag ny ramme med en varighet på 0,1 sekunder
. Denne gangen skjuler den tynneste strøk sirkelen.
Trinn 4
Legg til en annen ramme og gjem neste strøk sirkel.
Trinn 5
Legg til en ny ramme og skjule springen laggruppe.
Trinn 6
Lag ny ramme og deretter sette Opacity
av hver nyhetsartikkel i nettet uten sporten tag til 0%
.
Trinn 7
fortsatt i denne rammen, drar de individuelle idretter nyheter oppover i nettet, fylle tomrom over dem.
Trinn 8
Tween mellom gjeldende ramme og den forrige. For raskere animasjon, satt lagt rammer for å 3
.
Trinn 9
Angi varighet i den siste rammen til 2 sekunder
.
< p> For dette springen, er dette animasjonen vi har.
6. Tap Nyheter
Trinn 1
Neste, vi kommer til å velge en av nyhetsartikler og avsløre det i full skjerm. Først må ny ramme med varighet 0,2 sekunder
og deretter avdekke alle lagene innenfor Tap laggruppe.
Trinn 2
Legg til ny ramme og deretter sette varigheten til < b> 0,1 sekunder
. Skjul tynneste sirkel slag.
Trinn 3
Legg til en annen ramme og deretter skjule neste strøk sirkel.
Trinn 4
Legg til en annen ramme med varighet 0,1 sekunder
. Skjul Tap laggruppe, og lage en ny ramme. Avslør den store nyheten delen vi har gjort tidligere i Seksjon 1 Trinn 28
ved å sette sin Opacity
til 100%
. Skjule den lille nyheten nettet ved å sette sin Opacity
til 0%
.
Trinn 5
Legg Tween animasjon mellom den gjeldende rammen og de forrige .
dette er hva vi har for denne animasjonen.
7. Konverter Lag Animasjon å Rammer
Trinn 1
Fra Tidslinje
panelet klikker du Flat Frames i lag
.
Hver ramme vil bli konvertert til en flat lag. Hvis du har 33 rammer, vil du også få 33 flat lag: lag Frame 1 Velg alle ramme lag i lag Dra av lagene på iPhone bilder som du lastet ned tidligere. I Tidslinje Pass på at alle lag er fortsatt valgt. Hit Ctrl-T Lag ny ramme for hvert lag. Sett lag Frame 1 Se på bildet under for et eksempel. Layer Frame 23 Det er på tide å eksportere resultatet som animerte GIF-fil. Velg Lagre for Web Og det er det. Du har laget en demo app UI, animerte det, og sette animasjonen inne i en iPhone bildet for å gjøre animasjonen ser ut som det kjører på en ekte enhet. jeg håper du fant denne opplæringen nyttig. Du kan justere trinnene inkluderte å jobbe med alle typer app du ønsker å demo, og kan bruke en annen enhet bilde å vise frem, sier en tablett app eller nettside. Du kan også prøve andre typer multi-touch interaksjon i den endelige presentasjonen, for eksempel tilt-rulle eller pinch-to-zoom, hvis du endrer animasjonene. Hvis du lage din egen app demo animasjoner ved hjelp av denne opplæringen, vi vil gjerne se dem i kommentarfeltet nedenfor!
tatt fra innholdet i rammen 1, lag Frame 2
hentet fra ramme 2, og så videre
Trinn 2
panel.
Trinn 3
Trinn 4
panel, velger du Opprett Frame Animation Hotell og klikk deretter New Frame
knappen.
Trinn 5
å utføre en transformasjon. Hold Ctrl Hotell og dra hvert hjørne og plassere dem på skjermen hjørnet.
Trinn 6
i det første bildet, lag Frame 2
i andre rammen, lag Frame 3
i tredje ramme, og så videre. Du ønsker også å matche varigheten for hver av rammen. Sørg for å sette sløyfen til Alltid
, så animasjonen vil holde på looping.
er avslørt på ramme 23. Layer Frame 25
er avslørt på ramme 25, og så videre. Fortsett dette for hver ramme.
Trinn 7
i Fil-menyen og velg GIF
som filtype. Lek litt med tilgjengelige innstillinger for å få størrelsen optimal fil. Test animasjonen resultatet ved å klikke på avspillingsknappen. Sørg for å sette sitt Looping alternativer
til Alltid
Konklusjon