Como criar uma maquete de tela de vídeo no Photoshop

Mockups são uma ótima maneira de mostrar seu trabalho rapidamente e em um ambiente ideal. Embora a maioria das pessoas use maquetes de imagem, uma maquete de vídeo chamará a atenção e manterá as pessoas envolvidas em seu trabalho. Adicionar um vídeo a uma tela é uma maneira legal de mostrar seu trabalho e também não é muito difícil de fazer.

O que é uma maquete de tela de vídeo?

Um mockup é uma maneira digital de prototipar um design ou aplicar um design ao seu produto em tempo real sem produzi-lo. As razões para isso são muitas, mas uma das principais razões para criar uma maquete é fazer com que seus designs, ilustrações ou qualquer coisa que você queira mostrar pareçam mais realistas. Isso ajuda seu público a visualizar como a peça ficará no final.

Em vez do tempo extra, dinheiro e esforço que seriam necessários para produzir um produto real, você pode criar uma maquete digital com sua arte, design, site etc.

Agora, uma maquete de tela animada é um conceito muito semelhante, mas com uma maquete em uma tela, como um telefone ou um computador. E em vez de uma imagem, a maquete mostrará um design ou vídeo em movimento.

Esses designs em movimento podem ser qualquer coisa, desde um vídeo até um protótipo de design de UX/UI ou uma gravação de tela.

Por que você deve usar uma maquete de tela animada?

Uma das melhores razões para criar uma maquete de tela animada é mostrar um site. É uma ótima maneira de mostrar um site que você criou em seu portfólio.

Usar uma maquete dá um pouco mais de criatividade em seu portfólio do que simples capturas de tela do seu site. É uma ótima maneira de diversificar a aparência dos seus modelos.

Se você deseja exibir um vídeo que criou, essa também pode ser uma maneira criativa de exibi-lo, em vez de apenas incorporar o vídeo do YouTube etc. No geral, uma maquete de tela animada é uma maneira divertida de exibir seu trabalho.

Como criar uma maquete de tela animada no Photoshop

Embora a maioria das pessoas conheça o Photoshop como uma ferramenta de edição de imagens, você também pode usá-lo para criar animações e vídeos. Então, aqui estão as etapas para criar uma maquete de vídeo usando o Photoshop.

Que tipo de vídeo você deve usar?

Existem muitas opções para sua maquete de tela animada. Um arquivo de vídeo menor funcionará melhor. Embora você possa usar essa técnica para exibir imagens de vídeo reais, o tamanho dificultará a renderização no Photoshop.

Por esse motivo, criaremos uma maquete rolando uma página da web. Usar um vídeo mais curto sem outros aspectos de design renderizará mais rapidamente e produzirá um resultado de alta qualidade.

Use um gravador de tela para criar um vídeo de sua tela. Isso pode ser feito em um celular ou desktop, dependendo do que você deseja que sua maquete esteja. Usaremos o Quicktime Player no Mac e o Nova gravação de tela opção, mas há muitos outras opções do Mac. Se você tem um iPhone, você pode ver como fazer tela de registro em um iPhone. Você não precisa de nenhum áudio nesta gravação.

Para o nosso vídeo, gravamos o site Makeuseof.com, mostrando uma série de artigos sobre design gráfico. Você pode gravar o que fizer sentido para você. Mantenha uma rolagem constante e certifique-se de que não seja muito rápido nem muito lento.

Quando sua curta gravação estiver concluída, salve-a como MP4 e coloque-a em uma pasta de fácil acesso.

Que tipo de foto você deve usar?

Para obter os melhores resultados nesta maquete, você deve usar uma foto que mostre uma tela desobstruída. Pode ser uma tela de celular, computador ou até mesmo uma tela de TV. Embora sua imagem possa mostrar alguma perspectiva, é melhor se a tela estiver voltada para você.

É possível use uma tela obstruída ou uma imagem com uma perspectiva pesada para uma maquete mais complicada, mas vamos simplificar hoje.

Você pode tirar sua própria foto ou baixar uma de um site isento de royalties, como Abrir. Não usaremos um modelo de PSD pré-fabricado para este tutorial, então você não precisará do incômodo de tentar encontrar um.

Como fazer a maquete de vídeo

Abra sua imagem no Photoshop.

Se você baixou a imagem de um site sem royalties ou a tirou com uma câmera de alta qualidade, o tamanho pode ser muito grande. Você pode reduzir o tamanho da imagem.

Clique Imagem > Tamanho da imagem. As dimensões finais ficam a seu critério, mas recomendamos uma largura de cerca de 1200. Mantenha as restrições de imagem em proporção ao alterar o tamanho. Clique OK.

