Share
Hva du skal skapeHar du noen gang ønsket å konvertere en appgrensesnitt PSD til en helt animert demo for dine kunder eller nettsteder? Vises, du kan også bruke Photoshop for det.
I denne opplæringen vil vi designe en enkel nyhets iPhone app, og deretter animere den for klientpresentasjon og eksporter den som en GIF-fil. Du lærer alt du trenger for å gå fra idé til animert demo, alt i en ny versjon av Photoshop.
Vi har brukt Photoshop CC i denne opplæringen, men CS5 eller 6 vil også fungere for å følge med. Du vil også trenge følgende lagerbilde for å fullføre denne opplæringen. Vennligst last ned dem før du begynner, eller erstatt med et lignende bilde og juster trinnene tilsvarende:
Først begynner vi å designe appens grensesnitt. Lag en ny fil (Kontroll-N) med lerretstørrelse 640 px av 1136 px, klikk deretter OK.
Hvis du i stedet allerede har et appgrensesnitt designet, kan du åpne det i Photoshop og deretter hoppe til Tap del av denne opplæringen.
Klikk Vis> Ny guide å lage ny guide, som vil hjelpe oss med å plassere GUI-elementer nøyaktig. Sett den til vertikal med posisjon 15 px.
Legg til en annen vertikal guide på hver side av lerretet med 15 px avstand mellom hver guide.
Tegn en annen guide, denne gangen horisontalt på 40 px, 128 px, og 220 px.
Legg til en statuslinje på den øvre delen av lerretet ditt. Hvis du trenger detaljerte instruksjoner om det, sjekk ut statuslinjen delen av vår tidligere opplæring Hvordan lage en iOS 7 e-postapp i Photoshop.
Deretter lager et nytt lag, og velg deretter andre seksjoner og fyll deretter en grå farge, # 2c3137.
Legg til appens titteltekst øverst i grensesnittet.
Legg til en logo i tittelen. Jeg har bare tegnet noen enkle rektangler for logoen, men hvis du har et eksisterende appikon, kan du bare importere det til et nytt lag.
Tegn et forstørrelsesikon ved hjelp av en kombinasjon av to sirkelformer og et avrundet rektangel, med samme farge som applogoen. Plasser den på høyre side av appen.
På den andre siden tegner du fire avrundede rektangler for alternativikonet.
Lag et nytt lag med en rektangelseksjon som passer under tittellinjen. Fyll den neste delen med en grå farge, akkurat som forrige del.
Legg til en lagmaske på laget, og legg deretter til en svart til hvit gradient til bunnen er bleknet.
Legg til en meny ved hjelp av Typeverktøy, inneholder nyhetskategorier. Still inn den første menyen - i dette tilfellet, Alle alternativ - å være fet, for å indikere at kategorien er aktiv. Dupliser det (Kontroll-J) og sett deretter annen meny - i dette tilfellet, Sport-å være modig, igjen for å indikere hvilken kategori som er valgt.
Nå, fra lag panel, sett inn Sport Meny opacity til 0% å gjemme det, som vi vil ha Alle kategori for å være fet først.
Legg til en tynn pil for menynavigasjon, laget av avrundede rektangler.
Legg til en annen pil på den andre siden.
Fyll resten av grensesnittet med den grå fargen. Sørg for å sette denne bakgrunnen under alle GUI-elementene.
Tegn et lysegrå rektangel for bakgrunnen for den enkelte nyhetsseksjonen.
Søke om Stroke, Inner Glow, og Ytre glød for å legge til mer kontrast til nyhetsområdet. Dobbeltklikk laget, og bruk deretter følgende innstillinger fra skjermbildene nedenfor:
Tegn et hvitt avrundet rektangel på den øverste delen av forrige form. Vi vil sette nyhetsbilde her.
Søke om Indre glød inn i den hvite formen med følgende innstillinger:
Velg et bilde fra Tuts + Stock Photo-settet du tidligere lastet ned, eller andre bilder du vil bruke, og plasser den som dekker det hvite avrundede rektangelformet.
Truffet Kontroll-Alt-G å konvertere valgt fotolag til en Clipping Mask. Bildet vil automatisk gå inn i laget bak det. Og her ser du det: Et perfekt plassert bilde på toppen av det enkelte nyhetsområdet.
Legg til tekst for nyhetsinnholdet. Pass på at du legger til kontrast til nyhetsteksten, slik at du får en bedre leserfaring med varierende skrifttype, farge og størrelse.
La oss legge til ikoner i nyhetselementdesignen. Tegn to små avrundede rektangler uten Fylle og 1 pt hvitt slag.
Dobbeltklikk laget, og legg deretter til lagestil Fargeoverlegg. Bruk # 708196 for sin farge.
Gjenta tidligere prosess, men denne gangen bruker en kombinasjon av et avrundet rektangel og et rektangel.
Legg til en liten sirkelform. Nå har vi et tagikon. Søt!
Så langt er dette vårt appdesign med 100% forstørrelse.
Legg til andre individuelle nyhetsartikler i appen ved å duplisere nyhetselementlagene, tilpasse dem på riktig måte.
Legg til større nyhetsområde. Dette vil bli vist når en individuell nyhet er valgt.
Sett alle de enkelte nyhetselementene og store nyhetshistoriene i separate laggrupper. Du vil forsikre deg om at hvert lag er nøye plassert i en laggruppe i henhold til elementet.
For eksempel vil du ha hvert lag som gjorde det første individuelle nyhetsseksjonen plassert sammen i en laggruppe, og elementene for nyhetsartikler i fullskjerm i andre grupper. Dette vil hjelpe deg å jobbe lettere mens du gjør animasjonen.
For nå vil vi ikke bruke denne store nyhetsseksjonen. Så setter du Opacity til 0%.
Vi må nå utforme trykkindikatoren. Lag en ny laggruppe og gi den navnet springen. Deretter tegner du en hvit sirkelform. Sett sin opacity til 50%.
Dupliser sirkelformen ved å trykke Kontroll-J. Gjør det større, sett hjerneslag til 3 pt med en hvit farge, og fjern Fylle farge.
Legg til en annen sirkelform, denne gangen tynnere. Angi strekstørrelse til 2 pt.
Skjul alle lagene inne i tapelaggruppen vi nettopp har gjort, da du ikke vil at kranene skal dukke opp når brukergrensesnittet er lastet inn, men i stedet vil bare vise dem når animasjonen er festet til overgang til et valgt element.
Nå er vi endelig klare til å begynne å bygge vår UI-animasjon. Åpne Tidslinje panel og deretter lage en ny ramme.
Lag en ny ramme.
Nå er det på tide å avsløre trykklagsgruppen. Når du viser en rullende scene, skjul de to strøkene, og vi skal bruke denne tilstanden for å indikere rullebevegelse. Det vil virke mer som et kontinuerlig slag, mens de ytre strokede kretsene gir et krusningsutseende mer konsistent med et enkelt trykk for å velge et element.
Endre varigheten til 1 sekund for første ramme og 0,2 sekunder for andre ramme.
Legg til en annen ramme.
Aktiver Tap laggruppe og alle nyhetsnettlagene. Bruk Flytteverktøy å flytte dem opp i listen over lag.
For å automatisk lage en jevn animasjon mellom nåværende og forrige ramme, klikk Tween fra Tidslinje panelmenyen.
Sett tween til 5 for den ekstra rammen.
Nå har vi en animasjon av nyhetsruten som beveger seg oppover på hver ramme.
Hvis du tror at animasjonen er for rask, kan du gjøre det langsommere ved å velge alle rammene og angi varigheten til 0,2 sekunder.
Test animasjonen ved å klikke på avspillingsikonet i Tidslinje panel. Ikke glem å sette animasjonen til For alltid; På denne måten er animasjonen sløyfet.
Vår nåværende animasjon inneholder nyhetsnettverket som beveger seg oppover. I neste ramme må vi sette den tilbake til forrige tilstand slik at den fortsetter sømløst med den første rammen. For å gjøre dette, kopierer du den andre rammen og limer den inn på siste posisjon ved å velge Lim inn etter valg i dialogboksen.
Påfør Tween kommandoen igjen for å lage en ny animasjon mellom siste og neste til siste rammer.
Legg til en ny ramme og skjul trykkindikatoren.
Så langt er dette animasjonen vi får, noe som gir oss et grunnleggende rullende brukergrensesnitt.
Nå er det på tide å animere valget av en lenke i menyen. Først må du lage en ny ramme. I denne rammen angir du opacity tekstmeny med valgt fet variant av Alle fra menyen satt til 0% og Sport'svalgt variants gjennomsiktighet satt til 100%.
Aktiver Tap-laggruppen og avslør alle lagene. Endre rammevarighet til 0,2 sekunder.
Lag en ny ramme med en varighet på 0,1 sekunder. Denne gangen skjuler den tynneste sirkelsirkelen.
Legg til en annen ramme og skjul den neste kretsede sirkelen.
Legg til en ny ramme og skjul tapelaggruppen.
Lag en ny ramme og sett deretter opacity av hver nyhetshistorie i rutenettet uten idrettsmerket til 0%.
Fortsett i denne rammen, dra de individuelle sportsnyhetshistoriene oppover i rutenettet og fyll tomme plasser over dem.
Tween mellom nåværende ramme og forrige. For raskere animasjon, sett lagt til rammer til 3.
Angi varighet i den siste rammen til 2 sekunder.
For denne trykk er dette animasjonen vi har.
Deretter skal vi velge en av nyhetene og avsløre den i fullskjerm. Først må du lage ny ramme med varighet 0,2 sekunder og avslør deretter alle lagene i Tap-laggruppen.
Legg til ny ramme og sett deretter varigheten til 0,1 sekunder. Skjul den tynneste sirkelslag.
Legg til en annen ramme og deretter skjul den neste kretsede sirkelen.
Legg til en annen ramme med varighet 0,1 sekunder. Skjul Tap-laggruppen, og lag en ny ramme. Avslør den store nyhetsseksjonen vi laget tidligere i Seksjon 1 Trinn 28 ved å sette sin opacity til 100%. Skjul det lille nyhetsnettverket ved å sette det opacity til 0%.
Legg til mellom animasjon mellom den nåværende rammen og de forrige.
Dette er hva vi har for denne animasjonen.
Fra Tidslinje panel, klikk Flate rammer inn i lag.
Hver ramme blir omgjort til et flatt lag. Hvis du har 33 rammer, får du også 33 flate lag: lag Ramme 1 hentet fra innholdet i ramme 1, lag Ramme 2 tatt fra ramme 2, og så videre.
Velg alle rammelagene i lag panel.
Dra lagene på iPhone-bildet du lastet ned tidligere.
I Tidslinje panel, velg Lag ramme animasjon og klikk deretter Ny ramme knapp.
Pass på at alle lagene fortsatt er valgt. Truffet Kontroll-T å utføre en transformasjon. Holde Styre og dra deretter hvert hjørne og legg dem på skjermhjørnet.
Lag en ny ramme for hvert lag. Legg lag Ramme 1 i den første rammen, lag Ramme 2 i andre ramme, lag Ramme 3 i tredje ramme, og så videre. Du vil også matche varigheten for hver av rammen. Pass på å sette sløyfen til For alltid, så animasjonen vil fortsette å løse.
Se på bildet nedenfor for et eksempel. Lag Ramme 23 er avslørt på ramme 23. Lag Ramme 25 er avslørt på ramme 25, og så videre. Fortsett dette for hver ramme.
Det er på tide å eksportere resultatet som animert GIF-fil. Å velge Lagre for web i Fil-menyen, og velg GIF som filtype. Spill av med tilgjengelige innstillinger for å få optimal filstørrelse. Test animasjonsresultatet ved å klikke på avspillingsknappen. Pass på å sette den Looping Options til For alltid.
Og det er det: du har designet et demo-app-brukergrensesnitt, animert det, og legg animasjonen inne i et iPhone-bilde for å få animasjonen til å se ut som om den kjører på en ekte enhet.
Jeg håper du fant denne opplæringen nyttig. Du kan justere trinnene som følger med for å jobbe med alle typer apper du vil demo, og kan bruke et annet enhetbilde for å vise frem, si en nettbrettapp eller et nettsted. Du kan også prøve andre typer multi-touch-interaksjon i den endelige presentasjonen, for eksempel tilt-scrolling eller pinch-to-zoom, hvis du endrer animasjonene.
Hvis du lager din egen app-demo-animasjon ved hjelp av denne opplæringen, vil vi gjerne se dem i kommentarene nedenfor!
Accentsconagua