Criando mockups usando o Smarts Object no Photoshop

Criando mockups simples no Photoshop.

Quando estamos criando alguma interface de usurio, 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 prprio mockup para apresentaes usando o

Smart Object e a ferramenta de perspectiva no Photoshop.

Escolhendo a imagem

Eu escolhi uma imagem aleatria 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.

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 retngulo 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 vm como vetor, ento o

tamanho do retngulo no precisa ser exatamente igual, pois depois iremos

redimensionar com a ferramenta de perspectiva.

Com o retngulo selecionado Agora vai em Layer > Smart Objects > Convert to

Smart Object e converta-o em um Smart Object:

A miniatura muda quando transformamos em um Smart Object:

Aplicando a Perspectiva

Feito isso podemos prosseguir. V em Edit > Transform > Perspective e o retngulo

ir ficar com a seleo da perspectiva.

Vamos adaptar o retngulo sobre a tela segurando o ctrl e clicando nos pontos pretos

nas extremidades do retngulo. Comecei pelo lado esquerdo adaptando o restante do

retngulo.Temos esse resultado:

A cor azul ou seja qualquer cor que seja esteja em primeiro plano, no 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

editvel com a extenso .psb. neste arquivo que aplicaremos a nossa interface.

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.

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.

Resultado final

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

Esta uma forma de como podemos aplicar e criar diversas formas de mockups para

exibirmos nossos trabalhos e essa tcnica pode ser utilizado para diversos tipos de

aplicaes em diferentes propostas. Existem diversos artigos na web que contm

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

http://tableless.com.br/criando-mockups-usando-o-smarts-object-no-photoshop/