Presentamos el primer creador de UI en 3D para diseñadores web
Descubre la forma más fácil de crear UI para 3D y AR. Conoce la función de importación avanzada de SVG de Vectary.
Diseño de UI como nunca antes se había hecho
Con una industria creativa en constante evolución, que desafía los límites y avanza a pasos agigantados, es fundamental estar al día de las nuevas tendencias. Los diseñadores enfocados en 2D suelen utilizar formatos y herramientas vectoriales al crear prototipos de nuevas UI. La nueva función de Vectary ofrece un punto de encuentro entre las herramientas creativas 2D y 3D con el fin de simplificar el proceso de diseño. Vectary es la única plataforma de diseño 3D que ayuda a acercar el diseño 3D y AR a los diseñadores 2D.
La idea principal de esta función es que los diseñadores 2D de hoy en día se convertirán, sin duda, en los diseñadores de UI 3D del mañana. La mayoría de las interfaces están pasando poco a poco al espacio 3D y de AR.
Ventajas de la nueva importación de SVG de Vectary
La importación de SVG aporta varias ventajas a este campo:
- Vectary guarda los archivos SVG como objetos vectoriales, por lo que tienes todo el control sobre la calidad del trazado, el mallado y la rasterización.
- Puedes ajustar fácilmente todos los parámetros del archivo SVG en un único panel y revertir los cambios en cualquier momento del proceso creativo.
- Tú decides si quieres trabajar con el archivo SVG como una imagen 2D o como una geometría 3D.
Cómo empezar a prototipar una maqueta de UI en 3D y AR:
- Descarga tu archivo SVG.
- Arrastra y suelta el archivo en Vectary. Al principio aparecerá como una imagen 2D rasterizada. En el panel derecho se mostrará un menú del objeto SVG.
- En la pestaña Geometry encontrarás 3 propiedades que puedes editar: “Segments”, “Offset” y “Extrude”. Al aumentar el valor de “Extrude”, el objeto adquiere un aspecto 3D; cuanto mayor sea el valor, más grueso será el objeto. “Segments” define la calidad de las formas 2D convertidas en geometría 3D: a mayor valor, más preciso será el objeto. Ten en cuenta que esto aumentará el tamaño del archivo exportado. En cuanto a la función “Offset”, básicamente descompone el objeto en diferentes capas según la estructura del SVG. Después, las capas se distancian en la tercera dimensión, lo que te ofrece una vista explosionada.
- Haz clic derecho en el objeto y luego en “Convert To Geometry” para convertir el archivo SVG en 3D. Ahora puedes cambiar su color y materiales, aplicar varias funciones 3D como Bend, o editar toda la malla accediendo al modo Edit (pulsa Enter con el objeto seleccionado)
- El modelo 3D básico ya está listo. Ahora puedes empezar a añadir varios fondos y opciones de iluminación.
- Cuando hayas terminado, puedes exportar el proyecto como un archivo PNG o 3D, o incrustarlo en tu web para que cualquiera pueda verlo como un elemento 3D interactivo con vista previa de AR.
Consejo: Cómo exportar un archivo SVG en Figma para lograr el efecto de UI 3D por capas en Vectary
- La estructura de tu archivo SVG determina el espacio entre los objetos en 3D. Cuanto más profunda sea una capa o un grupo en la estructura raíz del archivo, más arriba aparecerá en la configuración de SVG de “Geometry” en Vectary al utilizar “Offset by structure”.
Crea logotipos en 3D y AR
Usa Vectary para crear logotipos 3D que se puedan ver como un elemento 3D interactivo en tu web o como un objeto en realidad aumentada. Solo tienes que arrastrar y soltar el archivo SVG de tu logotipo 2D en la escena y aplicarle extrusión en los ajustes de Geometry del panel derecho.
Muestra tu diseño de UI 3D en tu web y en realidad aumentada
Envuelve y deforma UI y logotipos 3D
Otro ejemplo de uso sería adaptar la UI o el logotipo alrededor de un objeto. Podría tratarse de una UI que se presente en realidad aumentada o de una etiqueta que envuelva una botella. Puedes experimentar con herramientas de “Deform” como “Bend” para conseguirlo. La nueva importación de archivos SVG de Vectary abre nuevas posibilidades para los diseñadores 2D, sobre todo a la hora de crear maquetas y probar distintos escenarios.
