Jak vytvořit maketu obrazovky videa ve Photoshopu

Makety jsou skvělý způsob, jak rychle a v ideálním prostředí ukázat svou práci. Zatímco většina lidí používá makety obrázků, maketa videa upoutá pozornost a udrží lidi v zapojení do vaší práce. Přidání videa na obrazovku je skvělý způsob, jak ukázat svou práci, a není to příliš obtížné.

Co je maketa obrazovky videa?

Maketa je digitální způsob, jak prototypovat design nebo aplikovat design na jeho produkt v reálném čase, aniž byste jej museli vyrábět. Důvodů je mnoho, ale jedním z hlavních důvodů pro vytvoření makety je, aby vaše návrhy, ilustrace nebo cokoli, čím se chcete pochlubit, vypadalo realističtěji. Pomáhá vašemu publiku představit si, jak bude skladba vypadat na konci.

Namísto dalšího času, peněz a úsilí, které by vyžadovalo vytvoření skutečného produktu, můžete vytvořit digitální maketu s vaším uměním, designem, webem atd.

Animovaná maketa obrazovky je nyní velmi podobný koncept, ale s maketou na obrazovce, jako je telefon nebo počítač. A namísto obrázku bude maketa zobrazovat pohyblivý design nebo video.

Tyto pohyblivé návrhy mohou být cokoli od videa po prototyp návrhu UX/UI nebo záznam obrazovky.

Proč byste měli používat animovanou maketu obrazovky?

Jedním z nejlepších důvodů pro vytvoření makety animované obrazovky je předvedení webové stránky. Je to skvělý způsob, jak se pochlubit webem, který jste navrhli ve svém portfoliu.

Použití makety dává vašemu portfoliu trochu více kreativity než jednoduché snímky obrazovky vašeho webu. Je to skvělý způsob, jak zpestřit, jak mohou vaše makety vypadat.

Pokud chcete zobrazit video, které jste vytvořili, může to být také kreativní způsob, jak ho ukázat, místo pouhého vkládání videa z YouTube atd. Celkově vzato je animovaná maketa obrazovky zábavným způsobem, jak zobrazit vaši práci.

Jak vytvořit animovanou maketu obrazovky ve Photoshopu

Přestože většina lidí zná Photoshop jako nástroj pro úpravu obrázků, můžete jej použít také k vytváření animací a videí. Zde jsou kroky k vytvoření makety videa pomocí Photoshopu.

Jaký druh videa byste měli použít?

Existuje mnoho možností pro vaši animovanou maketu obrazovky. Nejlépe bude fungovat menší soubor videa. I když můžete tuto techniku ​​použít k zobrazení skutečného videozáznamu, velikost ztíží vykreslení ve Photoshopu.

Z toho důvodu vytvoříme maketu pro posouvání webové stránky. Použití kratšího videa bez dalších designových aspektů bude rychlejší a poskytne vysoce kvalitní výsledek.

K vytvoření videa z obrazovky použijte záznamník obrazovky. To lze provést na mobilu nebo stolním počítači, v závislosti na tom, na čem chcete maketu mít. Budeme používat Quicktime Player na Macu a dalších Nový záznam obrazovky možnost, ale je jich spousta další možnosti Mac. Pokud máte iPhone, můžete vidět jak nahrávat obrazovku na iPhone. V této nahrávce nepotřebujete žádný zvuk.

Pro naše video jsme natočili web Makeuseof.com, který ukazuje řadu článků o grafickém designu. Na obrazovce můžete nahrávat cokoliv, co vám dává smysl. Udržujte stálé posouvání a ujistěte se, že není ani příliš rychlé, ani příliš pomalé.

Jakmile bude vaše krátká nahrávka dokončena, uložte ji jako MP4 a vložte ji do snadno přístupné složky.

Jaký druh fotografie byste měli použít?

Chcete-li v této maketě dosáhnout nejlepších výsledků, měli byste použít fotografii, která zobrazuje obrazovku bez překážek. Může to být obrazovka mobilního telefonu, počítač nebo dokonce obrazovka televizoru. Ačkoli váš obrázek může ukazovat určitou perspektivu, je nejlepší, když je obrazovka většinou otočena přímo k vám.

Je možné použijte ucpanou obrazovku nebo obrázek s těžkou perspektivou pro složitější maketu, ale dnes to zjednodušíme.

Můžete si pořídit svou vlastní fotografii nebo si ji stáhnout z bezplatného webu, jako je např Unsplash. Pro tento tutoriál nepoužijeme předpřipravenou maketu PSD, takže se nebudete muset obtěžovat s jejím hledáním.

Jak vytvořit maketu videa

Otevřete svůj obrázek ve Photoshopu.

Pokud jste si obrázek stáhli z bezplatného webu nebo jej pořídili vysoce kvalitním fotoaparátem, může být velikost docela velká. Velikost obrázku můžete zmenšit.

Klikněte obraz > Velikost obrázku. Konečné rozměry jsou na vás, ale doporučujeme šířku kolem 1200. Při změně velikosti dodržujte proporce obrazových vazeb. Klikněte OK.

