Kako napraviti maketu video zaslona u Photoshopu

Makete su izvrstan način da brzo i u idealnom okruženju pokažete svoj rad. Dok većina ljudi koristi makete slika, video maketa će privući pozornost i zadržati ljude uključene u vaš posao. Dodavanje videozapisa na zaslon odličan je način da pokažete svoj rad, a nije ni teško izvesti.

Što je maketa video zaslona?

Mockup je digitalni način prototipiranja dizajna ili primjene dizajna na proizvod u stvarnom vremenu bez proizvodnje. Razlozi za to su brojni, ali jedan od glavnih razloga za izradu makete je da vaš dizajn, ilustracije ili bilo što što želite pokazati izgledaju realističnije. Pomaže vašoj publici da vizualizira kako će djelo izgledati na kraju.

Umjesto dodatnog vremena, novca i truda koji bi bili potrebni za proizvodnju stvarnog proizvoda, možete izraditi digitalni mockup koji sadrži vašu umjetnost, dizajn, web stranicu itd.

Sada je animirani model zaslona vrlo sličan koncept, ali s maketom na ekranu, poput telefona ili računala. A umjesto slike, maketa će prikazati pokretni dizajn ili video.

Ovi pokretni dizajni mogu biti bilo što, od videa do prototipa UX/UI dizajna ili snimanja zaslona.

Zašto biste trebali koristiti animirani model zaslona?

Jedan od najboljih razloga za izradu mockupa animiranog zaslona je pokazivanje web stranice. To je sjajan način da pokažete web stranicu koju ste dizajnirali u svom portfelju.

Korištenje mockupa daje malo više kreativnosti u vašem portfelju od jednostavnih snimki zaslona vaše web stranice. To je sjajan način da diverzificirate kako vaši maketi mogu izgledati.

Ako želite prikazati videozapis koji ste izradili, ovo također može biti kreativan način da ga prikažete umjesto da samo ugrađujete videozapis s YouTubea itd. Općenito, animirani maketa zaslona zabavan je način prikaza vašeg rada.

Kako napraviti animirani model zaslona u Photoshopu

Iako većina ljudi poznaje Photoshop kao alat za uređivanje slika, možete ga koristiti i za izradu animacija i videozapisa. Dakle, evo koraka za stvaranje video makete pomoću Photoshopa.

Kakav video biste trebali koristiti?

Postoji mnogo opcija za vaš animirani model zaslona. Manja video datoteka će najbolje funkcionirati. Iako ovu tehniku ​​možete koristiti za prikaz stvarnih video snimaka, veličina će otežati renderiranje u Photoshopu.

Iz tog razloga ćemo izraditi maketu koja pomiče web stranicu. Korištenje kraćeg videozapisa bez ikakvih drugih aspekata dizajna brže će se prikazati i dati visokokvalitetni rezultat.

Upotrijebite snimač zaslona za stvaranje videozapisa na svom zaslonu. To se može učiniti na mobilnom ili stolnom računalu, ovisno o tome na čemu želite da se nalazi vaš model. Koristit ćemo Quicktime Player na Macu i Novo snimanje ekrana opcija, ali ima ih dosta druge Mac opcije. Ako imate iPhone, možete vidjeti kako snimiti ekran na iPhoneu. Ne treba vam nikakav zvuk u ovoj snimci.

Za naš video snimili smo web stranicu Makeuseof.com, prikazujući niz članaka o grafičkom dizajnu. Možete snimiti ekran što god vam ima smisla. Držite se ravnomjerno pomicanjem i pazite da nije ni prebrzo ni presporo.

Nakon što je vaša kratka snimka dovršena, spremite je kao MP4 i stavite u mapu kojoj je lako pristupiti.

Kakvu fotografiju trebate koristiti?

Za najbolje rezultate u ovom modelu trebali biste koristiti fotografiju koja prikazuje neometan zaslon. To može biti mobilni zaslon, računalo ili čak TV ekran. Iako vaša slika može pokazati određenu perspektivu, najbolje je ako je zaslon uglavnom okrenut prema vama.

Moguće je da se koristiti zapriječeni zaslon ili sliku s teškom perspektivom za kompliciraniji model, ali danas ćemo to učiniti jednostavnim.

Možete snimiti vlastitu fotografiju ili je preuzeti s web-lokacije bez naknade, kao što je Unsplash. Za ovaj vodič nećemo koristiti unaprijed izrađeni PSD model, tako da vam neće trebati muke da ga pronađete.

Kako napraviti video maketu

Otvorite svoju sliku u Photoshopu.

Ako ste sliku preuzeli s web-mjesta bez naknade ili je snimili visokokvalitetnim fotoaparatom, veličina bi mogla biti prilično velika. Možete smanjiti veličinu slike.

Klik Slika > Veličina slike. Konačne dimenzije su na vama, ali mi preporučujemo širinu od oko 1200. Prilikom promjene veličine držite ograničenja slike u proporcijama. Klik u redu.

