Cách tạo Mockup màn hình video trong Photoshop

Bản mô phỏng là một cách tuyệt vời để hiển thị công việc của bạn một cách nhanh chóng và trong một khung cảnh lý tưởng. Mặc dù hầu hết mọi người sử dụng mô phỏng hình ảnh, nhưng mô hình giả video sẽ thu hút sự chú ý và khiến mọi người tham gia vào công việc của bạn. Thêm video vào màn hình là một cách thú vị để hiển thị công việc của bạn và cũng không quá khó để thực hiện.

Mô hình màn hình video là gì?

Mô hình giả là một cách kỹ thuật số để tạo mẫu thiết kế hoặc áp dụng thiết kế vào sản phẩm thời gian thực mà không cần sản xuất. Lý do cho điều này là rất nhiều, nhưng một lý do chính để tạo mô hình giả là để làm cho các thiết kế, hình minh họa hoặc bất cứ thứ gì bạn muốn thể hiện trông thực tế hơn. Nó giúp khán giả của bạn hình dung phần cuối sẽ trông như thế nào.

Thay vì tốn thêm thời gian, tiền bạc và công sức để tạo ra một sản phẩm thực tế, bạn có thể tạo một mô hình kỹ thuật số giới thiệu nghệ thuật, thiết kế, trang web, v.v. của bạn.

Giờ đây, một mô hình màn hình động là một khái niệm rất tương tự, nhưng với một mô hình trên màn hình, như điện thoại hoặc máy tính. Và thay vì một hình ảnh, mô hình sẽ hiển thị một thiết kế hoặc video chuyển động.

Những thiết kế chuyển động này có thể là bất cứ thứ gì từ video đến nguyên mẫu thiết kế UX / UI hoặc bản ghi màn hình.

Tại sao bạn nên sử dụng Mockup màn hình động?

Một trong những lý do tốt nhất để tạo mô hình màn hình động là để giới thiệu một trang web. Đó là một cách tuyệt vời để giới thiệu một trang web bạn đã thiết kế trong danh mục đầu tư của mình.

Sử dụng một mô hình tạo ra một chút sáng tạo trong danh mục đầu tư của bạn hơn là ảnh chụp màn hình đơn giản của trang web của bạn. Đó là một cách tuyệt vời để đa dạng hóa cách trông các mô hình của bạn.

Nếu bạn muốn hiển thị video bạn đã tạo, đây cũng có thể là một cách sáng tạo để hiển thị video đó thay vì chỉ nhúng video từ YouTube, v.v. Nhìn chung, mô hình màn hình động là một cách thú vị để hiển thị tác phẩm của bạn.

Cách tạo Mockup màn hình động trong Photoshop

Mặc dù hầu hết mọi người đều biết đến Photoshop như một công cụ chỉnh sửa hình ảnh, nhưng bạn cũng có thể sử dụng nó để tạo ảnh động và video. Vì vậy, đây là các bước để tạo một mockup video bằng Photoshop.

Bạn nên sử dụng loại video nào?

Có rất nhiều tùy chọn cho mô hình màn hình động của bạn. Tệp video nhỏ hơn sẽ hoạt động tốt nhất. Mặc dù bạn có thể sử dụng kỹ thuật này để hiển thị cảnh quay video thực, nhưng kích thước sẽ khiến việc hiển thị trong Photoshop khó hơn.

Vì lý do đó, chúng tôi sẽ tạo một mô hình giả để cuộn một trang web. Sử dụng video ngắn hơn mà không có các khía cạnh thiết kế khác sẽ hiển thị nhanh hơn và mang lại kết quả chất lượng cao.

Sử dụng trình ghi màn hình để tạo video màn hình của bạn. Điều này có thể được thực hiện trên thiết bị di động hoặc máy tính để bàn, tùy thuộc vào những gì bạn muốn mô hình của mình. Chúng tôi sẽ sử dụng Quicktime Player trên Mac và Ghi màn hình mới nhưng có rất nhiều tùy chọn Mac khác. Nếu bạn có iPhone, bạn có thể xem cách quay màn hình trên iPhone. Bạn không cần bất kỳ âm thanh nào trong bản ghi âm này.

