Share
Har du någonsin försökt att förklara beteendet hos dina gränssnittsdesigner till dina kunder? Många gånger är ord inte tillräckligt för att visa vad designern har i åtanke när man levererar en bit till sin kund. I mobila applikationer, med både horisontella och vertikala rullar kombinerade och animering eller övergångseffekter, är detta problem ännu större. Denna handledning visar hur du utformar ett gränssnitt för en mobilapplikation från början i Photoshop, och viktigast av allt kommer du att visa hur du presenterar en animering som beskriver beteendet hos ansökan för inlämning till slutkunden. Är du redo? Låt oss börja!
Följande tillgångar användes under produktionen av denna handledning.
Denna handledning syftar till att vara en guide för att presentera ett mer dynamiskt urval av dina gränssnittsdesigner, vilket visar det beteende som appen kommer att ha när den implementeras.
Det finns flera fördelar med att skapa en animerad version innan du implementerar den i ett programmeringsspråk, här är några:
Med det i åtanke, låt oss gå vidare med dagens handledning.
Först ska vi designa en nyhetsläsare iPad App från början med Photoshop, då kommer vi att animera beteendet att bläddra igenom nyhetsflödena både vertikalt och horisontellt och slutligen öppna en artikel i ett popup-fönster. Nämnde jag att vi bara använder Photoshop för hela processen?
Eftersom det här inte är en grundläggande handledning kommer jag att anta att du har en grundläggande förståelse för Photoshops verktyg och processer, som att skapa klippmaskor, vektorgrafik och lagermasker, och ännu viktigare, smarta objekt. Om du verkligen vill gå igenom denna handledning och du fortfarande är nybörjare, föreslår jag att du läser ett par artiklar som beskriver dessa ämnen först.
Nu, låt oss komma igång!
Varje bra design börjar med en blank duk, den här gången kommer vi att skapa ett 1400 x 1100px dokument RGB vid 72ppi.
Eftersom vi skapar en design för en iPad-app, måste vi rita en kvadrat för att avgränsa arbetsområdet på iPad-skärmen (1024 x 768 px). Du kan enkelt göra det genom att skapa en rektangel och använda Transform Controls of Move-verktyget (V) klicka på vilket hörn som helst och sedan på Alternativpanelen ovanför, skriv de önskade dimensionerna på W och H-värdena. Tryck sedan på Command / Ctrl + A för att välja allt och ändå markera rutan med den flyttbara verktygen till den absoluta mitten genom att klicka på inställningsalternativen.
Sedan, när lådan är placerad i den absoluta mitten, rita fyra guider runt lådan, det här är vårt arbetsområde och den synliga delen av vår ansökan. Från och med nu till slutet av denna handledning är utrymmet mellan dessa guider det "appområdet".
Öppna nu och sätt in iPad-teman från tillgångarna, rotera den för att placera den i Landskapsläge och ändra storlek för att göra det aktiva området (skärmen) matchande med våra guider. Konvertera det till ett smart objekt och namnge det "iPad". Dubbelklicka sedan på smarta objektets miniatyr på panelen Lager kommer ett nytt fönster att visas med ett redigerbart antal lag som motsvarar "iPad" smart objekt. Det tar bort det grå området där gränssnittet kommer att vara beläget. Spara .PSB-filen, alla ändringar uppdateras automatiskt i huvuddokumentet.
Låt oss nu lägga till några bakgrunder, först en rektangulär vit bakgrund bakom "iPad" Smart Object. Denna bakgrund ska placeras mellan de vänstra och högra guiderna i appområdet, du kan ringa lagret "Bakgrund" och placera det i en mapp med namnet "App" eftersom det finns där vi lägger hela appdesignen. Sedan en stor gradient bakgrund för hela dokumentet (# 121212 - # 434343).
Rita en vektorrektangel mellan den övre gränsen för appområdet upp till 80px inuti en ny grupp med namnet "Header". Applicera följande lagstilar: ett överdrag av överdrag (# 00345C - # 146592), en vit (#FFFFFF) 1px slag, en 10px dropshadow och en ljusblå inre skugga (# 0180C7).
De mobila enheterna har nu mycket vackra skärmar, det kommer att vara synd om vi inte lägger till några små detaljer i rubriken för att få det att bli snyggare. Lägg först en blå ellipse (# 1C79B4) på vänster sida av rubriken, använd en Gaussian Blur till den (den kommer att rasterisera formen), använd vilken radie som helst, jag försöker med 15px. Kommandot / Ctrl + Klicka på vektorgasken i rubrikrektangeln, Kommando / Ctrl + Skift + I för att vända in valet och tryck på Delete för att ta bort all extra blå glans. Om du vill kan du lägga till flera cirklar med olika toner av blå och olika opacitet, placera dem på en grupp med namnet "Bubbles" och placera den till höger om rubriken. Då kan du antingen rasterisera den och upprepa processen med den blå glöden till vänster, eller du kan konvertera den till ett smart objekt och applicera en vektormask för att dölja överskridandet.
Jag kommer att hoppa över processen att skapa en utarbetad logotyp för vår ansökan, jag heter bara "Nyhetsläsare" med den vackra fonten "Walkway Black" från tillgångarna. Jag lägger till en subtil droppskugga och ett övertoningsöverlägg med det faktiska överlägget som blandningsläge. Placera logotypen på vänster sida av rubriken och inuti en grupp med namnet "Logo" i "Header" -mappen.
Rita en smal svart Ellipse, använd sedan en 5px Radius Gaussian Blur till den. Använd sedan verktyget Rektangulärt markeringsverktyg, välj halvan av den suddiga ellipsen och ta bort den. Därefter lägger du till en 1 x tjock linje till vänster om skuggan, lägger till slut en lagmaske och fyller den med en reflekterad svartvit övergång. Sätt allt i mappen "Logo".
Lägg till en mapp med namnet "Sök innehåll" inuti med hjälp av det rundade rektangulärverktyget, lägg till en vit rektangel (50px kantradie). Lägg till de stilar som visas på bilderna nedan (en inre skugga och en gradvis streck) för att ge den en subtil brevpresseffekt. Lägg sedan till en grå (#ABABAB) förstoringsikon och en söktext, med grå också, "Helvetica Neue" som typsnitt och storlek: 16pt.
Lägg till en ny rundad rektangel för sökknappen (5px radie) till höger om sökrutan. Lägg sedan till texten på knappen "Avancerad sökning" med "Helvetica Neue 75 fetstil" och vit förgrund.
Lägg sedan till knappen en blank övertonning som visar bilden nedan och en Gradient stroke. Lägg sedan till en Stil och Emboss stil som visar bilden nedan. Sätt både sökrutan och knappen inuti en ny grupp med namnet "Sök".
Låt oss lägga till nedre menyraden. Rita längst ner i App-området en svart rektangel (50px höjd). Applicera sedan ett blankt överlagringsöverdrag som visar bilden nedan.
Ovanför huvudet bör det finnas en stapel med standard iPad information (Signal, klocka och batteri). Även om detta område inte är för stort kan det leda till en betydande minskning av vårt appområde, så det är klokt att lägga till det. Ned "Header" -mappen några pixlar nedan, dubbelklicka sedan på "iPad" Smart Object och lägg till en svart rand eller den faktiska toppraden från iPad-tillgången. Spara det smarta objektet och placera mappen "Header" på rätt plats.
En fin touch för alla applikationer är en ren och snygg bakgrund. Skapa här en mapp med namnet "App Background". Där ritar en grå rektangel (# 797979) precis inom gränserna för appområdet. Gå sedan till Filter> Render> Clouds och gör några svarta / vita moln till ett nytt lager ovanför den grå bakgrunden. Gå sedan till Filter> Render> Fibers? och öka det är Styrka och Vibrance som du vill. Gå sedan till Filter> Blur> Motion Blur och ställ vinkeln till 90 grader och Avståndet till 999. Ta bort alla fibrerna utanför appområdet och ställ in opaciteten till 25%.
Slutligen lägg till en grå cirkel ovanför fibrerna (Opacity 30% eller mindre). Och använd en Gaussian Blur runt 45 - 50px Radius. Ta sedan bort glödet utanför appområdet. Om du inte vill ta bort eller beskära dessa lager kan du konvertera det gråa "bakgrundsskiktet" till en klippmask genom att klicka på två lager miniatyrer på panelen Lager och hålla Alternativ / Alt-klicka.
Nu har vi bakgrunden till vår app klar, det är dags att gå vidare med innehållet.
Eftersom denna applikation kommer att ha flera nyhetsflöden lägger vi till dem i olika rader. Varje rad innehåller en uppsättning av de senaste nyheterna på en viss webbplats eller RSS-flöde. Vi börjar med att lägga till en enda rad och duplicera sedan så många gånger som behövs.
Håll dina lager organiserat, skapa en grupp som heter "Feed" och placera den mellan "Bottom Bar" och "App Background" -mapparna. Ordningen på mapparna är mycket viktig för att den sista animationen ska fungera korrekt.
Rita en vit rektangel (200px höjd) och placera den ovanpå appområdet bredvid "Header". För boxskuggan rita en svart rektangel bakom den vita, namnge den "Shadow" och tillämpa en 4px Gaussian Blur till den. Använd sedan Warp Tools i Free Transform Controls, varpa den svarta rektangeln som visar uppsättningen skärmdumpar nedan. Slutligen byt "Skugga" opacitet till 50%.
Låt oss lägga till en flik där vi ska ange nyhetsflödesnamnet. Rita en 5x höjdradie rundad rektangel (#FFFFFF) och använd direktvalet (A) genom att flytta de nedre högra punkterna i rektangeln några punkter till höger. Använd sedan en subtil Drop Shadow som visar skärmdumpen nedan. Placera skiktet bakom "Bg White" -skiktet.
Eftersom vår bakgrund fortfarande ser lite löm ut, låt oss öka den djupa känslan och lägga till en subtil övergraderingsöverläggning till "BG White" -laget (#BEBEBE - #FFFFFF). En fin touch är att lägga till en 1px White Stroke i bakgrundsskiktet för att skapa en fin klyfta mellan rutan och dess skugga.
Duplicera "Tab" -lagret, placera kopian bakom originalet. Ändra förgrunden till blå (# 014373) och dess Stroke till (# 016CB4), upprepa processen men och sätt in en mörkare variant av blå (# 011A2E och # 0B4B79 för strejken).
Lägg till titeln på nyhetsflödet med "Helvetica Neue 75 bold" med den här förgrundsfärgen: # 034170. Du kan lägga till en Favicon nästa titel om du vill.
Lägg till fler ikoner över flikarna, "Uppdatera" och "Konfigurera" (jag använder ikonen som anges på tillgångarna). Applicera en övertoningsöverdrag och en dropskuggning med de värden som visas på skärmdumpen nedan.
Lägg nu till en flik för knappen "Stäng".
Nu har vi alla bakgrundslagren skapade (inuti en mapp med namnet "Feed Background") och titeln och ikonen utanför. Skapa nu en rektangulär vektorrektangel ovanför "Feed Background" med namnet "Mask". Detta kommer att bli en framtida mask för att dölja synligheten för den uppsättning nyheter som detta flöde kommer att ha. Men oroa dig inte om det ändå, ändra bara det blandningsläge för att multiplicera.
Varje rad i vår app innehåller flera artiklar, låt oss lägga till en (jag använder flera artiklar av tuts + nätverk som prover). Placera en rektangulär bild mellan "Mask" -laget och "Titel" -lagren - se skärmdumpen nedan. Upprepa processen som beskrivs i steg 8 för att skapa en skuggdelare och ändra dens opacitet till 50%.
Låt oss lägga till en titel för vår artikel, en rad metadata och ett kort stycke text. Se följande skärmdump för att se den föreslagna typografi och färger. Slutligen sätta alla lager relaterade till en artikel i en mapp med namnet "artikel".
Lägg till fler artiklar tills du fyller hela raden. När du har slutfört utrymme, välj alla artikelmappar du just skapat (Kommando / Ctrl + Skift i mappminiaturerna på lagpanelen) och dra dem till vänster om det behövs för att lägga till en annan artikel till höger. Lägg till så många artiklar som du vill, dra äntligen alla artiklar tillbaka till ursprunglig position (med den första artikeln som vänster anpassad till matningsbakgrunden).
Lägg alla artiklar till en ny grupp med namnet "Artiklar". Se till att mappen kan dra åt vänster och höger, så att bilden visas nedan. Konvertera sedan mappen till ett smart objekt. Därefter konverterar du "Mask" -laget till en klippmask (Alternativ / Alt-klick mellan "Artiklar" Smart Object och "Mask" -lagret). Försök nu dra objektet "Artiklar" åt vänster och höger, "Mask" -laget ska gömma artiklarna utanför maskområdet. Vid denna tidpunkt har denna nyhetsflöde faktiskt alla lager som är nödvändiga för att animera sitt beteende.
Lägg nu till många rader av nyhetsflöden och sätt varje rad i en mapp med respektive namn: "Feed1", "Feed2" etc. Lägg sedan till alla flöden i en ny mapp som bara heter "Feeds". Du kan duplicera bakgrunden och skapa olika artiklar inom varje, men duplicera inte "Artiklar" smart objekt från det första flödet, bara skapa en från början. Se till att hela mappen "Feeds" är lätt att dra från topp till botten och vice versa. Du kan till och med lägga till ett par flöden med endast text på dem.
Dra alla "Feeds" från botten till toppen och lämna synliga endast de undre två.
Lägg till följande navigationsikoner i "Bottom Bar" -mappen (steg 11): "Hem", "Uppdatera", "Inställningar", "Feeds" från tillgångarna. Lägg till varje ikonnamn under dess ikon med "Helvetica Neue 75 Bold" (# 818181). Applicera sedan på ikonen Layer Styles som visas på skärmen nedan. Slutligen skapa en ny stil för en vald / aktiv ikon.
Lägg till en genomskinlig ruta bakom den och ändra namnet förgrundsfärg till vit. Du borde få något som längst ner på skärmdumpen nedan?
Inne i mappen "Feeds" lägger du till en knapp (Rundrad 5xx-radie), kopiera och klistra in lagstilen i de nedersta streckikonen om du vill spara tid. Lägg sedan till ordet "Add Feed" med "Helvetica Neue 75 Bold" (# 828282) och rikta det till mitten av knappen.
Strukturen i dina lager hittills, bör innehålla ett "iPad" smart objekt, "Header", "Bottom Bar", "Feeds" -mappen och "App Background".
Lägg nu till en ny uppsättning lag i en mapp med namnet bara "Feed" mellan "Bottom Bar" -mappen och mappen "Feeds". Den här mappen innehåller en artikel, skapar en vit bakgrund och lägger till lite innehåll (Titel, Miniatyrbild och ett kort stycke text) på den. Rita en stor svart rektangel precis inom gränserna för appområdet och sänka uppaciteten till 75%. Centrera sedan det vita området. Det spelar ingen roll om innehållet du lagt till överstiger appområdet, vi kommer faktiskt att animera en rullningseffekt för detta innehåll. Låt oss gå framåt.
Först organisera dina lager, namnge den svarta bakgrunden "BG" och ordna den till botten. Lägg sedan alla textskikt, miniatyrbilder och bilder i en mapp med namnet "Ny" eller "Artikel".
Med hjälp av Ellipseverktyget ritar du en vit cirkel i det övre högra hörnet av matningsområdet och applicerar en subtil Drop Shadow på den. Sedan klistra in (eller rit) en fin "X" som nära knapp, lägg alla dessa lager i en mapp med namnet "Stäng".
Välj mappen "Ny" och konvertera den till ett smart objekt. Skapa sedan en annan rektangel ovanför den vita bakgrunden och namnge den "Mask" (den visas svart på skärmdumpen) och använd den som en klippmask för "New" "Smart Object. Sedan flytta verktyget (V) med objektet från topp till botten och vice versa så att allt ser bra ut. Slutligen sätta artikeln till sin ursprungliga position (vänster topplinje).
Innan du går vidare på detta är det viktigt att alla lager är organiserade och de smarta objekten är korrekt skapade. Skiktstrukturen ska vara den här, från topp till botten: "iPad" Smart Object, "Header", "Bottom Bar", "Feed", "Feeds" och "App Background" -mappen och slutligen det allmänna "BG" -lagret.
Då är det viktigt att du har skapat "Artiklar" Smart Object från den första raden av flöden (Steg 26), eftersom ett smart objekt innehåller en komplett tidslinje och du kan inhämta animerade övergångar på många nivåer (jag vet att det låter förvirrande men det kommer vara meningsfullt i ett par steg).
Du behöver en anständig CPU och grafikkort för att göra animationen, så tålamod är en bra ingrediens här.
Kom ihåg: vi kommer att animera appens beteende, du bör alltid komma ihåg processen från att ta en titt på nyhetsflödena, bläddra igenom artiklarna och slutligen öppna en artikel för att läsa den.
Gå till Fönster> Animation. Denna panel innehåller en tidslinje där du kan lägga nyckelbilder för att animera övergångar mellan Postion, Opacity och Layer Styles. I denna handledning kommer vi att animera position och opacitet. Det här området är inte så annorlunda än andra videoredigeringsprogram som After Effects eller Premiere, om du är nybörjare är det en bra utgångspunkt.
Låt oss börja den roliga delen av denna handledning!
Vi kommer att börja gömma en mapp som inte ska laddas från början. Popup-flödet ska förbli dolt tills en åtgärd gör den synlig. För detta, på animeringspanelen leta efter mappen "Feed" och klicka över den lilla triangeln bredvid den för att expandera animeringsalternativen. Flytta sedan den triangulära reglaget på tidslinjen och placera den i början av animationen. Klicka på den lilla Stop Watch-ikonen bredvid Opacity-alternativet under mappen "Feed", det hur du skapar en Keyframe. När du har skapat keyframe kan du tillämpa alla ändringar av de egenskaper du vill ha, i det här fallet kommer vi att minska mappen "Feed" Opacity ner till 0%. Och det är det, den här mappen kommer att förbli dold tills vi gör den synlig igen.
Bläddra i dina mappar på animeringspanelen och hitta "Artiklar" Smart Object i "Feed 1" -raden och expandera dess alternativ. - Dra handlaren på tidslinjen lite till höger, bredvid 1s (en sekund) och klicka sedan på Stop Watch-ikonen för att skapa den första Keyframe. Se till att objektets position är kvar i linje med matningsradens bakgrund. - Dra handlaren bredvid 4s på tidslinjen och klicka på den lilla gula rutan till vänster om positionsalternativet (mellan nästa / föregående pilar) för att skapa en ny Keyframe. Med hjälp av Flytta verktyget drar du objektet "Artiklar" till vänster, för att få objektet, rätt inriktat på matningsradens bakgrund. - Flytta handlaren till 5s på tidslinjen och sätt in en ny Keyframe (kom ihåg, klicka på den lilla gula torget) och håll bara den positionen (flytt inte något). - Flytta slutligen handlaren bredvid 7-talen på tidslinjen, skapa en ny keyframe och använd Move Tool, vänd tillbaka "Artiklar" -objektet till det ursprungliga läget, vänster inriktat på matningsbakgrunden.
Om du vill kan du förhandsgranska den här lilla delen av animeringsprocessen genom att gå till Arkiv> Exportera> Videoförhandsgranskning. Det finns två hanterare på vänster och höger sida av tidslinjen som du kan dra för att minska arbetsområdet, vilket gör återgivningsprocessen snabbare.
När vi börjar göra det bra, låt oss gå framåt. Nu kommer vi att animera hela mappen "Feeds". Eftersom vi inte kan direkt animera positionen för en mapp måste vi konvertera den till ett smart objekt, men vad händer med den trevliga animationen vi bara gjorde med artiklarna? När du har konverterat hela mappen till ett smart objekt hela sin tidslinje och alla dess nyckelbilder håller samma. Tidslinjen är dock unik, om det finns en övergångseffekt på den tredje sekunden av animationen i ett smart objekt, kommer det att vara synligt i alla dess moderfiler och tidslinjer. Du kan testa det genom att exportera animationen med det smarta objektet istället för mappen och du ser ingen skillnad.
För att maskera det korrekt (för att undvika att se ett antal artiklar som rör sig bakom iPad) Skapa en kopia av "BG" -laget, placera det över "Feeds" -objektet och använd en Vector-mask, vilket bara visar appområdets yta ( 1024x768px).
Välj "Smart Feed" och öppna animeringspanelen. Där flyttar tidslinjebehandlaren bredvid 7-talet, skapar du en positionsnyckelram, se till att flödena är i linje med toppen. Flytta sedan handlaren bredvid 11: e och skapa en Position keyframe, flytta hela objektet tills det är bottenjusterat. Sedan på 14-talet på tidslinjen skapa en annan Position keyframe, men rör inte objektet, bara lämna det i bottenlinjen, det här kommer att skapa en Håll effekt. Flytta äntligen tidslinjebehandlaren bredvid 15-talet och skapa en keyframe, dra objektet tills det är topplinjat igen.
Förhandsgranska föregående animationssteg du borde ha något liknande så här:
Först måste vi göra popupen synlig igen, kom ihåg att vi gömmer det på steg 35. Välj mappen "Feed" och på animeringspanelen flytta tidslinjeshanteraren bredvid 20-talet och skapa en keyframe. Flytta sedan handlaren till 22-talet och skapa en annan keyframe, där ändrar mappens opacitet till 100%. Därefter skapa en annan keyframe nästa 30-talet och behåll Opacity i 100%. Slutligen skapa en keyframe bredvid 31-talen och ändra Opacity av hela mappen tillbaka till 0%.
Är det dags att animera innehållet i vår popupartikel. På steg 33 skapade vi ett smart objekt i mappen "Feed". Välj det och se till att det är ordentligt maskerat med "Mask" -lagret bakom det. På animeringspanelen. På 24-talet på tidslinjen skapar du en positionsnyckelram för "Nytt" eller "Artikel" Smart Object, se till att artikeln är högst anpassad. Därefter skapar du en positionsnyckelram och dra det smarta objektet tills artikeln ligger i bottenlinjen. Då skapar man på 26-talet en keyframe utan att ändra objektpositionen. Slutligen bredvid 28-talet skapar du en keyframe som drar objektet tillbaka till sin toppjusterade position.
Vid den här tiden vet du hur man kan dra, dölja och flytta lager och hur de ser ut att exportera animationen. Allt appens beteende är animerat, så du kan stanna här. men om du vill kan du lägga till några visuella hjälpmedel för att hjälpa din klient / kund att förstå dina idéer bättre.
Placera handbilden från tillgångarna, extrahera den från bakgrunden och, om du vill, lägga till en Drop Shadow-effekt.
Nu animerar allt i grunden handens position som försöker matcha animeringen. Först rör handen horisontellt och skapa effekten av att rulla igenom artiklarna i det horisontella nyhetsflödet.
Animera sedan handen för att skapa effekten av att bläddra i de nya flödena vertikalt. Glöm inte: Försök att matcha positionerna för de nyckelramar som tidigare skapats när animeringen av appflödet aktiveras.
Animera sedan handen för att matcha den vertikala rullningen av artikelinnehållet. Hitta först handen över den valda artikeln på något flöde för att skapa en "Tap" -effekt. Flytta sedan det som visar skärmdumparna nedan för att matcha den vertikala rullningen. Hitta slutligen handen över den stängda knappen (kom ihåg att alltid matcha de tidigare skapade nyckelramarna).
Bara om du vill kan du skapa ett cirkellager med namnet "Touch" och i grunden animera dess opacitet när handen pekar på artikeln.
Efter flera nyckelbilder, massor av lager och inte mindre Smart Objects, borde du ha något liknande videon nedan. Nu är det klart att det visas för någon kund eller kund. Lycka till!
Accentsconagua