Как да създадете макет на видео екран във Photoshop

Макетите са чудесен начин да покажете работата си бързо и в идеална обстановка. Докато повечето хора използват макети на изображения, видео макетът ще привлече вниманието и ще накара хората да бъдат ангажирани с работата ви. Добавянето на видео към екран е страхотен начин да покажете работата си и не е много труден за изпълнение.

Какво е макет на видео екран?

Макетът е дигитален начин за прототипиране на дизайн или прилагане на дизайн към неговия продукт в реално време, без да го произвеждате. Причините за това са много, но една основна причина за създаване на макет е да направите вашите дизайни, илюстрации или всичко, което искате да покажете, да изглежда по-реалистично. Помага на публиката да визуализира как ще изглежда парчето в края.

Вместо допълнителното време, пари и усилия, необходими за производството на действителен продукт, можете да създадете дигитален макет, включващ вашето изкуство, дизайн, уебсайт и т.н.

Сега, макетът на анимиран екран е много подобна концепция, но с макет на екран, като телефон или компютър. И вместо изображение, макетът ще покаже движещ се дизайн или видео.

Тези движещи се дизайни могат да бъдат всичко - от видео до прототип на UX/UI дизайн или запис на екрана.

Защо трябва да използвате макет на анимиран екран?

Една от най-добрите причини за създаване на анимиран макет на екрана е да покажете уебсайт. Това е чудесен начин да покажете уебсайт, който сте проектирали в портфолиото си.

Използването на макет дава малко повече креативност във вашето портфолио, отколкото обикновени екранни снимки на вашия уебсайт. Това е чудесен начин да разнообразите начина, по който могат да изглеждат вашите макети.

Ако искате да покажете видеоклип, който сте създали, това също може да бъде креативен начин да го покажете, вместо просто да вграждате видеоклипа от YouTube и т.н. Като цяло, анимираният макет на екрана е забавен начин да покажете работата си.

Как да създадете макет на анимиран екран във Photoshop

Докато повечето хора познават Photoshop като инструмент за редактиране на изображения, можете да го използвате и за създаване на анимации и видеоклипове. И така, ето стъпките за създаване на видео макет с помощта на Photoshop.

Какъв вид видео трябва да използвате?

Има много опции за вашия анимиран макет на екрана. По-малък видео файл ще работи най-добре. Въпреки че можете да използвате тази техника за показване на реални видеозаписи, размерът ще направи по-трудно изобразяването във Photoshop.

Поради тази причина ще създадем макет за превъртане на уеб страница. Използването на по-кратък видеоклип без други аспекти на дизайна ще направи по-бързо и ще доведе до висококачествен резултат.

Използвайте екранен рекордер, за да създадете видео на вашия екран. Това може да се направи на мобилен или настолен компютър, в зависимост от това на какво искате да бъде вашият макет. Ще използваме Quicktime Player на Mac и Нов запис на екрана вариант, но има много други опции за Mac. Ако имате iPhone, можете да видите как да направите екранен запис на iPhone. Нямате нужда от аудио в този запис.

За нашето видео записахме уебсайта Makeuseof.com, показвайки редица статии за графичния дизайн. Можете да записвате екрана, каквото има смисъл за вас. Поддържайте стабилно превъртане и се уверете, че не е нито твърде бързо, нито твърде бавно.

След като краткият ви запис приключи, запазете го като MP4 и го поставете в лесна за достъп папка.

Какъв вид снимка трябва да използвате?

За най-добри резултати в този макет трябва да използвате снимка, която показва безпрепятствен екран. Това може да бъде мобилен екран, компютър или дори телевизионен екран. Въпреки че изображението ви може да показва някаква перспектива, най-добре е екранът да е предимно насочен към вас.

Възможно е да използвайте запушен екран или изображение с тежка перспектива за по-сложен макет, но днес ще го направим просто.

Можете да направите своя собствена снимка или да изтеглите такава от безплатен сайт, като напр Unsplash. Няма да използваме предварително направен PSD макет за този урок, така че няма да имате нужда да се опитвате да го намерите.

Как да направите видео макет

Отворете вашето изображение във Photoshop.

Ако сте изтеглили изображението от безплатен сайт или сте го заснели с висококачествена камера, размерът може да е доста голям. Можете да намалите размера на изображението.

Щракнете върху Образ > Размер на изображението. Окончателните размери зависят от вас, но ние препоръчваме ширина от около 1200. Поддържайте пропорционалните ограничения на изображението, когато променяте размера. Щракнете върху Добре.