Đối với video của chúng tôi, chúng tôi đã ghi lại trang web Makeuseof.com, hiển thị một loạt các bài báo về thiết kế đồ họa. Bạn có thể ghi lại màn hình bất cứ điều gì phù hợp với bạn. Giữ cuộn ổn định và đảm bảo cuộn không quá nhanh cũng không quá chậm.

Khi bản ghi ngắn của bạn hoàn tất, hãy lưu nó dưới dạng MP4 và đặt nó trong một thư mục dễ truy cập.

Bạn nên sử dụng loại ảnh nào?

Để có kết quả tốt nhất trong mô hình này, bạn nên sử dụng ảnh hiển thị màn hình không bị cản trở. Đây có thể là màn hình di động, máy tính hoặc thậm chí là màn hình TV. Mặc dù hình ảnh của bạn có thể hiển thị một số góc nhìn, nhưng tốt nhất là màn hình chủ yếu hướng về phía bạn.

Có thể sử dụng một màn hình bị che khuất hoặc một hình ảnh có phối cảnh nặng nề cho một mô hình phức tạp hơn, nhưng hôm nay chúng ta sẽ đơn giản hóa nó.

Bạn có thể chụp ảnh của riêng mình hoặc tải xuống ảnh từ trang miễn phí bản quyền, chẳng hạn như Unsplash. Chúng tôi sẽ không sử dụng mô hình PSD tạo sẵn cho hướng dẫn này, vì vậy bạn sẽ không cần phải cố gắng tìm kiếm một mô hình phức tạp.

Cách tạo video giả lập

Mở hình ảnh của bạn trong Photoshop.

Nếu bạn tải xuống hình ảnh từ một trang web miễn phí bản quyền hoặc chụp bằng máy ảnh chất lượng cao, kích thước có thể khá lớn. Bạn có thể giảm kích thước hình ảnh xuống.

Nhấp chuột Hình ảnh > Kích thước ảnh. Kích thước cuối cùng tùy thuộc vào bạn, nhưng chúng tôi khuyên bạn nên chiều rộng khoảng 1200. Giữ các ràng buộc hình ảnh theo tỷ lệ khi thay đổi kích thước. Nhấp chuột VÂNG.

Bây giờ để tạo không gian nơi video sẽ hiển thị. Tìm kích thước của video gốc của bạn; nếu bạn quay màn hình từ điện thoại, hãy tìm kích thước màn hình của điện thoại và nếu bạn quay màn hình một trang web, bạn có thể sử dụng kích thước chuẩn 1680 x 1050, trừ khi bạn biết kích thước chính xác.

Sử dụng công cụ Hình chữ nhật (U), nhấp vào khung vẽ của bạn. Thao tác này sẽ mang đến một cửa sổ bật lên mà bạn có thể chỉ định kích thước. Đặt chiều rộng và chiều cao của bản ghi màn hình của bạn và nhấp vào VÂNG. Xóa nét vẽ và chọn màu tô là đen hoặc xám đậm.

Trên lớp của hình chữ nhật, nhấp chuột phải và đi tới Chuyển đổi sang đối tượng thông minh. Bây giờ bạn có thể biến đổi hình chữ nhật để vừa khít với màn hình. Điều này có nghĩa là bất kỳ hình ảnh nào được đặt trên đối tượng thông minh sẽ tuân theo cùng một phép biến đổi hình dạng.

Để biến đổi hình chữ nhật của bạn, hãy sử dụng công cụ Transform. Bạn có thể tìm thấy điều này bằng cách truy cập Biên tập > Miễn phí chuyển đổi hoặc bằng cách đánh cmd + T (Mac) hoặc ctrl + T (Các cửa sổ).

Công cụ Transform sẽ chỉ thay đổi kích thước của hình chữ nhật. Thay đổi kích thước tương tự với màn hình nhất có thể. Sau đó sử dụng tính năng Distort.

Một lần nữa, hãy chuyển đến Biên tập menu, sau đó Biến đổi > Xuyên tạc. Điều này sẽ cho phép bạn kéo và kéo dài các góc để đáp ứng hoàn hảo với màn hình của bạn. Điều này hoạt động tốt nếu hình ảnh của bạn có thêm một số góc nhìn. Bấm đúp vào hình chữ nhật sau khi bạn đã xếp tất cả các góc và cạnh của mình. Nếu các cạnh không được xếp đúng hàng, hãy sử dụng lại công cụ Transform tool và tùy chọn Distort cho đến khi chúng đúng như vậy.

