Apresentamos o primeiro criador de UI 3D para web designers
Descobre a forma mais fácil de criar UI para 3D e AR. Conhece a funcionalidade avançada de importação de SVG do Vectary.
Design de UI de uma forma nunca antes vista
Com a indústria criativa em constante evolução, a quebrar barreiras e a dar grandes passos, é necessário estar a par das novas tendências. Os designers que se focam em 2D usam geralmente formatos e ferramentas vetoriais ao criar protótipos para novas UI. A nova funcionalidade do Vectary oferece uma interseção entre ferramentas criativas 3D e 2D, com o objetivo de simplificar o processo de design. O Vectary é a única plataforma de design 3D que ajuda a aproximar o design 3D e AR dos designers 2D.
A ideia principal por trás desta funcionalidade é que os designers 2D de hoje se tornarão, com toda a certeza, os designers de UI 3D de amanhã. A maioria das interfaces está agora a transitar lentamente para o espaço de AR e 3D.
Benefícios da nova importação de SVG do Vectary
A importação de SVG traz várias vantagens para esta área:
- O Vectary guarda os ficheiros SVG como objetos vetoriais, pelo que tens controlo total sobre a qualidade do traçado, da malha e da rasterização.
- Todas as definições do ficheiro SVG podem ser facilmente ajustadas num único painel e revertidas a qualquer momento durante o processo criativo.
- Cabe-te a ti escolher se queres trabalhar com o ficheiro SVG como uma imagem 2D ou como geometria 3D.
Como começar a criar protótipos de um mock-up de UI 3D e AR:
- Descarrega o teu ficheiro SVG.
- Arrasta e solta o ficheiro para o Vectary. Ao início, aparecerá como uma imagem 2D rasterizada. No painel direito, aparecerá um menu do objeto SVG.
- No separador Geometry, encontras 3 propriedades que podes editar: “Segments”, “Offset” e “Extrude”. Ao aumentares o valor de “Extrude”, o teu objeto ganha um aspeto 3D - quanto maior for o valor, mais espesso será o objeto. “Segments” define a qualidade das formas 2D convertidas em geometria 3D - quanto maior for o valor, mais preciso se torna o objeto. Tem em atenção que isto aumentará o tamanho do ficheiro exportado. No que toca à função “Offset”, esta basicamente divide o objeto em diferentes camadas com base na estrutura do SVG. As camadas são depois espaçadas na terceira dimensão, o que te dá uma vista explodida.
- Clica com o botão direito no objeto e depois em “Convert To Geometry”; o ficheiro SVG é convertido em 3D. Agora podes alterar a sua cor e materiais, várias funções 3D como Bend, ou editar toda a malha ao entrar no modo Edit (prime Enter com o objeto selecionado)
- O modelo 3D básico está pronto. Agora podes começar a adicionar vários fundos e opções de iluminação.
- Quando terminares, podes exportar o projeto como um ficheiro PNG, um ficheiro 3D ou incorporá-lo no teu website para que qualquer pessoa o veja como um elemento 3D interativo com pré-visualização em AR.
Dica: Como exportar um ficheiro SVG no Figma para obteres o efeito de UI 3D em camadas no Vectary
- A estrutura do teu ficheiro SVG determina o espaçamento entre os objetos em 3D. Quanto mais profunda estiver uma camada ou grupo na estrutura raiz do ficheiro, mais acima aparecerá nas definições de SVG em “Geometry” do Vectary ao usar o “Offset by structure”.
Cria logótipos 3D e AR
Usa o Vectary para criares logótipos 3D que podem ser visualizados como um elemento 3D interativo no teu website ou como um objeto em realidade aumentada. Basta arrastares e soltares o ficheiro SVG do teu logótipo 2D para a cena e fazeres a extrusão nas definições de Geometry no painel direito.
Mostra o teu design de UI 3D no teu website e em Realidade Aumentada
Envolve e deforma UI e logótipos 3D
Outro exemplo de utilização seria envolver a UI ou o logótipo em redor de um objeto. Poderá ser uma UI apresentada em realidade aumentada ou um rótulo que envolve uma garrafa. Podes experimentar ferramentas de “Deform”, tais como “Bend”, para conseguir esse efeito. A nova importação de ficheiros SVG do Vectary abre novas possibilidades para os designers 2D, especialmente no que toca a criar mock-ups e a testar diferentes cenários.
