Sådan opretter du en videoskærmmockup i Photoshop

Mockups er en fantastisk måde at vise dit arbejde hurtigt og i ideelle omgivelser. Mens de fleste mennesker bruger billedmockups, vil en videomockup fange opmærksomhed og holde folk engageret i dit arbejde. At tilføje en video til en skærm er en fed måde at vise dit arbejde på, og det er heller ikke svært at gøre.

Hvad er en videoskærmmockup?

En mockup er en digital måde at prototype et design på eller anvende et design på dets realtidsprodukt uden at producere det. Årsagerne til dette er mange, men en hovedårsag til at lave en mockup er at få dine designs, illustrationer eller noget, du vil vise frem, til at se mere realistisk ud. Det hjælper dit publikum med at visualisere, hvordan stykket vil se ud til sidst.

I stedet for den ekstra tid, penge og indsats, det ville tage at producere et faktisk produkt, kan du oprette en digital mockup med din kunst, design, hjemmeside osv.

Nu er en animeret skærmmockup et meget lignende koncept, men med en mockup på en skærm, som en telefon eller en computer. Og i stedet for et billede vil mockup'et vise et bevægende design eller en video.

Disse bevægelige designs kan være alt fra en video til en UX/UI-designprototype eller en skærmoptagelse.

Hvorfor skal du bruge en animeret skærmmockup?

En af de bedste grunde til at lave en animeret skærmmockup er at vise et websted frem. Det er en fantastisk måde at vise et websted, du har designet i din portefølje.

Brug af en mockup giver en smule mere kreativitet i din portefølje end simple skærmbilleder af din hjemmeside. Det er en fantastisk måde at diversificere, hvordan dine mockups kan se ud.

Hvis du vil vise en video, du har oprettet, kan dette også være en kreativ måde at vise den på i stedet for blot at indlejre videoen fra YouTube osv. Samlet set er en animeret skærmmockup en sjov måde at vise dit arbejde på.

Sådan opretter du en animeret skærmmockup i Photoshop

Mens de fleste kender Photoshop som et billedredigeringsværktøj, kan du også bruge det til at lave animationer og videoer. Så her er trinene til at oprette en videomockup ved hjælp af Photoshop.

Hvilken slags video skal du bruge?

Der er masser af muligheder for din animerede skærmmockup. En mindre videofil vil fungere bedst. Selvom du kan bruge denne teknik til at vise ægte videooptagelser, vil størrelsen gøre det sværere at gengive i Photoshop.

Af den grund vil vi oprette en mockup, der ruller en webside. Brug af en kortere video uden andre designaspekter vil gengives hurtigere og give et resultat af høj kvalitet.

Brug en skærmoptager til at lave en video af din skærm. Dette kan gøres på en mobil eller desktop, alt efter hvad du vil have din mockup på. Vi bruger Quicktime Player på Mac og Ny skærmoptagelse mulighed, men der er masser af andre Mac-muligheder. Hvis du har en iPhone, kan du se hvordan man screen record på en iPhone. Du behøver ingen lyd i denne optagelse.

Til vores video optog vi hjemmesiden Makeuseof.com, der viser en række artikler om grafisk design. Du kan skærmoptage, hvad der giver mening for dig. Hold en stabil rulning og sørg for, at den hverken er for hurtig eller for langsom.

Når din korte optagelse er færdig, skal du gemme den som en MP4 og lægge den i en let tilgængelig mappe.

Hvilken slags foto skal du bruge?

For de bedste resultater i denne mockup bør du bruge et billede, der viser en uhindret skærm. Dette kan være en mobilskærm, computer eller endda en tv-skærm. Selvom dit billede kan vise noget perspektiv, er det bedst, hvis skærmen for det meste vender direkte mod dig.

Det er muligt at bruge en blokeret skærm eller et billede med et tungt perspektiv til en mere kompliceret mockup, men vi vil bare holde det enkelt i dag.

Du kan tage dit eget billede eller downloade et fra en royaltyfri side, som f.eks Unsplash. Vi vil ikke bruge en færdiglavet PSD-mockup til denne tutorial, så du behøver ikke besværet med at prøve at finde en.

Sådan laver du en videomockup

Åbn dit billede i Photoshop.

Hvis du downloadede billedet fra et royaltyfrit websted eller tog det med et kamera af høj kvalitet, kan størrelsen være ret stor. Du kan reducere billedstørrelsen.

Klik Billede > Billedestørrelse. De endelige mål er op til dig, men vi anbefaler en bredde på omkring 1200. Hold billedbegrænsningerne i forhold, når du ændrer størrelsen. Klik Okay.

