Criando mockups usando o Smarts Object no Photoshop - Tableless - Website com artigos e textos sobre Padrões Web, Design, Back-end e Front-end tudo em um só lugar.
Acesse nosso Fórum
Guia p/ iniciantes
Anuncie conosco
Escreva conosco
Fale conosco
HTML
JavaScript
ReactJS
jQuery
AngularJS
Ajax
EmberJS
Elm
CSS
CSS 3
Sass
Less
Back-end
PHP
JAVA
MySql
ASP.NET
Soft Skill
Carreira
Notícias
Mercado
Eventos e Workshops
Extras
Traduções
Série Bonito de se ver
Apresentações e Slides
Convertidos
Freebies
Podcasts
Vídeos tutoriais
O Básico
Na prática
Mais categorias
GIT
Design / UX
WordPress
Joomla
Laravel
Acessibilidade
Web Semântica
Microdata
SEO
Agile e Gestão
Mercado
Tecnologia e Tendências
Browsers
JAMStack
Ferramentas
Meteor
Criando mockups usando o Smarts Object no Photoshop
Criando mockups simples no Photoshop.
por Flavio Santana 29/07/2013 ~ 3 min. / 480 palavras
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.
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.
Com o retângulo 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 retângulo irá ficar com a seleção da perspectiva.
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:
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.
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 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 https://bit.ly/1c1p0go. Gostou? Comenta ai 🙂