Share
Har du noen gang prøvd å forklare oppførselen til grensesnittene dine til kundene dine? Mange ganger er ord ikke nok til å vise hva designeren har i tankene når man leverer et stykke til sin kunde. I mobile applikasjoner, med både horisontale og vertikale ruller kombinert og animasjon eller overgangseffekter, er dette problemet enda større. Denne opplæringen vil vise deg hvordan du utformer et grensesnitt for en mobil applikasjon fra grunnen av i Photoshop, og viktigst av alt, vil du vise deg hvordan du presenterer en animasjon som beskriver oppførselen til søknaden for innsending til den endelige kunden. Er du klar? La oss komme i gang!
Følgende eiendeler ble brukt under produksjonen av denne opplæringen.
Denne opplæringen tar sikte på å være en veiledning for å presentere en mer dynamisk prøve av grensesnittdesignene dine, som viser atferden som appen vil ha når den er implementert.
Det er flere fordeler med å lage en animert versjon før du implementerer den i et programmeringsspråk, her er noen:
Med det i tankene, la oss gå videre med dagens veiledning.
Først vil vi designe en nyhetsleser iPad-app fra grunnen av med Photoshop, da vil vi animere oppførselen til å bla gjennom nyhetsfeedene både vertikalt og horisontalt og endelig åpne en artikkel i et popup-vindu. Nevnte jeg at vi bare vil bruke Photoshop for hele prosessen?
Siden dette ikke er en grunnleggende opplæring, vil jeg anta at du har et grunnleggende forståelsesnivå for Photoshops verktøy og prosesser, for eksempel å lage Clipping Masks, Vector og Layer Masks, og enda viktigere, Smart Objects. Hvis du virkelig vil gå gjennom denne opplæringen og du fremdeles er nybegynner, foreslår jeg at du leser et par artikler som beskriver disse fagene først.
Nå, la oss få det i gang!
Hver flott design starter med et blankt lerret, denne gangen vil vi lage et 1400 x 1100px dokument RGB på 72ppi.
Siden vi lager et design for en iPad-app, må vi tegne et firkant for å avgrense arbeidsområdet på iPad-skjermbildet (1024 x 768 px). Du kan enkelt gjøre det ved å opprette et rektangel og bruke Transform Controls of the Move Tool (V), klikk på et hvilket som helst hjørne, og deretter på Options panelet på toppen skrive de ønskede dimensjonene på W og H-verdiene. Deretter trykker du på Command / Ctrl + A for å velge alt og fortsatt med Flyttverktøyet valgt, juster boksen til absolutt midten ved å klikke på justeringsalternativene.
Deretter, når boksen er plassert på den absolutte midten, tegner du fire guider rundt boksen, dette vil være vårt arbeidsområde og den synlige delen av søknaden vår. Fra nå til slutten av denne opplæringen vil plassen mellom disse guidene være "app-området".
Nå åpner du iPad-malen fra eiendelene, roterer den for å plassere den i liggende modus og endre størrelsen på den for å gjøre det aktive området (skjermen) i samsvar med våre guider. Konverter det til et smart objekt, og navngi det "iPad". Dobbeltklikk deretter på smarte objektets miniatyr på Layoutpanelet, et nytt vindu vil vises med et redigerbart sett med lag som svarer til "iPad" smart objekt. Det sletter det grå området der grensesnittet vil bli plassert. Lagre .PSB-filen, alle endringene blir automatisk oppdatert på hoveddokumentet.
La oss nå legge til noen bakgrunner, først en rektangulær hvit bakgrunn bak "iPad" Smart Object. Denne bakgrunnen bør plasseres mellom venstre og høyre guider i appområdet, du kan ringe laget "Bakgrunn" og sette det inne i en mappe som heter "App" fordi det er der vi skal legge hele appdesignet. Deretter en stor gradient bakgrunn for hele dokumentet (# 121212 - # 434343).
Tegn et vektorrektangel mellom den øverste grensen til appområdet ned til 80px i en ny gruppe med tittelen "Header". Bruk følgende lagstil: En gradientoverlegg (# 00345C - # 146592), en hvit (#FFFFFF) 1px slag, en 10px dropshadow og en lyseblå indre skygge (# 0180C7).
De mobile enhetene har nå veldig vakre skjermer, det vil være synd hvis vi ikke legger til noen små detaljer i overskriften for å gjøre det ser bedre ut. Først legger du til en blå elefant (# 1C79B4) på venstre side av toppteksten, bruker en Gaussian Blur til den (den vil rasterisere formen), bruk en hvilken som helst radius, jeg prøver med 15px. Deretter Kommandoer / Ctrl + Klikk på Vector-masken på topptekstrektangel, Kommando / Ctrl + Skift + I for å vende om valget og trykk Slett for å fjerne all ekstra blå glans. Hvis du vil, kan du legge til flere sirkler ved hjelp av forskjellige toner med blå og forskjellige opaciteter, sett dem på en gruppe som heter "Bubbles" og plasser den til høyre for toppteksten. Deretter kan du enten rasterisere den og gjenta prosessen med den blå gløden til venstre, eller du kan konvertere den til et smart objekt og bruke en vektormaske for å skjule det overskredende.
Jeg vil hoppe over prosessen med å lage en utdypet logo for søknaden vår, jeg nevner bare det "News Reader" ved hjelp av den vakre fonten "Walkway Black" fra eiendelene. Jeg legger til en subtil dropshadow og et gradientoverlegg med faktisk overlegg som blandemodus. Plasser logoen på venstre side av toppteksten og inne i en gruppe med navnet "Logo" i "Header" -mappen.
Tegn en smal svart Ellipse, og bruk deretter en 5px Radius Gaussian Blur til den. Deretter bruker du Rectangular Marquee-verktøyet, velg halvparten av den uskarpe ellipsen og slett den. Deretter legger du til en 1 x tykk linje til venstre for skyggen, til slutt legger du til en lagmaske og fyller den med en reflektert sort-hvit gradient. Sett alt inne i "Logo" -mappen.
Legg til en mappe med tittelen "Søk innhold" inne i det runde rektangelverktøyet, legg til et hvitt rektangel (50 px kantlinje). Legg til stilene som vises på bildene under (en indre skygge og en gradvis strekk) for å gi den en subtil letterpress-effekt. Deretter legger du til et grått (#ABABAB) forstørrelsesikon og en søketekst, også ved hjelp av grå, "Helvetica Neue" som skriftfarge og Størrelse: 16pt.
Legg til et nytt avrundet rektangel for søkeknappen (5px radius) til høyre for søkeboksen. Deretter legger du til teksten til knappen "Avansert søk" med "Helvetica Neue 75 fet skrift" og hvit forgrunn.
Deretter legger du til knappen et glatt gradvis overlegg som viser bildet under, og et Gradient-slag. Legg deretter til en kommando og Emboss-stil som viser bildet nedenfor. Sett både søkeboks og knapp inne i en ny gruppe kalt "Søk".
La oss legge til nederste menylinje. Tegn nederst i App-området en svart rektangel (50px høyde). Deretter skal du bruke et blankt overtoningsoverlegg som viser bildet nedenfor.
Over overskriften bør det være en bar med standard iPad-informasjon (Signal, klokke og batteri). Selv når dette området ikke er for stort, kan det føre til en betydelig reduksjon i appområdet vårt, så det er lurt å legge til det. Ned "Header" -mappen et par piksler under, dobbeltklikk deretter på "iPad" Smart Object og legg til en svart stripe eller den faktiske topplinjen fra iPad-aktivet. Lagre det smarte objektet og plasser «Header» -mappen på riktig sted.
En fin touch for enhver applikasjon er en ren og flott utseende. For dette lager du en mappe med navnet "App Background". Der tegner et grått rektangel (# 797979) akkurat innenfor grensen til appområdet. Deretter går du til Filter> Render> Clouds og gjør noen svarte / hvite skyer til et nytt lag over den grå bakgrunnen. Deretter går du til Filter> Render> Fibers? og øk det er styrke og vibrasjon som du vil. Deretter går du til Filter> Blur> Motion Blur og setter vinkelen til 90 grader og Avstanden til 999. Slett endelig alle fibrene utenfor appområdet og sett Opacity til 25%.
Som en endelig berøring legger du til en grå sirkel over fibrene (Opacity 30% eller mindre). Og bruk en Gaussian Blur rundt 45 - 50px Radius. Slett deretter gløden utenfor appområdet. Hvis du ikke vil slette eller beskjære disse lagene, kan du konvertere laget Grå "Bakgrunn" til en Clipping Mask ved å klikke mellom tolagsminaturene i Lagpanelet og holde Alternativ / Alt-klikk.
Nå har vi bakgrunnen til vår app ferdig, det er på tide å gå videre med innholdet.
Siden denne applikasjonen vil ha flere nyhetsfeeds, legger vi til dem i ulike rader. Hver rad vil inneholde et sett med de siste nyhetene om bestemte nettsider eller RSS-feed. Vi vil begynne å legge til en enkelt rad, og deretter kopiere den så mange ganger som nødvendig.
Hold lagene dine organisert, opprett en gruppe som heter "Feed" og plasser den mellom "Bottom Bar" og "App Background" -mappene. Ordren til mappene er svært viktig for at den endelige animasjonen fungerer som den skal.
Tegn en hvit rektangel (200px høyde) og legg den på toppen av appområdet, ved siden av "Header". For boksskyggen tegne et svart rektangel bak den hvite, nevner du "Shadow" og bruker en 4px Gaussian Blur til den. Deretter bruker du Warp Tools of Free Transform Controls, kryp det svarte rektangelet som viser settet av skjermbilder nedenfor. Endelig endrer du "Skygge" Opacity til 50%.
La oss legge til en fane der vi vil sette nyhetsfeednavnet. Tegn en 5px hjørne radius avrundet rektangel (#FFFFFF), og bruk Direct Selection Tool (A) flytte de nederste høyre punktene i rektangelet noen få piksler til høyre. Deretter gjelder en subtil Drop Shadow som viser skjermbildet nedenfor. Plasser laget bak "Bg White" -laget.
Siden bakgrunnen vår fortsatt ser litt ut, la vi øke den dype følelsen, og legge til et subtilt gradientoverlegg til "BG White" -laget (#BEBEBE - #FFFFFF). En fin touch er å legge til en 1px White Stroke til bakgrunnslaget for å skape et fint mellomrom mellom boksen og skyggen.
Dupliser "Tab" -laget, plasser kopien bak originalen. Endre forgrunnen til blå (# 014373) og dens Stroke til (# 016CB4), gjenta prosessen, men sett inn en mørkere variant av blå (# 011A2E og # 0B4B79 for Stroke).
Legg til tittelen på nyhetsfeeden ved å bruke "Helvetica Neue 75 bold" ved å bruke denne forgrunnsfargen: # 034170. Du kan legge til en Favicon neste t tittelen hvis du vil.
Legg til flere ikoner over kategoriene, "Oppdater" og "Konfigurer" (jeg bruker ikonene som er nevnt på eiendelene). Bruk en gradientoverlegg og en dropshadows med verdiene som vises på skjermbildet nedenfor.
Legg nå en fane for "Lukk" -knappen.
Nå har vi alle bakgrunnslagene opprettet (inne i en mappe som heter "Feed Background"), og tittelen og ikonet utenfor. Opprett nå en rektangulær vektorrektangel over "Feed Background" kalt "Mask". Dette vil bli en fremtidig maske for å skjule synligheten til settet av nyheter som denne innføringen vil ha. Men ikke bekymre deg om det ennå, bare endre det Blending Mode å Multiply.
Hver rad i vår app, inneholder flere artikler, la oss legge til en (jeg bruker flere artikler av tuts + nettverk som prøver). Sett et rektangulært bilde mellom "Mask" -laget og "Tittel" -lagene - se skjermbildet nedenfor. Gjenta prosessen beskrevet i trinn 8 for å skape en skygge divider, og endre dens opacity til 50%.
La oss legge til et tittel for vår artikkel, en linje med metadata og et kort stykke tekst. Se følgende skjermbilde for å se den foreslåtte typografien og farger. Endelig sett alle lagene relatert til en artikkel i en mappe med navnet "Artikkel".
Legg til flere artikler, til du fyller hele raden. Når du er tom for plass, velg alle artikkelmappene du nettopp har opprettet (Kommando / Ctrl + Skift i mappens miniatyrer på lagpanelet) og dra dem til venstre etter behov for å legge til en annen artikkel til høyre. Legg til så mange artikler som du vil, dra endelig alle artiklene tilbake til den opprinnelige posisjonen (med den første artikkelen igjen i samsvar med feed-bakgrunnen).
Sett alle artiklene inn i en ny gruppe som heter "Artikler". Kontroller at mappen kan bli trukket til venstre og høyre som vist bildet nedenfor. Deretter konverterer du mappen til et smart objekt. Deretter konverterer du "Mask" -laget til en Clipping Mask (Alternativ / Alt klikk mellom "Artikler" Smart Object og "Mask" -laget). Prøv nå å dra "Artikler" -objektet til venstre og høyre, "Mask" -laget skal gjemme artiklene utenfor maskområdet. På dette tidspunktet har denne nyhetsfeeden faktisk alle lagene som er nødvendige for å animere sin oppførsel.
Nå legger du til mange rader med nyhetsfeeder, og legger hver rad inn i en mappe med sitt respektive navn: "Feed1", "Feed2" osv. Legg deretter alle feeds inn i en ny mappe kalt bare "Feeds". Du kan duplisere bakgrunnen og lage forskjellige artikler innenfor hver enkelt, men IKKE duplikere "Artikkelen" smart objekt fra første feed, bare opprett en fra grunnen. Forsikre deg om at hele mappen "Feeds" er lett å drage fra topp til bunn og omvendt. Du kan til og med legge til et par strømmer med bare tekst på dem.
Dra alle "Feeds" fra bunn til topp, og legg synlig bare bunnen to.
Legg til følgende navigasjonsikoner: "Hjem", "Oppdater", "Innstillinger", "Feeds" fra eiendelene i "Bottom Bar" -mappen (Trinn 11). Legg til hvert ikonnavn under ikonet med "Helvetica Neue 75 Bold" (# 818181). Påfør deretter ikonet Lagstilene som vises på skjermen nedenfor. Endelig opprett en ny stil for et valgt / aktivt ikon.
Legg en gjennomsiktig boks bak den og endre navnet forgrunnsfarge til hvitt. Du bør få noe som nederst på skjermbildet nedenfor?
I mappen "Feeds" legger du til en knapp (avrundet rektangel 5px radius), kopier og lim inn lagestilen til de nederste linjepikene hvis du vil spare tid. Deretter legger du til ordet "Legg til feed" med "Helvetica Neue 75 Bold" (# 828282) og juster den til midten av knappen.
Strukturen til lagene dine så langt, bør inneholde et "iPad" smart objekt, "Header", "Bottom Bar", "Feeds" -mappen og "App Background".
Legg nå et nytt sett med Lag i en mappe som bare heter "Feed" mellom "Bottom Bar" -mappen og "Feeds" -mappen. Denne mappen vil inneholde en artikkel, opprette en hvit bakgrunn og legge til noe innhold (Tittel, Miniatyrbilde og et kort stykke tekst) på den. Tegn en stor svart rektangel rett innenfor grenser av appområdet og ned dens Opacity til 75%. Senter deretter Juster det hvite området. Det spiller ingen rolle om innholdet du la til, overstiger appområdet, faktisk vil vi animere en rulleeffekt for dette innholdet. La oss gå videre.
Organiser først lagene dine, navnet på den svarte bakgrunnen "BG" og ordne den til bunnen. Sett deretter alle tekstlagene, miniatyrbildene og bildene i en mappe med navnet "Ny" eller "Artikkel".
Bruk Ellipseverktøyet til å tegne en hvit sirkel i øverste høyre hjørne av innmatingsområdet og bruk en subtil Drop Shadow til den. Deretter limer du (eller tegner) en fin "X" som tett knapp, legg alle disse lagene i en mappe med navnet "Lukk".
Velg mappen "Ny" og konverter den til et smart objekt. Opprett deretter et annet rektangel, over den hvite bakgrunnen, og navnet "Mask" (det vises i svart på skjermbildet) og bruk det som en klipmaske for "Ny" "Smart Object. Deretter bruker du Flyttverktøyet (V), dra objektet fra topp til bunn og omvendt for å være sikker på at alt ser bra ut. Sett artikkelen til sin opprinnelige posisjon (venstrejustert).
Før du går videre på dette, er det viktig å ha alle lagene organisert og de smarte objektene er skapt. Lagstrukturen skal være denne, fra topp til bunn: "iPad" Smart Object, så "Header", "Bottom Bar", "Feed", "Feeds" og "App Background" -mappene, og til slutt det generelle "BG" -laget.
Da er det viktig at du har opprettet "Artikkelen" Smart Object fra den første raden med feeder (Trinn 26), fordi et smart objekt inneholder en komplett tidslinje, og du kan nest animerte overganger på mange nivåer (jeg vet at det høres forvirrende ut, men det vil fornuftig i et par trinn).
Du trenger en anstendig CPU og grafikkort for å gjøre animasjonen, så tålmodighet er en god ingrediens her.
Husk: Vi vil animere oppførselen til appen, du bør alltid huske prosessen fra å ta en titt på nyhetsfeedene, bla gjennom artiklene og til slutt åpne en artikkel for å lese den.
Gå til Vindu> Animasjon. Dette panelet inneholder en tidslinje hvor du kan sette nøkkelrammer for å animere overganger mellom Postion, 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 nybegynner, er det et flott utgangspunkt.
La oss starte den morsomme delen av denne opplæringen!
Vi vil begynne å gjemme en mappe som ikke skal lastes fra begynnelsen. Popup-strømmen bør forbli skjult til en handling gjør den synlig. For dette, på animasjonspanelet, se etter "Feed" -mappen og klikk over den lille treanten ved siden av den for å utvide animasjonsalternativene. Deretter flytter du den trekantede skyveknappen på tidslinjen og plasserer den helt på begynnelsen av animasjonen. Klikk på det lille Stop Watch-ikonet ved siden av Opacity-alternativet under "Feed" -mappen, det hvordan du lager en Keyframe. Når du har opprettet keyframe, kan du bruke alle endringene av egenskapene du vil, i dette tilfellet vil vi redusere "Feed" -mappen Opacity ned til 0%. Og det er det, denne mappen forblir skjult til vi gjør den synlig igjen.
Bla gjennom mappene dine på animasjonspanelet og finn "Artikler" Smart Object av "Feed 1" -raden og utvide alternativene. - Dra håndtereren på tidslinjen litt til høyre, ved siden av 1s (ett sekund), og klikk deretter på Stop Watch-ikonet for å opprette den første Keyframe. På dette punktet må du sørge for at posisjonen til objektet er etterlatt i samsvar med matrøbakgrunnen. - Dra håndterer ved siden av 4s på tidslinjen og klikk på den lille gule firkanten til venstre for stillingsalternativet (mellom neste / forrige pilene) for å opprette en ny keyframe. Nå, ved å bruke Flyttverktøy, drar du "Artikler" Smart Object til venstre, for å få objektet, rett på linje med feed row bakgrunnen. - Flytt håndtereren til 5-årene på tidslinjen og sett inn en ny Keyframe (husk, klikk på den lille gule firkanten) og hold bare den posisjonen (flytt ikke noe). - Flytt sluttbehandleren ved siden av 7-tallet på tidslinjen, opprett en ny keyframe og bruk Flyttverktøyet, vend "Artikler" -objektet tilbake til originalposisjonen, til venstre justert til feed-bakgrunnen.
Hvis du vil, kan du forhåndsvise denne lille delen av animasjonsprosessen ved å gå til File> Export> Video Preview. Det er to håndtere på venstre og høyre område av tidslinjen som du kan dra for å redusere arbeidsområdet, noe som gjør gjengivelsesprosessen raskere.
Begynn å være fornuftig, la oss gå videre. Nå vil vi animere hele mappen "Feeds". Siden vi ikke kan animere posisjonen til en mappe direkte, må vi konvertere den til et smart objekt, men hva skjer med den fine animasjonen vi nettopp gjorde med artiklene? Når du konverterer hele mappen til et smart objekt, vil hele sin tidslinje og alle dens nøkkelrammer holde det samme. Tidslinjen er uansett uansett, hvis det er en overgangseffekt på det tredje sekund av animasjonen i et smart objekt, vil det forbli synlig i alle dens overordnede filer og tidslinjer. Du kan teste det ved å eksportere animasjonen med det smarte objektet i stedet for mappen, og du ser ingen forskjell.
For å maskere det riktig (for å unngå å se et antall artikler som beveger seg bak iPad) Opprett en kopi av "BG" -laget, plasser det over "Feeds" -objektet og bruk en Vector-mask, som bare viser appområdet ( 1024x768px).
Velg "Feeds" Smart Object og åpne animasjonspanelet. Der flyttes tidslinjebehandleren ved siden av 7-årene, opprett et stillingsnøkkelramme, sørg for at strømmen er justert til toppen. Deretter flytter håndterer ved siden av 11-tallet og lager en posisjon-keyframe, der flytter hele objektet til den er bunnjustert. Deretter på 14-tallet på tidslinjen opprette en annen Posisjonsramme, men ikke flytte objektet, bare la det være bunnjustert, dette vil skape en Holde effekt. Endre flytte tidslinjebehandleren ved siden av 15-tallet og opprett en keyframe, dra objektet til den er toppjustert igjen.
Forhåndsvisning av forrige animasjonstrinn bør du ha noe slikt:
Først må vi gjøre popupen synlig igjen, husk at vi gjemmer det på trinn 35. Velg mappen "Feed" og på animasjonspanelet flytt tidslinjebehandleren ved siden av 20-tallet og opprett en keyframe. Deretter flytter håndtereren til 22-tallet og lager en ny keyframe, der endrer Opacity av mappen til 100%. Deretter lager du en ny keyframe neste 30-tallet og holder Opacity i 100%. Endelig opprett en keyframe ved siden av 31-tallet og endre Opacity av hele mappen tilbake til 0%.
Er det tid til å animere innholdet i vår popup artikkel. På trinn 33 opprettet vi en smart objekt i mappen "Feed". Velg den og sørg for at den er ordentlig maskert med "Mask" -laget bak den. På animasjonspanelet. På 24-tallet på tidslinjen, opprett en posisjonsnøkkelramme for "Nytt" eller "Artikkel" Smart objekt, sørg for at artikkelen er toppjustert. Deretter opprettes en posisjonsnøkkelramme ved siden av 25-årene, og dra den smarte gjenstanden til artikkelen er bunnjustert. Deretter på 26-tallet skaper en keyframe uten å endre objektposisjonen. Til slutt ved siden av 28-årene lager du en keyframe som drar objektet tilbake til sin toppjusterte posisjon.
På dette punktet vet du hvordan du skal dra, gjemme og flytte lag og hvordan de ser ut til å eksportere animasjonen. All oppførselen til appen er animert, så du kan stoppe her. men hvis du vil, kan du legge til noen visuelle hjelpemidler for å hjelpe kunden / kunden til å forstå dine ideer bedre.
Legg håndbildet fra eiendelene, trekk det fra bakgrunnen, og legg til en Drop Shadow-effekt hvis du vil.
Nå er alt i utgangspunktet animert posisjonen til hånden som prøver å matche animasjonen. Først beveger du hånden horisontalt, og skaper effekten av å bla gjennom artiklene i den horisontale nyhetsflaten.
Deretter animerer du hånden for å skape effekten av å bla gjennom de nye materiene vertikalt. Ikke glem: Prøv å matche posisjonene til keyframes som tidligere ble opprettet når animasjonen av appflowen ble animert.
Deretter animerer hånden for å matche den vertikale rullen av artikkelinnholdet. Finn først hånden over den valgte artikkelen på en hvilken som helst feed for å opprette en "Tap" -effekt. Deretter flytter du det som viser skjermbildene under for å matche den vertikale rullen. Til slutt finner du hånden over lukkeknappen (husk, samsvar alltid med de tidligere opprettede nøkkelrammene).
Bare hvis du vil, kan du opprette et sirkellag med navnet "Touch" og i utgangspunktet animere dens Opacity når hånden slår på artikkelen.
Etter flere keyframes, tonnevis med lag og ikke mindre smarte objekter, bør du ha noe som videoen nedenfor. Nå er dette klart for å bli vist til enhver klient eller kunde. Lykke til!
Accentsconagua