Quando estamos criando alguma interface de usuário, seja para um site ou um aplicativo, sentimos a necessidade de nos preocupar como vamos apresentá-los ao cliente. Vejo em muitos sites como o Pixeden ou o Zippy Pixel diferentes tipos de recursos visuais para apresentar sua ideia o mais perto da realidade ou como se comportaria nos dispositivos que se destina esses projetos. Isso é conhecido como “mockup” onde o usuário abre um arquivo .psd no photoshop e aplica uma imagem dentro de uma área pré-definida dentro de outra imgem, como por exemplo, a página de um site dentro da tela de um monitor ou um tablet. A minha ideia inicial era disponibilizar alguns mockups gratuitos prontos de alguns sites especializados, mas pensei, peraí, por que ao invés de fazar isso, não ensino quem se interessa pelo assunto a criar o seu próprio mockup, desde o zero? então vamos lá pessoal, a seguir eu descrevo passo-a-passo como você pode criar o seu próprio mockup, divirta-se!

Criando um Mockup do zero

Bom inicialmente eu escolhi uma imagem aleatória, uma ilustração de um notebook. Você pode utilizar essa imagem Notebook ou qualquer outra a sua escolha. Notebook-1024x895

Criando o Objeto Inteligente (Smart Objects)

Com a imagem selecionada, vamos criar o Smart Object que será o nosso objeto que iremos aplicar as imagens. Vamos criar um retângulo usando a ferramenta Shape ou a tecla de atalho (U) em um tamanho similar ao da tela do notebook.   mockup01-1024x546 As formas com a ferramenta Shape são imagens vetoriais, logo o tamanho do retângulo não precisa ser exatamente igual ao da tela, pois iremos redimensionar com a ferramenta de perspectiva. Com o retângulo selecionado Agora vamos selecionar a ferramenta Objeto Inteligente (Smart Object) em Camada > Objetos Inteligentes > Converter para Objetos Inteligentes ou na ver são em inglês do Photoshop Layer > Smart Objects > Convert to Smart Object e converta-o em um Smart Object: smart-object1-1024x576   A miniatura muda quando transformamos em um Smart Object: mockup02  

Aplicando a Perspectiva

Feito isso podemos prosseguir. Vá em Edit > Transform > Perspective e o retângulo irá ficar com a seleção da perspectiva. mockup03-1024x546   Vamos adaptar o retângulo sobre a tela segurando o ctrl e clicando nos pontos pretos nas extremidades do retângulo. Comecei pelo lado esquerdo adaptando o restante do retângulo.Temos esse resultado: mockup04-1024x541   A cor branca ou seja qualquer cor que seja esteja em primeiro plano, não interfere no visual, pois será aplicado a interface em cima dela.

Utilizando o Smart Object

Clique duas vezes na camada (layer) que está como Smart Object e ele irá abrir em formato editável com a extensão .psb. É neste arquivo que aplicaremos a nossa interface. objeto_smart   Agora vamos abrir uma imagem qualquer que iremos usar em nosso Smart Object. Eu utilizei um screenshot da home page da Auris-ID. Você pode utilizar está imagem cliclando aqui. mockup05   Agora selecione a imagem utilizando as teclas de atalho CTRL+A e em seguida copie a imagem utilizando as teclas CTRL+C. Agora cole a imagem (CTRL+V) dentro do objeto Inteligente (Smart Object) e ajuste-o as dimensões do mesmo. Não me preocupei muito com a proporção, a ideia aqui é ensina-lo todo o processo. Em seguida clique em Arquivo -> Salvar, automaticamente o Photoshop irá atualizar no arquivo de origem, onde trabalhamos com o Smart Object. Note que a miniatura assume a forma do arquivo que aplicamos.   smart-object4 (1)

Resultado final

  Finalmente temos o resultado final de nosso mockup.   Notebook_mockup_final-1024x895 Esta é uma forma de como podemos aplicar e criar diversas formas de mockups para exibirmos nossos trabalhos e essa técnica pode ser utilizado para diversos tipos de aplicações em diversos projetos. Como comentei no início deste tutorial, existem diversos sites na web que contém pacotes para download gratuitos ou você pode criar o seu pacote de acordo com a necessidade. Clique aqui para baixar o mockup. Até a próxima!