Menu

Curso Básico De Invision Studio

Lecciones del Curso Gratuito

Introducción

Invisión estudio es una herramienta de invision para el diseño prototipado y animación de interfaces es totalmente gratuita disponible tanto para mac o windows posee un flujo de trabajo parecido al de adobe es ni firma o sketch siendo compatible con este último donde de igual manera podremos compartir nuestros proyectos para colaboraciones en visión estudio al igual que su competencia puede editar gráficos vectoriales o restar izados al igual que diseño response trabajando con capas y páginas y como siempre ha sido la posibilidad de poder animar nuestros prototipos ingresando en su página web podemos ya una vez sumergirnos en lo que es esta plataforma dentro de la página disponemos de material necesario para irnos desenvolviendo en este programa y como invision ya nos ha estado ofreciendo tenemos la posibilidad de compartir nuestros proyectos y trabajar con colaboraciones y lo más interesante disponemos de un flujo de trabajo específicamente para la animación de nuestros prototipos si eres nuevo en este tipo de plataformas o estás incursionando en lo que es el diseño de prototipos o diseño bits estaré subiendo este canal una serie de tutoriales sobre invision studio donde estaría incursionando paso a paso sobre este programa y las herramientas que ofrecen aquí al tema y nos vemos en un próximo vídeo.

Interfaz De Invision

Hola a todos aguiar tema y esta es la primera parte del curso de invision estudio al iniciar el programa podemos ingresar de una vez nuestra cuenta de invision aunque esto no es inconveniente para poder trabajar antes de crear un proyecto disponemos de varias medidas ya prediseñadas o plantillas en caso de no necesitar alguna podemos crear una nueva en base a nuestro proyecto así como mencioné en el vídeo anterior invistió un estudio es capaz de importar y leer archivos de sketch así que si poseemos alguno podemos agregarlo o importarlos desde nuestra computadora también se nos presenta material de apoyo y explicaciones sobre la interfaz del programa muy bien ahora crearé un proyecto sin medida alguna una vez dentro de la interfaz en visión nos da un pequeño tour de todas las aplicaciones y todos los medios que nos ofrecen si deseamos saltar este paso no es totalmente necesario otra característica es que ya viene predefinido con el tema oscuro para cambiarlo realizamos lo siguiente nos dirigimos a view vista vamos a la opción de temas y elegimos el tema claro si hemos trabajado ya anteriormente con aplicaciones o programas de diseño de interfaz no tenemos la gran similitud que tiene en visión estudio con otros programas de este ámbito como el apartado de páginas la posibilidad de importar nuestras librerías las páginas y las capas donde encontraremos un filtro en caso de que tengamos un proyecto muy extenso busquemos la capa que nos interesa o la página que nos interesa de igual manera tenemos la posibilidad de nombrar cada página y capa dando doble clic es un nombre muy bien el tema pero dónde están las herramientas y cómo hago para trabajar todo lo que respecta a las herramientas incluso crear el art words se encuentra en este símbolo además encontramos cada una de las herramientas y opciones desde crear un árbol figuras herramientas como la pluma cada una con sus respectivos comandos muy bien ahora crearemos un árbol al seleccionar esta opción vuelve a las plantillas en caso de querer una medida personalizada podemos agregarla ya una vez con nuestro amor ahora crearemos una figura nótese que al crear este elemento se habilitan las opciones de edición del lado derecho estas son la alineación la posición los modos de fusión el relleno las sombras y los bordes en el relleno trabajaremos todo lo que respecta al color trabajamos desde una paleta que nos dispone ya del programa podemos agregarlo directamente desde nuestro proyecto como podemos agregar nosotros mismos de igual manera si trabajamos una paleta personalizada podemos agregarla a nuestro proyecto para guardarla y trabajarla posteriormente y como todo buen programa de diseño de interfaz encontramos las sombras externas e internas con sus respectivos controles el relleno de nuestros elementos no solo puede ser un color sólido también podemos crear un relleno o aplicarle una imagen para ello vamos a la opción de color vamos al icono de imagen y seleccionamos una imagen desde nuestro computador espero poder haberlos ayudado con esta primera parte del curso de invision estudio recuerda apoyar el canal si te ha sido de ayuda es hablar tema.

