Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Gravit Designer
Webdesign

Comenzando Con Gravit Designer

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Gravit Designer es, en mi opinión, el siguiente gran programa editor de vectores. Es amigable con el usuario, de grado profesional, y realmente multi-plataforma ya que trabaja en el navegador, en Linux, Mac, ChromeOS y Windows, y más adelante estará disponible en iPad y Android también. Está bajo desarrollo activo con nuevas características siendo agregadas a un ritmo acelerado.

Y encima de todo eso, es 100% gratuito sin anuncios o métodos intrusivos de monetización. En las palabras de Alex de Gravit, cuando se le preguntó si el programa seguiría siendo gratuito:

"Si definitivamente permanecerá gratuito y nunca será lisiado por el estúpido freemium o lo que sea. Después podríamos ofrecer cosas adicionales para equipos que podrían ser de pago (ya que también necesitamos pagar esas cuentas del servidor) pero el Diseñador permanecerá gratuito ya que queremos que todos puedan tener acceso a una herramienta profesional de diseño gratuita."

En este tutorial te guiaré a través de las características que hacen tan prometedor a Gravit Designer. No entraremos mucho a detalle ni pondremos cada herramienta bajo el microscopio, en su lugar echaremos un amplio vistazo general para que tengas la mejor idea posible de lo que se incluye en este software. ¡Comencemos!

Instalación y Primera Ejecución

Si quisieras usar una de las versiones de escritorio de Gravit dirígete a designer.io/#download y toma el instalador para tu SO. (Nota que de momento hay  un error en los menús desplegables en la versión Linux, así que por ahora ustedes los pingüinos preferirán usar la versión de navegador en su lugar).

Para aquellos que preferirían usar la versión de navegador--la cuál tiene la ventaja de siempre ser la más actualizada, y de momento daría mejor rendimiento--ve a: designer.gravit.io/

Justo desde el comienzo las cosas se ponen geniales. Somos saludados por una pantalla de bienvenida que nos da la opción de establecer un alto y ancho predeterminados para nuestro documento. Sin embargo, también podemos dejar los campos de alto y ancho vacíos y nuestro lienzo será infinito; una característica fantástica para cuando no estás seguro de qué tamaño será tu diseño.

También en esta primera pantalla pasamos por cincuenta conjuntos predefinidos de dimensiones de las cuales elegir, con diecinueve ajustes preestablecidos para impresión, ocho para diseño de sitio web, quince para portadas y contenidos de redes sociales, seis para teléfonos y relojes, y siete para tabletas.

Tan bien como eso, si te registras para una cuenta gratuita Gravit Cloud puedes obtener acceso al nuevo rango de plantillas prefabricadas dando clic sobre la pestaña Nuevo desde Plantilla en el lado izquierdo de la pantalla de bienvenida.

Unas cuantas plantillas prefabricadas de redes sociales de Gravit

Aquí encontrarás cincuenta gráficos de redes sociales listos para usar, treinta y seis presentaciones de diapositivas, dieciocho carteles, veinticuatro gráficos de publicación Facebook, veintitres gráficos de blog, veintiseis carteles A4, y veinte gráficos de tarjetas. Todos están listos para usar como están, o pueden ser usados como base sobre la cuál iterar. Esta colección es nueva de hace un par de semanas, así que espera que crezca mientras pasa el tiempo.

Vista general Rápida de Interfaz

Afortunadamente, la interfaz de Gravit Designer es bastante intuitiva así que no deberías encontrarte particularmente perdido incluso si entras a explorar el software a ciegas. Aún echaremos un vistazo general rápido de los componentes clave.

Lo primero que tal vez quisieras saber es que la interfaz no tiene que ser morada. Si te gusta el morado puede dejarla como está, pero si prefieres una UI monocromo ve al menú principal en la esquina superior izquierda, elige Editar > Ajustes y selecciona ya sea "Tema Oscuro" o "Tema Claro".

Los usuarios de Sketch encontrarán la interfaz algo similar ya que el diseño es muy similar. A lo largo de la parte superior tenemos nuestra barra de herramientas con todas las herramientas que esperarías encontrar en una aplicación vectorial, tal como controles de movimiento de lienzo, trazado y creación de texto y herramientas de selección, volteado y rotado de forma, operaciones multi-forma, control de orden de apilamiento, y atajos de exportación y presentación. Nota también que múltiples documentos pueden ser abiertos al mismo tiempo y serán visibles por medio de pestañas hacia la parte superior derecha.

Gravit menu options

