Hvordan lage en videoskjermmockup i Photoshop

Mockups er en fin måte å vise arbeidet ditt raskt og i en ideell setting. Mens de fleste bruker bildemodeller, vil en videomockup fange oppmerksomhet og holde folk engasjert i arbeidet ditt. Å legge til en video på en skjerm er en kul måte å vise arbeidet ditt på, og det er heller ikke så vanskelig å gjøre.

Hva er en videoskjermmockup?

En mockup er en digital måte å prototype et design på eller bruke et design på sanntidsproduktet uten å produsere det. Årsakene til dette er mange, men en hovedgrunn til å lage en mockup er å få designene, illustrasjonene eller alt du vil vise frem til å se mer realistisk ut. Det hjelper publikum med å visualisere hvordan stykket vil se ut på slutten.

I stedet for den ekstra tiden, pengene og innsatsen det vil ta å produsere et faktisk produkt, kan du lage en digital mockup med kunst, design, nettside osv.

Nå er en animert skjermmockup et veldig likt konsept, men med en mockup på en skjerm, som en telefon eller en datamaskin. Og i stedet for et bilde, vil mockupen vise et bevegelig design eller en video.

Disse bevegelige designene kan være alt fra en video til en UX/UI-designprototype eller et skjermopptak.

Hvorfor bør du bruke en animert skjermmodell?

En av de beste grunnene til å lage en animert skjermmodell er å vise frem et nettsted. Det er en fin måte å vise frem et nettsted du har designet i porteføljen din.

Å bruke en mockup gir litt mer kreativitet i porteføljen din enn enkle skjermbilder av nettstedet ditt. Det er en fin måte å diversifisere hvordan modellene dine kan se ut.

Hvis du vil vise en video du har laget, kan dette også være en kreativ måte å vise den på i stedet for bare å bygge inn videoen fra YouTube osv. Alt i alt er en animert skjermmodell en morsom måte å vise arbeidet ditt på.

Hvordan lage en animert skjermmockup i Photoshop

Mens de fleste kjenner Photoshop som et bilderedigeringsverktøy, kan du også bruke det til å lage animasjoner og videoer. Så her er trinnene for å lage en videomockup ved hjelp av Photoshop.

Hva slags video bør du bruke?

Det er mange alternativer for din animerte skjermmodell. En mindre videofil vil fungere best. Selv om du kan bruke denne teknikken til å vise ekte videoopptak, vil størrelsen gjøre det vanskeligere å gjengi i Photoshop.

Av den grunn vil vi lage en mockup som ruller en nettside. Bruk av en kortere video uten andre designaspekter vil gjengis raskere og gi et resultat av høy kvalitet.

Bruk en skjermopptaker for å lage en video av skjermen. Dette kan gjøres på en mobil eller desktop, avhengig av hva du vil at mockupen skal være på. Vi bruker Quicktime Player på Mac og Nytt skjermopptak alternativ, men det er mange andre Mac-alternativer. Hvis du har en iPhone, kan du se hvordan skjermopptak på en iPhone. Du trenger ingen lyd i dette opptaket.

For videoen vår tok vi opp nettstedet Makeuseof.com, som viser en rekke artikler om grafisk design. Du kan skjermopptak hva som er fornuftig for deg. Hold en jevn rulling og sørg for at den verken er for rask eller for sakte.

Når det korte opptaket er fullført, lagrer du det som en MP4 og legger det i en lett tilgjengelig mappe.

Hva slags bilde bør du bruke?

For best resultat i denne mockupen bør du bruke et bilde som viser en uhindret skjerm. Dette kan være en mobilskjerm, datamaskin eller til og med en TV-skjerm. Selv om bildet ditt kan vise litt perspektiv, er det best hvis skjermen stort sett vender rett på deg.

Det er mulig å bruk en blokkert skjerm eller et bilde med et tungt perspektiv for en mer komplisert mockup, men vi vil bare holde det enkelt i dag.

Du kan ta ditt eget bilde eller laste ned et fra et royaltyfritt nettsted, som f.eks Unsplash. Vi vil ikke bruke en forhåndslaget PSD-mockup for denne opplæringen, så du trenger ikke bryet med å prøve å finne en.

Hvordan lage en videomockup

Åpne bildet ditt i Photoshop.

Hvis du lastet ned bildet fra et royaltyfritt nettsted eller tok det med et kamera av høy kvalitet, kan størrelsen være ganske stor. Du kan redusere bildestørrelsen.

Klikk Bilde > Bildestørrelse. De endelige dimensjonene er opp til deg, men vi anbefaler en bredde på rundt 1200. Hold bildebegrensningene i proporsjon når du endrer størrelsen. Klikk OK.