Sada da stvorite prostor u kojem će se nalaziti video. Pronađite dimenzije svog izvornog videa; ako zaslon snimate s telefona, pronađite dimenzije zaslona telefona, a ako ste ekran snimili web stranicu, možete koristiti standardnu ​​rezoluciju od 1680 x 1050, osim ako ne znate točne dimenzije.

Pomoću alata Rectangle (U) kliknite na svoje platno. Ovo će donijeti skočni prozor u kojem možete odrediti dimenzije. Unesite širinu i visinu snimke zaslona i kliknite u redu. Uklonite crtu i odaberite crnu ili tamno sivu boju ispune.

Na sloju pravokutnika kliknite desnom tipkom miša i idite na Pretvori u pametni objekt. Sada možete transformirati pravokutnik kako bi se savršeno uklopio u zaslon. To znači da će svaka slika postavljena na pametni objekt slijediti istu transformaciju oblika.

Da biste transformirali svoj pravokutnik, koristite alat Transform. Ovo možete pronaći ako odete na Uredi > Slobodna transformacija ili udaranjem cmd + T (Mac) ili ctrl + T (Windows).

Alat Transform će promijeniti samo veličinu pravokutnika. Promijenite veličinu na što sličnu zaslonu. Zatim upotrijebite značajku Distort.

Opet, idite na Uredi izbornik, dakle Transformirati > Iskriviti. To će vam omogućiti povlačenje i rastezanje kutova kako bi se savršeno uklopili s vašim zaslonom. Ovo dobro funkcionira ako vaša slika ima dodatnu perspektivu. Dvaput kliknite pravokutnik nakon što poravnate sve svoje kutove i rubove. Ako rubovi nisu pravilno poravnati, ponovno upotrijebite alat Transform i Distort dok ne budu.

Možete umetnuti svoj video u svoj pametni objekt ispravne veličine i oblika. Klik Prozor > Vremenska Crta za otvaranje vremenske trake animacije. Osigurajte da je na vremenskoj traci videozapisa, a ne na animaciji okvira.

Dvaput kliknite na pametni objekt na ploči slojeva klikom na ikonu s papirom i kvadratom na sličici vašeg pametnog objekta. Ovo se otvara u novom prozoru.

Povucite svoj videozapis u prozor pametnog objekta. Vaš video bi trebao biti iste veličine kao i vaš pravokutnik. Ako su dimenzije isključene, možete to jednostavno popraviti: povucite kutove dok ne stanu na cijeli prozor.

Ako trebate odrezati bilo koji rub, možete to učiniti. Što god možete vidjeti, to će biti prikazano u konačnom modelu. Nakon što ste zadovoljni, dvaput kliknite za potvrdu veličine i položaja.

Sada ćete vidjeti dva sloja vremenske trake na vremenskoj traci videozapisa: jedan za pravokutnik i jedan za novi videozapis. Povucite duljinu vremenske trake pravokutnika da odgovara duljini videozapisa. To osigurava da će se videozapis vidjeti tijekom svog trajanja.

Kliknite gumb za reprodukciju da biste provjerili svoj video. Može potrajati neko vrijeme za učitavanje i stoga se igra sporije od stvarnog vremena.

Kako bi vaš videozaslon izgledao realističnije, promijenite način miješanja video sloja. Također možete smanjiti neprozirnost na video sloju). Igrajte se s različitim postavkama miješanja dok ne budete zadovoljni. Ako ga želite ostaviti bez ovog koraka, i to je u redu. To će dati jasniji pogled na ekran.

Sada, da biste spremili video u svoj model, samo spremite prozor pametnog objekta. To možete učiniti tako da odete na Datoteka > Uštedjeti ili udaranje cmd + S (Mac) ili ctrl + S (Windows). Nakon spremanja, izađite iz prozora pametnog objekta.

Vratit ćete se na prozor za maketu. Vidjet ćete svoj video na mjestu ekrana.

Da biste spremili svoj model, idite na Datoteka > Izvoz > Renderiraj video… Ovdje možete promijeniti veličinu konačnog modela. Promjena veličine pomoći će i pri učitavanju i ukupnoj veličini datoteke. Nakon što ste zadovoljni svojim postavkama, kliknite Renderirati.

To će rezultirati konačnom MP4 video datotekom s vašim dovršenim mockupom videozapisa.

Uzmite svoje makete dalje uz model video zaslona

Korištenjem videozapisa u maketama zaslona moći ćete podijeliti više posla i angažirati više ljudi. Ovaj dinamični mockup stil kreiran u Photoshopu jednostavan je za izradu i ima izvrsne rezultate.

Iako ovu tehniku ​​možete upotrijebiti za statički model koristeći samo sliku, korištenjem videa učite novu vještinu i potičete ljude da se dulje bave vašim poslom. Video mockup rijetko se može vidjeti, a iznenađenje će privući pažnju svakoga tko ga pogleda.

Kako napraviti maketu pakiranja kutije u Photoshopu

Pročitajte dalje

O autoru