En el lado izquierdo tenemos tres pestañas: Capas, Librerías y Tutoriales. La pestaña tutoriales (a ser movida a Ayuda en la barra de menú con la versión 3.2.) es grandiosa para guía cuando comienzas a usar Gravit. La pestaña librerías te proporciona una colección extensa de recursos de arrastrar y soltar--estos son adicionales a las plantillas de las que hablamos arriba. La pestaña capas es la que tendrás abierta la mayoría del tiempo, ya que muestra una lista de tus páginas, (más sobre páginas a continuación), y, por supuesto, tus capas.

Del lado derecho tienes controles de diseño de contexto específico para tu objeto actualmente seleccionado. Si nada es seleccionado, los ajustes del documento se mostrarán en su lugar.

Páginas; Como Lienzos Con Bonus de "Powerpoint"

Las páginas en Gravit Designer son algo como un híbrido de las páginas y lienzos que podrías encontrar en otras aplicaciones. Cada página es como un documento auto-contenido, con sus propias dimensiones, sangría, margen y ajustes de color de lienzo. Comienzas con una sola página por defecto y agregas más dando clic al pequeño botón Crear Nueva Página en la parte superior del panel Páginas. Puedes entonces ver cualquier página seleccionándola en ese panel.

Si quieres usar páginas como generalmente usarías lienzos, activa el interruptor a la izquierda del botón borrar y verás todas tus páginas de una vez en "Modo multi-página". Estas páginas pueden ser seleccionadas, movidas, redimensionadas manualmente, o cambiadas a diferentes tamaños justo como si fueran documentos individuales. En modo multi-página también puedes duplicar páginas dando clic a su título sobre el lienzo para seleccionarlas, después ya sea ALT + arrastrar o presionar CTRL / CMD + D.

Las páginas de Gravit también tienen la increíble característica "Páginas Maestras". Con esta característica puedes configurar una página para actuar como una "página maestra", con elementos como fondos o encabezados que serán comunes a otras páginas. Entonces puedes establecer esas otras páginas para dibujar desde esta página maestra, trayendo todo su contenido, sobre el cuál creas elementos adicionales. Cuando actualizas los elementos en la página maestra, todas las otras páginas se actualizarán en tiempo real también.

Y en una característica muy genial, usando las páginas de Gravit tienes instantáneamente la habilidad de crear una presentación "como Powerpoint". Solo da clic al botón Play en la parte derecha de la barra de herramientas y cada una de tus páginas se vuelve una diapositiva. Presiona la flecha hacia abajo para ir a la siguiente diapositiva, y la flecha hacia arriba para regresar.

Gravity reproduciendo una presentación

Trazos y Formas

La creación de trazo y forma en Gravit tiene las herramientas familiares que esperarías en cualquier otro programa de gráficos vectoriales. Tenemos la herramienta pluma estándar para dibujar líneas rectas y curvas de bezier, y una serie de herramientas predefinidas de forma para líneas, rectángulos, elipses, polígonos, triángulos y estrellas.

Sin embargo, también tenemos una herramienta extra que es bastante útil, y esa es la herramienta bezigon. Si sostienes ALT mientras estás poniendo puntos con la herramienta bezigon, se generarán automáticamente curvas suaves alrededor de cada punto.

Una vez que los trazos y las formas son dibujados pueden alterar sus propiedades en la columna del lado derecho. Los trazos regulares pueden ser establecidos a abiertos o cerrados, haciendo sencillo cerrar un trazo que no estaba completo correctamente, o abrir un trazo para poder continuar agregando puntos. Las formas tienen ajustes específicos de contexto, tales como la habilidad de convertir elipses en formas como gráficas de pastel, o establecer el número de puntos que un polígono o estrella debería tener.

Texto Regular, y Texto en un Trazo

La herramienta texto también funciona como esperarías de usar otras aplicaciones. Con la herramienta texto seleccionada puedes dar clic sobre un punto para comenzar a teclear algún texto dimensionado dinámicamente, o puedes dar clic y arrastrar para dibujar una caja dentro de la que será contenido tu texto.

Y en una característica que será super útil para diseñadores web, si tecleas "lorem" y después presionas ESPACIO obtendrás un párrafo de "Lorem ipsum" de texto de contenedor generado de manera automática para ti.

Hacer que el texto siga un trazo es extremadamente sencillo con Gravit. Solo dibuja cualquier trazo o forma, selecciona la herramienta texto, pasa el ratón sobre tu trazo hasta que veas una línea roja aparecer junto con este, después da clic. Esto instanciará algún texto que seguirá la forma del trazo. El trazo puede ser modificado después y el texto actualizará su forma acordemente.

Cuando seleccionas el texto que has colocado en una ruta también tendrás acceso a interruptores en la columna del lado derecho para establecer el texto en el interior o exterior del trazo, y para revertir el texto. Y hay una manera sencilla de posicionar el texto - solo da clic y arrastra el pequeño marcador naranja al inicio del texto y eso es todo lo que se necesita.