Nå for å lage plassen der videoen skal sitte. Finn dimensjonene til den originale videoen din; hvis du skjermer tatt opp fra en telefon, finn telefonens skjermdimensjoner, og hvis du skjermopptak et nettsted, kan du bruke en standard 1680 x 1050, med mindre du vet de nøyaktige dimensjonene.

Bruk rektangelverktøyet (U), klikk på lerretet ditt. Dette vil bringe en popup som du kan spesifisere dimensjonene i. Legg inn bredden og høyden på skjermopptaket og klikk OK. Fjern streken og velg en fyllfarge svart eller mørkegrå.

Høyreklikk på rektangellaget og gå til Konverter til Smart Object. Nå kan du forvandle rektangelet slik at det passer perfekt inn i skjermen. Dette betyr at ethvert bilde plassert på det smarte objektet vil følge den samme formtransformasjonen.

For å transformere rektangelet ditt, bruk Transform-verktøyet. Du finner dette ved å gå til Redigere > Gratis transformasjon eller ved å slå cmd + T (Mac) eller ctrl + T (Windows).

Transformeringsverktøyet vil bare endre størrelsen på rektangelet. Endre størrelsen til så lik skjermen som mulig. Bruk deretter forvrengningsfunksjonen.

Igjen, gå til Redigere menyen, da Forvandle > Forvrenge. Dette lar deg dra og strekke hjørnene for å møtes perfekt med skjermen. Dette fungerer utmerket hvis bildet ditt har et ekstra perspektiv. Dobbeltklikk av rektangelet når du har stilt opp alle hjørnene og kantene. Hvis kantene ikke er riktig stilt opp, bruk Transform-verktøyet og Forvreng-alternativet igjen til de er det.

Du kan sette inn videoen i ditt smarte objekt med riktig størrelse og form. Klikk Vindu > Tidslinje for å åpne animasjonstidslinjen. Sørg for at den er på videoens tidslinje i stedet for rammeanimasjon.

Dobbeltklikk på smartobjektet i lagpanelet ved å klikke på ikonet med et papir og firkant på miniatyrbildet for smartobjektet ditt. Dette åpnes i et nytt vindu.

Dra videoen til smartobjektvinduet. Videoen din skal ha samme størrelse som rektangelet ditt. Hvis dimensjonene er av, kan du fikse det enkelt: dra hjørnene til de passer til hele vinduet.

Hvis du trenger å beskjære noen kanter, kan du gjøre det. Uansett hva du kan se, er det som vises i den siste mockupen. Når du er fornøyd, dobbeltklikker du for å bekrefte størrelsen og plasseringen.

Du vil nå se to tidslinjelag på videoens tidslinje: ett for rektangelet og ett for den nye videoen. Dra lengden på rektangelets tidslinje for å matche lengden på videoen. Dette sikrer at videoen blir sett så lenge den varer.

Klikk avspillingsknappen for å sjekke videoen din. Det kan ta en stund å laste og spille derfor tregere enn den faktiske timingen.

For å få videoskjermen til å se mer realistisk ut, endre blandingsmodusen til videolaget. Du kan også skru ned opasiteten på videolaget). Lek med forskjellige blandingsinnstillinger til du er fornøyd. Hvis du vil forlate det uten dette trinnet, er det også greit. Det vil gi en klarere visning av skjermen.

Nå, for å lagre videoen til mockupen din, lagrer du bare smartobjektvinduet. Du kan gjøre dette ved å gå til Fil > Lagre eller slå cmd + S (Mac) eller ctrl + S (Windows). Når du har lagret, går du ut av smartobjektvinduet.

Du kommer tilbake til mockup-vinduet. Du vil se videoen din på stedet for skjermen.

For å lagre mockupen din, gå til Fil > Eksport > Gjengi video … Her kan du endre størrelsen på den endelige mockupen. Å endre størrelsen vil også hjelpe med lasting og total filstørrelse. Når du er fornøyd med innstillingene, klikker du Gjengi.

Dette vil resultere i en endelig MP4-videofil med den fullførte videomockupen.

Ta mockupene dine videre med en videoskjermmockup

Ved å bruke video i skjermmodellene dine vil du kunne dele mer arbeid og engasjere flere mennesker. Denne dynamiske mockup-stilen laget i Photoshop er enkel å lage og har utmerkede resultater.

Mens du kan bruke denne teknikken for en statisk mockup ved å bruke bare et bilde, lærer du en ny ferdighet ved å bruke video, og oppmuntrer folk til å engasjere seg i arbeidet ditt lenger. En videomockup er sjelden å se, og overraskelsen vil fange oppmerksomheten til alle som ser.

Hvordan lage en boksemballasjemockup i Photoshop

Les Neste

Om forfatteren