Een mockup voor een videoscherm maken in Photoshop

Mockups zijn een geweldige manier om uw werk snel en in een ideale setting te laten zien. Terwijl de meeste mensen afbeeldingsmodellen gebruiken, zal een videomodel de aandacht trekken en mensen betrokken houden bij uw werk. Het toevoegen van een video aan een scherm is een coole manier om je werk te laten zien en ook niet erg moeilijk om te doen.

Wat is een mockup voor een videoscherm?

Een mockup is een digitale manier om een ​​ontwerp te prototypen of een ontwerp toe te passen op het realtime product zonder het te produceren. De redenen hiervoor zijn talrijk, maar een van de belangrijkste redenen voor het maken van een mockup is om uw ontwerpen, illustraties of alles waarmee u wilt pronken er realistischer uit te laten zien. Het helpt uw ​​publiek te visualiseren hoe het stuk er aan het einde uit zal zien.

In plaats van de extra tijd, het geld en de moeite die het zou kosten om een ​​echt product te produceren, kun je een digitale mockup maken met je kunst, ontwerp, website, enz.

Nu is een mockup met een geanimeerd scherm een ​​vergelijkbaar concept, maar met een mockup op een scherm, zoals een telefoon of een computer. En in plaats van een afbeelding toont de mockup een bewegend ontwerp of video.

Deze bewegende ontwerpen kunnen van alles zijn, van een video tot een UX/UI-ontwerpprototype of een schermopname.

Waarom zou u een geanimeerd schermmodel gebruiken?

Een van de beste redenen om een ​​geanimeerd schermmodel te maken, is om te pronken met een website. Het is een geweldige manier om te pronken met een website die u in uw portfolio heeft ontworpen.

Het gebruik van een mockup geeft iets meer creativiteit in je portfolio dan simpele screenshots van je website. Het is een geweldige manier om te diversifiëren hoe uw mockups eruit kunnen zien.

Als je een video wilt weergeven die je hebt gemaakt, kan dit ook een creatieve manier zijn om deze te laten zien in plaats van alleen de video van YouTube enz. in te sluiten. Over het algemeen is een geanimeerd schermmodel een leuke manier om uw werk weer te geven.

Een geanimeerd schermmodel maken in Photoshop

Hoewel de meeste mensen Photoshop kennen als een hulpmiddel voor het bewerken van afbeeldingen, kunt u het ook gebruiken om animaties en video's te maken. Dus, hier zijn de stappen voor het maken van een videomodel met Photoshop.

Wat voor soort video moet je gebruiken?

Er zijn veel opties voor je geanimeerde schermmodel. Een kleiner videobestand werkt het beste. Hoewel je deze techniek kunt gebruiken om echte videobeelden weer te geven, maakt de grootte het moeilijker om te renderen in Photoshop.

Om die reden zullen we een mockup maken die door een webpagina scrolt. Het gebruik van een kortere video zonder andere ontwerpaspecten zal sneller renderen en een resultaat van hoge kwaliteit opleveren.

Gebruik een schermrecorder om een ​​video van uw scherm te maken. Dit kan op een mobiel of desktop worden gedaan, afhankelijk van waar je je mockup op wilt hebben. We gebruiken Quicktime Player op Mac en de Nieuwe schermopname optie, maar er zijn er genoeg andere Mac-opties. Als je een iPhone hebt, kun je zien hoe een opname op een iPhone te screenen. Je hebt geen audio nodig bij deze opname.

Voor onze video hebben we de website Makeuseof.com opgenomen, waarop een reeks artikelen over grafisch ontwerp te zien is. U kunt alles opnemen wat voor u zinvol is. Houd een gestage scroll en zorg ervoor dat het niet te snel of te langzaam is.

Zodra uw korte opname is voltooid, slaat u deze op als een MP4 en plaatst u deze in een gemakkelijk toegankelijke map.

Wat voor soort foto moet je gebruiken?

Voor de beste resultaten in deze mockup moet je een foto gebruiken die een vrij scherm laat zien. Dit kan een mobiel scherm, computer of zelfs een tv-scherm zijn. Hoewel je afbeelding enig perspectief kan tonen, is het het beste als het scherm grotendeels recht naar je toe is gericht.

Het is mogelijk om gebruik een belemmerd scherm of een afbeelding met een zwaar perspectief voor een meer gecompliceerde mockup, maar we houden het vandaag gewoon simpel.

U kunt uw eigen foto maken of er een downloaden van een royaltyvrije site, zoals: Unsplash. We zullen voor deze tutorial geen premade PSD-mockup gebruiken, dus je hoeft er niet een te zoeken.

Hoe het videomodel te maken

Open je afbeelding in Photoshop.

Als je de afbeelding hebt gedownload van een royaltyvrije site of hebt gemaakt met een camera van hoge kwaliteit, kan het formaat behoorlijk groot zijn. U kunt de afbeeldingsgrootte verkleinen.

Klik Afbeelding > Afbeeldingsgrootte. De uiteindelijke afmetingen zijn aan jou, maar wij raden een breedte van rond de 1200 aan. Houd de afbeeldingsbeperkingen in verhouding bij het wijzigen van de grootte. Klik Oke.