Сега да създадете пространството, където ще седи видеото. Намерете размерите на оригиналния си видеоклип; ако екранирате, записан от телефон, намерете размерите на екрана на телефона и ако екранизирате записан уебсайт, можете да използвате стандартен 1680 x 1050, освен ако не знаете точните размери.

Използвайки инструмента за правоъгълник (U), щракнете върху вашето платно. Това ще доведе до изскачащ прозорец, в който можете да посочите размерите. Поставете ширината и височината на записа на екрана и щракнете Добре. Премахнете линията и изберете цвят на запълване от черен или тъмно сив.

На слоя на правоъгълника щракнете с десния бутон и отидете на Преобразуване в смарт обект. Сега можете да трансформирате правоъгълника, за да пасне идеално на екрана. Това означава, че всяко изображение, поставено върху интелигентния обект, ще следва същата трансформация на формата.

За да трансформирате своя правоъгълник, използвайте инструмента Transform. Можете да намерите това, като отидете на редактиране > Безплатна трансформация или чрез удряне cmd + T (Mac) или ctrl + T (Windows).

Инструментът за трансформиране ще промени само размера на правоъгълника. Променете размера до колкото можете по-подобен на екрана. След това използвайте функцията Distort.

Отново отидете на редактиране меню, тогава Трансформирайте > Изкривява. Това ще ви позволи да плъзгате и разтягате ъглите, за да се съчетаят перфектно с вашия екран. Това работи чудесно, ако вашето изображение има някаква допълнителна перспектива към него. Щракнете двукратно върху правоъгълника, след като подредите всичките си ъгли и ръбове. Ако ръбовете не са правилно подредени, използвайте инструмента Transform и опцията Distort отново, докато станат.

Можете да вмъкнете вашето видео във вашия интелигентен обект с правилен размер и форма. Щракнете върху Прозорец > Времева линия за да отворите времевата линия на анимацията. Уверете се, че е на времевата линия на видеото, а не на анимацията на рамката.

Щракнете двукратно върху интелигентния обект в панела на слоевете, като щракнете върху иконата с хартия и квадрат върху миниатюрата за вашия смарт обект. Това се отваря в нов прозорец.

Плъзнете видеоклипа си към прозореца на смарт обекта. Видеото ви трябва да е със същия размер като правоъгълника ви. Ако размерите са изключени, можете лесно да го поправите: плъзнете ъглите, докато паснат на целия прозорец.

Ако трябва да изрежете някакви ръбове, можете да го направите. Каквото можете да видите, това ще бъде показано в окончателния макет. След като сте доволни, щракнете двукратно, за да потвърдите размера и разположението.

Сега ще видите два слоя на времевата линия на времевата линия на видеото: един за правоъгълника и един за новото видео. Плъзнете дължината на времевата линия на правоъгълника, за да съответства на дължината на видеоклипа. Това гарантира, че видеоклипът ще бъде видян през цялото време.

Щракнете върху бутона за възпроизвеждане, за да проверите видеоклипа си. Може да отнеме известно време за зареждане и следователно да играе по-бавно от действителното време.

За да направите вашия видео екран да изглежда по-реалистичен, променете режима на смесване на видео слоя. Можете също да намалите непрозрачността на видео слоя). Играйте с различни настройки за смесване, докато не сте доволни. Ако искате да го оставите без тази стъпка, това също е добре. Това ще даде по-ясен изглед на екрана.

Сега, за да запазите видеото във вашия макет, просто запазете прозореца на интелигентния обект. Можете да направите това, като отидете на Файл > Запазете или удряне cmd + S (Mac) или ctrl + S (Windows). След като запазите, излезте от прозореца на смарт обекта.

Ще се върнете към прозореца на макета. Ще видите видеоклипа си на мястото на екрана.

За да запазите своя макет, отидете на Файл > Експортиране > Изобразяване на видео… Тук можете да промените размера на окончателния макет. Промяната на размера също ще помогне при зареждането и общия размер на файла. След като сте доволни от настройките си, щракнете Изобразяване.

Това ще доведе до окончателен MP4 видео файл с вашия завършен видео макет.

Подобрете своите макети с макет на видео екран

Като използвате видео в макети на екрана си, ще можете да споделяте повече работа и да ангажирате повече хора. Този динамичен стил на макет, създаден във Photoshop, е лесен за изработка и има отлични резултати.

Въпреки че можете да използвате тази техника за статичен макет, използвайки само изображение, като използвате видео, вие научавате ново умение и насърчавате хората да се ангажират с работата ви за по-дълго. Рядко се вижда видео макет и изненадата ще привлече вниманието на всеки, който търси.

Как да направите макет на опаковка на кутия във Photoshop

Прочетете Следващото

За автора