Jak stworzyć makietę ekranu wideo w Photoshopie

Makiety to świetny sposób na szybkie pokazanie swojej pracy w idealnej oprawie. Podczas gdy większość ludzi używa makiet obrazów, makiety wideo przyciągną uwagę i utrzymają zaangażowanie ludzi w twoją pracę. Dodanie wideo do ekranu to fajny sposób na pokazanie swojej pracy i niezbyt trudny do wykonania.

Co to jest makieta ekranu wideo?

Makieta to cyfrowy sposób na prototypowanie projektu lub zastosowanie projektu do produktu w czasie rzeczywistym bez jego wytwarzania. Przyczyn tego jest wiele, ale jednym z głównych powodów tworzenia makiety jest sprawienie, aby Twoje projekty, ilustracje lub cokolwiek, co chcesz pokazać, wyglądały bardziej realistycznie. Pomaga widzom wyobrazić sobie, jak utwór będzie wyglądał na końcu.

Zamiast dodatkowego czasu, pieniędzy i wysiłku potrzebnego do wyprodukowania rzeczywistego produktu, możesz stworzyć cyfrową makietę zawierającą twoją sztukę, projekt, stronę internetową itp.

Teraz animowana makieta ekranu to bardzo podobna koncepcja, ale z makietą na ekranie, jak telefon lub komputer. A zamiast obrazu makieta pokaże ruchomy projekt lub wideo.

Te ruchome projekty mogą obejmować wszystko, od wideo po prototyp projektu UX/UI lub nagranie ekranu.

Dlaczego warto używać animowanej makiety ekranu?

Jednym z najlepszych powodów stworzenia animowanej makiety ekranu jest pokazanie strony internetowej. To świetny sposób, by pochwalić się w swoim portfolio stroną internetową, którą zaprojektowałeś.

Korzystanie z makiety daje nieco więcej kreatywności w Twoim portfolio niż proste zrzuty ekranu Twojej witryny. To świetny sposób na urozmaicenie wyglądu Twoich makiet.

Jeśli chcesz wyświetlić utworzony przez siebie film, może to być również kreatywny sposób na pokazanie go zamiast umieszczania filmu z YouTube itp. Ogólnie rzecz biorąc, animowana makieta ekranu to świetny sposób na pokazanie swojej pracy.

Jak stworzyć animowaną makietę ekranu w Photoshopie

Chociaż większość ludzi zna Photoshopa jako narzędzie do edycji obrazów, możesz go również używać do tworzenia animacji i filmów. Oto kroki do stworzenia makiety wideo za pomocą Photoshopa.

Jakiego rodzaju wideo należy używać?

Istnieje wiele opcji animowanej makiety ekranu. Mniejszy plik wideo będzie działał najlepiej. Chociaż możesz użyć tej techniki do wyświetlania prawdziwego materiału wideo, rozmiar utrudni renderowanie w programie Photoshop.

Z tego powodu stworzymy makietę przewijającą stronę internetową. Użycie krótszego filmu bez innych aspektów projektowych spowoduje szybsze renderowanie i uzyskanie wysokiej jakości wyników.

Użyj rejestratora ekranu, aby utworzyć wideo swojego ekranu. Można to zrobić na telefonie komórkowym lub komputerze stacjonarnym, w zależności od tego, na czym ma się znajdować makieta. Będziemy używać Quicktime Playera na Macu i Nowe nagrywanie ekranu opcja, ale jest ich mnóstwo inne opcje Mac. Jeśli masz iPhone'a, możesz zobaczyć jak wyświetlić nagranie na iPhonie. W tym nagraniu nie potrzebujesz żadnego dźwięku.

Na potrzeby naszego filmu nagraliśmy witrynę Makeuseof.com, na której można znaleźć szereg artykułów dotyczących projektowania graficznego. Możesz nagrać na ekranie wszystko, co ma dla Ciebie sens. Utrzymuj stały scroll i upewnij się, że nie jest ani za szybki, ani za wolny.

Po zakończeniu krótkiego nagrania zapisz je jako MP4 i umieść w łatwo dostępnym folderze.

Jakiego rodzaju zdjęcia należy użyć?

Aby uzyskać najlepsze wyniki w tej makiecie, powinieneś użyć zdjęcia, które pokazuje nie zasłonięty ekran. Może to być ekran mobilny, komputer, a nawet telewizor. Chociaż obraz może pokazywać pewną perspektywę, najlepiej jest, jeśli ekran jest skierowany głównie na ciebie.

Możliwe jest użyj zasłoniętego ekranu lub obraz z ciężką perspektywą dla bardziej skomplikowanej makiety, ale dzisiaj zachowamy prostotę.

Możesz zrobić własne zdjęcie lub pobrać je z witryny bez tantiem, takiej jak Unsplash. W tym samouczku nie będziemy używać gotowej makiety PSD, więc nie będziesz potrzebować kłopotów z jej znalezieniem.

Jak zrobić makietę wideo

Otwórz swój obraz w Photoshopie.

Jeśli pobrałeś obraz z witryny bez tantiem lub zrobiłeś go aparatem wysokiej jakości, rozmiar może być dość duży. Możesz zmniejszyć rozmiar obrazu.

Kliknij Obraz > Rozmiar obrazu. Ostateczne wymiary zależą od Ciebie, ale zalecamy szerokość około 1200. Zachowaj proporcje obrazu podczas zmiany rozmiaru. Kliknij ok.