Nu for at skabe det rum, hvor videoen skal sidde. Find dimensionerne på din originale video; hvis du skærmoptages fra en telefon, skal du finde telefonens skærmdimensioner, og hvis du skærmoptaget et websted, kan du bruge en standard 1680 x 1050, medmindre du kender de nøjagtige mål.

Brug rektangelværktøjet (U), og klik på dit lærred. Dette vil bringe en pop op, hvor du kan angive dimensionerne. Indsæt bredden og højden på din skærmoptagelse og klik Okay. Fjern stregen og vælg en fyldfarve af sort eller mørkegrå.

Højreklik på rektanglets lag og gå til Konverter til Smart Object. Nu kan du forvandle rektanglet, så det passer perfekt ind i skærmen. Dette betyder, at ethvert billede, der placeres på det smarte objekt, vil følge den samme formtransformation.

For at transformere dit rektangel skal du bruge transformeringsværktøjet. Du kan finde dette ved at gå til Redigere > Gratis transformation eller ved at slå cmd + T (Mac) eller ctrl + T (Windows).

Transformeringsværktøjet ændrer kun størrelsen på rektanglet. Skift størrelsen til at ligne skærmen så meget som du kan. Brug derefter Fordrej-funktionen.

Igen, gå til Redigere menu, så Transform > Forvrænge. Dette giver dig mulighed for at trække og strække hjørnerne for at mødes perfekt med din skærm. Dette fungerer godt, hvis dit billede har noget ekstra perspektiv til det. Dobbeltklik på rektanglet, når du har opstillet alle dine hjørner og kanter. Hvis kanterne ikke er korrekt opstillet, skal du bruge værktøjet Transform og Fordrej igen, indtil de er det.

Du kan indsætte din video i dit smarte objekt med den rigtige størrelse og form. Klik Vindue > Tidslinje for at åbne animationstidslinjen. Sørg for, at den er på videoens tidslinje i stedet for rammeanimation.

Dobbeltklik på det smarte objekt i lagpanelet ved at klikke på ikonet med et papir og firkantet på miniaturebilledet for dit smarte objekt. Dette åbner i et nyt vindue.

Træk din video til smartobjektvinduet. Din video skal have samme størrelse som dit rektangel. Hvis målene er slukkede, kan du nemt rette det: Træk hjørnerne, indtil de passer til hele vinduet.

Hvis du har brug for at beskære nogen kanter, kan du gøre det. Uanset hvad du kan se, er det, der vil blive vist i den endelige mockup. Når du er tilfreds, skal du dobbeltklikke for at bekræfte størrelsen og placeringen.

Du vil nu se to tidslinjelag på videoens tidslinje: et til rektanglet og et til den nye video. Træk i længden af ​​rektanglets tidslinje for at matche længden af ​​videoen. Dette sikrer, at videoen vil blive set i dens varighed.

Klik på afspilningsknappen for at tjekke din video. Det kan tage et stykke tid at indlæse og spiller derfor langsommere end den faktiske timing.

For at få din videoskærm til at se mere realistisk ud, skal du ændre blandingstilstanden for videolaget. Du kan også skrue ned for opaciteten på videolaget). Leg med forskellige blandingsindstillinger, indtil du er glad. Hvis du vil forlade det uden dette trin, er det også fint. Det vil give et klarere billede af skærmen.

Nu, for at gemme videoen til din mockup, skal du bare gemme smartobjektvinduet. Du kan gøre dette ved at gå til Fil > Gemme eller slå cmd + S (Mac) eller ctrl + S (Windows). Når du er gemt, skal du gå ud af smartobjektvinduet.

Du vender tilbage til mockup-vinduet. Du vil se din video i stedet for skærmen.

For at gemme din mockup, gå til Fil > Eksport > Gengiv video... Her kan du ændre størrelsen på den endelige mockup. Ændring af størrelsen vil også hjælpe med indlæsning og overordnet filstørrelse. Når du er tilfreds med dine indstillinger, skal du klikke Render.

Dette vil resultere i en endelig MP4-videofil med din færdige videomockup.

Tag dine Mockups videre med en Video Screen Mockup

Ved at bruge video i dine skærmmodeller vil du være i stand til at dele mere arbejde og engagere flere mennesker. Denne dynamiske mockup-stil skabt i Photoshop er nem at lave og har fremragende resultater.

Mens du kan bruge denne teknik til en statisk mockup kun ved hjælp af et billede, lærer du en ny færdighed ved at bruge video og opmuntrer folk til at engagere dig i dit arbejde i længere tid. En videomockup er sjælden at se, og overraskelsen vil fange opmærksomheden hos alle, der kigger.

Sådan laver du en boks-emballagemockup i Photoshop

Læs Næste

Om forfatteren