Artboards En Invision

Bienvenidos a la segunda parte del tutorial de invision estudios para avanzar más rápido en el diseño de interfaz y en los próximos tutoriales este tutorial se va a enfocar en el árbol ya que en los programas de diseño de interfaz el árbol y las capas y de cómo lo organizamos y lo trabajemos definirá el diseño en general y posteriormente su animación muy bien primero tengamos en cuenta que las vistas y las modificaciones que realicemos a nuestro artwork no afectarán a los elementos que lo componen tal es el caso del pack durán las grillas las guías y las columnas dentro de nuestras mesas de trabajo se irán acumulando nuestros elementos clasificadas del lado izquierdo conocidas ya comúnmente como capas identificadas por si es un elemento un texto una imagen o un símbolo donde se puede organizar o renombrar cada elemento es principio básico en el diseño de interfaz el organizar nuestros elementos esto debido a que tenemos que tener sumo cuidado en el control de ellos por lo tanto tendremos control del diseño en general y hablando de organización también podemos crear grupos de elementos dentro de nuestros árboles al igual que a nuestros elementos podemos duplicar los artworks para ello los seleccionamos y lo arrastramos con el presionado una pista muy importante sobre este sistema de trabajo es que los elementos sólo serán visibles al hardware donde pertenecen estos elementos no serán visibles a menos que entren en el hardware nótese que duplicado un elemento de un árbol a otro pero aunque lo he duplicado del artwork número uno al árbol copia este no es visible porque se duplicó en el primer árbol y para verlo tengo que arrastrarlo al árbol donde está visible es decir en el hardware donde está ubicado en las capas como mencioné anteriormente es posible modificar el agua desde sus dimensiones posición grillas fondo o incluso la animación además de seleccionar cuál va a ser nuestro árbol principal seleccionando y dando clic en este icono en forma de casa [Música] por último tenemos la exportación de invision al seleccionar un elemento o nuestro árbol se habilita la opción de exportación es tan sencillo como definir el tamaño el nombre de sufijo o prefijo y el tipo de archivo y bueno hasta aquí esta segunda parte de invision estudio desde este punto todo lo que viene es diseño animación y prototipado y todo lo que nos ofrece invision por ahora hasta un próximo vídeo.

Textos y Pluma

Hola a todos les hablar tema bienvenidos a la tercera parte de invision estudio para empezar rápidamente iniciaremos con un nuevo art word en el panel de herramientas podemos agregar directamente una imagen aunque si queremos trabajar más rápido podemos utilizar la tecla i notarán que dependiendo de la resolución de la imagen esto ocupará un espacio mucho mayor que nuestros hardware ya que como trabajamos prototipos esto no suelen tener un gran tamaño en píxeles así que hay que ajustar un poco ya una vez hemos ajustado la imagen agregamos un texto podemos agregar los del panel de herramientas o simplemente utilizar la tecla t a decir verdad la adición del texto es bastante convencional al igual que otros elementos que hemos trabajado y otros por agregar cada uno presenta sus respectivos controles estos incluyen desde la tipografía sus familias el interlineado la justificación el carmín e incluso modos de fusión la última herramienta que nos queda de las opciones de herramientas es la pluma la pluma como cualquier otro programa trabaja de manera prácticamente igual sólo que en visión presenta algunas peculiaridades podemos ajustar ángulos de 45 grados oprimiendo la tecla shift aunque como otros programas éste no presenta alguno de los atajos que se usan comúnmente en esta herramienta si les interesa más información en uno de mis primeros vídeos llamado a la pluma pueden encontrar bases de cómo utilizarla como ven al crear una forma podemos seguir agregando nodos o podemos quitarlos dándole clic y suprimir y como he mencionado antes no existen los atajos de teclado en cambio del lado derecho tenemos las opciones de edición de nodos o béziers donde podemos redondear o ajustar el trayecto de nuestro nudo tomemos en cuenta que aunque estos programas son de edición vectorial no trabajaremos vectores complejos como el diseño de íconos logotipos o ilustraciones por último pero muy importante nos quedan los componentes como opción en nuestras capas en la siguiente tarjeta pueden ingresar al vídeo de cómo invision utilizar los componentes y cómo lo utilizamos nosotros para gestionar de mejor manera nuestra interfaz les hablar tema muchas gracias por ver no olvides suscribirse a apoyar el canal chau.

