Advertisement
  1. Web Design
  2. UX/UI

Dica Rápida: Como Criar Maquetes em Perspectiva no Sketch

Scroll to top
Read Time: 2 min

() translation by (you can also view the original English article)

Manipular gráficos em três dimensões (adicionando perspectiva com ponto de fuga ou em um plano isométrico) pode ser bem útil para maquetes. Nessa dica rápida, usaremos o plugin "Magic Mirror" que nos ajudará a criar perspectivas no Sketch.

Assista o Screencast

Digamos que trabalhamos em um aplicativo para iOs e queremos uma imagem destaque no site com alguém segurando um iPhone num ângulo, mostrando a UI do aplicativo. Obter isso através dos métodos tradicionais no Sketch é complicado, então saremos o plugin Magic Mirror para Sketch para nos ajudar.

Instalando Magic Mirror

Há diversas maneiras de instalar esse plugin, seja por download e instalação pelo site; ou usando o Sketch Toolbox para ajudá-lo a manipular plugins mais intuitivamente.

Uma vez instalado, volte ao Sketch e vá em Plugins > Magic Mirror 2 > Enable Magic Mirror.

Defina uma Área

Com tudo preparado, temos que definir uma área no Sketch, selecioná-la e especificar uma prancheta dentro da caixa de diálogo do Magic Mirror. O conteúdo dessa prancheta será espelhedo na área selecionada. Usando o app do iOS como exeplo, podemos obter algo assim:

magic mirrormagic mirrormagic mirror
Area espelhada com prancheta do "iPhone 7 Plus"

Com a prancheta espelhada na área selecionada, podemos rotacionar, girar e até (na versão PRO do plugin), dizer se é uma versão @1x ou @2x de resolução.

Modelos

Um ponto bacana do plugin são seus modelos. Visite o site e encontrará uma seção com modelos disponíveis para usar. Alguns são pagos, mas a maioria é gratuita.

Device and Wood is freeDevice and Wood is freeDevice and Wood is free
"Device and Wood" é gratuito

Resumindo

É assim que se pode usar o plugin Magic Mirro para ajudar a criar maquetes em perspectiva. Acho esse plugin útil e não esqueça de ver o que há de recente na categoria de modelos para Sketch no Themeforest!

Sketch templates category on ThemeforestSketch templates category on ThemeforestSketch templates category on Themeforest
Escolha entre 100 modelos para Sketch no Themeforest

Leitura Útil

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.