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/