Denne opplæringen tar sikte på å være en guide for å presentere en mer dynamisk utvalg av grensesnitt design, viser atferd som applikasjonen vil ha når den er gjennomført.

Det er flere fordeler med å lage en animert versjon før implementere den i et programmeringsspråk, her er noen:

Time. Det er tydelig at tiden for å implementere noen design (web, Interface, Mobile App) inn i et programmeringsspråk er veldig stort, har en video sample stedet vil hjelpe kunden til å få et bedre inntrykk av hvordan programmet vil fungere på sin endelige miljø og vil hjelpe deg å spare utviklingstid. Som du vil se i denne opplæringen, har en animert versjon av Photoshop design er ikke komplisert i det hele tatt, og det kan gjøres i en time eller mindre.

Med det i tankene, la oss gå videre med dagens tutorial.

Først vil vi designe en nyhetsleser iPad App fra scratch med Photoshop, så vil vi animere oppførselen rulle trau nyhetsfeeder både vertikalt og horisontalt, og til slutt åpne en artikkel i et popup-vindu. Sa jeg nevne at vi bare vil bruke Photoshop for hele prosessen?

Siden dette ikke er en grunnleggende opplæringen, vil jeg anta at du har en grunnleggende nivå av forståelse for Photoshops verktøy og prosesser, som å lage klipping Masker, Vector og lagmasker, og enda viktigere, smarte objekter. Hvis du virkelig ønsker å gå gjennom denne opplæringen, og du er fortsatt en nybegynner, foreslår jeg at du skal lese et par artikler som beskriver disse fagene først

svaret på alle dine problemer. Maskering - Basix

Hva er en Clipping Mask da?

Vær smart og bruke Smart Objects - Basix

Nå, la oss få det i gang

Hver flott design start med blanke ark, denne gangen vil vi skape en 1400 x 1100px dokument RGB på 72ppi

Siden vi skaper et design for en iPad app, trenger vi å tegne en firkant for å avgrense arbeidsområdet av iPad-skjermen (1024 x 768 piksler). Du kan enkelt gjøre det ved å opprette et rektangel og bruke Transform Controls av Move Tool (V) klikk på ethvert hjørne og deretter på Options Panel på toppen skriver de ønskede dimensjoner på W og H-verdier. Deretter trykker du Kommando /Ctrl + A for å velge alle og fortsatt med Move Tool valgt justere boksen til absolutt midten ved å klikke på justeringsalternativene.

Så, når boksen er plassert på absolutt midten, tegne fire Guides rundt boksen, vil dette være vårt arbeidsområde, og den synlige delen av vår søknad. Fra nå og frem til slutten av denne opplæringen mellomrommet mellom disse guidene vil være "app området"

Nå, åpne og setter iPad Mal fra eiendelene, roter det til å plassere den i landskapsmodus og endre størrelse på det å gjøre det aktive området (skjerm) match med våre guider. Konvertere den til et smart objekt og gi den navnet "iPad". Deretter dobbeltklikker du på den smarte objektet miniatyr på Layers Panel et nytt vindu vil dukke opp med en redigerbar sett av lagene som tilsvarer den "iPad" smart objekt. Det sletter gråsone hvor grensesnittet vil bli plassert. Lagre .PSB fil, vil alle endringer bli automatisk oppdatert på hoveddokumentet

