Transcripciones
1. Introducción: Hola y bienvenidos a muscular share class. Mi nombre es Nick Evolve. Tengo 21 años. Vivo junto con mi pequeña foto de gato en Paderborn, Alemania. Yo estoy trabajando a ocho millas. Estamos especializados en tiendas online. Estamos trabajando con la tienda del sistema de comercio electrónico ahí Y sin embargo en nuestra agencia es todo a su alrededor. Apenas inicial en mi agencia. Trabajo como desarrollador front-end. Y tú yo diseñadora con mi equipo. Juntos estamos enfocados en cómo diseñar una tienda online y también en cómo desarrollarlos en mis autos. Te presentaré los conceptos básicos fuera del estudio imaginado y cómo se crea un amigo. Tú diseño No necesitas ninguna experiencia. Estaremos enfocados en el flujo de trabajo práctico y te mostraré cómo aplicarlo en tu
trabajo diario . Si diseñarás un mundo emocional para tu tienda online también, te muestro cómo puedes cualquier hecho tu mundo de emociones En la primera parte nos estábamos
enfocando en el diseño y puedo Entonces te mostraré cómo configurar un proyecto y su estructura en el final de esta causa podrás crear y diseño completo con animaciones en estudio
imaginado, así que mantente atentos y empecemos.
2. Introducción: Hola y bienvenidos a la primera lección fuera de mi clase. En esta primera parte, me gusta mostrarles estudios de visión, interfaz y algunos atajos. Empezamos ahora explicando la pantalla de bienvenida. Entonces aquí está la pantalla de bienvenida que tienes aquí. El versión aquí es tu último proyecto. O puedes agregar algunos fuera de la nube que tienes aquí algunos dispositivos que quieres usar como el make. No, es el tamaño que te vas a hacer. Aquí tenemos. El recurso es donde puedes amar desde el soporte de estudio o dar retroalimentación. Y aquí tienes los tutoriales donde puedes No. Y aquí puedes abrir tu estudio también son importantes. Tu boceto de fuego. En la siguiente parte, estaremos abiertos el dispositivo que haga. Pero ahora acabamos de abrir las animaciones determinantes. Acabamos de abrir el tutorial de animación. Y ahora ya ves, aquí hay dos tableros de arte y algunos grupos fuera de los tableros de arte. Tienes aquí la introducción en para cómo puedes en la animación. Pero ahora sólo nos fijamos en el cómo a la animación. Y luego vamos a un espacio en blanco dentro con y te mostraré cómo trabajar con InVision Studio. Seleccionamos el Grupo uno fuera del Aeropuerto uno y hacemos clic en el Trueno y en la animación Toe Art libro. Entonces solo usamos el gatillo, deslizamos a la derecha y la emoción y ahora lo guardamos y eso es todo. Esta es la animación. Y aquí podemos en el botón play ubicado. Entonces, como pueden ver, aquí están los primeros son parte. Y cuando barre a la derecha ves cómo va a funcionar la animación. A pesar de que esta es la primera introducción, cómo puedes usar animaciones Pero te mostraré a detalle en las próximas lecciones cómo puedes agregar cualquier nación. Muy bien ahora, vuelta al Blanken fue donde les mostraré algunas introducciones. Cómo utilizar estudio de invasión. Podemos empezar con terminar re hormigueo bastante fácil. Simplemente seleccionas aire y Kendrick lo. Qué tan grande que quiera también puede editar el re enredo con estas capas y también otras formas como circular o con algunas radios Bader debajo del lado derecho. Se puede ver lo que se puede hacer con el con sus capas, como por ejemplo, ponerlo en el medio en el centro fuera de su tablero de arte. Entonces puedes sentir a los Conners. Simplemente déjalos. Consideras los colores puedes agregar algún borde o sombra o en un refugio. Y aquí todos ustedes, Así que tienen las interacciones para las animaciones. Está bien, entonces se puede en algunos otros. Um, entonces podemos anuncios. Eso lo puso aquí. Entonces podemos agregar algo de texto. Simplemente puedes seleccionarlo aquí, ¿
O simplemente presionas TV? Y luego puedes Oh, me pongo en contacto con algo como, Sí, vamos a escribir algo mejor. La pizza es la mejor. Bonito. Entonces, sí, puedes ver aquí está arreglado. Estudio InVision. Tienes dos tallas que puedes usar Oh, por lo que no es sensible o usa fija. Entonces es un responsive en el tamaño que los quieres. Eso es bastante guay. Ahora podemos. El tamaño son la línea. Haith manera puede hacer audaz cambió la ciudad alta. Es como si pudieras hacer todo lo básico muy simple para que entiendas cómo y régimen está funcionando. Es el mismo nosotros que trabajas en boceto o en 60. Está bien, es Vamos a ponernos. Se ve a la izquierda, la parte del Arca y las páginas que se pueden en algunas páginas diferentes. Por ejemplo, si estás en el flujo y tienes más páginas, como sobre nosotros o la una página echa un vistazo y luego puedes cambiar a otra página. Y aquí tienes el fueraborda fuera de la página seleccionada. Ahora puedes y no puedes El arte traído Así que, por ejemplo, este sería mi lado frontal, mi yemení, mi mundo de emociones. Y luego seguimos con el listado fuera. El choque es bastante fácil. Puntera agrega más fueraborda. Puedes cambiar de ambos, y lo más cool de esto hacia afuera es que puedes agregar animaciones, pero te lo mostraré en la siguiente lista. Ahora muéstrale cómo puede en el grupo que seleccione. Entonces solo haz comando G. Y ahora es un grupo. También estás en el grupo. También puedes marcar todo y a otro grupo, y vas por otro y otro. Y si quieres cambiar de nombre, solo
puedes hacer doble clic en el nombre y nombrarlo como Peter, y luego puedes hacer entrar en cualquiera para entrar y el grupo ha cambiado. Pero si quieres cambiar cada grupo, puedes hacer doble clic en él y luego ir con tap como pizza a nuestro árbol de pizza. Espero que entiendas lo que quiero decirle. Entonces si terminas con nuestros renombrados, solo
pones en el extremo enter. Es seguro. Estos son los fundamentos. Cómo se puede agregar algunos enredos re, cómo se pone en elemento. Ahora te voy a mostrar a casa me implementa fotos y las dimensionamos, ¿no? Está bien. Simplemente elimino todo en el Ark Park porque hago ahora el gran retornable y te muestro cómo implementar una imagen. Simplemente dirigir una imagen en este archivo. Y como se puede ver, el cuadro es realmente grande y no cabe en el ascendente. Simplemente puedes arrastrarlo hacia abajo. Y ahora está del lado derecho. Pero también se puede lo que yo haría a través de una máscara en la re enredo así. Otra imagen cabe en la máscara para que no puedas grabar en la decisis que quieras, y ahora puedes dirigir la posición como quieras. Y es perfecto para tus suspiros. No, solo copio y pego de nuestro barco. Por lo que tienes una carrera de cuero y cuando quieres otra imagen, son el tamaño es el mismo que la imagen que tienes aquí. Simplemente puedes ir en rellenos y beber y seleccionar la otra imagen. no te gustará. Y como se puede ver, una ciencia es ahora la misma nosotros el primer cuadro. Y ahora se puede. Si quieres un disco como tú, yo lo haría. Y está bien, chicos, espero con esta pequeña introducción a la visión, les
pudiera mostrar cómo pueden usar. Envisión. Y ahora empecemos. Y en la siguiente lección estaremos creando el encabezado y el deslizador. Nos vemos en la siguiente lección por
3. Crear el diseño: volveremos a mi clase. Todo el mundo, Ahora
estaremos creando thes design. Estaremos empezando con el encabezado. Te diré por qué elijo este diseño. Estaremos creando el titular del slider con los productos. Y al final, estaremos creando la animación a partir de este diseño. Entonces, empecemos. Yo creo ahora y tú lado y creas el getter para el fueraborda. Puedes elegir 12 columnas, pero también me gusta usar la cuadrícula porque eso lo puedes hacer mejor. El de los espacios entre los elementos. Empiezo ahora con el local debajo del lado izquierdo. Sí, empiezo con logo usado. El fondo, familia, los corazones de
verano y, sí, waas Un poco más grande, creo. Al igual que esto. Uh sí. Entonces Y ponlo en la parte superior así. Entonces vamos a crear navegación aquí. Tengo usando el fondo de luz fuera de arenas movedizas y de fondo suspiros fuera. Sí,
sí . Entonces habrá ponerlo en el subterráneo que todo está en la línea. Muy bien, entonces. Hice la navegación de la tienda. Ya preparé algunos puedo lo que también es realmente cool en visión, tienes que darle forma a tu puedo si es ah, cuanto a G, puedo Así que ahora puedo hacer grupo fuera y redimensionarlo como quiero un poco más de espacio entre la navegación como esta teniendo después de hacer la tarjeta de compra. No para que puedas ver mi diseño, la cantidad, y esto será Sí, esto será así. De acuerdo, Eso es lo pequeño que piensan así. Y, sí, ponlo en medio el yo puedo y estaremos agregando los otros icann's como el usuario que pueda. También están hacer un grupo fuera de ella. Nómalo Hughes er, y lo tamaño a Desai's like to shopping card. De acuerdo, creo que es un poco más grande. Entonces lo decido otra vez? ¿ Así? No, solicité a la búsqueda. También puedo agrupar ID y nombrarlo. Um luego redimensionarlo al tamaño que nos necesites. Mira que está en el grano correcto. Por lo que se ve similar a los demás así. Y el encabezado fuera de la página está listo. Traté de hacer el encabezado muchos molino porque cuando el Kozma viene en el mundo emocional, la primera ala que ve es el gran deslizador. Queremos concentrarnos bajo captador de ojos y esta es la gran imagen del producto de los clientes para que los clientes puedan ver lo que está vendiendo. Estoy creando los grandes deslizadores. Ya te mostré cómo implico imágenes. Yo primero se me cayó una lectura. No, creo en este tamaño. Y vi ahora que me olvidé de uno que puedo bajo en el menú del lado derecho es el grupo de Miss IFOR it . Entonces podemos redimensionarlo. Muy bien entonces, De vuelta al tango re. Creo que este tamaño waas ya es bueno y me concentro en hacerlo un poco más
lado izquierdo porque en el lado derecho estará aquí el título y el producto. Primero creo el grupo fuera de la navegación de tienda en navegación universitaria y luego también un grupo fuera de la navegación principal. Y ahora podemos preguntar, hacer otro grupo en cabecera universitaria y aplicamos imagen con el Phil y arrastrado en la elección. Y ahora puedes ver que es entonces creamos el fondo del deslizador para que podamos navegar a nuestros clientes a través de las otras imágenes. Al igual que esto. Sí, Entonces necesitamos el color. Ya los desfilo aquí. Ahora solo puedo seleccionar re enredo y usé el color que quiero. También necesitamos el color de fondo y debe haber este color. Ahora necesitamos las flechas comenzaron errores dirigidos en el diseño y redimensionarlo con el tamaño que desee. Agruparlos y llamarlos flecha y lo volteamos y hacemos blanco el color de las formas y copiar la flecha y voltearla de nuevo. No, creamos navegación fuera del apagado del deslizador. Hazlo un poco más grande para que el cliente pueda verlo también llenarlo de ancho. Entonces tenemos otro minorista con este color desnudo bajo el que está bien que podemos agrupar y llamarlo delegación uno. Y luego crear otra navegación. Sí, así. Y bajo el lado derecho. También hubo un pequeño desplazado hacia abajo. Muy bien, dos deslizadores, sin rojo. Y ahora estaremos creando en el lado izquierdo. Hace texto y hacer decide a lo más grande Así, creo y también creo lo sublime Vuelve a tus raíces. Está bien, ahí otra vez Tamaño de la vida y dos deberían ser poco pero más pequeños Y tampoco Y yo era normal. Sí, esto se ve bien. Después creamos la navegación activa que verá el cliente en qué páginas. Ahora implemento la primera imagen de producto. Ya los preparé, lo
resbalé de nuevo y lo redimensioné así. ¿ Todo bien? Sí, así. Entonces creamos Estaremos creando bajo el lado derecho El gran titular que lo llama perforar. También irritado y astillado. Ahora agregamos otro sublime del lado derecho. Ejemplo de Justin, que toma puedes usar Había el cuadro de otros judíos y luego hacerlo un poco más grande. Entonces pienso así. Sí, este es el diseño. Ahora, como puedes ver, tenemos un gran deslizador para el cliente. Tenemos la navegación. Contamos con dos productos. Tener algunas descripciones detalladas. Tenemos los grandes empatados a y también los productos India. En la siguiente lección, estaremos creando animaciones a este diseño. Entonces nos vemos la siguiente lección por
4. Animaciones de introducción: Hola y bienvenidos de nuevo a mi clase En esta lección, estaremos mirando las animaciones. Ya pro pan un diseño para ti. Lo que vamos a crear juntos. Como pueden ver, totalicé el gatillo en el título. Entonces si el cliente hace clic en todos, verá la animación. Echémosle un vistazo. Siempre puedes ver la vista previa de tu animación al hacer clic en el botón de reproducción de la parte superior
derecha aquí. Está bien. Ahora, cuando hago clic en todos, se
puede ver el título Destinos al centro. Fuera de la página y el texto de detalle de la sonrisa se desvaneció del botón fuera de la página. Ahora estaremos creando esta animación. Simplemente mentí todo fuera del arte, pero porque ahora lo diseñaremos juntos y sí, elijo el dispositivo iPhone X. Empiezo con crear re tunggal así y lo lleno con ah, código
hexadecimal F siete. Entonces creo otra re enredo, algo opciones de diseño que también podemos cualquier mate ahí. Pongo el código hexadecimal del auto. Ah, yo usé en la vista previa como este A. Es un poco más pequeño. Ahora empecemos con el texto aquí. Crearé un bloque de texto con Hola. Entonces elegimos el tamaño. Escogería 25 píxeles y el color no será negro, pero ah, un poco más oscuro como este. Y como sabemos, esto no es sensible. Y lo puse en el centro. Y sin embargo entonces hacen otro bloque de texto con todos. Y aquí elijo el fondo familia quicks y y los hago calvos. Muy bien, entonces lo hago un poco más grande. Sí, así, creo. Está bien. También en el centro, fuera de página, así. Y sí, está bien. Para hacer que el fresco se vea fuera de la imagen de fondo en el texto, vamos en rellenos y ahí puedes elegir entre Phil guardians on. Entonces también puedes beber tu foto aquí. Yo lo haría Ahora solo lo arrastras hacia abajo. Y ahora ves que está ahí en el tutorial, elijo el azulejo mo y la escala un poco hacia abajo para que podamos volver a leer título, luego otro texto. Que tengas un gran día. Oh, espero que todos tengan un gran día ahora. Simplemente lo bajamos en todo. Son suficientes 18 píxeles y también centran. Llegó. Texas No terminado. Pongo todo en el grupo y lo llamo título. Después crearemos la descripción en la parte inferior,
alinearla a la izquierda, haremos un poco más de espacio. Justo ahora es el primer diseño, y ahora te mostraré cómo podemos hacer que la animación se replique. El arte se vierte en 2do 1 Muy bien, creamos el diseño, y ahora estaremos creando la animación. En primer lugar. Información importante. Estudio de visión trabajo con nuestros puertos para animaciones. Por lo que no sólo se puede tener un fueraborda y hacer de su cualquier animal. Esto no estará funcionando. Acabo de cambiar el tamaño del título para que puedas ver cómo será la animación. Título de trabajo. Y ahora he disparado el título a la segunda Mesa de Arte. Y ahora cuando haga clic en el botón de reproducción y haga clic en el gatillo, se redimensionará a
todos los que vean el tamaño divertido. Y así es básicamente como funcionan las animaciones en estudio. Y si cambias algo en el segundo tablero de arte, el primer tablero de Arte animará al 2do 1 ¿Qué es también importante? Necesitas tener los mismos nombres de grupo para que sepa que esto ambos están juntos y pueda cambiar el retamaño al 2do 1 Muy bien, empecemos con la animación real. Por lo que en mi revisión el cuadro de título, Waas y los Centros. Entonces lo centramos en el segundo Este waas un poco más y más pequeño y este título no estaba ahí. Entonces hay que decirlo aquí y hacer lo contrario e off. No. Entonces si activamos, entonces viene de abajo a arriba y dicen que es con Upper City en. Después cambiamos los títulos. Este Waas todo así un poco más pequeño, creo que aún y te voy a mostrar otra punta de arroyo de mi parte. Puedes agregar mejores animaciones. Se crea re enredo y se llena de nada. Y luego lo agregarás a lo sublime y crearás otra máscara a este apretado así. Ahora tú en otro título que estará en el segundo tablero Arch y tenemos que hacer que sea capaz. Y cuando hagamos click en todos, se cambiará. Uh, ambas máscaras por la otra fuera. Bert, hagamos grupo fuera de esto lo llamaré Subtitle y defraudaremos los identificadores dedo del pie el otro que
podemos dejar esto y cambiamos lo grande. Ten un gran día hasta la cima y estás genial Que sea en el centro fuera de la capa y vaya debajo de la animación y agregó la línea de tiempo para que podamos hacer Lubin Look, Howard se Look, vamos a hacerlo un poco más largo para que puedas verlo. No es tan perfecto ahora para nada, Pero en la primera parte la ciudad alta fuera de tu cool también tiene que estar en cero. Y aquí la segunda también en cero. Entonces vamos a echarlo y no echarle un vistazo. Está bien, esto se ve mejor ahora, así que aún así que así funcionan las animaciones Ves cómo se desvanecen en la segunda son parte
Ves cómo el texto iss se desvaneció en fresco Y sí, creo que hay que jugar con el animaciones para entrar en animación En la siguiente parte estaremos creando la animación para el mundo emocional y nos vemos en la siguiente lección por
5. Animación en el mundo de la Animation: todos y bienvenidos de nuevo a clase de musculatura. Y esta última lección estaremos creando las animaciones a este diseño. Te mostraré algunos consejos para ti. Conecta más vida en tu diseño, cómo hacer que tu diseño luzca de calidad alta y costoso. Cómo se conecta el cliente con este diseño. Y sin embargo creo que empecemos. En primer lugar estaremos creando el deslizador. Entonces si el cliente hace clic en esta escalera, llega a otra imagen y todo lo que rodea el diseño estará cambiando. Y sin embargo, primero tienes para ti mismo para asegurarte de lo que quieres presentar odio lo que quieres a cualquier hecho lo que va a ser el captador de la vista. ¿ Qué puede sacar el cliente de los calcetines como diría Chairman. Y sí, creo primero y empecé con cualquier apareamiento estos productos, podemos en un gatillo que si el Kozma hace clic en el siguiente deslizador, estos productos se desvanecieron. No pudimos hacerlos así, y en el otro se van a desvanecer. Echémosle un vistazo si queremos deslizador disparado con dedo del pie. Entonces si el cósmico clica en la imagen, él va a la otra fuera de borda haciendo clic en ella Entonces agregamos la línea de tiempo para ver si es trabajo. Y sin embargo, como puedes ver ahora, los productos se estarán desvaneciendo. Entonces queremos cambiar el cuadro y los títulos. Llegada quiere crear la animación en el cuadro de título. Estaremos creando otro desorden como volver a enredar sin ningún color y hacer máscara. Y necesitamos otro título. Disparo de brutalidad. Hazlo un poco más grande. Ni una máscara tiene que ser más grande. Ahora tenemos que replicar esta parte y ponerla en la en la otra pizarra así para que podamos eliminar el primer título y ahora poner en la parte superior de esta y ponerla en frente a cero. Y ahora podemos ahora obturador militar. Además, lo
ponemos en el fondo. Entonces si el cliente va en el toggle, esto viene del botón y a un se irá a la parte superior. Por lo que habrá un pequeño efecto de diapositiva para hacer una capacidad cero y nos dibujó l normal. Debería estar bien ahora podemos cambiar la línea de tiempo de nuevo. Y mira cómo va a estar funcionando la animación. No hay destino en porque cambiamos el título, ¿verdad? No con el nombre correcto. Tenemos que hacerlo con el mismo nombre que copiamos. Por lo que imagino Studio puede vincularlos a ambos, y la nariz es el mismo elemento. Y luego lo puede desvanecer y, como puedes ver, puede hacer bucle ahora de nuevo y hacerlo un poco más pequeño. Y ahora se puede ver el pozo de animación va a la parte superior y el segundo viene de abajo. Muy bien, ahora podemos cambiar el deslizador de imagen, llenar con otra imagen Y ahora podemos echar un vistazo a la animación. Sí, la imagen sólo se está desvaneciendo, así que ya se ve genial, Pero podemos hacer que sea un poco mejor hacer la imagen. También animando necesitamos hacer ambos rellenos Indian pegar el re tierno y lo llamaré segunda diapositiva. Y también necesitamos los segundos mentidos en la primera pizarra de Arte. Ahora podemos redimensionar la imagen y hacerla no al lado izquierdo y cambiar la capacidad a cero y bajo primera re enredar Nosotros Sí, necesitamos hacerlo ahí Y luego redimensionamos esto a este tamaño desde la derecha también cambiamos la opacidad
del dedo del pie. Y ahora podemos echarle un vistazo. Está bien. Nada cambió porque creo que necesitamos el dedo del pie. Ponnos. De acuerdo, Ahora borro la una emoción y a ella otra vez porque si cambias algo, podría ser que no haga el gatillo. Entonces no, echa un vistazo. Y sin embargo, como se puede ver, está haciendo pedacitos que son, como se puede ver, se desvanece ahora pero sí se ve realmente bien. El punto lo que es un poco ahora cuando nosotros cuando cambiamos el corte, las imágenes. Ya ves, la segunda imagen se está desvaneciendo con el texto, por lo que se ve un poco como un error. Entonces los arreglamos ahora. Por lo que para hacer la animación en este más ligero, mejor necesidad de volver a enredar y enmascarar así. Creamos la máscara. Tenemos que hacer que la re enredo de un poco más pequeña así, creo en infravalorada también. Sí, y voy a copiarlo y pegarlo en esto. Ahora podemos echar otro vistazo a la animación y ahora se puede ver cómo la animación sólo está en la re enredo, pero nos olvidamos de llenarla para que no veamos. No queremos ver el color. Y ahora otra vez, y ahora se está desvaneciendo. Genial. Muy bien ahora creamos la animación para el texto. Tienes que escribir líneas y un Mex enfermo y también aquí a líneas de texto y una máscara. Ahora vamos a echarle un vistazo nuevo ahora desencadenar el cambio de texto. Está bien, Ahora vamos a hacer que esta pequeña animación sea un poco suave o esto vamos y simplemente copiarla a segundo. Pase el ritmo al primero, y luego copiamos el primero. ¿ También es Tudor primero? Ahora solo podemos hacerlo un poco en la parte inferior y el id cero opuesto y el segundo también un poco debajo de fondo y también nuestro cero pasado. Ahora podemos mirarlo y ellos cambiaron. ¿ Estamos creando otro enredo re y no una máscara para los toros? Ahora no copia ritmo para volver a enredar al primer fueraborda y ahora poner el primero el primer signo también en la parte inferior. Muy bien, chicos, ya
estamos terminados. En la animación podemos mirarla. Si hacemos click ahora en Slider Reloaded y lo vemos de nuevo, podemos subir. Conoce nuestro proyecto en estudio de visión Y ahí también podemos y de lo contrario apropiarnos de la presentación. Enhorabuena por terminar con esta clase. Espero su conocimiento y flujo de trabajo proporcionado. Gracias por ver este costo por.
Nicole Wolf