Iconos Y Librerías

Hola a todos les habla el tema bienvenidos a la cuarta parte del tutorial de invision estudio en esta parte aprenderemos todo lo referente a los componentes muy bien a diferencia de los grupos que creamos como hemos visto en vídeos anteriores los componentes son elementos que nosotros seleccionamos para integrarlos algo entre interfaz o nuestro flujo de trabajo podemos conocerlos como botones tarjetas o llamados a la acción para crear uno seleccionamos nuestro elemento o la composición que hemos creado nos dirigimos al icono pequeño con forma de tornillo o tuerca seleccionamos lo nombramos y aceptamos automáticamente invision studio nos llevará al panel de librerías en esta se encuentran del lado izquierdo todos los elementos que hemos agregado en este caso nuestros componentes para salir de esta opción basta con dar clic a la flecha que tenemos el lado izquierdo o irnos directamente a la página que estamos trabajando tomemos en cuenta que este panel de librerías o donde estamos viendo donde hemos creado nuestro botón es para evitar ese componente más adelante entenderemos un poco mejor este procedimiento y como verán en el apartado de capas ya podemos ver distintivamente nuestro componente este desde la página se puede ajustar mover editar todo lo que nos convenga ahora tomemos en cuenta una cosa muy importante todos los componentes que agreguemos en nuestro proyecto es decir este proyecto que estamos trabajando se agregará a la librería de nuestro proyecto resulta que podemos agregar librerías de otros proyectos anteriores que estemos trabajando basta con ingresar a las librerías dar clic al icono de más y seleccionar el archivo con los componentes que necesitamos ya de ahí sólo basta arrastrar nuestros componentes de la librería así de simple y como ya les he dicho anteriormente a diferencia de los grupos esto pueden ser más complejos incluso un mismo grupo no podemos convertir en un componente ahora muy bien ya tenemos un trabajo un proyecto con varios componentes nótese que todos los componentes que he utilizado presentan estén a la misma librería editarlos desde las páginas es totalmente sencillo pero qué pasa cuando ya he aplicado un componente específico en todas las pantallas que estoy trabajando resultará tedioso editar cada uno por separado aunque hay una manera peculiar en la que trabajar en este sistema si intentamos editarlo desde la configuración de librerías no podemos ingresar directamente a qué se debe esto pues recuerden estamos trabajando con una librería que pertenece a otro archivo incluso ingresando las capas no podemos hacer mucho más que editarlas por separado así que para editarlas todas tenemos que editar los componentes del archivo original para eso damos clic derecho en el componente que se encuentra en las capas y seleccionamos la siguiente opción automáticamente invision nos envía a una pantalla del archivo en la librería que queremos editar ya él son los cambios guardamos este archivo e invizon nos dirá que hemos modificado algún objeto en caso de que estemos conformes aceptamos y como ven este es el resultado por lo que ya se darán una idea de que podemos tener un archivo con todos los componentes que necesitamos y tener varias copias para ir trabajando progresivamente y no perder tanto tiempo en el proceso de maqueta do muchas gracias por ver aquí al tema hasta un próximo vídeo chao.