Nu om de ruimte te creëren waar de video zal staan. Vind de afmetingen van je originele video; als je opgenomen screent vanaf een telefoon, zoek dan de schermafmetingen van de telefoon, en als je een website screent, zou je een standaard 1680 x 1050 kunnen gebruiken, tenzij je de exacte afmetingen weet.

Klik met het gereedschap Rechthoek (U) op uw canvas. Er verschijnt een pop-up waarin u de afmetingen kunt opgeven. Voer de breedte en hoogte van uw schermopname in en klik op Oke. Verwijder de streek en kies een vulkleur van zwart of donkergrijs.

Klik met de rechtermuisknop op de laag van de rechthoek en ga naar Converteren naar slim object. Nu kunt u de rechthoek transformeren zodat deze perfect in het scherm past. Dit betekent dat elke afbeelding die op het slimme object wordt geplaatst, dezelfde vormtransformatie zal volgen.

Gebruik het gereedschap Transformeren om uw rechthoek te transformeren. Deze vind je door naar Bewerking > Vrije transformatie of door te slaan cmd + T (Mac) of ctrl + T (Ramen).

Het gereedschap Transformeren verandert alleen de grootte van de rechthoek. Verander de grootte naar zo vergelijkbaar met het scherm als je kunt. Gebruik dan de functie Vervormen.

Nogmaals, ga naar de Bewerking menu, dan Transformeren > Vervormen. Hiermee kunt u de hoeken slepen en uitrekken om perfect op uw scherm te passen. Dit werkt geweldig als je afbeelding een extra perspectief heeft. Dubbelklik op de rechthoek zodra je al je hoeken en randen hebt uitgelijnd. Als de randen niet correct zijn uitgelijnd, gebruikt u het gereedschap Transformeren en de optie Vervormen opnieuw totdat ze dat wel zijn.

U kunt uw video invoegen in uw slimme object met de juiste grootte en vorm. Klik Raam > Tijdlijn om de animatietijdlijn te openen. Zorg ervoor dat het op de videotijdlijn staat in plaats van frameanimatie.

Dubbelklik op het slimme object in het lagenpaneel door op het pictogram met een papier en vierkant op de miniatuur voor uw slimme object te klikken. Dit opent in een nieuw venster.

Sleep uw video naar het slimme objectvenster. Je video moet even groot zijn als je rechthoek. Als de afmetingen niet kloppen, kun je het gemakkelijk repareren: sleep de hoeken totdat ze in het hele venster passen.

Als u randen moet bijsnijden, kunt u dat doen. Wat je ook kunt zien, wordt getoond in de uiteindelijke mockup. Als u tevreden bent, dubbelklikt u om de maat en plaatsing te bevestigen.

Je ziet nu twee tijdlijnlagen op de videotijdlijn: één voor de rechthoek en één voor de nieuwe video. Sleep de lengte van de tijdlijn van de rechthoek zodat deze overeenkomt met de lengte van de video. Dit zorgt ervoor dat de video gedurende de hele duur wordt gezien.

Klik op de afspeelknop om je video te bekijken. Het kan even duren om te laden en daarom langzamer te spelen dan de werkelijke timing.

Om uw videoscherm er realistischer uit te laten zien, wijzigt u de overvloeimodus van de videolaag. U kunt ook de dekking op de videolaag verlagen). Speel met verschillende menginstellingen totdat je tevreden bent. Als je het zonder deze stap wilt laten, is dat ook goed. Het geeft een duidelijker beeld van het scherm.

Om de video nu in uw mockup op te slaan, hoeft u alleen maar het slimme objectvenster op te slaan. Dit doe je door naar Bestand > Opslaan of slaan cmd + S (Mac) of ctrl + S (Ramen). Eenmaal opgeslagen, verlaat u het slimme objectvenster.

U keert terug naar het mockup-venster. Je ziet je video op de plaats van het scherm.

Om je mockup op te slaan, ga naar Bestand > Exporteren > Video renderen… Hier kunt u de grootte van de uiteindelijke mockup wijzigen. Het wijzigen van de grootte helpt ook bij het laden en de algehele bestandsgrootte. Als u tevreden bent met uw instellingen, klikt u op Veroorzaken.

Dit resulteert in een definitief MP4-videobestand met je voltooide video-mockup.

Breng uw testmodellen verder met een videoschermmodel

Door video in uw schermmodellen te gebruiken, kunt u meer werk delen en meer mensen betrekken. Deze dynamische mockup-stijl gemaakt in Photoshop is eenvoudig te maken en heeft uitstekende resultaten.

Hoewel je deze techniek kunt gebruiken voor een statische mockup met alleen een afbeelding, leer je door video te gebruiken een nieuwe vaardigheid en moedig je mensen aan om langer met je werk bezig te zijn. Een videomodel is zeldzaam om te zien en de verrassing zal de aandacht trekken van iedereen die kijkt.

Hoe maak je een doosverpakkingsmodel in Photoshop

Lees volgende

Over de auteur