Agora para criar o espaço onde o vídeo ficará. Encontre as dimensões do seu vídeo original; se você gravou de um telefone, encontre as dimensões da tela do telefone e, se gravou um site, pode usar um padrão de 1680 x 1050, a menos que saiba as dimensões exatas.

Usando a ferramenta Retângulo (U), clique em sua tela. Isso trará um pop-up no qual você pode especificar as dimensões. Coloque a largura e a altura da sua gravação de tela e clique OK. Remova o traço e escolha uma cor de preenchimento de preto ou cinza escuro.

Na camada do retângulo, clique com o botão direito e vá para Converter em objeto inteligente. Agora você pode transformar o retângulo para caber perfeitamente na tela. Isso significa que qualquer imagem colocada no objeto inteligente seguirá a mesma transformação de forma.

Para transformar seu retângulo, use a ferramenta Transformar. Você pode encontrar isso acessando Editar > Transformação Livre ou batendo cmd + T (Mac) ou ctrl + T (Janelas).

A ferramenta Transformar só mudará o tamanho do retângulo. Altere o tamanho para o mais semelhante possível à tela. Em seguida, use o recurso Distorcer.

Novamente, vá para o Editar cardápio, então Transformar > Distorcer. Isso permitirá que você arraste e estique os cantos para se encontrarem perfeitamente com sua tela. Isso funciona muito bem se sua imagem tiver alguma perspectiva adicional. Clique duas vezes no retângulo depois de alinhar todos os cantos e bordas. Se as bordas não estiverem alinhadas corretamente, use a ferramenta Transformar e a opção Distorcer novamente até que estejam.

Você pode inserir seu vídeo em seu objeto inteligente de tamanho e formato corretos. Clique Janela > Linha do tempo para abrir a linha do tempo da animação. Certifique-se de que esteja na linha do tempo do vídeo em vez de na animação do quadro.

Clique duas vezes no objeto inteligente no painel de camadas clicando no ícone com um papel e um quadrado na miniatura do seu objeto inteligente. Isso abre em uma nova janela.

Arraste seu vídeo para a janela do objeto inteligente. Seu vídeo deve ter o mesmo tamanho do retângulo. Se as dimensões estiverem erradas, você pode corrigi-lo facilmente: arraste os cantos até que caibam em toda a janela.

Se você precisar cortar quaisquer arestas, você pode fazer isso. Tudo o que você pode ver é o que será mostrado na maquete final. Quando estiver satisfeito, clique duas vezes para confirmar o tamanho e o posicionamento.

Agora você verá duas camadas de linha do tempo na linha do tempo do vídeo: uma para o retângulo e outra para o novo vídeo. Arraste a duração da linha do tempo do retângulo para corresponder à duração do vídeo. Isso garante que o vídeo será visto por sua duração.

Clique no botão play para verificar seu vídeo. Pode demorar um pouco para carregar e, portanto, reproduzir mais lentamente do que o tempo real.

Para tornar sua tela de vídeo mais realista, altere o modo de mesclagem da camada de vídeo. Você também pode diminuir a opacidade na camada de vídeo). Brinque com diferentes configurações de mistura até ficar satisfeito. Se você quiser deixá-lo sem essa etapa, tudo bem também. Isso dará uma visão mais clara da tela.

Agora, para salvar o vídeo em sua maquete, basta salvar a janela do objeto inteligente. Você pode fazer isso indo para Arquivo > Salvar ou bater cmd + S (Mac) ou ctrl + S (Janelas). Uma vez salvo, saia da janela do objeto inteligente.

Você retornará à janela de maquete. Você verá seu vídeo no lugar da tela.

Para salvar sua maquete, vá para Arquivo > Exportar > Renderizar vídeo… Aqui, você pode alterar o tamanho da maquete final. Alterar o tamanho também ajudará no carregamento e no tamanho geral do arquivo. Quando estiver satisfeito com suas configurações, clique em Renderizar.

Isso resultará em um arquivo de vídeo MP4 final com sua maquete de vídeo concluída.

Leve suas maquetes ainda mais com uma maquete de tela de vídeo

Ao usar vídeo em seus modelos de tela, você poderá compartilhar mais trabalhos e envolver mais pessoas. Esse estilo de maquete dinâmico criado no Photoshop é fácil de fazer e tem excelentes resultados.

Embora você possa usar essa técnica para uma maquete estática usando apenas uma imagem, ao usar o vídeo, você está aprendendo uma nova habilidade e incentivando as pessoas a se envolverem com seu trabalho por mais tempo. Uma maquete de vídeo é rara de se ver, e a surpresa vai chamar a atenção de quem estiver olhando.

Como fazer uma maquete de embalagem de caixa no Photoshop

Leia a seguir

Sobre o autor