Operaciones Booleanas

Hola a todos les habla el tema bienvenidos a la quinta parte de invision estudio en esta ocasión veremos las opciones de edición y parte de las opciones que nos quedan en todo caso la última sería la más destacada como lo es la animación estas opciones se les parecerá muy familiar aunque he visto que estas opciones operaciones pulianas como así se les conoce trabajan distinto dependiendo del programa aquí vamos a ver las opciones que tenemos para trabajar la operación buljan es aquella acción donde combinamos dos o varias figuras dependiendo de la opción que queramos trabajar la primera opción es combinar esta opción tomar a las dos figuras que hayamos seleccionado tomando en cuenta el color de la figura inferior la siguiente opción es menos frente estará una resta a la figura inferior tomando en cuenta la figura superior la siguiente sería intersección crea una figura en base a la intersección de las dos formas que tengamos y la otra sería como una exclusión haciendo totalmente lo opuesto además de las operaciones julianas también podemos crear máscaras con la diferencia que cuando trabajamos figuras la opción superior es la que se ve visible en base a la figura inferior luego veremos un ejemplo con las imágenes si queremos editar el resultado de la operación booleana vamos al panel de capas y cambiamos la opción de la operación si queremos desplazar el resultado de la operación booleana que hayamos hecho basta con seleccionar la forma y moverla al gusto si creamos una figura y le damos doble clic ya podemos previsualizar sus nodos como hemos visto en la pluma esta opción presenta las opciones de edición de nuevo si desear es para así editar la forma a voluntad ahora agregamos una imagen y en base a esa la ajustamos y creamos una máscara del resultado es un grupo con la imagen y la figura la última opción sería la tijera su forma de cortar ese envase el espaciado entre los nodos a diferencia de cortar un nodo ésta cortará simplemente el espacio que hay entre ellos ya de aquí la última opción que quedaría es la opción de animación muchas gracias por ver no olvides apoyar el canal aquí al tema hasta un próximo vídeo.

Como Animar En Invision Parte 1

Hola a todos les habla el tema bienvenidos otra entrega de invision estudio en esta entrega toca haber un tema muy importante que ofrece en visión estudio el cual es la animación para entender el proceso de animación hay que tener en cuenta los elementos y su estado inicial desde un punto a a un punto b programas como lo son esther effects premiere of anarchy toman este principio en el cual limitamos un punto a y un punto b en una línea de tiempo por supuesto que en el trayecto de a al punto b puede haber otros procesos involucrados pero primordialmente lo que nos interesa es la interacción entre estos dos puntos cuando animamos en realidad estamos programando el proceso esto quiere decir que le estamos indicando al programa cuál es el proceso qué va a ocurrir en la animación de interfaces aplica este mismo concepto sólo que aquí no trabajaremos con los ya conocidos que france sino que simplemente trabajaremos con los artworks donde le indicaremos el programa cuáles son los elementos que nos llevarán en los distintos adwords y viceversa y cuáles son los cambios o procesos que se realizarán en el transcurso muy bien para este ejemplo crearé dos árboles totalmente iguales los cuales representan el punto y el punto b crearé una figura en el primero y lo duplicar en el segundo solo que al segundo le realizaría unas modificaciones muy bien ya realizado el proceso selecciono la figura y el icono del rayo representando el icono de animación clic y voy a seleccionar mi árbol destino nos muestra el panel de cuál va a ser el proceso si va a hacer un clic podemos arrastrar mantener pulsado o incluso realizar otros procesos muy importante que tengamos la opción motion activada para poder ver nuestro proceso de animación vamos al icono de play en la parte superior derecha nos abre una ventana de muestra en la cual realizaremos la acción que hemos programado en este caso es un clic como ven el programa interpretó que del árbol 1 al 2 la figura cambia y se transforma totalmente esto ocurre en la opción de motion en tal caso puedo decirlo el programa que también al darle clic a la figura en su totalidad del árbol 2 me regresara a la figura del árbol 1 si queremos borrar el proceso de animación simplemente lo seleccionamos del lado derecho con clic derecho y borramos invision siempre interpretará las figuras por su similitud esto aplica también para composiciones más complejas como las tarjetas muy bien ahora qué pasa cuando alteró el proceso ya en el árbol 2 no existe una circunferencia ahora es un cuadrado realizó el mismo proceso con las mismas configuraciones y no tenemos que no hay un proceso de emotion en él esto es debido a que el programa simplemente no interpreta la relación entre las dos figuras ya que por obvias razones son totalmente distintas muy bien ahora qué pasa si sigo duplicando la misma figura solo que ésta le cambiará el nombre como ven el programa sigue sin interpretar cuál es la relación entre las figuras ya aún así la de duplicado del árbol 1 al renombrar la la he convertido en otro elemento por lo tanto el programa no encuentra relación entre las figuras esto es muy importante a la hora de diseñar nuestra interfaz ya que debemos organizar específicamente todos nuestros elementos en la composición muchas gracias por ver les hablar tema hasta un próximo vídeo.