Fuentes Google Integradas

La mayoría de los diseñadores habrán estado en el carrusel de la tipografía web varias veces antes: ir a Google Fonts, elegir una fuente, descargarla, instalarla, (reiniciar diseño de aplicación en algunos casos), seleccionar la fuente en la aplicación de diseño, repetir si no luce bien. O tal vez deberíamos solo usar Skyfonts en su lugar  para saltar el paso de "descargar e instalar".

Sin embargo, en Gravit Designer la selección Google Fonts entera está disponible en línea, lista para usar, así que usar fuentes web es exactamente tan sencillo como usar fuentes regulares.

De manera adicional, puedes importar tus propias fuentes cuando usas la versión web de Gravit con Archivo > Importar > Agregar fuentes...

Por supuesto la presencia de fuentes web no significa que no puedas usar fuentes de sistema--mientras estés usando una versión de escritorio de Gravit todas tus fuentes locales estarán disponibles también.

Múltiples Rellenos y Trazos

Algo que amo en Gravit, y otra característica con la que estarán familiarizados usuarios de Sketch, son múltiples rellenos y trazos. En muchas aplicaciones si quieres crear efectos de composición colocando, por ejemplo, ruido sobre imágenes de baldosa sobre color plano, necesitas duplicar tu forma meta cada vez. En Gravit eso no es necesario porque puedes agregar tantos rellenos y bordes como quieras a cualquier forma dada:

Cada relleno o borde se comporta como una capa separada, con su propio estado mostrado u oculto, modo de fusión, y ajustes de opacidad. Los rellenos también pueden ser ordenados en cualquier orden que quieras. Y debido a que puedes usar colores planos, texturas de imagen, degradados o ruido hay mucho espacio para la creatividad.

Efectos; Mejores Que Estilos de Capa

Los efectos en Gravit son mucho como los efectos de capa con los que estarás familiarizado de otras aplicaciones, pero igual que los rellenos y trazos no estás limitado a un efecto por capa; puedes tener tantos como quieras.

Los efectos incluyen sombras paralelas estándar (que hacen de resplandor externo), sombra interna (funge como resplandor interno), y superposición (degradado de color). Los efectos de trazo y superposiciones de patrón son por supuesto innecesarios debido a las herramientas existentes de relleno y trazo de Gravit. Sin embargo, también hay muchos efectos adicionales interesantes como "espejo", el cuál crea un efecto de reflejo debajo de la capa, o "sombra curva", la cuál crea una sombra como esta:

También hay un desenfoque gaussiano, una viñeta, un simple deslizador de todo. Todos estos efectos pueden ser puestos en capas y configurados como quieras, después ajustados y reconfigurados en cualquier momento en el proceso de diseño.

Estilos Compartidos; para Estados y Ahorro de Tiempo

Gravit tiene la habilidad de crear estilos que definen el relleno de una capa, borde, efectos y ajustes de texto. Estos estilos tienen un par de aplicaciones super benéficas.

Uno, puedes crear estilos para representar diferentes estados sobre la misma forma, tal como la apariencia por defecto y hover de un botón por ejemplo. Dos, puedes aplicar un estilo a múltiples objetos sobre el lienzo después cuando actualizas el estilo sobre uno de esos objetos puedes aplicarlo a los demás también.

Anclas y Semi-Responsividad

Los ajustes de ancla te permiten definir cómo una forma responderá cuando su padre es redimensionado, lo cuál en su momento te permite crear funcionalidad semi-responsiva y ahorrarte un montón de tiempo.

Duplicar página (parte superior) anclado superior, inferior y horizontal centro para controlar su respuesta a un padre redimensionado

Por ejemplo, si estás creando un UI que necesita trabajar en múltiples tamaños de pantalla, podrías crear tu diseño en un tamaño y después establecer puntos de anclaje para controlar como deberían estirarse los elementos del diseño. Podrías entonces hacer un duplicado de la página actual y redimensionarla, manteniendo la mayoría de tu diseño existente en tacto sin necesidad de re-hacerlo.

Terminando

Gravit Designer ya es un software fantástico, y muestra mucha promesa para lo que viene. En la siguiente liberación, versión 3.2, veremos la inclusión de símbolos, los cuáles para algunos usuarios podría ser la pieza final del rompecabezas de requerimientos. Para obtener un vistazo de todo lo que viene en las siguientes versiones revisa el mapa.

Gravit es poderoso, flexible, activamente desarrollado, realmente multiplataforma, y completamente gratuito. Así que cual sea tu razón para trabajar con vectores, absolutamente vale la pena revisar Gravit Designer.

Para aprender más visita: designer.io.

Advertisement
Advertisement
Advertisement
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.