Tableless

Busca Menu

Criando mockups usando o Smarts Object no Photoshop

Seja o primeiro a comentar por

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.com 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.

Eu vou mostrar como podemos criar o seu próprio mockup para apresentações usando o Smart Object e a ferramenta de perspectiva no Photoshop.

Escolhendo a imagem

Eu escolhi uma imagem aleatória na web de um smartphone e manipulei para retirar imagem que tem na tela dele, você pode usar essa imagem se quiser neste link ou uma outra de sua escolha.

mobile-mockup

Criando o Smart Object

Com a imagem selecionada, vamos criar o Smart Object que será o nosso arquivo que iremos aplicar as imagens. Eu vou criar um retângulo de 270x490px usando a ferramenta Shape ou (U) na tecla de atalho em um tamanho similar ao da tela do smartphone.

Quando se cria formas com a ferramenta Shape, ele já vêm como vetor, então o tamanho do retângulo não precisa ser exatamente igual, pois depois iremos redimensionar com a ferramenta de perspectiva.

mockup1

Com o retângulo selecionado Agora vai em Layer > Smart Objects > Convert to Smart Object e converta-o em um Smart Object:

mockup2

A miniatura muda quando transformamos em um Smart Object:

mockup3

Aplicando a Perspectiva

Feito isso podemos prosseguir. Vá em Edit > Transform > Perspective e o retângulo irá ficar com a seleção da perspectiva.

mockup4

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:

mockup5

A cor azul 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 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.

mockup6

Eu utilizei um shot que fiz para o Dribbble.com de uma interface para o iPhone, mas eu vou utilizar a mesma ideia para este exemplo.

mockup7

Salve este documento ctrl+s e automaticamente ele irá atualizar no arquivo de origem, onde trabalhamos com o Smart Object. Note que a miniatura assume a forma do arquivo que aplicamos.

mockup8

Resultado final

Eu apliquei um efeito de glass para melhorar o visual, e ficou assim.

mockup9

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 diferentes propostas. Existem diversos artigos na web que contém pacotes para download gratuitos ou você pode criar o seu pacote de acordo com a necessidade. Aqui tem o link para baixar esse mockup http://bit.ly/1c1p0go. Gostou? Comenta ai 🙂

Publicado no dia