Como Animar En Invision Parte 2

Hola a todos aquí el tema bienvenidos a la segunda parte de animando con visión estudio en esta ocasión seguiremos los pasos del vídeo anterior para ello seleccionamos nuestro art work clicamos en el icono de animación recuerden que podemos seleccionar la acción con la cual se iniciará nuestra animación programar que la animación empezará a partir de los 0.7 segundos clicamos en el botón de play y notamos que no ocurre nada recuerden que tenemos que desplazar los elementos para que el programa los interprete y realice la animación de esta manera y recuerden que esto ocurre ya que son los mismos elementos del árbol 1 los que han sido duplicados en el árbol 2 si queremos indagar mucho más en el proceso de animación y editar cada uno de los componentes en una línea de tiempo damos clic en editar manteniendo pulsado en la línea de tiempo y arrastrando de derecha a izquierda podemos extender el tiempo del timeline podemos editar la duración de cada uno de los componentes es muy importante que tengamos en cuenta que en esta línea de tiempo se mostrarán todos y cada uno de los elementos involucrados en la animación cada uno de ellos identificados tal cual los hemos trabajado en las capas cada uno con un respectivo control y así extenderemos el tiempo límite de nuestra animación podemos cambiar la vista de la línea de tiempo y siente el caso la línea de tiempo es decir el elemento presenta un punto del lado derecho y del lado izquierdo significa que ese elemento está involucrado en los dos árbol en caso de que no esté en uno o el otro significa que simplemente no está en el árbol en el timeline también es posible editar la curva de animación podemos simplemente editarlo a nuestro gusto para así de esta manera editar el desplazamiento de nuestros elementos o simplemente podemos clicar en cada una de las opciones ya definidas por el programa con estos lineamientos ya presentes ya podemos construir nuestro mapa de animación que simplemente el mapa de interacción que hemos desarrollado en base a nuestro warfare o nuestro proceso de experiencia de usuario en el cual realizaremos una animación es decir un proceso de animación donde simplemente navegamos por nuestra interfaz interactuando con cada uno de los elementos siempre y cuando exista la opción de poder regresar o interactuar entre cada uno de los árboles presentes si ya estamos satisfechos con el resultado o el prototipo podemos subirlo a nuestra cuenta de invision gratuitamente invision dispone de un proyecto a la vez y también es posible agregar una animación por vez dependiendo de nuestras cuentas y demás aunque todo lo que conlleva el proceso de animación prototipado incluso desarrollo a nivel profesional de nosotros mismos es totalmente gratuito recuerden apoyar el canal si toda esta información les ha sido de ayuda muchas gracias por ver el es hablar tema cuídense chau.