Teraz stwórz przestrzeń, w której będzie siedzieć wideo. Znajdź wymiary swojego oryginalnego filmu; jeśli wyświetlasz ekran nagrany z telefonu, znajdź wymiary ekranu telefonu, a jeśli wyświetlasz nagraną stronę internetową, możesz użyć standardowego 1680 x 1050, chyba że znasz dokładne wymiary.

Używając narzędzia Prostokąt (U), kliknij swoje płótno. Spowoduje to wyświetlenie wyskakującego okienka, w którym możesz określić wymiary. Wprowadź szerokość i wysokość nagrania ekranu i kliknij ok. Usuń obrys i wybierz kolor wypełnienia czarny lub ciemnoszary.

Na warstwie prostokąta kliknij prawym przyciskiem myszy i przejdź do Konwertuj na inteligentny obiekt. Teraz możesz przekształcić prostokąt, aby idealnie pasował do ekranu. Oznacza to, że każdy obraz umieszczony na inteligentnym obiekcie będzie podlegał tej samej transformacji kształtu.

Aby przekształcić prostokąt, użyj narzędzia Przekształć. Możesz to znaleźć, przechodząc do Edytować > Swobodna transformacja lub uderzając cmd + T (Mac) lub Ctrl + T (Windows).

Narzędzie Przekształć zmieni tylko rozmiar prostokąta. Zmień rozmiar tak, aby był jak najbardziej zbliżony do ekranu. Następnie użyj funkcji Zniekształć.

Ponownie przejdź do Edytować menu, to Przekształcać > Zniekształcać. Umożliwi to przeciąganie i rozciąganie rogów, aby idealnie dopasować się do ekranu. Działa to świetnie, jeśli Twój obraz ma dodatkową perspektywę. Kliknij dwukrotnie prostokąt po wyrównaniu wszystkich rogów i krawędzi. Jeśli krawędzie nie są prawidłowo wyrównane, ponownie użyj narzędzia Przekształć i opcji Zniekształć, aż się pojawią.

Możesz wstawić wideo do inteligentnego obiektu o odpowiednim rozmiarze i kształcie. Kliknij Okno > Oś czasu aby otworzyć oś czasu animacji. Upewnij się, że jest na osi czasu wideo, a nie na animacji klatki.

Kliknij dwukrotnie obiekt inteligentny w panelu warstw, klikając ikonę z papierem i kwadratem na miniaturze obiektu inteligentnego. Otworzy się w nowym oknie.

Przeciągnij wideo do okna obiektu inteligentnego. Twój film powinien mieć taki sam rozmiar jak prostokąt. Jeśli wymiary są nieprawidłowe, możesz to łatwo naprawić: przeciągnij rogi, aż zmieszczą się w całym oknie.

Jeśli chcesz przyciąć jakiekolwiek krawędzie, możesz to zrobić. Wszystko, co zobaczysz, zostanie pokazane w ostatecznej makiecie. Gdy będziesz zadowolony, kliknij dwukrotnie, aby potwierdzić rozmiar i rozmieszczenie.

Zobaczysz teraz dwie warstwy osi czasu na osi czasu wideo: jedną dla prostokąta i jedną dla nowego wideo. Przeciągnij długość osi czasu prostokąta, aby dopasować długość wideo. Gwarantuje to, że film będzie widoczny przez cały czas jego trwania.

Kliknij przycisk odtwarzania, aby sprawdzić swój film. Załadowanie może zająć trochę czasu i dlatego gra będzie wolniejsza niż rzeczywisty czas.

Aby ekran wideo wyglądał bardziej realistycznie, zmień tryb mieszania warstwy wideo. Możesz także zmniejszyć krycie warstwy wideo). Baw się różnymi ustawieniami mieszania, aż będziesz zadowolony. Jeśli chcesz opuścić to bez tego kroku, to też w porządku. Da to wyraźniejszy widok ekranu.

Teraz, aby zapisać wideo w makiecie, po prostu zapisz okno obiektu inteligentnego. Możesz to zrobić, przechodząc do Plik > Zapisać lub uderzanie cmd + S (Mac) lub Ctrl + S (Windows). Po zapisaniu wyjdź z okna obiektu inteligentnego.

Wrócisz do okna makiety. Zobaczysz swój film w miejscu ekranu.

Aby zapisać swoją makietę, przejdź do Plik > Eksport > Renderuj wideo… Tutaj możesz zmienić rozmiar ostatecznej makiety. Zmiana rozmiaru pomoże również w ładowaniu i ogólnym rozmiarze pliku. Gdy będziesz zadowolony ze swoich ustawień, kliknij Renderowanie.

Spowoduje to powstanie końcowego pliku wideo MP4 z ukończoną makietą wideo.

Zabierz swoje makiety dalej dzięki makiecie ekranu wideo

Używając wideo w swoich makietach ekranowych, będziesz mógł dzielić się większą ilością pracy i angażować więcej osób. Ten dynamiczny styl makiety stworzony w Photoshopie jest łatwy do wykonania i daje doskonałe rezultaty.

Chociaż możesz użyć tej techniki do statycznej makiety, używając tylko obrazu, używając wideo, uczysz się nowej umiejętności i zachęcasz ludzi do dłuższego angażowania się w twoją pracę. Makieta wideo jest rzadkością, a niespodzianka przyciągnie uwagę każdego, kto spojrzy.

Jak zrobić makieta opakowania pudełka w Photoshopie

Czytaj dalej

O autorze