Bạn có thể chèn video của mình vào đối tượng thông minh có kích thước và hình dạng chính xác. Nhấp chuột Cửa sổ > Mốc thời gian để mở dòng thời gian hoạt ảnh. Đảm bảo nó nằm trên dòng thời gian video chứ không phải hoạt ảnh khung.

Nhấp đúp vào đối tượng thông minh trong bảng điều khiển lớp bằng cách nhấp vào biểu tượng bằng tờ giấy và hình vuông trên hình thu nhỏ cho đối tượng thông minh của bạn. Điều này sẽ mở ra trong một cửa sổ mới.

Kéo video của bạn vào cửa sổ đối tượng thông minh. Video của bạn phải có cùng kích thước với hình chữ nhật của bạn. Nếu các kích thước bị lệch, bạn có thể khắc phục dễ dàng: kéo các góc cho đến khi chúng vừa với toàn bộ cửa sổ.

Nếu bạn cần cắt bỏ bất kỳ cạnh nào, bạn có thể làm điều đó. Bất cứ điều gì bạn có thể thấy là những gì sẽ được hiển thị trong mô hình cuối cùng. Khi bạn đã hài lòng, hãy nhấp đúp để xác nhận kích thước và vị trí.

Bây giờ, bạn sẽ thấy hai lớp dòng thời gian trên dòng thời gian video: một cho hình chữ nhật và một cho video mới. Kéo độ dài của dòng thời gian của hình chữ nhật để khớp với độ dài của video. Điều này đảm bảo video sẽ được xem trong thời lượng của nó.

Nhấp vào nút phát để kiểm tra video của bạn. Có thể mất một lúc để tải và do đó phát chậm hơn so với thời gian thực.

Để làm cho màn hình video của bạn trông chân thực hơn, hãy thay đổi chế độ hòa trộn của lớp video. Bạn cũng có thể giảm độ mờ trên lớp video). Chơi xung quanh với các cài đặt hòa trộn khác nhau cho đến khi bạn hài lòng. Nếu bạn muốn bỏ đi mà không có bước này thì cũng không sao. Nó sẽ cung cấp một cái nhìn rõ ràng hơn về màn hình.

Bây giờ, để lưu video vào mô hình của bạn, chỉ cần lưu cửa sổ đối tượng thông minh. Bạn có thể làm điều này bằng cách đi tới Tập tin > Tiết kiệm hoặc đánh cmd + S (Mac) hoặc ctrl + S (Các cửa sổ). Sau khi lưu, hãy thoát ra khỏi cửa sổ đối tượng thông minh.

Bạn sẽ quay lại cửa sổ giả lập. Bạn sẽ thấy video của mình ở vị trí trên màn hình.

Để lưu mô hình của bạn, hãy truy cập Tập tin > Xuất khẩu > Kết xuất video… Tại đây, bạn có thể thay đổi kích thước của mô hình cuối cùng. Thay đổi kích thước cũng sẽ giúp tải và kích thước tệp tổng thể. Khi bạn hài lòng với cài đặt của mình, hãy nhấp vào Kết xuất.

Điều này sẽ dẫn đến một tệp video MP4 cuối cùng với mô hình video đã hoàn thành của bạn.

Nâng tầm mô phỏng của bạn xa hơn với Mô hình màn hình video

Bằng cách sử dụng video trong các mô hình màn hình, bạn sẽ có thể chia sẻ nhiều công việc hơn và thu hút nhiều người hơn. Kiểu mockup động này được tạo bằng Photoshop rất dễ thực hiện và mang lại kết quả xuất sắc.

Mặc dù bạn có thể sử dụng kỹ thuật này cho một mô hình tĩnh chỉ bằng hình ảnh, nhưng bằng cách sử dụng video, bạn đang học một kỹ năng mới và khuyến khích mọi người gắn bó với công việc của bạn lâu hơn. Rất hiếm khi nhìn thấy một mô hình video, và điều bất ngờ sẽ thu hút sự chú ý của bất kỳ ai nhìn vào.

Đọc tiếp

Thông tin về các Tác giả