Nyní vytvořte prostor, kde bude video sedět. Najděte rozměry svého původního videa; pokud promítáte obrazovku nahranou z telefonu, zjistěte rozměry obrazovky telefonu a pokud prohlížíte web se záznamem, můžete použít standardní 1680 x 1050, pokud neznáte přesné rozměry.

Pomocí nástroje Obdélník (U) klikněte na své plátno. Zobrazí se vyskakovací okno, ve kterém můžete zadat rozměry. Zadejte šířku a výšku záznamu obrazovky a klikněte OK. Odstraňte tah a vyberte barvu výplně černou nebo tmavě šedou.

Na vrstvu obdélníku klikněte pravým tlačítkem a přejděte na Převést na inteligentní objekt. Nyní můžete obdélník transformovat tak, aby dokonale zapadl na obrazovku. To znamená, že jakýkoli obrázek umístěný na inteligentním objektu bude mít stejnou transformaci tvaru.

Chcete-li svůj obdélník transformovat, použijte nástroj Transform. Můžete to najít tím, že přejdete na Upravit > Volná transformace nebo úderem cmd + T (Mac) nebo ctrl + T (Okna).

Nástroj Transform změní pouze velikost obdélníku. Změňte velikost na co nejpodobnější obrazovce. Poté použijte funkci Deformovat.

Znovu přejděte na Upravit menu tedy Přeměnit > Deformovat. To vám umožní přetáhnout a roztáhnout rohy, aby se dokonale shodovaly s vaší obrazovkou. Funguje to skvěle, pokud má váš obrázek přidanou perspektivu. Jakmile zarovnáte všechny rohy a hrany, dvakrát klikněte na obdélník. Pokud okraje nejsou správně zarovnány, použijte znovu nástroj Transform a možnost Deformovat, dokud nebudou.

Své video můžete vložit do svého chytrého objektu správné velikosti a tvaru. Klikněte Okno > Časová osa otevřete časovou osu animace. Ujistěte se, že je na časové ose videa, nikoli na animaci snímku.

Poklepejte na inteligentní objekt v panelu vrstev kliknutím na ikonu s papírem a čtvercem na miniatuře vašeho inteligentního objektu. Toto se otevře v novém okně.

Přetáhněte video do okna inteligentního objektu. Vaše video by mělo mít stejnou velikost jako váš obdélník. Pokud jsou rozměry vypnuté, můžete to snadno opravit: přetáhněte rohy, dokud nezapadnou do celého okna.

Pokud potřebujete oříznout okraje, můžete to udělat. Cokoli můžete vidět, je to, co se ukáže ve finální maketě. Až budete spokojeni, poklepáním potvrďte velikost a umístění.

Na časové ose videa nyní uvidíte dvě vrstvy časové osy: jednu pro obdélník a jednu pro nové video. Přetáhněte délku časové osy obdélníku tak, aby odpovídala délce videa. Tím zajistíte, že video bude vidět po celou dobu jeho trvání.

Kliknutím na tlačítko přehrát video zkontrolujte. Načtení může chvíli trvat, a proto se bude hrát pomaleji, než je skutečné načasování.

Chcete-li, aby obrazovka videa vypadala realističtěji, změňte režim prolnutí vrstvy videa. Můžete také snížit neprůhlednost ve vrstvě videa). Pohrajte si s různými nastaveními prolnutí, dokud nebudete šťastní. Pokud to chcete nechat bez tohoto kroku, je to také v pořádku. To poskytne jasnější pohled na obrazovku.

Nyní, chcete-li uložit video do své makety, stačí uložit okno inteligentního objektu. Můžete to udělat tak, že přejdete na Soubor > Uložit nebo bít cmd + S (Mac) nebo ctrl + S (Okna). Po uložení opusťte okno inteligentního objektu.

Vrátíte se do okna makety. Na místě obrazovky uvidíte své video.

Chcete-li uložit maketu, přejděte na Soubor > Vývozní > Vykreslit video… Zde můžete změnit velikost finální makety. Změna velikosti pomůže také s načítáním a celkovou velikostí souboru. Až budete s nastavením spokojeni, klikněte Poskytnout.

Výsledkem bude konečný video soubor MP4 s dokončenou maketou videa.

Posuňte své makety dále pomocí makety obrazovky videa

Pomocí videa ve svých modelech obrazovky budete moci sdílet více práce a zapojit více lidí. Tento dynamický styl makety vytvořený ve Photoshopu se snadno vyrábí a má vynikající výsledky.

Zatímco tuto techniku ​​můžete použít pro statickou maketu pouze pomocí obrázku, pomocí videa se naučíte nové dovednosti a povzbudíte lidi, aby se zabývali vaší prací déle. Video maketa je k vidění jen zřídka a překvapení upoutá pozornost každého, kdo se dívá.

Jak vyrobit maketu balení krabic ve Photoshopu

Přečtěte si další

O autorovi