Nå, la oss legge til noen bakgrunn, først en rektangulær hvit bakgrunn bak den "iPad" Smart Object. Denne bakgrunnen bør plasseres mellom venstre og høyre Guides av app-området, kan du ringe laget "Bakgrunn" og sette den i en mappe som heter "App" fordi det er der vi vil sette hele app design. Så en stor gradient bakgrunn for hele dokumentet (# 121212 - # 434343).

Tegn en vektor rektangel mellom toppen grensen av app området ned til 80px inne i en ny gruppe som heter "Header". Gjelder følgende Layer Styles: a. Gradient Overlay (# 00345C - # 146592), en hvit (#FFFFFF) 1px Stroke, en 10px Drop Shadow og en Light Blue Indre skygge (# 0180C7)

De mobile enheter har nå svært vakre viser, vil det være en skam hvis vi ikke legge noen små detaljer til overskriften slik at den ser bedre ut. Først legger en blå Ellipse (# 1C79B4) på ​​venstre side av hodet, bruke en Gaussian Blur til det (det vil rastrere form), bruke noen radius, jeg prøver med 15px. Så Kommando /Ctrl + Klikk på Vector maske av Header rektangel, Kommando /Ctrl + Shift + jeg å invertere utvalget og trykk på Slett for å fjerne alle de ekstra blå glans. The, hvis du vil, kan du legge flere sirkler med forskjellige toner av blått og forskjellige uklarheter, legg dem på en gruppe som heter "Bubbles" og legg den til høyre for overskriften. Deretter kan du enten rastrere det og gjenta prosessen med den blå glød til venstre, eller du kan konvertere den til et smart objekt og bruke en vektormaske for å skjule overstiger

Jeg vil hoppe over prosessen med å lage en utdypet logo for søknaden vår, jeg bare kalte den "News Reader" ved hjelp av den vakre skriften "Walkway Black" fra eiendelene. Jeg legger til en subtil skygge og en Gradient Overlay med faktiske overlegg som Blending Mode. Plasser logo på venstre side av hodet og i en gruppe som heter "Logo" inne i "Header" -mappen

Tegn en smal svart ellipse, deretter bruke en 5px Radius Gaussian Blur til det. Deretter bruker Rectangular Marquee verktøyet, velger halvparten av uskarpt ellipse og slette den. Deretter legger en 1px tykk linje til venstre for skygge, endelig legge til en lagmaske og fyll den med et reflektert Svart - Hvit gradient. Sett alt inne i "Logo" -mappen

Legg til en mappe som heter "Søk Innhold" innsiden med de avrundede rektangelverktøyet, legge et hvitt rektangel (50 piksler grensen radius). Legg Stiler vist på bildene nedenfor (en Indre skygge og en Gradient Stroke) for å gi den en subtil letter effekt. Deretter legger en grå (#ABABAB) Forstørrer ikon og et søk tekst, ved hjelp Gray også, "Helvetica Neue" som skrifttype og størrelse. 16pt

La oss legge bunnmenyen. Tegn på bunnen av App området et svart rektangel (50 piksler høyde). Påfør deretter en blank Gradient Overlay som viser bildet nedenfor

Over header bør det være en bar med standard iPad informasjon (Signal, klokke og batteri). Selv når dette området ikke er for stor, kan det føre til en betydelig reduksjon i vår app området, så det er lurt å legge det til. Ned "Header" mappe noen piksler nedenfor, og dobbeltklikk på "iPad" Smart Object og legge en svart stripe eller selve toppen bar fra iPad eiendelen. Spar Smart Object og plasser "Header" -mappen på sin rette plass

En fin detalj for enhver applikasjon er en ren og pen bakgrunn. for dette ved å opprette en mappe som heter "App Bakgrunn". Det tegner et grått rektangel (# 797979) akkurat innenfor grensene av app-området. Deretter går du til Filter > Gjengi > Skyer og gjengi noen svart /hvit skyer inn et nytt lag over den grå bakgrunnen. Deretter går du til Filter > Gjengi > Fibre ... og øke det Styrke og Vibrance som du vil. Deretter går du til Filter > Blur > Motion Blur og sett Angle til 90 grader og Avstand til 999. Til slutt slette alle fibrene utenfor app området og sette sitt Opacity til 25%

Nå har vi på bakgrunn av vår app gjort, er det på tide å gå videre med innholdet

Siden dette programmet vil ha flere nyhetsfeeder, vil vi legge dem i ulike rader. Hver rad skal inneholde et sett med de siste nyhetene fra bestemte nettsteder eller RSS feed. Vi vil begynne å legge en enkelt rad, og deretter kopiere den så mange ganger som nødvendig.

Hold lag organisert, opprette en gruppe som heter "feed" og plassere den mellom "Bottom Bar" og "App Bakgrunn "mapper. Rekkefølgen på mappene er svært viktig å ha den endelige animasjonen fungerer.

Tegn et hvitt rektangel (200px høyde) og plassere den på toppen av app-området, ved siden av "Header". For boksen skyggen tegne et svart rektangel bak den hvite, name it "Shadow" og bruke en 4px Gaussian Blur til det. Så ved hjelp av Warp Tools of Free Transform Controls, renning den svarte firkanten som viser sett av skjermbildene nedenfor. Til slutt, endre "Shadow" Opacity til 50%

La oss legge til en fane der vi vil sette nyhetsstrøm navnet. Tegn en 5px Corner Radius Avrundet rektangel (#FFFFFF) og bruke Direct Selection Tool (A) flytter de nederste høyre poeng av rektangelet noen piksler riktige. Påfør deretter en subtil Skygge som viser skjermbildet nedenfor. Plasser lag bak "Bg White" lag

Siden vår bakgrunn fortsatt ser litt teit, la oss øke det dyp følelse å legge til en subtil Gradient legget til "BG White" lag (#BEBEBE - #FFFFFF). En fin detalj er å legge en 1px Hvit Stroke til bakgrunnslaget å skape en fin gap mellom boksen og dens skygge

Dupliser "Tab "lag, plassere kopien bak den opprinnelige. Endre forgrunnen til blå (# 014373) og dens Stroke til (# 016CB4), gjenta prosessen, men og sette en mørkere variant av blå (# 011A2E og # 0B4B79 for Stroke).

Legg tittelen på nyhetsstrøm bruke "Helvetica Neue 75 dristig" å bruke denne forgrunnen color: # 034170. Du kan legge til en Favicon neste t tittelen hvis du vil

Legg til flere ikoner over kategoriene, "Refresh" og "Configure" (jeg er m ved hjelp av ikonene satt nevnt på eiendelene). Påfør en Gradient Overlay og en dråpe Shadows med verdiene som vises på skjermbildet under

Nå legger en fane for "Close" -knappen.

Nå har vi alle bakgrunns lagene skapte (inne i en mappe som heter "feed bakgrunn"), og tittelen. og ikonet utenfor. Nå opprette en rektangulær vektor rektangel over "feed Bakgrunn" heter "Mask". Dette vil være en fremtidig maske for å skjule synligheten av settet av News at dette fôret vil ha. Men ikke bekymre deg om det ennå, bare endre det Blending Mode til Multipliser

Hver rad i vår app, vil inneholde flere artikler, la oss legge til ett (jeg bruker flere artikler av tuts + nettverk som prøver). Plasser et rektangulært bilde mellom "Mask" lag og "tittel" lag - se skjermbildet nedenfor. Gjenta prosessen beskrevet på trinn 8 for å skape en skygge skillelinjen, og endre det Opacity til 50%

La oss legge til en tittel for vår artikkel, en linje av metadata og et kort avsnitt med tekst. Se følgende skjermbilde for å se den foreslåtte typografi og farger. Endelig legge alle lagene i forbindelse med en artikkel i en mappe som heter "Artikkel"

Legg til flere artikler, før det fyller hele raden. Når du går tom for plass, velger alle artikkelen mappene du nettopp opprettet (Kommando /Ctrl + Shift på mappen miniatyrer på lag panel) og dra dem til venstre som er nødvendig for å legge til en annen artikkel til høyre. Legg til så mange artikler som du vil, til slutt dra alle artikler tilbake til utgangsposisjon (med den første artikkelen venstrejustert med fôret bakgrunnen)

Ha alle artiklene inn i en ny gruppe som heter "Artikler". Kontroller at mappen kan dras til venstre og høyre som viser bildet nedenfor. Deretter konvertere Folder inn et smart objekt. Deretter konvertere "Mask" lag i en Clipping Mask (Tilvalg /Alt klikk mellom "Artikler" Smart Object og "Mask" lag). Nå, prøv å dra "Artikler" objekt venstre og høyre, skal "Mask" lag skjule artiklene utenfor Mask området. På dette punktet dette nyhetsstrøm faktisk har alle lagene som er nødvendige for å animere sin oppførsel.

Nå legger mange rader med nyhetsfeeder, og sette hver rad i en mappe med sitt respektive navn: "Feed1", "Feed2", etc. Deretter legger alle feeds inn i en ny mappe som heter rett og slett "Feeds". Du kan kopiere bakgrunnen og lage forskjellige artikler innenfor hver enkelt, men IKKE duplisere "Artikler" smart objekt fra første feed, bare lage en fra bunnen av. Sikre at hele "Feeds" -mappen er lett flyttbare fra topp til bunn, og vice-versa. Du kan også legge til et par feeds med bare tekst på dem.

Dra alle "Feeds" fra bunn til topp, og la synlig bare de to nederste.

På "Bottom Bar" -mappen (trinn 11) legger følgende navigeringsikonene: "Home", "Refresh", "Innstillinger", "Feeds" fra eiendelene. Legg hvert ikon navn under ikonet ved å bruke "Helvetica Neue 75 Bold" (# 818181). Da gjelder til ikonet Layer Styles som vises på skjermen under. Til slutt, opprette en ny stil for en Valgt /Aktiv-ikonet

Legg til en gjennomsiktig boks bak det og endre navnet forgrunnsfargen til hvit. Du bør få noe sånt i bunnen av skjermbildet under ..

Inne i "Feeds" -mappen, legge til en knapp (Avrundet rektangel 5px radius) kopiere og lime inn lag stilen på bunnlinjen ikoner hvis du ønsker å spare tid. Deretter legge til ordet "Legg feed" med "Helvetica Neue 75 Bold" (# 828282) og justere den til midten av knappen

Strukturen av lagene så langt, bør inneholde en "iPad" smart objekt, "Header" the "Bottom Bar", den "Feeds" mappe og "App Bakgrunn".

Nå kan du legge et nytt sett med Layers inn i en mappe som heter nettopp "Feed" mellom "Bottom Bar" -mappen og "Feeds" -mappen. Denne mappen vil inneholde en artikkel, lage en hvit bakgrunn, og legg til litt innhold (tittel, Thumbnail og et kort avsnitt med tekst) på den. Tegn en stor svart firkant rett innenfor grensene av app-området og ned sin Opacity til 75%. Deretter Senter Juster det hvite området. Spiller ingen rolle om innholdet du har lagt stiger app området ikke, faktisk vil vi animere en bokrull effekt for dette innholdet. La oss gå videre

Først organisere lag, navngi svart bakgrunn "BG" og ordne det til bunns. Deretter satte alle tekstlag, miniatyrbilder og bilder i en mappe som heter "Ny" eller "Artikkel".

Ved hjelp av Ellipse Tool, tegne en hvit sirkel i øvre høyre hjørne av mateområdet og bruke en subtil Drop Shadow til det. Lim inn (eller tegne) en fin "X" så nær knappen, legge alle disse lagene i en mappe som heter "Close".

Velg "New" -mappen og konvertere den til et smart objekt, deretter opprette en rektangel, over den hvite bakgrunnen og gi den navnet "Mask" (det vises i svart på skjermbilde) og bruke det som en Clipping Mask for "Ny" smart objekt. Deretter bruker Move Tool (V) dra objektet fra topp til bunn, og vice-versa for å være sikker på at alt ser bra ut. Endelig legge artikkelen til sin opprinnelige posisjon (venstre - topp justert)

Før du går fremover på dette, er viktig å ha alle lagene organisert og smarte objekter riktig opprettet. Lagstruktur bør være dette, fra topp til bunn: "iPad" smart objekt, deretter "Header", "Bottom Bar", "feed", "Feeds" og "App Bakgrunn" mapper, og til slutt den generelle "BG" lag .

Da er det viktig at du har opprettet "Artikler" smart objekt fra den første raden av feeds (trinn 26), fordi et smart objekt inneholder en komplett tidslinje, og du kan reir animerte overganger i mange nivåer (jeg vet det høres forvirrende, men det vil være fornuftig i et par skritt).

Du trenger en anstendig CPU og grafikkort for å gjengi animasjon, så tålmodighet er en stor ingrediens her.

Husk:. Vi vil animere oppførselen til app, bør du alltid huske på prosessen fra å ta en titt på nyhetsfeeder, bla gjennom artiklene og til slutt åpne en artikkel å lese det

Gå til Vindu > Animasjon. Dette panelet inneholder en tidslinje hvor du kan sette nøkkelbilder til å animere overganger mellom Post ion, Opacity, og Layer Styles. I denne opplæringen vil vi animere posisjon og Opacity. Dette området er ikke så annerledes enn andre videoredigeringsprogrammer som After Effects eller Premiere, hvis du er en nybegynner er det et flott utgangspunkt.

La oss starte den morsomme delen av denne opplæringen

Vi vil begynne å skjule en mappe som ikke skal lastes fra begynnelsen! . Popup fôr bør forbli skjult til en handling som gjør det synlig. For dette, på animasjonspanelet, se etter "Feed" mappen og klikker over den lille trekanten ved siden av det å utvide animasjon alternativer. Deretter flytter den trekantede glideren på Tidslinjen og plassere den på begynnelsen av animasjon. Klikk på den lille Stop Watch-ikonet ved siden av Opacity alternativet under "feed" -mappen, som hvordan du oppretter en Keyframe. Når du har keyframe opprettet, kan du bruke alle endringene av de egenskapene du ønsker, i dette tilfellet, vil vi redusere "feed" -mappen Opacity ned til 0%. Og det er det, denne mappen vil forbli skjult inntil vi gjør det synlig igjen

Bla gjennom mappene dine på Animation Panel og funnet "Artikler" Smart Object av "Strøm en" rad og utvide sine alternativer. - Dra handler på tidslinjen litt til høyre, ved siden av 1s (ett sekund), klikk deretter på Stop Watch-ikonet for å lage den første Keyframe. Sikre på dette punktet at plasseringen av objektet er igjen på linje med fôr rad bakgrunnen. - Dra behandleren ved siden 4s på Tidslinjen og klikk på den lille gule firkanten til venstre for posisjonsalternativet (mellom de neste /prev pilene) for å opprette en ny Keyframe. Nå, ved hjelp av Move Tool, dra "Artikler" Smart Object til venstre, for å få objektet, høyrejusteres med fôret rad bakgrunnen. - Flytt behandleren til 5s på Tidslinjen og sette inn en ny Keyframe (husk å klikke det lille gule firkanten) og bare holde det er posisjon (ikke flytte noe). -. Til slutt flytter behandleren ved siden 7s på Tidslinjen, opprette en ny keyframe og bruke Move Tool, slå tilbake "Artikler" Object til sin opprinnelige posisjon, venstrejustert til fôret bakgrunnen

Hvis du vil, kan du forhåndsvise denne lille delen av animasjonen prosessen ved å gå til Fil > Export > Video Preview. Det er to handlers på venstre og høyre områder av tidslinjen som du kan dra for å redusere arbeidsområdet, noe som gjør gjengivelsen raskere

Begynner å gi mening til høyre, la oss gå videre. Nå skal vi animere hele "Feeds" -mappen. Siden vi ikke kan direkte animere Plassering av en mappe, vil vi trenge å konvertere den til et smart objekt, men hva skjer med den fine animasjonen vi nettopp gjorde med artiklene? Når du konvertere hele mappen til et smart objekt all sin tidslinje og alle sine nøkkel holder det samme. Tidslinjen er unik uansett, hvis det er en overgangseffekt på den tredje sekund av animasjon til et smart objekt, vil det fortsatt være synlig i alle sine overordnede filer og tidslinjer. Du kan teste det ved å eksportere animasjonen med Smart Object i stedet for mappen, og du vil se noen forskjell.

For å maskere det riktig (for å unngå å se en rekke artikler i bevegelse bak iPad) Opprett en Kopi av "BG" lag, legg den over "Feeds" objekt og bruke en Vector maske, gjør bare synlig app området (1024x768px)

Velg "Feeds" Smart Object og åpne animasjonspanelet. Det flytte Tidslinje behandleren ved siden av 7s, skape en posisjon keyframe, sikre feeds er justert til toppen. Deretter flytter behandleren ved siden av 11s og skape en posisjon keyframe, der flytte hele objektet inntil bunn justert. Så på 14s på tidslinjen opprette en annen plassering keyframe, men ikke flytte objektet, bare la den på linje nederst, vil dette skape et Hold
effekt. Til slutt flytte tidslinjen behandleren ved siden av 15s og lage en keyframe, dra objektet til er topp justert igjen

Forhånds forrige animasjon skritt du bør ha noe sånt som dette:.