Animación de Adobe Xd: guía completa de iconos a la interfaz de usuario

1. Introducción a la clase: animándote. Re diseño blanco es importante porque muestra que estás pensando proceso mejor que solo una imagen estática mostrando a tus clientes diseño animado les va a ayudar a entenderlo mejor y acelerar el proceso dramáticamente. Animar en Adobe X'd es sencillo porque la app es gratuita, fácil de aprender y todo en 12 Hi there. Mi nombre es Alex y Discurso. Aprendiste diferencias entre naciones cómo los dedos animan iconos, fondos, formas, formas, deslizadores de texto, efectos de Sharp y más que aplicar ese conocimiento para planear, dibujar y crear marcos de alambre en imágenes, iconos y sombras. Para crear un diseño. Utiliza las técnicas que aprendiste para crear prototipos. Comparte el trabajo con tus clientes para obtener retroalimentación y finalmente, cómo exportar tus activos. Para los desarrolladores, este curso es para todo el mundo, tanto si estás empezando como si eres un profesional en busca de algunos consejos extra en Adobe X'd . Espero que estés listo para aprender Adobe X'd en impresionantes funciones de animación. Tiene que ofrecer, y te veré en clase 2. Introducción: Hola ahí. Y bienvenidos al curso. Mi nombre es Alex, y en este curso, aprenderás todo lo que necesitas saber sobre la animación dentro de Adobe X'd así como cómo puedes compartir esa animación con tus clientes así como con tus redes sociales siguientes. Entonces lo que vamos a hacer en este curso es que vamos a correr por 60 videos diferentes con 60 efectos diferentes en ocho categorías diferentes. Por lo que vamos a pasar por iconos, fondos, textos de forma, deslizadores de imagen, gráficos, efectos y otros efectos que fácilmente puedes aplicar a nuestro trabajo de diseño. Ahora cómo se ve todo esto, déjame mostrarte rápidamente. Entonces vamos a pasar por iconos y vas a conseguir un óvulos desfile de archivo separado para cada una de estas diferentes ocho secciones. Entonces, como puedes ver aquí mismo, tenemos diferentes iconos desde los más fáciles hasta los más complejos. Entonces vamos a ir a pasar a diferentes botones, así que vamos a pasar por botones básicos así como botones sin embargo y así uno. Entonces vamos a pasar por formularios. Entonces, desde los formularios básicos de suscripción, dos formularios de correo electrónico más complejos y demás iban a pasar por algunos efectos de texto desde los efectos de contador básicos hasta algunos efectos diferentes. superposiciones y demás iban a pasar por los deslizadores de imagen desde los deslizadores básicos hasta más complejos. Con más imágenes dentro, vamos a pasar por diferentes gráficos y cómo animan así como con algunos efectos diferentes. Por lo que desde cargadores, los efectos de volteo del dedo del pie hasta los efectos de paralaje del dedo del pie. Y finalmente, vamos a pasar por otra canción. Genial, seguro, diferentes deslizadores diferentes que barras, imagen, pop menús alcistas y alguien. Y por último, vamos a pasar por nuestro proyecto adonde vas dedo del pie, recibe un breve de diseño. Vamos a pasar por algunos proyectos. Exploración así como con algunos dibujos de marco de alambre iban a ir a través de nuestra guía de estilo cómo puedes crear por qué es importante y qué está contenido dentro de las guías de estilo . Entonces vamos a diseñar marcos de alambre utilizando nuestros marcos de papel derecho como nuestra referencia. Entonces vamos a pasar al diseño en diferentes imágenes, sombras, sombras, diferentes colores para hacer estallar el diseño. Como les gusta decir a los clientes, vamos a ir a diseñar diferentes menús, pantallas de perfil y así sucesivamente. Y por último, vamos a pasar al prototipo donde vamos a aplicar algunas animaciones sobre esos diferentes diseños iban a crear múltiples estados fuera de las mismas pantallas y añadir diferentes efectos los cuales van a hacer nuestra app diseñado de aspecto realmente interesante y realmente moderno así como hacer que el cliente entienda fácilmente nuestro diseño, Nuestra intención detrás de todo lo que está diseñado en el proceso de diseño así como los desarrolladores que se van dedo del pie fácilmente entender qué efectos necesitan aplicar más tarde en frío? Y cómo deben usar esos efectos y cómo deben usar una estructura de archivo de deuda que usted ha creado para sus fines de desarrollo. Por lo que estoy realmente emocionado de compartir toda esta información con ustedes. De verdad espero verte dentro del curso, y realmente espero que vayas a aplicar todo lo que aprendiste en este curso en tu propio futuro. Tú diseñé trabajo, así que te veré en clase 3. ¿Por qué nos animamos: razón principal estaban animando. ¿ Eres sabio para llegar el punto a nuestro espectador para que puedan entender mejor nuestro concepto cuando estás trabajando con el cliente sólo porque lo tienes en la cabeza? Cómo se moverán algunos elementos e interactuarán entre sí no significa que el cliente entenderá ese diseño de la misma manera que tú. Es más fácil para ellos entender lo que las animaciones de CD en lugar de simplemente imagen estática, porque así es como eventualmente se verá la aplicación. Además, cuando estás enviando los archivos a los desarrolladores, es más fácil para ellos entender lo que tienen para animar cita cuando tienen las animaciones de referencia, lugar de pensar qué animación iría bien en qué pantalla y qué interacción es mejor para qué elemento. Todo esto acelera el proceso fuera del diseño en Adobe X'd porque dentro de uno arriba eres capaz de diseñar prototipo share, obtener retroalimentación y erate rápido sin la necesidad de fusionar APS externos o algún otro software 4. Diferentes animaciones de UI en UI: la mayoría de las veces, cuando estás animando tu tú y te encontrarás con diferentes animaciones. 1er 1 es para los grandes elementos. Entonces para los deslizadores, por ejemplo, y si echamos un vistazo a este ejemplo, se puede ver cómo se ve eso. Si hago clic justo aquí cuando se carga, verán estos ejemplos de este bonito deslizador grande. Se pueden ver todos estos diferentes elementos y algunos elementos más pequeños. Entonces, por ejemplo, esta barra de pasos, esto es lo que se llama micro interacción. Por lo que solo te estás centrando en alguna parte pequeña del dedo del pie general U Y animado y para mostrarle a los usuarios potenciales cómo se verá y el dedo del pie lo muestran a declinar. Para que puedan entender mejor todos estos diferentes elementos. Porque si acabas de mostrarles esto como imagen estética, no lo sabrán. Por lo que podrían hacerte algunas preguntas. Por ejemplo, esto podré cambiar cuando lo toque? Cómo se verá esto cuando haga clic aquí, ¿qué pasará a continuación? Entonces, por ejemplo, tendrás que crear entonces no sé para éste quizá 56 10 imágenes diferentes solo para mostrar este efecto. Por lo que es mucho más fácil crear animación desde el principio y luego enviar esa animación a tus clientes. Y luego pueden iterar en esa animación y decirles, por ejemplo, no me gusta cómo rota esto. A lo mejor podemos añadir una sombra de gota una vez que se hace clic. A lo mejor puedes cambiar un poco el espaciado y solo darte una retroalimentación adecuada. Eso te será mucho mejor para que puedas entregarles un mejor diseño. Remolque para que puedan entender mejor su concepto y sus dibujos y sus ideas, y finalmente, a los desarrolladores para redondear todo porque podrán entender cómo van a interactuar todos estos diferentes elementos el uno con el otro. Y qué deben poner dentro de su abrigo para imitar eso para que sepan qué tecnología deben usar. Entonces, por ejemplo, debería usar JavaScript debería usar alguna otra tecnología solo para que puedan conseguir que esa animación luzca bien, y puedan retratar mejor ese concepto fuera del tuyo dentro del código. Por eso estamos animando R u Y. Y por eso hay unas cuantas diferentes fuera de estas tú animaciones. Pero la mayoría de las veces. Trabajarás con estas interacciones más pequeñas, y luego mostrarás cómo las diferentes pantallas están transicionando entre sí. No importa si se trata de una aplicación móvil. Si se trata de un sitio web, si es, ah, algún tipo de diseño de dashboard o algo así, siempre trabajarás en algunas de estas animaciones más pequeñas y esta micro interacciones. Por lo que mostrarás estas marcas de verificación y este 'll, olores y botellas, que están cambiando de color, estos elementos volando desde todo decide y así sucesivamente. Entonces eso es lo que estarás haciendo por mayoría fuera del tiempo. Y es por eso que los huevos son geniales, porque en tan solo unos pocos nuestros puertos, puedes mostrar bien todos estos conceptos, y luego puedes enviarlos hasta los desarrolladores, y ellos pueden ver dentro de los diseños atrás, que vamos a cubrir en un poco más tarde. Con tu qué deberían estar usando? Pueden exportar CSS de inmediato. También tienen algunos enchufes, y pueden exportar HTML si eso es algo que necesitan y pueden empezar de inmediato con su trabajo. Y eso es lo más importante aquí. Estás ahorrando tiempo para ti porque tendrás que hacer, Ah, menos interacciones como esa. Estás ahorrando tiempo para los clientes porque entenderán más rápido tu concepto que estás tratando de traspasar. Y es más fácil para los desarrolladores también porque saben de inmediato lo que deberían estar tratando de lograr el dedo del pie dentro de la cotización. Qué tecnologías deben utilizar y cómo deben implementar ese diseño en el frío ? Porque ahora saben cómo todos esos diferentes elementos van de dedo del pie interactúan entre sí . 5. Funciones de prototipos de Adobe Xd: en este video, quería cubrir los huevos las características de prototipado, pero no en detalles. Por eso tenemos el resto del curso. Yo solo quería mostrarles cómo se ve todo, dónde se encuentra todo y qué se puede esperar de este prototipado características. Entonces aquí mismo en la parte superior, hemos diseñado en esa parte estás diseñando tu ey. Estás diseñando todos los elementos de tus pantallas, poniendo imágenes, sombras y así sucesivamente. Y cuando termines con ese diseño y quieres agregarle algo de movimiento y algunas animaciones, entonces estás dando clic a esta pestaña de prototipos y justo aquí a la derecha, tienes algunas opciones. Pero primero quieres seleccionar en qué van a hacer clic los usuarios, en qué va a pasar y después de cada vez y así sucesivamente. Entonces si hago clic en este, tienes este mango azul y cuando muevas ese mango azul de pantalla a pantalla, esto aparecerá y la interacción va a suceder. Por lo que aquí mismo puedes seleccionar tus desencadenantes. Entonces qué va a usuario debido a desencadenar y este comportamiento siguiente tienes acción. Entonces qué acción va a suceder una vez que este gatillo haya sido activado. Has conservado la posición de desplazamiento. Si desea conservar la posición de desplazamiento de la pantalla a la siguiente pantalla, tiene el destino. Entonces solo imagina que tienes 200 o 300 de estos diferentes nuestros puertos. Entonces puedes seleccionar aquí fácilmente de cuáles son también, cuáles van a suceder esta interacción. Tenemos la animación o justo aquí, y puedes elegir entre la variedad de diferentes animaciones que tenemos flexibilización. Entonces cómo va a suceder el efecto entre estos dos son puertos se va de pie. facilidad de salida va a suceder de inmediato. Se va a desvanecerse el dedo del pie o se desvanecen y algo así. Y finalmente tenemos la duración. Entonces, ¿cuánto tiempo va a ser este efecto? Y por último, tenemos posición fija al desplazarnos. Por lo que tenemos posiciones fijas, gateando por ejemplo para algunos elementos para los encabezados, para los menús de botellas, algo así. Imagínate que tienes el sitio web aquí mismo, y tienes el menú principal en la parte superior, que se va a mantener fijo. Después haces click justo aquí. Y ese elemento se va a mantener fijo mientras te desplazas el resto de tu U y Así que corremos rápidamente por algunos de ellos. Tenemos tap. Entonces cuando el usuario toca, ya sea con la boca o con el dedo, así es, y ahí es donde comienza la interacción. Tenemos el drag, así que básicamente lo mismo, pero hay que hacer clic en hold y luego arrastrar ya sea con la boca o con el dedo. Tenemos claves y juego malo, que es básicamente, si estás diseñando y creando prototipos para juegos, puedes incluir controlador X box, por ejemplo, o controlador PS, y luego usar esos puedes elegir qué interacciones están sucediendo solo qué comandos. Por lo que puedes incluir esos comandos usando esas teclas de puerta y almohadillas de juego. Y finalmente tenemos la voz. Entonces esto es, por ejemplo, cuando estás por chasquido para un Alexa musulmán, o para Google o algo así, y estás usando tu voz para emitir diferentes comandos para algunas interacciones. dedo del pie. A continuación, tenemos acción, entonces tenemos transición, sólo una transición regular. Tenemos auto animate, que es huevos, estas asombrosas características, y estaban trabajando mucho en esta característica, y están usando inteligencia artificial y aprendizaje automático para crear estas interacciones porque están tratando de entender cómo algunos elementos van a interactuar entre sí y principales. Una característica clave importante para esta característica auto animate es que tengas tus capas nombradas correctamente y que tengas las mismas capas básicamente en ambos puertos. Ahí es cuando Exit está tratando de buscar la diferencia entre cada uno nuestros puertos y qué capas han cambiado. Entonces, ¿cambiaron de tamaño? ¿ Cambiaron de color en un pastoso y así sucesivamente? Y intentará dedo del pie también animar. Básicamente, esos cambios entre los nuestros puertos. Tenemos la superposición. Todo a se usa mayoritariamente en ti. Yo sobre todo en Adobe X'd para los menús. Así que solo imagínate, ten ese menú lateral o menú superior o algo así, o quieres que el dedo del pie superponga un emergente o de algo que puedas usar esa característica y acaba incluir, y se superpondrá por encima. Estos son puertos. Tenemos reproducción de voz. Entonces puedes, por ejemplo, cuando estás usando voz desde aquí mismo, tienes esta reproducción de voz y reproducirá ese discurso. Eso, por ejemplo. Puedes hacerle una pregunta. Puedes darle una respuesta, y cuando haces, es una pregunta. Te dará esa respuesta. Y eso es útil. Van que estás diseñando como conjunto para Amazon Alexa, por ejemplo. Y dijiste Bien, Alexa, ¿cómo es el clima hoy? Y le das esa reproducción de voz y te mostrará y te dirá la reproducción de voz de deuda . Y por último, tenemos aeropuerto previo, que apenas va a transitar al anterior nuestro destino portuario. Se puede elegir a qué destino y se va dedo del pie ir. Y como dije, solo imagínense, tengan 100 o 200 pantallas. Entonces transitará dedo del pie esos destinos que elijas justo aquí tenemos animaciones. Entonces tenemos sólo algunas animaciones básicas Nos hemos disuelto, que es básicamente un desvanecimiento o desvanecimiento. Tenemos diapositiva izquierda, derecha, deslizamiento arriba y abajo. Nosotros hemos empujado, izquierda, derecha, empujar hacia arriba y empujado hacia abajo y no tenemos ninguno. Por lo que incluso puedes elegir no si no quieres ninguna transiciones entre esas pantallas y solo cambiará de inmediato de una pantalla a la siguiente fábulas que tenemos es en fuera relajar y es fuera snap, terminan y rebota. Y todos estos son un poco diferentes. Por lo que está fuera voluntad, obviamente está fuera de la animación está en hará lo contrario. Fácil. Ahora lo hará. Boat Snap hará lo que diga. Terminar básicamente va a ser algo. Algún tipo de combinación entre Snap y el rebote y los límites es básicamente casi así. Se rebotará en su lugar cuando haga clic en que finalmente tenemos la duración, lo cual es realmente importante, y se pueden cambiar estos valores. Entonces, por ejemplo, puedo teclear tres percenter, y va a durar tres segundos. Y ahí es cuando realmente puedes ajustar cómo se ven todos estos diferentes elementos, Obviamente, Obviamente, si quieres la transición, Toby más corto, vas a elegir nítida la hora a partir de aquí. Si querías ser más largo y más largo de un segundo, puedes elegir por ejemplo, cuatro. Y durará cuatro segundos. Por último, cuando quieras dedo del pie agregó algo, cualquiera que lo estrene. Vas a usar esta vista previa de escritorio y esta ventana va a aparecer, y puedes ver claramente cómo se van a ver tus transiciones dentro a menudo esa pantalla. Por lo que en un click justo aquí, puedes cambiar. Se puede ver cambiado a este puerto de arte. Pero cuando hago clic aquí y traigo esta flecha de vuelta, se puede ver que está preservando todo lo mismo en direcciones en todos los mismos elementos que elegimos ir de aquí a. Aquí ahora solo está usando las mismas interacciones para volver a esta pantalla anterior. Y por eso Adobe es tan grande porque recuerda todos los diferentes elementos que escogiste aquí mismo. Y eso es especialmente importante si tienes, por ejemplo, por ejemplo, 100 diferentes nuestros tableros y tienes pocas interacciones, por lo que solo te puedes imaginar Usuario puede hacer clic en esta imagen. Pueden hacer click en este título. Pueden hacer click en este texto. A lo mejor hay un fondo aquí mismo. A lo mejor hay un menú al que llamo por lo que posiblemente no puedas recordar todas esas diferentes transiciones. Incluiste 50 pantallas en, y luego tendrás que volver y copiarlas y pegarlas. Pero si estás usando las mismas interacciones, entonces puedes simplemente arrastrar este pequeño mango azul a la siguiente pantalla, y mantendrá las mismas interacciones que elegiste para esta y con cada actualización y están tratando de liberar mensualmente actualizaciones, y hasta ahora hicieron un trabajo fantástico con esas actualizaciones. Con cada actualización, Éxtasis es cada vez más inteligente y más inteligente. Por lo que dentro de unos años será simplemente increíble lo que puede hacer y lo que puede traer a la mesa cuando se trata de ti. Diseñé unas animaciones nuevas, así que me gusta mucho por ello porque dentro de esta arriba puedes hacer diseño prototipo share . Podrás colaborar con tu cliente y tus desarrolladores. Puedes enviar diseños, paquetes puedes enviar prototipos, recibir comentarios, empaquetar todo, exportar todo bien guardar todo es videos. Entonces realmente pensaron en todo. Y realmente crearon este simpático sistema igualitario para nosotros. Toe realmente disfrutar de nuestro proceso de diseño porque lo hace mucho más fácil y, como dicen, diseñado a la velocidad del pensamiento. 6. Ícono 1: en este video, vamos a crear esta marca de verificación, que puedes utilizar en tu página web los botones de confirmación APS para que tus usuarios sepan que han completado con éxito la tarea que les pides. Entonces, empecemos. Entonces vamos a empezar con un arte cuatro o 500 por 500. Y si no sabes cómo crearlo, puedes pegarte a casa. Y aquí en el tamaño personalizado, puedes ingresar 500 con 500 presionar, entrar o regresar, y vas a llegar a escuchar que vamos a usar el mental. Entonces haga clic en él. Haga clic aquí, luego aquí escapó para escapar de esta elección y haga clic aquí en la ronda guardada porque queremos que nuestros bordes estén alrededor, aumenten el tamaño del trazo a 10 por centro y luego simplemente voy a pasar el rato sobre él aquí y haga clic en algún lugar alrededor de aquí dedo del pie Añadir un punto más y me voy toe klik En algún lugar fuera seleccionado. Golpea este medio, este medio para colocarlo abajo en el medio, haz clic y haz doble clic para que puedas entrar al aire en este modo de edición. Haga clic en este y simplemente muévelo a aquí. Después haz click en este y muévelo a algunos por aquí para que puedas crear este cheque Marcar lugares seleccionados en el medio así. Y ahora lo que vas a hacer es que vamos a hacer algunas copias. Por lo que alejar un poco Hit control D D D y en D una vez más. Ahora vamos a usar estas copias dedo del pie animar todo. Entonces vamos a empezar desde el no punto en este de aquí. Voy a duplicar, click, click en este, arrástralo todo el camino hasta aquí hasta que se encuentren en el centro justo aquí y luego dar click en éste y moverlo hasta conseguir este círculo así y voy a bajar su fecha base bajada a cero. Ahora, en este segundo estado, queremos extenderlo hasta aquí. Pero no escuchar. Entonces DoubleClick una vez más, y luego simplemente mueve este dedo de aquí hasta que obtienes este círculo así. Y en el 3er 1 está yendo extensión del dedo del pie. Y por último, en el último, voy a dar clic en él y tocar 02 veces o simplemente puedes usar el deslizador. Va sobre el a pasty abajo a cero. Y ahora animemos todo. Así que haz clic aquí, usa prototipo, luego simplemente arrastra este dedo del pie de flecha aquí. tiempo usado también anima, y vamos a usar está en fuera en este. Haga clic en este dragones, y en lugar de facilidad para entrar fuera, vamos a usar Snap porque queríamos chasquear de disposición a disposición y luego finalmente dar click justo aquí, Entonces arrastre esta flecha a esta última. Y en lugar de snap, vamos a usar es de 0.3 segundos porque queríamos desvanecerse a cero. Y por último, puedes arrastrar esta única manera antigua hasta aquí y usar la misma configuración ahora para previsualizarla. Da click en este 1er 1 click play y esta bonita marca de verificación se está mostrando, por lo que es realmente fácil crearlo. Como puedes ver, es solo una sola línea, pero jugando con estos puntos y reposicionarse alrededor para conseguir esta forma y luego simplemente animado. Y este es el resultado que vas a conseguir, así que te veré en el siguiente video 7. Icon 2: en este video, voy a mostrar cómo puedes animar este icono del corazón. Por lo que un nuevo toque en él se va dedo del pie aparecen como te ha gustado algo. Entonces esto está tomando inspiración de Instagram, obviamente. Entonces al hacer clic estos ordenan rayos de luz saltan de este corazón para indicar que es luz. Y también te voy a mostrar en este video cómo puedes cambiar el color. Entonces es genial. Pero al hacer clic en él, se volverá rojo. Entonces, empecemos. Por lo que tengo este icono del corazón Voy a dar clic en el Nuestro puerto una vez más es 500 por 500. Voy a dar click aquí mismo en el Grande y voy a elegir cuadrado. Si tienes un diseño como ese, simplemente haz clic aquí y cámbialo de nuevo a cuadrado. Ahora lo que voy a hacer es usar el lápiz. Voy a acercar un poco, click justo aquí y tal vez algunos por aquí pegan escape, click justo aquí para redondear la gorra y tal vez aumentar debido a 10 percenter y vamos reposicionarlo un poco mejor, así que voy tenerlo Quizás esto esté bien. Entonces vamos a tener estas dos plazas a la parte superior y tal vez tener un cuadrado vacío, como tal tal tal vez así porque el corazón ocupa justo aquí. Golpea el control del clic duplicado justo aquí para rotarlo y posicionarlo aquí. Por lo que una vez más, queremos tener uno. Bueno, porque el icono es un poco más blanco. Va a estar en algún lugar por aquí. No, seleccione. Ambos tenían escritura de control duplicada una vez más, y luego pinchan justo aquí para voltearlos verticalmente. Mantén tu tecla de turno y Flecha abajo lo movió hacia abajo. Y con tu tecla de turno seleccionada hasta que se chasquearon así, sabrás que tienes exactamente el mismo espaciado entre lo viejo. Entonces voy a golpear el control D y controlar el una vez más. Y lo que vamos a hacer ahora es ir de pie, seleccionarlos todos y hacer click uno por uno para quitar y estas casillas porque ya no lo necesitamos . Ahora, en este 1er 1 vamos con el dedo doble click en esta línea, luego dar click en este punto y moverlo hasta que se encuentre justo aquí. Haga clic aquí, Haga lo mismo. Así que haz clic aquí y muévete con hacia arriba hacia el corazón. Al igual que así. Y voy a dar click en el 1er 1 turno entero. Haga clic en el último. Hacen clic en mi cero, o puedes bajar tu Bay City aquí mismo. Ahora lo que vamos a hacer en este 2do 1 es dar click en el corazón, mantener presionado turno, Ault y Left Click para que puedas ampliarlo. Entonces en algún lugar por aquí y luego finalmente en nuestro 3er 1 se iban de pie. Tenlos extensión del dedo del pie aquí. Entonces voy a dar clic aquí y hacer básicamente lo contrario. Tan normal con en esta dirección hasta que se encuentran en el círculo así y finalmente hacen lo mismo para este último. Al igual que así. Después haga clic en el primer turno de hoyos, haga clic en el último y bajó su básico a cero. Ahora tenemos que animarlo tan rápido. 1er 1 y voy a dar click en mi corazón porque queremos que la gente toque este corazón. Cámbialo a prototipo de diseño, arrástrelo hasta aquí. Vamos a elegir Step Auto. Animate es en 0.2 segundos, y luego vamos a dar click en este. Arrástrelo con el dedo del pie aquí, y queremos usar el tiempo en lugar de tap. Entonces para este 1er 1 usaste un grifo. Pero para este 2do 1 vamos a usar el tiempo o el dedo del pie animate. Y tal vez él está fuera es con una mejor opción. Entonces vamos a ver qué se nos ha ocurrido. Puedes hacer click en este 1er 1 click play, y cuando toques, puedes ver cómo se ve. Entonces si crees que es demasiado, puedes por supuesto hacer lo mismo. Pero vamos a superar el ingenio fuera de estas líneas para que puedas seleccionarlo desde aquí y simplemente por todas partes hasta aquí. Entonces tal vez cinco percenter y hacer lo mismo para este, que puedas seleccionarlos todos. Da click cinco aquí y puedes ver que los bajamos y finalmente hacemos lo mismo para el último . Entonces selecciona todos ellos Q cinco, y lo que vamos a hacer en este último ejemplo es que queremos elegir el corazón tan final nuestro puerto. Queremos arrastrarlo para empezar Elegir tiempo está fuera 0.2 segundos porque quieres que vuelva a circular a este 1er 1 así que haz click cuando este click play y cuando toques en él Así es como se ve ahora Y es que circula de nuevo al 1er 1 Ahora por fin, déjame mostrarte cómo puedes cambiar los colores. Por lo que cuando la gente haga clic en el corazón, se convertirá en rojo. Y lo puedes hacer simplemente cambiando de nuevo a la zona. Escogiendo tu corazón, haz clic aquí. Elige el color correcto, que son los que queremos. mejor este Escoge este último un clic justo aquí y luego aquí mismo dedo usa el mismo color saltar de nuevo al prototipo y al hacer clic, se volverá rojo Y debido a que circula de nuevo a este 1er 1 Como puedes ver, pasó de rojo volver a grande. Y también queremos cambiar el color del rayo. Así que vamos a seleccionarlos aquí y hacer clic aquí para llamar a un recolector y hacer lo mismo por todos ellos. Entonces, así y puedes saber circulo de nuevo al prototipo y ver cómo se ve. Entonces, como se puede ver, ahora también es rojo. Y va de genial a rojo y de vuelta a gris otra vez. Entonces eso es todo para este. Y te veré en el próximo video 8. Icon 3: en este video, vamos a crear este icono de punto pulsante, que puede ser utilizado para, por ejemplo, cuando algo s streaming o alguien salió en vivo y puedes usar este icono correspondiente al color. Entonces, por ejemplo, se puede leer para indicar que la persona es vida o que la transmisión se va en vivo. Entonces eso es lo que vas a crear en este video. Entonces empecemos. Entonces estoy usando nuestro puerto o 500 por 500. Igual que en todos los demás videos. Voy a elegir el círculo. seco, Círculo grandeseco, agonizado quizá usado 100 por 100. Presione enter posicionado en el medio y en el medio. Haga clic aquí, Control. Ver para copiar este color. Haga clic aquí. Control V presiona enter, y voy a quitar la frontera para este círculo. A continuación, lo voy a seleccionar. Golpea el control D y voy a hacer una copia. Voy con el dedo del pie. Agrandar un poco. Incluir frontera. Quitar la película y para el borde. A lo mejor puedo incluir 60 fuera del espesor y luego simplemente moverlo por debajo de nuestro primer círculo. Voy a golpear un turno viejo y click izquierdo para poder posicionarlo en el centro y sobre el tamaño, así y porque está en la parte de atrás, realmente no importa porque está oculto por este primer círculo. Voy a seleccionar el aeropuerto, golpear control de a duplicado y luego seleccionar Eclipse dos y golpear turno viejo y clic izquierdo del dedo del pie Agrandar por lo que algunos por aquí y reducir borde tamaño dedo del pie una prensa entrar. Y como puedes ver, así es como se ve. Y también voy a bajar su pegado abajo a cero, y eso es básicamente todo. Ahora está animado. Da click en este golpe prototipo drag, y vamos a usar el tiempo. La transición va a ser auto animate está en fuera, y la duración va a ser de un segundo. Y usemos el retraso. Tiempo libre un segundo esta bien, porque nos va a dar un poco de tiempo entre estos dos. Ahora vamos a hacer clic en el 2do 1 arrastrarlo todo el camino de regreso, y vamos a utilizar el tiempo una vez más. Pero ahora mismo no eliminamos este retraso y tenemos que sea un cero. Pero hay que teclear 0.0. Presiona enter para que sepa que quieres ser cero. Haga clic aquí, haga lo mismo. Entonces 0.0 presiona enter, así que va a ser cero. Pero en lugar de acción o para animar, vas a elegir transición y se va a disolver como por costumbre click justo aquí, los niños juegan. Y como puedes ver, ahora estamos teniendo esta animación agradable y pulsante, y tú la vas a usar como set de streaming para cuando alguien salga en vivo. O si quieres llamar la atención de tus usuarios, dedo del pie una cosa en particular en tu tú trabajo. Si crees que este círculo de fondo sale un poco blanco, puedes reducirlo reduciendo el tamaño justo aquí en este segundo nuestro puerto. Pero básicamente depende de ti también. Se pueden cambiar los colores, por lo que si se quería leer, se puede cambiar el color de este círculo así como el círculo de fondo. Haz lo mismo en este, y eso es básicamente todo para este video. Te veré en el próximo 9. Icon 4: en este video, vamos a crear un sencillo icono de menú de hamburguesas, por lo que cuando hagas clic en él, se convertirá en una línea y luego cambiará dedo del pie X para que puedas cerrarlo. Por lo que al hacer clic en X, cambiará hacia atrás, puntera una línea y luego cambiará a menú una vez más. Entonces aquí vamos. Una vez más, puedes hacer click en él. Se convierte en X click en la X, y se convierte en icono de menú una vez más. Entonces, empecemos. Entonces empecemos por crear nuestra línea. Voy a usar el mental una vez más. Haga clic aquí. Todo el turno haga clic aquí. Se escapó para salir de ella. Haga clic aquí escribiendo 20. Entonces esa es nuestra multitud enojada de espesor aquí para que tengamos alrededor de Gap. Colóquelo en el medio. Así que seleccionado haga clic justo aquí, luego justo aquí y vamos a hacer duplicados del mismo. Por lo que este va a ser el número dos Hit control D Mantenga desplazar una flecha arriba. 123456 Algo así. Después haga clic en 2do 1 una vez más, golpea Control D y va a ser nuestro 3er 1 Y este va a ser nuestro 1er 1 Así que haga doble clic en el nombre centro de prensa. Y en el 3er 1 mantenga pulsada la tecla Mayús y abajo Flecha. 123456 para posicionarlo, Toby. Básicamente lo mismo que el primer turno entero. Selecciona todos ellos. Golpea el control G para agruparlos aburrido. Haga clic aquí, escribiendo presentador de menú. Y luego haga clic aquí y luego justo aquí para posicionarlos en el medio. Haga clic aquí. Golpear control de para duplicar todo nuestro puerto. Y ahora lo que vas a hacer es que los vamos a mover hacia abajo al centro para que puedas golpear el control y dar click en este 1er 1 para pinchar en él. Mantenga la tecla de turno hasta que encaje así. Haz lo mismo para este 3er 1 Mantenga presionada la tecla de turno y con el ratón, muévala a aquí. Y luego finalmente, lo que tenemos que hacer es dar click justo aquí, Golpear control D y dar click justo aquí en este 2do 1 vamos a reducir Dupay City 20 Y en este 1er 1 vamos a rotarlo para que puedas dar click justo aquí en estos grados. Tipo en 1 35 como asi, click en perturbado uno y click justo aquí escribiendo 45 como asi y ahora tenemos nuestra X. Así que lo que tenemos que hacer ahora es duplicar este control D y finalmente duplicar este control de porque vamos a ir desde línea de remolque de menú, Toe X, volver a la línea y luego volver a ésta una vez más. Entonces empecemos a animarlos. Voy a golpear el control cero. Para encaje en su lugar así cambió el prototipo click en este menú, y por eso lo agrupamos para que podamos dar click en él, arrastramos este mango para escuchar que vas a ir a tu paso también animar. Y en lugar de snap, vamos a usar está en fuera y tal vez 0.4 segundos. Ahora da click en esto nuestro puerto arrastrado hasta aquí, y vamos a usar el tiempo o para animar. Y en lugar de está dentro fuera. Vamos a usar snap ahora de nuevo. Vamos a usar este mismo así que vamos a usar el paso o para animar está en fuera. Así que da click en la X arrástrelo el dedo del pie aquí así que toca o para animar en lugar de pargo. Cuándo usar está en fuera y usar punto cero para todas partes solo para que podamos mantener las cosas simples y finalmente hacer lo mismo para aquí. Entonces da click aquí para ver lo que hicimos. Entonces hicimos tiempo o para animar y chasquear. Por lo que da clic aquí para seleccionar este. Arrástrelo para que tengamos tiempo o para animar y tenemos snap así Y por último, para volver a aquí simplemente arrastró el mango a este 1er 1 Vamos a usar el tiempo en lugar de snap. No vamos a usar ninguno porque vamos de este ícono de vuelta a este básicamente mismo ícono . Y vamos a bajar esto a 0.2. Así que están esperando. El tiempo es menor. Entonces ahora vamos a previsualizarlo. Voy a dar click aquí mismo, y puedes tocar tu ícono y puedes ver cómo se ve. Haga clic aquí para volver a cambiarlo y haga clic aquí para hacer lo mismo. Básicamente, una vez más. Ahora, una cosa que nos perdimos es que muy va a saltar de nuevo al diseño. Nos vamos toe klik aquí mismo. Selecciona el número dos y toda la obesidad abajo a cero y a la misma, Este. Entonces en el número para bajarte básicamente hacia abajo, y ahora es vista previa como así y ahora no puedes verlo cuando desaparece, como puedes ver, Entonces eso es básicamente todo. Hemos terminado de crear nuestro ícono de menú y puedes ver que es algo realmente fácil y realmente sencillo de hacer, y te veré en el siguiente video. 10. Icon 5: en este video. Queremos crear este icono de descarga para que puedas ver cuando hagas click en él. Esta flecha irá abajo del dedo del pie. Indica que la descarga ha comenzado y puedes incorporar esto en tus botones o en tu sitio web o en tu app. Entonces cuando la gente está descargando, pueden estar seguros de que el NAL sólo ha comenzado. También puedes cambiar el color. Por lo que cuando hacen clic en él y se inicia la descarga, este siguiente icono puede cambiar el color así como esta línea de fondo. Entonces, empecemos. Por lo que una vez más tener mi puerto en 500 por 500. Y también tengo este icono de flecha y vamos a crear la línea en la parte inferior. Saw Ali fue el clic mental en algún lugar por aquí y mantenga pulsado turno, Haga clic en algún lugar por aquí, hit escape una vez más golpeó tapa redonda y golpeó 15 como, así que Ahora vamos a acercar un poco más. Seleccionarlos a ambos como tan golpeados en el círculo medio, colocarlos en el medio y posicionar la flecha justo por aquí hasta que se encuentre con la línea superior fuera de esta línea de fondo, básicamente así y lo que vamos a hacer ahora se arrastra su bajada. Llámalo línea como así y los vamos a posicionar así golpea el control G para agruparlos, posicionarlos en el centro como así derecho Haz clic en grupo y vas a duplicar nuestra flecha. Por lo que golpeó control de en posición. Está en algún lugar por aquí. Está bien. Ahora agrupa las flechas hit control G poco click justo aquí. Escriba flechas de frijol como así Y vamos a utilizar la herramienta de rectángulo. Y vas a dibujar un rectángulo como este y a arruinar para cubrir nuestra flecha inferior e ir hasta el borde. Por lo que lo consumes mucho más cerca para cubrirlo bien. Entonces, así y se fue a quitar la frontera y vas a llamar a esta mezquita y ver cómo lo hicimos . Creo que necesitamos moverlo un poco a la parte superior para que puedas presionar tu, uh, uh, tecla de flecha superior cuando tu teclado y puedas moverte en esta carretilla inferior Solo un píxel arriba así. Y ahora lo que vamos a hacer es seleccionar la mezquita, mantener el selector de turno, mantener el selector de turno carpeta de flechas y clic derecho y mezquita de judíos con forma. O puedes usar el control de turno em o la glándula de desplazamiento. Y si estás en un Mac para enmascararlo y básicamente tienes esta forma. Ahora haga clic justo aquí, golpeó, controló el para duplicarlo. Y ahora lo que tenemos que hacer es saltar la máscara insider, click en nuestras flechas. Mantenga el turno, Mantenga el ratón izquierdo, haga clic y coloque este grupo hacia abajo en su lugar. Y también puedes usar tus flechas a algún lugar por aquí para que podamos verlo. Y cuando hagas clic afuera, esto es lo que vas a conseguir. Entonces eso es básicamente todo para la parte de diseño. Hagamos ahora prototipo y así haga clic aquí. Click prototipo y lo que vamos a hacer es básicamente vamos a tocar aquí mismo para que puedas arrastrar el mango fuera. Todo se aburren. Por lo que fuimos a elegir un tap o a animar. flexibilización va a ser fácil de entrar y la duración fuera de un segundo y ahora en el segundo 1 arrástrelo dedo del pie aquí en lugar de tapper cuándo usar el tiempo. Nota fácil y aquí vamos a escribir en 0.0 segundos y va a ser está en fuera mismo. Y asegúrate de tener el retraso fuera de cero, y debes tenerlo por defecto. Haga clic aquí, Hit, play. Y cuando haces clic en algún lugar por aquí, esto es lo que pasa. Y luego va a pasar de este 2do 1 de vuelta al 1er 1 Así que cuando hagas click en él, va a lucir básicamente exactamente igual porque tiene el retardo apagado. Cero segundos del 2do 1 al 1er 1 se va a cambiar al 1er 1 inmediatamente para que puedas seguir pulsando, y te seguirá mostrando esto. Y por último, te voy a mostrar el segundo truco, cuál es? Se fue a colorear básicamente esta segunda flecha, que es ésta a un color diferente. Entonces, por ejemplo, es solo azul o algo así. A lo mejor no sé algo como esto, tal vez un poco más ligero, así, Y luego cuando haces clic aquí, pulsa la vista previa. Como se puede ver, la muñeca adeudada ha comenzado. Entonces si quieres, puedes crear otro nuestro puerto, y luego asegúrate de que el azul se quede azul en ese 2do 1 y luego cambiar de nuevo al 1er 1 Si quieres, pero creo que no es necesario hacer esto en absoluto porque la gente sabrá lo que has hecho porque les mostraste que esta segunda flecha se está moviendo hacia abajo. Entonces, básicamente, cuando hagan clic en él y vean el segundo, sabrán instantáneamente que el dólar ha comenzado. Entonces eso es todo para este video, y te veo en el siguiente. 11. Icon 6: en este video, vamos a crear este icono de notificación de Bell, por lo que cuando hagas clic en él va a sonar dos veces, círculo derecho va a aparecer y una notificación de número off va a rebotar desde costado. Entonces déjenme mostrarles rápidamente una vez más. Entonces, obviamente, esto no sucederá. Este desencadenador de pasos va a tener un disparador de tiempo cuando implementaste en tu aplicación o un sitio web, porque va a mostrar después de cierto tiempo que el usuario tiene notificaciones. Pero solo quería mostrarte cuándo se implementa en tap, porque es más fácil mostrarlo en el video. Por lo que una vez más, cuando lo pises va a sonar dos veces, este círculo rojo va a aparecer y el número tres va a entrar desde un costado. Entonces, empecemos. Entonces aquí tengo este icono de notificación de campana, y voy a crear un círculo rápido para que veas que tenemos la parte inferior y la parte superior. Entonces vamos a incluir un círculo en solo va a mantener mi tecla de turno y donde dice sentir que voy a dar clic ahí y golpear basado, y voy a usar este color e b cinco f 67 presiona enter y luego me quité el borde porque yo no lo necesito, de verdad. Y como puedes ver, es un color rojo realmente bonito. Van a aumentar eso a 50 hacerlo alrededor agradable y limpio, y lo voy a posicionar un poco más lindo dedo aquí hasta que se encuentre con el toque correcto fuera del hechizo y hasta que se encuentre con el borde superior derecho fuera de este cinturón también. Paso justo aquí. Llámalo Círculo como así y utilízame herramienta de texto. Haga clic en algún lugar dentro de Top tres, por ejemplo, porque queremos usar los números fuera de notificación, puede usar cualquier número que desee. Voy a usar abierto Sense 24 posicionarlo en el medio como así y como así Así Así es una posición correctamente, y también puedes hacer click en el número de todo su turno. Haga clic en el círculo para seleccionar ambos. Haga clic aquí que aquí, y los va a posicionar en el centro tanto horizontal como verticalmente. Entonces voy a incluir a estos dos dentro de nuestra campana, como así y luego posicion son Bell like So Así para estar perfectamente en medio. Al igual que es, estoy usando Art Board 500 por 500. Igual que en todos los demás videos. Por lo que ahora podemos empezar con nuestra animación. Entonces primero lo primero. Hagamos algunos cambios. Entonces me voy del dedo del pie, salto dentro y haga clic en el número. Sostenga el turno y sólo posiciónelo para por aquí. Por lo que no es visible doble toque para hacerla obedecer ciudad a cero porque esa es nuestra primera etapa para el círculo. Yo solo quiero usar uno con uno, así que es extremadamente pequeño. Está en algún lugar por aquí, y puedes dejarlo aquí si quieres, o puedes posicionarte. Está en algún lugar por aquí. Si quieres aparecer que lo vienen desde el centro, puedes pisar cero veces dobles y bajar el Obey City 20 Y básicamente esa es nuestra primera etapa. Entonces lo que queremos hacer a continuación es saltar dentro y luego agrupar la campana por sí sola. Entonces controla G con ambas capas seleccionadas y cinturón de calidad porque queremos que sea separado de estos dos artículos, y básicamente esa es nuestra primera etapa hecha Hit control D en esto, nuestro puerto y él controlaría la una vez más. Lo que quieres hacer para este 1er 1 es seleccionar la campana como así y golpear 10 justo aquí donde dice rotación presionar enter Luego dar click en el 2do 1 del cinturón una vez más golpeó menos 10 porque queríamos ir a la otra dirección. Después duplicar este golpe control en el y golpeó en la campana una vez más y teclear en cero aquí mismo porque queríamos ir a la primera etapa. Ahora, finalmente, lo que queremos es controlar d una vez más para duplicarlo una vez más. Y ahora queremos que aparezca el círculo. Entonces saltaré dentro, pinché en nuestro círculo, aumenté el dedo del pie de Dubay City 100 cambiarlo de nuevo a 50 y 50 justo aquí. Y lo voy a posicionar donde estaba tan alineado con el borde superior fuera de la campana así como con el borde derecho fuera del cinturón. Al igual que así. Y ahora por fin, podemos saltar aquí mismo, localizar nuestro texto, aumentar tu pague city toe 100 y luego simplemente empujar de nuevo al centro así. Por lo que va dedo del pie parece completo aquí mismo. Como pueden ver, tenemos como maney dos para seis diferentes nuestros puertos para este. Pero si quieres que se vea bonito y limpio, entonces necesitamos este muchos tableros de arte. Entonces, empecemos con nuestro prototipado. No, para este 1er 1 como show, tú voy a usar paso. Entonces solo lo voy a arrastrar aquí mismo. Tap para la flexibilización. Vamos a usar está en porque va dedo del pie facilidad en la animación para el 2do 1 vamos a usar el tiempo y dejar todo como está. Simplemente puedes tener esto fácil y salir para que sea agradable y simple está en fuera. Haz que se vea igual y simplemente créelo así. Y para esta final, quería arcos como, así que porque quiero este número 32 límites de derecha a izquierda cuando llegue a este lugar. Entonces vamos a probarlo. Haga clic aquí. Parecen lógica mezquina. Esto un poco al hacer clic en él va a aparecer el rebote del dedo del pie de izquierda a derecha . Y luego el número tres se va dedo del pie aparece una vez más, vamos a probarlo una vez más. Como puedes ver, aparece el círculo izquierdo derecho y luego el número tres rebota y puedes cambiar este número tres Toby en la parte superior para que pueda rebotar de arriba hacia abajo porque es blanco justo aquí. Y todo este ícono es blanco. Puede saltar desde la izquierda. Puede saltar desde abajo usando máscara o como quieras. Pero creo que esto se ve bien por lo que podemos dejarlo así. O simplemente podemos hacer que sufra de este primero nuestro puerto. Simplemente puedes tirar de este mango justo aquí e ir de aquí a aquí usando el tiempo. Entonces ahora cuando lo previsuas, se va a saltar del dedo del pie en seguida y te muestra esa notificación, una animación de notificación. Pero una vez más, como dije, me gusta usar el gatillo de tap porque va a ser mucho sencillo demostrárselo a tus clientes porque de esa manera pueden ver la animación como se pretendía, pero no a sólo la final producto. Por lo que probó una vez más. Déjame grande cuando hagas clic en él va a rebotar de izquierda a derecha número se va dedo del pie aparece de la derecha y rebota en su lugar. Entonces eso es todo para este. Y te veré en el siguiente video. 12. Icon 7: en este video, te voy a mostrar unos días. Animación de tres puntos como los que ves en las redes sociales, sobre todo en el mensajero APS. Entonces Facebook Messenger, si estás usando Viber, ¿qué pasa y demás? Se puede ver a estos como la gente está escribiendo y estás esperando la pry temprana. Aquí está lo que básicamente, estás viendo. Por lo que estos tres puntos para hacerte saber que la otra persona está escribiendo para que puedas esperar un poco para recibir su mensaje. Entonces, sin más preámbulos, empecemos. Por lo que una vez más, como de costumbre, tengo 500 por 500 nuestro puerto. Voy a usar el taburete Ellipse simplemente sostenga mi tecla de turno y dibuje un círculo. Y puede ser de cualquier tamaño que quieras. Vamos a usarla. Por ejemplo 70 con 70 y voy a dar click aquí mismo. Golpea el control C para que pueda copiar este color. Haga clic aquí. Controlar el segundo lo basó. Y finalmente voy a quitar la frontera. Da clic aquí para que pueda posicionar mi círculo en el medio, luego golpear el control D. También puedes usar la repetición. Genial, pero me pareció que esto era un poco más fácil. Voy a posicionar píxeles vacíos aparte, Golpear el control una vez más. Y por último, tenemos 30 aquí también. Voy dedo del pie doble clic aquí mismo y llamar a este círculo. Y este es el número tres. Este es el Círculo número dos. Y finalmente este es el Círculo número uno. Es importante que nombre a sus capas porque también, animar entidad no funciona. Bueno, si eres capas se nombran de manera diferente. Entonces voy a posicionar estos un poco diferente. Por lo que el número uno llegará a la cima y el número tres a la parte inferior. Voy a casa una tecla de turno, pulsa el control G para que pueda agruparlos y llamarlos a esto, por ejemplo Círculos. Voy a dar click justo aquí, luego aquí mismo, Toe. Posicionarlos perfectamente en el medio y este va a ser básicamente nuestro primer estado para nuestro segundo estado. Voy a dar click en patio, trabajarlo control debido al control duplicado y golpeado. Haga click para que pueda dar click en el círculo uno. Sostén la tecla Mayús y la flecha arriba dos veces para que pueda moverme con 20 píxeles hacia arriba. Haga clic aquí. Golpear control de una vez más ahora golpear el control, haga clic en el segundo círculo y sostiene desplazar una flecha hacia arriba cuatro veces. Por lo que 1234 para que puedas moverte con 40 píxeles hacia arriba y dar click en el 1er 1 hit Shift down Flecha uno, también, que puedas llevarla de vuelta a la posición original. Da clic aquí, Golpea el control D y vamos a mover el círculo para bajar dos veces o desplazar la flecha hacia abajo dos veces. Pero esta vez nos vamos a mover. un círculo 3 40 píxeles arriba. Así que cambia 1234 y finalmente golpea el control D. Voy a bajar este. Entonces turno 12 y turno 12 y eso es básicamente todo. Deberías tener cuatro tableros de arte como este porque este es nuestro comienzo de estado. El punto número uno se va a mover hacia arriba. Después 2do 1 luego giró uno. Y mientras el 3er 1 está bajando, todos ellos ya han bajado. Entonces, animémoslo. Voy a elegir prototipo, haga clic aquí en el mango azul, arrástrelo hasta aquí, y vamos a usar el tiempo porque todos ellos estarán basados en el tiempo y para la acción. Usemos los enemigos de la foto relajando. No vamos a usar ninguno. Y para la duración, usemos 0.2 segundos. Simplemente arrastra esto hacia abajo viejo camino hasta aquí y finalmente sobre este último. Arrástrelo todo hasta el frente y usemos el delay off 0.2 segundos porque queremos que este último dedo espere un poco antes de que se vaya todo el camino hasta el estado inicial . Entonces, vamos a dar click aquí mismo. Golpea nuestro adelanto y podrás ver cómo se ve. Entonces básicamente, este último se va del dedo del pie. Espera solo un poco antes de que se vaya todo el camino a este 1er 1 Pero realmente no me gusta cómo se ve, porque vamos a dar click aquí mismo que quitar y retardar el tiempo. Por lo que voy a dar click a 0.0. Presionar entrar porque quería esperar de éste a éste, no de éste a éste. Así que vamos a dar click en este 2do 1 y en él, vamos a utilizar el delay y hit preview una vez más. Y ahora, como se puede ver, se ve mucho más limpio porque cuando llega a esto, primer estado está yendo puntera pesos 0.2 segundos y luego empezar de nuevo la animación todo. Y ahora tiene mucho más sentido que por su peso del dedo del pie desde este puntera el 1er 1 Más bien, va peso del dedo del pie desde el 1er 1 hasta el 2do 1 para que puedas ver que se ve muy suave porque elegimos relajar ninguno, porque para esta animación en particular, si eliges alguna de estas flexiones, estos puntos no van a lucir naturales, y van a rebotar y terminar y a chasquear en posición. Pero queremos que los dedos sean lo más naturales posible. Entonces como puedes ver, están en este caso. Entonces eso es todo para este video, y te veré en el siguiente. 13. Icon 8: en este video, te voy a mostrar este icono de búsqueda cerca. Por lo que al hacer clic en el icono de búsqueda, alinear saltos dentro giros en remolque X, y cuando se golpea, la X se va a cerrar y saltar de nuevo a la misma posición y luego darle la capacidad de hacer la animación una vez más. Por lo que una vez más, al hacer clic en él, se va a convertir en ropa. Cuando te acerques, va a volver a buscar, y este círculo se va a distorsionar un poco. Entonces, empecemos. Entonces, como de costumbre, tengo mis se vierten a 500 por 500. Voy a usar la Elipse. Todavía dibuja un bonito círculo grande. Démosle unas 240 semanas, 200 por la altura. Colóquelo en el centro como así y para la frontera. Usemos por ejemplo, cinco. Creo que eso funciona bien. Puedes usar más si quieres. Si quieres que el ícono se vea un poco más atractivo, tal vez, pero usualmente uso cinco. Pero lo que estás parado en este caso veamos cómo se ve eso. Voy a llamar a este círculo. Está bien, así que voy a usar mi lápiz click aquí mismo en el medio. Empate, también. Entonces estamos por aquí, él se escaparía. Haga clic aquí para redondear el gorro. Y si escribo 10 como puedes ver va a lucir exactamente igual que este círculo y puedes seleccionarlo y luego colocarlo en el medio. Al igual que lo vamos a llamar a esta línea un control de niño D y llamó pero uno alineado a gustar así Y voy a agrupar estas dos líneas. Entonces el control G call it alinea y agrupa todo el asunto y llámalo ícono así. Por lo que para este 1er 1 vamos a crear nuestro icono de búsqueda. Entonces voy a agarrar las líneas y voy a flotar aquí mismo. Gíralos solo un poquito a alguien por aquí y coloca este dedo del pie por aquí. Ese ciclo parece que se ve bien y puedes posicionar el ícono para estar en el centro así Y finalmente, lo que quiero es golpear control, dar click dentro del círculo DoubleClick quiere de nuevo y pasar el cursor sobre algún lugar por aquí así que puedo añadir un punto más. Entonces hagámoslo otra vez. Usa el círculo, haz doble clic dentro y puedes hacer click en estos puntos y luego añadir un punto más a algún lugar por aquí porque esta es la zona que se va a distorsionar cuando esta línea va a salir a la vista de nuestro ícono de búsqueda. Entonces eso es todo para los primeros Estados. Entonces el estado original usemos un 2do 1 Así que controló los dos duplicados. Ahora vamos a seleccionar estas líneas y vamos a posicionarlas solo perspicacia a algún lugar por aquí. A ver. Y una vez más, fui al click en el círculo Haga clic en este nuevo punto recién creado que acabamos de crear y simplemente distorsionamos a algún lugar por aquí. Puedes jugar con este ángulo si quieres. Entonces, por ejemplo, puedes crear para ser un poco más dramático a algo como esto. Si quieres. Sí, eso se ve bien. Voy a cerrar este click aquí mismo. Golpear control D Ahora lo que vas a hacer con las líneas es que vamos a abrir esto, usar las líneas, mantener nuestro turno, mantener, mantener, y luego simplemente posicionarlas para que estén en el centro fuera de nuestro ícono. Pero antes de hacer eso, tenemos que seleccionar este primer círculo simplemente seleccionado de aquí. Golpe control C cerrar este salto a la vista. Elimina este círculo y golpea el control V porque eso va a posicionarse a circular en la exactamente la misma posición que este 1er 1 Vamos del dedo del pie, muévelo hacia atrás Así las líneas están en foco y ahora vamos a seleccionarlas a ambas. Haga clic aquí, luego justo aquí para posicionar nuestras líneas en el centro fuera de este ícono. Entonces eso es todo para que este control de etapa lo duplique una vez más. Y ahora tenemos dedo del pie rotar estos iconos para hacer un icono cercano. Entonces usemos este jugo de naranja 25 o elijamos 135 como así y en el 2do 1 Vamos a usar 45 y básicamente eso es todo para la creación que tenemos o somos todos nuestros estados. Y ahora básicamente, lo que vamos a hacer es dar click aquí mismo, golpear control de para duplicar este. Da clic aquí, controla DE para duplicarlo, y este va a ser un primer estado. Este va a ser nuestro estado final porque queremos crear un cierre y finalmente desde cerca del dedo del pie atrás este ícono, vamos a tener el bucle y podemos poder hacer clic en este ícono una vez más y luego crear todos estos iconos más adelante. Entonces empecemos a crear prototipos. Entonces, vamos a dar click aquí mismo. Seleccionar. Nuestros primeros son pobres, pero vamos a seleccionar el icono arrastrado un mango azul a paso para los zapatos de transición o dedo del pie animate. Está fuera de aquí y hace 0.2 segundos porque queremos que todo se vea bonito, limpio y rápido para éste. Vamos a usar el tiempo así que no son pobres para aquí. Vamos a usar fácil ahora 0.2 y simplemente ir de aquí en adelante este. Vamos a usar el grifo porque queremos tener exactamente la misma configuración que ésta para ésta. Vamos a usar el tiempo y finalmente, para éste, también vamos a usar el tiempo. Entonces vamos a comprobarlo. Da click aquí en grande un poco. Al hacer clic en él, se puede ver que ocurre este pequeño distorsión. X va a aparecer al hacer clic en la ropa y se puede ver que la tienda vuelve a suceder. Haga clic aquí. Y como puedes ver, es muy sutil, pero también tiene un aspecto bonito, así que ese es básicamente tu ícono. Puedes usar este icono para animar tus campos de búsqueda, por ejemplo, así que si tienes un campo de búsqueda en tu sitio web o en tu aplicación móvil, puedes usarlo de esa manera solo para traer un poco más de atención al campo y solo un poco más de interés hacia ese campo. Por lo que cuando los usuarios hacen clic en él, pueden ser capaces de notar la diferencia entre solo regular por lo que se llenó y la que tiene la animación del sitio. Entonces eso es todo para este video, y te veré en el siguiente. 14. Icon 9: en este video, voy a mostrar cómo puedes crear este icono responsive, que va del teléfono a la tableta al escritorio y de vuelta al teléfono de nuevo. Esto se puede utilizar en su sitio web o en su aplicación móvil, solo para presentar a sus usuarios que su aplicación o sitio web es receptivo y que pueden usarlo en todos fuera de sus dispositivos. Entonces, empecemos. Entonces como de costumbre, tengo 500 por 500 nuestro puerto, y usemos la herramienta de rectángulo. Puedes sostener tu tecla de turno para dibujar un rectángulo y dejarla ir a algún lugar por aquí, hacer el radio de esquina 20 y hacer el borde con cinco solo para que podamos tener un buen dedo gordo del pie jugando con. Puedes bajar esto y hacerlo un poco más pequeño porque vamos a ir del teléfono hasta la tableta. Y lo que aquí queremos es crear un pequeño botón. Así que usa el dedo del pie elipse y creado así tal vez puedas aumentar el trazo del borde con hasta dos. Creo que eso se ve bien. Colóquelo en el medio asegúrate de estar en la línea con esta forma de fondo. Presiona turno una vez y arriba, Pero para que puedas moverlo 10 píxeles hacia arriba. Y por último, usemos una herramienta de rectángulo una vez más y dibujemos un bonito rectángulo grande. Voy a dar click aquí mismo, controlar, Ver, para poder copiar este color. Da clic aquí, controla V y entra para que el pollo lo pegue y me voy a quitar el borde, y si volvemos rápido en el rectángulo que creamos, podemos ver que es a las cinco. Entonces voy a dar click en esta forma que creamos y para la altura, usar cinco para que podamos tener la misma altura que este borde es palo y finalmente dar click en esta forma de fondo y se puede ver que es 136 en ingenio, así que puedo dar click en esta y teclea en 136 fila centro presiona aquí para estar en el medio, alineándose con el círculo para un turno y era superior una vez para que podamos posicionarlo uniformemente desde la parte inferior y el círculo. Ahora démosles el nombre. Vamos a llamar a ésta una línea esta de abajo y finalmente a ésta la vamos a llamar forma ahora. Lo que también queremos es crear dos líneas adicionales más para ir aquí al fondo porque vamos a usar auto animate y ha explicado varias veces a lo largo de estos videos hay que tener exactamente la misma estructura de capas para poder auto enemigo toe correctamente Así puedes duplicar en esta línea dos veces golpeando el control D. Esto va a ser una línea media y finalmente, esto va a ser una línea de fondo para nuestro escritorio. Y vamos a mover estas dos líneas hacia abajo hasta que se encuentren con fondo fuera de nuestra forma, mover ambas por debajo de la forma. Y por el ingenio, podemos usar algo así como 50 y posicionarlos a todos en el medio, así. Y puedes usar los tres y hacer clic aquí para que los posicione a todos en el medio así. Ahora puedes tientas a todos ellos. Control de golpes, contacto G Informar así y una vez más, asegúrate de que esté en el medio. Al igual que así es para que podamos golpear el control D para crear una tableta así Lo que vas a hacer en este caso es simplemente agrandarla. Entonces voy a apagar responsive, muy tamaño porque no lo necesitamos y vas a usar el perno de turno y click izquierdo en una de las esquinas. Aumentémoslo a algún lugar por aquí. Creo que es bueno, y vamos a volver a posicionar algunos de estos elementos para que pueda saltar por dentro. Haga clic en la parte inferior y colóquelo del dedo del pie justo por aquí. Cambia a nuestro pere una vez y finalmente haz lo mismo para la línea enviada fuera de la heroína una vez y ahora, vamos a comprobar rápidamente si algo ha cambiado a forma Quicken, puedes ver la mira sigue siendo cinco, y puedo dar click en la línea y ver que la altura de la línea es ahora siete. Entonces cámbialo de nuevo a cinco y haz el movimiento una vez más. Así que cambiar un barril quiere, y eso es básicamente todo. Y podemos hacer lo mismo por estos dos. Si quieres golpear cinco y solo asegúrate de que estén en el borde inferior fuera de esta forma. Pero debido a que nuestra forma tiene un color blanco color Whitefield, realmente no importa porque están posicionados debajo. Entonces eso es todo. para nuestra tableta y pongámosla en el medio así. Y por último, vamos a crear un escritorio para que controlara profundamente y lo que quiero hacer. Aquí puedes hacer click insight, y quiero ocultar nuestros botones. Así que simplemente haga clic aquí. O aún mejor, puedes bajar. ¿ Lo basas abajo? Por lo que desprecias 02 veces o mueves el deslizador todo el camino hacia la izquierda, y lo que queremos en este caso es dedo del pie. Agrandar esta forma así como la línea para que pueda sostener su llave de control. Selecciona dos de ellos. Haga clic cuando sea clave antigua y luego haga clic en uno fuera de los sitios. Entonces ve a algún lugar por aquí. Creo que es bueno. Y finalmente mover estas dos líneas hacia abajo. Por lo que Celik, ambos tenían turno 12 y golpearon turno 12 para esta primera parte. Ahora esta parte de uno, porque va a ser un stand, va a ser un poco más grande. Entonces en lugar de 68 usemos algo así como 90 press enter o incluso mejor, 120 solo para hacerlo mucho más grande. Y por último, puedes reposicionarlo para estar en el centro así y ahí tenerlo. Contamos con nuestro escritorio. Entonces vamos a ponerlo de pie en el centro así. Y ahora tenemos todas nuestras tres formas listas para ir. Ahora lo que podemos hacer es dar click aquí mismo, elegir prototipo. Simplemente arrastre y elija retardo de tiempo. Podemos elegir un segundo elegir auto animate y puedes usar facil ahora en lo que quieras y hacer lo mismo para este. Tan solo asegúrate de tener que retrasar aquí también. Entonces lo queremos dedo del pie Espere un segundo entre cada animación para que los usuarios puedan ver lo realmente es y lo que realmente hace para que se previsualice para ver cómo se ve eso. Y puedes ver que se agranda bien y este botón desaparece y el trazo de línea se mantiene consistente a lo largo de estos iconos. Y como puedes ver, todo se ve muy bonito y limpio. No hay una última cosa que podamos hacer. Como puedes ver, estos iconos están a su alrededor. Pero estas dos líneas de fondo no lo son. Entonces podemos cambiar eso. Simplemente seleccione ambos o haga clic uno por uno y luego elija trazo, tal vez 20 o tal vez incluso 50 solo para que quede un poco más claro. Algo así. Funciona bien y vamos a comprobarlo una vez más. Como puedes ver, cambia a teléfono a tableta. Y como puedes ver, estas dos líneas ahora están bien alrededor, así que eso es todo. Básicamente, para este video, espero que te haya gustado. Y como puedes ver, es realmente fácil crear estas transiciones. Tan solo tienes que crear el icono. Hicimos la transición en mente. Entonces, como viste, tienes que mantener todos los nombres de tus capas consistentes y tienes que cambiarlos en consecuencia . Por lo que encajan entre cada transición y solo asegúrate de dejar el retardo de tiempo entre cada animación en un segundo, para que tengas un poco más de espacio y los usuarios puedan entonces determinar. De acuerdo, así que esto es un teléfono. Esta es una tablet, y finalmente, esta es una computadora de escritorio, así que eso es todo para este video, y te veré en el siguiente 15. Icon 10: en este video, voy a mostrar cómo puedes crear este icono de pausa de reproducción. Por lo que cuando te pegas, la obra va a cambiar de dedo una línea y luego dividirse en dos creando icono de oposición. Y al hacer clic en el icono Pose, saltará hacia atrás, puntera una línea y luego cambiará de nuevo al ícono de la placa. Entonces, empecemos. Por lo que una vez más estamos en 500 por 500 para el tamaño del aeropuerto. Voy a usar el Ellipse Tal dibujar un bonito círculo grande. Usemos 200 por 200. Mismo líquido lo. En algunos de los ejemplos anteriores, los analistas usan cinco para el trazo con Now. Lo que vas a hacer es que vamos a acercarnos un poco más así, y tú vas a usar el lápiz y vamos a dibujar una parte simple. Al igual que así escapó. Haga clic aquí escribiendo cinco y haga clic aquí para correr el campamento y hacerlo agradable y alrededor. Ahora selecciónelo y colóquelo en el medio así, y también lo voy a posicionar un poco a la derecha. Al igual que así. Si crees que va a ser demasiado alto. Simplemente haga doble clic en él. Haga clic aquí para bajarlo un poco así y luego reposicionarlo al medio así. Ahora, esta va a ser nuestra primera línea por lo que sólo podemos llamarla línea on line one hit control D y controlado la una vez más. Entonces esto va a estar mintiendo y finalmente esto va a estar mintiendo tres. Y por último, vamos a hacer dos copias más fuera de esta primera línea. Por lo que controló el y controlar la una vez más Esto va a ser línea a y se puede agrupar estos dos hit control G y llamado Dispose. Y estos tres llaman por favor me gusta Así que ahora puedes ocultar el poste o simplemente bajarlo por debajo placa y usaste una línea uno y línea a, por ejemplo, y solo podemos rotarlas. Entonces cuando se pasa el cursor sobre de cerca, se pueden ver estas dos flechas y se puede simplemente un girarlo así, y se puede posicionar a la parte superior como este extremo de la misma para la línea a pero en la otra dirección. Entonces algo así y posiciónelo solo para asegurarse de que esté en la esquina así. Y ahora simplemente puedes reposicionar estos dos para que puedas hacer doble clic en éste y hacerlo así. Por ejemplo, conduces debilitado este y conectado al final así. Y ahí vamos. Tenemos nuestro ícono de juego, y si no se ve como tú lo quieres, simplemente puedes bajar estos dos. O no puedes hacer click en este 1er 1 y tal vez hacerlo mucho más cerca como este y un probable condicionado a para que realmente puedas jugar con él. Y además, una forma más es simplemente seleccionar esto. Entonces selecciona el círculo y vamos en círculos y simplemente dibujamos una pauta de aquí a la mitad así, y vas a ver eso si está en el medio o no. Entonces porque no lo es, vamos a hacer doble clic en su analista, posicionarlo así y luego dar click en el 2do 1 y posicionarlo así hasta que estén conectados. Y ahora puedes estar seguro de que es triángulo apropiado para que puedas quitar esta línea y dejarla realmente depende de ti. Pero esa es la primera etapa para nuestro diseño. Hecho. Puedes dar click aquí mismo. Detalle de control picketed nuestro puerto. Y ahora lo que vamos a hacer es que vamos a hacer algunos cambios. Así que usa la línea número uno, haz doble clic en ella y puedes mover este punto hasta que se encuentre justo aquí. Parecen justo aquí también. Mueve esta línea justo aquí hasta que se encuentre en el medio y asegúrate de que esté en el medio. Al igual que así. Asegúrate de que todos estén correctamente alineados así y simplemente muévete un poco del dedo del pie justo así hasta que básicamente tengas una línea recta. Y ahora lo que vas a hacer es mover, reproducir y pausar iconos en el medio para que podamos elegir. El círculo está bien posicionado, todo en medio así, y ahora vamos a saltar y crear otro. Por lo que controla D y retrocede rápidamente en este. Y cuando golpeas el juego, puedes bajar tu Bay City hacia abajo como así, y puedes hacer clic en el plato aquí también y bajar tu Bay City hacia abajo también y ahora uno sin molestar. Vamos a usar el post, y puedes especie de dividirlos para que puedas hacer click en la línea uno pulsando turno y tecla de flecha izquierda uno para terminar de la misma para la línea también una para solo para asegurarte de que tienes el mismo espaciado cuando hayas creado ellos suponga icono. Entonces ahora lo que tenemos que hacer es duplicar este 11 veces más para golpear el control D, y eso es básicamente todo, porque va a ir de aquí a aquí grifo y luego aquí, vuelta a aquí. Entonces vamos a probarlo. Y lo que vamos a hacer es que lo vamos a hacer prototipo para que puedas hacer clic en prototipo aquí mismo . Vamos a elegir esto, como lo son etapa inicial. Entonces vamos a conducir este manejador que paso para la transición. No usaríamos auto animate. De qué uso se sale y 0.3 segundos. Eso es bueno para éste. Vamos a usar el tiempo en lugar de top 0.3 flexibilizar hacia fuera. Y para este, vamos a usar tap una vez más, así que toca o para animar, nota fácil. Y para este, vamos a usar el tiempo porque va a volver al 1er 1 por lo que se prueba rápidamente . A ver cómo se ve. Entonces cuando haces click en él, como puedes ver, es agradable y suave. Al hacer clic en él de nuevo va a saltar al frente en la línea media a dos líneas para la pose y una vez más para desde la línea media de vuelta al triángulo. Una vez más, puedes jugar con diferentes configuraciones. Podrás elegir diferentes facilitaciones. Aquí puedes usar bombas si quieres, pero si no quieres, solo puedes dejarlo ya que es tan viniendo de facilidad en fuera dos en diferentes estados. Pero si quieres, puedes hacer eso también. Además, si lo deseas, puedes cambiar los colores de estos trazos. Entonces, por ejemplo, este debe ser de un color, y al hacer clic en él, cambia para pausar y en este momento en particular, por lo que en esta etapa se mantiene igual. Pero en esta etapa se cambia de color por lo que puede ser azul, por ejemplo, y en este escenario va a saltar de nuevo al color original y va a ser de color original en esta etapa también. Entonces como puedes ver, es una animación realmente bonita, sencilla, sencilla, limpia. De verdad, no hay mucho pasando, pero realmente va a darle vida a tu tú Por qué, sobre todo si estás compartiendo, por ejemplo, una aplicación móvil con tu cliente y ellos van a poder para ver, por ejemplo, puedes crear una animada la barra justo aquí en la barra superior Animal Progress Bar. Y cuando hagan clic en él, la Barra de Progreso se va a detener en ese punto en particular cuando impacten. Jugar una vez más va a continuar e ir hasta el final para que realmente puedas darle vida a tu trabajo así y crear un poco más de interés visual para tus usuarios. Entonces eso es todo para este video, y te veré en el siguiente 16. Iconos Iconos Xd: en este video. Solo quería mostrarte cómo puedes usar los iconos. Huevos manchan aquí. Como pueden ver, tenemos todos nuestros iconos que ya cubrí en estos videos. Por lo que puedes seguir si quieres. O puedes comprobarlo más tarde o antes de empezar solo para que puedas echar un vistazo a algunas de estas animaciones. Y si quieres, puedes ver la animación. Y si te gusta, puedes seguir el video. O si no, puedes saltarte ese video y así sucesivamente. También puedes revisar si te perdiste algo porque, ah, muchas de las veces la gente vuelve a mí y me hace preguntas. Pero aquí puedes revisar el archivo original y ver si tienes todo correctamente. Si quieres previsualizar algunos de ellos, simplemente puedes hacer click en el primer tablero de arte de cualquiera de ellos. Jugaba aquí mismo. Se va a iniciar la animación y puedes comprobarlo y verlo por ti mismo dentro del archivo Theodore B X D para ese ícono en particular que creé durante estos videos para que puedas revisarlos, puedes ir atrás y adelante. puede ver cómo se ven, y se puede previsualizar de ellos sólo para que se pueda ver con qué se está trabajando. Además, una cosa más puedes usar cualquiera de estos iconos que creamos para tu proyecto en particular. Podrás utilizarlos para proyectos personales o comerciales de forma gratuita. Porque, como viste, creamos casi todos desde cero. Y una vez que no lo creé, tomé de Free. El recurso es el que voy a enlazar en el último video off discurso, y ustedes van a poder descargar todos esos iconos para sus proyectos y utilizarlos de forma gratuita para proyectos tanto personales como comerciales. Entonces eso es todo. Echa un vistazo a este archivo, juega con él. Jugaba en algunos de estos iconos y veía cómo se veía la animación, y te animo a ponerlo a prueba por ti mismo y a crearlos para ti también. Siguiendo estos videos, 17. Botón 1: en este video, vamos a crear su menú inferior, el cual puedes encontrar en la mayoría de los APs. Por lo que tenemos este fondo en el medio, y al hacer clic en él se va a dar vuelta de plus. Aún así, X va a escupir todos estos iconos a la parte superior, y cuando golpeas cerca, se va a cerrar y girar de nuevo a plus. Por lo que una vez más, cuando haces clic en él o X escupe todos estos iconos que arriba cuando vuelvas a hacer clic en él va a rebotar de nuevo al molino, rebotar viejo camino hacia abajo y volver a plus. Entonces, empecemos. Entonces esto es lo que tengo aquí tengo estos tres iconos de fondo, así que si hago click en algunos de ellos, puedes ver que tenemos casa. Tenemos nuestro anuncio y ropa adentro. Tenemos icono de agregar o cerrar y así tenemos este círculo de fondo, y finalmente tenemos este icono de cartera todo el camino. Está bien y en la parte superior tenemos tres iconos, que son sólo un poco más pequeños que estos tres en la parte inferior, porque estos iconos primarios del aire y estos son iconos secundarios y son sólo un poco más pequeños para que puedan acomodarse para estar dentro de este círculo. Por lo que tenemos un ícono de cámara, icono de imagen así como video. No puedo aquí mismo. Entonces lo que quiero hacer primero, por favor seleccione este ent cerrar. Voy a duplicar este círculo y vas a conseguir estos archivos para que puedas seguir a lo largo de todo este video y voy a duplicar este círculo y colocarlo en algún lugar por aquí. Voy a hacer dos copias más. Entonces controlaría De control de una vez más y los voy a separar como So Now, finalmente, me voy de pie. Agrega todos estos iconos dedo del pie de los círculos. Entonces voy a arrastrar imagen justo por encima de este círculo medio. Voy a dar click en él, asegurarme de que esté en el medio. Lo es, y me voy dedo del pie simplemente Muévete aquí mismo. Selecciona la imagen usando la tecla de control Hit control G to group There. No, rápido aquí mismo. Tipeando imagen como Así siguiente Voy a usar este círculo para la cámara. Ubicó la cámara. Aquí está. Arrástrelo justo sobre el control de golpe de círculo G y llame a esta cámara, y finalmente tenemos el video como el final, y lo voy a posicionar aquí mismo. Controló G llamó a este video como Así que ahora, pesar de que la imagen está en el medio y debería estar en el medio justo entre cámara y video, lo voy a dejar en la parte superior porque se va a saltar del dedo del pie primero y después de . Estos dos van a aparecer. Entonces agrupémoslos primero a todos, como así controlaba G. Y los voy a llamar, por ejemplo, top de Aiken porque van a ir a la parte superior de estos iconos inferiores. A continuación, voy a seleccionar todos los iconos y cambiar su color. Por lo que sosteniendo mi control, G click justo aquí. Haga clic en el color de fondo blanco. Y ahora, por fin, me voy de pie. Simplemente colocarlos Toby en el medio, así voy a hacer lo mismo para esta cámara y finalmente hacer lo mismo para este video. Entonces los estoy seleccionando a ambos y golpeando justo aquí para posicionarlos a Toby en el medio. Y eso es básicamente todo para el proceso de creación fuera de este video. Lo que quiero hacer a continuación es abrir esta carpeta, seleccionar los tres en click justo aquí para que pueda posicionarlos en el medio. Entonces haga clic aquí para que pueda estar perfectamente en el medio como este ícono y simplemente muévelo todo el camino hacia abajo hasta que se encuentre. Al igual que así hasta que quede perfectamente detrás de este icono de cierre de anuncio. Entonces eso es básicamente todo para nuestra parte de diseño. Voy a dar click aquí mismo en el aeropuerto, Hit control D, y puedes duplicarlos a medida que avanzas. Entonces primero, lo que vamos a hacer es hacer clic dentro de este anuncio cerrar icono, seleccionar esta forma más y girada manteniendo turno a unos 90 grados o menos 90 grados para que podamos tener esta X siguiente. Yo lo voy a cerrar. Golpear control DE a duplicado una vez más. Y lo que quiero hacer ahora es mover estos iconos de stop a la parte superior para que puedas sostener un turno en nuestro peril para empujar arriba entonces bache forrado como este hit shift y vestimenta en 234 veces , por ejemplo, para que puedas tenerlo a 40 píxeles más arriba de este. Siguiente, ¿qué? Vamos a hacer es golpear control de una vez más, saltar dentro de estos y luego seleccionar la cámara. Sostenga el turno en la flecha izquierda, seleccione video, turno completo y flecha derecha un par de veces y luego los movió, por ejemplo. Tengámoslos a 40 píxeles. Entonces en algún lugar por aquí y con lo mismo para éste. Entonces si alejamos un poco, golpeamos el control cero para ver qué hicimos. Por lo que estamos empezando con este estado. A continuación, nos vamos a trasladar a este estado. Una vez que una persona hace clic aquí, entonces estos iconos van a saltar por detrás de este icono X, y se van a dividir en tres y mostrar este icono. Ahora, lo que también necesitamos es un color rojo para que podamos indicar que la gente puede cerrar este ícono de Mex . Por lo que ya tengo un color. Voy a saltar perspicacia y golpearme Tecla de control. Haga clic aquí. Y en lugar de este color azul, voy a usar este rojo. Entonces es e 53 c 85 percenter, y yo voy a hacer lo mismo por este. Haga clic aquí. Control de trigo basado exactamente del mismo color. Ahora lo que vas a hacer a continuación es terminar en este estado. Por lo que necesitamos copiar este. lo que el control D y finalmente copiar este 1er 1 tan controlado el una vez más. Entonces vamos a ir a círculo completo desde aquí todo el camino de vuelta a aquí, y luego podemos hacer clic con el dedo del pie, volver a este. Entonces ahora vamos a empezar a crear prototipos y a añadir algo de movimiento. Así que vamos a dar click aquí para este 1er 1 Vamos a dar click en el botón, arrastrar este mango azul vamos a utilizar el paso también animar. Vamos a usar estos en fuera y 0.3 segundos está bien. A continuación, vamos a elegir el tiempo para este porque queríamos aparecer para, uh por cierto tiempo. Entonces vamos a usar el tiempo auto cualquier carne y en lugar de está fuera. Vamos a usar el viento para arriba porque queremos este viento del dedo del pie hasta la cima. Sólo un poquito para éste. También vamos a usar el tiempo, pero vamos a tener un poco de retraso apagado, así que vamos a tener un 0.4 segundos, y en lugar de terminar vamos a usar el rebote. Entonces aquí está, justo en la parte inferior y lo vamos a extender sólo un poquito a 0.6 porque queremos dedo del pie esperar sólo un poquito como llega aquí antes de que se divida en tres. Y también queríamos rebotar, Así que estos dos iconos exteriores van a rebotar en su lugar. A continuación, vamos a ir a éste, pero no vamos a usar el tiempo. Más bien, vamos a usar el paso. Por lo que vamos a dar click en este botón porque se va a acercar los dedos a usar sus hits en él. Misma liquido con este 1er 1 para abrirla en primer lugar. Entonces vamos a ti paso auto, animate. Y en lugar de rebotar, vamos a usar snap y 0.3 segundos para que puedas escribirlo aquí mismo 0.3 percenter para tener el 0.3 porque queríamos encajar de nuevo en el ícono original, no rebotar ni terminar ni nada por el estilo porque nosotros quería encajar en posición en esta posición media. Y por último, lo que tenemos aquí, vamos a conducir. Este mango roto y lo que vamos a hacer es que vamos a usar el tiempo y para el retardado , vamos a usar 0.4 segundos porque queríamos tener apenas un poco de retraso antes que baje a la X. Nosotros van a usar también animate y en lugar de pargo fue a usar está en fuera. Y en lugar de 0.3, vamos a usar 0.6 segundos. Y por último, queremos ir de este último todo el camino de regreso al 1er 1 Así que voy a seleccionar todo son parte. Arrástrelo justo aquí. Vamos a usar retardo de tiempo 0.4 segundos y vamos a usar snap. Por último, puedes tener esto a 0.3 solo para que podamos tener un poco más de consistencia fuera. Entonces vamos a golpear la vista previa. Voy a dar click en su 1er 1 click justo aquí. Voy a ampliarlo solo un poquito, así que cuando hagas click en él va a rotar, escupe todos estos tres en la parte superior. Se van a dividir en tres límites en su lugar cuando hagas clic en X como puedes ver que solo hay un poco de retraso antes de que bajen. Y por último, esto vuelve al color azul como originalmente. Waas. Entonces hagámoslo. Una vez más, puedes hacer clic en él ya que puedes ver las bombas en su lugar cuando está cerca y van a saltar de nuevo a su vez de nuevo al plus. Entonces eso es todo para este video, y te veré en el siguiente. 18. Botón botón 2: en este video. Vamos a crear este fondo, y al hacer clic en él, va a cambiar de un texto a otro, y una ligera reflexión va a ir de izquierda a derecha solo para darle un poco las cosas . Entonces si lo vuelvo a cambiar al hacer clic en él, se puede ver cómo se ve. Entonces empecemos. Por lo que aquí Havenaar Portable 500 por 500. Igual que en todos los demás ejemplos, voy a usar mi texto. Ochlik aquí mismo. Bean envió mensaje. Asegúrate de que esté en el medio. Fui a usar open sense free cool front cuándo colocarlo como. Entonces a continuación, voy a usar ojos dibujados con herramienta de rectángulo. Rectángulo grande Matthews 2 a 5 con 70 y usemos 50 para las esquinas redondeadas. Haga doble clic en el nombre de la capa y llámenlo VT y posiciónelo justo debajo son enviar mensaje y asegúrese de que está en el medio también. A continuación, voy a usar sin frontera. Ah, siente color apagado tres e. C. Seis ff presentador, y voy a usar el blanco para nuestro texto, simplemente va a dar clic aquí, y voy a agrupar a estos dos y llamar a este botón como así siguiente. Lo que quiero hacer es duplicar este control de texto D. Voy a esconderme y vamos a ver una porción, y voy a teclear el dedo del pie éxito como así y solo asegúrate de que esté en el medio como está ahora mismo. Y mientras voy a hacer es alto esto. Muestra esto y voy a crear un rectángulo más aquí mismo en medio, algo justo aquí, por ejemplo, por ejemplo, y llamar a la mezquita de disco porque esta va a ser nuestra mezquita para el texto. Yo lo voy a posicionar en el medio, como así en el medio, como tan quitado la frontera. Y lo que también quiero hacer es simplemente dejarlo tal como está, o puedes bajar tu ciudad pagada si quieres, solo para que puedas ver tu texto. Pero no, no, no. Dejémoslo en cero y veamos cómo funciona eso. Y lo que quiero hacer ahora, pues el éxito es moverlo justo encima de esa mezquita. Entonces en algún lugar por aquí, veamos. Sí, porque si muevo aquí mismo con mi tecla de flecha inferior. puede ver que golpea la marca superior de nuestra mezquita. Entonces dejémoslo ahí. Entonces tal vez no solo un píxel arriba así. Y lo que quiero hacer es seleccionar los tres y hacer click derecho y elegir mezquita con forma. O puedes usar turno, control em o turno, comandarles mezquita con forma. Y como se puede ver, la mezquita ha creado. Pero lo que pasa es que este éxito desde arriba va a desaparecer, y vamos a ver sólo el texto del mensaje enviado. Entonces no miremos aquí y llamemos disco, escritorio, escritorio, mezquita de texto como así Y lo que quiero hacer saber es crear un rectángulo sobre todo como Así lo voy a mover justo encima de nuestra carpeta, y vamos a llamar a esta una reflexión así, y voy a reducir su peso a algún lugar por aquí quitó la frontera porque no la necesitamos, y voy a hacer doble clic en ella. Voy a seleccionar estos dos puntos en la parte superior, mantener mi tecla de turno y simplemente moverlos dedo del pie en algún lugar por aquí, y voy a hacer clic en este, mantenga presionado el turno uno para sólo para reducirlo un poco. Haga clic en este turno completo 12 para reducirlo un poco más, y eso es básicamente todo. Hemos creado nuestra reflexión. Puedes jugar con él tanto como quieras, pero me pareció que esto es lo suficientemente bueno. Entonces lo que quiero hacer ahora es duplicar este botón para que él controle D y colocarlo justo encima de nuestra reflexión. Y lo que también queremos es seleccionar estos para hacer click derecho y mezquita con forma y esto se va a mezquita son reflejo. Entonces lo que puedes hacer en este punto es que puedes bajar la opacidad de este reflejo, o puedes dejarlo al 100%. De verdad depende de ti. Y llamemos a esta mezquita como así Así Así que en este primer estado, lo que quieres es mover el reflejo hacia fuera de la parte inferior, así que voy a hacer clic en ella, mantener mi tecla de turno y simplemente moverla afuera a algún lugar por aquí. Y entonces lo que queremos es duplicar esto nuestro control de circuito de tablero D y para éste. Queremos que la reflexión recorra todo el camino y salga fuera botón de oferta como así, y también queremos cambiar el color del botón. Entonces voy a usar un bonito color verde como 55 d 466 Una vez más, tendrás todos estos en los archivos de práctica, para que puedas usarlos tanto como quieras. Y lo que queremos en este punto es eliminar este mensaje de envío fuera. Entonces voy a mantener turno en el fondo árabe. Voy a presionar un par de veces hasta que se te oculte, así. Y voy a colocar el éxito aquí mismo en medio fuera de nuestro botón para que puedas sujetarlo , cambiarlo y posicionarlo así. Y cuando haces clic afuera, puedes ver en Lee el éxito. Entonces a continuación tenemos que animarlo. Así es. Se puede ver que sólo tenemos a nuestros puertos, así que voy a dar clic en prototipo, clic en un botón y arrastrarlo hasta el dedo del pie aquí y solo uno a paso. Además, cualquier carne está dentro. Y para la duración, usemos algo así como 0.6 segundos, o puedes usar un segundo. De verdad depende de ti. Entonces cuando haces click justo aquí, puedes Roger, solo un poquito cuando haces click en él. Como se puede ver, se está encontrando una bonita reflexión, y este éxito viene de lo más alto. Entonces vamos a echar un vistazo una vez más y ya puedes ver cómo se ve eso. Creo que realmente se ve limpio y sencillo, y realmente muestra el punto porque va de azul a verde y así como de enviar mensaje al éxito. Entonces eso es todo para este video, y te veré en el siguiente. 19. Botón botón 3: en este video. Vamos a crear este botón. Entonces al hacer clic en él va a cambiar el texto, cambiar este icono y cambiar el ícono y el texto otra vez y básicamente ir del dedo del pie animado esperando. Como se puede ver, esto es cargando y finalmente activarlo. Entonces, empecemos. Entonces lo que tengo aquí es el puerto de arte o 500 por 500 mismo Michael en todos los demás videos hasta ahora , y voy a crear el botón. También tengo estos dos iconos porque nos van a ahorrar un poco de tiempo fuera. Entonces voy a usar el color off tres e c. Seis FF centro. Voy a quitar la frontera. Lo que quiero es tener bordes a tierra 50. Y para el tamaño, usemos de 2 a 5 trigo 70. Entonces voy a posicionar ese botón en el centro, llamarlo justo aquí en Bt y centro, lo voy a mover abajo, y voy a usar mi textil y mecanografía se activa como, así que asegúrate de que sea desde la izquierda. Voy a posicionarlo para estar en el centro así, y voy a moverlo, por ejemplo. Pero ver 12345 alergias, 50 desde este borde, o tal vez podamos ir hasta 60. Creo que eso es bueno. Usemos el color blanco para ello. Controlado los dos duplicados. Voy a esconder este. Voy a llamar a éste esperando. Y por último para la tortuga. Vamos a duplicar este. Escóndete esperando. Y para el 3er 1 llamemos a esto activado así. Y voy dedo del pie básicamente seleccionar los tres y lo movió abajo, así. Y voy a seleccionar todo este control de calor G y frío, este botón así. Y ahora necesitamos crear una mezquita. Entonces para hacer eso, puedo usar el rectángulo para, y puedo dibujar una bonita mezquita grande a algo así, y la voy a posicionar para estar en el centro de nuestro botón así. Voy a quitar la frontera, cargando una ciudad 20 Voy a llamar a esta mezquita como, así que muévelo dentro de nuestra carpeta, Selecciona los cuatro y derecho Click y Judios Mezquita con forma. Voy a llamar a esta mezquita y finalmente, vamos a mover este texto, así que primero se va a activar y el último se va a accionar. Entonces necesito dedo en grupo la mezquita sólo para que pueda hacer esto. Voy a moverme activado a la parte superior porque activar va a ser un 1er 1 Esperando va a ser un 2do 1 y activado va a ser nuestro tercero y último. Entonces, vamos a seleccionarlos ahora. Mezquita de Jules con forma. Llama así a esta mezquita Y voy a sacar rápidamente a estos dos del camino. Entonces muévalos a la cima, por ejemplo, así. Y como pueden ver, ahora sólo tenemos activar y nos vamos de pie ahora crear estos otros elementos. Entonces vamos a crear un círculo al que voy es una estola de labios con algo como aquí. Es buena posición estar en el centro, lo llamó círculo, y vamos a tener la frontera fuera de blancos y tres así, y lo voy a posicionar a algún lugar como 123 Así que Tercera picos es de izquierda. Este va a ser nuestro círculo, y vamos a usar este ícono simplemente colocarlo aquí. Voy a hacer azul este ícono y vamos a moverlo para estar en el centro fuera de todo así . Creo que eso se ve bien. Y tal vez podamos hacerlo un poco más pequeño. Entonces algo así como aquí. A continuación, voy a colocar el dedo del pie la marca de verificación justo encima de ella, y la voy a arrastrar por dentro y vamos a asegurarnos de que sean aproximadamente del mismo tamaño. Entonces algo como esto, creo, funciona bien. A continuación, lo que vamos a hacer es posicionar esta marca de verificación para estar en el centro así que asegúrate de que la flecha esté en el centro también lo es. Y esta marca de verificación va a tener un color diferente. Entonces voy a probar rápidamente ese color ahora mismo, así que vamos a tener un bonito color verde. Entonces vamos a usar este color, que es 55 D 466 Pulse enter Y fui a ocultar todo esto rápidamente, y lo que quiero hacer ahora es tener en estos círculos estar en sus grupos separados. Entonces lo que quiero es duplicar este, Entonces controla D y vamos a agrupar este cheque Marcar tan controlado G y llamar a esta marca de verificación . Al igual que así. Y voy a bajar. ¿ Pagas Ciudad 20? Vamos a tener el 2do 1 para la flecha. Entonces controla G, este va a ser nuestro árabe, y los vamos a posicionar a medida que se mueven junto con esto. Entonces voy a duplicar el círculo una vez más, y voy a posicionar el círculo justo debajo de nuestra flecha así que voy a ocultar rápidamente la flecha por el momento porque lo que queremos es crear esta forma la cual va a ir alrededor. Entonces lo que quiero para ello es que tal vez podamos llamarlo forma así y lo que quiero es quitar el color de relleno y vamos a añadir un guión apagado 50 y gap off 50 también. Al igual que así. Y vamos a dar click alrededor de Gap porque queremos que estos bordes estén básicamente alrededor. Entonces eso es todo para el proceso de creación. Ahora es el momento de animarlo todo. Entonces voy a incluir la flecha hacia atrás. Voy a ocultar la forma voy a dar click aquí mismo, golpear control D y para el segundo estado. Lo que quiero es mover un poco la flecha hacia arriba, para que eso creara la ilusión de que está subiendo. Y tambiénvamos a reducirte paga ciudad de esta flecha y nos vamos de dedo incluir una forma basicamente, pero en el primer estado la forma no debe ocultarse. Ese es mi error Shape debería tener bajo arriba una ciudad fuera de cero. Entonces básicamente, medida que esto se mueve hacia arriba, esta forma va a aparecer, y justo aquí en lugar de activarse. Vamos a moverlo abajo, Pero vamos a incluir esperar así, asegurarnos de que estén en el mismo lugar así y simplemente mover, activar y bajar abajo. Entonces este va a ser nuestro segundo estado. Y en este estado básicamente va del dedo Espere, um, un poquito. Y luego en el Estado de Sturtz, esto va a empezar a girar sólo un poquito. Entonces vamos a usar esta forma y vamos a rotarla para que puedas sostener tu tecla de turno y girar a algo como esto, por ejemplo, y vamos a tener un estado más. Pero en lugar de duplicar este, voy a duplicar este 1er 1 así Y finalmente, lo que necesitamos es el estado final. Entonces aquí dentro vamos a tener ese color verde. Entonces 55 D 466 me gusta así en vez de esperar, vamos a tener activado. Así que asegúrate de moverlo abajo hasta que se encuentre en el medio. Al igual que, asegúrate de mover esperando hacia abajo y lo que queremos para este es que queremos ocultar la forma, pero queremos incluir la marca de verificación de nuevo así. Y como pueden ver, tenemos cinco diferentes nuestros tableros como deberían, y cambia de dedo activado esperando. Se va del dedo del pie Espera un poco. Esto va a girar, y finalmente va a mostrar activado al final con un botón de color verde. Entonces no, es hora de animarlo, y te voy a mostrar cómo puedes hacer eso. Entonces es realmente simple. Se puede hacer clic en el prototipo, incluso hacer clic en el botón, arrastró estos mango azul justo aquí. Vamos a tener grifo. También animar para la transición está en fuera y duración apagado 0.6 segundos. Ahora para el segundo estado, vas a usar el tiempo, así que elige el tiempo y para el retraso, vamos a elegir 0.6 segundos. flexibilización va a ser fácil y fuera y la duración va a ser de 0.6 segundos. Haz lo mismo para éste y finalmente haz lo mismo para éste. Y vamos a comprobarlo. Veamos qué hemos creado. Por lo que al hacer clic en él va a cambiar de espera. Esto va a girar a izquierda y derecha, y va a mostrar accionado, así que es realmente fácil. Es realmente simple. Se puede hacer un poco más con él. Entonces, por ejemplo, podemos Tal vez al hacer clic en esto, va a ocultar el dedo del pie en esta flecha cuando se crea una mezquita justo por encima del mismo líquido la para el texto. Entonces se va a ocultar la flecha, y luego se puede cambiar este círculo Togo de suciedad, color a trazo. Y entonces esta forma va a subir para que puedas agregar un poco más de variación a este diseño . Pero creo que este es realmente un buen punto de partida para ti. Es realmente bonito, limpio, fácil, sencillo de crear, y luego puedes añadir desde aquí incluso puedes mezquizar esta forma para que pueda aparecer desde aquí . Se puede saltar atrás, dedo del pie sección Icahn fuera del discurso y se puede ver que hemos creado este icono y se puede incluir esa animación en esta animación de botón para que realmente pueda construir sobre él. Y puedes crear algo completamente diferente a lo que he creado en este video . Entonces eso es todo para este video, y te veré en el siguiente. 20. Botón botón 4: en este video. Vamos a crear este menú desplegable y tienes esta flecha dentro del círculo, y al hacer click en él, y al hacer click en él, se va a expandir y la flecha va a dar la vuelta del dedo del pie X para que puedas cerrarla. Y tienes estos elementos de menú dentro de esta caja. Por lo que al hacer clic en la caja de ropa se va a colapsar de nuevo en círculo y la X va a dar vuelta del dedo del pie hacia abajo flecha una vez más. Entonces, empecemos. Entonces, como de costumbre, tengo el tablero de arte en 500 por 500. Vamos a crear un círculo rápido. Voy a usar este control de golpe de color C control de peso basado en y voy a quitar la frontera porque no lo necesitamos. Y vamos a usar el tamaño de 54 por 54. Yo cosa que funciona bien, voy a posicionarlo aquí mismo y llamarlo círculo como So Ahora vamos a crear nuestro hombre X. Hagamos clic aquí y luego justo aquí usando el mental. Voy a golpear animal de escape para ocultar el círculo para que veas cómo se ve para él. Veamos qué podemos hacer. Podemos usar el tamaño de tres como así, y podemos usar alrededor de Kip para que podamos rodearlo. Se llama a esta línea uno como así que controló la y la inferior. Vamos a llamar a una línea a las acciones. Uno. Podemos rotar a las 1 35 como así y ¿qué quieres? Rotemos a 45 como así, y podemos tener una X bonita y podemos golpear el control G para agruparlos y llamar a esto cerca así . Y podemos dar la vuelta al círculo y no podemos cambiar el color de estas líneas dedo del pie blanco. Yo así? Y también podemos agruparlo. Pero antes de que lo hagamos, podemos dar click justo aquí que justo aquí dedo del pie, hacerlos estar en el centro. Se puede incluso desarreglar esto si se quiere. De verdad depende de ti. Pero mantengamos grupo y llamemos a esto cerca así. Y vamos a agrupar a estos dos y llamarlo cerrar una vez más. A ver. Sí, eso se ve bien, Ahora lo que necesitamos crear es un rectángulo. Entonces lo que realmente voy a hacer es duplicar en este círculo o incluso mejor. Vamos a crear un nuevo rectángulo de cerebro y vamos a utilizar talla 235 con 235 como así voy a quitar la frontera. Incluir el mismo color de relleno. Y para estos rectángulos redondeados, usemos 30 para el radio de esquina, y me voy a mover en este rectángulo Eso es bueno. Eso se mueve abajo, y lo que en realidad voy a hacer es alinearlo con este círculo para que puedas golpear tres, por ejemplo, solo para que puedas bajar tu ciudad pagada de ella y posicionarla Toby, alinearte con el borde superior del círculo así como con el borde derecho. Entonces lo que quiero hacer ahora es puntera agregar algo de texto. Entonces qué hay en, por ejemplo, control domiciliario, The A. Usemos Old Princess como lo hicimos nosotros. Lo que puedes hacer es alinearlo con el círculo como así alineando hasta aquí. 1234 y 1234 Tal vez puedas usar para que te guste así controlar D y mover esta de abajo y llamemos a esta tienda, por ejemplo, así, y asegurémonos de que esté a los 40 por si crees que es demasiado. Usemos 20 solo para que podamos mantener las cosas simples. Mueve este hacia abajo. Esto va a vencer a Blawg así, y sólo asegúrate de que sea un 20. Es, Y lo que queremos hacer ahora es mover todo eso abajo, golpear ahí en tu teclado o aumentar tu ciudad de pago. Está bien, entonces y lo que quiero hacer y ahora es golpear el control. D y yo queremos llamar a esta mezquita porque va a ser la mezquita para todo el asunto. Por lo que voy a dar click en él todo turno. Haga clic en el rectángulo golpear clic derecho y mezquita con forma. Entonces como puedes ver, básicamente no ha pasado nada. Voy a llamar a esta mezquita, y en esta mezquita voy de pie sobre tu base abajo un poquito, y eso va a ser todo, básicamente por nuestra parte de diseño. Y como puedes ver, ahora tenemos esta mezquita y queremos hacer Finalmente, es cambiar el color de este texto dedo del pie blanco como así, y eso es básicamente todo para el proceso de creación. Asegúrate de que todo esté bien alineado como está, y lo que puedes hacer es agrupar a estos dos y simplemente moverlos en el centro. Fuera de sus puertos. Voy con el dedo del pie. Desenvuélvalos ahora y este va a ser nuestro estado final, básicamente. Entonces voy a golpear control de en el aeropuerto. Voy a dejarlo así para el segundo estado. Y para el primer estado, todo lo que realmente tienes que hacer es tomar tu mezquita, sostener tu llave de turno y simplemente hacerla mucho más pequeña hasta que básicamente encaje justo aquí en este círculo. Y luego haces clic en algún lugar afuera. Como se puede ver, ha escondido esta mezquita. Entonces lo que quiero hacer a continuación es doble clic dentro y volverán a hacer clic en esta línea . Uno me voy a posicionar. Es en algún lugar por aquí, digamos, como así ¿por qué hice clic en la línea para y la posicioné hasta que se encuentren en el centro así ? Para que puedas tener esta bonita forma de flecha y finalmente, lo que quiero es moverla en el centro fuera del círculo así, y eso es básicamente todo para la parte de creación. Ahora está animado. Puedes golpear prototipo y puedes hacer click en él, arrastrar el mango azul podemos usar tap big news. Auto anima qué uso está en fuera y tal vez 0.6 segundos y usa las mismas propiedades para la parte posterior. Así que vamos a dar clic aquí, y cuando se hace clic en él, como se puede ver, se salta. Flecha gira dedo del pie X, y al hacer clic en ella hacia atrás, salta de nuevo al estado original. Entonces eso es todo para este video. Espero que te haya gustado y te veré en el siguiente. 21. Botón botón 5: en este video, vamos a crear este bonito botón flotante, así que cuando hagas click en él va a dar la vuelta del dedo del pie X y este menú va a aparecer y al hacer clic en él atrás, va a dar la vuelta atrás dedo del pie más cambiar el color e ir al medio. Y si vuelvo a hacer clic en él, se puede ver esta ligera animación ya que los artículos están entrando se llevó a cabo. Y cuando lo cierras, tienes esa misma animación una vez más. Entonces empecemos. Entonces para ahorrar un poco de tiempo en este video, no te voy a mostrar cómo lo creé todo. Porque puedes checar eso en el video anterior porque tenemos el mismo tamaño para este fondo. Hemos creado este ex a t exactamente de la misma manera que lo hicimos en el video anterior. Tenemos este trasfondo. Tenemos esta mezquita dentro, y este rectángulo es exactamente del mismo tamaño que en el video anterior. Acabo de agregar un artículo más justo aquí para el contacto, e incluí estos iconos aquí mismo. Y si los selecciono todos y te muestro el espaciado. Entonces si tocamos turno y flecha izquierda 12 se puede ver ahí a 20 píxeles del borde izquierdo y para el texto si tenía turno uno a sus 20 píxeles de este ícono. Todos estos iconos se posicionan en el medio porque el hogar es el icono más grande. Y todos estos están en el medio, adyacentes al icono de la casa. Tenemos esta mezquita arriba. Entonces básicamente la misma mezquita que usamos en el video anterior. Entonces básicamente, duplicé esta capa erigida, la coloqué en la parte superior, seleccioné todo bien, haga clic en capa con mezquita y todo está ahora dentro de esta mezquita. Y finalmente lo hemos dado a conocer. Entonces básicamente, como dije, exactamente la misma configuración que en el video anterior para que puedas verlo y aprender cómo lo creé todo. Entonces básicamente, este va a ser nuestro estado final y tenemos que crear nuestro primer estado. Entonces para hacer eso, voy a golpear el control. D. Entonces como dije, este es nuestro estado final. Este es nuestro primer estado. Por lo que voy a control de golpe de dedo y haga clic en Insight. Voy a dar click aquí mismo, escribiendo tres e asi tres e c seis ff presentador para tener este bonito color azul y lo que realmente va a hacer con esto es que voy a rotarlo. Por lo que voy a aguantar en menos 45 centro de prensa para obtener este ícono más. Y lo que también voy a hacer es hacer click justo aquí, luego justo aquí, ponerlo del pie justo en medio de nuestro puerto. A continuación en ir dedo del pie, escóndelo rápido para poder mostrarte lo que hice con estos artículos. Entonces, como pueden ver, todos estos artículos están ahora en el lugar en segundo nuestro puerto. Pero en el primer tablero de inicio, vamos a espaciarlos un poco para que podamos tener esa bonita animación ya que están entrando en su lugar. Por lo que puedes dar click en el 1er que es todo el Michael. Y una vez más, conseguirás todos estos en los archivos de la práctica y podrás jugar con él para que puedas seleccionar todo. Pero no voy a seleccionar todos Michael y casa pronto va dedo del pie Sostén mi tecla de control. Haga clic y haga clic para poder de seleccionarlos y en el resto de ellos puedo mantener el turno en flecha inferior 1234 por ejemplo. Al igual que todo un dedo del pie controlado, los seleccionados estos para desplazar tanto la médula 1234 y controlaron el selecto estos dos y finalmente desplazar 1234 solo para que pudiera tener un poco más de espaciado entre cada uno de estos ítems. Y ahora lo que tengo que hacer es que los voy a seleccionar a todos. Por lo que voy a dar clic en el icono de inicio. Voy a dar click del dedo del pie en el contacto, y lo que también voy a hacer es básicamente empujarlos todos hacia abajo y la severidad fuera. Tu efecto depende de cuánto los empujes hacia abajo. Entonces en realidad no voy a empujarlos todo el camino hacia abajo. Simplemente lo voy a colocar, por ejemplo, aquí y finalmente por la mezquita. Es incluir la ropa de vuelta. Voy a dar click en la mezquita. Voy a mantener el turno viejo y el clic izquierdo, y sólo voy a ir del dedo del pie, decide aquí, y cuando hagas click en algún lugar afuera, todo se va a esconder, como puedes ver aquí mismo. Entonces eso es básicamente todo para nuestro diseño. Voy a cerrar esto y pasar al prototipo. Voy a dar click en nuestro botón y arrastrado el dedo del pie aquí. Vamos a tu paso o dedo del pie animate Fácil una salida y duración 0.6 segundos. Si quieres que este dedo dure más tiempo, puedes usar, por ejemplo, 0.8 o un segundo. ¿ Qué? Me pareció que esto funcionaba bien y arrastraba el mismo mango hacia atrás. Y si hago clic aquí para previsualizarlo y puedes ver cómo se ve así que todos ellos están saltando a su lugar. Puedes dar click aquí mismo, y como puedes ver, todos ellos vienen en el mismo lugar y tienes esta bonita animación, y este plus gira dedo del pie X y cambia de color muy bien ahora. Una última cosa que olvidé mencionar es que agregué una ligera sombra. Entonces si hago clic en el círculo dentro de este cierre, tienes esta sombra. Entonces es en 036 y si hago clic justo aquí, está usando este 000 así que básicamente el color negro al 16%. O pagar ciudad, y para reducir o aumentar tus bases, solo puedes mover este encendedor, pero vamos a mantenerlo de nuevo en 16%. Entonces eso es básicamente todo para este video. Espero que te haya gustado, y te veré en el siguiente. 22. Botón botón 6: en este video, vamos a crear este interruptor de alternancia por lo que tenemos la X justo aquí, y cuando hagas click en ella va a cambiar el color y ir a checar Marcar. Como puedes ver, tipo de morfú en cheque Mark, y cuando haces clic en él hacia atrás, cambia dedo del pie trasero X. Así que una vez más de X a marca de verificación de Jack Mark de vuelta a ex, cualquier llamada cambia también. Entonces, empecemos. Entonces, como de costumbre, tengo mi puerto en 500 por 500 cuando usar el click mental justo aquí y luego aquí mismo , voy a golpear escape. Usó tres para el tamaño y haga clic aquí para agregar el kep redondo. Si acercamos un poco más, se puede ver cómo se ve eso. Y lo voy a llamar Línea uno Control de y esto va a ser una línea a en la primera vez. Usemos 135 en el 2do 1 Vamos a usar 45 como así, y me voy dedo del pie hacer un bonito círculo o 54 por 54. Entonces, así , voy a llamarlo círculo así, y voy a asegurarme de que todo esté en medio así. Voy a mover el dedo del pie en estas dos líneas en el medio, así. Y lo que realmente voy a hacer ahora es seleccionar este color hit control C click en el campo Control V, y voy a quitar el borde de las líneas. Voy a elegir el color de Blanco así, y los voy a agrupar a todos y los llamé círculo así. Y lo que quiero hacer ahora es asegurarme de que esté en el medio lo esté, y voy a usar la herramienta de rectángulo. Y para la altura, vamos a usar 54 así que básicamente la misma altura que el círculo. Entonces por la altura como esta y por el ingenio, usemos el doble. Entonces que usen 108 así y vamos a usar esquina, radio o 50. Eso funciona bien, posicionarlo para estar en el medio y llamó a éste, pero no biggie, así. Y para este primer estado, lo vamos a mover a este borde izquierdo así hasta la carne justo aquí Así que ese es básicamente nuestro primer estado. Vamos a golpear control Dion Yard pobre para crear un segundo estado. Y para este para el color círculo, usemos tres pc seis f f centro de prensa y lo que quiero hacer ahora se gira un poco así, por ejemplo, así. Y lo voy a mover todo el camino hasta el borde así. Y lo que queremos hacer ahora es morir un poco más profundo y crear una marca de verificación. Por lo que voy a hacer doble clic en esta línea. Voy a moverlo a algún lugar por aquí. También lo voy a extender sólo un poquito. Entonces en algún lugar por aquí, veamos algo como esto de una manera de hablar de fuga cuando esta otra línea asegúrate de que se encuentren en el medio así, y voy a dar clic en esta línea y simplemente reducirla a algún lugar por aquí. Creo que eso se ve bien, y voy a seleccionar ambas formas. Asegúrate de que estén en medio de nuestro círculo así, y si no te gusta, puedes cambiarlo. Puedes asegurarte de seleccionar y dar forma a lo que quieras y puedes moverte. Estos puntos son casi todo lo que quieras, pero creo que eso se ve bien. Ahora. Vamos a animarnos. Puedo hacer click en el prototipo, click en mi interruptor total y arrastrar el mango justo aquí. Te vas a dar un paso o a animar para la transición. Fácil ahora, y podemos usar 0.6 segundos, y podemos usar la misma acción para volver atrás y veamos cómo se ve eso. Entonces cuando hagas clic en él va a cambiar el color y a volver a morph, remolca este icono de marca de verificación, y cuando vuelvas a hacer clic en él, se va dedo del pie más de atrás a la X. Ahora puedes jugar con diferentes mezquitas, y, por ejemplo, puedes crear un dedo del pie de mezquita de fondo aquí, así que va a cambiar a medida que cambies esto. Entonces hagámoslo rápidamente. Y, por ejemplo, podemos elegir el color Toby el color fuera de esto y para el círculo. Podemos usar el color de borde blanco claro, por ejemplo, así, y para este círculo, vamos a usar el color de borde blanco claro. Pero para este, usemos este color para que rápidamente lo muestres desde aquí y para el borde. También consumes Plett, como así si te gusta cómo se ve eso y ahora vamos a previsualizar rápidamente maderas, así que al hacer clic en él es, puedes ver los cambios de color si eso es algo que quieres. De no ser así, incluso puedes cambiar los colores de fondo. Entonces, por ejemplo, puedes cambiar este Toby por un color más claro, y luego puede pasar de color más claro a este color blanco. Pero realmente depende de ti y condenas experimento con esto, así que eso es todo para este video, y te veré en el siguiente. 23. Botón botón 7: en este video, te voy a mostrar cómo hacer este botón, que dice hacer pago y tiene este color azul. Al hacer clic en él, cambia de color. Este texto aparece con estos puntos cambiando y finalmente cambia de color una vez más al éxito . Entonces veamos eso una vez más. Por lo que al hacer clic en él, estos puntos están cambiando. Como puedes ver, cambia de color una vez más, y cambia las pilas al éxito. Entonces, empecemos. Por lo que una vez más tengo mis puertos configurados en 500 por 500. Vamos a crear un botón. Voy a usar la herramienta de rectángulo, rectángulo de Dragon Eye y vamos a usar de 2 a 5 peso 70 digamos, como en todos los demás ejemplos. Y para las listas de esquina, usemos 50 Quitemos el borde y usemos este color. Entonces mira, una vez que él quiera quiere bonito color gris, y lo vamos a llamar Bt y ahora eso usa el texto y para el texto. Escribamos algo como hacer pagos, asegurémonos de que vaya desde el medio. Es un 20 sentido abierto parecen en nuestros otros ejemplos, vamos a cambiar el color del texto los blancos, y lo vas a posicionar en el centro como así que asegúrate de que estén aburridos bote en el centro. Entonces ahora básicamente, tenemos estos dos. Tenemos botón y tenemos el texto. Ahora ocultemos el texto por un momento y trabajemos en nuestro fondo así que vamos a hacer algunas copias del mismo. Entonces usemos el control D para hacer copia mala y llamaré a esta mezquita de botones. Al igual que así. Y para estos dos. Llamemos a este botón azul así y voy a sostener mi vieja llave y ampliarla sólo un poquito. Y este va a ser nuestro botón azul. Entonces vamos a utilizar el color tres e c seis f f centro de prensa. Y como se puede ver aquí mismo en el fondo, ahora es azul. Voy a hacer otra copia de ella y llamar a este botón verde So verde. Y para este color verde, déjame revisar rápidamente mi color. Vamos a usar este color así 55 D 466 Y una vez más tendrás esto en tus archivos de práctica. Pero como pueden ver, está justo aquí. Ahora los voy a seleccionar a todos y lo que realmente voy a hacer es seleccionar todo y golpear control. G para hacer grupo principal Así abajo no. Seleccionaré todos nuestros botones. Correcto. Haga clic en Mezquita de judíos con forma o cambio. Control em o turno. Comanda como quieras. Y voy a llamar así a esta mezquita de fondo. Y lo que realmente vamos a hacer es ir de pie, creo que el color principal, Toby Blue. Entonces déjalo por aquí y voy a mover el color verde justo aquí en la parte superior. Entonces en algún lugar por aquí, y luego haga clic afuera. Se puede ver que tenemos este bonito color azul. Ahora trabajemos en nuestro texto. Entonces tenemos hacer pago, voy a hacer otra copia Control D y voy a llamar así a este procesamiento Y vamos a crear nuestros tres puntos. Entonces voy a hacer solo bonito círculo grande quitó la frontera y llamó al círculo un control de golpe . De llamó a este círculo también, y golpeó el control. De llamó a este Círculo tres como Así que voy a mover estos dos y voy a tener que estar a las cinco, como se puede ver y finalmente hacer lo mismo con el número tres. Entonces si movemos este número tres con mi tecla de flecha izquierda, así 12345 Como puedes ver, son cinco píxeles de este borde, así como cinco píxeles de este borde. Entonces voy a mover todos estos círculos y justo debajo del procesamiento. Selecciona el procesamiento así como los círculos y asegúrate de que estén en el medio fuera de nuestro fondo, como lo son, y asegúrate de que estén en el medio así y asegúrate de que todos estos círculos estén en el medio como bien. O si no lo haces, puedes moverlos Toby a algún lugar por aquí. Entonces básicamente justo en el borde inferior de nuestro texto, creo que eso funciona un poco mejor. Y por último, quizá los moveamos a algo así como 10 o 20 píxeles. Veamos qué funciona mejor. Sí, vamos a moverlas. Es 10. Selecciona, uh otra vez y asegúrate de que esté en el medio así Ahora Finalmente, vamos a ocultar todo esto para que podamos ver esto Hacer pago hit control de una vez más, posicionarlo todo el camino arriba en la parte superior, escondernos para hacer pago y este va a ser nuestro éxito así y asegurarnos de que el éxito esté en el medio. Igual que todos estos otros. Entonces lo que vamos a hacer ahora es incluir todo de vuelta y en realidad vamos a ir del pie a crear una nueva forma justo por encima de esto va a ser nuestra mezquita. Entonces puedes llamarla una mezquita así y asegurarte de que esa forma esté en el centro fuera de nuestro círculo, así. Entonces lo que realmente voy a hacer con la mezquita es alto la frontera esconder el campo porque no lo necesitamos. Voy a seleccionar la mezquita, mantener el turno, seleccionar todo lo demás abajo, clic derecho y mezquita con forma. Voy a llamar así a esta mezquita de texto. Y lo que realmente va a hacer es quitar todo excepto hacer pagos. Entonces voy a mantener presionada la tecla de turno y la flecha arriba. No, no todo fuera de nuestra mezquita. Y cuando hago clic afuera, se puede ver que sólo nos queda con este texto de pago hacer. Eso es exactamente lo que lo queremos. Entonces lo que vamos a hacer ahora es duplicar esta nuestra pizarra así que voy a hacer click en ella, controla y D, y ahora vamos a empezar a hacer estos cambios. Por lo que dentro de la mezquita de texto, tenemos que posicionar el procesamiento así como estos círculos en el círculo central desplazando flecha inferior hasta que se encuentren en el centro así y simplemente se muevan. Realice el pago por debajo hasta que esté fuera de la vista. Y para la mezquita inferior, usemos el color azul. Lo vamos a quitar todo el camino hacia abajo así. Y si hago clic afuera, ahora nos queda con este gran botón. Entonces eso es todo para este estado. Y vamos a tener otro y otro. Entonces en este 1er 1 vamos a rotar estos puntos. Por lo que voy a localizar el Círculo número dos y el número tres, Seleccionar barco fuera de ellos. Pasa el cursor por aquí con mi ratón click llamado Mi tecla Mayús y gíralos así, tan círculo completo. Puedes cerrar esto y ahora en nuestro último aquí mismo, puedes volver a hacer lo mismo. Por lo que dentro de la mezquita de texto. Pero ahora hacemos un círculo y un círculo, también, así que me voy a casa una tecla de turno, los rotamos círculo completo así. Voy a cerrar esto y finalmente hacer un estado final. Entonces este va a ser nuestro botón verde para que puedas abrir todo texto abierto, mezquita, click en el éxito, posicionarlo en el medio así Y ahora voy a seleccionar círculos de procesamiento y sacarlos de vista así. Y por último, voy a abrir la mezquita y dar clic en el botón verde y colocarlo en el medio como yo. Si hago clic afuera, puedes ver ahora tenemos este color verde, y eso es básicamente todo. Entonces ahora tenemos que prototiparlo todo. Entonces lo que voy a hacer es dar click en nuestro botón y arrástralo hasta aquí. Y a partir de aquí, quiero usar auto animates como así voy a elegir facilidad en fuera 0.6 segundos. Al igual Ahora para esto próximos tres estados. Es decir, cuatro estados, en realidad, vamos a usar el tiempo, así que arrastra así. Utilice el tiempo ahora para el retardo, cuándo usar 0.6 segundos. Fácil una salida. Entonces todo es como debería. Y durante la duración, puedes dejarlo en 0.6 segundos. Por lo que puedes hacer clic aquí, arrastró la vela azul click justo aquí, arrastró la vela azul una vez más a este último estado. Y si golpeamos la vista previa aquí mismo, si la agrando y hago clic en ella, se puede ver que tenemos esa bonita animación y ahora muestra éxito al final. Entonces si hago clic una vez más, puedes ver que tenemos esta bonita animación y tiene éxito al final. Entonces eso es todo para este video, y te veré en el siguiente. 24. Botón botón 8: en este video, voy a mostrar cómo puedes crear este anuncio inferior, y al hacer click en él, se va de punta básicamente dividida en cuatro partes, y nos vamos a quedar con esta X en el medio. Y cuando haces clic, cuando la X todo va a colapsar de nuevo en remolque, un botón y la X va a cambiar de nuevo a plus. Entonces, empecemos. Entonces lo que tengo aquí mismo es que tengo cuatro iconos diferentes, básicamente los mismos que usaba antes. Y tengo este plus en el medio, básicamente el mismo plus que usábamos antes en el video anterior. Entonces, como pueden ver, tenemos estas dos líneas y las voy a girar un poco más tarde y tenemos el círculo. Y para un círculo, tenemos 80 con 80 y para estos otros círculos hay un poco más pequeño. Por lo que 72 por 72. Entonces se van del dedo del pie. Agrega eso un poco más de ese interés visual cuando se dividen de este círculo principal, así que los posicioné 20 píxeles hacia arriba, así que cambia 12 Como puedes ver en todas las direcciones y vamos a empezar a animar todo. Ahora, como de costumbre, tienes esto en tu archivo de práctica para que puedas abrir su archivo de práctica y utilizar estos iconos para tus otros proyectos. Nuestro experimento con él un poco más. Voy a dar click aquí mismo, golpear control y D para este segundo estado. Y para este primer estado, básicamente, voy a seleccionar todos estos iconos. Así que dar click en el 1er 1 llamado Shift Haga clic en el último y haga clic aquí y luego aquí para colocarlos todos en el medio. Y todos están detrás de este fondo publicitario, básicamente. Y en este segundo estado, van dedo del pie a expandirse hasta aquí. Pero lo que vamos a hacer ahora es ir de dedo abajo la opacidad fuera de este círculo, y vamos a rotar nuestras líneas así que asegúrate de incluir la opacidad antes de cambiar de más dedo X así que, así y vamos a cambiar el color del borde fuera de este azul extra así. Y ahora vamos a bajar el dedo del pie la opacidad de esto, y eso es básicamente todo para la parte de diseño. Y para la parte del prototipo, simplemente puedes hacer clic aquí, arrástrala tú paso. Usar auto animate puedes usar está en fuera. Y, por ejemplo, 0.6 segundos funciona bien y finalmente para la espalda. Usemos el mismo botón, y va a mantener la misma configuración. Entonces cuando hago clic aquí, presiono vista previa y hago clic dentro, se puede ver que se divide en cuatro botones diferentes que el usuario contiene click, o si no quieren hacer clic, tomando click aquí mismo, y es va a saltar de nuevo al fondo original. Se puede jugar con él. Puedes rotar estos si quieres, así que cuando suban detrás de este botón azul, van a rotar un poco. Hacer un círculo completo, por ejemplo, y luego una tierra en el exactamente el mismo espacio que éste. Para que realmente puedas jugar con él. Se pueden hacer algunos efectos más. Entonces, por ejemplo, puedes dejar este dedo del pie, tener un borde, y luego puedes aumentar ese borde a, por ejemplo, esta espera aquí mismo, pero no de todo el botón pero fuera del círculo mismo. Entonces usa el borde, usa el mismo color fuera de este excluido, rellena y luego aumenta el tamaño. Por ejemplo, like so para que puedas combinar todos ellos, por ejemplo, Y luego veamos cómo se ve eso. Entonces tal vez pueda entonces posicionar todo atrás, así, y veamos cómo funciona eso. Entonces, como puedes ver, se divide en remolque para diferentes iconos y luego básicamente se colapsa de nuevo en remolque. Un ícono para que puedas hacer este tipo de cambios si quieres, pero creo que esto funciona bastante bien en básicamente, creo que muestra la intención detrás de este botón. Entonces eso es todo básicamente para este video, y te veré en el siguiente. 25. Botón 9: en este video, voy a mostrar cómo se puede crear es Donald Bottom. Y al hacer clic en él, se puede ver este tipo de progreso verde y la marca de verificación al final para indicar que el Donald está terminado. Y si un jugador retrocede una vez más, se puede ver cómo se ve eso. Entonces, empecemos. Entonces, como de costumbre, estamos empezando con el puerto er de 500 por 500 Estoy usando este icono. Voy a usar el dragón herramienta rectángulo Hablo rectángulo, y vamos a usar parece como lo hicimos para todos los botones anteriores. Entonces vamos a usar a cinco con 70 como así. Y voy a usar el radio de esquina apagado 50 y lo voy a posicionar en el medio Dragon abajo llamó su bte Dan por así y voy a hacer un duplicado er lo. Entonces voy a golpear control d llamar a este color verde como así y golpear control de una vez más llamó a esta mezquita y para este color verde, tengo el color ya seleccionado, así que déjame copiarlo rápidamente. Entonces va a ser de este color así 55 D 466 Y si voy adelante y escondo la mezquita, puede ver cómo se ve eso. Entonces en esta mezquita, vamos a esconder la frontera y el campo también. Y para este color verde, vamos a ocultar la frontera así Y vamos a seleccionar estos para hacer click derecho y mezquita con forma, como así va a llamar a esta mezquita. Y lo que quiero hacer por este color verde es golpear mi vieja llave y simplemente extender los lados fue a sostener mi tecla de turno en bajarlo todo el camino hacia abajo como así. Y cuando hago clic en algún lugar afuera, se puede ver que esta mezquita ha sido creada. Ahora que el fondo está completo, lo que tenemos que hacer es crear una marca de verificación. Entonces agrupemos primero todos estos artículos para que la llamen este botón así. Y quiero crear una bonita marca de verificación grande. Entonces voy a tal vez simplemente copiar estas formas o usar mi pluma tal a algún lugar por aquí. A lo mejor se escapó. Voy dedo del pie alrededor de kep por el tamaño y reducido a, y eso es básicamente que le llame su marca de cheque así, y lo voy a posicionar para estar en el centro. Entonces me voy dedo del pie, hazlo así. Es alto, esta ahora carga. Entonces no es confuso para nosotros. Colóquelo en el medio así. Y eso es básicamente todo para tu diseño. Vamos a mover la marca de verificación justo debajo para descargar. Nos vamos del dedo del pie, reducir la opacidad así. Pero tal vez podamos incluir la frontera Toby White porque esta marca de verificación en realidad va a ser blanca una vez revelada. Entonces eso es básicamente todo para 13 proceso de diseño. Ahora voy a cerrar este botón y voy a hacer una copia rápida. Y en este, lo que quiero hacer es simplemente más ¿Pagas City off en este ícono de Donald? Podemos golpear control de una vez más. Lo que quiero hacer en este es traer de vuelta ese color, así que lo voy a incluir de vuelta. Entonces es click en él como así, y voy a posicionarlo para estar en el centro así. Como pueden ver, fondo ahora está verde, y lo que también quiero es golpear el control D Y ahora vamos a trabajar en un cheque Marcar. Entonces en esta etapa, vamos a hacer doble clic dentro y nos vamos de pie tal vez ni siquiera editado en este momento . Entonces hagamos primero duplicarlo Control De. Entonces básicamente, este va a ser nuestro estado tía, y esto va a ser un estado medio. Por lo que ahora voy a saber Haga clic en él. Voy con el dedo del pie, trae este puntiaguero aquí. Y en este 1er 1 también lo podemos mostrar por ahora, Doble click, y vamos a llevar estos dos puntos hasta el punto inicial así, hasta que llegues al círculo, voy a bajar tu ciudad de paga a cero. Y lo que quiero es copiar esta capa. Entonces voy a golpear control C. Voy a cerrar esto y me voy a puntera básicamente basándolo en todas las demás capas para que tengamos la misma capa. Por lo que va por debajo de la descarga para que cuando empecemos a animarlo, funcione correctamente en todos los estados trill d como así Y vamos a comprobar rápidamente si lo tenemos todo correctamente, deberías tener cinco nuestros tableros. Entonces como pueden ver tenemos cinco fuera de ellos. Entonces ahora empecemos a crear prototipos. Por lo que voy a dar click en un prototipo click aquí mismo. Voy a arrastrarlo hasta aquí y para éste. Lo que queremos es que nos fuimos a usar el gatillo de tap. No usaría auto ninguna carne. Vamos a usar fácil y fuera así Y vamos a usar 0.3 segundos ahora para este segundo estado. Vamos a usar el tiempo. Y por el momento aquí mismo, vamos a usar el retardo de 0.6 segundos. También animar. Aflojar y dirección va a ser de un segundo porque queremos darle algo de tiempo hasta que se llene. Y revela este color verde. Ahora para este próximo estado. También queremos utilizar el tiempo 0.6 como el retraso. Fácil y fuera. Pero aquí vamos a usar 0.4 segundos. Y por último, para nuestro estado menos, lo que queremos es también utilizar el tiempo para el retraso. Vamos a usar 0.0 segundos. Por lo que básicamente cero segundos fácil. Un out y duración off 0.4. Entonces vamos a conseguir una vista previa una secuela. Parece que como puedes ver, tenemos nuestro fondo. Voy a dar click en él. Va a desaparecer. Se va a llenar. Y ahora tenemos esta marca de verificación. Entonces veamos que una vez más se va a llenar. Y tenemos esta marca de verificación para indicar que la muñeca vieja está terminada. Entonces eso es básicamente todo para este video, y te veré en el siguiente. 26. Botón 10: en este video, vamos a crear este fondo social share, así que cuando hagas click en él, se va a expandir y estos iconos van a aparecer. Y cuando quieras cerrarlo de nuevo, puedes hacer clic aquí mismo, y se va a cerrar y revelar para compartir icono una vez más. Entonces, empecemos. Entonces como de costumbre, tenemos nuestro puerto o 500 por 500. Y para acortar algo, lo basé. Algunos de estos iconos en remolque aumentan nuestra velocidad. Primero lo primero, Vamos a crear un círculo. Entonces voy a elegir el taburete Ellipse. Voy con el dedo del pie. Colócala en 80 por 80. Asegúrate de que esté completamente en el centro como así voy a quitar la frontera incluida color azul relleno tres d seis c seis ff Centro de prensa y básicamente lo voy a mover aquí mismo. Voy a llamarlo círculo, y voy a poner a la vista el ícono de compartir, y voy a asegurarme de que estén en el medio así Siguiente Voy a cambiar el color del icono de compartir a este color blanco. Voy a agruparlos y llamar a este botón de un solo botón como así O podrías ir a compartir botón quieras a continuación, vamos a crear la X. Así que en algún lugar por aquí a algún lugar por aquí golpearía escape Eso sería un tres. O tal vez también lo es. Sí, dos es buena ronda Kep. Voy a llamar a esto una línea uno Control De y en este fondo me pregunto cuándo usar línea a ambos deben ser blancos y accedieron a ocultar una cuota por ahora Cuando este 1er 1 Vamos usar 135 Y en el 2do 1 Vamos a usar 45 como así Y los voy a posicionar en el centro así y así. Por lo que para estar perfectamente en el centro de este círculo, voy a incluir la acción vuelvo, ponla arriba y voy a bajar de pie tu ciudad paga fuera de este hacha por ahora. A continuación, vamos a crear nuestro rectángulo, que va a recorrer todos estos iconos. Y para ello, vamos a usar la herramienta de rectángulo y vamos a revisar de nuevo en nuestro botón y ver círculo es de 80 por 80. Por lo que necesitamos ser de 18 series de altura y para lo cual podemos esencialmente 3 20 o algo así. Podemos usar 50 para el radio de esquina y para el color, que elija rápidamente este color ya creado. Entonces es bonito, color gris suave y es B E B E B E. A continuación, lo voy a posicionar a algún lugar por aquí hasta que se encuentre con el borde izquierdo de nuestro , uh, botón. Se va a llamar playero como así posicionarlo debajo de todo, y lo que quiero hacer ahora es, por ejemplo, podemos con 40 píxeles, así que selecciona todos estos iconos de redes sociales. Sostenga turno. 1234 El D Select Facebook hace lo mismo para éste. Por lo que 1234 seleccionan Twitter y finalmente hacen lo mismo para éste. Entonces 1234 y eso es básicamente todo. Por lo que ahora podemos iniciar nuestro segundo estado. Pero antes de que hagamos su primer grupo, todos estos juntos controlan G llamaron a este íconos así. Y si piensas que este color es un poco demasiado oscuro, puedes bajar tu pastoso. Pero lo que me gusta hacer es simplemente elegir mis iconos para que sean blancos, y ahora todo funciona como debería. Y por supuesto, puedes posicionar todo para estar en el centro así. Pero en este primer estado, primero usemos esto así y cambiémoslo. Golpe control D Y ahora vamos a crear nuestro segundo estado. Entonces escuchar eso es un segundo estado. Pero asegúrate de que todo esté en el centro lo esté. Y asegúrate de alinear todo correctamente en este. Y en el 2do 1 vamos a incluir las líneas de vuelta, y vamos a reducir tu ciudad de pago de nuestro icono de compartir como así que ese es básicamente nuestro estado final . Y para este primer estado, vamos a colocar el fondo en el medio así. Y lo que también queremos es reducir la opacidad de estos iconos así y mover este icono de BG para estar en el centro fuera de nuestro círculo en algún lugar por aquí así no importa qué tipo de forma tengas, así que si escondo esto, se puede ver que no es un círculo completo. Realmente no importa. Pero importa que esté en el centro escondido por este ícono, básicamente. Entonces ahora Prototiquemos rápidamente todo. Entonces lo que voy a hacer es hacer clic en un prototipo, clic en el icono, arrástrelo hasta aquí. Vamos a usar el paso. Vamos a usar auto animate, fácil y fuera de aquí vigoration de 0.6 segundos. Y vamos a usar la misma interacción para aquí. Por lo que Teppo para animar Fácil ahora en 0.6 segundos. Entonces ahora cuando salte de vuelta aquí, haga clic en vista previa, haga clic aquí. Se puede ver cómo se ve. Por lo que básicamente se revela. Vuelve a cambiar Toe X, y cuando haces clic para cerrar, vuelve a cambiar para compartir. Entonces eso es todo para este video, y te veré en el siguiente. 27. Botones archivo Xd de botones: en este video, quería mostrarles los botones. Exe el archivo. Este es el archivo donde se contienen todas las animaciones. Entonces sobre las emisiones de todos los videos de esta sección fuera del curso, y puedes saltar rápidamente dentro. Comprueba si tienes todo correctamente. Puedes copiar iconos de este archivo si no los tienes o si no quieres descargarlos en ningún otro lugar, puedes utilizarlos desde aquí para proyectos personales y comerciales. Puedes copiar y pegar en estas animaciones y luego hacer cambios más adelante en tus propios archivos . Y también puedes usarlos en tu trabajo U Y o UX. De verdad depende de ti. Pero yo doy. Te daré permiso completo para usar este archivo como quieras, básicamente para tu trabajo personal y comercial. Y lo que también quiero mostrarles es esto. Por lo que creé estos activos aquí mismo. Por lo que estos colores antiguos del aire estaban usando a lo largo de esta sección fuera del curso para que puedas acceder rápidamente a estos colores y copiarlos desde aquí, pegarlos en tu propio trabajo. Si quieres estos mismos colores en tu propio diseño y finalmente lo que quiero compartir contigo es que puedes dar click en cualquiera de estos. Entonces, por ejemplo, esta y puedes hacer clic aquí para ver cómo se ve para ver cómo se ve para que puedas hacer click sobre ella y podrás ver y recordarte la animación que creamos en esta sección fuera del curso. Entonces, básicamente, para cualquiera de estas, puedes acceder rápidamente a estas animaciones y comprobar si tienes todo correctamente. Y si quieres usarlos, puedes hacerlo desde aquí. Entonces eso es todo para este video, y te veré en el siguiente. 28. Formulario 1: en este video. Vamos a crear este formulario de suscripción cuando haga clic en el campo de correo electrónico se va a llenar el correo electrónico y luego cuando haga clic en la suscripción va a decir suscrito y cambiar el color a verde. Entonces empecemos. Así que tienen aquí en nuestro puerto apagado 800 con 800 voy a crear rápidamente la entrada. Usemos 300 con 70 que se llama entrada. Esa va a ser nuestra entrada para el correo electrónico. Usemos, digamos, ocho para el radio de esquina. Controlaría D y este va a ser nuestro botón y para los bots. Y nos fuimos acostumbrados 2 a 5 con 70 y vamos a moverlo rápidamente hasta aquí. Fuimos a usar el color de relleno fuera de tres E C. Seis f para el fondo, y vas a quitar la frontera yendo a hacerlos un poco más cerca. Golpea turno. 1234 a la derecha, Seleccione ambos, agruparlos y luego posicionados en el medio Aquí. Grupo de odio. Ahora por la entrada. Vamos a teclear tu correo así que vamos a usar 20 y sentido abierto, así. Colóquelo en el medio, mueva su turno a la derecha 20 píxeles. Y vamos a usar D d d d presentador porque eso va a ser una especie de este color gris claro . Voy a duplicarlo, moverlo a aquí, asegurarme de que va desde el centro y teclear. ¿ Suscribirse? Yo creo que sí. Y fui a usar el color blanco para ello y colocarlo en el centro. Off this button hit control de una vez más. Y en este, sólo voy a agregar de porque va a decir suscrito como So. Entonces me voy de pie. Mueve estos dos hacia abajo así y haz un duplicado de este botón. Voy a llamar a este botón verde y a este de abajo. Puedes dejarlo así, o puedes llamarlo un botón de burbuja. Y finalmente, voy a agrupar a todos. Llama a este botón y vamos a crear una mezquita. Basta con usar rectángulo normal. Dibuja un borde removido rectángulo, y puedes reducir tu pasty a cero. Doble clic aquí derecho llamó a esta mezquita como así y vas a seleccionar el texto y la mezquita, clic derecho y mezquita con forma. También puedes usar el control de turnos Amolsch si los encomiamos, y nos vamos con el dedo del pie llamado esta mezquita como. Entonces, finalmente, vamos a abrir la mezquita y mover el texto suscrito, que desplazan una flecha hacia arriba fuera del camino. Y sólo nos vamos a quedar con este texto de suscripción y para la entrada. Cerrémoslo rápidamente. Voy a golpear control DE para duplicar este texto, y vamos a usar este color para ello. Entonces solo voy a copiar y pegar este color doble click, y voy a escribir, siendo, siendo, por ejemplo, diseñador en email dot com. Miente así y vamos a crear una mezquita para ella también. Sólo voy a mezquizarlo rápidamente a algún lugar por aquí. A ver, voy a llamar a esta mezquita así, y voy a quitar la frontera así. Voy a seleccionar estas dos mezquita de clic derecho con forma, y como no hizo nada como esto, rápidamente llamemos a esta mezquita como esta. Lo que vas a hacer en realidad es mover esta mezquita a la izquierda, así que a algún lugar por aquí y mover el borde derecho hasta aquí. Y como puedes ver, ahora esconde el texto. Entonces vamos a ir de pie animados para ir a aquí, y luego va a revelar nuestro texto. Entonces, cuando hagas clic afuera, se va a ocultar y enviar mensajes de texto por correo electrónico, y vamos a agrupar este hit control G y llamarlo correo electrónico así. Y finalmente, lo que vas a hacer es dejar de ser algún texto aquí. Entonces realmente copia ese texto de mi otro nuestro puerto y lo vas a mover. Digamos que quieres 34 60 píxeles hasta arriba, y va a ser de sentido abierto a los 28. Entonces va a ser solo un poco más grande que nuestro texto original aquí mismo. Y eso es básicamente todo para la parte de diseño. Ahora hagamos una primera copia, Control de calor profundo y lo que vas a hacer en este ejemplar. Te vamos a dar click en tu email y vamos a bajar y tú pagas ciudad a cero porque eso va a pasar cuando alguien hace clic aquí mismo va a bajar Dear Bay City de ella, y ahora tenemos que hacer otra copia, y en este ejemplar, vamos a revelar el correo electrónico. Entonces como si alguien tuviera tipos en su correo electrónico. Entonces sólo mueve esta mezquita a la derecha, como, como, así dedo del pie, revela todo el correo electrónico. Y por último, en esta última copia, van a dar click en este botón. Entonces tenemos que hacer el estado final. Entonces en esta, vamos a abrir de pie esta mezquita, mover el texto suscrito a continuación hasta que se reúna con nuestro texto de suscripción original y suscribirse. Nos vamos a mover todo el camino abajo, fuera del camino. Y por último, vamos con el dedo del pie incluir este botón verde atrás. Pero lo que realmente me olvidé de hacer es que me olvidé de incluir el color fuera de este botón verde. Entonces voy a hacer esto ahora. Rápidamente. Entonces lo que realmente voy a hacer es seleccionar este botón verde y voy a usar el color . A ver, cuál es el color fuera de la pantalla. Entonces es 55 D 466 Voy a presionar enter y voy a bajar el dedo del pie. ¿ Pagas ciudad o ella? Entonces déjenme rápidamente Derecho, haga clic en copiar, y voy a bajar del pie su ciudad base hacia abajo. Voy a mantener mi control y rápido dentro de la apariencia basada en clic derecho, y voy a bajar su apariencia básicamente hacia abajo basado clic derecho más abajo. ¿ Lo baste hacia abajo y haz clic derecho apariencia basada y va a estar al 100%. Entonces todos estos tres, está en cero. Y en esta final, está al 100%. Comprobemos rápidamente si todo es correcto. Creo que sí. Entonces vamos a cerrar rápidamente todo así y ahora es momento de prototiparlo, Así que voy a dar clic en el prototipo. Primer Usuario tendrá que tocar este campo de correo electrónico porque quiere ingresar su correo electrónico. Entonces vamos a arrastrarlo hacia fuera. Vamos a usar el grifo y para la transición. Usemos auto enemigos relajando y 0.4 segundos ahora en el 2do 1 Queremos usar el tiempo porque queremos que algo pase después de cierto tiempo, así que vamos a tener un ligero retraso apagado 0.4 segundos. Auto animate está en fuera, y la duración va a ser en un segundo ahora. Por último, queremos que alguien haga clic en el botón de suscripción porque ingresan su correo electrónico y quieren suscribirse. Por lo que vamos a dar click en la suscripción Usted paso o dedo del pie animate. Suscribirse. Está fuera. Y por último, lo que queremos para el tiempo es de 0.4 segundos. Entonces vamos a golpear la vista previa y ver cómo se ve todo. Entonces cuando haga clic aquí mismo se va a esperar a revelar el correo electrónico y luego cuando haga clic , suscribirse va a cambiar el color y sobre este texto suscrito sobre la suscripción. Entonces veamos eso una vez más. Por lo que cuando haces clic aquí, correo electrónico sale cuando haces clic. Suscribirse , dice suscrito. Entonces eso es todo para este video, y te veré en el siguiente. 29. Formulario 2: en este video, vamos a crear este formulario de firma. Tenemos correo electrónico y la contraseña, y finalmente un botón a continuación. Al hacer clic en el correo electrónico, se va a sentir fuera el correo y esta línea se va a poner verde. Tenemos la contraseña va a hacer lo mismo para la contraseña. Y por último, al hacer clic, este botón de inicio de sesión se va del dedo del pie. Ten esta marca de verificación para indicar que tienes sitio en, y luego te imaginas que la transición va a suceder después de la pantalla a la siguiente . Entonces, empecemos. Por lo que tenemos en nuestro puerto apagado 800 por 800. Y agreguemos algo de texto, alguien para escribir, iniciar sesión, usar sentido abierto aquí mismo. Al igual que y por el tamaño. Usemos 28 yo mismo. O tal vez incluso podamos usar 30. Está bien. Asegúrate de que vaya desde la izquierda. A continuación vamos a tocar el dedo del pie a fondo, duplicados y arrastrar esta copia inferior abajo, y ahora vamos a crear un campo. Entonces vamos a crear primero texto escribiendo tu correo electrónico seleccionado. Usemos 20 para ello y para los colonos usaron presentador de DDT. Ahora tenemos que crear nuestra línea. Entonces vamos a crear una línea a continuación. Tengámoslo a 400 para el color que usó este color, así que lo usé para la película. Quitar la frontera. Y para la altura, usemos un píxel o tal vez hasta dos. Uno es solo a 10 y podemos seleccionar todo en línea. Todo a la izquierda puede ser usado así. Esta va a ser una línea, y vamos a arrastrarla justo debajo de nuestro correo electrónico. Y posicionémoslo, por ejemplo, 40 20. Creo que ya es lo suficientemente bueno. Ahora duplicemos tu correo electrónico. Él controlaría D. Voy a esconder el top one. Y en este 10.1, voy a escribir en diseñadora una hembra que no venga, por ejemplo, y vas a usar este color para el color de campo así. Y por último, vamos a crear nuestra mezquita. Entonces usemos una mezquita algo así, por ejemplo. Pero vamos a extender ese rectángulo sólo un poco, o podemos tener que ser, por ejemplo, por ejemplo, 10 píxeles los que pueden mantener el turno y la flecha izquierda sólo para que sepamos hasta dónde lo extendimos . Ahora esta va a ser nuestra mezquita, y podemos quitar la frontera si no queremos, y tú la vas a colocar justo aquí. A continuación, vamos a seleccionar el taburete, click derecho y mezquita con forma. Y esta va a ser nuestra mezquita y finalmente parece que en el video anterior, sólo vamos a mover esta mezquita al dedo del pie izquierdo, ocultar el texto y vamos a posicionar su correo electrónico debajo de esta mezquita y finalmente debilitarnos. Agrupar todo de esta manera. Hit control G. Y vas a llamar a este email hit control detalle para conseguir esta carpeta llamada Shift and Bottom Arrow, y podemos posicionarla hasta aquí 1234 para que podamos tenerla a los 40. Y esto. Vamos a posicionarlo en 60 solo para que tengamos un poco más de espacio aquí mismo. Llama a ésta una contraseña como esa y abriéndote. Y en lugar de tu correo electrónico escriba en tu contraseña, así y finalmente dentro de la mezquita, puedes ocultar tu contraseña por ahora, Condell pulsa dentro y pega cero. Sólo déjame seleccionar primero, así que golpeó el espacio espacio espacio Señor, no el espacio. Y voy a seleccionar todo Hit control C porque soy perezoso Hit control V para que tenga ocho tiros seguidos. Patrulla E y yo vamos a seleccionar 44 aquí. Y esto va a ser nuestro posible básicamente. Por lo que puedes hacer click en algún lugar fuera. Puedes ver tu contraseña. Y por último, lo que necesitamos es un botón. Seleccione rápidamente. Elige esto. Tu posible texto controlado el para duplicar, y lo voy a mover fuera de esta carpeta. Tienes que moverlo hacia abajo y voy a teclear de lado aquí porque ese va a ser nuestro texto para el fondo. Ahora por la botella misma. Usemos, veamos, tal vez de 2 a 5 con 70 como así, usemos ocho para el radio de esquina y para el color podemos quitar el borde. Vamos a usar el color off tres e c seis ff dedo del pie. Consigue este bonito color azul. Llama a este botón de un solo botón como así con justo abajo, y lo vas a posicionar 60 desde esta línea de fondo. Entonces Así turno 123456 Van a usar el fichaje. Selecciona el color blanco y posiciónalo para que esté en el medio fuera nuestro botón así Y lo vamos a agrupar así. Así se llama a éste, Botsan así. Y por último, lo que necesitamos crear es una marca de verificación. Entonces vamos a usar el lápiz. Se puede hacer clic en algún lugar fuera de mantener el turno. Por lo que va a 45 grados, haga clic y luego haga clic una vez más hit, escape. Y para el color fuera de esta frontera, vamos a usar el tamaño blanco va a ser, también. Y por último, tierra mantenida. Por lo que nos rodeamos de nuestros bordes y va a ser nuestra marca de verificación así. Y por último, lo que quiero es posicionar a ese Jack Mark en algún lugar en medio de nuestro botón para que puedas dar click. Marca de verificación, haz clic en un botón click justo aquí que justo aquí para posicionarlo en el medio. Y por último, puedes ocultar este fichaje. Por lo tanto, haga clic en la marca de verificación. Haga clic en estos dos puntos como para que pueda seleccionarlos y luego moverlos. Plata por aquí y nos vamos de pie. Básicamente, que esto sea al 0% así que haz doble clic en tu clave cero o puedes bajar tu ciudad de pago aquí mismo , y eso es básicamente todo por nuestra parte de diseño. Vamos rápidamente sólo a incluir el fichaje. Y ahora viene la parte divertida, que es la parte del prototipado y lo que queremos aquí mismo antes de empezar el prototipo. Hablemos de todo, control de niños G, el grupo, todo este medio, este medio. Y vamos a simplemente más con 10 píxeles a la derecha, porque si recuerdas, nuestra mezquita se extiende a la izquierda 10 píxeles. Entonces vamos a agrupar todo. Ahora tenemos nuestro formulario y vamos a golpear control D Ahora en este 1er 1 vamos a ocultar nuestro email para que puedas dar click en tu email y bajar lo colocas abajo a cero control de golpe de una vez más, y en éste vamos a revelar nuestro correo electrónico. Entonces haga clic en la mezquita y extienda la mezquita hasta aquí. Y finalmente vamos a dar click en la línea, y tenemos que darle algo de color. Entonces para el color te deja algo verde con 55 d por 66% y ese va a ser nuestro color verde para esta línea, y yo simplemente puedo copiar esto porque lo vas a necesitar un poco más tarde. Ahora, cuando se llene el correo electrónico, necesitamos dar click en su pasaporte. Por lo que vamos a dejarlo así para este control de golpe estatal profundo porque hicimos clic en él en la pantalla anterior. Lo vamos a esconder en este. Por lo que tu contraseña simplemente baja. Hacer básico hazlo y golpear control de una vez más. Y en éste, lo vamos a revelar. Entonces para localizar tu mezquita y extender la mezquita hasta aquí, por ejemplo. Y en este, elige el color fuera de esta línea para que entre. Y por último, cuando la gente haga clic en este, vamos a ocultar el fichaje en la siguiente pantalla. Por lo que ubicó la firma. Nos vamos a bajar de dedo el básico Aquí lo y finalmente incluye nuestra marca de verificación atrás con nuestro primer punto y dar click en este una vez más en este. Nos vamos de dedo extender nuestra marca de verificación para que puedas seleccionar este punto Tal vez incluso podamos ocultar el fichaje en este, y va a ser un poco complicado, pero tienes que hacer clic en él y básicamente tienes que extenderlo hacia abajo como así Hold llave de turno a algún lugar por aquí. Puedes acercar un poco a algún lugar como este y solo asegurarte de que seleccionaste todo fuera tu punto Así que algo así posicionarlo para estar aquí y finalmente él para controlar la una vez más porque vamos a extender nuestro punte final salimos afuera. Por lo que cuando seleccionamos nuestra marca de verificación, podemos seleccionarla así y asegurarnos de que salga fuera. Puedes mantener el turno, alinearlo solo un poco y simplemente alejar el zoom y ver si eso se ve bien. Sí, creo que eso se ve bien. Por lo que ahora llega el momento de animar todo. Entonces haz click en prototipo y podemos acercarnos un poco más. Podemos dar click en este primer campo. Van a usar el grifo auto. Animate está en fuera y aireación apagada 0.4 segundos. Cuando éste vamos a tener el tiempo. Entonces usa retardo de tiempo que vamos a tener a 0.4 segundos, por ejemplo fácil un out o toe animate. Por lo que a continuación tenemos el top para este tan acostumbrado a tocar o tratar de conocer. Todo es lo mismo en este. Utilizó el tiempo así. Entonces en esta siguiente, vamos a usar el grifo en la parte inferior porque vamos a dar click en la parte inferior y la animación va a suceder. Por lo que toca o para animar está en fuera 0.4 segundos. Y en este, vamos a usar el retardo de tiempo. No vamos a tener ningún retraso, así que va a ser 0.0 duración cero punto extranjero. Eso es bueno por ahora, pero vamos a comprobarlo y a ver si se ve bien. Control de calor cero y dar click en este 1er 1 click play. Yo he sido grande un poco. Al hacer clic, tu correo electrónico se va del dedo del pie. Escriba un correo electrónico, y esta línea se va a poner verde cuando haga clic en el pasaporte va a hacer básicamente lo mismo. Y por último, al hacer clic en el botón se va a mostrar esta marca de verificación. Entonces eso es básicamente todo para este video, y te veré en el siguiente 30. Formulario 3: en este video, vamos a crear este formulario de firma cuando haga clic en su correo electrónico va a saltar hacia fuera y hacia arriba. Escriba su correo electrónico, entonces va a hacer lo mismo cuando haga clic en su contraseña. Y por último, al hacer clic en este botón va a saltar en el medio, extender todo el camino hacia fuera y decir: Bienvenido de nuevo. Entonces, empecemos. Por lo que para empezar, tenemos en nuestro puerto apagado 800 por 800 va a usar el tipo dicho y el registro de tipografía en Control E . Voy a usar el sentido abierto así, y voy a usar el tamaño de 30 así, y vamos a duplicarlo para que él controle la una vez más. Y en este, vamos a escribir Welcome back. Así que asegúrate de que va desde el medio y asegúrate de seleccionar el color blanco apagado así , y lo vamos a posicionar en el medio y en el medio así y vamos a bajar el dedo del pie básicamente a cero porque eso va a ser nuestra pantalla final ahora para el fichaje. Dejémoslo aquí por ahora. Ahora vamos a crear nuestro botón. Y para el botón, usemos veamos 2 a 5 con 70 presentador y vamos a usar azul Así que tres E C seis ff para el color y vamos a usar, digamos, sin frontera y digamos, para ejemplo, 50 para que el radio de esquina tenga que ser agradable y redondo. Sólo voy a escribir rápidamente botón aquí y copiar y pegar en una flecha que ya usé en el ejemplo. Entonces los voy a posicionar para que estén en el medio así. Golpea el control G para agruparlos, Llama a este botón así, muévelo abajo abajo y botón va a ir por encima de nuestra forma. Pero se va a ubicar debajo de todo. Pero va a ir por encima de nuestra forma aquí porque tendremos que crear ese salto azul fuera , y eso va a estar encima de todo. Entonces te voy a mostrar un poco más tarde, y vas a poder entender eso mejor. Entonces voy a golpear control de en diseñar para duplicarlo. Voy a bajarlo sólo un poquito, y en este. Nos vamos a llevar en tu correo electrónico y vas a duplicarlo o enterrarlo. Vamos a crear todo y luego vamos a duplicar el campo en sí. Ahora éste va a ser 20 fin. Va a ser en el D. D tan ligero genial, como así vamos a dejarlo ahí por ahora. Ahora usemos una herramienta de rectángulo y podemos tener, por ejemplo, para cientos para el ingenio. Eso me gusta, también, para alturas, y vamos a usar este color así que controla ver para el campo y no vamos a usar el trazo en absoluto. Yo lo voy a posicionar a la izquierda, lo alineamos nosotros dos textos y lo voy a colocar a tal vez 20 abajo así. A continuación, voy a llamar a esta línea de una, y la voy a mover por debajo de su correo electrónico, y voy a agruparlos y llamar a este correo electrónico de esa manera. A continuación, vamos a duplicar su texto de correo electrónico y usted va a ocultar esta parte superior, y vamos a llamar a esto, por ejemplo, diseñador en gmail dot com. Ese va a ser nuestro correo electrónico, y vamos a usar este color para el color de campo así. Y por último, lo que necesitamos es una mezquita. Entonces vamos a dibujar un rectángulo bonito y grande, algo así, y esa va a ser nuestra mezquita. Entonces es mezquita de calidad así. Y finalmente nos vamos de pie. Colóquelo justo en el borde izquierdo de aquí. Voy a sostener turno y tal vez usar mi izquierda. Son dos veces, y luego lo voy a mover abajo. Selecciona estos para golpear mezquita con forma, llamada a ésta una mezquita así, y voy a sacar la mezquita fuera del camino, así. Y por último, vamos a usar tu correo electrónico pero moviéndonos justo debajo, y ese es básicamente nuestro campo de correo electrónico. Ahora vamos a golpear escrituras de control duplicadas, y en esta siguiente, vamos a llamarlo contraseña así y fuimos a moverla abajo. Así que dentro no iban a escribir en tu correo electrónico, sino tu contraseña así y finalmente, dentro de la mezquita. Ocultemos un posible en lugar de diseñador. Vamos a extender esta mezquita para que podamos ver qué estamos haciendo. En lugar de diseñador, voy a usar puntos espaciados espacio espacio espacio punto, por ejemplo, Crear para control, Ver? Duplicarlo, controlar a y aumentar el tamaño de 40. Sólo para que sean amables y grandes. Mueve la mezquita por aquí e incluye tu contraseña de vuelta. Entonces eso es básicamente todo para el proceso de creación. Empecemos ahora un pedido. Todo arriba. Entonces lo que queremos para este es que queremos dedo del pie colocarlo aquí y luego bajarlo hacia abajo. 80. Así 12345678 Me gusta que sosteniendo turno en flecha inferior y hacer lo mismo por este. Por lo que básicamente se extendió para estar a los 18 así y finalmente movió el botón justo aquí y estará a los 80 también. Simplemente muévelo a aquí. Y esa es básicamente nuestra forma. Se puede agrupar todo así que hit control, G. Pero deja el texto de bienvenida de nuevo fuera de él porque se va a quedar donde está. Voy a posicionarme en el centro y golpear turno dos veces a la derecha porque si recuerdas , nuestra mezquita salió 20 piezas por la izquierda. Nos vamos de pie, agrupar todo y dejar todo como está ahora mismo. Entonces básicamente lo hay para la parte de diseño de este video y ahora nos vamos a movinto prototipar parte para que puedas dar click en nuestro control de golpe de puerto D Y en este 1er 1 vamos a mover este tu email hacia arriba. Entonces, ¿dónde hacer click? 1234 Ahora, en esta etapa, vamos del dedo del pie Espera. ¿ Entonces controla D en este aeropuerto? Y ahora, en esta etapa, vamos a revelar nuestra mezquita y mostrar así nuestro correo electrónico, y vamos a hacer lo mismo. Entonces básicamente, vamos a dar click en tu contraseña. En esta etapa, texto de tu contraseña va a saltar. Por lo que 1234 y vamos a peso del dedo del pie. En esta etapa, remojar controló la una vez más y ahora vamos a revelar nuestras contraseñas. Entonces sólo mueve la mezquita a la derecha. Y una vez más, si tu computadora se confunde con algo de esto, puedes examinar los archivos de práctica y puedes ver exactamente lo que hice, lo que creé. Y puedes usar esos mismos archivos para sus proyectos personales y comerciales. Por lo que finalmente, ahora tenemos que dar click en el botón y queremos hacer click control de certificada. Entonces en este un usuario se va a dar click en la parte inferior ahora el botón se va a mover en el medio así que vamos del dedo del pie, que sea círculo. Por lo que 70 por 70 y la flecha va a entrar así y finalmente dar click justo aquí para posicionar esta derecha en el medio. En este siguiente, vamos del dedo del pie, tenemos control en D. Haga clic en el botón y vamos del dedo del pie sujetar un perno de cambio y a la izquierda dando click en una las esquinas y extendido hasta que se sienta todo. Y vamos a esconder la flecha en esta etapa. Y finalmente tenemos que mover el botón por encima de todo. Entonces básicamente será bienvenido de nuevo y el botón de abajo, así que solo me voy de pie, rápido click en todos ellos y posiciona el botón por encima de todo. Entonces hagámoslo realmente rápido porque necesitamos ese color azul para cubrir todo excepto por bienvenida de vuelta que va a estar arriba así que una vez más, cuando hagan clic, se va a convertir en círculo. Entonces se va gastando dedo del pie y finalmente, en este, vamos a tener nuestro texto de bienvenida de vuelta revelado por primera vez, así que básicamente eso es todo. Tienes 2468 nuestros puertos en total. Y una vez más, si estás confundido sobre algo, puedes consultar los archivos del proyecto y verlo todo por ti mismo. Ahora vamos a prototiparlo así en conflicto Prototipo. Por lo que en este 1er 1 van a dar click en tu correo electrónico. Entonces vamos a usar los enemigos de auto paso y para la flexibilización glúteo está adentro afuera. Y por último, usemos 0.6 segundos. Por ejemplo, en este, vamos a usar el tiempo. Entonces tiempo y retraso usemos 0.60 punto seis para declaración también, y va a aterrizar en dos aquí. A continuación, vamos a dar click en tu contraseña. Así que toque o a cualquier carne, mismos ajustes. Y en este, vamos a conducir la manija Azul. Vamos a usar el tiempo, así que básicamente el mismo retraso y todo hasta que llene el pasaporte. Y por último, vamos a usar tap para este uno notas fáciles, y este va a ser el momento. Entonces vamos a tener el retraso un poco más grande. Un segundo, por ejemplo, que tú 0.6, y en este, usemos 0.6 y 0.6 y veamos cómo se ve eso. Por lo que voy a dar click en este primer tablero de inicio click de vista previa. Entonces cuando hagas clic, tu correo electrónico va a saltar y el diseñador va a revelar tu contraseña cuando hagas clic lo va a hacer lo mismo. Y por último, cuando hagas click en la parte inferior va a saltar en el medio, expandirnos y vamos del dedo del pie. Ten este texto de bienvenida de nuevo. Entonces eso es todo para este video. Y una vez más, si estás confundido sobre algo, puedes consultar los archivos del proyecto y aprender más sobre las dimensiones, el espaciado y todo lo que hay dentro de ese archivo de proyecto. Entonces eso es todo para este video, y te veré en el siguiente. 31. Formulario 4: en este video, vamos a crear estos campos de formulario con el selector en la parte superior. Por lo que al hacer clic en cualquiera de estos, estos campos van a expandirse o colapsar del dedo del pie. Al igual que en este caso y el texto va a cambiar también dentro de la parte inferior. Y se va a corresponder con lo que haya hecho clic en la parte superior, para que pueda ver firmando aquí mismo. Después regístrate y finalmente corre contraseña. Entonces, empecemos. Entonces tenemos un aeropuerto apagado 800 por 800 Voy a usar mi título y voy a teclear, Inicia sesión y voy a usar abierto, dice B 20 regular. Y voy a golpear control DE a duplicado. Y en este, voy a teclear, inscribirme y finalmente, voy a tener uno más, y este último va a ser restablecido para el pasaporte. Ahora empecemos a crear nuestros campos. Entonces para el campo, usemos para 100 con 70. Al igual que así y para las esquinas redondeadas. Usemos algo así como ochos y agradable y limpio, y voy a mover esto en el medio así, mover decidiendo todo a escuchar, apuntarme. Vamos a acercarlo y todo turno y tal vez moverlo. No lo sé, 20 o 40 píxeles. Usemos 30 y finalmente reiniciemos. Pasando a este borde, duplicar éste y arrastrarlo abajo y moverlo justo por encima del rectángulo. Aquí. Vamos a escribir en input like so y firmando para poder agruparlos y llamar a este correo para que más todo abajo y dentro del texto de firma más con 20 pixels a la derecha y vamos a escribir en tu email como así a continuación, nosotros lo van a duplicar y mover éste hacia abajo como así que déjalo estar a 20 pixeles, así Y esto va a escribir en posible porque esta va a ser nuestra contraseña así y renombrarla la contraseña así Y finalmente, lo que necesitamos es una repetición contraseña. Por lo que controlaría D en este y tal vez más, que 20 pixeles abajo como así y vamos a llamar a esta repetición contraseña como así y baja click dentro y escribiendo. Repite así. Y por último, lo que necesitamos es un botón. Entonces hagámoslo. Golpea el control D, y vamos a llamar a este fondo como ese y vamos a moverlo. No 20 píxeles. Entonces va a ser lo mismo, básicamente, para todos ellos. Y dentro de éste. Primer posicionamiento Toby centro alineado, y vas a escribir dentro así para la importación. Vamos a cambiarlo a fondo porque va a ser nuestro fondo ahora removido frontera. Y para el filtro cuando Judíos tres e c. Seis ff así y firmando texto va a ser blanco así finalmente los posicionó para estar en el centro así. Nos vamos del dedo del pie. Duplica el circuito de fichajes Control de Y en este, vamos a escribir adentro arriba porque eso va a saltar desde arriba así y asegurarnos de que esté en medio. Por lo tanto seleccione inscribirse, Hold control. Botón Seleccionar. Asegúrate de que esté en el control de golpe medio de Ocultar este. Y por último, para este, vamos a escribir en reset password porque eso va a ser para nuestra selección final o top. Entonces eso es un reinicio. Posible que. Haces lo mismo, así que asegúrate de que esté perfectamente en medio así y muéstrale a los tres. Usa el rectángulo para dibujar sobre. Hablo rectángulo. Llámalo la mezquita. Puedes seleccionar el texto desde aquí, golpear el control C y finalmente seleccionar todo bien? Haga clic y Moscú su forma. Doble clic dentro de Control V y simplemente llámalo mezquita. Ahora Finalmente, vamos a movernos en reciente posible y cerrar sesión fuera de nuestra mezquita así y sólo nos vamos a dejar fuera con Sign in. Por último, lo que necesitamos es un triángulo. Entonces vamos a crear un bonito triángulo grande como este usando distal y para la altura, usemos giro, por ejemplo, para la película. Vamos a usar este color así, y finalmente puedes alinearlo con este borde así que asegúrate de que esté en medio firmando y en este 1er 1 dejémoslo así. Entonces vamos a llamar a este selector Así que en posición justo debajo de nuestro texto así. Y por último, lo que queremos es seleccionar todo el texto y tal vez posicionarlo en 20. Por lo que tenemos todo coherente y con aspecto bonito. Por último seleccionar todo su control. G posicionarlo en el centro como así a la derecha. Haga clic y crezca loros. Y este va a ser nuestro diseño terminado. Ahora vamos a crear nuestro estado. Entonces vamos a necesitar tres estados, así que voy a golpear el control D dos veces. Por lo que tienes dos copias ahora para este 1er 1 Voy a seleccionar. Date de alta. Sostenga turno. Seleccionar. Restablecer. Haga clic Justo aquí. Escribir de de presse gastó, er Así lo voy a tener ser en este color gris claro. Y por último, lo que queremos es posicionar el botón justo encima de estos campos. Al igual Y por el fichaje. Solo queremos tu email y contraseña, así que me voy a posicionar. Botón de inicio de sesión. Basta de escuchar y repetir posible. Bajar la Ciudad de la Bahía a cero. Ahora, en esta siguiente, vamos a mover el selector para apuntarse, para estar en el centro así. Fuimos a seleccionar firma y reinicio. Haga clic aquí. D d d d percenter dedo del pie. Hazlo más ligero. Genial. Ahora, en este apunte. Vamos a tener estos campos como este, y finalmente, vamos a mover este letrero en texto abajo así. Pero vamos a posicionarnos Regístrate para estar en el centro así y luego moverte de lado estando justo debajo puedes cerrar la mezquita y finalmente, saltemos a este estado agitado. Entonces vamos a movernos en el selector, Toby en el centro fuera del reinicio y seleccionar el taburete. Da clic aquí, D d d presiona enter y finalmente moviendo el botón para estar justo aquí, y lo vamos a posicionar por encima de todo. Asegúrate de hacer eso con cada uno de estos. Entonces se trata de todos los campos. Y por último, para este, nos vamos a esconder dedo del pie, contraseña y repetir pasaportes que puedan seleccionarlos y bajar su basado hacia abajo. Y en este, lo que queremos es saltar dentro de la mezquita y bajar la contraseña de repetición todo el camino hacia abajo en el centro así, y finalmente mover firmando todo el camino hacia abajo y mudarse Regístrate arriba, abajo así como este . Entonces la contraseña de repetición está en el centro, así que eso es básicamente todo para nuestro diseño y para prototipo. Es que es realmente simple. Entonces haz click en un prototipo y voy a acercarme un poco más y lo que tú eres lo que quieres hacer es conectar todo para que los usuarios puedan hacer click entre estas tres pantallas. Por lo que finalmente, vamos a dar click en el registro. Nos va a llevar aquí. Vamos a usar paso o a cualquier carne. 0.6 segundos. Digamos que haga clic en el reinicio, haga lo mismo. Haga clic aquí en el fichaje va a contener el mismo efecto. Haga clic aquí para saltar al reset y finalmente hacer lo mismo para éste. Entonces este es el apunte, y este 1er 1 es el registro de entrada. Entonces eso es básicamente todo. Vamos a previsualizar. Todo lo que está en grande es sólo un poquito. Por lo que al hacer clic en el registro, se va a expandir dedo del pie. Cambia el texto para inscribirte. Haga clic en el reset se va toe reset Contraseña aquí mismo y mover todos los campos dedo del pie se vuelven en blanco como registrarse firmando. Como pudiste ver, todo está funcionando correctamente y puedes cambiar y agregar tus propios toques. Entonces, por ejemplo, puedes resaltar en este triángulo y estos campos. Si quieres, puedes hacer estos otros colores. Se pueden añadir sombras de gota en el fondo. De verdad depende de ti. Incluso puedes cambiar el color de fondo de estos campos. Entonces, por ejemplo, son blancos. Es éste. Pueden ser como crear este que puede ser oscuro. Lee este. Por lo que realmente depende de ti y estructura superior este diseño. Entonces eso es básicamente todo para este video, y te veré en el siguiente. 32. Formulario 5: en este video, voy a mostrar cómo puedes crear esta contraseña creada falló, que luego podrás integrar en tus formularios. Entonces cuando hagas clic en crear palabras de parse va a desaparecer, entonces va a empezar a escribir contraseña, y te va a mostrar fuerza de la contraseña, y estos colores aquí abajo van a corresponder con todo. Entonces si jugué a una vez más, se puede ver que empieza con cuatro, luego seis caracteres y finalmente termina en ocho y muestra una contraseña fuerte con un color verde abajo. Entonces, empecemos. Entonces lo que tenemos aquí es en nuestro puerto apagado 800 por 800 ya me adelanté y creé en alguna parte. Entonces, ¿qué? Aquí hemos creado posible Open dice 20 y tenemos la contraseña en cumplido. Entonces tenemos una mezquita crear contraseña oculta, que es este ícono, y finalmente, en entradas y dentro fuera de una mezquita. Simplemente tenemos algunos pensamientos regulares como ya te mostré. Entonces si revelo la mezquita, puede ver cómo se ve, y estos puntos que ya viste en algunos de estos videos anteriores. Entonces ese es básicamente nuestro campo, y ahora vamos a crear la información a continuación. Pero primero, empecemos con el texto. Voy a duplicar este. Voy con el dedo del pie arrastrarlo justo aquí abajo, y lo voy a posicionar. Es algo así como 20. Voy a hacer que salga bien. Entonces para estar alineados a la derecha, ve al borde derecho y éste vamos a escribir en semana, como así con abajo, control de a duplicado. Voy a esconder este stop uno. Esto debería escribir, podría ser más fuerte, así Y finalmente, voy a conseguir el control De y en este fondo uno. Eso es correcto. Perspectivas fuertes, así Así que esas son nuestras tres etapas, y ahora vamos a crear una mezquita para ellos. Por lo que se utiliza un rectángulo. Asegúrate de que vaya al borde derecho así, y asegúrate de que esté en medio del texto así porque va a ser más fácil para nosotros posicionarlo un poco más tarde. Y movamos el dedo del pie de la mezquita aquí, por ejemplo, puedes bajar tu ciudad pagada. Realmente no importa porque va a ser nuestra mezquita así. Y finalmente vamos a seleccionar todo, ¿no? Haga clic en mezquita de forma o use este atajo. Por lo que cambia el control y Windows grande o debería ordenarlos en Mac. Ahora, esta va a ser nuestra mezquita, así Y finalmente, voy a mover todo este texto fuera de nuestra mezquita así, y vamos a cerrar esta mezquita. Y como pueden ver, aquí no podemos ver nada. Entonces, por fin, lo que vamos a hacer es ir de pie, en realidad, um, la mezquita y la vamos a agrupar un poco más tarde y te voy a mostrar por qué Simplemente deja todo como está. Esto lo necesitamos para que posicionemos a estos abajo. Entonces empecemos a crear nuestros colores. Voy a usar una herramienta de rectángulo y voy a escribir algo como esto. Entonces usemos el peso apagado. 90 alturas 19 altura apagado. 11 Analistas usan radio de esquina fuera de ocho como así Y para el color. Usemos el DDT así. Colóquelo así y en medio de esta mezquita. Entonces, así. Por eso necesitábamos la mezquita. Y ahora puedes saltar adelante y agrupar esta mezquita una vez más. Entonces vamos a seleccionar todo. Pero tenemos que traer el texto de vuelta al centro, como así Así Así es ingenio. Vamos a moverlo aquí mismo para que podamos ver lo que estamos haciendo. Así que así. Y vamos a mover la mezquita aquí arriba, click derecho y mezquita con forma finalmente, y esta va a ser nuestra mezquita y finalmente saltar dentro de la mezquita y mover todo fuera de ella así. Ahora por fin, hacer dos copias de ella, pero primero llámalo vacío que controlan el control de. Ahora, en este 1er 1 puedes golpear el control G para agruparlo calidad, correcto, porque ese es nuestro primer control de color G. Llámalo azul. Ese es nuestro segundo control de color y violento. G llamó a este verde así, y puedes abrirlos todos, golpear control de y luego renombrarlos como estos colores porque estos colores van a corresponder con la fuerza de lo posible. Tan controlado. El final finalmente llamó a este verde. Ahora por los colores para el rojo. Déjame copiar rápidamente en ese color. Entonces para los Rojos, vas a usar E 53 c 85 para el Azul, vamos a usar 366 f f. Y finalmente para el verde típicamente seleccionaría ese color también. Vamos a tener este color. Entonces, finalmente, vamos a moverlas ahora para que puedas seleccionar éstas para mantener el turno y la flecha derecha y colocarlo en algún lugar como tal vez 10. Es bueno y finalmente hacer lo mismo por el verde, así que manténganlo un 10. Eso es bueno. No, hagámosles algunos cambios. Entonces todos ellos van a tener la semana libre uno, porque vamos a empezar y luego expandirlos así y vencidos pasty a cero para los tres. Se puede cerrar todo esto hacia abajo, y eso es básicamente todo para nuestro diseño. Entonces, como puedes ver, es realmente fácil y sencillo de hacer. Ahora, empecemos a crear algunas copias del mismo para que controlara el ahora en este segundo estado. Cuando alguien haga clic en este campo, crear contraseña va a desaparecer. Entonces bajemos el apace te lo. Pero antes de hacerlo, ordenemos primero algunas de estas capas antes de hacer cualquier otro cambio. Entonces lo que tenemos tenemos tenemos gran posible y posible en la parte superior. Después tenemos estos tres y finalmente una mezquita a la derecha. Ahora podemos copiarlo. Por lo que controló el Y en esta primera etapa, como decían, vamos a bajar la ciudad apace off, crear posible texto y en este segundo estado, eso no es salto a la vista y gastamos esta mezquita y podemos expandirlo a cuatro puntos. Por ejemplo, Para este primer estado para este segundo estado, vamos a ampliarlos a seis. Y en el 3er 1 dedo ocho. Entonces eso es todo por la contraseña. Escojamos obesidad roja como 100 puedes dar click aquí y ver el ingenio es 90. Entonces hay que hacer lo mismo por aquí. Por lo que 90 se va a llenar y finalmente para la mezquita. Lo que necesitamos es el texto que dice demasiado débil. Colóquelo en el medio como lo siguiente es ir del dedo del pie. Espera un poco. Después controló. El usuario va del dedo del pie a la derecha. Dos personajes más así y vamos a hacer lo mismo por el azul. Entonces 100 a 90 así y tenemos que cambiar el texto una vez más. Por lo que dos semanas van a bajar o puedes dejarlo e incluir podría ser más fuerte en el centro y luego moverlo afuera porque es más fácil para nosotros alinearlo de esa manera y finalmente golpear Control D y vamos a ampliar la mezquita hasta el final al borde como así y finalmente incluir el color verde. Entonces son 90 y 100 por la opacidad. Y por último, para las tareas que puedes incluir contraseña fuerte en y podría ser más fuerte, puedes moverla hacia abajo. Entonces eso es básicamente todo para la parte de creación. Deberían tener estos cinco puertos nuestros, y ahora lo que vamos a hacer es prototipo. Es un click justo aquí. Haga clic en este campo. Entonces cuando el usuario toca, auto animate va a suceder y podemos elegir, por ejemplo, 0.6 segundos, creo que eso va a funcionar bastante bien ahora para este 2do 1 Vamos a dibujarlo, y lo que queremos es tener el retardo de tiempo de 0.6 segundos o para animar 0.6 es bueno y está en fuera. Podemos dejarlo en eso solo asegúrate de que tengas zona de flexibilización, así que también la voy a cambiar aquí. No por perturbado. Vamos a llevarla hasta aquí. Vamos a tener el tiempo. Entonces una vez más simplemente lo movemos así. Por lo que el retraso de tiempo va a ser un segundo y notas fáciles y finalmente un segundo aquí también . Ahora, en este último nos vamos a arrastrar hasta aquí, vamos a usar básicamente los mismos ajustes para que el tiempo un segundo de flexibilización y un segundo también. Bueno , ahora está probado y ver qué hicimos. Por lo que voy a dar click en este 1er 1 click play, agrandarlo solo un poquito. Entonces cuando haces clic dentro, va a la altura del dedo del pie, crea contraseñas, muestra estos cuatro puntos, luego seis y todo esto va a lo largo. Entonces cuando lo mueva una vez más, cuando haga clic dentro se va a ocultar, luego mostrar por puntos, luego seis y finalmente ocho y todo esto abajo está siguiendo. Ahora ten en cuenta que puedes crear esto como solo una barra y luego incluir ordenar un int Grady , por ejemplo, y luego usar el mismo texto, como hicimos en este ejemplo, pero simplemente movió el int Grady a lo largo de la línea por lo que el fondo fuera de este campo debe ser un gris claro. Entonces dd el mismo color que usé en este ejemplo. Pero para el int Grady, puedes posicionarlo Toby, por ejemplo, a las tres. Y luego puedes mover éste y luego tener que sea verde, o hacer justo lo que quieras con él. También puedes, por ejemplo, colorear esta entrada Toby Greene para que se corresponda con esto y también cambiar los colores fuera del texto. Por lo que cada texto corresponde con cada fuera de estos campos. Por lo que realmente depende de ti si quieres hacer algún cambio adicional. Esas son solo algunas de mis ideas, y también puedes explorar algún otro ejemplo en línea. Y por último, puedes incluir los colores de los clientes dentro para que puedas llamarla el ciclo. Por ejemplo, Destexhe aquí mismo, aunque esos cambios que te mostré aquí mismo. Por lo que realmente las opciones son infinitas cuando estás trabajando en un proyecto y realmente depende de ti, tu cliente y tu imaginación dedo del pie ponen todo esto en el trabajo de remolque. Entonces eso es todo para este video, y te veré en el siguiente 33. Formulario 6: en este video, voy a mostrar cómo puedes crear este formulario. Entonces cuando hagas click en el nombre se va a poner azul, va a hacer lo mismo para el nombre email y finalmente, mensaje aquí mismo. Y por último, cuando se sienta fuera de todos los campos, al hacer clic en enviado, va a desaparecer y luego rápidamente te mostraremos gracias, y en breve nos pondremos en contacto contigo Mensaje. Y así es como sabes que enviaste el mensaje. Entonces, empecemos. Entonces aquí tengo el aeropuerto apagado 800 por 800 para ahorrar un poco de tiempo, ya creó el diseño así que rápidamente corre a través de él con ustedes. Pero algo así que ya creamos en uno de sus videos anteriores. Por lo que cada uno de estos campos fuera de su nombre, correo electrónico y mensaje tiene exactamente la misma configuración. Entonces si acerco un poco más al interior, tenemos la mezquita. Entonces si abro la mezquita, tenemos en nombre para esta en particular. Por lo que vas a gastar la mezquita a la derecha para revelar el nombre igual que hicimos en algunos de nuestros videos anteriores. Tenemos tu nombre el cual va a desaparecer y finalmente tenemos esta línea que cuando alguien haga clic en ella, se va a poner azul. Entonces el texto va a teclear en su totalidad y luego va a volver a su color original . Entonces eso es lo que tenemos para estos tres campos. Y finalmente tenemos este fondo en la parte inferior. Entonces si lo abro, solo tenemos el aroma y el fondo que está en 2 a 5 con 70 mismo como todos nuestros otros botones. Por último tenemos contactarnos, que está abierto, dice a los 30 todo fuera el resto del texto está a los 20 y finalmente tenemos que agradecerle. Entonces si selecciono todos estos bajos antes base ity, selecciona el agradecimiento y aumenta su opacidad. Entonces lo que tenemos dentro tenemos la marca de verificación. Entonces tenemos el círculo en 70 por 70 y vamos a llamarlo círculo. Entonces y finalmente tenemos este icono de marca de verificación en el interior, simplemente coloreado en blanco. Entonces nada realmente especial. Debajo de eso tenemos texto de agradecimiento el cual está abierto, algunos robustos. Y finalmente tenemos nos volveremos a ustedes en breve. Salsa abierta 20 a este color más claro. Igual que el color en nuestros campos. Entonces me voy de pie por toda la ciudad del Reino Unido de la misma. Selecciona a todos los demás, y la razón por la que bajé la ciudad apace de ella es que va a aparecer en nuestra pantalla final, por lo que va dedo del pie se vuelve totalmente visible en el estado final fuera de esta animación. Entonces empecemos con nuestro prototipo. Lo primero es lo primero. Voy a dar click en el aeropuerto, golpear Control de a duplicado. Y en este 1er 1 cuando alguien hace clic aquí mismo, el nombre va a desaparecer. Entonces cargemos una ciudad 20 y la línea se va a convertir en azul Sercan. Simplemente haga clic aquí para seleccionar el color azul. Entonces eso es todo para el primer estado para el segundo estado, voy a control del dedo del pie del niño y haga clic en salto del dedo del pie justo dentro. Vamos a volver a cambiar el color a este gran color, así que vamos a ver rápidamente qué color es? Entonces es 70 70 70. Entonces esta especie de oscuro grandioso y finalmente vamos a revelar la mezquita como así justo para revelar el nombre a continuación. Vamos a dar clic aquí para tu correo electrónico, Así que vamos a duplicar el puerto de arte. click dentro y bajemos la opacidad de tu correo electrónico y cambiemos el color de la línea del dedo azul como así . Y eso es todo para este estado. Y en el siguiente estado, vamos a cambiar en el color de la línea de vuelta. Entonces voy a elegir esto en color gris oscuro y abrir la mezquita para que podamos revelar el correo electrónico del diseñador en este caso así. Y por último, alguien va a dar click aquí mismo, y vamos de pie por encima de la opacidad de tu mensaje en este. Por lo que frenó tu ritmo ciudad hacia abajo. Llamémosla en la línea azul para indicar que alguien está escribiendo. Y finalmente, duplicemos este para nuestro estado final Para el texto. Cambiemos en el color de la línea de nuevo a este gris oscuro y está explicando algunos de nuestros videos anteriores. Simplemente puede copiar y pegar estos códigos hexagonales en si eso es más fácil para usted, o simplemente puede usar esta herramienta de selección de color y simplemente elegir el color que desee. Entonces eso es básicamente todo para nuestro proceso de creación fuera de todo en este último estado el usuario va a tocar este fondo enviado y ¿qué va a pasar a continuación? Vamos a conseguir el control de D. Ahora. Vamos a seleccionarlo todo. Excepto la carpeta de agradecimiento. Vamos a bajar su ciudad pagada a cero. Y finalmente, para nuestro último estado, vamos a aumentar la opacidad del texto en la parte superior. Por lo que esto Gracias. Simplemente vamos dedo del pie a aumentar la ciudad obedecer así. Entonces eso es básicamente todo para todo el proceso de creación. Como puedes ver, hay bastante fuera de los campos que Toby creó. Pero todo es realmente bastante sencillo. Todo es básicamente lo mismo. Simplemente estás repitiendo estos pasos. Tan azul sopla y luego revelan realmente, muy bien, básicamente, eso es todo. Y finalmente utilizable click en la parte inferior. Por lo que empezó a hacer prototipos. Vamos a saltar en nuestro 1er 1 y vamos a dar click en este campo. Te vamos a paso o a cualquier carne está en fuera n 0.6 segundos va a funcionar bien para estos arrestos fuera de los campos. Puedes pisar por algunos de ellos si quieres, pero dedo del pie aumentar la velocidad fuera de esta interacción. Yo sólo voy a usar el tiempo. Entonces en lugar de tap, vamos a usar el tiempo. Vamos a dejar el retardado en cero uso auto animate, fácil un out y 0.6 segundos para que tengamos exactamente la misma configuración. Entonces solo voy a arrastrar estos mangos azules porque simplemente va a copiar y pegar los mismos ajustes que usamos para ese 1er 1 Y solo va a llenar todo por nosotros. Ahora. Por último, en este último estado, vamos a que pisen el botón de envío, así que simplemente lo vamos a arrastrar. Además, animar fácil ahora 0.6 segundos. Y en este último estado, sólo vamos a usar el tiempo. También anima, aliviando, o puedes usar fundidos, o puedes usar lo que quieras. Entonces tal vez podamos usar límites para ver cómo se ve eso o chasquear. Pero creo que eso se ve realmente bien y solo usar está adentro afuera solo para tener la consistencia entre todos ellos. Por lo que es rápido en el 1er 1 click play. Yo sólo lo voy a agrandar un poquito y veamos cómo se ve eso. Entonces cuando hagas clic, tu nombre se va a poner azul, fallando sensación de golpe en todo. Y por último, al hacer clic en el botón de enviar se va a desvanecer y luego desvanecer este texto de agradecimiento . Entonces eso es todo para este video y te veré en el siguiente. 34. Formulario 7: en este video, te voy a mostrar cómo crear este sencillo formulario de contacto. Por lo que al hacer clic en la parte inferior, la imagen en este texto con un título de empleo salta fuera del camino hacia la parte superior para revelar el correo electrónico y los campos de mensaje. Entonces cuando hagas click en el correo electrónico, campo va a llenar todo y luego al hacer clic, enviar mensaje va a voltear de enviar mensaje a mensaje enviado, y se va a gris estos campos para que sepas que en realidad tienes envió el mensaje. Entonces si hago clic en él una vez más, se puede ver cómo se ve todo. Y finalmente, se va a escribir en Mensaje enviado. Entonces empecemos. Entonces estamos usando el aeropuerto de 800 por 800. Igual que en todos los demás videos, y lo que tengo aquí es el diseñado para ahorrar un poco de tiempo. Entonces, empecemos con imagen. Esta imagen se libera de un splash dot com y su en 80 gran 80 Tan perfecto círculo y finalmente tiene una sombra, solo una sombra básicamente completa off 03 y seis y el color es totalmente negro al 16%. Igual que en uno de los videos anteriores. Por lo que tenemos este texto y título de trabajo. Por lo que este texto principal es el sentido abierto y 20. Entonces básicamente el mismo Texas, este solo uso el color más oscuro. Entonces este es D D. D. Y este es 70 70 70 y está posicionado apenas pedacitos arriba. Por lo que 10 pixeles arriba de este título laboral. Un título de empleo interno. Tenemos la etiqueta del título, ¿cuál es? 80 de Turquía. Y finalmente te tenemos, yo texto de diseñador, que es sentido abierto de nuevo a las 10 y solo de color azul básico. Por lo que esos dos están localizados. Entonces si golpeo turno 1234 se encuentran a 40 píxeles a la derecha de esta imagen, y están ubicados en el medio. Entonces si me casa una tecla de turno como esta con mi tecla izquierda del ratón, se puede ver que están en medio. Esta imagen e imagen en sí se posiciona a 20 piezas arriba de este campo. Entonces el campo tenemos correo electrónico y el mensaje, pero primero lo primero. El orden fuera todos estos elementos. Entonces primero tenemos imagen en la parte superior, y después tenemos diseñador a la derecha. Entonces tenemos el fondo porque estos dos correos electrónicos y mensajes van a saltar detrás del fondo. Por lo que es importante posicionar todo correctamente antes de crear tus animaciones para que todo funcione correctamente. Ahora tenemos correo electrónico es un dicho. Tenemos su correo electrónico, cual está abierto, dice 20 en D DD capacidad completa de 100. Y tenemos este cliente y correo electrónico si escondo esto sobre la opacidad en cero, así que básicamente el mismo texto. Pero al 70 70 70 Abierto dice 20. Entonces básicamente lo mismo que tu correo electrónico, y si acerco un poco más, puedes ver que solo es una diferencia de color. Entonces en este estado, es una opacidad D menor a cero. Hicimos lo mismo por el mensaje. Entonces tenemos éste, y tenemos en éste en la parte de atrás así que básicamente el mismo trato que los de arriba. Ahora para los campos en sí mismo, esta entrada está en 400 con 70 y la de abajo está en 400 con 1 80 Y como decían varias veces a lo largo de este curso obtendrás los archivos de práctica y conseguirás tocar los dedos con él y podrás hacer algunos con los tuyos propios. Puedes incluir diferentes colores. Si desea utilizar estos diseños particulares para nuestros clientes, puede elegir sus colores y así sucesivamente. Pero sólo quería explicar el proceso en la lógica detrás de él. Por último, tenemos el fondo. Entonces si abro el fondo, tenemos la perspicacia de la máscara. Entonces dentro de la máscara, si acerco un poco más cerca, tenemos contacto con nosotros arriba. Envía mensaje justo aquí y mensaje enviado justo abajo. Por lo que estas mezquita se crea básicamente de la misma manera que todas las demás mezquitas en este curso, por lo que no entrarán en demasiados detalles al respecto. Entonces vamos a golpear control de para duplicar este nuestro barco. Pero debido a que este va a ser nuestro segundo estado, vamos a trabajar en este primer estado. Entonces empecemos con esta imagen. Va a ser a los 20 con 1 20 así que, así , simplemente puedes agrandarlo aquí y lo voy a posicionar el dedo del pie alineando perfectamente. Ingenio y este stop edge off en el campo de correo electrónico, y simplemente voy a dar clic aquí para posicionarlo en el medio. A continuación, vamos a abrir la carpeta de diseñadores. Usa el nombre hit shift y click izquierdo hasta que esté en el medio. Fuera de esto eres diseñador. Después posiciona todo en el medio así y luego muévelo justo debajo de la imagen. Y ahora lo voy a posicionar. Así que cambien. Flecha inferior. 1234 Así que tal vez a los 40 viejos vamos a mantener las cosas simples porque tenemos huecos de 20 píxeles entre todo. Entonces tenemos una brecha de 20 píxeles aquí y una brecha de 20 píxeles aquí, así que vamos a conseguirlo aquí también. Entonces dejémoslo ahí. Y finalmente tenemos que mover el correo electrónico y el mensaje fuera del camino. Por eso tenemos la botella encima. Entonces cuando lo moví, como para que veas que van detrás del fondo, no por encima de él. Es por eso que la animación va del dedo del pie a trabajar correctamente. Entonces, primero movamos todo 80 píxeles. Así que cambiar en flecha inferior. 12345678 y luego podemos mover el mensaje también, así 12345678 Y si quieres, puedes moverlos aún más lejos. Por lo que 12345678 en todo. Y por último, con ambos seleccionados, simplemente baje la opacidad a cero. Y luego en el siguiente estado, que es éste. Cuando hacen clic en este botón, se va del dedo del pie. Aparecen aquí mismo. Ahora vamos a cambiar este texto en ir dedo del pie control de golpe y haga clic Insight en este 1er 1 se va a escribir en Contáctame para que pueda bajarlo y me voy dedo del pie pegado en enviar mensaje y moverlo fuera del camino abajo como así. Y puedo posicionarlo como un cero con este mensaje enviado texto. Entonces, ¿qué podemos hacer después? Debido a que hemos creado nuestros dos estados, podemos iniciar nuestra animación para que primero podamos crear nuestras pantallas o iniciar animación como esta básicamente, Pero primero creemos nuestras pantallas. Entonces voy a golpear el control. Efectivamente, para duplicar esto nuestro puerto y en este 1er 1 personas van a dar click aquí. Entonces empecemos desde el principio. Van a dar click. Contáctame esto va a aparecer, y luego van a dar click justo aquí donde dice tu email. Ahora, en este segundo estado, vamos de pie sobre la opacidad de tu correo electrónico e incrementamos tu ciudad pagada. Uh, este mensaje de correo siguiente, van a dar click en tu mensaje así que tu mensaje va a estar en cero o Pacenti, y vamos a duplicarlo. Y por dentro iban a aumentar el ritmo de este texto y finalmente aquí dentro, van a dar click mensaje enviado. Entonces vamos a duplicarlo una vez más. Y estos dos textos van dedo del pie a cambiar el color. Entonces básicamente, voy a seleccionar a los dos usando control mental keep y voy a dar clic aquí mismo , golpear el centro de prensa D d para cambiar el color. Y finalmente tengo que cambiar el texto dentro. Por lo que el texto se va a escribir en mensaje, enviado así, posicionarlo en el centro y enviar mensaje. Podemos sacarlo del camino así. Entonces básicamente lo hay. Tenemos tres textos diferentes dentro de nuestro botón. Tenemos dos textos diferentes para cada uno de estos campos, y acabamos de mover estos dos fuera del camino. Entonces empecemos con la animación. Voy a pegarle al prototipo. Amplíe un poco más para que la gente vaya a tocar este botón. Entonces fuimos a ti. Paso orto. Cualquier carne está en fuera y 0.6 segundos para la transición. A continuación, podemos hacer lo mismo por este para que podamos hacer clic en su correo electrónico así que aquí mismo para iniciar la animación. Entonces vamos a un paso o dos. Cualquier carne, Exactamente los mismos ajustes? No, de aquí para aquí, vamos a usar el tiempo porque va a sentir todo por nosotros tan tiempo o para animar. Fácil ahora. Y puedes usar 0.8 segundos si quieres que la animación sea solo un poco más larga. Y finalmente van a dar clic en enviar mensaje tan arrastrado hacia fuera tap o torneo está en fuera N 0.6 segundos para que podamos tener consistencia con todos ellos. Así que vamos a dar click en el 1er 1 click play Puedo más grande, solo un poquito, y cuando haces click justo aquí, puedes ver cómo se ve eso. Entonces si saltamos atrás, se puede ver que esta imagen se está encogiendo dedo del pie 88 80. Y esto se está moviendo a la derecha en esa posición exacta que lo creamos en primer lugar. Y estos dos campos están saltando de abajo a arriba y entrando en su posición original así como este texto está cambiando en la parte inferior para que puedas ver realmente se ve bonito , limpio y liso, así. Y por último, cuando hagan clic aquí se va a escribir todo y al hacer clic, enviar mensaje va a cambiar el mensaje de texto enviado, y se va a gris este texto para que sepas que efectivamente has enviado el mensaje . Entonces eso es todo para este video, y te veré en el siguiente. 35. Formulario 8: en este video, te voy a mostrar cómo podemos crear este sencillo formulario de contacto. Entonces cuando haga clic en su nombre va a fallar, cuando haga clic en, su correo electrónico va a llenar esto Bueno, finalmente, cuando haga clic en su mensaje va a llenar el mensaje. Y luego cuando hagas clic en este icono de botón va a desaparecer, Azul se va a expandir y obtendrás un mensaje de agradecimiento. Entonces, empecemos. Entonces como de costumbre, tenemos el nuestro puerto apagado 800 por 800 pies ahorrándonos un poco de tiempo. Ya incluí el diseño, así que para inspeccionarlo un poco, y una vez más lo conseguirás en los huevos, desfilar y podrás copiarlo. Puedes hacer lo que quieras con él, básicamente usarlo para trabajo personal o comercial, y en ese archivo, podrás inspeccionarlo con un poco más de detalle si quieres, por lo que comprobar los espaciados para comprobar el texto tamaños y así sucesivamente. Entonces, empecemos. Mándame un mensaje está abierto, dice 30. Volveré demasiado pronto. Es posible está abierto, dice 20. ¿ Algún para casa? Una tecla de turno, una flecha arriba. Se puede ver su posición 20 pixels desde Enviarme un mensaje. Y este está a 40 píxeles más abajo de estos dos campos para los campos que hemos nombrado correo electrónico y el mensaje y los tres tienen exactamente la misma configuración. Y ya viste esto configurado en estos videos. Entonces lo que tenemos aquí es una mezquita está mostrando el nombre. Entonces vamos a revelar el nombre así y abajo que puedes ver tu nombre, cual va a desaparecer una vez que hagas click en él. Y es básicamente la misma historia para los tres. Ahora por las tallas. La entrada es de 300 con 70 y tenemos un espacio de 20 píxeles entre ellos. Lo mismo es para tu correo electrónico y para el mensaje justo a continuación. Si hago click en la entrada, se puede ver que es 6 20 con 1 50 tenemos el mensaje en básicamente dos filas. Si gasto la máscara así Así que eso es todo para esta configuración. Y finalmente tenemos el fondo abajo abajo. Simplemente tenemos un icono enviado regular con ah color blanco y la parte inferior es de 70 por 70 y la parte inferior es de posición. Si tan solo flote. Está a 40 píxeles abajo de todos estos campos y texto. Y por último, lo que tenemos en la parte superior es un texto de agradecimiento que va a aparecer al final porque es blanco. Déjenme tomar muestras rápidamente. Se ha convertido en golpe para que veas que es gracias. Me pondré en contacto contigo lo antes posible y si salto dentro gracias. El texto es un 30 Voy a llegar a una lo antes posible está a las 20. Entonces sólo lo volveré a hacer blanco. Bajar el cero de opacidad. Y en cuanto a la configuración, así es como se ve. Por lo que este texto de agradecimiento blanco está en la parte superior porque va a aparecer en el estado final apagado . Este fondo de animación está justo debajo de él porque este agradecimiento va a aparecer justo por encima del color azul fuera de la parte inferior. Entonces por eso el botón está aquí mismo. Después me hemos mandado un mensaje, Al, vuelve demasiado pronto como sea posible y luego éstos en orden. Entonces empecemos Y en este 1er 1 solo me voy de pie. Haz rápidamente una copia. Por lo que controla Andi. Y en ese caso, gente va a dar click en tu nombre aquí mismo. Entonces va a desaparecer de aquí, y la mezquita se va de pie. Revelarlo por sí mismo, así que va a mostrar el nombre. Después harán clic en tu correo electrónico. Entonces hagamos otra copia. Entonces tu correo electrónico vamos a bajar el Bay City 20 y vamos a mostrar la máscara algo como esto. Entonces van a hacer clic en tu mensaje. Entonces vamos a ocultar el texto de tu mensaje, y vamos a revelar nuestra mezquita así. Y por último, van a dar click en este botón en este estado. Entonces en este estado, simplemente vamos a mover el icono fuera de algún lugar por aquí y bajar la opacidad a cero. Entonces a medida que se mueve fuera del círculo, bajará el apace hacia abajo a cero, y entonces vamos a tener otro estado. Y en este estado, vamos a aumentar el tamaño fuera de este círculo. Entonces me voy a abrir y elegir la parte inferior, y podrías mantener el turno viejo y el click izquierdo en tu ratón y simplemente ampliarlo así hasta que llene todo y cuando lo haga simplemente seleccionar todo debajo de él, como así con tu tecla de turno y un amante sí pegado a cero. Entonces cuando se expanda para llenar toda la pantalla todo apagado, el resto de la información va a desaparecer, básicamente a medida que se mueve dedo azul y finalmente en el último turno de estado nd y voy a aumentar la opacidad de este gracias te texto toe 100. Y este es nuestro último estado y nuestro mensaje. Entonces eso es lo que van a recibir cuando sientan todo. Entonces, empecemos con el prototipo. Entonces, cuando un usuario hace clic en tu nombre, vamos a paso automático. Animate sale de aquí y 0.6 segundos. Ya es bastante bueno, y va a llenar todo. A continuación, van a hacer clic en tu correo electrónico, y vamos a usar la misma configuración. A continuación, van a dar click en tu mensaje. Entonces básicamente otra vez los mismos ajustes, y finalmente van a dar click en este botón así que vamos a usar paso o 20 carne. Misma configuración. Pero entre estos dos, vamos a tener el disparador de tiempo así y vamos a escoger 0.8 de aquí todo apagado. El resto de los ajustes se van a quedar igual. Y por último, sólo vamos a arrastrar todo para escuchar. Pero quita el retraso. Por lo que 0.0 presentador. Entonces obtienes cero por el retardo y sale 0.6 segundos, por lo que todo permanece igual. Entonces, ¿por qué hicimos esto? ¿ En serio? Entonces, básicamente, cuando la gente haga clic aquí, este icono va a desaparecer en el espacio en blanco. Se va dedo del pie, espera un poco, luego expande estos color azul y finalmente, que este texto se va dedo del pie aparecen en la parte superior. Entonces vamos a echar un vistazo. Voy a golpear play para previsualizar todo y ampliarlo un poco. Entonces cuando hagas click justo aquí, tu nombre va a desaparecer y el nombre va a subir de los pies aquí, diciendo, cuando haces click para el email diciendo cuando haces click para el mensaje y finalmente, cuando haces click justo aquí, icono va a desaparecer. El azul va a gastarlo y lo embalará. El texto se va dedo del pie aparece de nuevo, así que vamos a comprobarlo una vez más. Entonces tu nombre, tu correo electrónico, tu mensaje y finalmente, aquí mismo. Icon se va. El azul se está expandiendo y aparece texto tanking Ahora, obviamente, como todos nosotros fuera de estos otros ejemplos, puedes hacer esto con los colores de tus clientes. Se pueden incluir clientes. Un logotipo. Entonces, por ejemplo, distinto. Usted local puede aparecer desde aquí , puede saltar desde arriba. De verdad depende de ti, tu proyecto en particular y de tu imaginación poner este ejemplo en buen uso y hacer un buen uso de él. Básicamente, cuando lo envías de vuelta al cliente, esto es solo para que entiendas la mecánica y la lógica detrás de ella y entiendas la estructura, cómo emitió estructura todos tus elementos para que puedas lograr la animación perfecta. Entonces eso es todo para este video. Y te veré en el próximo 36. Formulario 9: en este video, te voy a mostrar esta transición rápida y agradable entre contactarme y enviarme un mensaje. Entonces cuando el usuario hace clic en contactarme, mensaje me básicamente va a colapsar y revelar toda esta información sobre el usuario o la empresa a la que quieren contactar. Y cuando haces clic en el mensaje me va con el dedo del pie. Expande estos campos de mensaje, y luego pueden ingresar su nombre, su mensaje, y luego enviar el correo electrónico. Entonces una vez más, cuando por favor contacten conmigo, todo esto se va a derrumbar. Y cuando haga clic, envíeme un mensaje. Todo esto se va a derrumbar. Entonces, empecemos. Por lo que aquí tenemos a nuestros puertos 800 por 800. Y sólo voy a mostrarles diseño terminado porque sólo tenemos a nuestros puertos. Entonces en este 1er 1 déjame acercar rápidamente un poco más. Lo que tenemos es un ícono telefónico y luego contactarme. Entonces, princesa, a los 30 cualquier turno fracturado y flecha izquierda, se puede ver su posición 20 píxeles a la derecha. Entonces eso es lo que tenemos aquí. Entonces tenemos un mensaje porque va a aparecer justo debajo de él. Como se puede ver en este segundo estado y por dentro, tenemos básicamente la misma configuración. Por lo que tenemos email icon y mensaje de texto el cual es ciencia abierta a los 30 también. Entonces cuando lo colapso, tenemos información de contacto y hemos enmascarado una perspicacia tan alta hizo esto. Si acerco un poco más, se puede ver Así tengo todos estos impuestos. Entonces está abierto, dice 20. Entonces solo un poco más pequeño que en estos títulos y tenemos todos ellos simplemente dispuestas así Y finalmente coloqué la máscara de color tan blanco con borde. O puedes colocar una máscara sin color de sin borde. De verdad, realmente no importa y coloqué la máscara justo por encima de todo como se puede ver aquí mismo . Por lo que todas estas capas de texto están por debajo y la máscara se coloca en la parte superior como veías en múltiples videos antes de éste. Y finalmente los seleccioné a todos, clic derecho y mezquita de judíos con forma. Y así conseguí esta mezquita y finalmente abajo. Tenemos la mezquita para el mensaje de nombre y los botones. Entonces básicamente todo esto que se ve aquí mismo. E hice exactamente lo mismo que con la Mezquita de Información de Contacto. Por lo que primero creé estos campos. Tan mismo como hicimos con todos los videos anteriores. Entonces el campo para el nombre uno para el mensaje y finalmente solo los botones regulares. Entonces si los amplío, puedes ver que tenemos tu entrada de nombre, tu entrada de mensajes y los botones azules de fondo de básicamente todos fuera de la misma configurada como un show haciendo en videos anteriores. Justo en este, entrada está a las 6 20 solo para que coincida con la entrada de mensajes debajo de ella. Entonces es al mismo ingenio que ese. Y para el fondo, tenemos que pelear con 70. Entonces básicamente lo mismo que todos los demás fondos. Y como dije, coloqué a la mezquita apenas a todas. Y en ésta se derrumba la mezquita, como se puede ver aquí mismo. Por lo que está justo abajo y en esta una mezquita se expande. Entonces si hago clic en él, se puede ver toda la mezquita. Soto ocultarlo, simplemente va a dejar caer la mezquita como está en el primer estado justo aquí, y cuando haces clic afuera, simplemente va a esconder todo. Y cuando lo amplíe hacia arriba va a revelar todo lo que está dentro de la mezquita y en esta se puede ver en información de contacto. Tenemos exactamente opuesto, por lo que la mezquita se derrumba y si hago clic dentro de la mezquita y la expando hacia abajo, se puede ver que va a mostrar el texto. Entonces eso es básicamente todo para el diseño. Tenemos estas dos mezquitas trabajando exactamente de la misma manera y haciendo básicamente exactamente lo mismo . Pero uno de ellos se coloca justo en la parte superior y uno de ellos se coloca debajo ahora es para la capa. Organización es que puedes ver tenemos contactarme en la parte superior porque siempre se queda en la parte superior. Entonces tenemos un mensaje porque lo necesitamos para cubrir este texto cuando salte de pie aquí en este segundo estado y finalmente tenemos información de contacto, que es esto de aquí solo porque tenemos un mensaje encima de él justo aquí, y se va para cubrir esto en el segundo estado, y luego esta mezquita que es esta mezquita para los campos se va a expandir dedo del pie hasta la cima. Por eso está al fondo. Entonces si empiezo a animarlos cuando hago clic en prototipo, se puede ver que tenemos estos dos estados. Pero sólo los voy a descomponer. Entonces cuando hagas click, contáctame va a expandir esto cuando hagas click. Mensaje me va a ampliar esto. Por lo que necesitamos dar click en el mensaje me para que se muestre esto. Simplemente voy a arrastrar dos aquí. Vamos a pisar o dedo del pie animar fácil ahora 0.6. Y finalmente vamos a dar clic en Contáctame, arrástrelo hasta aquí y usar la misma configuración. Entonces así de fácil es cablear esta cosa. Entonces cuando golpees la vista previa, solo lo voy a agrandar un poco, como puedes ver cuando se haga clic en contacto conmigo. Esta información se muestra cuando se hace clic en el mensaje me. Como puedes ver, se expande hasta la parte superior. Ocultando el texto de contacto conmigo y revelando toda esta información. Entonces cuando pudiste contactarme, va a empujar todo abajo y reveló esta información y viceversa para el mensaje me. Entonces eso es todo para este video. Y si no sabes cómo hice alguna de esta información, va a estar contenida en el desfile X, que vas a conseguir para esta sección del curso. Ercan saltar adentro. Puedes inspeccionar los espaciados por ti mismo. Si te perdiste algo como un color o el tamaño del texto o diferente, puedes inspeccionarlo y puedes copiarlo y pegarlo en tu propio diseño. También puedes usar esto para tu propio trabajo personal o comercial. Esto se puede hacer, por ejemplo. Permítanme darles un ejemplo rápido. Entonces lo que diga, Contáctame. Se puede poner una imagen de fondo detrás de ella, y cuando dice mensaje me, se puede poner la imagen detrás de eso. Entonces básicamente va a mostrar dos imágenes una al lado del otro. Aquí mismo. También puedes usar unos colores de fondo diferentes. Entonces, por ejemplo, puedes elegir un color verde para el fondo detrás. Contáctame y color azul para el fondo detrás. Envíame un mensaje para que básicamente puedas colapsar estos dos colores al lado, así que uno encima del otro, y puedes hacer eso para darle un poco a este diseño. Yo sólo quería mostrarles los huesos desnudos en la mecánica detrás de ella. Y entonces depende realmente de ti, dedo del pie ponerlo a trabajar en cualquier diseño que tengas o tengas en mente. Por lo que funciona para ti en tu proyecto particular. Entonces eso es todo para este video, y te veré en el siguiente. 37. Formulario 10: en este video, vamos a crear este formulario. Entonces cuando el usuario haga clic en, su correo electrónico va a desaparecer y luego escriba un correo electrónico y resalte el dedo del campo de entrada se vuelve verde. Lo mismo sucederá con la contraseña. Y por último, cuando tengan que repetir la contraseña, van a cometer un error. Entonces se va a sacudir, saltar de nuevo a los personajes, y luego cuando corrijan, se va a poner verde porque va a coincidir con esto, posible en la parte superior. Y por último, cuando hagan clic en crear cuenta, les mostrará éxito. Entonces, empecemos. Entonces, como de costumbre, tener el aeropuerto en 800 por 800 y están todos realmente creados el diseñado para ahorrar un poco de tiempo. Entonces en la parte superior, hemos creado el conteo, que es el sentido abierto a los 28. Después tenemos estos tres campos, y finalmente tenemos un botón abajo. Entonces para los campos, si acerco un poco más cerca, tenemos el texto más pequeño en la parte superior. Ingresa tu correo electrónico. Es sentido abierto. Y 14 tenemos una mezquita, que es la misma máscara, básicamente como viste en los videos anteriores, sobre todo en la sección del curso. Entonces tenemos esta mezquita, que vamos a revelar más adelante. Y por debajo de eso tenemos el texto, obviamente. Pero debajo de la mezquita tenemos tu correo electrónico, que es sentido abierto en el DDT luz, color gris. Y finalmente tenemos la entrada, que en este caso está en 400 por 70. Entonces si me alejo un poco, tenemos estos dos campos básicamente exactamente iguales a este 1er 1 Y finalmente tenemos crear fondo de cuenta, que tiene una mezquita y dos botones. Básicamente. Entonces tenemos el botón azul, que es este botón básico Tenemos el botón verde con la opacidad un bajado, y el color verde es el que usamos a lo largo del discurso. O es 55 D 466 Y como dije varias veces a lo largo de este curso, te pondrás este salvaje dentro de ese archivo extra. Después podrás inspeccionar todos estos elementos y copiar gatos. Koji se siente como estos colores para usarlos en tu trabajo y finalmente en la parte inferior. Tenemos la mezquita se fue al texto dentro, así que básicamente lo mismo que te mostré en algunos de los videos anteriores. Entonces tenemos Primer Estado, que es crear cuenta y Estado Final, que dice éxito y va a bajar de disposición a disposición. Entonces empecemos y vamos a duplicar esto nuestro puerto hit control de. Y en este 1er 1 simplemente vamos a enfermar sobre la ciudad Obey fuera de tu email hasta abajo. Entonces vamos a golpear control la vez más, porque en este Primer estado los usuarios van a hacer clic para ingresar su correo electrónico. Entonces tu correo electrónico se va a desvanecer. Y luego en este estado, vamos a cambiar el color de esta entrada. Entonces déjenme abrirlo rápidamente, y vamos a usar el color verde del que están abajo es para que podamos seleccionar rápidamente el cuello verde desde aquí. Entonces simplemente voy a hacer clic en el control C en este para copiar el color y donde dice entrada. Se puede dar click justo aquí en la frontera, no en la película golpeó Control V para pegarlo, y vamos a revelar nuestra mezquita para mostrar que el correo electrónico ha sido ingresado y se ha ingresado correctamente como se puede ver aquí mismo porque estos formularios puede detectar si, por ejemplo, perdiste el cardo al personaje o escribes mal, por ejemplo, Gmail o te has perdido a la hija. Algo así. Pueden detectar eso e indicar en rojo que cometiste un error. O si no lo haces correctamente pueden indicar en verde que lo has hecho correctamente. Entonces van a dar click aquí mismo en tu contraseña. Entonces básicamente lo mismo que para el correo electrónico. Entonces vamos a golpear control una D y en el pasaporte iban de pie por todos lados basándolo hacia abajo, golpear control la una vez más y luego dentro aquí vamos a revelar la mezquita, y estos puntos son conjuntos abiertos a los 40 y vamos a hacer lo mismo para el de abajo más adelante. Y finalmente tenemos dedo del pie basado el color fuera del borde de entrada. Igual que con ella con la anterior. Entonces a continuación, van a golpear la contraseña de repetición, así que vamos a duplicar esa. Por lo que cuando hacen clic, su contraseña de repetición se va de pie por todo su Bay City hacia abajo. Básicamente, vamos a conseguir el control de la una vez más y ahora en ésta se va a poner roja y van a empezar a escribir su pasaporte. Entonces primero, déjame agrandar un poco esto. Tan buen golpe 40 para que sea igual. Entonces para éste, van a empezar a teclear su pasaporte así. Y va a mostrar un rojo para la entrada y el color de amenaza es e 53 C 85 como así. Entonces se va dedo del pie básicamente mostrar que se han perdido su pasaporte porque lo ingresaron aquí y luego no lo repetían correctamente aquí mismo. Entonces vamos a duplicar este golpe controlado el y ahora en este, lo que queremos es localizar esta entrada, y vamos a dar turno y flecha izquierda para moverla. 10 pixeles del dedo del pie a la izquierda. Entonces vamos a golpear el control, ¿verdad? Una vez más. Y en este, vamos de pie básicamente moverlo de nuevo en el medio, así. Entonces cambia 10 píxeles a la derecha, y luego lo vamos a mover básicamente una vez más, o puedes dejarlo así. Entonces si quisieras sacudir en ambas direcciones. Puedes hacerlo directamente desde aquí, por lo que cuando empiecen a escribir y terminen de escribir, se volverá rojo. Después se va a sacudir a la izquierda, después de volver a su posición. O simplemente puedes hacer que se vaya a la derecha. De verdad depende de ti. ¿ Cómo quieres exhibir ese batido? ¿ En serio? Entonces en esta próxima, vamos a bajar esto. Por lo que esta mezquita podemos bajar por tres caracteres hacia abajo como así y en la siguiente cuando empiecen a escribir de nuevo, así, vamos a cambiar el color de entrada dedo del pie ese color verde para que simplemente elijas esta color. Asegúrate de que sea sí. 55 D 466 Así que básicamente es del mismo color que todos estos otros, y finalmente van a hacer clic, crear cuenta. Controla D. Y en este estado final, lo que queremos es que esta botella se vuelva verde y esta mezquita va a mostrar éxito. Así que solo asegúrate de que estén en la misma línea que están, y vamos a movernos, crear cuenta hacia abajo en la parte inferior. Entonces eso es básicamente todo para nuestros estados. Y ahora es hora de que lo hagamos prototipos, así que voy a conseguir el control. Zero y yo fuimos a acercarnos un poco más. Voy a seleccionar todo este campo. Los usuarios van a tocar. Vamos a usar auto. Animate está en fuera y digamos 0.6 segundos. Creo que va a funcionar bastante bien ahora en este próximo. Nosotros queremos tener el tiempo porque se va a la transición del dedo. Básicamente, entre estos dos son tableros y por el tiempo vamos a usar, digamos, digamos retardo de tiempo 0.8 segundos. También animar, aliviando. Y por último, usemos 0.8 segundos para que tengamos un poco de consistencia. Ahora en esta siguiente, van a dar click aquí mismo. Por lo que vamos a utilizar la autonomía de paso TZ nota 0.8 segundos. Boletín, Rápidamente. Consulta este 1er 1 Utilizamos 0.6 segundos. Usemos 0.8 en todos ellos, así que realmente depende de ti si quieres que sea más corto o más largo. Por lo que 0.8 o dedo del pie animan. Ahora en esta, vas a usar el tiempo. Por lo que el tiempo 0.80 punto ocho Fácil. Un out sobre este. Se van a tocar los dedos de los pies así o a cualquier carne relajándose. Y finalmente, lo que queremos para estos porque ahora van a empezar a temblar. Vamos a usar retardo de tiempo fuera de cero segundos porque queríamos saltar de inmediato a éste. Entonces en eso vamos a usar el tiempo DeLay 0.8. Pero vamos a usar rebote en lugar de facilidad en fuera como así y en este bien, en es la misma configuración. Por lo que veces va a 10.8. O tal vez podamos usar Yeah, usemos tu designado para ver qué hace Bounce 0.8. Y por último, para éste, no vamos a su rebote. Vas a usar easy an out porque se va dedo del pie básicamente estar en el mismo lugar que este. Por lo que va a saltar de nuevo a su posición original. Vamos a estropear zing out, y DeLay te permite 0.8 ver cómo se ve eso. Y finalmente vamos a dar clic en el botón, arrastrar su vas a pisar foto enemigo, nota fácil y 0.8 segundos. Entonces ahora que conectamos todo, vamos a comprobarlo. Ve cómo se ve que juegue en grande Da clic aquí mismo va a desaparecer. Escriba un correo electrónico y se ponga verde porque la contraseña va a desaparecer. Escriba un correo electrónico, conviértase en verde. Repetir contraseña. Como puedes ver, rebota vuelve a la posición y ahora muestra puntos originales. Ahora tenemos un pequeño insecto aquí mismo, que voy a arreglar. Pero primero echemos un vistazo a esto. Y finalmente tenemos éxito. Entonces como puedes ver, cambio el tamaño de estos puntos más adelante cuando se revelen. Pero no antes de eso. Entonces por eso tenemos esta extraña boggy para saltar una vez más mostrando toda la animación. Entonces tenemos esto. Tenemos esto y ahora echa un vistazo a esto porque estas están a los 40 y estas palabras son un poco más bajas. Entonces cuando haces click justo aquí como puedes ver el sort off ensancharse desde la primera posición del dedo del pie esta última posición. Entonces voy a saltar y arreglar eso ahora. Entonces voy a volver a pegarle en el diseño, ver dónde están. Entonces aquí están todos ellos a los 40 Voy a saltar aquí mismo. Puntos de mezquita. Y vamos a dar click aquí mismo. 40 como así. Y yo voy a hacer lo mismo básicamente, para todos fuera de ellos en el otro, nuestros puertos. Entonces aquí mismo en la mezquita, 40. Gracias. Entonces tal vez podamos hacer click derecho y luego presionar Copiar en este. Haga clic derecho en esta apariencia basada en un golpe. Y como puedes ver, cambia a 40 aquí mismo. Aquí puedes hacer lo mismo, ¿verdad? aspecto basado en clic cambia a 40. Para que no tengas que teclear cada vez. Por lo que simplemente se encuentra aquí, derecha, basado en clic. Y en este 1er 1 clic derecho basado. Por eso digo que hay que tener los mismos ajustes a lo largo de tu diseño. Entonces en todos tus puertos y tienes remolque, básicamente nombra correctamente tus capas para que todo funcione correctamente. De lo contrario simplemente no funcionará como debieras, como pretendías para mí. Entonces vamos a comprobarlo rápido. Aquí mismo. Esto se ve bien. Da clic aquí, revela Waits. Haga clic aquí. Y como puedes ver ahora, se ve correctamente va a saltar atrás, traer de vuelta unos puntos que teclear de nuevo. Como lo puedes ver. Conviértete en verde y viola. Crear éxito de cuenta. Eso es todo para este video. Espero que te haya gustado y te veré en el siguiente. 38. Archivo de Forms Xd: en este video, quería mostrarte formularios X'd file. Y estas son todas las formas que estábamos creando en esta sección fuera del curso, Sirkin, saltando rápidamente, saltando rápidamente, inspecciona algunos elementos y mencionó varias veces a lo largo de esta sección del curso. Y dentro de estos videos, realmente puedes inspeccionarlos todos para tu propio proceso de creación. Entonces, por ejemplo, olvidaste lo grande que es la botánica. Se puede saltar dentro. Se desea utilizar el mismo color, se puede copiar si se quiere utilizar el mismo frente o el tamaño del teléfono. Eso también se puede hacer. Para este ejemplo en particular, donde utilizamos imagen. A lo mejor no recuerdas cómo funcionan algunas transiciones. Puedes hacer clic rápidamente en prototipo, y puedes hacer clic entre ellos y verte, por ejemplo. De acuerdo, ¿ pisarás o animarás? Fácil ahora 0.6 segundos. Entonces cuando obtienes una vista previa, puedes ver cómo se ve eso para poder hacer todas esas cosas dentro de este archivo. Puedes copiar y pegar estos formularios en tus propios diseños, luego utilizarlos para tus clientes personales y comerciales. Y finalmente lo que quiero mostrarles es este panel de activos. Entonces cuando hago click justo aquí, tienes todos los colores justo aquí. Por lo que puedes hacer click derecho y copiar este color, por ejemplo, si quieres usarlo en su propio diseño y finalmente, si quieres cambiarlo en algún lugar por aquí. Entonces, por ejemplo, tenemos este azul en la mayoría de los diseños que puedes hacer click derecho editar y, por ejemplo, quiero usar este color morado. Como puedes ver, va a cambiar en todas partes en cada instancia donde tengamos este color azul. Por lo que realmente depende de ti lo que quieras hacer con este archivo. Tienes mi permiso completo para utilizar cualquiera de estas formas en cualquier otro elemento de este curso en tus proyectos personales y comerciales. Y en cuanto a los enlaces, por ejemplo, para la imagen y el frente, voy a dejar todos los enlaces en la lección final fuera del discurso donde te voy a mostrar el archivo de video que también vas a recibir un interior ese archivo pdf. Todos los enlaces se ubicarán dedo del pie descargar y utilizar todas estas fuentes re las cuales son gratuitas para uso personal y comercial. Entonces te veré en el próximo video 39. Texto 1: en este video, te voy a mostrar este contra-efecto con el texto. Entonces, cuando haces clic en actual o después de un cierto tiempo, va en ciclo del dedo del pie a través de todo el texto y luego aterriza en ciertos números. Entonces, empecemos. Entonces voy a usar en nuestro puerto apagado 800 por 800 on cuando usar el tipo dicho. Da click en algún lugar afuera y vamos a usar el cess abierto a los 90. Voy a escribir en cero Centro de prensa. 123456789 Así que si hago clic en algún lugar fuera y alejo, puedes ver cómo se ve eso voy a hacer doble clic, controlar un control, ¿ ves? A continuación, haga clic en el texto, mueva todo el camino hacia abajo presione, ingrese basado y luego presione Venter y basado de nuevo. Entonces si hago zoom todo el camino hacia abajo, se puede ver que escuchamos tres filas fuera de los números yendo de cero esta noche. Entonces ese es nuestro 1er 1 Y solo voy a usar rápidamente una herramienta de rectángulo. Alguien así, y lo voy a posicionar de pie aquí, así que estar perfectamente en el centro, y luego voy a posicionar esto justo encima de este rectángulo. Entonces tal vez a algún lugar por aquí, entonces voy a copiar el texto para que él controlara D. Muévelo a la derecha. Digamos que 20 pixeles así Y había controlado la una vez más y movido ese 1 20 pixel a la derecha también. Entonces voy a agrupar el texto para que él controlara G, moverlo en el centro como para que pueda en agruparlo, luego usar este rectángulo y reducir el ingenio del mismo a algo como aquí. Voy a llamar a esta mezquita, y luego sólo voy a ordenar el texto. Por lo que este es 1/3 1 de izquierda a derecha. Este es el 1er 1 Este es el medio. Entonces los voy a seleccionar a todos usando mi tecla de turno, ¿ verdad? Click y mezquita con forma. Yo sólo voy a llamar a este mostrador de mezquita y este va a ser nuestro primer estado. Entonces voy a golpear control de para duplicar esto nuestro puerto. Voy a saltar dentro del texto y voy a mantener turno y mover este primer texto a este Número siete. Algo así. Asegúrate de que intentas tow line todos estos números arriba, Así que algo como esto, entonces voy a usar el 2do 1 Y ahora no voy a usar en el primer número siete. Entonces no este, sino el segundo número siete. Entonces solo sigue desplazándote hasta llegar al número siete e intenta alinearlo con este 1er 1 igual Y finalmente, vamos a hacer lo mismo para este turd uno. Pero vamos a usar el tercer número siete, Así que vamos viejo camino abajo al tercer número siete. Entonces el último en este mostrador y aquí está, para que no tengas que usar los mismos números. Puedes usar números aleatorios. Entonces usemos, por ejemplo, 78 noche. Entonces básicamente, de verdad te ha ayudado qué números estás eligiendo y asegúrate de ver si todos están alineados, son Tal vez solo este número nueve acaba de empatar ocho. Ahora sólo un Ted. Entonces algo como esto, creo, funciona bien. Sí, este proceso es un truco. Puedes usar guías, pero estoy intentando dedo del pie mostrarte esto en lo demás poco tiempo estar. Es posible. No. Vamos a prototipo de prototipo de calor. Voy a usar paso, lo que sea lo que puedas usar el tiempo. Entonces, después de un cierto tiempo, esto va a suceder. Entonces usemos el retardo de tiempo. Yo sólo voy a usar un segundo. También animado. Seleccionado Fácil ahora en duración es a los tres segundos. Entonces veamos cómo se ve eso. Entonces después de un segundo va a empezar y llegar a 789 ahora, también puedes volver atrás si quieres, y va a contar todo el camino hasta cero. Puedes tener tantos números como quieras. Tan solo asegúrate de recorrerlos o si quieres hacer ciclo uno por uno, entonces puedes tenerlos. Por ejemplo, queremos un 789 No tienes que recorrer tres líneas de texto como hicimos en este video . Puedes hacerlo con solo uno, pero no lograrás un efecto diferente. Entonces esta es básicamente la base para ti y tus proyectos. Así que acude a partir de aquí. Entonces eso es todo para este video, y te veré en el siguiente 40. Texto 2: en este video, te voy a mostrar cómo podemos crear este efecto de texto que normalmente ves en encabezados, por ejemplo, por ejemplo, o en sitios web o en algunas áreas fuera del sitio web, donde quieres llamar la atención. Entonces cuando haga clic en, se va a acercar un poco más a la imagen y acercar el enfoque principal a la imagen en foco. Entonces es este ciervo en este caso, así que si lo remuevo una vez más, tócalo. Se puede ver cómo se ve eso, así que empecemos. Por lo que aquí tienes el aeropuerto al 800 por 800 cuándo usar el título, haz clic en Bean Nature, selecciona todo y elige sentido abierto desde aquí y para el tamaño. Escojamos algo realmente grande, por ejemplo, en 50 y posicionado en el centro. Asegúrate de que esté en el medio así, y en lugar de regular, puedes usar perno extra para que logramos este efecto de texto realmente audaz. A continuación tienes que hacer click derecho en él goto parte, luego convertir la parte del dedo del pie porque me gusta una tienda de fotos donde solo puedes mezquizar esto dentro de tu panel de capas. No se puede hacer eso en Adobe X'd hasta ahora, al menos no al hacer fuera de este video. Entonces eso es posicionarlo en el centro. No, y tal vez en la actualización futura van del dedo del pie. Agrega esa opción. Pero como dije, por ahora, no se puede hacer eso. Por lo que tuve que convertirlo en olla. Llamemos a este texto de partes como Así siguiente voy a dragar rápidamente una imagen de mi computadora. Lo voy a posicionar en la manada, y voy a llamar a esta imagen así Y voy a acercar, por ejemplo, algo como aquí. Y vamos rápidamente el Día de la Mezquita para que puedas seleccionarlos a ambos. Mezquita bastante click con forma o tu turno. Controla em o turno comandante en el Mac, y puedes ver ahora están enmascarados. Ahora hagámoslo un duplicado para que controlara el y en este, usemos nuestra tecla de turno y flecha izquierda. No traigas el tamaño y abajo mucho algo así y te condensas o los desobedecidos mejor. Entonces, por ejemplo, en algún lugar así, para que tuviéramos que ver la cabeza del ciervo así, y en este 1er 1 vamos a ir realmente, muy grande, que puedas hacer click en la imagen golpe, control de turno y a la izquierda, haga clic y agrandarlo todo lo que quieras. Entonces, por ejemplo, algo ridículo como esto, y finalmente, tiempo funciona muy bien con este gatillo. Pero te mostré cómo funciona con paso para que puedas hacer click en esto, nuestro puerto arrastrar un mango. Y en lugar del tiempo de uso superior, vamos a tener un retraso de 0.8 segundos de transición o para animar, flexibilizar y duración. Se puede configurar a parecerse a tres segundos para que pudiera jugar. Se va dedo del pie esperar un poco y luego se va a acercar un poco más el dedo del pie el foco principal de este video. Entonces eso es básicamente todo para este video, y te veré en el siguiente 41. Texto 3: en este video, te voy a mostrar cómo se puede crear este texto de carga de hecho. Entonces cuando haga clic en él va a empezar a cargar peso y luego revelar el texto por completo. Entonces peleas por favor otra vez. Se puede ver que arranca, se detiene y luego revela el texto por completo. Entonces, empecemos. Entonces como de costumbre, estamos empezando con el no puerto apagado 800 por 800. Voy a dar click en el textil. Y así he estado cargando como Así lo voy a tener sentido abierto. Y para dis ice, elegamos algo grande como 1 20 Y en lugar de regular, elegamos perno extra como este, asegurémonos de que esté alineado en el centro y asegúrate de colocarlo en el centro como So Ahora por el color, vamos a usar esos colores azules o tres E C. Seis ff Y por último, usemos lápiz porque sólo vamos a dibujar una forma bonita y sencilla. Entonces, empecemos con una línea de fondo como esta. Basta con mantener turno y tal vez pueda crear un auto como este. Así que solo tienes que hacer clic y mantener y luego liberado a algún lugar como aquí, y entonces tal vez podamos crear ocurren así y puedes ponerte técnico con esto. Puedes entrar en muchos detalles y crear tantos o tan pocos fuera de estas curvas como quieras, solo para que puedas lograr el efecto que realmente sí quieres. Entonces, por ejemplo, aquí mismo que creamos esas partes, lo que se llama, por ejemplo, forma así Y vamos a mezclarnos, ambos para conseguir nuestro Sercan, seleccione ellos click derecho y mezquita con forma, y lo que voy a hacer es hacer clic en la forma y simplemente bajarla así y vamos a llamar a esta mezquita. Entonces ese es nuestro primer estado. Vamos a golpear control DE para crear nuestro segundo estado para que puedas seleccionarlo y vamos a mover un poco esta forma. Por lo que puede sostener turno y moverlo en algún lugar como aquí. Y puedes dar click afuera y ver. Llama a tu forma se ve. Entonces si quieres hacer algunos cambios adicionales, puedes y finalmente crear nuestro tercer estado. Y en este estado vamos a revelar nuestro texto. Pero no sólo eso. Vamos a cambiar un poco esta forma, así que voy a hacer doble clic. Para que pueda saltar por dentro y pueda arrastrar algunos de estos puntos por ahí. Entonces, por ejemplo, éste y yo podemos arrastrar. Es a algún lugar como aquí. Yo puedo arrastrar este también afuera. Entonces tal vez en algún lugar como este arrastra este 12 aquí y asegúrate de que todos los demás estén siguiendo. Entonces algo así es bueno. Entonces todo se revela básicamente y se puede ver todo el texto. Entonces, no, vamos a crear un prototipo. Puedes hacer clic y elegir tap o toe cualquier meets, flexibilizando y duración ALS. Dar un segundo para el 2do 1 Vamos a utilizar el tiempo. Por lo que retardo de tiempo. Podemos usar un segundo o para animar nota fácil y un segundo para la duración. Y vamos a previsualizar lo que hemos creado. Por lo que cuando hago clic aquí, se puede ver que comienza y luego revela todo el texto. Entonces, como dije en este segundo estado, si salto dentro una vez más, realmente depende de ti cómo puedes crear el spot y puedes editarlo a voluntad. Incluso puedes hacer esto recto. Entonces, por ejemplo, si elegimos el rectángulo, puedes crear un rectángulo así como éste y luego revelarlo a la parte superior y revelar todo el texto si quieres. Pero creo que es mucho más interesante cuando estás usando mental para crear estas formas, y creo que le da mucho más valor. Por ejemplo, incluso puedes usar logotipos y combinar logotipos de clientes en esta animación de carga. Entonces, por ejemplo, cuando termine de cargar o hecho manera como aquí, puede llevar logo a la parte posterior. Se puede revelar el logotipo con el texto de carga. Entonces, por ejemplo, logotipo puede estar aquí arriba, y realmente depende de ti cómo puedes lograr esto. Pero es importante que incluyeras dentro de esta mezquita. Entonces, por ejemplo, si quieres incluir el logotipo, tal vez puedas ponerlo justo aquí justo debajo de esta forma o encima. Realmente sí importa, y luego cuando reveles todo, logo vendrá justo aquí en la parte superior. Entonces eso es todo para este video, y te veré en el siguiente 42. Texto 4: en este video, te voy a mostrar este texto de morfación, que va de una imagen a la imagen de fondo y se vuelve a colocar. Y si lo ves una vez más, puedes ver cómo se ve eso, y puedes usarlos para encabezados. Cuando tu sitio web o vueltas móviles puedes usarlas para llamar la atención sobre una parte del diseño que necesita más atención que los demás y así sucesivamente. Entonces, empecemos. Por lo que tener un aeropuerto apagado 800 por 800 fue a usar tipo textil en montañas y consentimientos útiles . A lo mejor 120 así, tal vez hasta 100 unos cuando podría ser demasiado. Y podemos usar algo así como perno extra ir desde el centro, posicionarlo en el centro. Puedo hacer click derecho en él, pensamiento se convierte en parte, y luego simplemente posicionarlo así puedes elegir texto así. Y por último, necesito una imagen de un drag and drop in image. Esta imagen es de on splash dot com, y voy a posicionarla y bajarla tamaño hasta algún lugar por aquí. Voy a llamar a esta imagen BG porque va a ser nuestra imagen de fondo. Voy a duplicarlo para hit Control D. Y esta es sólo nuestra imagen, que vamos a mezquita con este texto. Entonces así, como ambos, derecho Haga clic en mezquita con forma. Y como pueden ver, aquí realmente no pasó nada. Pero ahora viene la parte divertida. Entonces este es nuestro primer control de golpe estatal D. Este va a ser nuestro segundo estado, por lo que puedes hacer esto de muchas maneras. Puedes asumirlo en. Acercarlo. Se puede, por ejemplo, hacer así o simplemente moverlo dedo del pie sobre el área fuera más ligero. Enfócate en. A lo mejor así, podría ver cómo se ve eso, y eso es básicamente todo para la parte de diseño. Vamos a llegar a prototiparlo. Por lo que da click en su 1er 1 Puedes elegir retardo de tiempo fuera de un segundo. La transición es auto animate. Facilidad para salir de aquí y finalmente duración literalmente tres segundos. Por ejemplo, haga clic en el 2do 1 arrastrado manejado hacia atrás. Va a contener los mismos efectos, así que cuando haces clic aquí mismo, va de peso del dedo, luego te muestras este texto y revelas básicamente y luego saltas de nuevo a su lugar. Puedes hacerlo más grande o más pequeño, venir desde dentro o fuera de la materia Drillers, e incluso puedes usar la ciudad apace. Entonces en este 1er 1 arriba una ciudad off, el texto puede ser cero, y en el 2do 1 puede ser 100 por lo que realmente puede agregar al efecto, y puedes usarlo. Como dije en tus encabezados o en las áreas del sitio web o aplicación móvil, quieres llamar más atención en. Entonces, por ejemplo, puedes escribir en el nombre del producto y puedes colocar el producto en sí dentro de este texto y luego revelar el producto como, por ejemplo, ejemplo, usuario se desplaza por o cuando hace clic en algún lugar, y el siguiente estado de esa camarilla debe ser el producto revelar. Entonces puedes revelar el producto de esta manera y hacerlo un poco más interesante. Entonces eso es todo para este video, y te veré en el siguiente 43. Texto 5: en este video, te voy a mostrar este efecto de texto deformado. Puedes usar esto mientras estás cargando o cuando estás en transición, o cuando solo quieres llamar un poco más la atención sobre nuestra zona o una sección fuera de tu sitio web o una app. Entonces, empecemos. Por lo que Havenaar board off 800 por 800 va a usar mi textil en escribir juego abierto dice 100 extra negrita. Y voy a usar border sin ninguna película. Entonces si te has sentido seleccionado como de costumbre, simplemente desmarcarlo aquí. A continuación, voy a dar click derecho sobre él, parte a parte, y lo voy a colocar aquí y aquí. Entonces para estar perfectamente en el centro a continuación, vamos a crear un duplicado para que él controlara D para hacer una copia. Y en esta, vas a hacer doble clic dentro y simplemente jugar alrededor con estos puntos para poder posicionarlos en todas partes en próximo jefe Adulto como se convertirá de puntos rectos a punto de tierra para que realmente puedas jugar alrededor con él, y puedes expandirlo o colapsarlo dedo del pie como quieras. Simplemente no agregues más puntos porque eso estropeará toda la función de auto animate. Y, por ejemplo, puedes crear algo como esto, así que ordene el efecto ondulado. Por lo que se debe renunciar a todas las cartas. Entonces tal vez algo como esto, por ejemplo, y realmente depende de ti. ¿ Cuántos fuera de estos quieres crear, y qué efecto estás tratando de lograr? Entonces tal vez así? ¿ A lo mejor es lo suficientemente bueno? Sí, Y dejémoslo así. Pero tal vez hagan lo mismo aquí y finalmente en esto. ¿ Por qué carácter? Hagamos esto y tal vez hagamos lo mismo para estos dos, pero extenderlos al revés. Entonces voy a hacer clic en él y tal vez crear algo como esto, así que realmente un efecto ondulado, amable. Entonces como puedes ver, realmente sí se ve diferente a éste. Y cuando llegue el momento de hacer prototipos, simplemente seleccione todo nuestro puerto el retraso de tiempo de consumo de drogas de cero o a cualquier carne está en nuestra duración de un segundo y simplemente trayendo de vuelta una vez más. Entonces cuando hago clic en plea, se puede ver que se transforma en distritos que acabamos de crear, y se puede usar esto como dije, mientras carga. O si quieres llamar la atención sobre cierta parte de tu sitio web o arriba, puedes incorporar este efecto. También puedes hacer esto con el logotipo de tu cliente, que puedas, estates para cargar, y puedes usarlo básicamente de múltiples maneras. Puedes colocar una mezquita encima y más de esto en una imagen, así que realmente depende de ti en tu imaginación. Entonces eso es todo para este video. Te veré en el próximo. 44. Texto 6: en este video, te voy a mostrar estos efectos de texto. Entonces cuando haces clic en algún lugar va a escribir una palabra inicio. Entonces, empecemos. Entonces, como de costumbre, tenía el aeropuerto a 800 por 800 empecemos a escribir son letras. Entonces voy a escribir s usando Oh, procesa 100 perno extra con la posición en el centro, como tan controlado profundo y voy a hablar cosa t como asi asi asegúrate de que su barco alineado asi y luego golpea turno y tecla de flecha derecha para que puedes moverlo 10 píxeles a la izquierda Control. ¿ Te haces una vez más la misma tipeando a. Así que haz el mismo espaciado como tan control ¿Te haces una vez más y luego creas una R así Y luego finalmente controlas de Para crear una T como esta, puedes seleccionarlas todas. Pero lo que me gusta hacer es pedir ahí porque es más fácil para mí y luego saber cuál es cuál. Entonces, así , puedes agruparlos posicionarse en el centro así, y lo que puedes hacer es crear una bonita mezquita grande como Así posicionar esa mezquita en el centro así. He sido mezquita y se puede seleccionar todo Mezquita con forma. Y ahora todos tus personajes son mezquita así. Entonces lo que necesitamos Necesitamos un estado vacío y necesitamos un estado final. Entonces vamos a duplicar estos son tableros un par de veces. Entonces este va a ser nuestro estado vacío. Sí, t a son t y este va a ser nuestro estado final. Entonces lo que vamos a hacer, básicamente, es que vamos a saltar aquí mismo dentro de esta mezquita y sobre todos ellos hacia abajo para simplemente mantener el turno en tu flecha inferior. Entonces puedes saltar dentro de aquí y dejar justicia adentro y golpear turno en flecha abajo un par veces hasta que movamos todo afuera hacia abajo. Esto es para rt, así que S y T se van a quedar dentro. Puedes mover todo lo demás aquí abajo. Tendremos un nombre. Así son nt van dedo del pie estar abajo como así Y aquí vamos a mantener nuestro pero acaba de quitar t Y finalmente, para esta final, vamos a mantener todo como así Así Así que empecemos a prototipar. Entonces en este vamos a usar el paso o para animar snap 0.4 segundos. Y para el resto de ellos, vamos a usar el tiempo o para animar snap 0.4 segundos. Ahora queremos usar el snap porque queremos que se encaje en posición. Y si hago click en su 1er 1 click play, voy a tocar. Y como puedes ver, se meten en posición así Así que básicamente eso es todo para este video, y te veré en el siguiente. 45. Texto 7: en este video, vamos a crear estos efectos de texto cargando. Entonces si un clic justo aquí, se va a cargar y luego volver a bajar. Si vuelvo a hacer clic, puedes ver cómo se ve. Por lo que básicamente anima el contorno fuera del texto y luego vuelve a caer abajo del dedo del pie blanco. Entonces, empecemos. Entonces como de costumbre, que el aeropuerto 8 800 por 800 vaya a usar el título que he estado cargando use sentido abierto, y tal vez podamos usar 100 sika Eso parece, Sí, Sí, creo que eso se ve bien, pero judíos extra audaz. O tal vez podamos incluso elegir algo ligero. O así, por ejemplo, que muestra Bolt y vamos a elegir borde dentro en lugar fuera del campo como así vamos a dar click derecho en ella parte se convierte a pot para que podamos animarlo. Posicionarlo en el centro fuera de nuestra pizarra, así y lo que también vamos a querer es que solo voy a volver atrás un par de veces porque quiero hacer un duplicado er ella. Entonces voy a conseguir el control D así que selecciona el control D para hacer un duplicado y ahora voy a ocultar éste y convertir éste en partes. Así que convierte las macetas. Ahora los voy a seleccionar a ambos y colocarlos en el centro como así ocultar el texto original. En cuanto a la parte, voy a hacer otro policía. Tú lo eres. Seleccionarlos a ambos, y voy a usar el borde fuera de tres e c seis f f como así y quiero aumentar esa frontera a tal vez cinco. Sí, creo que eso se ve bien. Y voy a dar click derecho en él. Mezquita con forma. Entonces ahora lo que vas a hacer es simplemente mover esta de arriba hacia abajo como así incluir la carga y para la carga, vamos dedo del pie incluir sentir color blanco como así Y sólo vamos dedo del pie puede ser movido ligeramente. 1234 pixels a la izquierda o algo así. Por último, vamos a hacer control de en el aeropuerto, seleccionar todo, seleccionar todo, y ahora vamos con el dedo del pie. Mueve esto de nuevo a la posición así. Y como puedes ver, ya está mostrando el efecto y puedes hacer click en la carga y tal vez posicionarla un poco diferente. Entonces tal vez algo como esto para que puedas moverlo con tus flechas arriba y abajo y ver. Encuentra el efecto que te guste. Entonces tal vez aquí, Sí, tal vez es bueno, y también puedes hacer es colocar un texto regular encima, o incluso puedes ir más grande que eso. Puedes en todo el tamaño o aumentar el tamaño. De verdad depende de ti. Y ahora, finalmente, con la carga clicada, voy a golpear el control C porque movimos eso y voy a hacer clic en este borrado hit Control V para que tengamos exactamente el mismo texto en ambos puertos. Por lo que ahora golpea prototipo y puedes hacer tiempo. O puedes hacer Tep. Usemos retardo de tiempo de tal vez un segundo o dos animados. Facilidad para salir de aquí y duración. Vamos a darle un segundo y finalmente, vamos a traerlo de vuelta al 1er 1 para que se vea cuando podría jugar. puede ver cómo se ve, y se va hacia atrás dedo blanco. Está volviendo a subir cargando y va de vuelta hacia abajo, así que así es lo fácil que es crear. Y eso es todo para este video, y te veré en el siguiente 46. Texto 8: en este video, te voy a mostrar este efecto de tipeo. Entonces cualquier clic verás esta maldición o parpadeando, y luego se va a empezar a escribir letra por letra y y y peces. Se está volviendo a cero, y se va a desvanecer. Entonces, empecemos. Por lo que una vez más tengo en nuestro puerto, configurado en 800 por 800 cuándo usar el título Bean. Yo creo que sí. Voy a usar el sentido abierto, y voy a usar algo siendo como 100. Creo que eso se ve bien y se debilita. No utilices, tal vez hasta perno, como así posiciónate en el centro, y voy a crear un rectángulo que va a servir como mezquita. Sloan acaba rápidamente mezquita como así lo llaman mezquita así, y finalmente, voy a crear un rectángulo más. Entonces tal vez algo como esto, con la posición en el medio, usó exactamente el mismo color de relleno, y este va a ser nuestro blinker así, Así que asegúrate de que esté en el centro. Asegúrate de que esté posicionado en algún lugar afuera. Entonces, por ejemplo, tal vez aquí mismo y finalmente traer de vuelta la mezquita, seleccionar mezquita y escribir y crear mezquita con forma usando control de turno M orden shift. Comanda si estás en un Mac Así que esta va a ser nuestra mezquita. Por último salta dentro y trae la mezquita de vuelta a la izquierda para que puedas ocultar a todos los personajes. Al igual que así. Y en este 1er 1 simplemente vamos a dar click en el blinker doble tipo R tecla cero. O puedes bajar tu ciudad pagada aquí a cero. A continuación, vamos a hacer clic en el control D para duplicar el aeropuerto. Selecciona todo aquí mismo. Usa blinker. Aumentó su pastosa. El control 100 d Vendiendo el blinker otra vez. Baja el ritmo, equipo Jodi, selecciona de nuevo el blinker desde aquí. Aumenta tu pastosa. Y en el siguiente, vamos a empezar a revelar nuestro texto. Entonces usemos nuestra mezquita, revelemos a Artie sólo para escuchar, luego simplemente movimos el blinker hasta aquí. A continuación, podemos duplicar este y hacer lo mismo para que podamos empezar a tambalear. Son letras como así controlan De y podemos revelar ésta también. Por lo que habla el control. De como puedes ver, este proceso puede ser un poco tedioso, sobre todo si tu palabra es un poco más larga Pero si el efecto es satisfactorio, sobre todo tus clientes, entonces vale la pena perseguirlo. Especialmente si le estás dando esto a los desarrolladores un poco más tarde para que puedan saber efecto pueden lograr en frío un poco más tarde y qué tenías en mente para el proceso de diseño . Por lo que finalmente, una vez que haya terminado, podemos hacer una más. Entonces al igual que el parpadeo y bajar el A pasty a cero. Ahora empecemos a crear prototipos. Puedes hacer click en prototipo salto aquí mismo, y podemos usar pasos para que podamos iniciar la animación que podamos utilizar. Auto animate, fácil ahora y cero puntos. Eso es un seis segundos está aquí afuera Ahora para este, vamos a usar básicamente la misma configuración, pero espera tiempo tan tiempo, o para animar Easy. Ahora 0.6 hacen lo mismo para este, pero para éste, vamos a usar snap en lugar de está fuera. Entonces estamos usando el tiempo. Un cm de retraso, cero segundos también animan snap y 0.6 segundos. Entonces vamos a usar snap para todos ellos. Entonces vamos a moverlas. Y por último, para este último en lugar de broches de presión, vamos a usar está en fuera ahora veamos cómo se ve eso. Voy a dar click en su 1er 1 click Play. Step Somewhere va a parpadear dos veces, y va a empezar a escribir y revelar nuestras cartas y finalmente desaparecer. También puedes incluir un retraso en este último para que puedas incluir tu retraso, tal vez un segundo. O tal vez sea demasiado a 0.8. Entonces una vez más, cuando haga clic aquí mismo, va a parpadear dos veces 12 Entonces va a empezar a escribir todas las letras y va a esperar aquí y luego se desvanece. Por lo que es un buen efecto para tener, sobre todo si tienes algo, por ejemplo, en tu encabezado. Por lo que quieres llamar un poco más la atención para reducir la tasa de rebote, y quieres mantener a esos visitantes un poco más de tiempo en tu página web para mostrarles un poco más información adicional. También puedes hacer mezquita dentro de la mezquita, por lo que cuando escribes este texto, condonas, revelas la imagen de fondo y realmente las posibilidades son infinitas, y sobre todo después de que el proceso de diseño tiene terminado, los desarrolladores pueden entonces incorporar fácilmente eso al diseño en la cotización final. Perdón, porque saben lo que querías desde el primer lugar. Y eso reduce la fricción entre el diseñador, tú y el desarrollador que tiene que llamar a ese diseño. Entonces eso es todo para este video, y te veré en el siguiente. 47. Archivo de texto Xd: en este video. Yo quería mostrarles este texto Los huevos manchan lo mismo. Al igual que en las secciones anteriores fuera del curso. Tienes este archivo x'd para esta sección en particular fuera del curso, y puedes saltar rápidamente y ver las animaciones. Y también puedes saltar y ver, por ejemplo. De acuerdo, tengo las tres capas de texto dentro para que pueda saber qué hacer. También puedes saltar, seleccionar algunos colores. Se puede, por ejemplo, porque tenemos la imagen se puede hacer doble clic en la imagen y ver, Pero la coloqué para que sepas dónde se puede colocar también. Se puede revisar las ciudades obedecer de algunas capas, por ejemplo. De acuerdo, este es un 100 pero este 10 Y por último, también puedes reproducir estas animaciones para que simplemente puedas hacer clic en el primero son parte de la animación que quieres elegir hit desktop preview. Esto se va a lanzar, que lo sepas. De acuerdo, eso es lo que vi en ese video. Y luego puedes saltar dentro y luego examinarlo más y verlo por ti mismo. ¿ Cuántas fuera de estas capas necesitas? Cuales son los colores de la capa. Entonces, por ejemplo, si un clic en el dedo puntual, podrías ver que tiene borde fuera cinco, y tiene el color azul apagado para que simplemente puedas copiar y pegar eso en tu propio diseño si quieres. Y igual que con las secciones anteriores, puedes usar esto en tu trabajo personal o comercial. Entonces para ti o tus clientes, y puedes incorporarlo de cualquier manera que quieras, tienes mi permiso completo. Entonces eso es todo para este video, y te veré en el siguiente. 48. deslizador de imagen 1: en este video, vamos a crear el slider escolar, que va a cambiar entre las tarjetas. Por lo que en un clic y arrastre sobre este, se puede ver que el medio se está volviendo un poco más pequeño, y que el 3er 1 está desapareciendo por completo. Y cuando traiga de vuelta, va a volver a su posición original, y ésta va a volver a donde estaba, y ésta va a aparecer una vez más. Entonces, empecemos. Entonces lo que tengo aquí es esta tarjeta, y si la abro un poco y acerco un poco más, se puede ver que tengo este texto justo aquí en la parte inferior y la imagen está justo aquí en la parte superior. Ahora bien, si miramos aquí un poco más de cerca, se puede ver que la imagen tiene un radio de esquina fuera de 24 esquinas izquierda y derecha. Estas son las esquinas en cuestión, y para las esquinas inferior izquierda y derecha, se puede ver que el radio de esquina es cero. Si bien para el texto que está a continuación, tenemos el texto. BG, que es sólo una capa de plano blanco y capa de forma, y tiene lo contrario. Por lo que tiene el radio de esquina inferior derecha e izquierda apagado 20 para que tengamos en toda esta selección luciendo así. A continuación tenemos naturaleza Noruega, que es ciencia abierta audaz y 17. Y hemos aprendido más, que es regular la ciencia abierta a los 17. Y tiene este color azul apagado tres e. C. Seis ff Ahora por qué coloqué el texto encima de la imagen es porque si hago clic de distancia, se puede ver que tiene esta ligera sombra de gota. Y si los coloqué de manera diferente, se puede ver que ahora la imagen viene encima de este fondo blanco, y su sombra está llegando encima de este fondo de texto. Entonces por eso lo coloqué encima para que tengamos básicamente dos sombras actuando como una. Y en cuanto a la Sombra es sólo una sombra básica. Yo lo mostré ya en pocos fuera de los videos en discurso, Así que tenemos la sombra aquí fuera 03 y seis, y si hago clic en el color de la sombra, se puede ver que es completamente negro al 16%. Entonces cada vez que le pegas a la sombra para que aparezca. Obtendrás esta sombra predeterminada fuera de curso, puedes jugar con ella. Y por ejemplo, puedes incluir la concha azul si así lo deseas, o si tu cliente tiene algún otro color, puedes hacerlo también. Seguro. A click justo aquí en teclear tres e c seis f después de un centro. Se puede ver que ahora tenemos estas sombras azules correspondientes a este texto azul, pero no voy a hacer eso. Y no nos empantanemos con algunos de estos detalles. Vamos a duplicar este carrito. Entonces voy a golpear el control D y lo voy a colocar justo aquí. Golpeó turno y dejó un rocoso dos veces para poder posicionarlo a 20 pixeles de éste. Voy a dejar el tamaño responsivamente encendido como se puede ver aquí mismo, y voy a mantener turno en una de las esquinas y simplemente voy a bajar el tamaño de misma. Por ejemplo, aquí mismo, voy a dar clic aquí para posicionarlo en el medio. Tan solo asegúrate de que sean 20 píxeles de este. También quieres asegurarte de que éste esté en el medio lo es, y esta va a ser nuestra tarjeta uno, y vamos a pegarle dedo del pie para que él controlara D para hacer un duplicado yendo a posicionar este todo el camino hacia abajo. Asegúrate de que tenga la misma distancia entre su propia y esta media, y voy a llamarla tarjeta tres como así a continuación, voy a arrastrar una imagen por dentro para que puedas seleccionar la capa de imagen. Voy a localizar la imagen. Simplemente arrástrelo y suéltelo dentro. Se va a poblar en lugar de esta forma de imagen para hacer doble clic dentro y simplemente moverlo a algún lugar por aquí. Voy a cambiar el texto para que corresponda con imagen. Entonces llamémoslo un día en París, por ejemplo, así. Y por último, vamos a hacer eso para las primeras imágenes Bueno, que puedas golpear control y hacer click para saltar justo dentro. Voy a localizar esa imagen, y estas imágenes son de on splash dot com, por lo que son libres de usar tanto para proyectos personales como comerciales. Entonces eso se ve bien y podemos decir algo así como la antigua historia romana. Por ejemplo, como así y finalmente hemos sido diseñados completados. Ahora lo que tenemos que hacer es agruparlos a todos. Entonces voy a seleccionarlos todos. Controlaría a G para agruparlos y llamarlo tarjetas, porque esta tarjeta TERT en el próximo estado va a desaparecer del aeropuerto. Y cuando lo hace, va a este espacio vacío. Entonces donde no hay nuestros tableros y no podemos animarnos así. Por eso creamos este grupo para que podamos animarlos a todos en todos nuestros puertos. Primero voy a seleccionar este pie. Nuestro control de golpe de puerto disuadir duplicado. A continuación, voy a seleccionar tarjeta uno. Voy dedo del pie golpeó mi tecla de turno y con mi izquierda, mayoría click. Sólo voy a asegurarme de que sea del mismo tamaño que este medio de y voy a sostener mi turno y la tecla izquierda y posicionarlo Toby en el medio. A continuación, voy a ir de pie sobre la talla fuera este 2do 1 hasta que se reúna con el borde superior fuera de esta tarjeta de inicio , y puedes moverla para que la veas. Entonces voy a turno entero, así y finalmente moverlo al fondo también. Voy a posicionarlo en su lugar así. Y por último, voy a mover esta tarjeta número tres. Y, como pueden ver, si no lo hiciéramos porque me voy dedo del pie poner 20 picos. También turno 12 Desaparece de este nuestro puerto y entra en esta zona gris pantalla gris, que se llama Spaceport. Pero porque está en el grupo que aún contenía dentro de este nuestro puerto. Por lo que no está fuera de ella, y aún podemos animar todo adecuadamente. Por lo que cuando se trata de animación, haga clic en prototipo, puede hacer clic derecho dentro, así que haga doble clic con el ratón izquierdo. Mantener para seleccionar esta tarjeta. Voy a arrastrarlo hasta aquí. Vamos a usar drag, así que no tap, sino drag porque queremos arrastrar entre estos dos autoanimate slider es esta nación. Y para la flexibilización, puedes elegir fácil ahora para recon, dejar non. De verdad depende de ti. Y por último, para esto también podemos elegir este mismo, y podemos arrastrarlo hacia atrás. Va a contener todos los ajustes que elegimos para el 1er 1 y voy a hacer clic en vista previa, y cuando lo arrastras, puedes ver cómo se ve. Pero como puedes ver, este carrito de inicio no cambia la opacidad. Se queda al 100%. Puedes dejarlo así si quieres. Pero lo que en realidad voy a hacer es que voy a saltar aquí mismo. Haga clic en el deseo ubicado una tarjeta número tres. Voy a bajar su ciudad de paga 20 Así que cuando la previsualizamos ahora, se puede ver que una vez que desaparece, baja la opacidad automáticamente todo el camino hacia abajo a cero. Por lo que básicamente desaparece de la pantalla y cuando y traerlo de vuelta, se puede ver que empieza a aparecer y va todo el camino de regreso a 100. Entonces eso es todo para este video, y te veré en el siguiente. 49. Deslizador de imágenes 2: en este video, vamos a crear el deslizador. Por lo que al hacer clic en estas flechas en la parte inferior, las diapositivas van a cambiar. Y en esta última, esta flecha va a bajar hacia abajo sobre tu base ITI. Y si vuelvo al 1er 1 se puede ver que ahora esto está acostado en una base ity para indicar que no hay más luces a la izquierda y al hacer clic en dedo del pie perturbado uno, éste indica que no hay más leves a la derecha. Entonces, empecemos. Por lo que tengo aquí el nuestro puerto apagado 800 por 800 completado, diseñado para ahorrar un poco de tiempo. Entonces lo que tenemos aquí es una imagen. Entonces si abriste esto, puedes ver que la imagen está en 400 peso a 50 y tenemos radio de esquina en 20 en todas las esquinas. Y finalmente tenemos esa sombra por defecto aquí en la parte inferior. A continuación tenemos San Francisco desde arriba, que es sentido abierto 20 negrita y estos tres e c seis ff color. Y finalmente tenemos este texto aquí mismo, que vuelve a estar abierto desde el 20. Pero en este color gris predeterminado. Y finalmente tenemos estas dos flechas justo aquí en la parte inferior. Esta flecha derecha es el color apagado. B dos b dos b dos tan realmente ligero. Genial. Y esto dejó Tero es del mismo color. Pero pagas ciudad está en 40% Ahora. Creamos este diseño porque necesitamos tener las tres diapositivas. Si recuerdas de algunos de los videos anteriores, tenemos que tener un control deslizante completo al principio para que podamos saber dónde podemos posicionar algunos fuera de los elementos. Y también estos i rose se van a quedar fuera de este grupo que vamos a crear en un momento porque vamos a dar click. Y esto va a pasar entre el deslizador y este deslizador. Entonces necesitamos estas flechas, Toby abajo. Entonces, por ejemplo, no pueden estar aquí mismo porque van a ser cubiertos por el texto de estas luces. Además, estas imágenes son del sitio web llamado deuda a stock photo dot com, y puedes ir a ellas y descargar sus imágenes gratis. Son libres de usar tanto para uso personal como comercial y voy a dejar el link en un pdf en la lección final del discurso para que puedas acceder fácilmente a ese sitio web para que solo hagas click en el enlace y accedas a la colección fuera de sus imágenes que que tienen en su momento. O puedes usar básicamente cualquier imagen que desees para tus clientes o para ti mismo. Ahora empecemos. Voy a crear una mezquita, así que voy a dar clic en el rectángulo y dibujar una bonita mezquita grande sobre la imagen y sobre el texto puedo bajar su trato base sólo para que pueda ver qué es. Lo pondré en el medio como yo, y me voy con el dedo simplemente traer esto un poco abajo a algún lugar por aquí y hacer lo mismo por la botella uno como, Así que voy a llamarla Mezquita así, y voy a posicionarlo justo debajo de nuestras flechas. Voy a seleccionar todo a la derecha Haga clic en mezquita con forma. Voy a llamar a esta mezquita, y como pueden ver, no pueden ver estos dos deslizadores porque están escondidos dentro de esta mezquita. Pero vamos a lidiar con ello sólo en un segundo. Entonces ahora voy a posicionar flechas izquierda y derecha hacia abajo para que tuviera la mezquita en la parte superior y las flechas en la parte inferior. Ahora voy a hacer clic en esta flecha izquierda, toque mi tecla cero en el teclado para que salte de nuevo al 100 para una ciudad, y esto básicamente va a ser nuestra segunda diapositiva. Voy a dar click en el aeropuerto Control de calor D control la una vez más, y si te confundes con algo de esto, como para cada sección fuera del curso, recibirás deslizadores. Huevos desfilan, en el que se puede acceder a todos estos elementos. Y luego podrás inspeccionar aún más todo lo que no entendiste o te perdiste dentro de algunos de estos videos para que si te saltas algo, ¿te perderás algo? Siempre puedes saltar de nuevo a ese archivo y ver, por ejemplo, qué transiciones han usado qué colores he usado fondos y alguien para que tengas eso a tu disposición en todo momento, y puedes fuera de curso usar eso archivo tanto para proyectos personales como comerciales. Ahora empecemos con este. Entonces esta es nuestra tercera bola vamos a primero dar click en esta flecha derecha golpeó cuatro en mi teclado para bajar la opacidad a 40 Voy a saltar dentro de la mezquita y en esta. Lo que queremos es si salto atrás. Entonces este es el medio. Este es el 1er 1 y este va a ser nuestro 3er 1 Así que empecemos. En realidad, desde el inicio desde el 1er 1 me voy de dedo bajó el bajo a 40 y vamos a mover esta mezquita en medio. Pero voy a mantener mi tecla de turno como para que también puedas usar guías. Pero es más fácil para mí de esta manera. Voy a seleccionar el número dos o el número tres y los voy a mover hasta que se encuentren con el borde derecho fuera de esta imagen. Al igual que así. Después mantenga pulsado el turno 12 con mi tecla de flecha derecha para mover 20 píxeles a la derecha y una vez más porque están en el grupo y dentro de la mezquita. Si un salto dentro, se puede ver que todos ellos están contenidos dentro de este nuestro cumpleaños no van al pasaporte porque están dentro de este grupo de mezquita? No. Entonces esta es nuestra primera línea. Y como pueden ver, ya no podemos ir a la izquierda. Porque este es el primer deslizador. Este es el segundo deslizador. Y por último, este es el tercer deslizador. Entonces movamos la imagen número tres a su lugar. Sólo estoy sosteniendo turnos hasta que se encuentre, así, va a seleccionar la tecla de flecha izquierda todavía mantenga presionada hasta la carne justo aquí. Todo su turno 12 para mover 20 píxeles a la izquierda. Y básicamente nos queda con este slider. Ahora vamos a prototipear todo. Entonces lo que en realidad voy a hacer es dar click en esta flecha aquí mismo. Entonces, ¿puedes acercarte un poco más para poder verlo? ¿ Arrastrarlo hasta aquí? Vamos a dar un paso o un dedo del pie animar. Fácil ahora y 0.4 segundos, creo que funciona muy bien. Ahora, en este, vamos a dar click en esta flecha izquierda. Arrástralo hasta aquí, usa el mismo efecto, click en este arrastre aero derecho para escuchar, usa el mismo efecto, y finalmente, en uno perturbado. Sólo necesitamos animar esta flecha de turd porque va a ir por aquí, y esta correcta no va a hacer nada igual como esto. 1er 1 justo aquí. Entonces cuando hago clic aquí golpear, jugar y hacer clic en estas flechas, se puede ver que transita muy bien a aquí. También puedes agregar algunos efectos más. Entonces si recuerdas de uno de los videos anteriores, puedes bajar la opacidad de estos deslizadores a medida que se van yendo. Entonces, por ejemplo, en este medio, como se puede ver aquí mismo, cuando se quiere ir a la derecha, puede bajar el ritmo a medida que va hacia la derecha, y cuando salta hacia atrás a ella, puede traerlo de vuelta al 100%. Y va a cargar las bases fuera de este giro uno y así sucesivamente, para que realmente puedas jugar junto con él. También puedes crear tarjetas, como hicimos en uno de los videos anteriores, para que puedas llevar toda esta información en una sola tarjeta, y luego puedes deslizarlas por dentro y por fuera. Básicamente, realmente depende de ti y de tu proyecto. Entonces eso es todo para este video, y te veré en el siguiente 50. Deslizador de imágenes 3: en este video, te voy a mostrar este slider. Por lo que al hacer clic en esta flecha, estas imágenes van a cambiar. Este texto va a cambiar así como el color de fondo. Por lo que de nuevo en un acantilado, se puede ver todo en acción. Entonces, empecemos. Entonces lo que tengo aquí es un aeropuerto apagado 1000 por 600 porque quería crear en nuestro puerto un poco más ancho para éste. Y aquí tenemos esta siguiente configuración. Por lo que tenemos carpeta de imágenes, carpeta de texto era, que es esta flecha inferior, y tenemos B G, G dos y G tres, que son solo diferentes colores de fondo para diferentes diapositivas, porque vamos a tener tres diapositivas ahora. Empecemos con el texto porque es mucho más sencillo. Entonces tenemos esta visita Londres, que está abierta, dice 100 regular, y tenemos mezquita de texto. Ya viste esta mezquita en múltiples videos en este curso, pero básicamente creé estos tres textos con una mezquita sobre ella. Entonces si escondo la mezquita, se puede ver cómo eso y estos textos se ven como si simplemente estuvieran colocados aquí en la parte superior. Y al hacer clic en esta flecha para cambiar las diapositivas, van a deslizarse hacia abajo para revelar el siguiente texto. Y van a aterrizar exactamente en la misma posición que ésta. Ahora los tres textos tienen dos líneas de texto, por lo que se van a complementar muy bien entre sí. Ahora por las imágenes. Las cosas son un poco más complicadas, pero nada demasiado importante. Tan correcto. Tres. Aquí tenemos dos imágenes, así que imagen quiere una imagen para ahora imagen una, que es esta parada. Uno tiene dimensiones en 1 61 con 1 92 y solo quiero mencionar una vez más muy rápidamente. Tienes este deslizador en tus deslizadores, huevos el archivo para que puedas acceder a él en cualquier momento. Y mira estas dimensiones. Mira las posiciones. De verdad depende de ti si queremos hacer eso y saltar dentro y ver qué hice. Las imágenes son una vez más de eso es el stock photo dot com, y dejaré el enlace a ese sitio web en la lección final fuera del discurso, Sir puede acceder fácilmente a estas imágenes. Ahora esa es la primera imagen, y la segunda imagen es a 15 que a 56. Posicioné la imagen número uno encima de la imagen número dos. Puedes incluir sombras si quieres. Pero no incluí ninguna sombra en este ejemplo. Y estas dos imágenes, si las selecciono, están ubicadas en el centro fuera de este nuestro puerto. Entonces en el centro así. Entonces básicamente exactamente el mismo espacio que tienes aquí arriba es exactamente el mismo espacio aquí en la parte inferior de estas imágenes ahora por debajo de ellas, tenemos número de imagen para, uh si abro la carpeta. Imagen número tres en la imagen número cuatro. Exactamente lo mismo. Configura exactamente las mismas dimensiones. Exactamente el mismo espaciado. Entonces todo es exactamente igual. Básicamente, creé uno y dos los duplicé para crear tres y cuatro y duplicé eso una vez más para crear cinco y seis. Por lo que se puede ver estos son cinco y seis también. Ahora todos ellos están ubicados aquí mismo para esta primera diapositiva, y vamos a cambiar sus posiciones. Solo quería mostrarte cómo estaba estructurado todo, así que básicamente eso es todo para toda la estructura. Esta flecha se encuentra a 40 píxeles de este borde inferior y se encuentra en el centro, muchas veces nuestro puerto. Y eso es básicamente todo. Entonces ahora empecemos a animar. Entonces para esta primera diapositiva, primero duplicemos todo para las tres diapositivas. Por lo que hit control de control de. Entonces ahora tenemos tres diapositivas, y eso es exactamente lo que necesitamos. Porque cuando la gente haga clic, esta flecha va a cambiar a esta segunda diapositiva, y va a cambiar a esta tercera diapositiva ahora para esta. Lo que queremos es que queremos estas imágenes Toby abajo, y una de ellas va a ir arriba. Pero primero trabajemos con este 1er 1 Así que voy a la posición dos y tres justo debajo. Ahora. Todas estas carpetas se encuentran dentro de esta carpeta principal. Por lo que 12 y tres dentro de esta principal. Porque si no lo hicimos así cuando los muevo, ellos sólo van a ir al zócalo y no se van a quedar dentro fuera, consternó nuestra tabla. Y eso no es algo que queremos. Por lo que para este 1er 1 localicemos todos abajo. Entonces este es el número tres. Este es el número dos, como puedes ver, no están saltando al zócalo porque aún están contenidos dentro de esta carpeta de imágenes principales . Ahora, para estos, simplemente voy a mover esto un poco hacia abajo, luego mover un poco la carpeta entera fuera del número tres hacia abajo y hacer lo mismo para el número dos. Entonces solo lo voy a mover hacia abajo y tú puedes mover éste hacia abajo también, solo para que puedas lograr esa mosca en efecto si quieres. Ahora, para este 2do 1 lo que queremos, queremos el número dos Toby ubicado abajo. Pero déjenme borrar rápidamente este, Billy, éste también. Y ahora voy a duplicar este primero nuestro nacimiento porque ya creamos estas imágenes . Entonces no repetirnos, localice el número para agarrarlo, sostenerlo , cambiarlo, moverlo hasta que se encuentre con el borde superior de esta imagen. Así Así Así Así. Entonces cuando llega a cero, y como pueden ver, ahora tenemos esta imagen que sobresale. Pero puedes quitarlo de la carpeta, mantener pulsado el turno, colocarlo en, desplazarlo así y luego volver a mover a la carpeta número dos. Y ahora tenemos que mover el número uno haciendo exactamente las mismas cosas. Entonces lo estamos moviendo hacia arriba y yo voy a mover este hacia arriba. Ah, mucho como así. Y una vez más, puedes mover toda la carpeta hacia arriba. De verdad depende de ti Qué tan grande fuera el efecto que quieres lograr en este caso. Ahora lo que necesitamos, necesitamos cambiar el color de fondo para que simplemente puedas por toda la Bay City fuera de éste , y va a cambiar a éste. Yo así y necesitamos cambiar el texto. Por lo que texto mezquita. Y esta es la arquitectura. Tan gran arquitectura. Es éste simplemente va a moverlo así hasta que estén todos alineados y ciudad de la historia, sólo vamos a sacarlo del camino. Por lo que ahora tenemos este texto en su lugar. Entonces eso es todo para el deslizador número dos. Vamos a moverlo a lo largo. Este es el deslizador número tres, y básicamente vamos a hacer exactamente lo mismo. Vamos a bajar su ciudad paga del 2do 1 localizar este texto, bobs y clubes van a entrar en disposición. Gran arquitectura. Vamos a sacarlo del camino así. Y por último, trabajemos en nuestras imágenes. Entonces número tres, simplemente puedes moverlo así. Y por último, éste. Puedes agarrarlo, arrastrarlo, colocarlo en su lugar así traerlo de vuelta y ahora hacer lo mismo para el número dos. Entonces, primero dibujemos la carpeta entera así, y luego simplemente puedes posicionarla en algún lugar por aquí. Entonces eso es básicamente todo para la parte de diseño. Ahora vamos a prototiparlo a prototipo. Todo es realmente sencillo porque sólo nos vamos a centrar en esta flecha porque los usuarios van a hacer clic ahí para que la transición suceda. Entonces vamos a hacer paso o a animar, relajándonos un segundo, y vamos a hacer lo mismo para éste. Y como no tenemos al máximo héroe Togo de vuelta, simplemente vamos a trabajar con esta flecha única. Por lo que cuando hago clic disperso un clic de vista previa y cuando hago clic en esta flecha, se puede ver esta bonita transición. Por lo que las imágenes texto en movimiento aire está cambiando, y este color de fondo también está cambiando. Por lo que para hacer click una vez más puedes ver cómo se ve eso. Entonces si saltamos al 1er jugador de 1 M atrás un poco más rápido, se puede ver así que estas imágenes sólo tienen un poco fuera retrasado. Por eso los separamos. Entonces cuando están entrando en su lugar, se puede ver que se van. Por lo que este 1er 1 va 1er 2do 1 está siguiendo y haciendo exactamente el mismo movimiento. A continuación, las imágenes están entrando en su lugar para que puedas ver aquí mismo. Entonces eso es todo para este video, y te veré en el siguiente. 51. Deslizador de imágenes 4: en este video, vamos a crear este deslizador de imagen. Entonces al hacer clic en la flecha el texto va a cambiar y esta imagen va a apelar arriba y lejos. Y por último, cuando haga clic aquí, retrocederá y este texto retrocederá. Y estas flechas también se desvanecen para indicar que no hay más deslizadores al lado de la muerte. Por lo que no se puede hacer clic aquí. Como puedes ver, no pasa nada porque no hay más deslizadores De esa manera tienes que hacer clic aquí y luego puedes ver todo fuera de las diapositivas. Entonces, empecemos. Por lo que para este video, esto está configurado. Por lo que tenemos el aeropuerto en 1000 por 600. Entonces tenemos esta disposición. Entonces tenemos el texto justo aquí. Flechas, esa imagen, una imagen para ser G, que es primer fondo y digital, que es el segundo fondo. Y van a cambiar entre estas dos diapositivas. Entonces para el texto, si hago click en nuestro proyecto, se puede ver que es sentido abierto 100 tenemos la mezquita de texto, por lo que misma mezquita, como usamos en básicamente una mayoría de los videos de este curso, pero el diferencias en lugar de ir de arriba a abajo, ahora va de izquierda a derecha. Y tenemos estos dos textos correspondientes a las imágenes que vas a ver en la pantalla abajo que tenemos la flecha, por lo que tiene flecha derecha y tenemos flecha izquierda e izquierda. Tero es 40% de pastoso, como se puede ver porque, como dije, indica que no hay más toboganes a la izquierda. Entonces tenemos imagen uno en tuba antes de que llegue a ellos. Yo solo quiero mostrarles que aquí están nuestros antecedentes. Entonces van a cambiar entre las diapositivas ¿como qué? Las imágenes. Tenemos sólo una mezquita cuando la imagen así básicamente exactamente la misma configurada que para este texto . Entonces si lo abro, se puede ver que tenemos el texto y tenemos el área de la mezquita en la parte superior. Entonces pasó lo mismo aquí. Pero en lugar de crear el área de la mezquita, primero creé un rectángulo en blanco usando esta herramienta de rectángulo posicionarlo Toby alineado con parte superior inferior y el borde derecho y le di un poco de espaciado aquí a la izquierda haría policía tu it y en el ejemplar inferior. En nuestra imagen de caso, incluí la imagen mientras el estado de copia superior lleno de color. Entonces nada realmente cambió su y simplemente seleccioné a ambos click derecho y forma enmascarada lo hago duplicado y creamos nuestra segunda imagen, que es esta imagen de aquí mismo. Y para mostrar esa imagen, primero necesito ampliar esta mezquita. Entonces sé que mi directiva es de 600 en ingenio. Entonces solo voy a teclear 600 así y asegurarme de que está llegando a la cima así para que puedas verlo así. Y esa es básicamente nuestra segunda imagen. Entonces si hago clic a través de ellos, se puede ver cómo se ven, así que básicamente van a cambiar entre las diapositivas. Una vez más, se puede acceder a esto en los huevos, profanar para esta parte del curso, y se puede explorar un poco más para ver estos tamaños para ver estos espaciamientos a es. Si te perdiste algún elemento, también puedes ver eso. Entonces empecemos a nieve a hacer nuestro diseño configurado para la animación, así que voy a seleccionar el soporte hit control D para hacer una copia. Y en este, sólo voy dedo del pie primero mover el texto. Por lo que sólo voy a dar clic en estos textos de fondo moviéndose a lo largo. Entonces con turno y tecla de flecha izquierda hasta que se encuentre así Y entonces voy a mover este texto izquierdo todo el camino fuera del camino así. Entonces me voy de pie sobre el BG o pague ciudad Así opacidad de este fondo como así y finalmente voy a cambiar estas flecha. Por lo que este va a estar en el 40%. Este va a ser 100%. Por lo que en esta etapa, indica que no se pueden hacer clic en los derechos. Y en esta etapa indica que no se puede hacer click a la izquierda. Entonces, ¿cómo vamos a hacer esto? Es realmente simple. Simplemente vamos dedo del pie creado esta mezquita. Entonces déjenme dar clic en la mezquita de esta imagen número uno, y sólo voy a sacarla del camino así. Y si hago clic en algún lugar afuera, se puede ver que esta imagen se está mostrando y vamos a ver cómo se ve eso. Entonces básicamente, en este 1er 1 Vamos a hacer lo mismo, pero sólo vamos a ir al fondo. Por lo que en la imagen número dos en el primer ligero, solo voy a dar clic en la mezquita y llevarla todo el camino hasta el fondo hasta se encuentre con el borde inferior para que lo hagamos una vez más. Entonces voy a ir todo el camino hasta aquí. Haga clic en algún lugar fuera y se puede ver que se está mostrando todavía. Pero puedes bajar sus básicamente 20 y vamos a bajar los básicamente 20 aquí este ligero. Entonces básicamente se desvanece a medida que va. Entonces no, podemos mostrar la imagen número uno. Todo se ve correctamente. Entonces ahora se trata de prototipos, prototipos rápidos, y sólo nos importan estas flechas para que pudiera mantener el control para hacer clic dentro de esta flecha. Voy a arrastrarlo con facilidad ahora dos segundos, o para animar, y vamos a tu paso y finalmente dispuestos a usar el mismo efecto volviendo atrás. Si crees que el efecto dura demasiado tiempo, puedes bajar estos, pero realmente depende de ti. Voy a golpear la vista previa aquí mismo en grande la misma. Y cuando hago clic en esta flecha, se puede ver que tenemos este bonito efecto de deslizador. Las flechas están cambiando. El texto está cambiando. Va de izquierda, ¿verdad? Perfectamente Flecha Codus. Se puede ver que tenemos exactamente el mismo efecto yendo al revés para que realmente puedas cambiar entre ellos y ver cómo se ven. Realmente creo que se ve bien y el color de fondo cambia realmente. También podemos seleccionar el color de fondo, por ejemplo para ser uno de estos. Por lo que se corresponde mejor con el diseño general. Pero creo que se ve bien. Entonces eso es todo para este video, y te veré en el siguiente. 52. Deslizador de imágenes 5: en este video, voy a mostrar cómo puedes crear este slider. Por lo que al hacer clic en este punto de paginación va a cambiar, el texto va a cambiar. Las imágenes van a transitar entre sí. Al hacer clic en esto, uno va a cambiar hacia abajo. También puedes volver atrás, ver cómo se ve eso. Y por último, cuando llegas, removieron uno. Al hacer clic en, se va a revelar y el texto va a bajar en el medio. Entonces, empecemos. Entonces aquí, aquí en nuestro tablero apagado 1000 con 600 parecen como en algunos videos anteriores. Y si salto dentro, se puede ver que tenemos estos dos textos separados. Ambos están abiertos manda 100 regulares, pero este tope uno está forrado a la izquierda, y este de abajo está a la derecha, alineado en un justo posicionarlos una cubierta del dedo al azar, alguna porción fuera de la imagen, por lo que hay realmente no pasa mucho aquí. En cuanto a las propias imágenes, cubramos primero la paginación. Es sencillo. Tenemos solo tres puntos justo aquí, así que los puntos están a los 16 donde 16 1er tiene tanto sensación como trazo. Ambos tienen este color 70 70 70. Tan gris oscuro, este segundo círculo tiene el campo fuera borde blanco fuera de este color 777 y finalmente circula tres es exactamente lo mismo como círculo a través de Ahora. En cuanto a las imágenes, tenemos estas tres imágenes y creé esta forma con 10 puntos. Por lo que 10 lados en este cartel Kout y yo simplemente usé este Pollock suave dibujar un polígono click 10 aquí mismo. Y conseguí esta forma, y en ella simplemente pegué la droga arrastrada y se me cayó una imagen. Entonces si selecciono rápidamente una imagen de un, selecciono ésta y simplemente la arrastro y la suelto dentro, así es como coloqué la imagen aquí mismo. Nadie y dos son básicamente iguales, y vamos a cambiar el texto. Pero este 3er 1 es un poco diferente. Entonces básicamente tenemos esta forma igual que una imagen a una imagen tres. Pero no incluimos ninguna imagen dentro de ella. Es sólo una forma básica. Como se puede ver aquí mismo, esta imagen es la imagen de fondo. Entonces cómo hice esto, déjenme rápidamente en grupo esta mezquita Ahora esta imagen va todo el camino hacia atrás para que se sienta todo nuestro puerto y esta forma se queda donde está. Y básicamente los seleccioné a ambos, derecho Click mezquita con forma y puedo rápidamente he sido mezquita, y básicamente, esto es lo que vamos a tener como mezquita para que básicamente puedas moverla como lo harías con estos dos imágenes aquí mismo. Pero básicamente, así de fácil es crearlo. Si estás confundido. Como dije varias veces a lo largo de este curso, se puede acceder al archivo. Entonces sidras imagen archivo dot eggs D. Y va a ser en tu paquete que vas a descargar con este curso, y también puedes acceder a todos estos elementos. Se pueden inspeccionar más a fondo. Puedes hacer click a través de cualquier cosa con la que estés confundido. Entonces básicamente para ayudarte junto con estos videos. Entonces ahora empecemos con nuestras animaciones. Entonces para este 1er 1 simplemente vamos a tener la imagen uno y dos. Perdón, la imagen dos y tres se mueven abajo. Entonces sólo voy a sostener mi tecla de turno y flecha inferior, y es importante que estén en la misma carpeta, porque de esa manera se van a quedar dentro de este nuestro puerto y no entrar al beisbol. Mencionó esto varias veces a lo largo de estos videos. Ahora selecciona el control de golpe aeroportuario D. Y ahora, cuando duplicaste, ahora tecleemos ese segundo texto. Por lo que este ir tipo de dedo en, rodar en estas no son las marcas reales, por cierto. Simplemente hice algunas de estas cosas. Voy a posicionar la imagen número dos en el medio, algunos solo manteniendo el turno en mi tecla de flecha arriba hasta que llegue al centro. Y en esta, sólo vamos a mover este número uno todo el camino hacia arriba. Por fin nos vamos a dar click en esta paginación y vamos a dar click y dar click aquí para seleccionar el mismo fallido. Y para el círculo uno, simplemente vamos a seleccionar el color blanco. Entonces eso es todo para este 2do 1 Vamos a crear un turno uno. Entonces en este agitado uno, déjame escribir rápidamente aquí así y simplemente voy a mover este texto de la misma manera y aquí se va a escribir en la tabla. Entonces como puedes ver este está escribiendo de izquierda a derecha. Este está escribiendo desde la luz, ¿verdad? A la izquierda. Realmente no importa. Podrás tenerlos de tipo de voto desde el centro. De verdad depende de ti. Pero me gusta mantener las cosas simples solo si puedo. Por lo que solo estoy moviendo esta imagen Número tres a su lugar. A imagen en movimiento Número dos Fuera del camino. Este va a ser de este color, y el 2do 1 va a ser blanco. Entonces eso es básicamente todo para este. Y ahora hagamos una final. Entonces vamos a correr rápidamente a través de ellos antes de que lo hagamos. Cuando la gente haga clic en estos puntos, van a cambiar entre estas tres imágenes, y van a poder subir y bajar a través de ellos y ver estos productos. Y por último, cuando hagan clic en este, van a revelar y averiguar básicamente qué es en un poco más de detalle. Por lo que sólo voy a mantener el control, haga clic en esta mezquita para seleccionar esta mezquita llamada Imagen tres, y sólo voy a simplemente girarla un poco. Entonces algo como esto solo usando mi clic izquierdo del ratón y en una de las esquinas. Sí importa cuál se puede sostener. Desplazarse viejo y a la izquierda. Haga clic en el ratón para escalarlo de manera uniforme y simplemente arrástrelo hasta que cubra todo nuestros puertos. Entonces en algún lugar por aquí es lo suficientemente bueno. Tan solo asegúrate de no ver el blanco alrededor de las esquinas. Después puedes hacer clic cuando se va a revelar toda la imagen. Ahora vamos a seleccionar a estos dos, y simplemente voy a moverlo por aquí. Asegúrate de que se encuentren con barco en el centro como así y bordes como este llamado turno 12 tal vez, tal vez en por algo como esto. Agruparlos. Entonces controla G este medio, este medio y me voy dedo del pie unde agruparlos como así, Y ese es básicamente nuestro diseño terminado. Déjenme hacer realidad rápidamente lo que hemos hecho. Por lo que hemos empezado con este. A continuación, vamos a pasar a ésta y a continuación, vamos a pasar a ésta, y finalmente, y finalmente, cuando hagas click en esta imagen va a ocultar una paginación y revelar toda la imagen, y este texto va a ir en medio. Entonces ahora empecemos a proteger. Y cuando estamos en la creación de prototipos, no quería crear mezquitas para este texto. Yo sólo quería que vieras que también hay esta opción. Usted vio un montón de mezquitas en estos videos en el discurso. Entonces si quieres dedo del pie, simplemente puedes incluir una de la mezquita. Entonces ya sea uno viniendo de un costado o viniendo de la parte superior Lo viste en todos estos videos. Ahora es rápidamente Creek justo aquí. Entonces voy a dar click en este medio, arrástrelo hasta aquí. Entonces este estado segundo estado, vamos a ti Paso auto. Animate está en fuera. Y usemos, por ejemplo, dos segundos. Creo que eso va a funcionar bastante bien. Ahora vamos a dar click en esto. 1er 1 va a usar exactamente los mismos ajustes. Da click en el 2do 1 me gusta y por último, vamos a dar click en éste si quieres volver atrás. Y si quieres revelar esta imagen, vamos dedo del pie klik justo aquí en esta mezquita y arrastramos su mango azul Te paso o dedo del pie animan fácil ahora a dos segundos. Y ahora vamos a previsualizar y ver qué hemos creado Así que en una vista previa rápida, se abrirá todo. Y como puedes ver, puedes dar click aquí mismo. Cambiará en porque son dos segundos. Nos da tiempo de sobra para ir entre estos dos textos y esta imagen. Como puedes ver, se ve realmente bonito y suave y fácil. Y finalmente, cuando se trata de éste, podemos hacer click va a rotar, revelar la mezquita, y va a bajar a ésta. Entonces si vuelvo a cambiar a éste, o si vuelve a hacer un clic, puedes ver que se ve realmente suave porque creamos esa duración fuera de dos segundos. Por lo que realmente muestra el efecto muy bien. Se puede jugar por ahí. Obviamente, no quise incluir ningún detalle de diseño porque puedes crear todo tipo de texturas aquí mismo. Puedes agregar algunos elementos más fuera. Ejemplo. Algunas flechas o círculos en el fondo. De verdad depende de ti cómo quieres condimentar este diseño. Yo solo quiero mantener las cosas simples, y como mencioné varias veces se puede acceder a este diseño. Se puede utilizar con mi permiso completo para proyectos tanto personales como comerciales. puedes adaptarlo como quieras. Puedes incluir o eliminar cualquier cosa que quieras. Solo asegúrate de tener todos los nombres de tus capas. Uh, consistente y nombrado consistentemente. Entonces, por ejemplo, puedes tener la imagen 123 aquí mismo. Pero imagen 246 Aquí mismo. Las cosas simplemente no funcionarán correctamente como deberían. Entonces eso es todo para este video, y te veré en el siguiente. 53. Deslizador de imágenes 6: en este video, voy a mostrar cómo puedes crear este slider. Entonces cuando haga clic aquí mismo, verá que esta barra de proceso va a lo largo, cambia a este texto así como a esta imagen, y finalmente cambia a tercera imagen así como al texto turd. Entonces, empecemos. Entonces lo que tengo aquí es el aeropuerto fuera 1000 con 600 déjame mostrarte rápidamente el set up. Tenemos el explore nuestras habitaciones, texto justo aquí la parte superior. Es sentido abierto 36 audaz. Siguiente. Debajo de eso, tenemos la mezquita, que es la perspicacia de las imágenes, y vamos a llegar a ella en un segundo. Pero antes de eso, tenemos en blanco el progreso y el progreso. Ahora el espacio en blanco Progreso es justo esta barra justo aquí en la parte inferior. Fuera de la imagen y el progreso es el de arriba. Por lo que actualmente está en un píxel con mientras los problemas en blanco llena todo el ancho fuera del aeropuerto en 1000 y su altura en cuatro píxeles, y si hago clic aquí mismo, se puede ver que es una realmente ligera genial off DBT BTB. Y a medida que nos movemos por los toboganes, este azul va a gastarse y sentir más todo el progreso. A continuación tenemos imágenes. Por lo que creamos estas imágenes. Por lo que simplemente uso la herramienta de rectángulo Dibuja un rectángulo arrastrado y caído imágenes dentro e hice tres copias. Y por último, se trata de una mezquita con sólo el color en la parte superior. Entonces es este color e b e b e b. Así que una vez más realmente luz genial. Seleccioné todos ellos, click derecho y una máscara por su forma. Entonces por eso se ve esta mezquita y por el momento todas ellas están ubicadas en el mismo espacio. Pero vamos a jugar con él en tan solo un segundo. Y finalmente tenemos estos textos aquí en la parte inferior. Por lo que todos son iguales. Este está en medio. Y estos estos están a la izquierda y a la derecha. Y si salto por dentro, se puede ver que este texto en la parte superior está todo procesado 20 negrita y es azul a las tres e. C. C. Seis ff Y finalmente, este es sentido abierto. Regular a los 20 en este color gris regular apagado 70 70 70. Entonces eso es básicamente todo para nuestra configuración de diseño. Y una vez más, como en videos anteriores, si no recuerdas todos los detalles, si te atascas en algún lugar, puedes echar un vistazo a los deslizadores de imagen, los huevos se desfilan y dentro de ella puedes encontrar este encendedor y jugar con todos los detalles de los que hablo en este video para que puedas seguir junto con el video así como con los archivos de práctica. Entonces, empecemos. Voy a crear una copia así que va a golpear el control D y en esta copia, ordenemos primero algunas de estas imágenes. Entonces voy a saltar del dedo del pie dentro de la mezquita. Voy a mover estas dos imágenes, así que simplemente voy a seleccionar imagen a una imagen tres mantenga presionado el turno y la tecla de flecha derecha en mi teclado. Yo sólo voy de dedo hasta ver que se rompa así. Ahí es donde sabemos que están en el extremo derecho de nuestro puerto, y debido a que están dentro de la mezquita, que es básicamente una carpeta, quedarán dentro de este nuestro puerto y no entrarán por dentro del zócalo. Entonces este es básicamente nuestro primer ligero, y se va a iniciar Cuando haga clic en esta habitación clásica, voy a conseguir el control D Y en esta, todo lo que tengo que hacer es extender la barra de Progreso. Por lo que solo voy a dar clic aquí y escribir 1000 como así. Y como puedes ver, se siente todo nuestro puerto como así a continuación, vamos a crear una copia. Entonces voy a dar clic aquí mismo, golpear control D, Y en este, vamos a hacer algunos cambios. Entonces lo primero lo primero barra de progreso, trayendo de vuelta dedo uno. Al igual que así. Y vamos a dar click aquí mismo. Haga clic en llenar tres e c seis ff para cambiar el color de este texto dedo del pie azul. Y voy a dar click aquí mismo. Cambia el color de este texto a este gris. Por lo que una vez más, 70 70 70. Y esto es para indicar que la gente ha hecho clic aquí mismo. Pero vamos a hacer un disparador de tiempo Justo, aumentar un poco la velocidad, pero también puedes jugar con tap. Por último, saquemos estas imágenes fuera del camino para que pueda seleccionar la imagen uno y dos tecla de control Holdeman Hold, shift left. La mayoría hace clic y posicionarlo aquí. Entonces se va a cambiar a habitación familiar, click en el aeropuerto, golpear Control D para hacer otra copia, y voy a sentir la barra de Progreso. Entonces 1000 como así? Por lo que se siente toda la pantalla. A continuación, vamos a hacer otro duplicado en este. Llevar de nuevo la Barra de Progreso a una. Vamos a cambiar la imagen una vez más. Entonces voy a seleccionar las tres imágenes en este caso y moverlas a lo largo del dedo del pie aquí. Voy a seleccionar la habitación deluxe tres C seis FF y voy a dar click en esta. Haga clic aquí, y debido a que este es del mismo color, sólo lo vamos a probar desde aquí. Y finalmente, rematemos. Tan controlado la una vez más. Y en este, todo lo que tiene que hacer es llevar la Barra de Progreso hasta 1000 como así, y eso es lo que termina nuestro diseño. Por lo que como pueden ver, tenemos seis diferentes nuestros puertos. Entonces ahora vamos a dar click en el prototipo y empecemos a crear prototipos. Entonces lo que tengo que hacer es dar click justo aquí dedo del pie, iniciar la animación, y con el mango azul seco Rent you step or toe animate, relajando y duracion. Démosle una duración de tres segundos para este porque están cambiando de dedo lleno vacío. Vamos a usar retardo de tiempo de cero segundos y vas a usar algo así como 0.4 segundos para el siguiente. De vacío a lleno, vamos a utilizar la duración fuera de tres segundos una vez más sin demora o para animar suya propia. Y el disparador de tiempo ahora de dedo lleno vacío, vamos a tener que sea a 0.4 tiempo. Todo sigue igual. Y por último, para este último, vamos a tener que ser a las tres. Entonces vamos a probar todo. Entonces cuando obtengo una vista previa, agrandar un poco esto. Cuando hago clic aquí mismo, se puede ver que la Barra de Progreso va. Las imágenes están cambiando bien y finalmente perturbado imagen. Ahora bien, si crees que este 0.4 segundos entre cambiar estas imágenes así que esto aquí mismo, si crees que eso es demasiado rápido, puedes entonces en hacer un cambio, incluso ahí así va de lleno dedo vacío, por lo que tal vez podamos ponerlo 0.8 segundos. Entonces, de aquí también, elijamos 0.8, por ejemplo. Y por último, vamos a darle un adelanto. Por lo que en un clic aquí mismo, puedes ver que sale todo el camino. Entonces tres segundos, 0.8 y ahora tiene una transición mucho más limpia. Y si eso no te gusta, o bien puedes jugar con el dedo del pie tirado aún más para que eso sea para este video, y te veré en el siguiente. 54. Archivo de deslizadores de imágenes: en este video, quería mostrarte deslizadores de imagen. Exe el archivo para que dentro de él, se puedan ver todos los deslizadores que cubrimos en esta sección fuera del curso. Entonces lo que quieras revisar lo que quieras inspeccionar, ve por ti mismo. O simplemente si olvidaste algo, siempre puedes saltar de nuevo a este archivo e inspeccionar cómo lo creamos. Entonces, por ejemplo, puedes previsualizarlo. Demos click en esta primera vista previa de escritorio 1, y si hago clic en esta flecha, se puede ver que esto cambia. Y si quieres ver cómo se hace eso, simplemente puedes hacer clic en las capas justo aquí, saltar dentro y decir, por ejemplo, Ok, esto está abierto, dice 100. Es de este color y demás, así que realmente puedes saltar por dentro e inspeccionar todos estos elementos y verlo por ti mismo. Si te has perdido algo durante estos videos, así que eso es todo para este video, y te veré en el siguiente 55. Tabla 1: en este video, voy a mostrar cómo puedes crear este gráfico animado. Entonces cuando haces clic desde el dedo del pie del gasto diario, el gráfico de gastos mensuales se va a actualizar el dedo así como el número justo aquí, así como las fechas aquí mismo. Entonces en el gasto mensual, tenemos los meses justo aquí y en el gasto diario. Como se puede ver, cambia dos días. Entonces cuando cambias entre ellos, tienes esta bonita animación. Entonces, empecemos. Entonces tengo aquí los nuestros puertos fuera 800 por 800 tengo dos de ellos y un diseño terminado porque quería mostrarles la diferencia entre estos dos. Entonces vamos primero a saltar a este 1er 1 Así que si hago clic en había sido zoom un poco más cerca, vamos a correr por lo que está incluido dentro y así como con todas las lecciones anteriores en partes de este curso, obtendrás esta gráfica huevos desfile, y dentro de ella se pueden inspeccionar todos estos elementos, y se puede ver cómo todos se ven como espacios entre ellos tamaños de teléfono, colores y así sucesivamente. Tan mismo como en todas las lecciones anteriores y partes del discurso. Entonces, empecemos desde arriba. Entonces lo que escuchamos aquí mismo es que tenemos gasto diario y mensual, Así que si abro diariamente doblado, puedes ver que está abierto. Sentido 20 y todos los gastos incluidos está abierto desde 18 pero tiene este color más claro. Entonces es DDT y esto es tres E c seis ff Tan mismo azul como usamos para el discurso mayoritario fuera. Y aquí mismo tenemos exactamente el mismo texto. Pero esto aquí mismo, este gasto mensual es de 70 70 70. Entonces tenemos a estos dos y están posicionados uniformemente el uno del otro aquí mismo. Por lo que básicamente están alineados con este borde izquierdo y alineados con esto. Escríbalo esta ciega botella. Hablando de ello, tenemos esta línea de fondo la cual tiene el color de la sensación apagado F f f. Pero cambiémoslo a este color así, y voy a quitar el trazo porque no lo necesitamos. Por lo que el ingenio es 600 altura es de dos y este es el color de relleno. Por lo que 70 70 70 70. Entonces a continuación tenemos esta línea y la voy a eliminar en un segundo y te mostraré cómo puedes crearla y tenemos este número y si reanudamos un poco más cerca, tenemos tres elementos dentro. Entonces tenemos el texto que es de sentido abierto, audaz. A los 20 tenemos número, fondos y número BG, que es sólo un rectángulo regular con un radio de esquina apagado 20. Y tenemos el círculo con el color de campo blanco apagado para que pueda corresponder bien con el fondo blanco y tenemos el borde. Por lo que este azul 3 60 c seis ff con el tamaño apagado para finalmente, tenemos que repetir Grande. Entonces si acerco un poco más, aquí está la nota repetida para el diario. Entonces estos son los días. Como se puede ver, tenemos exactamente el mismo espaciado entre cada uno de ellos. Te voy a mostrar cómo crearlo en un segundo. Y en este 2do 1 lo que tenemos es mensual. Entonces básicamente el mismo trato con un poco menos de distancia entre cada uno de estos elementos de texto y van a cambiar entre sí. Entonces el 2do 1 diario está a cero opacidad, y a este 1er 1 mensual está a cero opacidad, como se puede ver aquí mismo. Entonces déjame crearlo rápidamente. Voy a dar click aquí mismo. Yo he estado lunes, por ejemplo. Usemos eso. Usado este color Así 70 70 70 70 me gusta así voy a utilizar analistas regulares. Usa 18 por ejemplo, solo para que puedas ver. Entonces una vez que he creado este primer elemento, hice clic. Repetir cuadrícula. Los coloqué algo así como aquí, por ejemplo, luego un sitio de doble clic, escribiendo martes, escribiendo miércoles, jueves, viernes, sábado y finalmente domingo. Entonces si no hago clic adentro, así es como se ve. Pero como puedes ver, aquí termina. Pero, ¿cómo podemos llegar a este estado? Entonces es simple. Puedes hacer clic fuera de la salida del dedo del pie, repetir la cuadrícula, luego hacer clic en ella. Por lo que tienes que dar click como así. Y por último, termina justo aquí para que puedas mover este mango derecho a aquí así al domingo y luego simplemente pasar el rato por aquí y aumentar el espaciado entre todos ellos. Así que simplemente haz clic y muévelo hasta que estés contento con su arriba. Por ejemplo, algo así, contendrá un espaciado uniforme entre todos estos elementos de texto y simplemente haga clic aquí , coloque el dedo del pie perfectamente en el centro fuera de la página. Entonces así es como llegué a este texto de repetición genial y éste también. Entonces ésta es exactamente la misma. Basta con reducir el espaciado entre cada uno de estos elementos de texto. Y así es como llegué ahí. Entonces ahora déjame mostrarte cómo puedes crear esta línea. Por lo que tengo dos grandes montajes. Por lo que si hago click en el propio puerto, voy a dar click en el layout. Tengo siete columnas porque tengo siete días en una semana y aquí mismo lo he conseguido a cero. Entonces si yo, por ejemplo, coloco cinco, se puede ver ese color. Es este espaciado entre las columnas. Por lo que tenemos siete columnas y el espaciado es de cinco entre todas ellas. Pero si lo reduzca a cero, se puede ver que no hay espacio de canaletas entre ellos. Pero se puede ver claramente estas líneas que vienen de ella. Y tienes líneas para las siete columnas. Entonces, ¿cómo crear esa línea? Simplemente haga clic en un lápiz, va a dar clic aquí mismo porque me da los bordes. Se puede ver porque está llegando al borde izquierdo del lunes Así que voy a hacer clic, mantener, mantener, cambiar y tal vez soltarlo en algún lugar por aquí. Y entonces simplemente puedes golpear escape para escapar de la selección. Y luego simplemente puedes pasar el ratón y hacer clic donde estas líneas son seguras. Asumiendo mucho más cerca. Se puede ver esta línea y esta siguiente línea porque esas son las líneas fuera de nuestra gran. Entonces voy a dar click en esa línea. Haga clic una vez más, haga clic una vez más, y cada vez que haga clic en su adición de estos puntos puntera esta línea, y todos estos puntos son rectos. Entonces si trato de moverlo, puedes ver que se están moviendo en línea recta por lo que se están moviendo en ángulo recto, por ejemplo. Y si quieres cambiar eso para tener la línea curva, simplemente puedes ir adelante y hacer doble clic en cada uno de ellos, y lo girará desde la curva puntual del dedo del pie, y luego puedes simplemente moverlos. Entonces, para hacer eso, simplemente haz clic en cada uno de ellos y simplemente arrastra fuera de ebullición, asegurándote de que te mantengas en esta línea así y vamos a hacer algunos cambios más en tan solo un segundo. Pero por ejemplo, en algún lugar por aquí y vamos a terminarlo con aquí, vamos a dar clic aquí. Escriba cinco, por ejemplo. Dedo del pie tienen bonito borde grande tres C seis ff es para el color. Voy a dar click en alrededor, mantenido para redondear las esquinas así. Y por último, posicionaré esta parte justo por debajo de este número. Daré click en el nuestro puerto para quitar la rejilla así. Y simplemente voy a posicionar este número un poco más bajo. Al igual que así. Y si no estás contento con cómo se ve este gráfico, siempre puedes reposicionar algunos de estos elementos. Entonces, por ejemplo, puedo moverlo así tal vez mover esto solo un poquito hacia abajo así. A lo mejor mover esto aún más abajo, Tal vez mover esto así. E incluso puedes mover esto hacia abajo si quieres sugerir moverlo un poco por debajo de esta línea de inicio. Pero no voy a hacer eso para que veas así es como conseguimos esta línea. Por lo que lo borraré desde aquí. Voy a saltar aquí mismo. Denle línea como así hit control C Haga clic en este, Haga clic en Control V y aquí mismo. Lo que hice es lo mismo para el grande, así que voy a dar click en un genial Como puedes ver, tenemos ahora 12 columnas como, Así que nos deshicimos de cero para que puedas jugar. Agrega algunos puntos más si quieres, para que puedas volver a posicionar esto por cada mes. Entonces si hago doble clic y hago clic aquí mismo, puedo añadir otro punto. A lo mejor podría mover este sólo un poquito. Ahora puedes hacer doble clic en el dedo del pie hacer que sea redondo o recto. De verdad depende de ti. Y puedes posicionar estos mangos como quieras, para que puedas jugar con ellos y puedes expandirlos o traerlos de vuelta al punto original . Por lo que realmente depende de ti cómo quieres que se vea este gráfico. Entonces, como dije, se pueden sumar múltiples puntos. Incluso puedes jugar con estos puntos y alinearlos a esta nueva cuadrícula. Entonces, por ejemplo, en algún lugar por aquí, tal vez esto pueda ir un poco abajo. Saquemos esto aún más como. Para que como pudiste ver, puedes jugar con estas asas para lograr el look exacto que quieras. Y se puede, por ejemplo, posicionar. Está en algún lugar por aquí. Sí, estoy un poco contenta con cómo se ve eso. A lo mejor puedo agregar uno más aquí, doble click para hacer alrededor de algo así. Y llamémoslo un día moviéndonos justo por debajo del número Voy a dar clic en el nombre Nuestros Puertos . Eliminé el diseño de cuadrícula y finalmente, lo que quiero es posicionar esto solo un poco mejor. Entonces lo voy a posicionar en algún lugar por aquí, y eso es básicamente todo para el diseño del proceso. Entonces, como puedes ver, es realmente sencillo diseñar esto, y se va a animar muy bien. Entonces cuando hago clic en un prototipo, lo que tenemos aquí mismo es dejarme quitarlos rápidamente para que podamos hacerlo todo juntos. Por lo que tenemos que dar click cuando este 1er 1 para ir al gasto mensual y va a ir justo aquí. Entonces te vamos a dar un paso o un dedo del pie animar. Fácil de salir en un segundo Para la duración, puedes tener una duración un poco más larga si quieres que esto se anime un poco más lento, pero me pareció que un segundo para ser lo suficientemente bueno el gasto diario. Vamos a hacer exactamente lo mismo y moverlo hasta aquí. Y también puedes bajar el pacenti de estos si quieres. Entonces, por ejemplo, vamos a hacer clic en este gasto diario aquí. Volver al diseño. Podemos tocar 40. Como puedes ver, va todo el camino hasta el 40% si quieres lograr ese efecto. Pero si no, puedes dejarlo así. Y por último, lo que quiero mostrarles es una vez más. Entonces en este 1er 1 donde estamos mostrando el gasto diario, tenemos los días en esto. 2do 1 tendrá gasto mensual estaban mostrando los meses. Pero en este, los días si hago clic aquí son cero, y en este uno meses están a cero opacidad. Así que solo reduzca estos dos para que estén cambiando bien entre sí. Ya sabes, por fin es previsualizar cómo se ve todo. Entonces si hago clic mensualmente, puedes ver que este gráfico anima y estas fechas aquí mismo están cambiando. Por lo que de diario a gráfico mensual se está animando muy bien, como se puede ver. Pero lo que no incluí aquí mismo es la línea. Entonces voy a arreglar eso ahora. Por lo que simplemente voy a dar clic en su línea de fondo. Haga clic en Control Ver Haga clic en este porque tiene un campo blanco fue dedo del pie, elimínelo. Control. Tomamos, pegamos en el camino la posición. Justo aquí. Y cuando llegue a previsualizar una vez más, haga clic entre como puede ver ahora. Line se mantiene exactamente igual, pero los gráficos de los se están moviendo. También puedes mover esto si quieres dedo del pie sigue exactamente donde está la línea, por lo que, como puedes ver ahora, se mueve un poco. Pero puedes moverlo a aquí, por ejemplo, si ese es el valor más alto. Entonces, por ejemplo, en mensualmente aquí, pero en diario tal vez podría estar justo aquí para que puedas moverlo todo el camino hasta aquí y tener un poco más de animación si quieres. Entonces eso es todo para este video, y te veré en el siguiente 56. Tabla 2: en este video quiero mostrar cómo puede crear este gráfico de líneas. Entonces cuando hagas click diariamente cambiará y este selector se va a mover das click Mensual se va a actualizar una vez más. Y luego cuando hagas clic hoy, va a retroceder y mostrarte sólo los valores de hoy. Sirkin ciclo muy bien entre ellos, y como puedes ver, tienen este bonito radiante en ellos también. Entonces, empecemos. Así que tienen estos son puertos al 800 por 800 vamos a descomponerlos. Entonces si acerco un poco más cerca concedida, tenemos esta elección en la parte superior, y tenemos hoy mensualmente y selector. Entonces para el texto, vamos a usar el sentido abierto así. Y yo voy a hacer lo mismo por estos dos. Tan abierto dice así. Y finalmente, para el selector, lo tenemos en 52 para el ingenio para las alturas y 50 para el radio de esquina redonda, y básicamente voy a hacer lo mismo. Entonces voy a golpear el control. C se mudó a aquí y se fue a eliminarlo porque quiero mostrarte cómo puedes aplicar a diferentes selecciones. Por lo que el 1er 1 es hoy. 2do 1 es diario, así que vamos a dar click en él. Voy a dar click en un click diario, este selector de color. Voy a seleccionar este color azul. Y para el hoy voy a dar clic político y dar clic aquí mismo porque ese es nuestro color predeterminado. A continuación, voy a mover la selección al borde izquierdo del texto y moverla a aquí así. Y por último, hagamos lo mismo para la mensualidad. Alguien a quien dar click aquí mismo. Utilice la herramienta de selección de color. Elija el click azul hoy, haga clic aquí y luego justo aquí. Me pareció mucho más fácil hacerlo de esta manera. Y finalmente, hagámoslo. Entonces, por ejemplo, a aquí y llamemos a esa selección hecha. Voy a sostener turno y simplemente alinearme a este banquillo. Yo voy a hacer lo mismo por éste y finalmente, por éste. Ahora vamos a descomponer esto Así que tenemos este fondo, que es básicamente una capa de forma. Es un 600 por 300. Tiene este color de campo off DDT. La esquina redondeada está a las ocho. Entonces ese es nuestro radio de esquina y finalmente tenemos líneas horizontales y verticales. Por lo que estos están dentro de la cuadrícula de repetición. Y para crear el moco, simplemente dibuja una línea. Entonces ve desde arriba. Sostén turno todo el camino hacia abajo hasta el fondo como así y homenajea. Genial. Y depende de ti cuántas líneas quieras tener. Entonces déjame chequear. Tener 1234567 líneas. Entonces voy a sostenerlo del 1 al 4, 567 Así que eso es básicamente todo. Y se puede posicionar esta repetición de calificaciones. Entonces tengo que estar aquí y simplemente yendo de pie, alinearlos así y que sea a los 73. Voy a dar click aquí mismo, seleccionado para ser blanco, y así es como creé éste. En cuanto a éste, hice exactamente lo mismo. Por lo que para las líneas horizontales hizo una línea como así golpeó repito rejilla. Deseo tener 1234567 líneas. Entonces voy a dar click a Mary Pitt Grid 23456 Así que uno más siete. Voy a hacer un espaciado, pero déjame primero moverlo en línea con este. Entonces en algún lugar aquí mismo, voy a hacer una selección y seleccionada para ser algo así. Y así es como creé estas líneas horizontales y verticales, No para las líneas de abajo. Déjame mostrarte. ¿ Cómo fue eso? Entonces si hago clic en él, se podría ver que tiene la sensación. Tiene frontera. Y tiene el trazo con off cinco así como la ronda que mantuvo. Por lo que voy a dar click en mi lápiz. Voy a dar click aquí mismo en la esquina. Y simplemente voy a dar clic a algunos por aquí asegurándome de que me estoy apegando a estas líneas desde nuestro genial. Entonces por eso creamos la cuadrícula para que podamos seguirla. Y en este, voy a ir todo el camino hacia abajo. Podrías golpear escape. Entonces lo que tenemos aquí son cinco que teníamos alrededor de Kep y para la película, Vamos a tener un Grady dentro. Entonces tenemos un Grady lineal desde aquí, Simplemente haz clic en esta flecha Judios, el ingrediente lineal ahora, en este caso y simplemente te voy a mostrar con el blanco y negro porque ya los creó con nuestro colores. Entonces lo que voy a hacer es rotar esto. Así que voy a dar click en este punto inferior Haz clic en este stop dot y simplemente girarlos para que el color más claro esté en la parte inferior como así que asegúrate de que intentas alinearlos para ir perfectamente recto siguiendo esta línea, y puedes dar click en el blanco y simplemente haga clic aquí para bajar la Bay City todo el camino hasta cero. Y ahí es donde vas a tener este efecto yendo del color viejo camino abajo del dedo del pie, sin color. En cuanto a los leones, vamos a hacer doble clic en el lugar. Voy a hacer doble clic en cada uno de estos puntos. Igual que en video anterior. Eres muy sólido, y puedes agregar más puntos simplemente haciendo clic en cualquier lugar. Entonces si quieres adoptar aquí, puedes agregarla y simplemente tirar todos estos hacia arriba como quieras. Y puedes mover estos mangos si quieres cambiar cómo va a quedar el ángulo. Entonces, por ejemplo, como aquí, voy a hacer doble clic aquí mismo también se puede con todo el camino justo aquí en la parte superior . Se puede mover éste hacia abajo. Realmente puedes jugar con ellos. Y así es como se crean estos dos. Ahora para empezar, vamos a duplicar rápido en cada uno de ellos, así que tenemos que hacerlos ir perfectamente rectos. Y luego en algún momento, muévete para el diario. Como se puede ver aquí mismo. Perdón por el día de hoy. Como se puede ver aquí mismo. Entonces, ¿cómo hacer eso? Salta dentro, haz doble clic en cada uno de ellos otra vez para hacerlos rectos una vez más. Y luego simplemente mueve todas estas líneas para seguir la línea de fondo. Así, asegúrate de que sean heterosexuales así. No hay click en este. Y si no es recto, simplemente puedes convertirlo desde su alrededor. Dos espalda recta otra vez. Y simplemente puedes ir seguirlos así. Y hasta que estés contento con ello, incluso puedes mover estas líneas. Entonces, por ejemplo, si queremos moverlo como aquí, puedes hacerlo. Y finalmente, para éste, se puede tener que sea algo como esto. Entonces tal vez va de esta línea, y tal vez pueda ir un poco más bajo en algún lugar como aquí. Y como puedes ver ahora tenemos esta forma ahora para el segundo y el 3er 1 Tu simplemente vas a revertir el proceso al revés. Por lo que va a hacer doble clic en todos estos puntos y luego volver a moverlos de nuevo, dedo del pie en el proceso que desee y en el lugar que desee y asegúrese de que está probando dedo del pie en línea. Todos los puntos del dedo del pie esta rejilla. Por eso lo creamos. Y así creé estas líneas. Entonces ahora empecemos con la animación. Yo lo voy a hacer en el lugar porque ya no lo necesitamos, así, y tenemos nuestras partes azules y verdes ahora para el verde. Este es el color así 55 D 466 Y para el azul, es estándar tres e. C. Seis f f. Tendrás este archivo de práctica fuera de curso en las gráficas X defile al descargar los archivos de práctica y puedes abrirla, abrirla y jugar con ella. Si te perdiste algo ahora, empecemos por la animación. Voy a hacer clic en prototipo y voy un poco con el dedo del pie en zoom. Todo lo que tenemos que hacer es animar estos aquí mismo en la parte superior. Entonces para el mensual en este 1er 1 lo voy a arrastrar aquí mismo al tap mensual auto animate, nota fácil. Y un segundo para la liberación para el diario. Ir a dar click aquí mismo va a contener el mismo efecto hoy y mensualmente. Y aquí vamos a elegir hoy y a diario, ¿verdad? Por lo que todo usando el mismo efecto desde aquí. Y si hago click en la vista previa del 1er 1 click y cuando haces click a través de ellos, puedes ver que se están moviendo muy bien y están teniendo esta bonita transición y yendo todo el camino hacia abajo a cero. Ahora, por supuesto, puedes manejar este diseño hacia arriba y hacerlo aún más bonito agregando los números aquí mismo en el sitio como un hombro en el ejemplo anterior. Por lo que puedes hacer ah básicamente copiar el ejemplo anterior basándolo aquí usando repeat great también. Entonces, por ejemplo, puedes tener horas para el diario por lo que las horas pueden estar aquí mismo. Aquí pueden estar los minutos. Perdón por el día de hoy. Para el diario puedes tenerlo sea nuestro, por ejemplo, y tal vez hasta segundos o De verdad depende de ti y para la mensualidad. Se puede tener que ser, por ejemplo, días y horas y colocarlos abajo y a la izquierda. Entonces eso es básicamente todo para este video, y te veré en el siguiente. 57. Tabla 3: en este video, voy a mostrar cómo puedes crear este gráfico de barras. Por lo que cuando hago clic aquí mismo, se puede ver que todas estas barras se están llenando a los valores y están pretendiendo hacerlo. Entonces, empecemos. Por lo que aquí tenemos a nuestros puertos fuera 800 por 800 diseño ya está terminado. Pero como mencioné en los videos anteriores, se puede obtener el diseño completo en los gráficos X'd file, y se puede inspeccionar más en detalles. Pero sólo voy a mostrarles rápidamente cómo creé todo esto. Entonces déjenme duplicar esto nuestro tablero, por ejemplo, y sigamos adelante y eliminemos todo. Entonces solo voy a elegir una herramienta de rectángulo y empezar a dibujarla. Hazlo 600 como tan posicionándose para ser incluso leído thes dos números. Entonces tal vez ir a algún lugar así, pero no importa, y voy a hacer que por ejemplo, 20 algo así, y pongámoslo al tope de este número. Sigamos adelante y duplicemos este número aquí mismo, y vamos a escribir uno porque estos van a representar miles de dólares de descuento. Entonces, ¿qué va a teclear en uno así? Y voy a mover el que está justo debajo de él. Esto va a estar vacío como Así que vamos a quitar la frontera. Y para la película, vamos a incluir D DD Tan gris claro. Voy a conseguir el control D y esto se va a llenar y van a ser tres e c seis ff como así 10 va a tener una altura fuera de uno, y yo lo voy a seleccionar y el click vacío justo aquí, y lo va a posicionar al línea de fondo fuera de este estado vacío, como se puede ver aquí mismo. Entonces eso es básicamente todo para el proceso de creación. Apenas entonces seleccioné los tres, como así clicé grados de repetición y creé 12 diferentes. Entonces Pero a la cuenta, 2345678 9 10 11 12 Así que vamos a terminar en esta, y ahora puedes simplemente espaciarlos hacia fuera para que simplemente puedas pasar el rato aquí mismo para conseguir este espacio rosa , y simplemente puedes pisarlos encima, moverlas entre sí para que puedas tener este bonito espacio como quieras, entonces puedes posicionarlo en el centro o moverlo donde quieras. Y luego finalmente, simplemente haga doble clic dentro como así y se puede escribir en dos. Se puede hacer doble clic dentro tipo en 3456 y todo el camino hacia el 12. Cuando termines, condensas simplemente a la derecha. Haga clic en las rejillas de grupo. Obtendrás todos estos elementos y podrás correr y nombrarlos todos correctamente. Y una vez que hayas hecho eso, así va a ser un número uno para que económicamente lo pueda nombrar. Este es el número dos. Este es el número 34 56789 10 Esto va a ser 11 y finalmente 12. Como puedes ver, nos lleva sólo unos segundos hacer esto. Y tenemos que hacer esto y sobre agrupados de esta manera porque tenemos que crear estos azules y agrandarlos así que básicamente moverlos hacia arriba. Entonces voy a golpear control el duplicado este nuestro puerto salta dentro, escoge el azul y puedes hacer esto con todos ellos, Así que déjame hacerlo rápidamente. Por lo que puedes seleccionar todos como así. Por lo tanto, seleccione campo , campo, seleccione todos se mueven hacia abajo. Por lo que realmente es simplemente simplemente mantener el control y matamos el clic del ratón, simplemente puedes hacer clic hacia abajo y aquí está. No se puede encontrar el punto medio donde está el punto medio y se puede entonces simplemente, por ejemplo, posicionar para esconderse a los 20 como así y luego simplemente movió todos ellos remolque. Alinécelos con este borde inferior. Entonces simplemente puedes poder sobre el punto medio, extenderte aquí y luego puedes máshead y seleccionar uno por uno. Por lo que doble clic en el interior. Simplemente muévelo así Y puedes moverlos todos como quieras. Una vez que hayas terminado todo eso, déjame rápidamente hacer comer estos también. Una vez terminadas toda la deuda, puedes tener algo como esto. Y por supuesto puedes tener valores como quieras, puedes agregar múltiples valores aquí. Por lo que esto es culpa cayó el gasto total de los RVs. Entonces, por ejemplo, puedes ir de aquí, incluso ir 11 10 98 todo el camino hasta cero y esto básicamente va a ser tu punto cero y luego puedes alinearlos con esos números, Así que esto podría ser, por ejemplo, 10. Esto es a las 11. Esto es a las siete, y te das la idea. Simplemente consigues esto como un concepto básico en este video, y depende de ti que del dedo del pie. Implementarlo en su propio diseño. Puedes incluir tus propios colores y cambiar de colores fácilmente. Simplemente no puedes hacer click en este. Se puede saltar aquí mismo al panel de activos. Haga clic en la persona que llama para seleccionarla. Entonces puedes hacer clic derecho en él y condensar cuál es porque va a apagar instancias todos estos colores que antes eran azules. Ahora van a ser de este color. Entonces, por ejemplo, puedes ingresar el código hexadecimal de tus clientes justo aquí, y se va de pie, um, um, instantáneamente incluirlos en este diseño tan rápido. Retrocede un par de veces y ahora vamos animados, así que es importante que ambos tengan exactamente los mismos nombres de capa, así como puedes ver, empieza desde uno justo aquí, termina en 12. Entonces este es el número 12 como se puede ver, y en éste son exactamente iguales. Por lo que comienza con el número uno termina con el número 12 y estos son exactamente los mismos en ambos puertos. Por lo que ahora dedo animado, es realmente simple. Yo solo voy a dar clic aquí, arrastre el dedo del pie aquí. Vamos a tu paso o dedo del pie animate. Aflojarse y la duración van a ser de dos segundos porque queríamos tener esa animación suave por lo que todos ellos están fallando sin problemas de abajo a arriba. Entonces vamos a hacer clic en vista previa, a ver cómo se ve eso. Entonces en un clic aquí mismo, se puede ver porque lo teníamos a dos segundos, se están sintiendo y sin problemas. Si quieres llenarlo más rápido o más lento, simplemente puedes cambiar este tiempo de duración a, por ejemplo, cuatro segundos. Si lo quieres, Toby más lento o si quieres que sea Foster, puedes tenerlo a 0.2 segundos. Pero vamos a comprobarlo. Se puede ver solo broches en posición, así que realmente no creo que se vea tan bien. Creo que dos segundos es una especie de punto dulce para esta animación, así que eso es todo para este video, y te veré en el siguiente 58. Tabla 4: en este video, te voy a mostrar cómo crear estas gráficas artesanales. Entonces cuando haga clic aquí mismo, se va a expandir. Como puedes ver, tiene esta bonita luz radiante, y llena básicamente todas estas líneas. Y cuando vuelva a hacer clic en él, saltará de nuevo al punto de partida. Entonces, empecemos. Entonces lo que tengo aquí es a nuestros puertos fuera 800 por 800. Y si salto al 1er 1 vamos a descomponerlo. Una vez más, tendrás esto en tus listas. X desfilan a Sercan, salta por dentro e inspeccionarlo un poco más. Pero aquí tenemos el opus s 20 Bolt. Tenemos este 12 horas y K abierto dice 18 igual que en el video anterior. Y tenemos estas dos líneas. Entonces esta es la línea de la izquierda con sus cuatro y alta 86 32 Y finalmente tenemos esta línea de fondo así pero exactamente igual, pero a la inversa. Por lo que testigo cuatro y la altura es de 63 para finalmente, tenemos esta líneas horizontales, por lo que básicamente son una línea así 6 30 a dos. Usando herramienta de rectángulo y simplemente estoy usando, repite genial y alineándolos así. Entonces como se puede ver ahí a 45 píxeles de distancia. Entonces ahora tengo esto uniformemente repartido a lo largo de esta sección y puedes agregar números. Por lo que este será el 11 10 98 todo el camino hasta cero, que será justo aquí. Y también puedes sumar los números para los miles aquí mismo en la parte inferior si quieres. Pero una vez más, esto es sólo un ejemplo fuera del diseño general. Ahora, cuanto a la parte como puedes ver, olla está escondida aquí abajo y está expandida justo aquí. Entonces, ¿cómo puedes crearlo? Entonces déjenme mostrarles rápidamente que en este 1er 1 usemos el mental. Obviamente vamos a ir justo aquí en la esquina. Pero sólo voy a ir aquí mismo a no meterme con la parte original. Y simplemente voy a dar clic y dar clic aquí. Tienes que asegurarte de que todas estas líneas sean rectas, por lo que hace click mágicamente aquí. Sostenga su llave de turno. Da clic aquí y luego trae de vuelta el dedo del pie punto original para que puedas ver, Es realmente bastante simple. puede tener que sean cinco, por ejemplo. Y déjenme dar click rápidamente aquí mismo. Copiar clic derecho. Voy a dar click en esta parte click derecho apariencia basada para que consigamos este Grady en copias del original. Y si saltamos aquí mismo, se puede ver que tenemos el Grady int en el azul tres dicen seis FF y el color azul está en la parte superior, está parte superior, bajando dedo del pie blanco y el blanco está al 0% de descuento de ciudad base. Por eso tenemos ese efecto. Entonces esto es lo que estás recibiendo aquí mismo. Pero, ¿cómo se puede llegar aquí mismo? Entonces te voy a mostrar que si hago clic en las partes originales y lo escondo Y si salto aquí mismo parte cruda, condicional y lo escondo también, vamos a usar nuestra parte toe animar esto para que simplemente pueda control de niños. ¿ Ver? Haga clic en este siguiente. Golpe control V se va dedo del pie. Patela en remolque. Posición original. Entonces, ¿cómo podemos hacer esto? Es realmente bastante sencillo. Entonces esta va a ser nuestra parte final, y esta va a ser nuestra parte de inicio. Ahora, para la parte inicial, hay que seleccionar todos estos puntos y llevarlos al punto de partida. Entonces, ¿cómo puedes hacer eso? Simplemente haga doble clic de su parte, haga clic en el inicio y simplemente parpadear. Tráelos todos de vuelta o puedes traerlos hasta aquí, por ejemplo, Déjame acercar un poco para que puedas llevarlos a todos a este mismo punto. Al igual que depende de cuántas partes tengas. Perdón, cuántos puntos tienes va a tardar más o más corto. Y luego una vez que termines eso, simplemente puedes seleccionarlos todos como así nosotros dos hacemos clic izquierdo del ratón y llevarlos de vuelta al punto original. Y por último, cuando termines que simplemente puedes hacer clic en esto no justo aquí, y puedes traerlo de vuelta al punto de partida, que está justo aquí, y eso es básicamente todo. Así de fácil es crear. Voy a dar clic aquí mismo, elegir prototipo y ya lo conecté. Pero permítanme traer esto de vuelta para que podamos empezar de nuevo todo, así. Entonces lo que quiero hacer es dar click en este texto. Voy a arrastrar herbal, manejado paso o dedo del pie animate. Easy Now duración es de dos segundos y haga clic aquí para que pueda traerlo de vuelta. Eso es todo. Así de fácil es crear esto. Entonces si hago clic aquí, dar click en una vista previa. Como pueden ver, no podemos ver nada. Pero cuando haga clic aquí mismo se va a expandir y tú vas a conseguir ese efecto. Y cuando hagas clic atrás, lo va a traer de vuelta manteniendo ajustes originales y posición original que puedes ver el punto justo aquí si acerco un poco más. Pero puedes,por supuesto, por supuesto, mover ese punto así que selecciona todo y simplemente moverlo hacia atrás del dedo del pie aquí. Y también puedes reducir el tamaño tal vez 24 y se va a mezclar en el fondo realmente bien. Entonces eso es todo para este video, y te veré en el siguiente 59. Tabla 5: en este video, voy a mostrar cómo puedes crear este gráfico de donuts. Por lo que en un clic aquí mismo, algunos valores van a cambiar. Como puedes ver, Soifer salta de nuevo al 1er 1 Puedes ver que el texto va a cambiar. Por lo que este texto en el medio tres textos justo aquí en la parte inferior van a aparecer de la nada así como el propio gráfico de rosquillas. Entonces si lo revisas una vez más, puedes ver que todo se llenó bien y sin problemas. Entonces, empecemos. Entonces lo que tengo aquí son dos nuestros puertos fuera 800 por 800. Y como pueden ver, tenemos este estado de inicio y tenemos este estado final. Entonces, vamos a explorar algunos de estos elementos. Y una vez más, antes de que empiece, tienes estos gráficos en tu ficha de óvulos profundos de práctica, por lo que puedes inspeccionarlos un poco más si te perdiste algo aquí en este video, y puedes meterte en un poco más detalles sobre cómo se creó todo. Entonces, empecemos. Como se puede ver, aquí es duro. El pedido se ve así, así que tenemos tu gasto hoy Texto aquí mismo. Está abierto desde 20 Bolt por debajo de que tenemos mezquita de texto central que es justo esta mezquita. Y si recuerdas de los videos anteriores son solo tres textos en este caso porque 00 y 98 van a cambiar mientras estos signo de dólar se va a mantener en su lugar. Entonces cómo hice esto creé tres textos y este signo de dólar se deja la línea. Y estos dos tienen razón La línea, como pueden ver aquí mismo que me permitió borrar el signo inferior de estos dos. Y simplemente creé rectángulo básico para la máscara Seleccionado todos ellos y haga clic en crear mezquita con capa de forma. Entonces básicamente, así es como creé esta mezquita de texto. Antes de meternos en círculos, permítanme mostrarles el ajuste de disidencia a continuación. Entonces tenemos la comida que tenemos círculo que es 2020 y tiene este color Bluefield. Tenemos café básicamente el mismo círculo una vez más. Pero ahora tiene este color verde 55 d 466 y finalmente lo mismo para los dulces. Entonces tenemos el círculo 2020 como podemos ver y es e 53 c 85 muertes son de color rojo ahora para este texto. Entonces comida, café, dulces. Tenemos sentido abierto, regular a los 20. Entonces esto es audaz. Esto es regular, y me olvidé de mencionar dentro de este texto central. Esto es ciencia abierta 36 Bold, porque quería hacerlo sólo un poco más grande porque es el principal punto focal fuera de esta tabla. Y finalmente tenemos esta mezquita de texto en la parte inferior. Entonces tenemos abierto dice 20 regular, estos tres textos. Y como pueden ver, tenemos el rectángulo, mezquitas, la misma mezquita como tienen aquí mismo. Lo tenemos justo aquí. Pero acabo de mover estos tres textos por debajo de la mezquita y en el siguiente estado, sólo vamos de pie posicionarlos dentro de la mezquita y colocarlos en el centro horizontalmente. Entonces si salté aquí mismo, hagamos un trato con los círculos. Entonces los círculos son un poco más complicados, pero no son nada por lo que temer. Entonces como puedes ver, tenemos este círculo principal como lo llamaste de nuevo. Es a 50 por 2 15 Tiene frontera sin ningún Phil y el tamaño del borde es de 20. Es decir, trazo con es de 20 y si hago clic justo aquí, se puede ver que es el D. D. Así que es de color realmente claro. Y como pueden ver, lo posiciono para estar fuera o acariciar alrededor de Kip y alrededor de articulación. No tienes que hacer esto, pero simplemente a veces me gusta hacer eso porque hace que algunas cosas sean mucho más sencillas para trabajar. Por ejemplo, las manchas y puedes hacer doble clic en estos puntos para hacer las cosas un poco más sencillas. Ahora, lo que hice a continuación es que hice tres copias fuera de estos círculo trasero, así que golpeé el control D tres veces dedo del pie conseguir círculo rojo, verde y azul. Por lo que son exactamente lo mismo que este círculo trasero. Pero están de color, y seguí adelante y creé mezquitas para cada uno de ellos. Entonces si hago clic en este, se puede ver cómo se ve esta mezquita. Entonces fui con el centro. Entonces primero lo primero es cómo creé estas líneas. Entonces tienes a estos tipos aquí a tu izquierda y en tu parte superior. Entonces porque sé que esto es 800 por 800 necesito posicionar a mis guías en 400 por 400. Entonces para estar perfectamente en el centro, fuera de este círculo, tan alto hizo esto Básicamente, solo tienes que hacer clic aquí y moverlos adentro hasta que veas la misma distancia de ambos lados. Me gusta así lo puedes ver en la parte superior. Tienes 400 por 400 puedes hacer lo mismo por este. Y obviamente, cuando estás trabajando en tu diseño, como puedes ver aquí mismo, está en el molino. Cuando estás trabajando en tu diseño, tienes remolque. Calcula estos números para ti y tu proyecto en particular, pero para esta presentación, está en 400 por 400. Pero sólo asegúrate de posicionar estas guías en el centro fuera del círculo. Eso es todo de lo que tienes que preocuparte. Entonces volvamos a estas mezquitas. Entonces básicamente, Howard crea en las mezquitas. Hice clic en un clic de lápiz justo aquí, así que en algún lugar fuera del círculo, haga clic justo aquí en el medio, Luego haga clic aquí sosteniendo mi tecla de turno. Por lo que sigue esta línea. Yo creo, haga clic en algo justo aquí y luego saltando de nuevo al centro y siguiente seleccioné en el azul y el spot, click derecho y mezquita con forma. Y así es como conseguí esta mezquita. Y verás que esta mezquita se ve así. Entonces esa es básicamente esa mezquita. Ahora, para este primer estado, no queremos ver la mezquita. Entonces, ¿cómo podemos hacer esto? Simplemente podemos hacer doble clic en el acto, y es un poco más complicado meternos en esa parte porque sigue saliendo de ella todo el tiempo. Por lo que hay que tener mucho cuidado y dar click en la parte misma. Así que así. Y una vez que selecciones el bote, simplemente puedes hacer clic en este punto por ejemplo, y simplemente moverlo aquí mismo. Puedes hacer clic fuera termina yendo dedo del pie, mezclarte la forma por completo, y no la verás. Y básicamente se verá así. Por lo que no se puede ver esa forma como medios como éste. Y yo hice lo mismo para el 2do 1 Así que aquí está la Mezquita Verde. Por lo que el azul está empezando desde aquí. Aquí termina. Entonces básicamente en algo así como el centro, básicamente, sí, así que 1/4 fuera del círculo está el azul y el verde viene tras él y porque carpeta verde está debajo de mezquitas azules más llenas en este caso. Entonces solo imagina esto como una carpeta. Por lo que tenemos una carpeta principal. Contamos con Carpeta Azul verde y Rojo uno. Todas ellas están posicionadas una debajo de la otra para que podamos conseguir este efecto como ven aquí mismo . Entonces el azul sale primero. verde está saliendo después y el rojo sale finalmente, y me posicioné azul en la parte superior porque es primero verde está por debajo de golpe porque está saliendo segundo y finalmente el rojo está por debajo de todos ellos porque está saliendo primero. Ahora por estas mezquitas. Si saltando aquí mismo, se puede ver cómo se ven. Por lo que me piden esta porción fuera del verde, por lo que detuvieron porción y porción inferior estado tal como es. Entonces cuando hago clic en algún lugar afuera y peleas, pincha sobre el verde y aumenta la opacidad de la misma, puedes ver cómo se ve. Entonces esta es básicamente nuestra mezquita, por lo que cubre la parte azul. Básicamente, viene por debajo de la parte azul y en este apartado sólo van a extender la mezquita. Entonces si hago clic en esta mezquita verde. Por lo que círculos mezquita verde. Se puede ver cómo se ve esta mezquita. Entonces básicamente pasé de disposición a disposición, usando el mismo método que te mostré para el azul. Por lo que simplemente puedes saltar dentro de tu mezquita. Déjame ver qué es. Aquí está. Y te recomiendo acercarte un poco más. Doble clic en el interior para que realmente puedas llegar a tu mezquita muy bien. Y como pueden ver, aquí está simplemente muevo este punto a aquí mismo. Y si salto afuera, así es como se ve. Entonces eso es básicamente todo para la Mezquita Verde y para la máscara roja. Mirando rápidamente, lleva esto a cero opacidad para la Mezquita Roja. Hice exactamente lo mismo. Entonces si lo traigo todo el camino arriba, puedes ver que empieza desde aquí. Y es extremadamente pequeña, por lo que realmente no se puede ver. Si hago clic en él, puedes ver que básicamente es una línea porque yo lo quería así y ellos están viniendo justo aquí. Por lo que se están reuniendo en este punto, así que si haces clic en algún lugar por aquí, puedes verlo. Pero si lo amplío para ir todo el camino justo aquí hasta la cima. Ya puedes ver cómo se ve ahora. El rojo también está en cero opacidad. Por lo que no se puede ver en este estado. Y azul uno es 100 obesidad porque la recogimos justo aquí en la parte superior. Entonces básicamente nos unimos aquí mismo. Estamos usando nuestras dos líneas. Por lo que te puedes imaginar esta es la primera línea de la mezquita. Esta es la segunda línea de la mezquita y tienes dos puntos justo aquí y justo aquí puedes dar click en este inicio y simplemente traer de vuelta a aquí dedo del pie colapsarlos y hacer básicamente una sola luz. Y así creé este azul. Es un poco complicado, pero puedes sumergirte un poco en este archivo xz de gráficos, y puedes saltar por dentro si algo no te queda claro. Y en esta siguiente, los incluí a todos así que básicamente moví todas las mezquitas y, por ejemplo, para esta verde, puedes extender esta mezquita para escuchar cuánto, blanca o contada que quieras porque realmente no importa porque está cubierto por esta mezquita azul diciendo va por el rojo. Está cubierto por la mezquita verde porque está justo aquí debajo de la verde. Entonces si solo solía extender este verde para escucharlo cubrirá en este rojo muy bien y porque bajamos la opacidad de ellos aquí mismo. Entonces si un salto dentro, se puede ver que el verde está en cero. Pay city red es con cero opacidad que le dará algún tiempo hasta que el globo se llene y empezarán a aparecer y todo se verá suave y limpio. Ahora el texto. Yo lo moví todo en posición. Entonces si salto dentro y te muestro centro de texto mezquita, si un trabajo a tu lado concedió, me mudé estos dos ceros en el lado superior del dólar estado igual y 98 acaba de entrar en posición. Decir va por esta mezquita justo aquí en el fondo. Por lo que todos estos números están en el centro horizontalmente con esta forma de mezquita, y finalmente amplié los círculos dedo del pie. Siéntete ahí fuera ubicaciones designadas, y eso es básicamente todo. Una vez que consigues el ahorcamiento de ella quiere empezar. Es realmente bastante sencillo hacer esto, pero déjame mostrarte rápidamente en un caso adicional. Entonces vamos a golpear el control en D y sólo voy a borrar todo. Y yo sólo voy a saltar aquí mismo y ver mi círculo. Entonces son 2 50 por 2 50 Déjame golpear control C Hit Control V. Asegúrate de que sea eso en el centro, y solo te voy a mostrar cómo crear ese. Entonces llamemos a este azul y vamos a elegir el azul para las fronteras. Tres c seis f f como así. Y ahora solo te voy a mostrar cómo crear eso. Así que haz click aquí y luego justo aquí. Entonces justo aquí. Haga clic en algún lugar por aquí y ciérrelo. Al igual que así. Ahora quita la frontera. Incluir la película. Esta va a ser nuestra mezquita y seleccionar mezquita y soplar Clic derecho y mezquita con forma . Eso es básicamente todo. Ahora este va a ser nuestro segundo estado. Entonces va a aparecer así. Y en el primer estado, solo voy a hacer doble click en la mezquita, tú consumiendo un poco más cerca para que puedas hacer click en ella y lo que en realidad voy a hacer es simplemente mover este punto hasta aquí hasta que se encuentre con esta luz media. Al hacer clic afuera, ya no se puede ver el color azul. Entonces cuando salto al prototipo click tap para escuchar o dedo del pie animar Easy Now un segundo, y si hacemos clic en vista previa, puedes ver cómo se ve eso. Entonces básicamente, solo imagina este proceso y puedes repetirlo para los tres. Tan solo asegúrate de que el verde venga por debajo del azul y el rojo venga por debajo del verde, por lo que aparecen como una sola línea básicamente. Así que eliminemos estos dos y saltemos atrás de nuestro diseño original. Entonces eso es básicamente todo para el diseño. Vamos a dar click aquí mismo. Golpear prototipo. Lo que en realidad voy a hacer es básicamente lo mismo que te mostré. Así que toca o para animar hacia abajo una nota nítida y fácil. Un segundo cuando hago clic en vista previa, puedes ver justo aquí que estamos en este estado vacío. Entonces cuando haga clic, verano se va a llenar y porque se están desvaneciendo de cero, se ve muy bien con este tipo de facilidad en nuestra transición, y este texto viene muy bien aquí mismo, ambos al fondo. Para que puedas ver que se ve realmente bonito. Y finalmente, una vez más, así es como se ve. Por lo que una vez más, te animo a revisar gráficos, huevos, huevos, profanar, dedo del pie. Juega con este archivo. Si encontraste algo no es correcto o lo encontraste, algo no está claro. realmente puedas ver cómo los creé y cómo puedes crearlos tú mismo. Entonces eso es todo para este video, y te veré en el siguiente. 60. Cargos Xd Archivo de gráficos: en este video. Yo quiero mostrarte gráficos X'd archivo. Por lo que mencioné este archivo varias veces a lo largo de estos videos, sobre todo en esta sección del curso, porque la mayoría fuera, sobre todo los jóvenes diseñadores, encontraron a los gráficos corazón para diseñar y difíciles de entender. Pero en realidad no lo son. Son realmente bastante simples una vez que consigues el ahorcado sobre ellos y quiere que diseñes unos cuantos. Entonces aquí está el expediente. Puedes saltar dentro, puedes echar un vistazo a cualquier cosa. Entonces, por ejemplo, quiero ver cómo anima esto. Puedes hacer click en esto primero nuestro tablero da click justo aquí y luego puedes hacer click entre ellos y ver cómo se anima. Y luego una vez que viste la animación, puedes saltar por dentro. Haga clic aquí en el panel de capas y realmente se puede saltar dentro y ver. Oh, OK, Estos valen clientes. Se trata de líneas horizontales. Se puede abrir esta cuadrícula de repetición. Se puede hacer click en la línea y ver lo grande que es, por ejemplo, y se puede ver OK, este es el azul. Pero tiene algo como esto. Entonces algo así como un Grady int puedes dar click, ¿ Ves? Es ingrediente de lino. Va de blanco cero pagar ciudad todo el camino a azul y se puede ver que el azul está en la parte superior y el blanco está en la parte inferior. Es así como conseguí este efecto Así que realmente puede saltar por dentro e inspeccionar cada elemento que veas aquí mismo. Y como de costumbre, tienes mi permiso completo para usar este archivo tanto para proyectos personales como comerciales para un número limitado de clientes. Por lo que básicamente puedes copiar estos colores. Copia estos efectos, copia estas transiciones y úsalos en tu trabajo de forma totalmente gratuita. Entonces eso es todo para este video, y te veré en el siguiente. 61. Cargador en carga en Cargador Cargador Loader Loader Cargador Cargador de: en este video, te voy a mostrar este spinner de carga, y mientras se está cargando y girando, estos puntos también están cambiando. Entonces, empecemos. Así que ten el aeropuerto apagado. 800 por 800. Y vamos a crear nuestro texto. Voy a escribir una carga, asegurarme de que sea de sentido abierto. Igual que todo lo demás que creamos en el marcador hasta ahora. Voy a colocarlo en el medio, y voy a crear mis tres puntos, va a dibujar un bonito punto por ejemplos. Yo estoy haciendo esto. Entonces seis por seis y voy a seleccionar el color del borde. Elimina el color del borde en sí. Voy de dedo Colóquelo aquí y colóquelo, por ejemplo, de abajo a arriba. 12345 estaba en solo mi tecla de flecha superior. A continuación, lo voy a posicionar aquí mismo. Golpea turno y muévelo. 10 pixels a la derecha hit control escritura duplicada y posicionarlo cinco. Entonces el control de enganche. Deter duplicado una vez más y posicionarlo cinco aquí mismo. A continuación, voy con el dedo del pie. Pídales así. Entonces esto va a ser el círculo uno. Esto también va a ser círculo . Y por último, esto se va a dar un círculo tres, como así los va a mover abajo, agrupar todo junto, Llamarlo texto. Entonces y lo voy a posicionar aquí y aquí para estar perfectamente en el centro. A continuación, vamos a crear nuestro círculo, así que lo voy a crear como 2 50 con 2 50 como Así voy a darle un color de borde fuera DDT así y quitar la película. Voy dedo del pie usado talla trazo apagado 20 y voy a ponerlo en el centro como Así que continuación, voy a dar clic en centro, trazo alrededor de Kip y alrededor de articulación, y ya verás por qué en un segundo me voy a asegurar está perfectamente en el centro, y voy a llamar a éste de vuelta. Voy a conseguir el control de a duplicado, y voy a dedo llamar a este spinner como así va a dar click en el color del borde. Asegúrate de que sean tres e c seis f duro como así, y ahora podemos quitar la espalda. Entonces solo lo voy a esconder por ahora. A continuación, voy a hacer doble clic aquí mismo para entrar al modo de edición. Voy a seleccionar estos dos puntos aquí mismo. Mantén presionada mi vieja tecla y pulsa borrar. Por eso voy a eliminar estos puntos y a continuación en sólo ir a seleccionar estos dos hit delete. Y ahora acabo de conseguir esta forma a continuación, voy a traer la espalda atrás y voy a superarlo tan pastoso, abajo a cero, voy a seleccionar a Thies para golpear control G para agruparlos y llamar a éste por ejemplo, Spinner me gusta así Y eso es todo para nuestro primer estado. Para nuestros segundos estados, voy a conseguir el control de para duplicar esto se aburren. Voy a seleccionar el spinner Haga clic aquí. Entra 3 60% y voy a saltar dentro del texto y hacer algunos cambios. Entonces voy a golpear, controlar, clic y seleccionar estos dos, y voy a rotarlos así. ¿ Y recuerdas este efecto? Si ves las lecciones anteriores, voy a golpear control la una vez más para crear 1/3 1 Quiero decir, va a asegurarme de que sea a las 3 60 una vez más y finalmente voy a seleccionar estos dos ahora y me voy a dar la puntera rotarlas usando mi tecla de turno así y eso es básicamente para todo el efecto. Al igual que rápidamente. Adelante y comprueba. Si los viejos Fullers están cerca, lo están. Y ahora llega el momento del prototipo. Voy a hacer clic en un prototipo arrastrado vela azul, usar el tiempo usado auto animate para la transición, está entrando y un segundo ahora para el 2do 1 y sólo va a usar exactamente la misma configuración . Y para el 3er 1 vamos a traerlo de vuelta al frente como así vamos a usar la transición del tiempo y podemos usar Dissolve. Fácil ahora en duración va a ser cero segundos, señor. Contactando doble 0.0 centro de senos y vas a conseguir este cero segundos. ¿ Ahora qué? Esto Que está trayendo de vuelta de este efecto todo el camino hasta el inicio. Entonces los puntos van a cambiar aquí. Se va a girar. Los puntos van a cambiar aquí también va a pasar un tiempo más y luego con el retardo apagado, cero segundos, me refiero a duración de cero segundos. Volverá directo a éste y luego comenzará todo de nuevo Así que vamos a previsualizar. Es como la primera vez que hace clic aquí y puedes ver que empieza a girar, y estos puntos también están cambiando. Ahora puedes dejarlo así si quieres. Pero puedes, por ejemplo, crear otro y crear un rectángulo médico azul en el medio. Por ejemplo, que sea en los tres a cero opacidad y luego que sea realmente pequeño como un píxel por un píxel a cero opacidad. Y luego en esta final, cuando inicie un stop spinning, este spinner y texto se desvanecerán a cero y ese azul se ampliará para llenar todo nuestro puerto. Y luego puedes hacer la transición de esa manera a tu siguiente pantalla. Por lo que de pantalla de carga tomó siguiente pantalla usando ese color azul. Entonces eso es todo para este video, y te veré en el siguiente 62. Tarjeta Flip de tarjeta: en este video, te voy a mostrar cómo crear este flip de producto de tarjeta. Por lo que tenemos este producto aquí mismo, y cuando el usuario quiera hacer clic para aprender más, se volteará y revelará un poco más de información. Y luego tenemos esta flecha hacia atrás. Por lo que al hacer clic en él, volverá a la tarjeta original. Entonces, empecemos. Por lo que aquí tienen dedo del pie son pájaros fuera 800 por 800 un diseño terminado. Pero déjenme mostrarles rápidamente cómo crear estos zapatos. Entonces ambos zapatos son P y G's, lo que significa que esas imágenes tienen fondos transparentes. Entonces déjalo ¿Podríamos tirar de esas imágenes si me alejo un poco? Estos son en realidad mis zapatos, Así que me encuentro con algunas fotografías fuera de ellos y las corté usando photoshop. Como puedes ver, no son de calidad de estudio, pero lo harán por este video. Simplemente entonces traeré esta imagen dentro. Yo lo pasaré aquí mismo, pero no dentro de la tarjeta a pero justo aquí en la tarjeta uno. Entonces déjame hacer eso una vez más. Lo traeré todo el camino de vuelta afuera, así. Por lo que ahora está afuera en el deporte de paga. Haré clic en la tarjeta uno y luego llevaré la imagen dentro. Entonces como puedes ver, está en la tarjeta uno, y simplemente mantendré presionada mi tecla de turno y bajaré el tamaño de esta imagen. Acerque un poco más, por ejemplo, a algún lugar por aquí. A ver. Asegúrate de que esté en medio de este círculo así como esta tarjeta, y voy a hacer lo mismo por la imagen número dos. Por lo que voy a dar clic en él Dragon posicionarlo en su lugar como así incluso puedo rotarlo un poco. Entonces, por ejemplo, así, así, asegúrate de que esté en el medio y, por ejemplo, colóquelo en algún lugar por aquí. Asegúrate al cortar tus P G de que no tengas el exceso de espacio, sobre todo en esta imagen, para que puedas imaginar que toda tu imagen original fue este puesto. Entonces hasta aquí, por ejemplo, cuando estés cortando, asegúrate de recortarlo hasta aquí para que no tengas acceso al espacio de desperdicio básicamente alrededor esa imagen. Entonces ahora que lo he hecho, como podría mostrarte en el diseño original. Entonces aquí tengo la tarjeta. Y como vieron las imágenes justo aquí debajo de eso, tenemos el círculo, que es de 2 30 por 2 30 Y tiene este color fuera de un siete, un 578 y Holly consiguió este color es simplemente lo muestreé de estas letras justo aquí en el disparar por debajo que tenemos el nombre del producto el cual está abierto desde 20 Bolt y por debajo de ese sentido abierto 20 irregular. Tenemos justo la descripción básica fuera del producto. Por último, tenemos el fondo, que está a las 3 50 con 70 y aprender más está abierto, dice 20 regular y blanco. Por último, tenemos este trasfondo. Es radio de esquina blanca apagado 20 y tenemos esta sombra. Por lo que una vez más, todo cero tan viejo negro sombra lo 16%. Pero ahora lo tenemos a cinco y ancho x y eje y este desenfoque fuera 20 por lo que va un poco más allá afuera. Entonces esa es nuestra tarjeta número uno. Y en cuanto al auto número dos va, déjame revisar semanalmente. Si este círculo es del mismo color que éste, debería serlo. Lo es. Por lo que tenemos esta flecha en la parte superior y ustedes vieron esta flecha en los videos anteriores. Y simplemente posicionarlo aquí mismo. Tenemos el mismo círculo. Tenemos el zapato y finalmente tenemos el texto del párrafo justo aquí. Si no sabes cómo conseguir párrafo, simplemente puedes hacer click en el texto. Haga clic en algún lugar por aquí, por ejemplo. Mantén el clic izquierdo del ratón y luego arrastra el área donde quieres escribir también tu texto . El texto en sí. Lo tomé de la página oficial de Adidas para esta página de producto, así que solo basé la insight, y eso es básicamente todo para el texto. Ahora sigamos adelante y te mostraré cómo diseñar este efecto flip de tarjeta y una cosa final que olvidé mencionar. Como se puede ver, no tenemos el color blanco para el nuestro puerto, sino más bien este color gris claro, que es una vez más, DDT. Yo solo quería llevar la tarjeta un poco adelante para que puedas ver cómo se ve ahora para que este efecto puntera funcione correctamente, tenemos que hacer algunos cambios. Entonces el primer cambio es que sólo voy a dedo del pie hacer un duplicado de este fondo, y lo voy a arrastrar afuera a algún lugar por aquí. Y luego voy a seleccionar la tarjeta, click en esta BG Original y quitar la sombra como Tell y voy a hacer lo mismo para que el auto lo controlara para duplicar el BG. Arrástralo afuera para escuchar, muévelo abajo y quita la sombra del fondo original como So Ahora por qué hicimos esto es que necesitamos exportar estos diseños como siendo jugo, así como imágenes con transparencia para que podamos traerlos de vuelta a este diseño original. Y te voy a mostrar cómo en un segundo para que puedas dar click en este 1er 1 Así Karlan golpeó control E o comandar jugo PNG. Desde este menú desplegable, puedes usar el diseño. Asegúrate de tener la configuración de exportación muy ganas de exportar. Esta imagen está en mi caso, es solo escritorio y voy a dar clic en exportar y se va a exportar esta tarjeta como una imagen PNG sin la sombra porque esta copia de fondo tiene la sombra y no queremos que ésta tenga una sombra, por lo que voy a hacer lo mismo para que el auto lo acaba de seleccionar control de golpe E. Y me voy a volver a exportar a mi escritorio como un jeep transparente siendo. Ahora lo que vamos a hacer es que vamos a ocultar la tarjeta uno y el auto a voy a hacer una copia de las tarjetas para asegurarnos de que sabes cuál es cuál. Por lo que voy a seleccionar estos dos y simplemente moverlos un poco y se van dedo del pie hacer una copia de esta tarjeta uno también. Voy a traer esto para atrás un poco. Asegúrese de tener el mismo espaciado entre ellos. Entonces son 70 así. Por lo que una vez más, d siguen siendo la tarjeta número uno. Y estos dos son tarjeta número dos, y puedes comprobarlo y verlo por ti mismo. Es el auto número uno en el auto número dos. Ahora lo que vas a hacer es que vamos a traer esas imágenes. Entonces para la tarjeta número uno, voy a seleccionar aquí mismo. Voy a traer el auto número uno y simplemente arrastrarlo y dejarlo caer en algún lugar por aquí. Voy a posicionarlo en su lugar, y puedes dar click aquí y justo aquí para asegurarte de que esté en la posición. A continuación, voy a golpear el control. C. Haga clic aquí, golpee control V péguelo y se van del dedo del pie. Muévete sólo un poquito. Por lo que viene debajo de esta carpeta. Ahora esta parte realmente no importa, pero me gusta organizar mis capas. Ahora hagámoslo rápidamente para el auto número dos, así que voy a arrastrarlo desde mi escritorio, colocarlo en su lugar, asegurarme de que esté en el medio y hacer lo mismo para éste, así que asegúrate de que esté en el medio como bien. Ahora, como pueden ver, ahora tenemos duplicados, y esto es importante tener, y les voy a mostrar por qué en tan solo un segundo. Entonces para que ese auto haga voltear efecto, lo que tenemos que hacer es sesgar esta imagen. Por eso lo exporté como imagen como PNG, porque para sesgarla como diseño en Adobe X'd, es realmente difícil de hacer, y vas a tener estos efectos raros. Entonces, por ejemplo, este zapato no se verá adecuado. Este círculo se va a quedar raro, sobre todo el texto y demás. Por lo que es realmente fácil exportar dedo del pie. Es P y G y luego trabajar con imágenes PNG. Entonces para estas copias, así que segundas copias de cada una, lo que realmente vamos a hacer es que vamos a hacer el ingenio de una. Entonces como puedes ver ahora, el ingenio es 445 Así que me voy dedo del pie en realidad golpea uno justo aquí, presiona enter en mi teclado. Y si obtienes este tipo de efecto extraño, eso significa que tienes remolque desbloquea este aspecto. Entonces voy a dar click aquí mismo para bloquearlo. Voy a pegarle un dedo del pie ahora. Y como puedes ver, altura ahora se mantiene en 671 ya que debe dar click en el BG y hacer lo mismo. Así que golpea uno y asegúrate de seleccionarlos a ambos y asegúrate de que estén en el medio así. O simplemente puedes posicionarlo así uno por uno Si no quieren comportarse correctamente y finalmente reducir la opacidad fuera de la tarjeta número 120 así, y dejar la obesidad fuera BG a 100 porque debería quedarse así a continuación. Nosotros vamos a hacer lo mismo por esta tarjeta también. Entonces solo me voy de pie. Pídales como lo hice para la tarjeta. Uno tan seleccionado. Asegúrate de que esté bloqueado. Haga clic en uno y haga lo mismo para el BG. Entonces él quiere. Al igual que mueve el VG en el centro, mueve la tarjeta en el centro y eso es básicamente todo para nuestro diseño. Ahora empecemos a crear prototipos. Y como viste, dejé las cartas dentro. Por lo que en cualquier momento, si deseas hacer algún cambio, puedes saltar por dentro. Cambiar el cólera como incluir nuevas imágenes y alguien. Tan solo asegúrate de que si quieres presentar tus diseños a tu cliente en este usando este efecto, asegúrate de exportarlo. SPG Entonces tráelo de vuelta así. Y luego puedes ocultar el diseño original y luego hacer el diseño. Entonces haz el prototipo una vez más. Entonces para el prototipo en sí, voy a dar clic en alguna parte. Entonces en esta tarjeta la voy a arrastrar para oírte paso o dedo del pie. Enemigo relajando y 0.4 segundos Ahora en este, vamos a usar el tiempo como así auto animate fácil ahora 0.4, y en este porque va a voltear desde aquí. Dedo del pie esto. Vamos a usar esta flecha hacia atrás, así que toca o para animar Fácil. Ahora 0.4 segundos y finalmente, en este, vamos a usar el tiempo una vez más. Entonces vamos a comprobarlo. A ver cómo se ve. Entonces, como pueden ver, aquí están, aquí está nuestra tarjeta. Voy a dar click aquí mismo se va a dar la vuelta y sesgar para luego mostrarnos esta información. Y cuando haga clic aquí mismo, se va a dar la vuelta y muestra desinformación una vez más. Entonces no es una tarjeta perfecta, pero le da este tipo de ilusión volteando y luego reveladora. Y esta siguiente tarjeta. Por lo que realmente funciona muy bien, sobre todo si tienes colores de fondo consistentes. Entonces sí se ve muy bien, pero creo que ella para agallas dedo del pie inferior. ¿ Pagas Ciudad de ello aquí? Sí, así que hagámoslo una vez más, así y ahora se ve mucho más limpio. Entonces eso es todo para este video, y te veré en el siguiente 63. Desplazamiento del artículo: en este video, vamos a crear este artículo y en este artículo ayudará al deslizador. Por lo que en un clic y arrastre el deslizador hacia abajo, se puede ver que el texto se está moviendo hacia abajo, y cuando hago clic y trayendo de nuevo hacia arriba, se puede ver que lo trae de nuevo hacia arriba. Y puedes hacer esto para ilustrar, obviamente a tus clientes cómo podrían verse algunos artículos de la página. Y también puedes ilustrar esto dentro de los AP móviles creando este disparador de arrastre, que imitará el gatillo de arrastre con el dedo que realmente haces en tu teléfono móvil . Entonces empecemos. Muy bien, así que este es súper fácil de crear, y todo lo que tienes que hacer es crear un marcador de posición de imagen para que puedas usar un rectángulo para simplemente dibujar son bonitos rectángulo grande. Quita el borde y simplemente arrastra y suelta la imagen dentro. Y una vez que lo haces una vez que lo hizo, puedes hacer doble clic en esa imagen y luego posicionarla. De todas formas quieres dentro de esa imagen titular de policía. Entonces puedes renombrarla imagen como lo hice aquí, y mis dimensiones son 800 por 300 porque mi nuestro puerto es 800 por 800 en este caso. Por lo que te da este bonito rectángulo grande de brezo. A continuación creamos la sombra. Entonces para la sombra, estoy usando 000 negro tan completo, pero esta vez al 10% de descuento en base porque lo encontré 16. Es sólo un poco demasiado. Además, estoy usando cero para la ex 10 40 y y desenfocar 10 también para conseguir esta bonita sombra de aspecto. A continuación, creé el texto. Entonces para el texto, tengo montañas fuera de Noruega, que es texto de título de arte abierto Sands 30 bolt y está alineado a la izquierda. Lo posiciono a 40 píxeles de este borde izquierdo y creé este texto de párrafo el cual viste en algunos de los videos anteriores. ¿ Cómo se puede crear qué? Déjame mostrarte una vez más para poder controlar DE para duplicar esto, y voy a eliminar rápidamente todos estos elementos de la página. Simplemente arrastraré un bonito rectángulo, algo así o bonito cuadrado para el texto y escribiendo solo unas letras. Voy a dar click afuera para conseguir esta selección, y puedes posicionarla como. Entonces, como cualquier otro elemento dentro del aeropuerto, y estoy usando un enchufe. El enchufe es gratis. Mucho Epsom. Hace frío. Y si no sabes instalar el enchufe una vez que haces click justo aquí en el panel de enchufe INS , tienes este signo más puedes dar click en él y puedes dar click aquí para buscar. Puedes escribir Lauren Yypsum y simplemente haz clic en instalar, y después de hacerlo aparecerá aquí mismo. Por lo que hay que hacer es crear esta capa de texto, luego seleccionado haga clic en carga de yeso relleno de texto marcador de posición, y se puede utilizar cualquiera fuera de estas opciones. Estoy usando este Cicerón Inglés y haga clic en insertar texto. Eso es todo. Insertará las pilas muy bien en este cuadro delimitador, y tienes este bonito párrafo con el que puedes jugar. A continuación, te mostraré cómo crear este deslizador. Entonces todo lo que hice fue crear estas dos formas, así que esta forma de fondo es solo un rectángulo llano. 12 es el ingenio para 44 para la altura, y va en tamaño y en altura con esta montañas fuera de Noruega título. Entonces sube hasta aquí y simplemente sube aleatoriamente hasta aquí. Pero puedes, por supuesto, ser más específico si quieres. Y finalmente tengo el slider, que es que acabo de duplicar. Este fondo creó este más ligero y la altura está en 60 y el color es de 70 70 70 mientras que el color de fondo es D dd. Entonces eso es básicamente todo para todo el diseño. Se puede ver lo realmente simple que es. Y para este párrafo, todo lo que hice es extenderlo todo el camino hasta aquí, y simplemente seleccioné en la parte con texto porque muchos miembros que terminaron justo por aquí puedes seleccionar esta parte del texto golpeó el control C y luego espacio de prensa y luego controlar control V control V control. Nosotros dedo del pie hacemos algunas copias más por la línea, y eso es básicamente ahora para este sexo segundo estado. Lo que hice es mover este slider todo el camino hasta esta imagen de parte. Yo lo moví el texto todo el camino hasta aquí, y el título va hasta aquí. Pero si recuerdas de los videos anteriores. Si haces un grupo como yo para el texto , estará contenido dentro del aeropuerto. No irá más al ritmo porque si las montañas de Noruega estaban fuera de este grupo de texto, por ejemplo, irá al pasaporte y la animación no funcionaría. Todo lo que tienes que hacer ahora es prototiparlo para que pueda dar click en este deslizador, arrastrar el mango. Voy a usar drag, auto, animates, animates, easing out, y finalmente hacer lo mismo para este tan seleccionado de aquí, y simplemente arrastrarlo hacia atrás y contendrá el mismo efecto en su interior. Entonces cuando golpeo la vista previa, puedes ver cómo se ve, y puedes ir tan lento como quieras para imitar esa experiencia de lectura de artículos, o puedes ir tan rápido como quieras. Realmente no importa, y realmente depende de ti. Se puede, por supuesto, añadir algunos efectos más. Entonces, por ejemplo, puedes traer el tiempo. Entonces cuando se publicó este artículo, puedes traer el agua para que podamos ponerla aquí mismo. Y puedes por supuesto, deslizó esta imagen para que pareciera ordenar efecto de paralaje para que puedas hacerlo más pequeño en esta etapa, o puedes hacerlo aún más grande de lo que es aquí mismo. De verdad depende de ti, y no puedes enfocar todos esos detalles con tu artículo. Y se puede, por supuesto, por ejemplo, traer un botón, que estaba contenido justo debajo de este texto y cuando hacen clic en el botón justo ahí. Condenaron, por ejemplo, compartir este artículo o pasar a otro artículo o volver a la página principal o cualquiera que sea la opción. Entonces eso es todo para este video, y te veré en el siguiente. 64. Desplazador de valor: en este video, te voy a mostrar cómo podemos crear este slider de valor. Por lo que cuando haga clic en esta flecha, se volteará y todas estas otras opciones se van a meter en posición. Entonces puedo cambiar en estos valores y moverme alrededor de estos deslizadores y puedo traerlos de vuelta a sus posiciones originales y uno y hecho. Puedo pegarle aquí mismo para traerlo de vuelta. Entonces, empecemos. Entonces lo que tengo aquí es el diseño terminado y todos estos son tableros están en 800 por 800 fugarse. Comprueba rápidamente este, que se expande, y llegaré a éste que se ha derrumbado. Entonces así es como se ven Así que si hago clic aquí mismo, se pueden ver todas estas capas en su interior. Pero disecemos sólo este, porque todos son exactamente iguales. Por lo que aquí tienen alarmas de medios de tono de llamada y llamadas en la parte inferior. Entonces si abres el tono de llamada, es como se ve. Entonces tenemos esta flecha justo aquí, que es sólo un icono estrecho, y luego tenemos estos iconos aquí mismo. Ahora éste es icono de tono de llamada siguiente arriba, tenemos texto de tono de llamada el cual está abierto desde 25 en este caso, y 70 70 70 para el color. Y finalmente tenemos BG para el fondo ahora para el slider ya te mostró esto en uno de los ejemplos anteriores, tenemos el círculo que es sentir con color blanco, sin sombra de borde. Por lo que por defecto sombra negra 16%. Y en este caso, los valores son dos exposición a la posición Y y 10 para el desenfoque. Y así es como conseguí este efecto de desenfoque para el fondo debajo de que tenemos la mezquita. Entonces es la misma mezquita como ya te muestran en número fuera de videos anteriores y se puede ver que muevo este poco dedo del pie aquí. Y si quiero, simplemente puedo traer de vuelta a aquí. Haga clic afuera y luego no tiene mezquita en absoluto. Y obviamente este círculo seguirá a la izquierda y a la derecha, y solo puedes mantener el turno y moverlo a su posición. Y finalmente, lo que tenemos aquí está vacío, que es sólo esta capa de fondo gris claro, y está en el DDT. Colorea ahora para las tallas. El fondo es 700 con 1 28 y este deslizador vacío es de 5 20 a 12 pies de altura y la mezquita y capa llena, obviamente muy como lo mueves a lo largo de Circle es 30 por Turney, y eso es básicamente todo para la configuración. Ahora creé todos estos copiosos justo a continuación cambiar el texto y los iconos para que correspondan con los valores en cuestión. Y por último, esta flecha va a rotar. Entonces si ven justo aquí, está apuntando hacia arriba y en el primer ejemplo está apuntando hacia abajo. Ahora, cuanto al prototipado, parte va, lo que tienes que hacer es en este primer caso, acabo de moverlos. Por lo que los tres los seleccioné, Muévelos en su lugar con este y bajen. ¿ Pagas City 20 en este? Van a gastarse dedo del pie con 20 píxeles entre sí. Aquí mismo. Ese es el espaciado. Y la opacidad es obviamente 100 porque van a chasquear en posición a continuación. Acabo de crear tres copias más para estos tres deslizadores. Por lo que moví este 1er 1 luego movido el 2do 1 y finalmente movido el agitado todo el camino hasta el 100% en la posición. Y por último, cuando lo prototipeas, puedes devolverlo a su posición original. Por lo que irá de aquí, Tohir. Y luego puedes mover estos encendedores hacia abajo a su posición. Ahora para un prototipo en parte, si hago clic en un prototipo, se puede ver lo que hice. Por lo que hice clic en esta flecha para ir a este segundo nuestro puerto utilicé tap también animar y chascar en posición. Y 0.4 segundos fue la duración. Y cuando haces click en la flecha para volver atrás, cambié un poco. Así que utilicé exactamente la misma configuración aquí. Pero usé facilidad fuera y 0.2 segundos porque quería que se aliviara escritor en lugar de snap y para la duración, Toby un poco más corto. Entonces en lugar de cero punto para ello 0.2 porque quería que volviera un poco más rápido. Entonces si hago clic en vista previa, se puede ver eso. Entonces tenemos estos fuera para la espalda y tenemos snap para que se metan en posición. También puedes usar snap, pero irá justo por encima del borde de parada solo un poquito, y puedes ver ese tipo de efecto fantasma Por eso usé está fuera y 0.2. Entonces, ¿no ves ese efecto ahora para estos deslizadores? Lo que hice es, por ejemplo, hice clic en este punto y lo muevo dedo del pie este nuestro puerto y para ello usamos drag auto animates y está adentro afuera porque quería facilitar dentro y despegar la animación. Y básicamente hice exactamente lo mismo por todos estos descansos fuera de los puntos y nuestras tablas. Entonces, como pueden ver, tenemos exactamente la misma configuración para éste y para éste, y volví por cada uno de ellos para traerlos de vuelta a su lugar original usando exactamente los mismos ajustes. Entonces si hago click en el 1er 1 click de vista previa y la ampliaré apenas un poquito. Y incluí en este fondo de grado ligero para el propio aeropuerto porque quería que esto destaque solo un poquito mejor porque puedes encontrarlos en tus dispositivos móviles, por ejemplo, y por lo general tener fondos borrosos. Por lo que estos fondos blancos de los propios artículos van a saltar un poco mejor contra ese fondo azul por lo que al hacer clic en él, se expandirá. Condonas colapsar si quieres. Y la flecha se va a dar la vuelta, obviamente. Y puedes mover estos deslizadores por ahí y las mezquitas seguirán porque acabo de extender las mezquitas hasta aquí y mover los círculos hacia atrás para que puedas moverlos de nuevo a su posición original. Y se puede, por supuesto, jugar con él. Puedes ir todo el camino a cero, pero solo quería dedo del pie mostrarte cómo puedes crearlo así también. Entonces eso es todo para este video, y te veré en el siguiente. 65. Búsqueda: en este video, voy a mostrar cómo puedes animar el campo de búsqueda. Por lo que cuando haga clic aquí, se expandirá tipo en París, y estas tarjetas volarán desde la parte superior. Entonces empecemos. Por lo que tengo esto para nuestros puertos aquí mismo, y todos ellos están en 800 por 800 voy a correr rápidamente con ustedes en el diseño. Entonces lo que tenemos aquí mismo es el texto. Entonces la búsqueda de cualquier cosa está abierta desde 20 regular, y tenemos la búsqueda, que está justo por encima de buscar cualquier cosa. Texto, porque en este próximo nuestro puerto, va dedo del pie expandirse y cubrir sobre buscar cualquier cosa y para ello. No lo creé usando un labio todavia, pero creé usando rectángulo para también, si un clic en la entrada, se puede ver que el radio de esquina es de 100 cuerpo pelea menor que 20 Se puede ver que es solo un rectángulo básico. Lo que eso nos permitirá hacer es entonces poder crear este rectángulo expandido, y va a tener este bonito radio de esquina grande para indicar que se está expandiendo desde el círculo. Esto también se puede lograr, utilizando el rectángulo como elemento separado, luego en Ponerlo dentro sobre mezquita y luego expandir la máscara hacia la izquierda. Pero me pareció que esto era sólo un poco tedioso, y esto es simplemente súper simple de crear. En cuanto al ícono de búsqueda, no es realmente un ícono, sino un círculo y la línea, y esta línea es una se puede ver 70 17 y una para el ingenio para el campo. Está en 70 70 y este círculo es el mismo, pero es un 23 23 para indicar este ícono de búsqueda ahora en esta siguiente pantalla, como se puede ver aquí mismo con hicieron algunos cambios importantes. Por lo que para la línea, como se puede ver, Circle ahora está en cero opacidad en este siguiente, nuestro puerto para la línea se rotan. 45 grados es que se puede ver que está justo aquí a 45 grados menos 45 y justo aquí, si hago clic en él, está en cero. Pero su tamaño también aumentó de 17 dedos Turley, como se puede ver aquí mismo, y lo posiciono Toby en el medio horizontalmente con este campo de búsqueda así como gira aquí mismo. Se mueve todo el camino justo aquí a la izquierda, y se va a expandir en tamaño también desde 17 abogado y este círculo va a desaparecer todos juntos. Ahora, una vez más, solo quiero mencionar que tienes este ejemplo en tu archivo de efectos X'd para que puedas comprobarlo en cualquier momento si algo no está claro durante este video. Entonces, como dije, este campo se va de dedo gastando en encuadre buscar cualquier cosa ahora en esta siguiente nuestra búsqueda de puertos vistiendo cualquier cosa sigue en 100 opacidad, pero puedes bajarla a cero si quieres, para hacer ese efecto aún más pequeño. Pero no lo hice porque tenemos este color de fondo y es el mismo color que para buscar cualquier texto. Y de esa manera simplemente se mezcla bien con ese fondo, y esta sensación de búsqueda también tiene la sombra. Entonces si hago clic en la entrada, se puede ver la sombra lo 05 10 mismo color, tan negro completo y 16% 40 opacidad. Entonces como se puede ver sólo una sombra regular básica y se va a expandir y cubrir por aquí . Lo que tenemos a continuación son las mezquitas de texto. Entonces si salto dentro, solo voy a esconder esto por un segundo. Lo que tenemos para la mezquita es básicamente exactamente de la misma manera, como te mostré en múltiples videos. A lo largo de este curso, tenemos el texto. Tenemos la mezquita, así que básicamente es una forma sobre un texto. Puedes seleccionarlos, hacer clic con el botón derecho en mezquita con forma y luego simplemente mover esta mezquita para ocultar el texto al principio. Declara fuera de tu animación y finalmente tenemos las tarjetas. Pero vamos a cubrirlos. Primero cubramos el color excesivamente así porque nuestro tablero es 800 por 800 este color de fondo excesivamente es exactamente las mismas dimensiones, lo que 800 por 800 y que esta opacidad de primer estado se baja en 0%. Entonces cuando el usuario haga clic, campo de búsqueda va a aumentar los 100 como se puede ver aquí mismo mientras todo lo demás está sucediendo. Ahora, vamos por las cartas. Entonces si salto aquí mismo, las cartas son básicamente un solo elemento. Entonces si te mostré, es sólo son rectángulo regular con el radio de esquina 20 El tamaño es de 3 40 con 235 y tengo 40 píxeles en el medio. Cada uno de ellos. Simplemente agradable espaciado. Por lo que 40 de aquí. Aquí, aquí. Y puedes agregar algunos más aquí si quieres incluir gesto de arrastre de éste también. Pero no quería incluirlo por el momento. Ahora, finalmente, porque los usuarios están escribiendo en París, como se puede ver aquí mismo, esta línea se mueve. Entonces desde aquí, mientras revelas el texto, se mueve hacia aquí y se queda ahí en esta final nuestro puerto, y como están escribiendo en París, va a escupir todos los resultados de París, como pueden ver aquí mismo en orden cronológico. Entonces éste es hace tres minutos, hace seis minutos, hace nueve minutos y hace 13 minutos. Ahora, si salto dentro y hago clic en eso, se pueden ver tres minutos sentido abierto 10 regular y un out en París sentido abierto a cualquier regular. Acabo de hacer doble clic en el interior, seleccioné esta porción fuera del texto, haga clic en el color y agregué el color azul, que es una vez más tres e. C seis f f. Entonces así es como creé eso. cuanto a la imagen, en lugar de darle un radio de esquina de 20 en todas partes, le di radio de esquina apagado 20 a la esquina superior izquierda y superior derecha, mientras que la esquina inferior izquierda e inferior derecha están en el radio de esquina cero. Entonces por eso tenemos esta línea recta pasando. El siguiente paso fue solo incluir una imagen, y todas estas imágenes son gratuitas. Y de un splash dot com, eso es básicamente todo. Eso es empleados de House para crear este diseño. Y para este estado, Yo Justo Cuando hice esto, hice una copia del mismo. Y en este original que creé déjame incluirte pague ciudad. Acabo de mover estas tarjetas fuera del camino y moverlas por ahí para que puedas moverlas como quieras . Yo lo hice de esta manera. Entonces vienen de arriba hacia abajo. Puedes hacerlo al revés como si vinieran de abajo hacia arriba. O tal vez puedas incluir dos fuera de estos de la izquierda para ir a la izquierda, dos de estos a la derecha para ir a la derecha y en esta pantalla vienen de ambos lados y se reúnen en medio en este punto de aquí mismo. Pero lo que es crucial es una vez que creaste todas estas tarjetas en tu último nuestro puerto para hacer una copia de ellas y duplicarlas y pegarlas básicamente en todos tus otros nuestros tableros. Entonces cuando hice esto, me pasaré por el apace City 20 odiaba el control C y los basé en exactamente los mismos lugares en todos fuera de estos otros puertos. Y eso es básicamente todo para el diseño. Es súper simple, súper sencillo, así que básicamente expande este círculo Togo al rectángulo. Mueve esta línea para pasar de 45 grados a 90 grados, aumentarla en altura de 17 a 30 y luego simplemente cuando los usuarios empiecen a escribir, revelará el texto de París, y esta línea se moverá hasta el final. Como se puede ver aquí mismo también. Y todas estas cartas son irán de cero opacidad toe 100 base T y volverán a sus posiciones originales. Ahora, en cuanto al prototipado, es extremadamente sencillo. click en el prototipo, y para este 1er 1 creé un gesto de tap aquí mismo para este 1er 1 Así que si inspeccionamos, puedes verlo paso o dedo del pie animar. Aflojando en 0.6 segundos Ahora para el 2do 1 porque cuando tocan, queremos que pase algo. Entonces en este caso, este campo de forma va dedo del pie expandir el dedo del pie aquí. Entonces por eso vamos a usar el tiempo. Dale un retraso de 0.6 segundos. Por lo que va peso del dedo del pie una vez que toques 0.6 segundos y luego durante esta duración de un segundo se va a facilitar dentro, fuera del movimiento y expandir todo el camino hasta aquí. Por lo que toda esta interacción va a durar 1.6 segundos. Básicamente, Así 0.6 para la liberación y la duración en sí es de un segundo perdón por el retraso 0.6. Entonces en esta siguiente, lo que hice se crea tiempo una vez más. Entonces a partir de este punto, cuando revela todo el campo de búsqueda dedo del pie este punto cuando teclea París y este indicador se mueve hacia la derecha, vamos a tener básicamente el mismo retraso. Entonces como puedes ver aquí mismo, tenemos el retardo de 0.6 segundos de duración un segundo tiempo o toe animate y está adentro afuera porque queríamos facilitar en la animación y está fuera, fuera de la animación. Y por último, en este, tenemos todas las cartas en su lugar, así que eso es básicamente tú puedes incluir. A lo mejor una vez que este círculo va dedo del pie se desvanecen a cero, como se puede ver aquí mismo cuando me inclino sobre él. Entonces sigue aquí, pero está en ciudad de cero paga. Si vuelvo al diseño, lo puedes ver ahí mismo en lugar de él. Podrás entonces tal vez incluir un icono de cierre aquí mismo. Entonces una vez que eso se desvanece, esto se mueve. Quizás en este estado, mientras los usuarios empiezan a escribir, puedes tener este tipo de icono X, pero tal vez puedan hacer clic en algún lugar fuera o tocar en algún lugar fuera. Eso depende realmente de ti y de tu diseño. Por lo que no es hit preview. Voy a seleccionar este one click play toe, previsualizarlo, agrandarlo un poco, así que cuando haga clic aquí, se expandirá. Espera un poco. Escribirlo París, y luego estas tarjetas van del dedo del pie volando desde la parte superior. Entonces si lo cambio una vez más, se puede ver toda la animación una vez más. Por lo que París pesa y luego estas tarjetas droppin te enfurecieron una vez más para revisar efectos huevos, profanación de los cuales te vas a meter en el discurso. Echale un vistazo. Si algo no está claro, inspecciona algunos de estos elementos y mira si te perdiste algo. Si estás confundido de algo, por eso estoy haciendo estos huevos desfilados para cada una de estas secciones fuera del curso para que puedas inspeccionar todos estos elementos después de ver estos videos, o mejor aún, durante tu viendo estos videos para que puedas asegurarte de que recibiste el efecto. Lo quieres justo desde el principio. Entonces eso es todo para este video, y te veré en el siguiente. 66. Popup Popup en la ciudad Popup Popup Popup en Popup: en este video, vamos a diseñar algunos de esos aburridos pop ups que todo el mundo odia. Entonces imagina que estás en la página del producto y estás tratando de comprar algo. Pero tal vez cambiaste de opinión. Entonces en cuanto intentes salir del sitio web, el arriba salta hacia arriba, y cuando intentas cerrarlo, saltará de nuevo hacia abajo. Entonces, empecemos. Entonces aquí tengo a nuestros puertos al 800 por 800 reconocerán algunos de estos elementos porque los reutilizo, sobre todo de este apartado. Entonces tenemos este show. Tenemos exactamente el mismo texto que utilizamos en este ejemplo para el zapato. Y finalmente tenemos este fondo. Entonces es el mismo fondo que usamos del show. Yo sólo lo hice más grande. Entonces en este siguiente, tenemos este pop up y déjame ir un detalle a la vez. Entonces primero lo primero, tenemos pop arriba por encima de todo, así que peleas. Zoom un poco fuera. Se puede ver que aquí es más grande, pero llegaremos en un segundo, y hemos llamado demasiado, que básicamente es este color. Pero al 0% Pacenti. Acabo de hacer una forma de rectángulo al 800 por 800 más bajo do pegado cero en su lugar justo encima este zapato. Por lo que en esta próxima pantalla las mujeres pasan a ella. Ya verás que está al 90% de descuento en Base City, por lo que debajo de los zapatos, dijo. Tenemos el texto, así que aquí mismo tenemos una superestrella. Tenemos, um, este texto de abajo y todo si lo selecciono de aquí, es sentido abierto a cualquier negrita para el título y el nombre del producto, y estos dos son sentido abierto 20. Y ya lo viste en el video anterior. Y para el fondo, escuchamos el botón it 3 50 con 79 finalmente, el precio está abierto desde color regular y blanco. Entonces básicamente lo hay para este 1er 1 Ahora para el 2do 1 déjame pasearlo. Entonces ya te conté sobre el pop up en el color excesivamente, y si escondo la superposición de color, puedes ver tenemos exactamente los mismos elementos en el fondo como están aquí en el 1er 1 pero solo están ocultos usando esta llamadora ordenadamente Entonces para el propio pop up. Si lo abro, se puede ver que tenemos icono cerrado justo aquí tenemos este texto el cual está abierto desde 20. Posición audaz justo en medio de este pop up, así. Entonces justo en el medio horizontalmente tenemos correo electrónico, que es solo una entrada y un rectángulo regular, y eso usamos en las formas. Ejemplo. Entonces exactamente este mismo y tenemos tu correo electrónico, que está abierto, dice 20 una vez más D d. D para el color y la entrada es de 300 con 70 blanco para el color, ocho para el radio de esquina y finalmente bordean 77. Y qué botón tenemos de 2 a 5 con 70. Suscribirse es blanco Open Sense 20 y está posicionado en el medio es que puedes ver justo aquí y finalmente tenemos distritos no te gastaremos, te prometemos está abierto desde las 18. Así que lo hice solo un poco más pequeño para caber aquí mismo. Y tenemos que estar en ite Alec solo para condimentar un poco las cosas. Y es en el DDT solo para que no sea tan visible porque ese es el punto de estos pop ups. Por último, creé el auto BG. Entonces si escondo la imagen, se puede ver que está en 700 con para 16 y es esquina blanca ochenta apagado 20 y solo una forma de rectángulo regular. Nada especial. Y finalmente lo duplicé, y dentro de ella posicioné esta imagen porque bajé la opacidad de la imagen al 40% para que podamos ver en estas letras un poco mejor. Y por eso creé el duplicado de la tarjeta PCI. De lo contrario, solo puedes incluir tu imagen dentro de esta capa original, y eso es básicamente todo para el pop up. Ahora, ¿cómo se consigue este efecto ya te mostró un poco. Entonces si lo agrando aquí mismo y aumenté tu pasty de nuevo a 100 y si hago clic en él, puedes ver todo lo que hice fue agrandar mucho usando shift old y left click en una de las esquinas. Entonces algo como esto, y puedes ampliarlo tanto como quieras. De verdad depende de ti, y todo lo que hice es posicionarlo a solo uno o dos píxeles de este borde inferior de nuestra parte son , así que se queda dentro de nuestro puerto, y simplemente bajé ¿Lo pegaste abajo a cero? Y lo hice después de crearlo justo aquí en el 2do 1 Así me pareció más fácil de hacer que al revés. Por lo que primero crearás tu elemento y luego regresarás al primero nuestro puerto, y luego solo aumentarás su tamaño. Me pareció que era mucho más sencillo que aumentar su tamaño aquí y luego lo agregué aquí mismo . Por lo que ahora llega el momento de hacer prototipos de todo. Ella controla cero, así que para encajar en su lugar para que puedas verlo mejor. Entonces cuando hago clic en prototipo, todo lo que hice justo aquí es que creé algo así como un grifo. Por lo general, la gente tratará de mover la boca aquí arriba para cerrar la página web o tratar de desplazarse hacia arriba en su teléfono móvil, y este molesto pop up va a aparecer. Pero creé un gatillo de tap solo con el fin de mostrarte lo que va a pasar. Y para este paso, gatillo simplemente se hace clic aquí mismo. Entonces nada realmente especial. Entonces si te muestro que voy a golpear aquí mismo. Anima un paso o dedo del pie, Fácil de salir y 0.6 segundos. Y en este 1er 1 volvamos al diseño. La opacidad debe estar en cero. Entonces eso es todo para el 1er 1 Y para el 2do 1 hice clic en este icono X, conectado Utilizó exactamente los mismos ajustes para que tengamos exactamente el mismo movimiento yendo de este puntera, 2do 1 así como del 2do 1 de vuelta al 3er 1 Así si hago click en esta vista previa de un hit, esto es lo que vamos a conseguir. Entonces solo imagina que estás tratando de escapar de esta página, y el pop up viene por tu camino. Por lo que están tratando de atraerte a dejarles tu correo electrónico para que puedan enviarte este código de promesa así como futuros códigos promocionales, y luego tratar de conseguirte como comprador. Cuando quieras cerrarlo, lo cerrarás y va a bajar y subir de tamaño porque así es como creamos ahora. Puedes ir al revés. Puedes crear el pop aquí arriba para que sea mucho más pequeño que esto. Entonces, por ejemplo, Toby, incluso más pequeño que este botón moverlo abajo parece como un hecho en nuestro caso. Y luego va a gastarse a este tamaño, y luego le pegamos a X va a volver y volver a ese tamaño. Entonces si la previsualizo una vez más, se puede ver el color excesivamente saltando bien así como este pop up. Por lo que cuando hago clic en él para cerrarlo, se puede ver cómo se ve eso. Entonces eso es todo para este video, y te veré en el siguiente. 67. Paralaje: en este video te voy a mostrar cómo puedes crear este efecto de paralaje. Por lo que he creado el simulacro arriba de esta página de aterrizaje. Entonces cuando la gente aterrizó y después de un cierto tiempo esto va a bajar, texto va de los pies aparecen desde el fondo y capaz de todo entrará en perspectiva si te muestro una vez más. Aquí es cómo se ve eso y todo está entrando en perspectiva después de un cierto tiempo . Entonces, empecemos. Entonces lo que tengo aquí son dos nuestros puertos fuera 1000 con 600. Por supuesto, el sitio web va a ser más grande. Pero para los propósitos fuera de este curso, quería mantener los tamaños fuera del nuestro puerto algo similares con el resto fuera de nuestros puertos. Ya te mostré. Entonces así es como se ve. Pero para que lo entiendas, primero tengo que mostrarte el archivo Photoshopped. Entonces si salto a mi tienda de cuatro, así es como se ve el propio archivo. Entonces aquí arriba tenemos este texto que en realidad me voy a mover justo por debajo de este primer plano. Blair, tenemos que hacer ahora, que va a estar en la parte superior y es sólo un logo. Acabo de hacer algún logo realmente sí importa sólo para los propósitos fuera de este video y aquí mismo tenemos la navegación. Si presionaba E, es sentido abierto. Regular 14 y la línea de derecho es que se puede ver aquí mismo, y se acaba de ilustrar. Este es un sitio web ahora, debajo de eso, tenemos unas cuantas capas, pero antes de mostrarte esas capas, déjame apagar rápidamente todo para que pueda mostrarte la imagen original que realmente esconderé . El texto es, bueno, sólo por ahora. Entonces esta es la imagen original. Es de on Splash, y es la imagen fuera de la región toscana en Italia y ustedes condonan a Aled esta imagen de forma gratuita, y me aseguraré de vivir enlace a ella en el archivo Pdf. Entonces lo que hice es cortar algunas de estas capas hasta el dedo del pie, incluir un poco de movimiento y para incluir un poco de profundidad en esta imagen. Ya está rodada hermosamente, y ya muestra la profundidad entre estos arbustos al frente, este campo en el medio y este fondo perfectamente alineado. Pero quería dedo del pie asegurarse de que el dedo del pie animar que dentro de Adobe X'd, Así que tuve que cortar todas esas partes. Entonces lo que hice primero es que voy a ocultar la imagen y luego mostrarte. Corté el primer plano. Entonces este es el primer plano, y puedes ser tan preciso como quieras o no en absoluto. De verdad depende de ti, tu imagen y de tu proyecto. Pero lo que hice, uso la herramienta de lápiz y simplemente haga clic a través de todos estos. Y es un poco desordenado, pero para los propósitos de este video, está bien, sobre todo porque estamos usando la imagen original como fondo de todos modos, Así que corté el fondo. Entonces hice lo mismo para el primer plano, incluyendo los arbustos aquí mismo. Después corté los arbustos ellos mismos, y finalmente, acabo de agregar, Algunos van más simples a estos arbustos. Por lo que fui justo aquí para filtrar azul y luego ir al desenfoque de la espinilla. Y si lo traigo de vuelta aquí, se puede ver que está a 3.4 píxeles, y ese es básicamente mi entrenador. Más simple, y esto va a ser elemento de primer plano a medida que desaparece. Este elemento de primer plano real va a aparecer, entonces el fondo va a permanecer igual. Y, por último, el texto va dedo del pie pop up desde este jugador de primer plano. Entonces ese es básicamente mi archivo de Photoshopped. Hice todo esto en photoshop. Puedes hacer esto en realidad, en Adobe X'd, sobre todo si quieres usar el lápiz y luego te unas mezquitas. Pero porque ya tengo para tienda, me pareció mucho más fácil así. Lo que hice entonces es evento aquí para archivar ahorradores guardó esto como un archivo de Photoshopped y luego seguí adelante y lo abrí en adobe eggs. Entonces aquí está en Adobe X'd y puedes ver si doy clic aquí. Todas estas capas están justo aquí, así que las incluí todas dentro de este archivo de Photoshopped. Entonces pude escuchar hit control C para copiar esto nuestro puerto va a cerrar esto por ahora y luego saltó dentro de este archivo y golpeó el control V para pegarlo. No tienes que hacer esto. Eso lo puedes hacer en el archivo original cuando lo abras en otra B x d. Pero lo hice de todos modos. Entonces esta es la imagen que viste dentro de la tienda cuatro si salto aquí mismo. Pero lo que falta de esta imagen original es el primer plano borroso aquí mismo. Como puedes ver, no ves esos arbustos borrosas. Eso es porque los he movido hacia abajo, como se puede ver aquí mismo y todo ha entrado en su lugar en esta segunda imagen. Pero en esta primera imagen, los arbustos borrosas están justo aquí y los agrandé mucho. Se pueden ver los derechos delimitadores justo aquí a la izquierda y a la derecha. Se puede ver lo grandes que son también, si los escondo, también he movido mucho este primer plano a la parte superior. Se puede ver cómo se ve originalmente justo aquí. Simplemente seguí adelante y lo moví mucho hacia arriba. Y luego en esta siguiente va a bajar y el texto va a volver a subir. Ahora, una cosa que no ves justo aquí que viste en el archivo original para tienda son estos arbustos originales porque los corté y luego creé este efecto de desenfoque. No los ves aquí mismo. Si los escondo. Es sólo original para grand Lor porque me pareció que estaban obsoletos. Básicamente, son un poco mucho en esta imagen. Entonces todo lo que hice entonces por el prototipado porque básicamente, terminaste aquí. Puedes hacer click en el prototipo y todo lo que hice. Puedes usar el tiempo. Entonces después de un cierto tiempo cuando el usuario aterriza en esta página y te recomiendo que hagas eso en tu archivo de proyecto de cliente después de un cierto tiempo, auto animate ocurrirá y está en fuera es lo que deberías estar usando porque necesitas el animación dedo del pie facilidad en. Y luego está fuera a este resultado final en la duración fuera de toda la animación es de cuatro segundos. Entonces si hago click en este primero nuestro tablero click preview, puedes verlo esperar un poco y luego todo está entrando en su lugar. Entonces, como se puede ver aquí mismo, se está moviendo de esta a esta duración es de cuatro segundos, y debido a que lo configuramos, dedo está dentro. Se puede ver cómo se ve. Por lo que una vez más, este elemento de primer plano se mueve a la parte superior. Estos arbustos están mucho agrandados, y se van a mover todo el camino abajo de esta nuestra pizarra, como se puede ver aquí mismo así que básicamente van a desaparecer dedo del pie. En realidad, desde esta página y finalmente este es el resultado. Al hacer clic en él y el texto va a aparecer, puedes ser aún más dramático. Se puede, por ejemplo, reducir el tamaño del texto en el primero nuestro puerto, y luego hacerlo original en este segundo son parte, por lo que tendrá una especie de efecto sesgado y pasará de texto más pequeño dedo del pie, texto más grande, y entonces tu efecto será una marcha más dramática. Incluso puedes incluir algunas nubes, por ejemplo. Por lo que las nubes desaparecerán de aquí y revelaron el fondo aquí. Entonces realmente no hay límite. Y todo depende de tu proyecto y tu creatividad básicamente. Así que solo ten eso en cuenta que tienes que tener todas tus capas nombradas correctamente y ordenadas correctamente para que este efecto paralaje del dedo del pie funcione correctamente Y por supuesto, igual que con todos los demás efectos que te mostré en este curso, puedes utilizarlos tanto para tus proyectos de página web como para tus proyectos móviles. Entonces eso es todo para este video, y te veré en el siguiente 68. Efects Xd File de efectos: en este video, quería correr rápidamente por el archivo de efectos X'd. Entonces es lo mismo para cualquier otra parte. Fuera del rumbo. Obtienes este ex desfile con todo lo que viste a la vista fuera de los videos para que puedas jugar con él e inspeccionarlo en remolque. Mucho más detalles. Por lo que si no estás seguro de nada de estos videos, puedes hacer click aquí mismo en el especial de la capa. Puedes comprobarlo y puedes saltar dentro. Abre todo esto y ve cómo se creó todo. Puedes bucear en profundidad. Puedes utilizar estos colores puedes hacer click a través y ver qué tamaño del texto utilizo. Entonces, por ejemplo, aquí es de sentido abierto dedo del pie un irregular, y realmente puedes bucear profundo y ver todo lo que te interesa de esta parte Fuera del curso. También puedes previsualizar todas estas animaciones, y puedes ver por ti mismo cómo se ven todas, y simplemente puedes copiar y pegar todos estos elementos en tus propios diseños. Si así lo deseas, finalmente, puedes usar estos diseños para tu propio uso personal o comercial, y tienes mi permiso. Entonces, por ejemplo, solo imagina que quieres usar un pop up para el sitio web de tu cliente. Puedes usar este pop up exacto si eso es algo que quieras y pegarlo en tu cliente en diseño, y luego puedes adaptarlo puntera de esos colores. Y esos fondos, por ejemplo, para hacer que parezca que se les ha agregado ese toque personal. Por último, si algo no está claro, siempre se puede revisar y saltar por dentro. Puedes ver videos y mientras estás viendo, puedes abrir este archivo e inspeccionar todo lo que estaba hablando dentro de esos videos, y así puedes aprender mucho mejor. Entonces eso es todo para este video, y te veré en el siguiente. 69. Desplazador de valor: en este video, te voy a mostrar cómo podemos crear este slider de valor. Por lo que cuando haga clic en esta flecha, se volteará y todas estas otras opciones se van a meter en posición. Entonces puedo cambiar en estos valores y moverme alrededor de estos deslizadores y puedo traerlos de vuelta a sus posiciones originales y uno y hecho. Puedo pegarle aquí mismo para traerlo de vuelta. Entonces, empecemos. Entonces lo que tengo aquí es el diseño terminado y todos estos son tableros están en 800 por 800 fugarse. Comprueba rápidamente este, que se expande, y llegaré a éste que se ha derrumbado. Entonces así es como se ven Así que si hago clic aquí mismo, se pueden ver todas estas capas en su interior. Pero disecemos sólo este, porque todos son exactamente iguales. Por lo que aquí tienen alarmas de medios de tono de llamada y llamadas en la parte inferior. Entonces si abres el tono de llamada, es como se ve. Entonces tenemos esta flecha justo aquí, que es sólo un icono estrecho, y luego tenemos estos iconos aquí mismo. Ahora éste es icono de tono de llamada siguiente arriba, tenemos texto de tono de llamada el cual está abierto desde 25 en este caso, y 70 70 70 para el color. Y finalmente tenemos BG para el fondo ahora para el slider ya te mostró esto en uno de los ejemplos anteriores, tenemos el círculo que es sentir con color blanco, sin sombra de borde. Por lo que por defecto sombra negra 16%. Y en este caso, los valores son dos exposición a la posición Y y 10 para el desenfoque. Y así es como conseguí este efecto de desenfoque para el fondo debajo de que tenemos la mezquita. Entonces es la misma mezquita como ya te muestran en número fuera de videos anteriores y se puede ver que muevo este poco dedo del pie aquí. Y si quiero, simplemente puedo traer de vuelta a aquí. Haga clic afuera y luego no tiene mezquita en absoluto. Y obviamente este círculo seguirá a la izquierda y a la derecha, y solo puedes mantener el turno y moverlo a su posición. Y finalmente, lo que tenemos aquí está vacío, que es sólo esta capa de fondo gris claro, y está en el DDT. Colorea ahora para las tallas. El fondo es 700 con 1 28 y este deslizador vacío es de 5 20 a 12 pies de altura y la mezquita y capa llena, obviamente muy como lo mueves a lo largo de Circle es 30 por Turney, y eso es básicamente todo para la configuración. Ahora creé todos estos copiosos justo a continuación cambiar el texto y los iconos para que correspondan con los valores en cuestión. Y por último, esta flecha va a rotar. Entonces si ven justo aquí, está apuntando hacia arriba y en el primer ejemplo está apuntando hacia abajo. Ahora, cuanto al prototipado, parte va, lo que tienes que hacer es en este primer caso, acabo de moverlos. Por lo que los tres los seleccioné, Muévelos en su lugar con este y bajen. ¿ Pagas City 20 en este? Van a gastarse dedo del pie con 20 píxeles entre sí. Aquí mismo. Ese es el espaciado. Y la opacidad es obviamente 100 porque van a chasquear en posición a continuación. Acabo de crear tres copias más para estos tres deslizadores. Por lo que moví este 1er 1 luego movido el 2do 1 y finalmente movido el agitado todo el camino hasta el 100% en la posición. Y por último, cuando lo prototipeas, puedes devolverlo a su posición original. Por lo que irá de aquí, Tohir. Y luego puedes mover estos encendedores hacia abajo a su posición. Ahora para un prototipo en parte, si hago clic en un prototipo, se puede ver lo que hice. Por lo que hice clic en esta flecha para ir a este segundo nuestro puerto utilicé tap también animar y chascar en posición. Y 0.4 segundos fue la duración. Y cuando haces click en la flecha para volver atrás, cambié un poco. Así que utilicé exactamente la misma configuración aquí. Pero usé facilidad fuera y 0.2 segundos porque quería que se aliviara escritor en lugar de snap y para la duración, Toby un poco más corto. Entonces en lugar de cero punto para ello 0.2 porque quería que volviera un poco más rápido. Entonces si hago clic en vista previa, se puede ver eso. Entonces tenemos estos fuera para la espalda y tenemos snap para que se metan en posición. También puedes usar snap, pero irá justo por encima del borde de parada solo un poquito, y puedes ver ese tipo de efecto fantasma Por eso usé está fuera y 0.2. Entonces, ¿no ves ese efecto ahora para estos deslizadores? Lo que hice es, por ejemplo, hice clic en este punto y lo muevo dedo del pie este nuestro puerto y para ello usamos drag auto animates y está adentro afuera porque quería facilitar dentro y despegar la animación. Y básicamente hice exactamente lo mismo por todos estos descansos fuera de los puntos y nuestras tablas. Entonces, como pueden ver, tenemos exactamente la misma configuración para éste y para éste, y volví por cada uno de ellos para traerlos de vuelta a su lugar original usando exactamente los mismos ajustes. Entonces si hago click en el 1er 1 click de vista previa y la ampliaré apenas un poquito. Y incluí en este fondo de grado ligero para el propio aeropuerto porque quería que esto destaque solo un poquito mejor porque puedes encontrarlos en tus dispositivos móviles, por ejemplo, y por lo general tener fondos borrosos. Por lo que estos fondos blancos de los propios artículos van a saltar un poco mejor contra ese fondo azul por lo que al hacer clic en él, se expandirá. Condonas colapsar si quieres. Y la flecha se va a dar la vuelta, obviamente. Y puedes mover estos deslizadores por ahí y las mezquitas seguirán porque acabo de extender las mezquitas hasta aquí y mover los círculos hacia atrás para que puedas moverlos de nuevo a su posición original. Y se puede, por supuesto, jugar con él. Puedes ir todo el camino a cero, pero solo quería dedo del pie mostrarte cómo puedes crearlo así también. Entonces eso es todo para este video, y te veré en el siguiente. 70. Barra de lengüeta: en este video, vamos a crear este paso púa. Por lo que cuando tocas estos iconos, puedes ver que el color está cambiando del gris oscuro al azul así como este selector se está moviendo, indicando lo que está seleccionado. Entonces, empecemos. Entonces esto es lo que tengo aquí tengo para nuestros puertos fuera 800 por 800. Y si acerco un poco más, solo te voy a mostrar una, porque todas son exactamente iguales. Acabo de crear éste y luego hice múltiples copias. Entonces tenemos B G, que es sólo el fondo y su luz. Genial como puedes ver fuera de este color, E C E C E C El radio de esquina es de 20 y las dimensiones son de 6 50 con 1 27 Y como puedes ver, solo está ahí para servir de fondo, y te puedes imaginar que esto irá en la parte inferior de tu móvil pantalla del dispositivo. A continuación tenemos el selector, que es sólo una vez más, este rectángulo en la parte inferior y su línea arriba en el centro fuera de estos iconos a medida que se mueve a lo largo. Es con Su 55 altura es para maíz o ochenta es un 20 color es tres C seis ff, y finalmente tenemos los iconos y los iconos son exactamente los mismos. Entonces si salto por dentro, todos son exactamente iguales en términos de estructura. Entonces como pueden ver, tenemos la mezquita. Por lo que sólo tenemos una capa básica aquí mismo. Entonces solo rectángulo básico en la parte superior del ícono. Y tenemos casa me concolor en este caso y tenemos icono de casa, que es este color gris oscuro. Pero como se puede ver, opacidad está en cero. Ahora, para el color, utilizo tres C seis f f. Y para este uso este 70 70 70 para sólo el color regular. Por lo que creé este ícono. Entonces hice un duplicado. Incluía el color, por lo que este color azul creó luego mezquita, seleccionó la mezquita y este color azul clic derecho y mezquita con forma. Es por eso que conseguí esta mezquita e incluí el ícono original y esta mezquita dentro de la carpeta usando Control G. Y finalmente este selector va a seguir donde haga clic. Eso es básicamente todo para la puesta en marcha de esto. Como puedes ver, es realmente sencillo. Todos estos otros iconos son exactamente los mismos. Es sólo mezquita se mueve en la parte superior. Si acerco, por ejemplo, este Jets llamo a esto es nuestra mezquita y su simplemente movido justo aquí a la cima. Y cuando haces clic en algunas otras pantallas y seleccionas este ícono, por ejemplo, esta mezquita se va expandir el dedo del pie hasta la parte inferior para revelar el color azul. Y este ícono original de Jets va a ir a la ciudad base cero off para que tengamos este bonito icono azul presentado. Ahora, cuando termines con él, simplemente puedes hacer clic en la mezquita y simplemente sacarla del camino. Y como puedes ver, va a volver a seleccionar el icono original y el color original. Ahora tengo cuatro copias en Total porque tenemos cuatro iconos. Y ahora, si hago clic en el prototipo del prototipo es exactamente el mismo para cada uno de estos iconos en solo te voy a mostrar uno. Entonces, por ejemplo, voy a dar clic aquí para ir a esta pantalla. Voy a arrastrar mi mango hacia atrás. Como se puede ver ya tener estos dos seleccionados para ir del pie el tercero y el cuarto nuestro puerto. Pero si selecciono este ícono, sé que va a ir a esto nuestros puertos. Entonces solo voy a arrastrar mi mango azul y estos son los ajustes que iban a usar El usuario está yendo toe tap. También se va a animar la acción porque todos son exactamente iguales. Entre nuestros tableros los nombres de capas son el mismo ajuste es el mismo Así que todo es igual que vamos a usar está en fuera y una corta duración apagado 0.3 segundos. Entonces cuando llegues a la vista previa, esto es lo que va a pasar. Entonces por ejemplo, cuando hagas clic de éste a este selector va a cambiar Esta mezquita va a subir revelando este icono. Esta mezquita va a bajar revelando icono descolorido Este color original concierto este gris oscuro va a ir a cero en una ciudad paga y esta va a volver a 100 en la ciudad de Kobe como se puede ver aquí mismo. Entonces para click aqui, click preview Así que esto es lo que va a pasar. Entonces cuando haga clic aquí va a cambiar como se puede ver y se puede volver entre estos dos, por ejemplo, y se puede ver que va de gris oscuro atrás dedo azul del pie, y va de azul a oscuro. Genial cuando cambias a estos otros iconos. Entonces, como puedes ver, es realmente sencillo. Simplemente estás moviendo mezquitas arriba y abajo y reduciendo o pacenti de estos iconos originales de color gris oscuro a cero cuando aterrices en ese ícono en particular. Y, por supuesto, en este selector, aquí abajo en la parte inferior va a seguir y estar posicionado en el centro de cada uno de estos iconos. Entonces eso es todo para este video, y te veré en el siguiente. 71. Menú lado: en este video, voy a mostrar cómo puedes crear esta interacción de menú lateral. Por lo que al hacer clic en el icono, saltará hacia abajo y un menor en tamaño también. Introduce esta sombra de fondo, y luego cuando vuelvas a hacer clic en ella, volverá a su posición original. Entonces, empecemos. Entonces esto es lo que tengo aquí. Este es el diseño que creé hace unos meses, y este es en realidad uno de mis productos de diseño que la gente realmente puede comprar. Pero te estoy dando este freebie por esta lección. Entonces así es como se ve si un salto dentro tenemos la barra de estado, que es la barra de estado justo aquí en la parte superior. Y si lo escondo, se puede ver lo que hay dentro. Por lo que tenemos estado, barra y fondo si quieres incluirlo. Pero elegí no hacerlo. Entonces tenemos la pantalla misma, que es justo todo esto aquí. Y finalmente tenemos este trasfondo. Por lo que elegí esto son pobres en primer lugar, Así que la nuestra pizarra es para el iPhone, X r x s así 375 espera 8 12 y Si hago clic justo aquí, se puede ver en qué consiste. Por lo que es solo este color azul claro off B C E cero f d. Y por supuesto conseguirás esto en los demás. Huevos profanan. Se puede saltar por dentro y los inspectores en muchos más detalles. Pero solo te estoy dando lo fundamental, básicamente lo que se encuentra aquí. Por lo que tenemos el logo y con pocos de los componentes para el logo así como este texto. Y finalmente tenemos estos elementos del menú, por lo que todos son de sentido abierto. Y toda esta perspicacia de texto fuera de la pantalla está abierta Cessnas bien, por lo que puedes dar seguimiento fácilmente. Simplemente puedes instalar este único fondo y tener básicamente todo listo. Ahora todos estos elementos del menú son 20 y son de color blanco y se dejan forrados con este logo , y luego todo está seleccionado y posicionarse al medio verticalmente como Así que ahora si salto dentro de la pantalla, puedes ver se compone en conjunto. Por lo que tenemos perfil, Menú Icon y BG, que es este fondo con una ligera sombra, y una vez más podrás inspeccionar todos estos elementos en muchos más detalles Si quieres aceptar, tenemos el persona. Entonces es este nombre de imagen y su ubicación. Tenemos un botón de seguir y un botón de mensaje. Ambos son del mismo tamaño. Pero esto es blanco. Este es este tipo de azul y finalmente tenemos los grifos. Entonces tenemos favoritos, selector de galería y sobre y tenemos la barra de noche que es esta barra Never y notarás que está ligada a mi diseño original. Pero si yo, um sólo voy a conseguir un poco más tarde para que no tengas que preocuparte por ello en tus diseños para que puedas usarlo de inmediato sin preocupaciones. Y finalmente tenemos estas imágenes aquí abajo. Por lo que tenemos nueve imágenes. Todo se acostó en un genial y solo acabo de incluir algunas imágenes y finalmente tenemos este fondo el cual es 375 con 8 12 que es del tamaño de nuestros puertos. Y eso lo incluí para que pueda bajarlo en tamaño como se puede ver aquí mismo. Entonces cómo creé esto Si salto dentro, solo voy a seguir adelante y, uh, así que así. Entonces es 10 10 20. Para que pueda saber qué incluir. Ahora. Seguiré adelante y lo eliminaré. Escogeré en todo este control de golpe de pantalla C Haga clic aquí, Hit Control V y lo que en realidad voy a hacer es mantener el turno, Ault y el click izquierdo en mi boca, y se va a escalar de manera uniforme, ambos horizontalmente y verticalmente. Todo y redimensionamiento de respuesta está activado. Entonces cuando te re tamaño estos huevos se va dedo del pie. Trata de hacer todo lo posible para alinear todo como lo era originalmente. Entonces se va dedo del pie. Hacer algunas restricciones, se va a tratar de mantener todo en orden como era, y se va a probar dedo a línea todo como asnos muy bien asados posible a esta pantalla original. A continuación sólo voy a mantener presionada la tecla de turno y moverla En algún lugar por aquí, voy a dar clic aquí para posicionarla eran gruesas y saltemos a la vista así, y sólo voy a moverla justo debajo de la barra de estado porque así fue. Aquí se puede ver que va pantalla de barra de estado, elementos de menú local porque estados bar estados aquí, pase lo que pase, voy a dar clic aquí y voy a saltar dentro, abrir BG y dar click en la Sombra, tecleando 10 y tecleando 10 aquí y finalmente escribiendo 20 aquí mismo. Entonces si elegimos, algo va un poco raro, como así como puedes ver, ahora teníamos esta bonita sombra que voy a aumentar en Bay City justo aquí. Y se puede ver cómo se ve eso ahora para el prototipado en sí. Solo voy a dar clic aquí en este elemento de menú y voy a elegir tap auto Animar, Fácil ahora 0.6. Y yo voy a hacer lo mismo por este. Entonces solo voy a casa y control click dentro de este ícono de menú y solo voy a arrastrar estas vela azul hacia atrás y vamos a tener la misma configuración. Así que tap o toe animate está en fuera n 0.6 segundos y finalmente, una vez más antes de golpear Pretty. Esto lo puedes encontrar en tu archivo xz otros y puedes inspeccionarlo con mucho más detalles. Y puedes usar, por supuesto, todos estos elementos en tus proyectos, tanto personales como comerciales. Entonces vamos a previsualizarlo y ya puedes ver cómo se ve eso. Por lo que salta hacia abajo a disposición. Cubre todo y el grifo. Este temperamento se mantiene igual aquí en la parte superior, por lo que no cambia End. momento tenemos esta bonita sombra de gota cubriendo este fondo muy bien. Por lo que destaca en su contra. Y cuando haga clic aquí mismo, volverá a su posición original. Entonces eso es todo para este video, y te veré en el siguiente. 72. Agrandar imagen: en este video, vamos a diseñar esta sencilla interacción. Por lo que aquí tenemos la galería de imágenes, y cuando hago clic en la imagen para ampliarla, se puede ver que se encaja en posición. Este ligero, radiante aparece así como este icono de cierre. Entonces cuando golpeo el ícono de la ropa, puedes ver que se remonta a su posición original, radiante y la ropa desaparece y se puede ver que contiene sus esquinas redondeadas. Pero cuando hago clic en él, esas esquinas desaparecen y vuelve a rectas. Cuando hacen clic para cerrarlo, se puede ver que va a esquinas redondeadas una vez más. Entonces empecemos. Muy bien, así que esto fue súper sencillo de crear y configurar. Entonces si acerco un poco más, se puede ver lo que tenemos aquí mismo. Entonces tenemos el texto que las imágenes superiores, que es abierto Sands Bold 70 70 70 Para el color. Tenemos gente, que es de sentido abierto, regular y 18 así que solo un poco más pequeña que ésta. Y es en el DDT, y es la misma historia para la naturaleza aquí abajo. Para las imágenes son de 1 37 con 1 98 20 píxeles. Espacio como este 20 encienden este 20 así y así, así como con estos elementos. Por lo que son 20 píxeles de aquí al texto y de texto a imagen, así como de imagen a la parte inferior y básicamente 20 píxeles en todos los sitios. Cómo creé estos, solo uso una herramienta de rectángulo. Y si hago clic en unos, por ejemplo, éste, se puede ver que mencioné lo que es otra vez. Por lo que 1 57 con 1 98 a esquinas redondeadas son 20. Están llenos de blanco porque esos eran los rectángulos y el color original era blanco. Acabo de quitar la frontera, y eso es básicamente todo ahora para esta. Como se puede ver, hay un leve int Grady leve aquí mismo, así como revelar icono. Close Icon es básicamente auto explicativo, pero para el int Grady, se puede ver cómo se ve eso. Entonces elegí. En lugar de color sólido, elegí ingrediente lineal, y por defecto te da este ingrediente. Entonces si cambio de nuevo al color sólido, elijo negro, por ejemplo, volver a ingrediente magro. Puedes hacer click en estos puntos y puedes moverlos por ahí y puedes bajar la ciudad apace aquí mismo. Entonces, por ejemplo, si lo muevo dedo del pie blanco como era originalmente, tener una menor la opacidad de la misma. Zero Entonces cambiaré estas posiciones para que el color más oscuro y vaya al color más claro superior vaya a la parte inferior y lo puedes hacer por ejemplo, así, o puede moverlo así. Y luego puedes jugar con los colores para de donde viene el int Grady, por ejemplo, y puedes hacer click en este color más oscuro. Puedes reducir tu ciudad de paga, y realmente puedes jugar con ella para conseguir el look deseado que buscabas. Y puedes, por supuesto, mover esta izquierda derecha si quieres que el codicioso int venga desde estos ángulos pero porque no quiero Oh, quería venir directamente desde la posición top off. Es algo así y tal vez bajar su ciudad pagada de la misma sólo ligera ahora para la imagen misma. Lo que hice, te mostraré aquí mismo para que pudiera controlar DE duplicarlo. Y lo que hice básicamente una simplemente agrandarlo así. Y debido a que la imagen está contenida dentro de esa mezquita básica, cuando arrastras y sueltas la imagen dentro de la forma que conduces, haz clic y mantén pulsado, cambia y mueve la imagen. Entonces, por ejemplo, aquí mismo, si quieres que ese sea tu punto focal y puedes, por supuesto, moverlo como quieras y lo que finalmente fue. Acabo de saltar a la vista y traigo de vuelta el radio de esquina a cero. Es así como conseguí esta imagen. Entonces para el prototipo, es extremadamente simple una vez más. Entonces una cosa que tengo que mencionar es que tenemos el icono de Grady int y cerrar justo aquí pero Kobe City fuera de ambos, es Cero, como se puede ver justo aquí y justo aquí está al 100. Icahn está encima del int codicioso, obviamente, porque de lo contrario no lo verás. Bueno, ahora para un prototipo, es extremadamente sencillo. Tan solo dos estados, por lo que puedes hacer click en este arrastró el mango azul y estamos usando tap auto, animate, easy and out y 0.4 segundos ahora para volver. Puedes hacer clic en este icono de cerrar y usar exactamente la misma configuración. Entonces en un calor para previsualizar, así es como se ve. Entonces como se puede buscar radiante y la ropa está desapareciendo. Y si bien esta imagen toma algún tiempo para venir aquí mismo, Grady Int y Close Icon aparecerán en ese tiempo. Como puedes ver aquí mismo y cuando haces clic atrás, es solo una transición suave. Ahora puedes hacer esto de muchas maneras. Se puede, por ejemplo, mostrar Vamos a hacer eso también. Por lo que si vuelves al diseño, puedes hacer doble clic, puedes aumentar el tamaño. Entonces, por ejemplo, por aquí, veamos. Y cuando golpeamos privy y ahora se puede ver cómo se ve eso. Por lo que se acerca y se acerca, rebota en su lugar si eso es algo que te gustaría explorar. Pero creo que esto funciona muy bien. Entonces cuando la vista previa de Heat simplemente se agranda en esta imagen para que podamos verla un poco mejor y salte a su lugar. Entonces eso es todo para este video, y te veré en el siguiente 73. Otros archivos Xd: en este video, te voy a mostrar el archivo de otros X'd. Entonces, básicamente, es el mismo expediente que con todas las demás conferencias anteriores y que viste en las secciones anteriores fuera del discurso y estos huevos desfiles están aquí para ayudarte a lo largo y al pie, tal vez acercarte un poco más a los detalles. Si te perdiste algo durante el video para que puedas saltar dentro, realmente lo puedes diseccionar. Salta a los detalles y puedes, por supuesto, utilizar todos estos elementos para tu uso personal y comercial. También puedes copiar y pegar estas imágenes si así optas por usarlas en tus propios proyectos personales . Y por último, puedes usar estos colores e iconos, imágenes y botones y demás en tus proyectos personales. Ahora, finalmente, si salto aquí mismo al panel de activos, puedes ver todos estos colores de los cuales fueron seleccionados, y estos son partes y diseños, y puedes usar estos colores de nuevo, simplemente haga clic derecho copiar este color y basarlo en su propio diseño. Si así lo eliges, también puedes diseccionar y los diseños un poco más allá para que puedas saltar aquí mismo. Se pueden abrir las pantallas y se puede saltar. Además, a ver que mencionaron. Ve los colores, los efectos y puedes si te gusta este efecto, por ejemplo, de esta sombra de gota, simplemente puedes hacer clic derecho en esta copia y pegarla en tu propio diseño si quieres. Por último, puedes previsualizar todas estas animaciones por lo que solo tienes que hacer click en esto. Primero nuestro puerto apagado, lo que sea parte que quieras. Puedes golpear la vista previa y condenas, inspeccionas y ves lo que hice. Y también puedes saltar al modo prototipado y acercar dentro y hacer clic entre estas pantallas y ver qué interacciones utilicé para que si te perdiste algo solo realmente como esta interacción, puedes usar exactamente la misma en tu diseños. Entonces eso es básicamente todo para esta sección, y eso es básicamente todo para estas secciones de animaciones. En la siguiente sección del curso, vamos a saltar y diseñar un móvil arriba desde cero, y vamos a implementar todo lo que hemos aprendido en el curso hasta ahora en la creación y creación de prototipos fuera de nuestra aplicación móvil. Vamos a diseñar una app con múltiples pantallas. Vamos a crear interacciones personalizadas entre elementos y nos vamos a poner en el trabajo de remolque todo lo que has aprendido hasta ahora en este curso. Y vamos a pasar de los diseños estáticos, los diseños bellamente animados que luego vamos a presentar a nuestros clientes y a obtener retroalimentación para ellos. Entonces te veré en el siguiente video. 74. Resumen del diseño: en este video, voy a compartir con ustedes el informe de diseño que obtuve del cliente. Y te voy a dar esta plantilla y puedes utilizarla para tus propios proyectos si quieres . Simplemente tienes que cambiar este texto de acuerdo a tus propios clientes y la información que obtuviste de ellos y la información que vas a obtener de tus clientes, puedes encontrar dentro de este breve de diseño. Entonces déjame acercarme un poco más. Lo que tenemos aquí mismo es la aplicación móvil obturador, y el cliente está destrozando la aplicación móvil. Y el plazo es el 12 de diciembre. Ahora, aquí mismo tenemos el perfil de la empresa. Por lo que hay una pequeña empresa de Belgrado, Serbia, y su objetivo es crear una aplicación móvil para que los usuarios compartan imágenes que han tomado con su teléfono o cámaras profesionales. Después para compartir esas imágenes con la comunidad fuera de fotógrafos aficionados y profesionales. que puedan conseguir algunos consejos y trucos sobre cómo mejorar sus imágenes y convertirse en mejores fotógrafos ahí Un pequeño equipo de cinco personas y acaban de conseguir la primera ronda de financiamiento antes de proceder a la siguiente ronda, donde intentarán asegurar fondos para el desarrollo del sitio web y ampliar aún más su equipo. Han ganado el cargo y todas las cosas se encuentran en esa oficina en Belgrado, Serbia. Ahora lo que esto nos dice es todo lo que debes saber sobre la propia empresa, sobre su principal objetivo y sobre lo que necesitas crear para ellos, que es una aplicación móvil para los fotógrafos aficionados y profesionales donde pueden compartir su imágenes con la comunidad de abajo que tenemos el proyecto Oreo. Entonces ese es el proyecto en sí mismo. Por lo que necesitan una aplicación móvil creada y si también aseguran el sitio web de financiamiento, lo que significa que primero vamos a empezar con la aplicación móvil y luego si se asegura el financiamiento, entonces nos pedirán que creemos un sitio web también. Están tratando de crear una comunidad de fotógrafos aficionados y profesionales que van a compartir su pasión con la comunidad mientras obtienen consejos y trucos de fotógrafos más experimentados . Entonces eso es lo principal. Están tratando de construir una comunidad a partir de personas que sólo están interesadas en la fotografía misma, por lo que no están tratando de conseguir que la gente que quiera compartir sus comidas y sus videos de gatos y alguien que sólo quieren fotógrafos, amateurs y pros para compartir su amor por la fotografía. Dentro de esta comunidad, objetivo de la APP posteriormente sería pagar la membresía pro y para ponerse duro por los clientes es un fotógrafo a las ceremonias de boda, interiores de bellas artes y cetera. Para el 1er 12 meses. Simplemente quieren atraer a personas específicas apasionadas por la fotografía, puntear su aplicación antes de que empiecen a empujar por esos cambios una vez que tengan suficientes usuarios en la plataforma. Entonces básicamente, en términos tan amplios, esta va a ser una app gratuita diseñada, por lo que atrae a fotógrafos a ella. Es libre. Entonces cualquiera se pone en contra comenzó y cuando empezaron a usarlo, cuando empiezo a amar en la comunidad 20 Creator, entonces van a lanzar esos cambios e incluye la opción de convertirse en miembro profesional fuera de esta app. Y luego desbloquearás esas características como conseguir, por ejemplo, descuentos en tu equipo, conseguir algunas recomendaciones sobre muy. ¿ Puedes comprar ese equipo y además, principal importante aquí mismo es encontrar un trabajo para que la gente pueda contratarte a través de esta app, y vas a poder trabajar como fotógrafo. A continuación, tenemos metas y objetivos. Por lo que quieren atraer a la mayor cantidad de personas dedicadas. Es posible a la app y dedicado es la palabra clave aquí mismo. Mantenerlos comprometidos y firmados. Más personas en los próximos 12 meses va a conseguir 10 mil usuarios en el primer año y a expandirse a 20 mil en segundo año antes de que sean todos esos cambios. Entonces eso es básicamente mantener. Simplemente quieren tantos usuarios como sea posible a esta app. Y luego, cuando están todos fuera, los cambios para tratar de mantener a esos usuarios existentes, además de traer cada vez más usuarios a la APP. El objetivo principal es crear una aplicación móvil que se vea simple y clara y que sea fácil a la vista antes de que hagan esos grandes cambios aquí también, también, luego introducir nuevos elementos de diseño como las tablas de precios ofrecen cotizaciones de empleo porque todo de esos nuevos elementos de diseño van a cambiar drásticamente el diseño de la APP. Entonces por eso quieren versión. Quieres ser extremadamente simple, extremadamente fácil de usar, y un nativo así básicamente para parecerse a Instagram, Pinterest, Facebook, todos ellos combinados. A lo mejor en Twitter. Y simplemente despliega lo antes posible para conseguir esos nuevos usuarios y para atraerlos a la app abajo que tenemos público objetivo Así que personas de mediana edad buscan un lugar dedicado para compartir la pasión por la charla por la fotografía. Edades entre 24 65 El género gentil es 30% femenino, 70% masculino País del presidente Serbia Eso es por ahora. Ciudad de residencia. Belgrado Otra vez por ahora, al principio, lugar de trabajo Personas que tienen un trabajo de día pero que buscan un trabajo secundario también. Hábitos de consumo de medios. 60% en instagram. Por lo que realmente les gusta su fotografía 30% de nuevo en. A lo mejor están buscando algunos consejos y trucos sobre cómo tal vez incluso inversionista un poco más en su equipo, cómo mejorar a sus fotógrafos y así sucesivamente. Y por último, 10% de Facebook. A lo mejor están visitando algunos grupos de Facebook y consiguiendo algunos consejos y trucos. Por fin tenemos hábitos diarios, tan ocupados individuos con estilo de vida orientado creativo, lo que significa que están trabajando en su trabajo diurno. Como se puede ver aquí mismo pero tienen eso en su conjunto, estar fuera de la fotografía. O tal vez sean fotógrafos profesionales, pero buscando una especie de dejar salir algo de vapor, usando una aplicación móvil dedicada para fotógrafos por debajo que tenemos requisitos de diseño, por lo que necesitan un iris Mobile. App diseñada versión Android vendrá más tarde. Creen que los usuarios de Iris pagarán más que los usuarios de Android, sobre todo en esta comunidad donde la gente está gastando mucho dinero en fotografía aquí. Dimensiones ácidas. Por lo que las resoluciones son el iPhone X al inicio. Otras versiones a crear más adelante si es necesario. Esto significa que van a probar y ver cuántos usuarios están descargando su aplicación. Después van a lanzar una pequeña encuesta y les preguntaron, por ejemplo, ¿Conoces a alguien que tenga en un iPhone más grande o un iPhone más pequeño, toda versión anterior o una versión más reciente, y luego podrán contar? De acuerdo, entonces tenemos a este usuario. A lo mejor podemos empezar a lanzar un iPhone más grande o un iPhone más pequeño, algo así antes de que lleguen a cambiar a la versión de Android, y luego volverán a hacer lo mismo todo de nuevo. Entonces, por ejemplo, cuando lo hicieron todos arriba, ¿no? ¿ Algunos? Algunos usuarios son los usuarios preocupados o algo así. Y luego van a poder adaptar eso a esos usuarios del Pacífico por debajo de los que tenemos formatos de archivo. Por lo que Adobe X'd es el archivo principal del proyecto, y los activos van a estar en SPG y PNG, y te mostraría cómo puedes exportar videos también requieren paleta Qala. Vamos a crear uno para ellos por ahora. Y luego en el segundo año, lo vamos a cambiar completamente imagespara ser incluidos. Por lo que las imágenes libres antes de que los usuarios comiencen a subir su propio contenido cuando vamos a utilizar imágenes gratuitas para diseñar este EP y finalmente asociar documentos de copia, David entrega copia final antes de lanzar la APP básicamente y colocar o perder a Toby, incluyendo en su lugar. Esto significa que solo vamos a usar mucho texto ipsum en estos marcador de posición. Por último, tenemos presupuesto y horario, por lo que presupuesto se rompe en partes de árboles. Lo mismo es el proyecto en sí. Entonces tenemos iris, después tenemos sitio web y finalmente tenemos versión android. Por lo que 2400 para la exploración, planeación, diseño Iose y Preparación 3600 para el diseño completo de sitios web y creación para Responsive porque tendrá mucho fuera de las páginas. Y es por eso que necesitamos toe conseguir la mayor parte de su atención posible y para crear un sitio web responsive desde el principio y finalmente, 2400 para la versión Android, pues básicamente se verá exactamente igual que Iris pero adaptado para Android 50% por adelantado, 50% después de la entrega de activos. Entonces esto significa que cuando terminemos el proyecto y estamos listos para entregar los archivos finales al cliente, lo harán. Nos pagan esos 50%. Por lo que después de la planificación de la entrega de ácido, tomará cinco días. Investigación. Tres días de investigación de audiencia, tres días de diseño, cuatro días de presentación. La revisión de hoy cinco días y el total de entrega es en 22 días. Entonces lo que significa toda esta información es que sabemos para quién está el cliente. De toda esta información que reunimos, sabemos cuán grande es lo que necesitan de su público objetivo. A quién exactamente están tratando de apuntar, quién, exactamente, están tratando de hacer uso de su aplicación básicamente lo que van a expandir, cómo fue y dónde. Por lo que conocemos todos esos detalles para que podamos empezar a diseñar de inmediato. Y en la próxima serie de videos, te voy a mostrar ah, proceso de diseño que adopté básicamente hace casi 10 años y estoy usando para todos mis proyectos y vamos a llegar a ello en el siguiente video. 75. Planificación del proyecto: Lo que me gusta hacer por cada proyecto es la planeación de proyectos. Esto significa que puedo planear todas las pantallas básicamente que necesito al inicio, y entonces obviamente todas las pantallas pueden ramificarse a diferentes pantallas más adelante. Pero estos son solo un medio punto de partida para mí para que pueda entender qué greens no necesitan diseñar y cuánto tiempo hacer cualquiera para dedicar toe esta app básicamente, antes de que pueda conseguir toe ah, mayor alcance del proyecto y saltar dentro de todo de estas diferentes pantallas y elementos luego disecarlos un poco más y luego entrar en muchos más detalles porque todos estos proyectos pueden tardar meses en crearse, sobre todo cuando empiezas. Crees que tienes como, por ejemplo, 10 pantallas diferentes, pero indias. Terminas con 100 así que es muy importante dedo del pie. Consigue este proyecto. planificación comenzó antes de enviar el informe de diseño al cliente antes de enviar su precio al cliente, porque realmente puede acortarse en esta etapa antes de que siquiera sepa lo grande que es en realidad el proyecto. Por lo que es realmente importante bajar a un trozo de papel y huevos en este caso, y simplemente anotar algunas de las pantallas principales que vas a diseñar y luego ir de ahí. Entonces lo que tenemos para el inicio es cargar pantalla. Entonces fue entonces cuando abrieron la app, y obviamente van a saltar con los pies dentro del arriba y abajo iniciar sesión con su Facebook o con su correo electrónico. Pero no vamos a ir a la frontera con esto. Por el momento tenemos pantalla de inicio, que es la pantalla principal, y ahí es básicamente donde están sus pies. Y se parecerá mucho a Instagram porque eso es lo que el cliente quiere que creemos. A continuación, tenemos imagen abierta desde casa, por lo que van a dar click en la imagen y abrirla aquí mismo. Tenemos agregar nueva imagen porque será una barra de pestañas en la parte inferior de estas pantallas, y van a poder agregar nuevas imágenes tanto de galería. Como se puede ver aquí mismo y desde la cámara. Vamos a diseñar galería porque no nos vamos a molestar con la cámara porque es solo un predeterminado básico de la cámara IOS, por lo que abrirá eso. Pero vamos a simplemente diseñar rápidamente esta galería editar imagen. Pocas pantallas, Así que vamos a diseñar unos deslizadores. Entonces para Indy, por ejemplo, brillo, contraste, tal vez nitidez y así sucesivamente. Entonces vamos a diseñar una pantalla de cultivo, así que van a poder recortar esta imagen. Y finalmente tenemos descripción de imagen y publicada. Por lo que después de que hicieron clic en Nueva Imagen, agregada de Galería, editaron la imagen por completo. Después, antes de publicar, van a agregar imagen, descripción y etiquetas y luego hacer clic en publicar. Tendremos likes porque van a poder ver los likes que recibieron perfil. Por lo que su perfil en sus imágenes en el perfil y van a poder incluir, por ejemplo, iconos de redes sociales ahí. Son sólo descripción básica. Entonces vamos a tener el tablero y a la vista del tablero. Van a poder ver el número total off likes, por ejemplo, por ejemplo, el Cuando nuestro día en sus imágenes más le gustó a la vez horas del día en qué día, por ejemplo, y así sucesivamente. Y finalmente vamos a tener el menú del sitio, que sólo va de pie, básicamente atraiga a todas estas pantallas diferentes juntas y va a pop desde decider desde la parte superior. Eso lo vas a ver en el propio proceso de diseño. Entonces básicamente lo hay para la planeación del proyecto. Como dije, esto es sólo un comienzo áspero. Por lo que desde esta pantalla de inicio, por ejemplo, se pueden diseñar cinco pantallas diferentes. Básicamente, a partir de esta imagen abierta, incluso puedes ir un poco más allá y diseñar muchas pantallas diferentes. Pero estos son solo tu punto de partida para que puedas envolver la cabeza sobre lo que es importante diseñar en esta primera etapa. 76. Dibujar: en este video, voy a mostrar cómo puedes bosquejar nuestros años en el dedo del pie solo pedazo de papel liso. Pero antes de hacerlo, quería mostrarles esto. Esta va a ser nuestra estructura de proyectos. Entonces a medida que avanzamos por estas lecciones y estos videos, vamos a sumar cada vez más, y luego vamos a pasar a llenar la mayoría de este espacio. Pero antes de que lo hagamos, como viste en los videos anteriores, tenemos el resumen de diseño. Tenemos la planeación del proyecto que ya cubrimos, y ahora tenemos estos bocetos. Ahora, estos son solo los bocetos y que dibujé en el dedo del pie una pieza lisa fuera de papel blanco. Escaneé el principal usando mi escáner. Pero si no tienes un escáner, solo puedes sacar una foto con tu teléfono y solo incluirla dentro de tu ex defile. Y son realmente útiles porque solo puedes dibujar algunas de tus ideas sobre el papel antes que te enciendas. X'd básicamente, y puedes simplemente bloquear algunas de las piezas blancas y la mayoría de los elementos que quieres incluir. Entonces tal vez tengas algunas ideas que te inspiras en los estos sitios web de diseño, por ejemplo, regate o sea latas o algo así, y entonces solo quieres dedo del pie. Pon esas ideas en el papel antes de empezar a diseñar. Entonces realmente recomiendo esto porque puedes simplemente escupir todas tus ideas en papel, ver qué funciona, qué no. Y luego puedes empezar a diseñar en Adobe X'd. Entonces, como pueden ver aquí mismo, tengo 12 pantallas, como ya les muestro en el video anterior con la planeación del proyecto. Pero ahora lo que tenemos aquí es una pantalla de carga, que sólo va a ser su logotipo, y vamos a incluir un bonito poco de animación en esa pantalla de carga. Vamos a jugar con algunos fondos y así sucesivamente antes de las transiciones a la pantalla de inicio . Aquí, vamos a tener la barra superior con la flecha hacia atrás y el menú hacia atrás. Obviamente Arrow no va a estar aquí, pero acabo de incluirlo en todas partes porque es más fácil para mí entonces simplemente dibujar y seguir adelante . Esto porque esto está destinado a ser como un proceso rápido y no un proceso largo. Por lo que solo quieres poner en el papel tantas ideas como quieras. Entonces, por ejemplo, en un solo papel tienes 10 pantallas de inicio diferentes y solo haces alguna exploración básica de diseño. Ver qué funciona, qué no y luego moverse a lo largo de todas estas pantallas utilizando las mismas técnicas. Entonces aquí van a tener imagen de usuario o son amargos. Voy a tener su nombre, ubicación fuera de la imagen o las estampillas de tiempo. Entonces, por ejemplo, Dispose publicado hace 23 minutos o algo así. Vamos a tener la imagen misma. Aquí vamos a tener algunos iconos básicos, y luego vamos a tener la ubicación o la estampilla de tiempo. Entonces solo voy a decidir que vamos a tener el texto, que es la descripción de esta imagen y finalmente comenta debajo de eso. Vamos a tener las barras superiores que ves en muchas de estas pantallas, y van a contener los iconos principales y los demás elementos del menú van a estar aquí dentro de este menú. Llamo a que cuando lo tocas, va a mostrar este menú lateral con X para el cierre, y puedes tocar todos esos otros elementos para ir dentro de esas otras pantallas. Aquí tenemos la imagen abierta, así que cuando hagas click en esta imagen, abrirá para que sea un poco más grande, y ahí vas a explorar los comentarios. Básicamente. Entonces vamos a determinar que con el cliente un poco más tarde si quieren mostrar los comentarios inmediatamente aquí mismo en esta pantalla o deben estar escuchando y después tener otra pantalla dedicada, como lo hace Instagram. Entonces cuando hagas click en los comentarios, se abrirá esa pantalla, y luego podrás leer todo el proyecto de ley de comentarios que tenemos en New Image. Por lo que uno de estos iconos en la parte inferior en la parte superior van a tener este icono de agregar nueva imagen . Entonces cuando lo toques, abrirá este grito. Contendrá ilustración, y soy buen show donde se pueden obtener las ilustraciones gratuitas para la pantalla y vamos a tener galería y cámara. Por lo que años puede haber una deuda capaz de tocar uno a galería para abrir la imagen desde su galería o abrir la cámara de inmediato que chasqueando imagen y luego incluida en remolque. Esta app de abajo que tenemos la galería, por lo que cuando den click justo aquí, irán a la galería y seleccionarán la imagen que quieran. cargará imagen en esta pantalla de imagen agregada, y van a poder tener todos estos deslizadores. lo mejor vamos a tener un icono de guardar aquí mismo y tener tal vez icono de pantalla dividida o algo así para mostrarnos el antes y después de esta imagen que ha completado. Y vamos a tener la flecha hacia atrás para que puedan volver a saltar a galería e incluir algunas imágenes más ahí. Debajo de eso, íbamos a tener el cultivo. Entonces vamos a seguir adelante. Básicamente, cuando podrías guardarlo te mostrará el cultivo. Si quieres cosechar, puedes. De no ser así, solo puedes ponerte a salvo y luego ir a esta descripción slash pantalla publicada. Muy. Vamos a poder ver su imagen Toe agregó el texto. Quieres hashtags y así sucesivamente. Y para agregar una ubicación fuera de la imagen si la ubicación está incluida y la mayoría de descuento, estos nuevos formularios, especialmente iPhones, tienen esa característica para que puedas usar esa ubicación o puedes buscar la ubicación dentro la APP, y puedes agregar una ubicación diferente si quieres. Y luego tenemos el botón, que básicamente es un botón publicado, y cuando deberías publicar, te llevará de vuelta a la pantalla de inicio. Y reemplazará esta primera imagen por tu imagen que acabas de publicar a continuación que tenemos Dashboard, que iban de dedo el acceso desde el menú lateral y dashboard te va a mostrar diferentes gráficos. Y va a mostrar información diferente donde, por ejemplo, por ejemplo, se puede acceder a los momentos más apreciados fuera del día para publicar. Entonces, ya sabes, fue a publicar tus imágenes a continuación y ese tipo de información. Entonces, por ejemplo, nuestros usuarios, mujeres u hombres que en su mayoría son como en tus fotos qué fotos son más populares retrato fuera del paisaje o algo así. Vamos a explorar eso en la parte de diseño fuera del discurso. Entonces vamos a tener, como para que la gente pueda acceder a likes desde esta barra de pasos, y solo van a ver básicamente al usuario de imagen que le ha gustado esa imagen y los tiempos para que puedan decir ¿Cuándo le gustó esa imagen? Vamos a tener perfil, que es, por supuesto, por supuesto, acceso desde esta barra de pasos. Entonces vamos a tener la imagen del usuario, su descripción de nombre, quizás iconos de redes sociales aquí mismo, así como sus imágenes que han publicado en esta app. Por último, tenemos menú lateral, por lo que todos los artículos que no están dentro del stop nuestro o el tap bar se van a ubicar en este menú a un lado, y van a poder acceder a todos esos ítems usando este icono. Este icono X o cierre va a aparecer y luego pueden cerrarlo y esta pantalla va a desaparecer. Y vamos a utilizar algunas técnicas de superposición cuando incluimos la pantalla en la parte superior. Todas estas otras pantallas, que tienen esa opción para nosotros para que podamos hacer click en el icono del menú lateral y este menú lateral va a aparecer. Por lo que esos son básicamente son solo marcos básicos de alambre de arranque. Obviamente van a cambiar, sobre todo en la segunda ronda de este proyecto, cuando empecemos e incluye algunas nuevas características en el Año dos a partir de ahora. Pero para el inicio solo hay un buen punto de partida y podemos empezar con nuestros marcos de alambre , y eso es lo que vamos a hacer. En la siguiente serie de videos. Vamos a ir a dar vuelta a los bocetos en marcos de alambre de remolque, utilizando la descripción del resumen de diseño que nos dio el cliente. Por lo que el iPhone X en nuestro caso para el punto de partida. Y vamos a convertir estos bocetos en marcos de alambre de toda regla y luego más quieren incluir imágenes incluyen diferentes colores y sombras para crear un diseño terminado antes pasar al prototipo y animar todas esas pantallas hacia arriba y antes de que enviarlos de vuelta al cliente. Entonces eso es todo para este video, y te veré en el siguiente. 77. Crea Wireframes 1: en este video, vamos a empezar a prepararnos para los marcos de alambre, y como pueden ver aquí mismo, agregué rápidamente. Ah, guía de estilo y yo incluimos algunos iconos que vamos a utilizar en este proyecto. Y llamo a esta guía de estilo porque vamos a incluir colores, formas, una ilustración que vamos a usar un poco más tarde. Y vamos a poner todo aquí mismo para que sea fácilmente accesible para sus desarrolladores y para el cliente si optan por escoger y elegir y copiar y pegar algunos de estos iconos en otro lugar si quieren. Por lo que para recapitular rápidamente lo que hemos hecho hasta ahora, contamos con el resumen de diseño en el que tenemos toda la información relevante que necesitamos incluir dentro de nuestro diseño. Entonces tenemos planeación de proyectos, que son solo las pantallas principales que vas a diseñar. Después de eso, hemos creado nuestros marcos de alambre sobre papel, usando sólo un simple lápiz con media escándalo y los incluimos dentro de un documento lejano de Adobe X'd , que vamos a hacer referencia un poco más tarde porque estamos va a usar algunos de estos nombres dentro están fuera de nuestros puertos y finalmente tenemos ahora en esta guía de estilo, que incluí con los iconos y justo este logo básico que enviaron justo aquí. Ahora, si hago clic en él, se puede ver este es el logo del obturador y sólo tiene una parte. Entonces todo se fusiona. Pero cuando consigamos O animando, vamos a animar algunas de estas porque necesitamos incluirlas y luego especie de seleccionarlas. Y te voy a explicar eso un poco más tarde cuando llegues a animar esto, pero no se va a quedar en esto luciendo así. Entonces ahora empecemos a agregar algunos nuestros puertos, y vamos a incluir 12 de ellos porque vamos a tener 12 pantallas para que nuestro diseño incluya un nuevo nuestro tablero. Puedes dar click aquí y nos vamos de pie. Agrega iPhone 10 y 10 s desde aquí mismo, y voy a llamar a este uno pantalla de carga como así simplemente haz doble clic en este texto justo aquí en la parte superior, y luego podrás añadir tu nombre fuera del aeropuerto. Voy a hacer algunas copias. 23456789 10 11 12 porque vamos a tener 12 pantallas diferentes. Déjenme contrarrestar rápidamente. Entonces para 8 12 como así voy a hacer doble clic aquí y escribiendo a casa. Esta se va a abrir imagen. Este próximo va a estar a nueva imagen. No, éste va a estar en desde galería. Esto se va a agregar imagen. Esta va a ser descripción slash publicar porque vamos a tener un fondo publicado aquí mismo. A continuación, podemos crear un dashboard como así vamos a crear likes para la lista fuera de likes vamos a crear un perfil. Vamos a crear menú lateral y dejarme contar rápidamente una vez más. Entonces para para 68 10 11 por falta una más necesito agregar cosecha aquí, así que voy a agregar grupo. Entonces después de eso viene imagen descripción barra barra publicar Después de eso viene en tablero y luego le gusta para un formulario y finalmente menú lateral. Entonces eso es básicamente todo para esta parte de creación. Yo sólo voy dedo del pie separarlos ligeramente del resto de nuestros puertos. Entonces tal vez algo como esto, tal vez a 200 píxeles de estos, solo para que podamos tener un poco más de espacio. Estos van a ser nuestro marco de alambre. Segundo Presti, haga clic aquí afuera en el zócalo y se puede escribir en marcos de alambre. Se puede escuchar controlar una arena de arena abierta. Usemos 200. Agradable, grande y debilita. Posicionarlo a algún lugar por aquí y tal vez a por aquí. Por lo que ahora nosotros que tenemos configurados nuestros marcos de alambre. Yo sólo quería añadir una cosa rápida más dentro de este video, y esa es una parte de status. Voy a ir con el dedo basándolo desde aquí. Y hagamos letras pequeñas aquí mismo. Y simplemente voy a golpear Control V. Y tomé esto de otra app, y si no sabes cómo encontrar esto, puedes ir justo aquí a casa. Se puede ir dedo del pie adultos. Puedes ir a ti. Yo kits, y cuando hagas click justo ahí, te llevará a su página web. Simplemente descarga el IOS oficial de Apple. ¿ Te gusta? Sea lo que sea en este momento estás viendo el discurso. Entonces, por ejemplo, en este momento tienen al IRS 13 cebo arriba. Pero no descargaré esa versión beta porque aún tiene algunos bugs en ella, y todavía no los aplaste. Pero voy a usar IOS 12 porque ya está lleno y enviado en todos sus dispositivos. Pero si quieres en un momento posterior, también puedes usar el IRS 13. Esos sólo algunos digamos cambios de menú. No son tan grandes, pero puedes descargarlo. Si estás usando huevos E en tu Mac, simplemente ábrelo y puedes tener que te gusta que se abra. Si lo estás usando en tus ventanas, tienes remolque. Descomprimirla porque viene como una imagen DMG, y puedes descomprimirla Usando siete zip, por ejemplo, simplemente puedes hacer clic derecho y descomprimir eso en tu escritorio, y cuando descomprimiste que así es como se ve. Entonces este es el Iris original y oficial. Te gusta desde los propios Apple, por lo que realmente puedes sumergirte en profundidad aquí mismo, y puedes hacer clic aquí a los activos. Tienes todos estos colores oficiales. Tienes todos estos fondos oficiales, símbolos, iconos y demás. Pero lo que nos interesa es solo parar, estar enfermos y darle click a cualquiera fuera de estas pantallas y simplemente puedes bucear profundo insight y vamos a ver, estado es donde puedes hacer click derecho aquí o golpear control C, copiar desde aquí y luego simplemente pégalo en el tuyo. Nuestros puertos. Eso es lo que hice aquí mismo. Y puedo golpear el control C en este y alejar un poco. Selecciona el resto fuera de mis tableros hit Control V Y ahí tienes. Está bastado por todas partes, pero antes de hacer eso, quiero hacer clic en él, golpear control, comando K y hacer un símbolo. Y si estás saltando justo aquí, puedes verlo. Agregó que a los componentes. Entonces tenemos el componente de barra de estado justo aquí y ustedes condensan. Simplemente pulsa el control C. Luego selecciona todo excepto el menú, porque no lo necesitamos en el interior del menú. Golpe Control V, y se va dedo del pie. Patearlos aquí mismo, y va a pegarlos como componentes infantiles. Entonces este es el componente maestro porque tiene este diamante aquí mismo, y todos estos son componentes secundarios. Puede hacer cambios en este componente secundario irrelevantes fuera de este componente maestro. Pero una vez que haces un cambio. Por lo que el componente de la mezquita va dedo del pie aplicado que cambian de dedo todo fuera de los componentes del niño frito . Entonces si salto aquí mismo y, por ejemplo, cambié este estilo de tiempo de negro a rojo, tal vez puedas verlo cambia para leer en tiempo real a través de todos estos, que básicamente sea para este video, y eso es básicamente todo para nuestra preparación. Y en el siguiente video, vamos a saltar y empezar a diseñar nuestros marcos de alambre, y les voy a mostrar cómo podemos diseñar o algunos de estos elementos. Heiken usa guías en superior puede hacer frente a Ian Pace en estos elementos para que tu trabajo sea mucho más fácil y mucho más rápido. 78. Crea Wireframes 2: No empecemos a crear nuestros marcos de alambre y saltaré dentro de nuestra guía de estilo. Haga clic en el control de golpe del logotipo C. Haga clic en la pantalla de carga. Golpear control. Nos vamos del dedo del pie. Colóquelo debajo de las escaleras. Barb golpeó este medio, este extremo medio. Eso es todo por ahora, porque sólo va a ser una pantalla de carga. Y en la siguiente sección del curso, cuando empecemos a crear prototipos y añadamos animaciones a esto, entonces vamos a incluir algunas animaciones y player on con ello. Pero por ahora, vamos a quedarnos ahí. Ahora Saltemos dentro de una pantalla de inicio y empecemos a crear eso. Entonces voy a usar mi herramienta de rectángulo, y voy a dibujar un lindo hormigueo de crack grande, que va a ser 375 con 88 como así, y lo voy a agregar a la parte superior. Muévete abajo, y voy a llamar a esto nunca bar B G. Así que voy a incluir una ligera sombra de gota. Colócala aquí y quita la frontera, y dejémosla en red. Ahora vamos a crear un texto o debilitarnos. Simplemente agregue un local justo aquí en el centro. Hagamos eso voy a dar click aquí mismo. Hit control C it control V Y voy a golpear control turno y a la izquierda Haga clic en mi ratón, y lo voy a posicionar en algún lugar por aquí para el arranque. Qué, Tal vez 20 píxeles de este partido botella. Colóquelo ahí. Y ahora lo que necesitamos se ganó. Estos dos iconos van a golpear el control C para copiarlos. Salta adentro justo aquí. Golpea el control V y me voy con el dedo del pie. Posicionarlos como Así que esto va a ir justo aquí. Esto va a ir justo aquí. Mantén pulsado el turno 12 hasta la posición en 20 píxeles desde la izquierda. Mantenga pulsado el turno uno a la posición en 20 píxeles. Y luego voy a seleccionar el menú de la cámara y el obturador todo a la vez. Haga clic aquí para colocarlos en el medio y luego moverlos, por ejemplo, 10 píxeles de este borde inferior. Y creo que eso se ve bien. Vamos a darle algo de color a esto, y vamos a usar ese mismo área de colores para usar en los videos anteriores. Por lo que tres C seis esfuerzo, así y que sea azul. Y eso se ve bien. Ahora agruparemos todos estos. Saquemos la barra de estado fuera del camino. Por lo que tenemos una cámara tenemos obturador, que es nuestro menú de logotipos. Y nunca Barbie G fue a seleccionar. Todos ellos, tenían control G y llamaron a esta barra naff como Así que ahora es grifos de diseño en la parte inferior. Ir a ir y elegir mi rectángulo para una vez más simplemente dibujar un bonito rectángulo grande. Voy con el dedo del pie. Elimina el borde y puedes incluir la sombra si quieres. Pero sólo voy a cambiar el color de su ligeramente a algún lugar por aquí. A lo mejor sólo para que podamos verlo. Y por sus dimensiones. Es 375 y la altura es 83. Voy a moverlo hacia abajo al fondo así, y luego simplemente voy a seleccionar indicador de inicio de mi otra pantalla. Voy a pegarlo en su lugar, y este indicador de inicio que tomé del kit oficial del IOS realmente no me gusta este color. ¿ Qué cambia a este color? Sí, eso se ve mejor. Es solo un bonito color gris grande. Y usemos algunos de estos iconos. Entonces usemos estos cuatro hit control C. Voy a saltar aquí mismo. Control de película y los voy a mover hacia abajo. Entonces vamos a ver, están en un grupo para que podamos posicionarnos así Así que están en el medio y tal vez podamos usar un rectángulo. Ve al borde superior de este fondo, dibuja rectángulo grande, luego selecciona este grupo posicionado en el medio, como así fue dedo del pie. Elimina este rectángulo y me voy con el dedo del pie. Mueve todo esto hacia abajo con tener indicador de inicio de rectángulo. Esto va a ser barra de pestañas B G como Así que esto es indicador de inicio, y estos son sólo iconos. Entonces vamos a moverlas fuera de este grupo va a borrar el grupo y lo que necesitamos es reposicionar algunos de ellos. Entonces vamos a mover estos tres, por ejemplo, 20 píxeles más 20 y esto va a ser 20 también, Entonces tal vez podamos agruparlos, mover el grupo en el centro, y creo que eso se ve muy bien. Ahora puedo desarreglarlos o puedo dejarlos dentro. De verdad me persigue, pero me voy de pie. Desenvolverlas porque va a ser ah, mucho más fácil seleccionar un poco más tarde ahora, porque esta es nuestra pantalla de inicio. Vamos a cambiar su dedo del pie de color. Tres C seis ff, así, Y puedes agregar esto a tu muestra de color para que puedas guardarlo así. Puedes aplicar esa muestra de color, y también puedes hacer clic aquí mismo en los activos. Da click en los colores y podrás elegir este color porque ese es nuestros principales grandes colores al 70 70 70 70 si recuerdas de los videos anteriores, y puedes usar ese color si quieres. Ahora voy a usar ese mismo color para esto. Por lo que es 70 70 70 y vamos a dar click aquí y seleccionar este color. Voy a moverlo todo el camino hacia abajo, y tal vez podamos seleccionar este blanco. Pero tratémoslo un poco más tarde. Cuando tenemos el diseño terminado, entonces es mucho más fácil seleccionar todos estos colores. Ahora nos gustó todo golpeó Control G, y este va a ser nuestro bar 10. Yo creo que sí. Ahora es el momento de crear estos otros elementos, así que vamos a crear esta tarjeta, que irá al centro, y vamos a duplicar esa carta más tarde, usando la grilla de repetición ahora para conseguir una estrella. Se voy a usar los labios. Pero antes de hacerlo, simplemente voy a mover estas guías para ayudarme a posicionar estos elementos un poco mejor . Entonces si tienes un derecho aquí, puedes ver esta selección y la puedes ver en la parte superior también. Eso es para la guía, así que simplemente puedes, sin embargo, aquí mismo, click sobre ella y luego aplicar el dedo guía el borde izquierdo de este icono. Y ahora tenemos 20 píxeles aquí mismo a la izquierda. Yo puedo hacer lo mismo con este ícono de menú, pero como puedes ver, no hay ninguno aquí mismo. Tienes que seleccionarlo desde este borde, así que básicamente es exactamente lo mismo, como en cuatro tienda. Si alguna vez usas para la tienda, sabes que puedes aplicar a estos chicos y puedes hacer click derecho copiar estas guías y pegarlas en todas nuestras juntas, y me aseguraré de que un poco más tarde. Pero ahora vamos a crear ese carrito. Entonces si selecciono bonito círculo grande, voy a llamar al Salvator por ahora, lo voy a mover justo debajo nunca me separe aquí mismo. Y vamos a mantenerlo pequeño. 40 40. Al igual que así y me voy dedo del pie Mueve eso para escuchar su turno. 12 Así que 20 píxeles de este borde aquí mismo. Voy a seleccionar mi textil y voy a escribir en Joe John hasta, por ejemplo, y vamos a llenarlo con este color. Vamos a usar a toda princesa así y vamos a ver, tal vez podamos usar, ya sabes, 14 Bolt. Por lo que 14. Y usemos el tipo de pernos desde la izquierda, y puedo colocarlo aquí mismo. A lo mejor más 10 pixels y dentro del centro, como este hit control D, y para esta copia, vamos a usar ese otro color. Entonces vamos a ver, tal vez podamos usar 12 como para que podamos usar regular y podemos usar DDT como así, Y puedes agregar ese color a una muestra de color, y también puedes hacer clic aquí y añadirlo a aquí. Ahora vamos a posicionarlo, y va a estar alineado a la derecha. Asegúrate de que esté en el centro con este texto para que puedas usar tus teclas de flecha a algún lugar por aquí y puedes posicionarlo obviamente, a este borde doble clic, y esa va a ser nuestra ubicación así. Y tal vez pueda agregar un coma aquí así. Y debajo de eso, vamos a crear nuestra imagen. Entonces simplemente voy a dibujar un bonito rectángulo grande. Podemos usar el radio de esquina apagado, tal vez cinco. Podemos tenerlo sin frontera, incluye la sombra. Y sólo vamos a usar esta sombra por defecto. Y para la altura, usemos 200 como asi posicion en 20 pixeles. Por lo que a uno le guste eso y por debajo de eso, podemos agregar algunos del texto. Entonces tal vez podamos hacer clic en este control de un golpe en D, y tal vez pueda moverlo hacia abajo y va a ser una marca de tiempo. Entonces llamémoslo hace tres minutos así. Entonces hureo y vamos a usar este color, y también lo podemos agregar a las muestras aquí mismo. Y ya agregué, Aquí mismo el dedo del pie son componentes de color y honestamente, que ahí va a ser nuestra imagen y lo que necesitamos aquí mismo son algunos iconos. Entonces usemos algunos de ellos qué, vas a usar nuestro corazón para que yo pueda seleccionar el corazón vamos a usar el comentario y vamos a usar share. Así que golpea el control C y voy a saltar aquí mismo. Acercar un poco más. Hit Control V. Esto se va a alinear hasta aquí. Muévelo aquí y luego 20 píxeles hacia abajo. Y entre cada uno de ellos, tal vez podamos agregar algo de espacio. Veamos 1234 Porque tenemos en este bonito espaciado y 40 píxeles entre estos también . Y ahora simplemente mueve esto en el centro fuera de estos iconos así. Y por último, lo que necesitamos es un párrafo. Entonces vamos a ver. Podemos usar el sentido abierto 14 una vez más para crear un párrafo, simplemente puedes hacer clic aquí, Entonces dibuja un párrafo y puedes escribir algo dentro. Entonces puedes saltar aquí mismo para enchufar, Lauren Ipsum y puedes hacer clic en él lleno de texto de inserción de texto de marcadores de posición. Y ahí tienes. Yo sólo voy a hacer que se vea alineado a la izquierda así. Y si no sabes cómo dedo del pie instala algunos de estos enchufes, sobre todo mucho yeso, puedes hacer clic aquí mismo en este signo plus como aquí mismo, escribiendo mucho yeso aquí está, y simplemente puedes hacer click instalar, y cuando lo hagas, se mostrará como instalado como Así que no, es sentido abierto. 12 regular, Pero hagámoslo un poco más pequeño para mí antes de líneas de textos como así y luego lo vamos a crear es, por ejemplo, ese sistema de instagram para los gustos. Entonces vamos a usar este control de golpe y D, y vamos a simplemente colocarlo aquí mismo y asegurarnos de que esté alineado a la izquierda. Y quizá la vista. 24 comentarios controlan un clic aquí y luego simplemente selecciona este color DDT. Como puedes ver, es realmente sencillo elegir. Entonces de 1 a 20 pixels y veamos este 1123 que escuchamos a 20 pixels. Entonces todo se ve igual y todo es que 20 píxeles así. Y ahora simplemente ordenemos algunos de estos. Entonces primero tenemos nuestro avatar. Está en la parte superior. Entonces hemos bromeado masa. Entonces tenemos a Londres, Inglaterra así. Entonces tenemos nuestra imagen. Debajo de eso, tenemos estos iconos que tenemos hace tres minutos. Tenemos nuestro texto de párrafo y finalmente tenemos vista 24 comentarios. Seleccionaré todo lo que había controlado G, y este va a ser nuestro carrito como Así que ahora ya se acabó. Básicamente, hemos creado nuestra tarjeta, y ahora lo que podemos hacer es hacer clic en el auto, clic en rejas repetidas, y simplemente podemos sacar unas cuantas más de estas cartas abajo y eso va de pie. Crea una ilusión para el pergamino. Entonces tal vez pueda terminar en algún lugar por aquí. Digamos Sólo a ver dónde están los comentarios. Aquí están, así que puedo terminarlo aquí mismo. Y luego tenemos tres posts, y luego cuando obtenemos un prototipo, simplemente podemos hacer clic aquí y luego moverlo hacia abajo así, y para crear una mejor ilusión. Porque ahora las tarjetas están cubriendo todo a continuación. Se puede mover esta barra de pasos por encima de las cartas, y cuando se desplaza hacia abajo, esta barra de pasos se va a mantener fija, y se va a sumar esta ilusión de que todas estas cartas van por debajo de ella. Y tal vez incluso podamos incluir alguna sombra de gota. Pero vamos a ver de eso un poco más tarde. Dentro de la parte de diseño, esto es solo una parte de marco de alambre. Entonces, solo mantengamos todo bonito y sencillo. Entonces eso es básicamente todo para este video. Te veré en la siguiente cuando vamos a crear imagen abierta, así que ya veré ahí. 79. Crea Wireframes 3: Ahora, a medida que avanzas y comienzas a diseñar su mejor idea para guardar tus archivos. Como pueden ver, esta estrellita se muestra aquí mismo. Simplemente puedes controlar s o comandantes en el Mac, y dirá tu proyecto. Por lo que ahora empecemos a crear esta imagen abierta. Yo sólo voy a dar click aquí mismo. Control de golpe C golpe control V posición esta a continuación. Haga clic aquí. Control de golpes C Control V. Y como pueden ver, me va a mostrar todo porque esto sigue siendo una página de inicio. Básicamente, sólo tiene abierta esta imagen. Pero aquí mismo, necesitamos crear una flecha hacia atrás. Entonces, vamos a seleccionarlo desde aquí. Aquí está, control. Ver? Y simplemente voy a dar clic aquí, controlar V en la cámara, y sólo voy a posicionarla donde está. Entonces aquí mismo. Asegúrate de que esté en medio de todo, o como el borde superior. Al menos haga clic en un golpe de cámara eliminar. Y también puedes hacer un click derecho en algunos de estos y puedes copiar a estos chicos. Pero no creo que los necesitemos en todos nuestros puertos. Entonces vamos a creerlo como es. Y voy a mover que su barra hacia abajo en la parte inferior. Ahora, lo que necesitamos para este, vamos a usar algunos de estos elementos. Entonces vamos a copiar una de estas tarjetas y puedes golpear el control. C click justo aquí. Golpe control V. Se puede en grupo la grilla. Y como puedes ver, algunas de estas tarjetas salieron afuera. Entonces vamos a eliminar al 2do 1 Es éste, y vamos a dar click en el de inicio, que está afuera en el zócalo, y vamos a eliminarlo también. Ahora, lo que queremos es mover algunos de estos elementos. Entonces voy a dar clic aquí y mover todo 20 píxeles hacia arriba desde este borde inferior. Y lo que quiero es extender estos. Entonces sólo lo voy a abrir. Voy a seleccionar nuestro nombre y ubicación. Voy a secarlo afuera de esta carpeta encendida. Voy a posicionarlo un poco por aquí. Siguiente voy a saltar dentro. Podría naff bar y altura y esto nunca Barbie Gee o aún mejor, puedo bajar tu pasty abajo Es más fácil y más tarde para prototipar también. Pero como puedes ver, puedes mantenerlo aquí y se verá bonito y sencillo, pero creo que va a agregar un poco más de interés visual como este. Pero vamos a mantenerlo abajo. Entonces vamos a seleccionar estos, a ver si funciona. No es así, y tal vez podamos mantenerlo Aquí. Déjame saltar dentro de éste. Voy a seleccionar estos tres hit control C Haga clic aquí. control de golpes V los va a colocar exactamente en la misma posición. Y yo sólo voy de pie. Pídelos de nuevo en tarjeta. Ahora Lo que quiero con esta imagen es que quería extender el dedo del pie estos dirección aquí y escuchar también voy dedo del pie, quitar radio de esquina, mantenerlo en cero, y simplemente extender mi imagen todo el camino hacia arriba en la parte superior. Esto va a cubrir todo, y me va a mostrar la imagen. Y por último, cuando lleguemos a la parte de diseño, tal vez podamos añadir una ligera sombra de gota aquí mismo. O tal vez alguna Grady int. Creo que esa será aún mejor idea. Por lo que ingrediente cubrirá básicamente lo que este fondo de barra naff cubre ahora mismo. Pero dejémoslo así. Agradable, limpio y sencillo. Y sigamos adelante porque vamos a tratar con todos estos detalles un poco más tarde cuando empecemos a diseñar y empezar a añadir algunas de las ilustraciones y sombras y colores, incluyendo imágenes y demás. Entonces eso es todo para este video. Te veré en la siguiente cuando nos vayamos del dedo del pie anuncio nueva imagen, y vamos a incluir una linda pequeña ilustración. 80. Crea Wireframes 4: vamos a conocer diseño agregar nueva imagen. Pero antes de que lo hagamos, daré click justo aquí al NAB nuestro control de hit C hit control V para sobrellevarlo aquí mismo. Y me limitaré a quitar esta flecha hacia atrás fuera de la carpeta porque eso es todo lo que necesitamos para esta pantalla ahora, debajo de eso, solo necesitamos en este indicador de inicio Así que debería controlar ver click Control V. Y ahora vamos a agregar algún texto aquí mismo y que simplemente se basa desde fuera. Entonces esto está abierto, dice 14 solo para que no tenga dedo del pie justo dentro, así que soy un poco perezoso así. Voy a arrastrar esto abajo y arrastrar esto abajo para escuchar. Ahora, aquí arriba, vas a tener una ilustración, así que voy a pagar a Started también. Ahora bien, esta ilustración es gratuita de usar. Y si saltas aquí mismo a los enchufes, es de andro. Por lo que puedes hacer click en este enchufe y puedes ver puedes cambiar las ilustraciones nocturnas o puedes hacer clic aquí y tal vez tomados mecanografía fotógrafo como así y se va a buscar. Y aquí está esa ilustración. Se puede dar click en él. Y cuando esté hecho, simplemente puedes golpear hecho, y puedes ir a algún lugar afuera a escuchar. Por ejemplo, golpeó Control V. Y se ha tomado con base en esa ilustración. Se puede agrandar, y como se ha trabajado ahí ilustración, se puede ver cómo se ve eso. Si quieres cambiar algunos de estos colores, puedes hacer click dentro. Podemos mantener turno, seleccionar todo. A lo mejor podemos hacer click a algunos fuera de nuestros colores así que tal vez puedas usar este. Puedes usar esa. A lo mejor se puede aumentar y disminuir la opacidad y así sucesivamente. Y cuando estés feliz, simplemente puedes arrastrarlo dentro de una de tus tablas. Y entonces se va a ver así. Déjame volver a mis menús, y lo que necesito crear a continuación es que necesito crear dos selecciones porque necesitamos que la gente sea capaz de hacer selecciones desde la galería así como desde la cámara. Entonces hagamos esa selección aquí mismo. Vamos a crearle un pequeño rectángulo. No, vamos a añadir esa sombra de gota. Vamos a agregar esquina. El radio cinco va a ser tal vez cuadrado así que 40 con 140 así, y vamos a quitar la frontera porque no la necesitamos. ¿ En serio? No. Su posición. Es un poco más agradable. Entonces tal vez 40 píxeles abajo, así. Y esta va a ser nuestra galería BG, porque la gente va a poder agregar nuevas imágenes desde el control de golpes de galería Andi a duplicadas y esta va a ser nuestras otras. Entonces cámara BG, porque van a poder agregar desde la cámara así como así Así voy a mover sus quizá 20 píxeles de este como así y asegurarme de que ambos estén en el centro así . Voy a duplicar este texto. Yo lo voy a mover aquí abajo, y voy a mover algunos de estos por ahí. Entonces este va a ser nuestro texto irregular como, así que asegúrate de que sea a los 14 y simplemente vamos a escribir desde galería así, y yo voy a la posición de que en el centro fuera este así y tal vez moverlo bien , dejémoslo aquí por ahora. Controlaría D en este, y vamos a ir de pie anuncio de cámara aquí así. Asegúrate de que también esté en disidente, y necesitamos iconos aquí mismo. Por lo que voy a seleccionar rápidamente estos todavía. Entonces esos son los dos de aquí, y yo simplemente los voy a mover aquí mismo. Entonces Control V, esta va a ser nuestra galería, así que asegúrate de que esté en el centro. Esta va a ser nuestra cámara así, asegúrate de que ambas sean, por ejemplo, 20 píxeles así. Y tal vez podamos seleccionarlos todos y luego simplemente moverlos en el centro así y vamos a saber, ordenar algunos de ellos. Entonces esto es de la galería, y vamos a agrupar todo desde aquí y llamar a esta galería, y esto va a ser de la cámara y agruparlo todo y cámara de calidad. Y solo para el último, vamos a seleccionar el taburete. Haga clic aquí y simplemente seleccione este color. Ahora no necesito este color porque está bastado de esta ilustración, así que solo lo voy a mantener agradable y simple y usar solo nuestro color, y eso es básicamente todo. Nosotros hemos creado esta pantalla, así que vamos a animar un poco esto cuando tengamos el dedo del pie prototipando una parte del curso. Y la gente va a poder seleccionar desde la galería y desde la cámara. Y vamos a seleccionar y diseñar rápidamente este marco de alambre desde la galería porque todo va a ser bastante sencillo. Y vamos a utilizar simplemente en este nunca Bar hit control C Haga clic aquí. Golpe control V M. Voy dedo del pie. Quita este logo del obturador. Voy a seleccionar este texto Golpea control C Haz clic aquí, Control V. Y asegúrate de escribir galería aquí mismo como deuda. Y voy dedo del pie posicionarlo en el centro y en el centro fuera de esto también, así. E incluso puedes seleccionar estos tres en click justo aquí y se va a asegurar que estés en eso en el centro. No, lo que necesitamos son algunas imágenes, y simplemente vamos a usar una cuadrícula de repetición. Y lo que puedo usar es un bonito rectángulo, por ejemplo. Entonces tal vez pueda primero crear nuestras guías para poder dar click en este ícono y arrastrar en guía desde aquí todo el camino hasta este borde izquierdo y dar click en el icono del menú y hacer lo mismo por él también. Así que asegúrate de que sea así. Y por último, lo que quiero es crear estas plazas. Por lo que antes de hacerlo, quiero dar clic aquí y asegurarme de que esto es al 100%. Esta va a ser nuestra imagen así, y vamos a darle algunas dimensiones. Así que asegúrate de que sea. Por ejemplo, 99 con Sadie a eso se ve bien. Y usemos cinco para el radio de esquina así. Asegúrate de que estén a 20 píxeles de aquí. Controlar D y mover éste al centro y había controlado la una vez más. Y vamos a mover este a este borde derecho así. Por lo que todos ellos tienen exactamente, ya que paseando entre ellos. Debilitar grupo esta llaman a estas imágenes o aún mejor. Sí, agrupémoslos y simplemente golpeemos la grilla de repetición. Podríamos mover todo hasta aquí, por ejemplo. Y lo que quiero hacer es quizá, sí, mantengamos la frontera por ahora. Pero vamos a darle algún otro color. A lo mejor este para mantenerlo solo un poco más ligero. Sí, así. Y eso es básicamente todo para esta pantalla así como Bueno, como puedes ver, solo puedes crear uno de ellos, luego copiarlos, duplicarlos y colocarlos en sus espacios. Y cuando lo hiciste, simplemente puedes hacer clic en repetir cuadrícula, y puedes dibujar estos rectángulos hacia abajo y los va a duplicar. Se puede pasar el ratón aquí mismo, y se puede aumentar o disminuir el espaciado entre cada uno de estos elementos, tanto horizontal como verticalmente también, si se quiere. Y luego simplemente consigues esta agradable repetición genial, que es realmente fácil de crear como viste, y realmente te ahorra mucho tiempo libre. Ahora, en el siguiente video, vamos a diseñar esta pantalla de edición de imagen, y ya voy a ver. 81. Crea Wireframes 5: ahora está diseñado algunas de estas otras pantallas, así que voy a utilizar el ahora prestado una vez más, Control. Ver control. Nosotros justo aquí moviéndonos por debajo de la barra de estado. Y lo que quiero es el icono de guardar aquí mismo. Por lo que sólo me voy a mover a escuchar, seleccionar mi icono de decir, Hit control C y mover todo el camino de regreso a aquí. Lo que quiero aquí mismo son sólo estos iconos Soul. Déjenme basarlo rápidamente en. Colócala en un lugar así y lo voy a mover a este borde izquierdo. Y voy a mover flecha hacia atrás y guardar fuera de esta carpeta y simplemente pulsar Eliminar. Puedes dejarlo así, o puedes agruparlos dentro de su carpeta. Realmente no importa. Y lo que quiero aquí mismo es una imagen. Una imagen solo va a usar esta imagen desde aquí, así que localiza imagen hit control C. Mira aquí, Control V. Lo voy a mover por debajo de todo aquí mismo, y voy a usar las dimensiones off. 375 semanas. 532 como este. Y dejemos esta sombra. A zit es Y lo que queremos es crear unos sliders abajo aquí porque la gente va del dedo del pie estar seleccionando imágenes de la galería. Entonces van a estar consiguiendo esta pantalla de edición de imagen. Si están contentos con su imagen tal como está, pueden golpear, guardar y moverse directamente a una descripción y publicar o a esta otra pantalla si quieren recortarla. Pero si no lo son, tendrán los deslizadores en la parte inferior con los que jugar, y luego van a poder hacer esos cambios. Ahora necesitamos algo de texto aquí mismo. Y usemos abierto Sense 14 por ejemplo, y vamos a encontrarlo. Es justo aquí debería controlar, ver, y yo voy a colocar el derecho aquí, golpear Control V, y vamos a usar a esos tipos una vez más. Entonces dibujemos una guía rápida hacia aquí y hagamos una, por ejemplo, aquí también. Algo no está bien aquí, así que démosle eso y nos gustó este ícono también y dibujemos una bonita guía de aquí. Sal. Posicionémonos solo para escuchar, asegurémonos de que quede las líneas y asegurémonos de que sea regular, y voy a escribir en brillo. Voy a hacer un duplicado. Yo voy a escribir. En contraste, control de golpes, ¿verdad? Una vez más. Esto va a ser lo más destacado, así Y finalmente, vamos a tener sombras. Ahora déjame posicionar algunos de ellos, así que el brillo estará en la parte superior. Destacados estarán aquí mismo, y todos ellos estarán por debajo de nuestra imagen. Por lo que rápidamente bajé algunos de ellos porque me voy a posicionar un poco mejor. Entonces 20 pixels y voy a crear un dedo del pie rectángulo van de esta guía a esta. Y ahora vamos a empezar a crear nuestros deslizadores. Entonces esto va a ser un slider BG así. Y usemos ese color. Entonces vamos a quitar la frontera y por el color. Vamos a usar Vamos a usar este. Y vamos del dedo del pie por el radio de la esquina. Tener 50. Y para la altura, usemos ocho, por ejemplo. Sí, creo que se ve bien. Y voy dedo del pie posición todo, Por ejemplo, aquí mismo. A continuación, vamos a crear un círculo, así que solo dibuja un bonito círculo y usa tal vez 16 con 16. Agradable y pequeño así y para ello. A lo mejor podemos usar ese color azul para eso y tal vez podamos usar el color de borde blanco claro. Eso va a ser un círculo, y vamos de pie. Hacer un duplicado de este golpe de control D, y va a ser un color o un color de deslizador aún mejor. Y vamos a darle una sensación de color azul, y tal vez podamos moverlo aquí y luego posicionar esto para escuchar, tal vez porque la gente va a poder jugar un poco más tarde con él y luego ajustar sus imágenes en consecuencia hasta que estén contentos con el resultado. Ahora, ese grupo de reunión, todo esto para que seleccionen los tres distritos G de control de calor para ser un deslizador y vas a mover el deslizador sobre abajo Bright. Y pongámoslo aquí con 10 píxeles abajo. Simplemente contraste. Colóquelo hasta aquí y mueva sus 20 píxeles hacia abajo. Ahora podemos duplicar este deslizador, moverlo hasta aquí y asegurarnos de que también sean ellos píxeles hacia abajo. Asegúrate de que este es un 20 y fui a bajar esto un poco para que él controlara D y moviera el deslizador hacia abajo, así que asegúrate de que esté a las 10. Esto va a ser a los 20 y finalmente, usemos una copia más de este slider y movámoslo hacia abajo asegurémonos de que esté a los 20 también , o solo a las 10. Y creo que eso se ve bien ahora es que puedes ver que es bastante difícil de leer. Por eso vamos a cambiar. El son de color pobre en sí. Por lo que a partir de este color podemos elegir este color. Y ahora puedes ver claramente estos deslizadores mucho más fáciles y mucho más limpios. Ahora podemos posicionar este color y, por ejemplo, elegir todos los colores del slider BG y podemos elegir el blanco. Y si crees que eso es demasiado duro, tal vez podamos traerlo de vuelta aquí, y vamos a jugar con él un poco más tarde. Ahora déjame seleccionar rápidamente todos nuestros textos y para el color, solo van a usar el color blanco. Entonces ahora, como se puede ver, se puede ver este texto mucho más claro y mucho más fácil que antes. Ahora lo que voy a hacer es seleccionar estos dos iconos hit control C. Haga clic aquí, hit control. Nos aseguramos de que este tenga el mismo color de cenador que éste, y lo que en realidad voy a hacer es crear una ilusión fuera de cultivo. Entonces déjame saltar adentro y estos dos van a cambiar ahora de color dedo del pie blanco porque puedes verlos mejor así. Ahora vamos a crear una ilusión fuera de cultivo justo aquí, porque la gente va a hacer algunos cambios aquí mismo. A continuación, haga clic en Guardar movido a esta pantalla donde pueden recortar si hay hasta. Si no quieren dedo del pie, simplemente pueden hacer clic en el icono de guardar, y los moverá directamente para publicar donde van a poder incluir su descripción, por ejemplo, y simplemente mover a lo largo de ahí. Pero vamos a enfocarnos en esta pantalla por ahora. Y vamos a crear una imagen. Entonces vamos a crear una bonita imagen grande. Entonces vamos de filo a filo. Entonces 375 y para la altura, tal vez podamos usar 532 por ejemplo. Entonces Toby, igual que éste. Y tal vez incluso pueda llamar a Peyton a éste. Sólo para hacer las cosas aún más simples, mover todo abajo, colocarlo en el medio así, y tal vez para ello podamos usar? No lo sé. Por lo que superposición de color. A lo mejor así. Veamos cómo se ve eso. A lo mejor puedo golpear control y D y crear esta bonita superposición de color. A lo mejor puedo moverlo hasta aquí. Y por último, tal vez pueda crear algún tipo de área de cultivo de imagen. Entonces tal vez pueda usar esta imagen que primero se quita en estas sombras porque no las necesitamos por ahora. Entonces esto va a ser un color excesivamente, y este va a ser ahora nuestra área de cultivo de imagen. Por lo que significa duplicar este que había controlado el eran para escuchar quitar el relleno. Incluir el agua fronteriza va a ser blanca, y hagámosla un poco más pequeña. Entonces, por ejemplo, algo así, tal vez. Y juguemos con los ajustes para que yo antes de los 50 y tal vez podamos darle brecha. 10. Entonces ahora, como pueden ver, tenemos esta bonita zona de cultivo de imagen y llamémosla así. Entonces este básicamente va a ser nuestro cultivo de imagen, y vamos a jugar más adelante en la parte de diseño de este curso cuando incluimos la imagen real que vamos a recortar aquí mismo. Y te voy a mostrar cómo puedes mezclarte algunos de estos elementos y realmente asegurarte que esta imagen destaque y quizá en el mismo parque. A lo mejor podemos incluir algunos otros colores, como tal vez podamos recortarlo uno por uno. Pedido a 16 por nueve. Y quizá podamos incluir otra opción aquí mismo, antes y después, sólo para que la gente pueda ver eso. Y aquí también podemos incluir esa opción, para que la gente pueda comparar imágenes entre ediciones. Entonces vamos con el dedo del pie, piénsalo y tal vez incluido un poco más tarde. Pero por ahora, eso es todo para este video. Y en el siguiente, vamos a pasar a la descripción y a publicar. Y te voy a mostrar cómo puedes agregar algunos elementos diferentes aquí mismo. 82. Crea Wireframes 6: eso no es descripción diseñada pantalla publicada. Entonces lo que necesito es en esta espalda, me preocupa solo ir a seleccionarlo desde aquí para que él controlara ver golpe rápido Control V. Lo voy a mover abajo, porque la gente va a poder o volver atrás y hacer estos cambios adicionales o para publicar, y vamos a crear un fondo en tan solo un minuto. Pero primero, usemos algunos de estos otros elementos que voy a usar son John Doe y quizás la imagen también, por lo que controla. Ver y o no. Vamos a usarla desde aquí. En realidad, John Doe en imagen golpeó Control C. Y me voy dedo del pie bastado aquí mismo golpeó Control V exactamente en el mismo lugar. Y tal vez incluso pueda moverlo un poco más allá. Entonces, por ejemplo, 20 píxeles de aquí. Entonces 12 así y mueva todo hacia abajo y sobre esta imagen, vamos a tener que estar a los 18 como así, y voy a hacer un duplicado o su control de calor en D. Voy a posicionar esto un poco hacia abajo en hit, asegúrate de que estén alineado como este turno 12 y lo que quiero para él. Va a ser nuestra aportación. Entonces llamémoslo así puesto, vamos a quitar a la sombra incluir la frontera y para ello. Vamos a estar a las 13 por ejemplo, porque no lo necesitamos dedo del pie golpeado así de grande? No, usemos algo de texto. Podemos usar este párrafo aquí mismo y me bastan a la vista. A lo mejor puedo moverlo. 1212 Tal vez algo así. Y tal vez pueda traer esto. Por ejemplo. A lo mejor puedo darle un 10 y mantenerlo así. Copiar este texto hit Control C hit Control V, y voy a moverlo todo el camino hasta aquí. Asegúrate de que quede la línea que es, y me voy a posicionar para escucharlo. Turno 12 y vamos a escribir gente intacta porque los usuarios van a poder atacar a sus amigos, por ejemplo, o a las personas que estaban allí con ellos ese día. Ahora usemos algo de esto, Así que usemos la entrada. Por ejemplo, golpea el control C Patrol V, y lo voy a mover todo el camino hacia abajo una vez más, y esta sólo va a ser nuestra línea divisoria. Entonces, ¿qué se va a quedar igual? Pero la altura va a ser una. Y vamos a mover esa línea. Por ejemplo, 20 píxeles más abajo de este texto. Y por último, vamos a seleccionar estos dos ítems Control de calor D para hacer duplicados fuera de ellos, se movió abajo y posicionar esto Así de 1 a 20 píxeles hacia abajo. Mueve mucho más esta línea divisoria. Y voy a añadir esa ubicación aquí también. Entonces lo voy a seleccionar desde aquí, por ejemplo. Así que usé este golpe control C y me voy a mover aquí mismo. Hit Control V y lo voy a posicionar. En primer lugar, para dejarse forrado, Toby Justo aquí, Toby, 20 píxeles abajo. Y esta línea va a estar a 20 píxeles más abajo de este texto también. Entonces 12 Y finalmente, vamos a crear nuestro fondo. Entonces vamos a usar un rectángulo para ganar dron es botón grande, y vamos a darle un peso de 200 la altura de 50. Y vamos a darle un radio de tablero apagado ocho así, vamos a incluir este color de sensación No vamos a tener ningún trazo. Lo siento frontera, y vamos a incluir una sombra de fondo también y fuimos a posicionarla a algún lugar por aquí. Pero es con adecuada. Por lo que 1234 40 píxeles y vamos a utilizar este texto control de golpe en la unidad con abajo botón movido todo el camino hacia abajo. Este debería ser nuestro botón y distraer a la gente. El texto realmente va a escribir, publicar como, así que asegúrate de que va desde el centro. Colóquelo en el centro así y así, asegúrate de que sea blanco y vamos a mantenerlo regular así y simplemente reposicionarlo si necesario. Creo que eso se ve bien. Golpear control grupo G. Es y llámalo botón, y eso es básicamente todo para esta pantalla. Entonces pasemos una vez más. Entonces en el click justo aquí, vamos a ir a aquí. Por lo que cuando hagan clic en el dedo del pie, agregan nueva imagen a este ícono, los llevará a esta pantalla en Nueva pantalla de imagen, y podrán elegir entre galería o desde cámara. O pueden elegir desde cámara ahí como tres de aquí. Si eligen de galería, les llevará el dedo del pie anuncio de la pantalla de la Galería donde podrán elegir imágenes de su propia galería. Cuando los judíos la imagen que van a, agregaron goto, imagen donde pueden cambiar todos estos valores diferentes. Cuando peguen salvos, irán a cosechar. Si quieren cosechar, pueden cosecharlo. Si no, pueden hacer clic, guardar dedo del pie, venir a esta pantalla donde verán la vista previa de su imagen. Podrán agregar descripciones, atacar a la gente y al impuesto justo aquí en la parte superior, y podrán cambiar de ubicación. Por lo que en la ubicación justo aquí y la aplicación agregará automáticamente ubicación si se basa dentro de los datos de manera de imagen porque las imágenes de teléfono e imágenes de cámara mantienen moderador en el interior. Por lo que tomará esos datos y mostrar, Por ejemplo , Londres, Inglaterra aquí mismo y podrán publicar eso. Eso es básicamente, porque cuando lo publiquen con toda esta información, los llevará de vuelta a la pantalla de inicio, donde empujará todo esto hacia abajo y se mostrará en esa nueva imagen aquí mismo en el top. Entonces ese es básicamente nuestro trabajo completo para esta app, y en el siguiente video nos vamos a mover en el tablero de diseño. Y en los próximos miles de millones vamos a terminar el diseño de nuestros marcos de alambre y luego en la siguiente serie de videos, mover el dedo del pie el diseño real fuera de nuestra aplicación. 83. Crea Wireframes 7: No, está diseñada la pantalla del tablero y voy a elegir esta. Así que golpea el control C click justo aquí. Hit Control V y me voy a posicionar por debajo status Par salto a la vista a la flecha de atrás y me voy a mover dedo del pie en esta guía justo aquí y me mudé uno a aquí así como Así voy a borrar atrás Carol porque no lo necesitamos. Y esta yendo dedo del pie, derecha, salpicadero así Y asegúrate de que esté en el centro lo esté. Y vamos a necesitar una marca de tap aquí mismo para que podamos elegir esta. Por ejemplo, Hit control C it controlar el y se puede seleccionar el icono de inicio y hacer clic aquí y elegir este color cerrar Todo movió esa parte hacia abajo. Y ahora vamos a crear nuestro panel de control. Entonces simplemente voy a elegir a los textos del ya creado en mi otra pantalla solo para ahorrarnos un poco de tiempo libre. Pero si salto por dentro, se puede ver que ambos son de sentido abierto 14 regular, y yo solo digo el tiempo libre creando este texto. Ahora vamos a duplicar este, así que voy a golpear control de moverlo afuera, posicionarlo aquí abajo y asegurarnos de que quede alineado así. Muévelo a aquí y asegúrate de que esté a 20 píxeles más abajo de este, y se va a escribir en tipo. Necesitamos uno más y vamos a llamar a éste me gusta. Y finalmente necesitamos la suciedad y la última, y serán los mejores tiempos para publicar así y esto va a ir a algún lugar por aquí. Ahora vamos a crear un rectángulo como este, y vamos a llamar a este tipo de VG como Así que muévelo a aquí y asegúrate de que esté a 20 píxeles abajo de éste y asegúrate de que tenga radio de esquina apagado. Cinco. No border default Cállate y es 1 57 ingenio 200 y no, vamos a pasar a escuchar a alguien para golpear control de dedo, hacer una copia de ella, y esto va a ser un likes BG y simplemente fluido hasta aquí hasta que se encaje en posición para aquí y mover los me gusta. Dedo del pie de la línea a esta izquierda Etch. Ahora lo que necesitamos aquí son algunos elementos. Entonces déjenme elegir este texto. Voy a conseguir el control en D y películas aquí mismo. Nos vamos de pie derecho en retrato así y voy a ello Control de una vez más, y vamos a llamar así a este paisaje y asegurarnos de que estén a las 12. Así que selecciónalos a ambos, golpea 12 y asegúrate de que estén alineados en el centro. Y podemos, por ejemplo, dividirlos para que pueda moverlo así. Turno 12 Asegúrate de que estén a 20 píxeles de diferencia y muévete al centro así. Y tal vez pueda posicionarlos hasta 20 o 40 píxeles desde abajo. Pero mantengámoslo 20 solo para que las cosas sean simples. Ahora vamos a crear un círculo. Entonces, dale un círculo de 10 por 10 así, y tal vez podríamos mover este círculo, por ejemplo, 10 píxeles hacia arriba. Asegúrate de que esté en el centro así. Quita la frontera, y para los fracasados, vamos a dar un color de campo azul. Ahora vamos a saludar una copia, pero vamos de primer nombre es o círculos, y puedo moverlo justo encima de retrato hit control D una vez más, y voy a posicionar esto en el centro de Island Escape así y esto va para tener ese color verde. Entonces voy a dar click aquí mismo dedo del pie basado en ese color. Entonces es 55 d 466 y vistas que ya en algunos de nuestros otros videos. Ahora vamos a crear un bonito gráfico de donuts grande. Entonces déjenme crear rápidamente un círculo grande y démosle dimensiones fuera. 90 por 90. Y usemos, por ejemplo, sólo una frontera. Y usemos frontera fuera 20 así y voy a ponerlo del pie en el centro así , asegúrate de que sea la misma distancia o tal vez hasta 20. Veamos cómo se ve eso. Creo que eso se ve bien. Llama a esto un círculo o al círculo principal así y ahora haz dos copias del mismo para que él controlara de Control De esto va a ser azul. Esto va a ser verde así y les dará sus colores. Entonces esto es verde. Esto es azul así Y finalmente, vamos a crear una mezquita. Entonces me voy dedo del pie tal vez elegir mental como este click rápido aquí mismo. Y entonces tal vez aquí mismo, voy a meterme en la mezquita. Llama a esta mezquita y la voy a posicionar justo encima de esta azul. Y voy a golpear control de turno M dedo del pie, hacer una mezquita y esto va a ser azul y ahora hacer lo mismo por los verdes. Así que asegúrate de ir desde el centro como así hasta aquí, asegúrate de cubrir todo así esta va a ser nuestra mezquita y colocarla justo encima del verde. Seleccionar todo. Control de turno M un turno Comandante. Si tu Mac y esto podrían estar verdes así Así que ahora que tenemos que puedo agruparlo todo , solo asegúrate de que todo esté donde debería estar. Es, y puedo seleccionarlos todos y solo tengo que seleccionar tipo PG así Moverlo. Sólo para escuchar tipo debe ir todo el camino en la parte superior Tipo P. G's en la parte inferior y golpear el control G para agruparlos. Y este va a ser nuestro tipo así. Y solo asegúrate de que Type PG esté ahí. Lo es, y estas son nuestras mezquitas que van afuera ahora podemos seguir adelante hacia abajo, y esto va a ser en la parte superior, justo por encima de tipo y vamos a crear likes. Entonces lo que podemos hacer es elegir a estos dos. Por lo que círculo retrato círculo escape golpe control efectivamente. Mueve todo fuera de esta carpeta, vuelve a seleccionarlos todos y asegúrate de que estén en el centro así porque necesitamos esos mismos que mencionan como Así que ahora vamos a crear nuestro rectángulo. Asegúrate de que sea 90 a la altura, y puedes hacer un pequeño truco entrando en tipo, moviendo esto aquí mismo y simplemente asegurándote de que se alinea con nuestro círculo principal. Entonces lo mueve fuera. Y esto Llamémoslo Barbie. Caray, así, Y vamos a darle color a este borde gris quitado. Y tal vez pueda agregar un radio de esquina suave de cinco, por ejemplo, solo para mantener las cosas simples e interesantes. Muévete al centro de aquí. Golpea el control D una vez más, y este es nuestro bar azul. Vamos a darle un color azul apagado, y podemos moverlo hacia abajo así. No. Entonces, como ambos, él es el control D, y puedes moverlos abajo del dedo del pie aquí, por ejemplo. Sostén tu tecla de turno y muévalas hasta aquí, y esta va a ser nuestra barra verde así y puedes extender esto un poco hacia arriba. A lo mejor podemos moverlo un poco hacia abajo, por ejemplo, y en Green Bottle ha cambiado el color a este color. Y ahora agruparemos todo esto. Entonces esto va a ser como todos en la parte superior. Y estos círculos deberían ir por debajo de las barras así, Y agrupemos todo para conseguirla. Entonces justo más como BG justo aquí le gusta todo está seleccionado Hit control G. Y esto va a ser un likes. Muévelo por debajo del tipo. Y ahora centrémonos en el mejor momento para publicar. Entonces serán 20 pixeles abajo así Y ahora vamos a crear un rectángulo. Pero podemos usar este. Por ejemplo. Simplemente golpea el control D con el exterior, Muévelo abajo como así mantenga el turno. Asegúrate de que estén a 20 píxeles de aquí. Entonces 12 y llamemos a esto veces B G. Y para ello. A ver. Podemos darle un poco más grande, mencionaron. O vamos a mantener las cosas simples. Vamos a aumentar aquí su tamaño dos y vamos a mantenerlo en 200 para que tengamos la misma mirada consistente en todos estos. Entonces vamos a incluir ahora algo de texto. What Use sonidos abiertos. 12. Entonces elijamos éste. Control de Calor D para hacer duplicado. Muévete arriba y esto va a ser válvula de sentido abierto. En primer lugar, se va a escribir desde la izquierda, y se le llama a esto una M como así Y vamos a golpear control de mover esto un poco hacia abajo en Let's Call this PM como así y vamos a moverlos a escuchar su turno. A 10 píxeles del borde izquierdo. Y ahora vamos a crear algunas líneas. Entonces voy a crear una línea como esta. Llámenlo línea izquierda, así, y para esta línea de izquierda, voy a elegir en este color de campo. Voy a quitar la frontera para el radio de esquina. Usemos cinco. Y para el tamaño, usemos 1 50 para alturas. Y para los intuidos acostumbraban a gustarles así a los analistas. No posicionarlo. Entonces vamos a moverlo a aquí hasta que se alinea con nuestro texto y con el borde superior fuera de RBG como este turno 12345 Millikan con 15 y luego cambiar y derecha para que podamos moverlo así y luego podamos volver a posicionar esto Así que aquí mover el PM todo el camino hacia abajo a aquí, por ejemplo. Y ahora vamos a crear una línea diferente. Entonces vamos a ser duplicados. Este golpeó el control D y este va a ser nuestra línea de fondo, como así motor. Simplemente sostenga su izquierda La mayoría hace clic en turno entero para rotarlo y asegúrese de alinearlo correctamente de esta manera. Tan solo asegúrate de que no veas nada fuera de los bordes así. Y por el ingenio, podemos usar algo así como el 81 y solo asegurarnos de que los alinearás correctamente. Entonces hasta aquí, por ejemplo, y ahora para no perder más tiempo. Simplemente copiaré el texto de otra son parte que ya creé. Pero básicamente usé este texto conmigo Hit control D y usé la grilla de repetición y luego simplemente creé múltiplos de ella. Por lo que 2467 Por los días. Este fue el lunes. Este fue martes. Esto fue miércoles, y así sucesivamente. Y entonces simplemente pasé por encima de él así y luego aumenté o disminuí el espaciado entre ellos hasta que conseguí algo como esto, como yo borrado. Y ahora qué podemos hacer. Voy a mover esto y justo abajo aquí, voy a crear un bonito gráfico. Entonces usemos un lápiz y simplemente vamos a dibujar algo como esto. Entonces tal vez aquí para escuchar Tal vez yo diría que fue todo el camino hasta aquí. A lo mejor. No, se fue aquí abajo, aquí, aquí. Y finalmente bajó hasta aquí, mantenga presionada la tecla de turno y los conecta. Y ahora lo que podemos hacer es incluir el color de campo. Ya puedo quitar el borde para el color de campo. Voy a incluir azul, pero voy a usar un ingrediente lineal. Entonces voy a elegir el color más oscuro, que es éste, y elegir éste para éste. Voy a elegir blancos y me voy a bajar el dedo del pie básicamente a cero. Entonces lo voy a dar la vuelta. Así que hazlo así y asegúrate de que vaya hasta aquí. Y ahora voy a incluir la frontera de vuelta. Y ahora ves cómo se ve eso. Entonces este es el truco. Siempre te muestro en uno de los videos anteriores cuando animamos son dashboards, pero que básicamente es para que podamos llamar a los tiempos de habla, por ejemplo, así, y lo voy a posicionar en algún lugar por aquí. Digamos que justo debajo de nuestras líneas de fondo y podemos aumentar el grosor fuera de esta frontera. Pero creo que se ve lo suficientemente bien, y lo vamos a animar un poco más tarde. Pero por ahora, eso es todo para los cuadros de mando. Y en el siguiente video, vamos a diseñar un likes, y vamos a pasar más tarde al perfil y finalmente terminar todo con el menú lateral , así que te veré ahí. 84. Crea Wireframes 8: No, terminemos nuestro diseño y voy a dar click aquí mismo. Hit control C para copiar esta pestaña se golpean Controlar el hit Control V aquí mismo también, y vamos a hacer algunos cambios. Entonces voy dedo del pie selecto y el me gusta Ike one. Voy a cambiar su color a azul y voy a hacer lo mismo aquí mismo. Pero voy a seleccionar el icono del perfil y cambiar ese color a azul aquí mismo. A continuación, necesito una barra superior. Entonces voy a elegir este golpe control C y seleccionarlos a ambos como para que controlara V. Y por eso me encanta Adobe X'd, porque viste lo rápido que era eso. Entonces con realmente unas cuantas copias, realmente puedes hacer un bonito diseño. Extremadamente, sencillamente. Entonces ahora centrémonos en los gustos, y voy a elegir este ícono, y voy a arrastrar una guía hasta aquí. Como se puede ver aquí mismo en la parte superior, dice 20. Entonces puedes ver claramente qué tan lejos estás arrastrando y eso, y puedes ver 20 justo aquí también, y puedes hacer lo mismo por aquí, pero realmente no creo que eso sea necesario. Pero vamos a crear un rectángulo como Así que vamos a mover 20 píxeles de aquí. Entonces 12 y llamémoslo imagen. Pero muévelo a aquí y vamos a darle algunas dimensiones. A menudo 99 con 82 como Así que vamos a darle el radio de esquina o cinco. Y mantengamos el campo y la frontera por ahora. A lo mejor podemos incluso añadir una ligera sombra. Entonces esa va a ser nuestra imagen. Y luego podemos quitar la frontera porque ya no la necesitamos. Y ahora vamos a incluir algo de texto. Entonces voy a simplemente Corp esto y tal vez este texto. Entonces golpea el control C. Voy a conseguir el Control V aquí mismo. Entonces nos vamos de pie escribiendo un nombre aquí mismo. Entonces, Jane. Entonces vamos a darle, y podemos posicionar eso en el centro fuera de esta imagen. Voy a sacar esto del camino así así, y voy a posicionar 20 píxeles como este y vamos a ver qué podemos escribir aquí mismo. Entonces esta congee time stamps o hace tres minutos, asegúrate de que sea de la izquierda y démoslo a 12 como Así que los analistas eligen este color gris claro , y lo voy a posicionar justo aquí y tal vez, no lo sé. Veamos 10 pixeles. Sí, eso funciona bien. Él había controlado la unidad, y yo voy a posicionar que compite hacia abajo tan viejo cambio 10 píxeles hacia abajo y esta va a ser nuestra identificación. Entonces, como tu imagen. Y tal vez podamos seleccionar este texto y elegir este color pero seleccionar imagen desde aquí y elegir color azul para ello. Eso es básicamente todo. Podemos seleccionar esto, moverlo en el centro, se ve bien y agrupar todo. Llamemos a esta imagen y moverla por debajo de la barra de tap porque vamos a crear una repetición genial todo el camino hacia abajo. Y se va dedo del pie ir justo por encima de la pestaña son o ni siquiera tenemos que debilitarnos. ¿ Te gustaría este click en repetir Genial. Y quizá podamos detenernos aquí mismo. O quizás incluso podamos crear uno como éste y luego moverlo por debajo de esa barra para que la gente pueda desplazarse hacia arriba y hacia abajo. Y esa es nuestra pantalla como hecha. Podemos hacer cambios adicionales más adelante en la sección de diseño fuera del discurso, pero por ahora, eso es todo. Ahora Centrémonos en la pantalla del perfil y voy a crear círculo. Voy a llamar a este avatar, y voy a quitar la frontera. Incluir una sombra. Asegúrate de que esté en el centro y para las dimensiones. Usemos 80 por 80 así, y lo voy a posicionar 20 píxeles y abajo desde arriba, y puedo saltar aquí mismo, y puedo copiar este texto. Por lo que golpeó el control C golpeó el Control V justo aquí. Asegúrate de que todos estén en el centro, y lo que voy a usar aquí mismo es el nombre. Entonces para el nombre, pongámoslo en el centro y movamos 20 píxeles hacia abajo. Demos a éste una ubicación. Anhela en Inglaterra como, así que asegúrate de que esté en el centro. Colócala aquí mismo, y si mantengo mi tecla de turno, puedes ver el mismo espaciado como para que el futuro sea realmente bonito en Adobe X'd, porque puedes saber que has posicionado algunos elementos usando el mismo espaciado de aquí a aquí hasta aquí, así que todo es igual. Ahora voy a copiar este texto de otra pantalla, así que básicamente estoy usando mucho yeso y tengo dos líneas de texto y esto se supone que representa una descripción fuera de esta persona. Entonces dónde están, qué están haciendo y demás. Entonces básicamente algún tipo de su CV personal para esta app. Ahora, usemos algunos iconos de redes sociales, así que lo seleccionaré de aquí. Golpea el control C y me voy a ir justo aquí. Golpe control V. Asegúrate de que estén en el centro. Pero primero agruparlos. Llama a esto social las redes porque posicionarlo en el centro como este Turno 12 todo es exactamente igual que para los espaciados. Y para el color de su dado este color ahora, sobre lo Lee necesitamos son imágenes. Entonces vamos a utilizar las mismas imágenes de esta pantalla. Por lo que voy a golpear el control C en este. Zoom atrás derecho Control V y no necesito tantos. A lo mejor puedo usar estos muchos así como puedes ver lo sencillo que es, dedo del pie crea estos elementos y puedes moverlos justo debajo de Tab son y me voy dedo del pie Mover todo justo debajo de barra de knave. Así que mantén todo bonito y organizado y puedes ver ayuda. Agradable y sencillo. Esto se ve ahora. Todo esto se verá mucho mejor cuando incluimos imágenes dentro, porque las imágenes van a crear un bonito contraste entre la puñalada una barra y todo lo demás. Pero ahora, finalmente, vamos a crear un menú lateral, y eso va a ser extremadamente sencillo. Pero lo primero es lo primero. Tenemos que hacer algunos cambios de este nuestro tablero. Entonces en lugar de 8 12 por la altura, vamos a elegir por 77 como este porque vamos a usar la característica excesivamente y todo lo que ves en todas partes que veas en estos iconos del menú se iban de punta en realidad posicionar este menú a un lado y se va a vienen de arriba. Pero todo se volverá mucho más claro cuando empecemos con el prototipado. Pero lo primero es lo primero. Vamos a crear algunos textos. Entonces déjenme elegir rápidamente este texto. Por ejemplo, Hit Control C Control V aquí mismo. Voy a escribir en casa, asegurarme de que esté en el centro así, y lo voy a posicionar aquí mismo, golpear control D, y voy a mover esto un poco hacia abajo, y voy a darle un nombre Off likes así que básicamente todo lo que tienen en este tap bar justo aquí. También tendrán aquí mismo, pero tendrán esa opción del dedo del pie. Sólo estar justo aquí. Todo debe ser accesible en un solo lugar. Ese es el punto principal fuera de este menú del sitio, así que démosle un poco de espaciado. Entonces 1234 Asegúrate de que sea a los 40 cuando, así que los compré, muévalos un poco arriba para darme así espacio cuando controlaría la una vez más. Y esto va a ser perfil. Entonces básicamente, estamos listando todo lo que viste en la barra de tap, pero también le estamos dando la opción de menú lateral. Había controlado la una vez más y esto va a ser dashboard. Entonces así es como van de pie acceden a su tablero desde aquí. Asegúrese de que está en el centro había controlado la una vez más. No, esto va a ser ajustes como ese. Y finalmente, vamos a darle el mismo espaciado. Por último, vamos a tener un log out en la parte inferior así y asegurarnos de que esté a los 40 también. Ahora necesitamos ese ícono tan rápido ubicado, voy a usar divulgar no pude golpear el control C y rápido aquí mismo. Golpe control V. Colóquelo en su lugar. Ahora, déjame copiar rápidamente esto. Nunca Bar Control V. Y simplemente voy a usar este ícono y mover su Toby exactamente en la misma ubicación que este icono manual. Entonces, así , así, así Y lo voy a mover al borde derecho aquí mismo. Voy a moverme fuera de esta carpeta hit, delete. Y eso es básicamente todo. Como puedes ver, no tenemos barra de estado porque esta es pantalla adicional. Y al hacer clic en este icono de menú, esta pantalla vendrá de arriba hacia abajo, y vendrá justo debajo de la barra de estado. Por lo que estas barras de estado existentes van a cubrirlo de todas formas. Entonces, solo terminemos esto y lo movamos hasta aquí. Por ejemplo. 1234 Y lo que necesitamos es un fondo. Entonces solo voy a usar una de las imágenes. Por lo que golpea el control C control V pegarlo en su lugar. Y lo que quiero es posicionarlo aquí, asegurarme de que los coronarios estén en cero. Voy con el dedo del pie. Muévelo a los bordes. Posición a aquí 1234 porque yo sólo quiero que esa sombra de fondo fuera de esta imagen, y este va a ser nuestro menú BG. Y puedes incluir imagen aquí mismo si quieres. Pero sólo me interesa esta sombra de fondo por ahora porque se va a quedar bien cuando hagas click aquí mismo va a saltar de arriba hacia abajo y va a tener en esta sombra de fondo. Por lo que va la superposición de dedo en la parte superior de estos elementos existentes. Entonces básicamente hay que pegarle. Controla s porque has terminado de crear tus marcos de alambre. Ahora se va a diseñar la siguiente sección de este curso, y vamos a convertir a estos amigos de alambre en diseños de toda regla. Nos vamos del dedo del pie, agregamos diferentes imágenes. Vamos a jugar con las sombras, tal vez incluso con pocos colores, y después de haber creado están llenos de diseño de carne. Vamos a pasar al prototipado y finalmente sumar algunas animaciones y terminar este proyecto, así que nos vemos en el siguiente video 85. Creación de diseño 1: en este video, vamos a empezar a crear nuestros diseños. Pero antes de que me hagamos dedo del pie, organice algunas cosas. Aquí estamos en nuestro proyecto X defile. Y si me alejo todo el camino, se puede ver que X'd empieza desde el centro. Y luego cuando comienzas a agregar archivos, empieza a moverse hacia la derecha. Entonces vamos a arreglar eso y te darás cuenta de que estos marcos de alambre se van a mantener en posición. Eso se debe a que esta es sólo la imagen que se está arrastrando y cayendo dentro de la obesidad. Y no es un regular. Nuestro puerto se puede arreglar que arrastrando en remolque son pobres. Pero es mucho más fácil para mí de esta manera, así que simplemente lo voy a seleccionar todo. Pronto lo haré todo lo que pueda, y puedo moverlos, por ejemplo, hasta aquí. Y entonces puedo mover este papel a su posición y este texto justo aquí en la parte superior para poder acercarme un poco más, y puedo ver que están todos a 70 esa distancia. Entonces vamos a revisar este también lo es, y voy a mover estos marcos de alambre, texto en algún lugar por aquí. Digamos que tal vez este es el medio, por ejemplo. Y ahora si hago zoom todo el camino hacia fuera, se puede ver cuánto espacio tengo justo aquí para mi diseño para mis prototipos. A lo mejor más adelante, puedo agregar un diseño de sitio web aquí mismo. Diseño de aplicaciones para Android Econet y así uno. Por lo que esta es una característica realmente genial de tener. Incluso puedes ir todo el camino justo aquí hasta la cima. Y cuando obtienes el control o comando cero en tu teclado se va a volver a enganchar de la derecha en una posición donde lo dejaste y puedes diseñar desde ahí. Entonces ahora empecemos a crear nuestros diseños. Y para hacer eso voy a duplicar estos marcos de alambre porque quiero que los clientes puedan revisar estos marcos de alambre como eran como los diseñamos. Y luego cuando pasemos al diseño en esta sección del curso, quiero que pueda ver lo que ha cambiado de marcos de alambre a diseños para que puedas seleccionar todo lo que él controlaría D. Y los voy a mover sólo un poquito para que Puedo tener este espacio extra de aquí a aquí. Y voy a golpear el control D en este texto, y voy a hacer doble clic aquí mismo, teclear diseño, y lo voy a mover justo aquí en el centro. Entonces, por ejemplo, en algún lugar por aquí, digamos Sí, creo que eso funciona bien. Y eso es básicamente todo para la preparación. Y ahora podemos empezar a sumar nuestras imágenes, y voy a empezar con la carga y se puede ver que agregó esta extensión. Puedes cambiar esa extensión haciendo doble clic en el nombre de nuestro puerto, y puedes escribir en diseño, por ejemplo , así, y puedes saltar en remolque. Todo fuera de estos diferentes nuestros tableros y diseño de mecanografía. No voy a hacer eso por el momento. Simplemente lo voy a dejar en la Extensión uno, porque más adelante, cuando empecemos a crear prototipos de esto, lo vamos a duplicar una vez más, y luego se va de pie. Agrega otra extensión off a, y luego sabremos más adelante cuál es cuál. Entonces el alambre de arrendamiento original enmarca este con uno está diseñado y el que a sus prototipos, Así que empecemos con la pantalla de carga, y solo voy a arrastrar y soltar algunas imágenes dentro. Descargué estas imágenes de en splash dot com, así que todas son libres de usar. Y obtendrás estas imágenes una vez que descargues este archivo de proyecto y una vez que lo empieces a usar para que pueda moverlo por aquí. Puedo acceder a mi panel de capas aquí mismo, y moveré esta imagen todo el camino hacia abajo hasta el fondo así. Y cuando estoy contento con la posición, por ejemplo, aquí mismo puedo teclear uno en mi teclado y eso es ir del dedo del pie por encima de Bay City hasta el 10% como se puede ver aquí mismo, porque mi objetivo era tener algún tipo off visual interés justo aquí en segundo plano . Y tal vez podamos agregar algo de animación más adelante cuando podamos, tal vez aumento de disminución esta opacidad fuera de fondo y voy a mostrar llamada. Vamos a cambiar este logotipo y a crear un bonito poco de animación para la pantalla de carga . Ahora vamos a querer pantalla de inicio, y cuando haga clic aquí mismo, accederé a esta tarjeta Repetir grado. Puedes agruparlo, o simplemente puedes editarlo como está aquí mismo. También tengo algunas imágenes que descargué de en splash dot com, y son solo imágenes de algunas personas. Yo sólo voy a arrastrar y soltar sobre este círculo se va a poner azul, como se puede ver aquí mismo y cuando lo suelte, se va a poblar esos círculos y esos círculos sobre Lee porque yo los pasé sobre ellos. Simplemente voy a quitar la frontera porque no la necesitamos, porque si te acuerdas, acabamos de tener esta frontera alrededor de nuestras imágenes. Lo vamos a quitar, y en este punto, con la esta repetición gran seleccionada. Puedes seleccionar esta imagen de avatar, y puedes agregar, por ejemplo, drop shadow, y se va a añadir la sombra de gota en todas tus imágenes, como puedes ver aquí mismo. No voy a hacer eso porque no creo que sea necesario para esta imagen. Pero sigamos adelante y añadamos nuevas imágenes a esta sección de imágenes. Por lo que una vez más, cuando los arrastre y suelte dentro, poblará estas imágenes, y es mejor idea del dedo del pie. Nombra sus imágenes en consecuencia, así que seguí adelante y nombré a esta imagen una. Este fue el número dos. Esto era libre de números. Entonces los va a sumar en ese orden en particular. Yo voy a hacer lo mismo por estas imágenes. Entonces estos son 0102 y 03 Ahora voy a seguir adelante y cambiar algunos de estos nombres para que esta pudiera ser Jane Doe. Todo lo que tienes que hacer es simplemente hacer doble clic en el nombre y va a cambiar ese nombre. Llamemos a esto, por ejemplo. Ya sabes, París, Francia. Vamos a ver y vamos a mover uno hacia abajo. Y esto va a ser hace cuatro minutos porque va pasando de la más reciente hasta las posteriores. Entonces vamos a mover esto a, por ejemplo, hace seis minutos. Sólo eso. Un poco de interés visual. Y llamemos a este tipo. No conozco a James, sin embargo. Digamos así, y lo vamos a dejar en Londres, Inglaterra, por estas llaves. También puedes cambiar cuántos comentarios tiene cada imagen, pero no voy a ir de pie a hacer eso. A lo mejor puedo hacerlo por este. Tan real. 18 comentarios y el 3er 1 va a ser 24. Entonces eso es básicamente todo para este. Y vamos a pasar a la siguiente pantalla en el siguiente video, así que te veré ahí. 86. Crea el diseño 2: ahora diseñemos esta imagen pantalla abierta y porque ya conocemos el nombre de esta persona. Vamos a abrir ese avatar de tarjeta localizado, y voy a arrastrar y soltar esa imagen dentro. Pero hay que tener cuidado de no caer. Déjalo caer sobre esta imagen, pero sobre esta imagen, y verás estos resaltados azules cuando dulces entre ellos al instante letra ir. Vamos a quitar la frontera porque queremos mantener consistente con ésta, y voy a cambiar de dedo el color del texto dedo del pie blanco. Ya verás por qué en un segundo. También quiero cambiar el color de estos iconos en la canción superior Inside Back Arrow, Homer Control Select menu, y voy a cambiar el color dedo del pie blanco también. Además, lo que quiero hacer aquí mismo es ir adelante y reducir tu pasty a cero como está aquí mismo , porque vamos a colocar un bonito poco de radiante aquí mismo. A continuación, déjame arrastrar y soltar mi imagen dentro, así que simplemente voy a seleccionar la imagen aquí y arrastrarla y soltarla desde mi escritorio. Entonces es esta imagen aquí mismo, y puedes mantenerla una disposición. Se va a hacer zoom en el centro. Si hago doble clic, puedes ver lo que hace o puedes duplicar, clic y luego mantener presionada la tecla Mayús y luego moverla a la izquierda o a la derecha si eso es algo que quieres . Pero creo que eso funciona lo suficientemente bien, puedes tenerlo como si estuviera aquí mismo. O puedes agregar un ligero radiante y eso es lo que voy a hacer y fui dedo del pie añadir un poco de dedo radiante, tal vez por aquí. Y si nuestro Señor te basas es sólo un poquito para que podamos verlo. A lo mejor el Grady en puede terminar aquí, por ejemplo, algo así a las 1 60 y lo que quiero hacer es quitar el borde, clic en el color del campo en lugar de color sólido, elegir ingrediente lineal, y lo que quiero hacer es en realidad dedo del pie pegarlas para que el color más oscuro vaya en la parte superior. Color más claro irá por la parte inferior así, y voy a elegir un negro oscuro aquí mismo y para el blanco. Voy a bajar la ciudad pagada aquí mismo 20 y luego me fui de pie. A lo mejor hasta mover esto un toque, también aquí y haga clic en el color negro y luego en todo. Entonces básicamente abajo solo un poquito. Entonces tienes este ligero radiante aquí mismo en la parte superior y todo fuera los otros iconos se quedan como estaban, así que incluso puedes moverlo hasta aquí. Tan solo ligero, radiante. No necesitamos nada especial, y puedes mover este color blanco tanto como quieras a la parte superior si eso es algo que quieras y te pareció necesario. Pero vamos a mantenerlo así. Por ejemplo. Llamemos a esto radiante, y lo vamos a colocar justo encima de nuestra imagen y justo debajo del texto y todos estos iconos y barra de estado para que no se corrompa con nuestro diseño. Entonces básicamente lo hay para esta pantalla. Incluso puedes cambiar el color de este logotipo, pero creo que funcionará bastante bien, dependiendo de tus imágenes que incluyas insight, y te animo a experimentar con diferentes imágenes para este proyecto. Por lo que conseguirás este archivo de proyecto y podrás saltar dentro de una noticia exactamente las mismas imágenes ves desde aquí para que puedas hacer doble click dentro, localizar la imagen hit control C. Y en algunas de estas siguiente pantalla, puedes escuchar patrulla ser noticia exactamente la misma imagen que usé. Pero realmente te animo a practicar con tus propias imágenes para que puedas obtener resultados diferentes . Y luego puedes publicar esto en tu portafolio. Ahora por esta pantalla y nueva imagen. No vamos a cambiar nada porque dentro de la sección de prototipos de este curso , vamos a jugar con este trasfondo y vamos de pie. Agrega una ligera animación aquí antes de que los usuarios hagan clic en agregar desde galería. Pero desde la propia galería, necesitamos dedo en grupo la cuadrícula y ubicar la imagen número uno, que es ésta. Yo sólo voy con el dedo del pie. Quitarlo todo el camino hasta aquí, justo debajo ahora Barra y voy a borrar todo porque en orden para incluir imágenes usando repetición de grado, hay que empezar con uno, no con tres, como te mostré en la sección de diseño fuera de este curso, pero es realmente sencillo crear así. Por lo que solo tienes una imagen en lugar de tres seguidas. Después golpeaste la grilla de repetición y revisé Fueron 19 píxeles entre ellos. Por lo que estaba acercando un poco más, más cercano pit genial aquí mismo y tener una inferior derecha aquí y elegir 19. Y como puedes verlo los toques son un gran en este caso. Entonces todo lo que tengo que hacer ahora es simplemente arrastrar este mango verde hasta el fondo así. Y ahora puedo agregar mis imágenes así que definitivamente voy bastante aquí imágenes, y puedo quitar la frontera de ella porque ya no la necesito. Y tengo algunas imágenes ya descargadas de un splash dot com. Los agarraré a todos, los arrastraré y los soltaré dentro de nuestra cuadrícula de repetición. Y como puedes ver, va a poblar nuestra repetición Genial con esas imágenes para que puedas comprobar dos veces si tienes todo correctamente. Entonces, por ejemplo, puedo hacer doble clic aquí mismo, y tal vez pueda reposicionar esta imagen. A lo mejor este se ve toque Blanco o no, puedes hacer doble clic en cualquiera de ellas, y puedes reposicionarlas si es necesario. Entonces, por ejemplo, podemos mover esto hasta aquí tal vez, y esto está fuera de lugar en. A lo mejor podemos posicionarnos para escuchar este también. Para escuchar me conduzco como aquí mismo en posición. Este Ah, poco diverso. Puede sostener tu turno y tus flechas teclas de flecha. Y puedes reposicionar en estas imágenes como quieras. mejor puedo mover su toque arriba y tal vez posicionar el 1er 1 justo hasta aquí y veamos este. Sí, está bien. Entonces vamos a llamar a esto y hecho Y digamos que poblamos todas nuestras imágenes. Y en el siguiente video, vamos a empezar con Adit Image, y quiero mostrarte cómo puedes seleccionar estas imágenes y para los propósitos de simplicidad. Simplemente vamos a usar la primera imagen de nuestra cuadrícula. Y para que nuestra protección Stover correctamente, necesitamos en grupo discreto porque necesitamos usuarios toe poder dar click en esta primera imagen y no en toda la cuadrícula. Entonces me voy a ungh dedo del pie, cuerda el gran hit Control G una vez más y llamó a estas imágenes porque ahora tenemos imágenes separadas aquí mismo. Entonces nos vemos en el siguiente video cuando vamos a empezar a diseñar en el resto de estas pantallas. 87. Crea el diseño 3: Entonces aquí estamos con la pantalla de edición de imagen y lo que tenemos que hacer como explicando en video anterior . Solo voy a usar esta primera imagen para que puedas localizar la imagen aquí mismo y la puedas arrastrar y soltar desde tu carpeta. Y ahora puedes reposicionarlo como quieras. Voy a hacer doble clic aquí porque se puede ver que es una imagen de paisaje y la oposición justo hasta aquí así, estos cree, son un poco de esta pulgada. Como pueden ver, esta a está enfocada, y tal vez pueda moverlo así. Pero es más fácil para en las próximas pantallas dedo del pie. Hazlo así, y voy a dejarlo así. Todas estas imágenes pueden afirmar como seriales estos iconos pueden afirmar como eran, y ahora vamos a pasar a esto para que localice imagen, oculte mi color. Demasiado. Arrastraré y soltaré la misma imagen dentro, aunque haga clic una vez más reposicionarla a la misma posición. Entonces por eso estoy usando estas hojas porque hay gran punto de referencia para que pueda moverlas , por ejemplo como así y ahora puedo dar click en la superposición de color trayendo de vuelta y tal vez puedas reducir el tamaño de Lo sentimos, ¿Pagas ciudad de ella dedo del pie tal vez el 60% de la noche del domingo que para que los usuarios puedan ver lo que están recortando o tal vez hasta el 50%. Por lo que puedes hacer clic aquí, golpear cinco en tu teclado, y va a bajar. ¿ Base ciudad fuera al 50%. También puedes jugar con este modo de mezcla para que puedas usar oscuro y puedes usar el llamado burn, por ejemplo. Pero no voy a hacer eso por el momento. Yo sólo voy a usar un pastoso al 50% porque tenemos esta área de cultivo de imagen y luego una vez que estés listo para publicar, Así que si eliges recortar esta imagen, puedes recortarla así. Pero si eliges no hacerlo, condensas simplemente tenerlo como está aquí mismo. Y eso es lo que voy a hacer. Solo voy a hacer doble clic aquí y ahora puedo agrandar mucho esta imagen. Bueno, por ejemplo, aquí y aquí está. Así es básicamente como va a quedar de pie y más adelante vamos a copiar esta imagen en el modo prototipado. Vamos a agregarlo ahí para que puedas agregar algunos iconos aquí mismo. Y eso es lo que vamos a dar el dedo del pie a continuación. Entonces tengo esta imagen. Perdón, tengo seleccionado este ícono. Voy a saltar del dedo del pie aquí mismo. Acercar donde esto podría es Voy a golpear Control V y sólo voy a reposicionarlo un poco mejor. Pero apaga el redimensionamiento responsive porque no quiero que puntee responsivamente redimensionar todo el ícono, simplemente yendo a casa una tecla de turno hasta aquí. Y tal vez pueda posicionarlo 20 píxeles a la izquierda y moverlo donde debería estar. Entonces aquí está, y sólo voy a usar el mismo color. A lo mejor hasta puedo moverlo 40 píxeles, pero creo que 20 píxeles funcionan bien, pero vamos a comprobarlo a los 40. En realidad, 40 es aún mejor porque te puedes imaginar que este es un espacio realmente pequeño en tu teléfono, y el usuario tiene que tocar eso con los dedos. Entonces, usémoslo a 40 píxeles. Entonces sólo voy a golpear el control. C saltando justo aquí, golpea Control V. Lo va a pegar en la misma ubicación, y solo voy a usar este color blanco para ello aquí. También puedes jugar con más detalles aquí mismo y agregar, ejemplo, si quieres recortar esta imagen a los 16 por nueve o uno por uno, o para instagram y así sucesivamente, y puedes agregar eso para ser barra de desplazamiento aquí mismo en el fondo. Pero no voy a hacer eso en este caso porque hablé con el cliente. Ellos sólo quieren mantener las cosas simples tanto como sea posible para esta primera ronda y luego en la siguiente ronda, solo vamos a jugar con más detalles porque no tienen las imágenes encerradas, um, um, formato off que la insulina tiene, por ejemplo, porque a Instagram le gusta mucho este tipo de imágenes cuadradas fuera, mientras que a Facebook le gusta mucho este tipo de paisaje tipo de imágenes fuera. Entonces por eso optaron por no ir con cada uno y luego solo dejar que los usuarios suban lo que quieran y luego ver cómo funciona todo. Y si es etapa posterior, quieren hacer algunos cambios respecto a que lo harán. Pero ahora en las etapas iniciales. Simplemente no quieren que los dedos sobrecarguen a sus usuarios con este tipo de información. Simplemente quieren tantos usuarios como sea posible desde el principio. Entonces ahora acabemos rápidamente este. Y solo voy a agregar imagen de nuestro avatar aquí mismo, va a quitar la frontera para mantenerla consistente. Y luego puedes atajar a la gente aquí mismo. Pero no vamos a hacer eso por el momento. Y solo tecleemos So hashtags aquí mismo. Entonces lo que voy a hacer es extender este texto del dedo del pie aquí, y voy a hacer doble clic dentro y simplemente ocultar todo desde aquí. Mento terminó con los puntos, y voy a teclear en algunos aspectos. Entonces veamos qué tenemos a nuestra imagen. Entonces tal vez podamos teclear, por ejemplo, interiores mínimos una por ejemplo, decoración y , por ejemplo, minimalista así, y podemos seleccionar este texto, nosotros puede hacer click en el color. Podemos cambiarlo a azul solo para agregar un poco más de interés visual para estas etiquetas, y también puedes jugar con esto y explorar un poco más. Pero solo asegúrate de actualizar esto una vez. Tú lo basaste aquí mismo. Entonces vamos a hacer eso en la sección de prototipos fuera del discurso. Vamos a usar exactamente la misma configuración que un te mostró, y nos vamos a dar el dedo del lugar de pago. Esta imagen que acabamos de crear por encima de ésta y luego vamos a hacer prototipos. Entonces nos vemos en el siguiente video cuando vamos a terminar nuestros diseños. 88. Crea el diseño 4: ahora terminemos nuestros diseños y no vamos a tocar el tablero en absoluto porque creo que eso funciona bastante bien para este proyecto. Pero vamos a pasar a “me gusta”, y vamos a hacer algunos cambios aquí mismo. Entonces primero lo primero, mirando bastante aquí. Abriré la imagen y seleccionaré algunas imágenes de aquí, y simplemente las arrastraré y las soltaré a la vista aquí. Y como puedes ver, poblaron esta repetición muy bien. Sólo déjame revisar. Si se repiten, no lo hacen. Y ahora mismo voy a saltar dentro y cambiarme. Algunos de estos estados arranca. Entonces esto fue hace tres minutos. Esto fue quizá también hace tres minutos. Esto fue, digamos, hace cinco minutos. Esto fue, digamos, 15 solo para hacer las cosas un poco más interesantes. Por lo que se llama a este 20 y para cambiar este último. Ocultemos la barra de pestañas y este será un 25. Digamos que esta es Jane. Esto es no lo sé, Frank, Esta es María. Sí, digamos que esto también fue franco, y obviamente puedes incluir diferentes nombres usando esta repetición gran función. Entonces déjame llamar. Sí, deja que estos Toby Jane puedes agregar crear solo una capa de texto regular y un archivo de texto y simplemente introduce algunos de los nombres predeterminados que encuentres en línea, y luego puedes arrastrar y soltar la capa de texto aquí mismo en tu texto, y los actualizará en tiempo real para que puedan crear rápidamente sólo unos documentos de texto básicos . Entonces si lo abro, puedes ver cómo se ve eso. Por lo que se llama a esta masa franca. Se basa en unas pocas veces, así, y se puede llamar a esta marca. Puedes llamar a este siguiente. Jane. éste se le puede llamar, a ver. Y Mark, seamos esto. No lo sé, Jenny, y seamos francos también, y puedes salir. Esto se puede hacer, obviamente, en Windows y Mac también. Y luego puedes tomar su documento fiscal arrastrándolo y soltarlo sobre estos nombres, y se poblará en tiempo real para que puedas hacerlo así, o puedes hacerlo como ya te mostré. Pero va a cambiar el nombre a nuevo documento de texto porque no cambié el nombre esto para que puedas cambiarlo, por ejemplo, nombres de usuario o algo así, y se va a actualizar en tiempo real. Puedes hacer esto para cualquier capa de texto que encuentres aquí mismo, sobre todo si se están repitiendo. Entonces, por ejemplo, si tienes algo como localizaciones o tienes no sé estos tres minutos, cuatro minutos, cinco minutos y así sucesivamente. Puedes hacer esto para todas estas capas de texto, pero solo asegúrate de nombrar ese archivo porque va a actualizar el nombre del archivo y el nombre de la capa aquí mismo. Entonces vamos a traer el tabulador. Están de vuelta. Pasemos a esta pantalla. Y éste debería ser John sólo para mantener las cosas consistentes. Y si comprobamos aquí mismo es John, y vamos a arrastrar y soltar esa misma imagen del usuario justo aquí y lo de Onley. Vamos a cambiar ¿verdad? Aquí están estas imágenes, pero vamos a hacer lo mismo. En cuanto al anuncio de Gallery iban dedo en grupo a grande. Vamos a localizar la primera imagen, que es ésta. Voy con el dedo del pie. Muévete aquí mismo. Voy a seleccionar. Todo debería eliminar bastante a Klay aquí. Hit. Repetir. Genial. Y voy a hacer tres instancias acercando mucho más. Ciérrelo de aquí y sólo voy a hacer 19 como está aquí mismo. Y puedes posicionarte para estar en el centro y todo lo que quiero hacer ahora es alto. El tabulador está ahí, y voy a extenderme todo el camino hacia abajo hasta quizá aquí. Sí, eso funciona bien. Y contra quién? En un poco más cerca, Para cerrarlo aquí mismo y ser preciso. Y lo que puedo hacer es luego seleccionar todas mis imágenes y luego arrastrarlas y soltarlas dentro de sus van a poblar. Y es importante que esta sea la primera imagen que estamos usando porque esa imagen se va a poblar aquí mismo. Lo que también puedes hacer es duplicar este genial porque es exactamente lo mismo. Y luego simplemente arrástrelo y soltarlo en su posición. Y tal vez podamos hacer eso. Concebiblemente golpeas el control C y luego saltas aquí mismo. Pero yo quería mostrarte esta opción también, y voy a golpear Control V y voy a simplemente mover estas imágenes aquí mismo porque si recuerdas, cambiamos parte de la posición fuera de estas imágenes y para que todo se vea consistente, sólo vamos a mantenerlo de esa manera. Ahora lo vamos a mover aquí mismo. Eliminar son un bit grid, y todo lo que quiero hacer desde estas imágenes es simplemente saltar adelante y eliminar algunas de ellas. Entonces voy a empezar desde abajo y eliminar estos y eliminar este último también . Y nadie incluye ese bar atrás. Se puede ver que se ve muy bien. También puedes pedir estas imágenes si quieres, y ésta debe ser la imagen uno a calle par y así sucesivamente. O simplemente puedes exportarlos así. Pero eso va a ser otro asunto. Puede convertirse en prototipos de dedo, y voy a mostrar cómo se pueden cambiar en sus prototipos más adelante y cómo se pueden exportar para un acceso más fácil. Pero ahora por fin tratemos con la pantalla del menú del sitio. Todo lo que quiero hacer aquí es incluir una imagen más en fue a usar esa misma imagen splash, así que solo voy a arrastrarla y soltarla dentro, y voy a incluir un desenfoque de fondo cuando todo lo que quiero hacer aquí se incrementa el apace iti apenas ligeramente. Entonces, por ejemplo, tal vez 5%. O vamos a mantenerlo en 6%. Por lo que todo sigue siendo visible. Y eso va a sumar sólo un poco más de interés visual ya que baja de los bordes superiores nuestra pantalla. Y eso es básicamente todo para el diseño. Te voy a ver en la sección de prototipos, que viene a continuación en discurso, y vamos de pie. Agrega algunos cambios en algunos retoques aquí y allá. Vamos a incluir varias otras pantallas. Te voy a mostrar cómo puedes cambiar algunas de estas imágenes porque tenemos estos deslizadores aquí mismo. Vamos a cambiarlos y hacer que hagan algunos cambios a esta imagen. Y luego vamos a actualizar esos cambios sobre esto y sobre esta imagen. Y por último, voy a mostrar cómo puedes previsualizar esta imagen en tu pantalla de inicio aquí mismo, cómo va a entrar y mover todas estas imágenes hacia abajo y así sucesivamente. Entonces vamos a jugar con eso, y vamos a jugar con algunos de estos nombres de imágenes porque luego vamos a exportar todo esto para desarrolladores y para nuestros clientes. Entonces tendremos que hacer eso en una parte posterior fuera del curso. Pero no voy a hacer eso ahora mismo porque sólo va a llevarmucho tiempo. Y vamos a hacer duplicados de estas capas de todos modos. Y vamos a mostrar que dedo del pie nuestros clientes más tarde cuando lleguemos a prototipar etapa fuera del discurso, así que los veré en el siguiente video. 89. Prototyping 1: en este video, vamos a empezar a crear nuestros prototipos. Y para hacer eso, voy a hacer un duplicado de todos estos diseños porque si no puedo acercar todo el camino , se puede ver que a propósito colocamos todo lo que creamos hasta ahora justo aquí en esta esquina izquierda fuera de nuestro ritmo tablero. Y ahora los duplicaremos y luego simplemente los colocamos aquí a la derecha. Y ahora déjame acercarme un poco más. Seleccionaré todas estas pantallas. Había controlado el dedo del pie, hacer un duplicado y luego simplemente moverlos dedo del pie en algún lugar por aquí, por ejemplo, a 200 para que tengamos el mismo espaciado entre marcos de alambre de puerta estilo tesis, diseño y finalmente prototipos. A continuación, simplemente duplicaré este texto de diseño y doble clic aquí y escribiendo prototipos o simplemente protegiendo y moviendo el texto aquí porque tendremos muchas más pantallas en un momento . Pero por ahora, sólo lo vamos a dejar. Un zit es primero lo primero. Déjame seleccionar todas estas pantallas porque voy a trabajar de pie en las pantallas de carga primero , y lo que voy a hacer es hacer click en ella y luego hacer dos copias. Y para este primer ejemplar, lo que voy a hacer es rotar este 360 grados. Al igual que así. Y para éste, lo eliminaré y luego duplicaré éste porque es más fácil porque rotamos 360 grados, luego simplemente copiar éste en su lugar. Y entonces lo que quiero hacer es simplemente agrandarlo a casa. Un turno viejo y clic izquierdo. Antiguo camino a aquí, por ejemplo, algo así. Entonces solo tienes un poquito de ella a la izquierda aquí mismo, dentro fuera de tu pantalla. Y me voy de pie también, baja tu pastosa a cero. A continuación, vamos a hacer lo mismo por nuestra imagen. Entonces, ¿acercando todo el camino hasta aquí, por ejemplo? Porque quiero tener este bit negro cubriendo este bit blanco. Así que ir con los pies, zoom mucho y hacer algo como esto. Entonces hasta conseguir básicamente algo como esto. Por lo que está cubriendo toda tu pantalla. Sí, algo así. Y ahora llega el momento de que lo prototifiemos. Entonces lo que voy a hacer no va a dar click en este. Quicken prototipo. Fui a arrastrar mi azul, manejado hasta aquí. Vamos a usar retardo de tiempo apagado 0.6 segundos. Vamos a usar auto y carne. Vamos a usar nota fácil y por último, durante el tiempo vamos a usar dos segundos. Y ahora, después de eso, necesitamos conectar esta y esta pantalla. Entonces lo que voy a hacer, y lo voy a hacer mucho en esta sección del curso, voy a mover estas pantallas hacia atrás y adelante, porque ahora tenemos estas tres pantallas. Y para mantener la consistencia, sólo los moveré aquí mismo. Entonces lo que tenemos para la primera pantalla no vamos a hacer para la segunda pantalla. Entonces voy a dar clic y arrastrar la vela azul justo aquí. Vamos a usar el tiempo 0.6. También animar, relajar. Pero para la duración, queremos usar 0.6 segundos. Y por último, para los agitado son pobres. De lo que vamos a hacer vela azul arrastrada para escuchar el tiempo de uso y por el retraso, vamos a doble toque son cero. Mantenga el dedo del pie presentador, tenga un retraso de cero segundos. Animadores de automóviles. Bueno, nota fácil y 0.6. Y vamos a saber, previsualizarlo. Voy a dar click aquí mismo. Se puede ver a través de giros en más grande y se desvanece y nos presenta esta pantalla. Entonces si lo revisamos una vez más puedes ver los rotos y rota Una vez más se desvanece y nos presenta hoy Scream en el siguiente video. Vamos a empezar a trabajar en la pantalla de inicio, así que te veré ahí. 90. Prototyping 2: No trabajemos en nuestra pantalla de inicio, y voy a cambiar al grifo de diseño aquí mismo, y voy a hacer esa cosa una vez más. Entonces voy a seleccionar todas nuestras otras pantallas, moverlas, y simplemente voy a hacer un duplicado con aquí, y luego voy a traerlas todas de vuelta a aquí. En realidad vamos a tener más fuera de estas pantallas de inicio en los próximos videos. Pero por ahora, dejémoslo así. Entonces para éste, empecemos primero con esto. Entonces si salto dentro del panel de capas, se puede ver que tenemos esta tarjeta. Y lo que quiero hacer en este es que simplemente quiero mantener rápido mi tecla de turno y luego moverlas hasta arriba. Entonces una vez que estén alineados con nuestra pestaña, se puede golpear turno en nuestro riesgo dos veces para mover 20 píxeles a la parte superior. Entonces ahora cuando volvamos al foso de prototipaje, simplemente puedo hacer clic en él y arrastrar este mango azul hasta aquí. Y en lugar de tap, voy a usar drag. Y para la flexibilización, puedes usar fácil y fuera solo para mantener todo consistente y luego simplemente traer de vuelta a aquí. Por lo que una vez que lo previsualizamos, puede ver cómo se ve eso. Por lo que todo podría ser arrastrado hacia arriba y hacia abajo así, y funciona a la perfección. Ahora el pensar con esto es que vamos a subir la nueva imagen en algunas de estas otras pantallas, y luego vamos a hacer esos cambios un poco más tarde. Pero por ahora, dejémoslo así. Ahora vamos a hacer doble clic aquí dentro de esta imagen, y lo que queremos hacer es arrastrar esto hasta aquí. Te vamos a dar un paso o un dedo del pie animado, fácil y fuera. A ver, Tal vez podamos usar, por ejemplo, 0.4 segundos aquí, y lo que queremos hacer aquí mismo es hacer doble clic en uno, éste, éste, arrástrelo aquí y usar la misma configuración porque nosotros quieren que la gente pueda arrastrar esto arriba en ciudad para desplazarse hacia arriba y hacia abajo. Y luego cuando hagan clic aquí , también animará a éste. Y cuando quieras volver, puedes hacer click aquí mismo, y te llevará de vuelta. Y lo que también quiero es. Quiero dar click en esta imagen que quiero ir todo el camino a la pantalla de perfil para que puedas localizar la pantalla de perfil aquí mismo. Simplemente puedes arrastrar este mango de soplado y usar los mismos ajustes. Y lo que tanto quiero es de aquí. Quiero que la gente pueda dar click en esta imagen y luego tener la misma experiencia aquí. Lo que también tenemos que hacer es conectar algunos de estos. Por lo que voy a llamar a mi control, mantener y hacer clic dentro a este icono me gusta. Puedo cerrar el auto porque ya no lo necesito. Y cuando hago clic en los me gusta, quiero poder ir en la pantalla de likes aquí mismo. Por lo que simplemente arrastraré este mango azul hasta aquí. Y luego quiero dar clic aquí y luego arrastró Toe añadió Esta nueva imagen. Tendremos los mismos, uh, mismos efectos para todos ellos y finalmente dar click en el perfil, y quiero poder ir a la pantalla de perfil aquí mismo. Y esta es la parte más aburrida porque es tan tedioso hacerlo. Pero realmente tienes que hacerlo, porque de lo contrario esto simplemente no funcionará correctamente. Entonces esto es para los gustos. Se puede mantener el control y hacer clic en el interior, pero hay que acercar un poco más porque éste lo está cubriendo. Puedes hacer click en el add, y te llevará a esta pantalla. Y por último, al hacer click en el perfil , te llevará a la pantalla del perfil. Y hagámoslo una vez más por esta. Tan viejo doble click justo aquí. Mantenga el control y haga clic en el interior para seleccionar el ciclo y otros gustos localizados. Simplemente arrastre un pequeño mango y hará clic aquí a la hormiga, y lo arrastraré hasta aquí y finalmente mantenga presionado el clic de control y luego simplemente lo arrastre al perfil. Por lo que una vez que guapa con una vez más para que jugara con este año, puedes arrastrar para desplazarse hacia arriba y hacia abajo. Puedes hacer click en este, y cuando hagas click justo aquí, te llevará a la pantalla de perfil para que básicamente lo para este video en el siguiente video, vamos a empezar con imagen abierta y vamos a añadir algunos efectos. Entonces cuando la gente haga clic aquí para que le guste esta imagen, cambiará y agregará una transición agradable, sutil y cambiará de este dedo vacío un corazón rojo, así que te veré ahí. 91. Prototyping 3: No juguemos con esta imagen de pantalla abierta. Volveré a saltar a mi pestaña de diseño y a Samos antes de seleccionar todos los de nuestros puertos y simplemente sacarlos del camino por ahora. Y en este 1er 1 lo que voy a hacer es saltar dentro y localizar el icono de me gusta. Aquí está, y voy a golpear el control D para hacer remolque bíblico. Lo llamaré Campo Me gusta, por ejemplo, y ocultaré esto por ahora. Voy a hacer doble clic aquí mismo, y ustedes tienen todos estos puntos y todas estas notas están formando este spot. Entonces cuando los borres, cubrirá todo, y solo te quedarás con la forma plana y la forma rellena. En realidad, si no tienes Aiken que tiene este campo así como, ah, ah, forma de trazo, entonces los usas. Pero si no lo haces, este es el método que puedes usar. Y por último, para el color de relleno de simple pegado, el color ya escogido, y es este color rojo y déjame agregarlo rápidamente aquí a la muestra de color y también saltar justo aquí y añadido a aquí también. Voy a saltar atrás y sobre disgustos llenados en esta primera pantalla la mantendrá en cero o pague ciudad . Voy a traer esto de vuelta y lo que voy a hacer es duplicar esto. Y en este segundo estado, lo que quiero es traer de vuelta el corazón. Entonces lo traeré de vuelta así. Bajaré esto a cero y mucha sequedad en solo un poquito. Entonces puedes sostener, desplazar viejo y hacer click izquierdo para que pueda ampliarlo hasta aquí, por ejemplo y lo que queremos hacer ahora, en lugar de copiar éste, simplemente copiaré este 1er 1 porque tiene todo corazón original por dentro y yo saltará dentro, chico Mis gustos, me gusta así y baja Dupay ciudad de este 20 Así se transitará de ser invisible aquí , dedo del pie siendo visible y grande y luego volver a su posición y tamaño originales Así puedo cerrar esto. También los cerraré todos si están abiertos. Están justo aquí. Entonces lo que tenemos que hacer ahora es saltar dentro y prototiparlo todo. Entonces lo que quiero aquí es Ochlik justo aquí. Después haga clic en el icono del corazón y arrastró el dedo del mango azul aquí y lo que quiero un paso o dedo del pie animar, relajando y 0.6 segundos. No, simplemente voy a dar clic en este entero nuestro puerto un drag, mi dedo del mango azul aquí y lo que quieras usar este retardo de tiempo apagado cero segundos. Auto enemigos está en fuera y 0.4 segundos porque queremos tener este ligero retraso cuando gente haga clic aquí. Queremos que esta acción suceda usando el gatillo de tiempo del tronco y va a cambiar, luego remolcar este tamaño original y esta forma original. Entonces vamos a previsualizarlo rápidamente para que la gente pueda saltar aquí mismo. Abre esta imagen, y si quieren gustarles como puedes ver, se ve realmente bonita. Es una especie de saltos de este lugar y usando gatillo de tiempo, luego volverá a este. Entonces si lo cambio una vez más al hacer clic en él, se especie de saltar y luego ir a su posición original. Entonces ahora lo que podemos hacer es simplemente saltar adelante. Y debido a que este fue un disparador de tiempo, no lo usaré. Pero puedes hacer click aquí y todo el toque en uno de estos y puedes ver que es fácil entrar y 0,4 segundos y lo podemos hacer por todos ellos aquí mismo. Por lo que realizo click justo aquí, localizo mis gustos. Es en este y 0.4 segundos, y puedo dar click aquí mismo dedo del pie anuncio. Y finalmente puedo dar click aquí para perfil saltó un perfil porque una vez más, este es un gatillo de tiempo y pasará volando en tan solo 0.6 segundos, y aterrizará sobre éste para que no tengas que crear las áreas de estepa en éste. Entonces eso es todo para este video. Y en el siguiente video, vamos a saltar por dentro y empezar a trabajar en agregar nueva imagen, galería de imágenes y finalmente agregar imagen. Vamos a iniciar esta pantalla porque contendrá muchas pantallas diferentes una vez que lleguemos a ella. Entonces te veré en el próximo video 92. Prototyping 4: en esto realmente todo. Vamos a continuar donde lo dejamos y empezar a trabajar en New Image porque voy a tener una pantalla más. Déjame mover rápidamente estas pantallas a la derecha, así, así, y saltaré dentro de mi modo de diseño, Hit control V toe, hacer un duplicado de ella y lo que quiero hacer aquí mismo. Yo quiero que este sea mi estado final, por lo que será como ocho peores originalmente. Pero para este, simplemente saltaré por dentro y moveré algunas de estas partes para poder mover esto un poco a la derecha y poder mover esto un poco a la izquierda. Esto va a la derecha. Esto va a la izquierda, y lo que también puedo hacer es simplemente una rotación. Estas deja un poco así porque quiero hacer solo un poco de interés visual . Entonces cuando la gente aterriza en esta pantalla, que es la pantalla cuando muy ceñida, de lo que sea que haga clic en esto, agregue nuevo botón de imagen, luego desarrolle esta pantalla. Pasará una ligera animación en transición a esta pantalla, y ahora pueden hacer clic desde la galería y luego los llevará a la caloría o desde cámara, para el caso, y los llevará a la cámara. Entonces ahora vamos a saltar de nuevo dedo del pie prototipando foso. Simplemente arrastraré mi vela azul de todo nuestro puerto, y usaré el tiempo. Cero segundos para el retraso. También animar la flexibilización y la duración es de dos segundos porque quiero que esto sea capaz de transitar muy bien. Por lo que cuando hago clic en vista previa, se puede ver lo que hace. Simplemente básicamente gira estas hojas y vuelve a su posición original. Entonces si lo previsualizo una vez más, se puede ver cómo se ve eso. Entonces sólo una pequeña animación ligera y pequeña que vamos a jugar cuando la gente aterrice ahí ahora, porque no tenemos que añadir más pantallas se debilitan, saltar atrás y hacer de este dedo del pie su posición original. Y lo que queremos de este es que queremos que la gente haga click en la galería. Entonces cuando haga clic aquí, arrastraremos este mango azul. ¿ Vas a pisar en lugar de foto enemigo? Vamos a usar la transición y para la animación vamos a usar levemente arriba. Entonces así y la duración va a ser de 0.6 segundos, como tan fácil un out Porque queremos que la gente pueda hacer clic aquí, y entonces toda esta pantalla se va a deslizar hacia arriba desde abajo. Por lo que cuando haga clic aquí, presione vista previa, haga clic en agregar desde galería, puede ver cómo se ve eso y ahora la gente va a poder hacer clic justo aquí, y se los llevará a esta pantalla. Entonces ahora vamos a trabajar en esto rápidamente, y voy a hacer una copia más de la imagen de Adit. Entonces lo que en realidad voy a hacer es simplemente mover en estos rojos el resto de estas pantallas fuera del lugar, como Así voy a dar clic en este y hacer un duplicado así. Y lo que quiero hacer aquí mismo es cuando la gente pase de esta a esta pantalla, quiero que esto levante de abajo, por ejemplo. Entonces lo que voy a hacer es incluso puedo saltar de nuevo en duplicado Lo sentimos, eliminé este, y puedo seleccionar todos estos y golpear el control G y llamarlo deslizadores así porque va a ser fácil para mí dedo del pie. Muévelos como grupo. Ahora voy a golpear el control D y en esta primera pantalla simplemente moverá esto fuera del camino hasta aquí, por ejemplo. Pero sólo asegurarme de que parte de ella se quede dentro de nuestro puerto, y simplemente voy a ir de pie por toda su base. Se lo abajo. Ahora. Lo que podemos hacer es hacer clic aquí y dar click en nuestra primera imagen. Esto se va a saltar, y después de un cierto tiempo, esto va a salir del dedo del pie desde abajo. Entonces veamos cómo hacer eso. Vamos a saltar al modo de prototipado. Voy a dar clic en esta imagen, arrastrar mi mango azul hasta aquí y lo que realmente quería agregar aquí mismo Paso también animar para la transición. Fácil un out y 0.4 segundos porque quiero que esto suceda rápidamente. Y ahora, después de que eso sucediera, quiero poder saltar de esto a esto. Entonces en realidad voy a usar el disparador de tiempo. Al igual que así. El retardo es a cero segundos auto animate fácil. Un out y duración 0.6 segundos. Entonces, cuando haces clic aquí en primer lugar, volvamos atrás o todo el camino a éste. Por lo que cuando haga clic desde galería, nos llevará a la galería. Se puede hacer clic en la primera imagen, y como se puede ver, se abre esta primera imagen, y estos deslizadores saltan desde abajo. Por lo que si una vista previa lo una vez más, se puede ver este ligero glitch Nets porque esto son pobres es de color blanco. Y este nuestro puerto es de color gris. Por eso tenemos este ligero fallo. Entonces eso es básicamente todo para este video. Y en el siguiente video, voy a mostrar cómo se pueden agregar diferentes imágenes aquí mismo, y vamos a mover algunos de estos deslizadores alrededor para que los usuarios realmente puedan hacer cambios a estas imágenes en tiempo real. Entonces te veré ahí. 93. Prototyping 5: vamos a saber, hacer cambios a esta pantalla. Pero antes de irnos, vamos a trabajar rápidamente en estos porque me olvidé de añadirlos antes. Así que voy a hacer doble clic aquí en esta flecha hacia atrás click justo aquí y te vas a paso y en lugar de auto Enemigo a nosotros vamos a la transición. Y aquí vamos a hacer, por ejemplo, por ejemplo, levemente a la izquierda. A ver cómo se ve eso. Por lo que cuando hacemos click justo aquí, golpea vista previa desde galería y en leve a la izquierda. Pero tendremos que hacer ingeniería inversa, así que pincharé aquí mismo. Se está deslizando hacia arriba, así que simplemente lo pondré leve. No, I Así para traerlo de vuelta a esta posición original. Entonces si hago clic en vista previa, haga clic aquí y luego haga clic atrás, nos llevará a esta pantalla. Entonces eso funciona bien. Y para este, simplemente podemos hacer click desde esta flecha para volver a la pantalla y puedes usar sleight left so transition y luego levemente a la izquierda. A ver cómo se ve eso. Entonces vamos a previsualizar esta pantalla, y cuando hagas click en esta flecha, te llevará aquí. Pero creo que deslizarse bien en realidad podría funcionar aún mejor. Entonces deslízate ¿verdad? ¿ Preview de calor? Sí, funciona mucho mejor, así que eso es fácil. Piensa en Adobe X'd. Cuando olvidas algo, puedes saltar fácilmente hacia atrás y hacer esos cambios y ajustes en cuestión de segundos. Entonces porque vamos a añadir unas cuantas pantallas más aquí mismo, déjenme sacar rápidamente todas estas fuera del camino. Entonces primera pantalla que voy a agregar se va a llamar Brillo. Así que doble clic aquí y llamaré a este brillo. Entonces déjenme hacerlo rápidamente desde aquí y el vamos a mover ligeramente estos deslizadores. Por lo que hace doble clic aquí mismo porque vamos a activar el brillo desde esta pantalla. Entonces déjame hacer doble clic aquí. Color de deslizador. Yo lo voy a mover, por ejemplo aquí. Después haz click en el círculo, mantén presionada mi tecla de turno hasta que veas esta cruz justo aquí. Lo que significa que está en el centro a partir de este color de diapositiva. Y ahora cuando hicimos eso, podemos hacer otro para conseguirlo. esto le vamos a llamar contraste. Entonces cuando la gente mueva el control deslizante de contraste justo aquí, se actualizará aquí mismo también. Por lo que llevamos a cabo semana justo aquí en este deslizador para el contraste y lo movemos a aquí, por ejemplo, apenas ligeramente. Y luego mueve el dedo del pie circular. Aquí. Se puede cerrar esto. Hacer otro control de calor duplicado, ¿verdad? Esto va a ser lo más destacado. Basta con eliminar esto y para los aspectos más destacados. Yo quiero ir un poco más bajo porque normalmente con las imágenes de luz de las del, quiere ir más bajo en los reflejos porque los reflejos ya son realmente fuertes ahí. Y finalmente, trabajemos en nuestras sombras tan débiles aquí mismo e incluimos sombras, perspicacia como tal y para las sombras. Yo quiero poder abrir las sombras porque ya es imagen realmente ligera a algún lugar por aquí. Quizás, tal vez sólo eso atrás, y no simplemente movió este círculo a su posición. Entonces una vez que hiciste eso, necesitas imágenes toe include para corresponderte con estos cambios. Entonces esta es nuestra imagen original que tomamos de nuestra galería en él árbol de imágenes y se les llama deliberadamente así porque ya preparé estas imágenes. Y si los traigo de vuelta a aquí, se puede ver que les llamé brillo, contraste, reflejos y sombras. Lo que hice es abrirlos en la tienda de fotos. Si no tienes cuatro tienda, puedes usar cualquier otro software que él quiera. Y básicamente, ajusté el brillo para esta imagen. Lo guardó. Contraste ajustado. Lo guardó. Lo más destacado dicen que fuera de las sombras y así sucesivamente. Y si hago doble clic en el dedo del pie, abro estas imágenes, puede ver cuando cambio entre ellas, se puede ver un ligero cambio porque sí hice esos cambios. Entonces lo que voy a hacer ahora es por el brillo. Voy a usar brillo para el contraste, contraste y demás. Entonces hagámoslo. Entonces aquí estamos como el brillo. Simplemente voy a arrastrar el dedo del pie y soltar mi imagen dentro. Y para esta imagen en particular tienes dedo del pie conoce tus colocaciones. Son 49 pixeles a la izquierda. Entonces desde este borde, lo que voy a hacer es turno entero 12345 y después simplemente traerlo un píxel a la derecha. Entonces voy a usar lo mismo para el contraste. Entonces voy a colocar la imagen de contraste aquí mismo, y la voy a mover a posición aquí. 123451 Voy a hacer lo mismo por los aspectos más destacados Tan rápido. 123451 y finalmente en el mismo para las sombras. Entonces, como este 12345 y luego uno a la espalda. Entonces, como puedes ver, es realmente fácil hacer esto, y realmente no te lleva tanto tiempo. En realidad son unos segundos cuando posicionas tus imágenes correctamente, y ahora saltemos dentro de un tiempo de creación de prototipos porque necesitamos hacer algunos cambios en estas imágenes. Entonces lo que quiero es que voy a dar click en este slider de brillo en la imagen de edición. Entonces voy a aburrirse click justo aquí en este círculo. Voy a arrastrar para escuchar, usar y bebió o dedo del pie animar. Y para estos el uso inglés está en fuera. Ahora da click justo aquí en este círculo. Tráelo de vuelta, luego doble clic aquí y luego justo aquí. Nunca haga clic aquí mismo en los aspectos más destacados. Y no mires aquí mismo para que podamos traerlo de vuelta si es necesario. Ahora haga clic en este y finalmente no haga clic en éste. Entonces ahora vamos a probar eso rápidamente. Voy a ir de esta pantalla y dar click aquí mismo. Se transitará y luego simplemente se puede mover este deslizador y se puede ver que el efecto está sucediendo en tiempo real. Y es aplicar esos cambios y que hicimos en esas imágenes. Para que puedas, por ejemplo, hacer uno. Entonces digamos esta primera pantalla y luego incluimos estas cuatro imágenes insight para una transición aún más suave . Manténgalos todo 0% de ciudad paga, y luego cuando cambies entre ellos, enciende tu ciudad base de nuevo a 100. Entonces, por ejemplo, este brillo está en 0% aquí. Cuando muevas el deslizador, se convertirá en 100 para estos otros haciendo lo mismo también. Entonces eso es básicamente todo para esta parte. Y ahora lo que tenemos que hacer es tener la cosecha. Pero antes de la cosecha, hagamos antes y después. Así que salta aquí mismo golpea el control D, y esto se va a llamar comparar. A ver, porque queremos que el usuario pueda comparar lo sucedido antes y lo que pasó después. Pero en lugar de usar esta imagen, lo que voy a hacer es que públicamente está bastante aquí. Copia esto. Por lo que no tengo que volver a escribir. Voy a utilizar esta imagen hit control el porque contiene imagen original y valora esta imagen porque contiene imagen final. Entonces haré control efectivamente, localmente, localmente, bastante aquí dedo del pie basado en mi nombre de título Mi nombre de puerto. Esto va a ser después y esto va a ser antes. Entonces lo que realmente voy a hacer es localizar la imagen fuera de las sombras porque esa fue la última imagen que usamos aquí mismo. Y lo voy a arrastrar y soltar aquí mismo en la imagen después. Y lo que voy a hacer es doble clic y luego simplemente moverlo a aquí. Digamos sólo para que seamos capaces de ver algunos de estos cambios, tal vez así, para que la gente pueda ver esos cambios, y tú puedes, por supuesto, usar mezquitas si quieres. Pero creo que eso funciona bien. Y ahora lo que tenemos que hacer es hacer clic en este ícono aquí mismo en la parte superior, y tenemos dedo del pie crear estas transiciones a partir del icono de comparar. Por lo que voy a dar clic en el icono aquí mismo porque esta es nuestra última pantalla para sombras y quieren que los usuarios puntera puedan comparar imágenes de aquí y luego volver si están satisfechos con ello . Entonces lo arrastraré hasta aquí. Vamos a usar tap auto, animate, easy now, y 0.3 segundos cuando el click justo aquí los recuperará. Y por último, cuando hagan clic en este icono seguro, queremos que puedan ir al cultivo. Entonces vamos a usar esto para aquí paso o para animar. Fácil ahora 0.3 segundos y vamos a traer esto de vuelta a 70 como así y usar lo mismo de esta imagen aquí. Entonces drag step o china meat? Fácil ahora a 0.3 segundos. Y ahora vamos a previsualizar todo y ver cómo se ve todo. Entonces en una camarilla, por ejemplo, en esta pantalla, empecemos de nuevo todo. Contamos con la ligera animación que podemos dar click desde galería. Podemos dar click en esta imagen. Se desvanecerá desde abajo. Entonces podemos hacer estos cambios, así que aplicar contrastes, bajaron los reflejos y tal vez abrir las sombras. Y cuando hago clic en vista previa, esto es lo que va a pasar. Pero como pueden ver, cometí un error con estos deslizadores, pero vamos de pie. Arreglarlo en un segundo. Pero se puede ver esto sucediendo y mostrarnos la diferencia entre estas imágenes en tiempo real . Y por último, cuando haga clic aquí para guardar, saltará de nuevo a aquí. Pero ahora hagamos rápidamente ese cambio. Entonces estoy saltando a la pestaña de diseño, y lo que quiero es hacer clic en estos deslizadores, eliminarlos, luego dar clic en los deslizadores. Golpe control C control V justo aquí. Muévalos todo el camino hacia abajo hasta el fondo. Y ahora cuando haga clic aquí, presione vista previa y luego compare. Se puede ver que los deslizadores se están quedando puestos y no se están moviendo a ninguna parte. Entonces una última cosa que se tiene que hacer es que se puede hacer esto más. Si quieres hacer cultivos, por ejemplo, entonces puedes hacer un cultivo cuadrado o rectángulo uno o el que quieras. Pero voy a saltarme para este puesto. Voy a saltar del dedo del pie por dentro. El prototipo fue a saltar aquí mismo. Te Oporto enemigos. Entonces vamos a usar todos estos. Entonces cuando hagas click justo aquí, vista previa, puedes hacer click, Guardarlo te llevará de vuelta aquí o te llevará de vuelta a esta pantalla de comparación, pero no voy a ir del dedo del pie. Envíalo a la pantalla de comparación. Voy a dar clic aquí y luego simplemente reposicionarlo a este nuestro puerto, porque quiero que este sea mi último, nuestro barco antes de venir a esta pantalla. Por lo que vamos rápidamente Prewitt click Guardar. Y cuando regrese, volverá a éste, y se puede ver que tiene este bonito pedacito de animación, y lo que nos queda finalmente, es el dedo del pie. Crear la conexión entre el guardar y esta descripción. Publicar, así que vamos a hacer eso. Siguiente. Vamos a hacer clic en él, arrástralo y soltarlo hasta aquí, y vamos a utilizar básicamente la misma configuración que hicimos aquí mismo. Entonces cuando haces clic aquí, por ejemplo, previsualizar, previsualizar, hacer clic, guardar, guardar de nuevo y puedes ver que se vuelve a colocar en posición. Entonces eso es todo para este video. Y en el siguiente video, vamos a trabajar en la descripción slash pantalla publicada, y nos vemos allí 94. Prototyping 6: No trabajemos en la pantalla de la barra de descripción publicada. Volveré al foso de diseño y me mudaré de nuevo a 70 como así, Y entonces sacaré todas estas pantallas fuera del camino por ahora, y haré algunos cambios a esta pantalla en particular. Voy a saltar dentro del texto, y lo que voy a hacer es simplemente crear un rectángulo, crear un rectángulo como este. Llámalo mezquita así, y lo pondré justo encima de nuestro texto y todos los seleccionamos a ambos y hit shift control em o shift commander. Si estás en un Mac localmente, lloró aquí, llámalo mezquita. Y en esta primera pantalla, y en este primer estado, simplemente lo moveré así todo el camino fuera del camino así. Y tal vez podría moverlo así sólo para asegurarme de que todo esté cubierto. Por lo que esto imitará en realidad cuando los usuarios empiecen a escribir. Y ya te mostré que en el área de texto fuera de este curso, y para este botón, usemos un color más oscuro. O tal vez incluso podamos usar este color más claro. Entonces este es estado desrecortado, y una vez que sean capaces de hacer click Se volverá azul Así que ahora vamos a conseguir el control d para hacer otro duplicarlo y saltaré dentro de este botón girando baño a azul y también saltaré dentro de esta mezquita y extendido todo el camino hasta aquí así. Pero ahora, una vez que haces clic en publicar, ¿a dónde vas? Entonces lo que tenemos que hacer es realmente crear más pantallas de inicio, así que saltaré todo el camino hasta aquí. ¿ Ves cuántos más tenemos para los prototipos? 10 para un diseño y tendremos unas cuantas pantallas más. Pero esa es la forma con los prototipos en un no bxe, tendrá que hacer más copias. Entonces vamos a seleccionar todo menos estas pantallas de inicio aquí mismo. Y sostendré la tecla de turno y los sacaré del camino. Y lo que realmente quiere hacer es dar click aquí, golpear el control D para hacer un duplicado de la misma. Voy a saltar dentro, están en repetir gran click en grupo. Genial. Y se puede ver que esta tarjeta dejó fuera de la pantalla. Simplemente estaba trayendo de vuelta el dedo del pie aquí así que salta dentro de esta casa para nuestra tabla. No lo moveré para aquí localizar el número uno. Aquí está. Número dos. Aquí está. Pero en lugar de llamar a esta tarjeta número uno, lo llamaré auto número dos. Esta debe ser la tarjeta número tres. Esta debería ser la tarjeta número cuatro y voy a hacer otro duplicarlo fuera de este 1er 1 y llamar a esta tarjeta número uno como así Y entonces los agruparé a todos juntos, control de golpe, tarjetas de llamada G como así Y me mudaré en la calle abajo. Pero antes de que lo haga, déjenme dar click rápidamente en este último, y lo alinearé así. Y como puedes ver, hay 20 píxeles entre cada una de las tarjetas. Y ahora, por fin, puedo agarrar a estos tres y bajarlos. Por lo que casa una llave de turno todo el camino hasta aquí y asegúrate de que estén en 20 como el resto de estas tarjetas. Entonces, así y esto se va dedo del pie en realidad ser nuestra nueva imagen que acabas de subir. Y vamos a llamar a esto un minuto para ir. Y en lugar de esta imagen tenemos que buscar localizar la imagen de las sombras porque si recuerdas , Sombras fue nuestra última imagen que cargamos justo aquí y ese fue el último cambio. Entonces otro localizó la imagen de sombras justo aquí en mi carpeta. Simplemente acerque un poco más, seleccione imagen, arrastre y suelte mis sombras dentro. Daré doble clic para agrandar esta imagen a algún lugar por aquí, tal vez, y la moveré al centro así, y en realidad va a ser nuestra nueva imagen. Y debido a que es una imagen totalmente nueva, vamos a dar esto tal vez seis comentarios algo como esto, porque es nuevo y lo que queremos es hacer otra droga precisa. Así que el control de calor D y saltar la perspicacia aquí y luego moverlos todos fuera del camino hasta aquí y luego cambiar uno para sumar más de 20 píxeles desde el paro de la barra superior. Y eso va a imitar el gesto de arrastre. Así que salta de nuevo al foso prototipado y puedo hacer clic en esto, cartas una capa, arrastrar mi mango azul y luego usar en arrastre, y aquí use fácil un out y luego haga clic aquí y trayendo de vuelta porque quiero usar exactamente en el mismo estilo. Y cuando hago clic en vista previa, se puede ver que se fue todo el camino hasta aquí. Entonces aquí está nuestra nueva imagen y podemos saltar de nuevo a ésta y puedes cambiar entre ellas si quieres. Como pueden ver, hice esta imagen pantallas abiertas para esta imagen. Pero si quieres, así puedes cambiarlo de nuevo. Y simplemente puedes dejarlo así para que puedas cambiarlo. Toby, esta imagen para estar en esta nueva imagen para que los usuarios puedan previsualizarla ahí simplemente puedes cambiarla. Entonces aquí y luego todavía puedes tener estas animaciones que ya creamos. Pero si no, puedes dejarlo así. Entonces ahora conectemos nuestras dos nuevas pantallas de inicio con estas pantallas publicadas. Entonces lo que voy a hacer es que voy a seleccionar estas pantallas home una tecla de turno y traerla vuelta a 70 y voy a dar click aquí mismo el dedo del pie animar estas. Entonces lo que realmente queremos es hacer click en este campo de texto, arrástralo hasta aquí, y queremos usar step or toe animate easy an out y 0.8 segundos, por ejemplo, porque queremos darle solo un poco más de tiempo para revelar el texto Y luego cuando pinchemos en el botón de publicar, volvamos a traerlo de vuelta del pie nuestra pantalla de inicio, nuestra nueva pantalla de inicio, para el caso. Entonces vamos a hacer clic en él y arrástralo del pie nuestra nueva pantalla de inicio, que es ésta. Espero que lo puedan ver. Entonces es éste con la nueva imagen y para ello podemos usar tap. Ahora podemos usar la transición Inicio para está en la pantalla, y podemos usar push up, por ejemplo, o light up is in out y 0.8 segundos. Entonces vamos a previsualizar estos dos, o podemos ir de la pantalla de cultivo una materia za. Entonces cuando hagas click, di que saltará de vuelta a aquí. Al hacer clic aquí, escribirá fuera del texto y la publicación se hará visible. Y cuando hagas click justo ahí, te llevará de vuelta a la pantalla de inicio, donde podrás deslizarte hacia arriba en ellas y voy a seguir adelante y conectar estos iconos de la misma manera que lo hice con las pantallas de inicio originales. Pero no te voy a molestar. Una vez que el archivo Donald R Project, puedes saltar dentro y recordarte qué transiciones he usado para estas pantallas. Si caso te olvidaste algo en el siguiente video, vamos a tratar el tablero y te veré ahí. 95. Prototyping 7: Ahora empecemos a trabajar en nuestra pantalla de tablero y sigamos adelante y selecciónela. Muévelo a aquí, luego salta dentro del control de golpe de diseño D para hacer un duplicado del mismo. Y voy a traer estas pantallas de vuelta a aquí. Por qué creé el duplicado es porque necesitamos crear nuestro punto de partida y un punto final . Este va a ser nuestro punto final. Y para el punto de partida, necesitamos crear algunos cambios en todos estos gráficos. Entonces, empecemos con este gráfico. Voy con el dedo del pie abrirla y se puede ver que tenemos dos máscaras, una del verde, otra para el azul. Ahora puedes hacer doble clic en la Mezquita Azul justo aquí, y puedes acercarte si no puedes hacer click directo. Y lo que realmente quiero hacer es traer estos puntos de vuelta tan débiles aquí mismo. Entonces voy a dar clic aquí, por ejemplo, y todos posicionan este dedo aquí todo el camino al centro. Y cuando hago clic afuera, se puede ver que nos quedan con estos grandiosos antecedentes. Ahora tenemos que hacer lo mismo por el verde, y no va a quedar perfectamente. Podrás volver en círculo a los videos de las gráficas y ver cómo hice esto por las gráficas, para el resultado perfecto, porque sólo vamos a tener a nuestros puertos. Y es necesario tener al menos tres para que esto funcione correctamente. Pero tenemos estas otras cartas dentro fuera de la pantalla. Entonces si creo tres pantallas, por ejemplo, se verá raro solo para este gráfico para que puedas volver a rodear esto a ese video y ver cómo lo creé. Pero por ahora, simplemente sacémoslo del camino. Y lo haré en la otra dirección, por ejemplo, para ésta. Y voy a moverlo hasta aquí, por ejemplo, por ejemplo, va a moverlo todo el camino justo aquí hasta la cima. Yo también voy a sacar este del camino. Esto me voy a mover justo aquí, y cuando haga clic afuera, se volverá genial. Ahora vamos a cerrar esa. Pasa a los gustos. Por lo que una vez más, puedes volver en círculo a ese video para ver cómo lo hice, para el resultado perfecto. Pero para éste no va a ser básicamente perfecto como pudo. Entonces bajemos este dedo abajo uno en altura, más abajo. ¿ Te pegan? Voy a dar click en la barra verde y hacer lo mismo como así ya una pasta, sabes, Y vamos a abrir la última. Por lo que los mejores tiempos para publicar sabes por qué esto no está en un grupo. Entonces hagamos ese cambio. Entonces el mejor momento para publicar yo este tiempo de calidad y voy a hacer lo mismo por este. Debe ser en un grupo tiempos de calidad también. Y para este estado original, simplemente hagamos el cambio tan bien a las horas pico y puedes hacer doble clic y mover estos puntos. Entonces lo moveré, todos ellos hasta aquí. Y asegúrate de que haya lineas con este punto y también puedes encontrar este video dentro la sección de gráficos fuera de este curso y puedes ver cómo lo creé ahí. Y también tenemos una variación del dedo del pie este efecto si quieres crear otro efecto cual está tratando de ser diferente a este, pero realmente crea un resultado diferente Si eso es algo que buscas y voy a dar click en éste, puedo traerlo todo el camino para escuchar. Acercar mucho más. Haga clic aquí y luego seleccione todos estos puntos y luego simplemente tráelos aquí a este punto de partida y no animemos esto. Por lo que cuando haga clic aquí mismo, daré clic en el prototipo. Arrastra mi vela azul hasta aquí, y lo que voy a usar es el tiempo. Vamos a utilizar el retardo de cero segundos o dedo del pie animado, relajando y un segundo para la duración. Y debido a que la gente está accediendo a esta pantalla de tablero aquí mismo desde el menú y no desde ningún otro lugar, básicamente será el punto de partida una vez que haga clic en menú. Entonces aquí, por ejemplo, y luego haga clic en dashboard aquí. Este va a ser el punto de partida para esto, así que vamos a previsualizarlo, y ya puedes ver cómo se ve eso. Entonces una vez más, estos dos funcionan bien, pero éste no tan bueno. Pero de nuevo, tiene ese tipo de interés visual para que la gente pueda mirarlo y entender lo que hace. Entonces ahora pasemos rápidamente a likes porque es realmente sencillo de crear. Voy a mover estas dos pantallas fuera del camino por ahora, va a dar click Mis gustos hit control D para hacer un duplicado de la misma. Y debido a que tenemos nuestra imagen original justo aquí que editamos e incluimos todo lo que tengo que hacer por ésta, simplemente la trasladan a aquí atrás. Entonces y luego turno entero uno para traerlo 20 pixeles arriba, y voy a dar click en el prototipo. Haga clic en la imagen misma. Los dragones usan y arrastran auto animan y alivian. Úsalo fácil ahora porque lo usamos en el resto de nuestros videos y simplemente trayendo de vuelta a éste también. Por lo que cuando hago clic en vista previa, se puede ver cómo se ve eso. Entonces eso es básicamente todo para este video, e incluso puedes ampliarlo aún más. Entonces, por ejemplo, si abriste esta nueva imagen en lugar de ésta de aquí, no puedes saltar justo aquí a los gustos. Y cuando haces click en esta imagen aquí mismo porque puedes ver esa es nuestra nueva imagen cuando haces click en ella, te llevaría justo aquí porque en lugar de esta imagen usamos esta imagen para que realmente puedas voltearlos, y realmente puedes crear tu propia olla sobre cómo vas a usar estas pantallas. Pero encontré que éste funciona correctamente para mí en este caso, pero una vez más estás obteniendo nuestro archivo de salida del proyecto, y puedes incluir tus propias imágenes. Incluso te animo a hacerlo y a jugar con tus propias imágenes personalizadas. Puedes realizar diferentes cambios a partir de estos deslizadores. Incluso puedes crear efectos de cultivo aquí mismo, usando algunos de los otros efectos en el discurso y luego realmente obtener un resultado diferente. También puedes crear unas cuantas pantallas más para el guión Más dedo del pie. Lograr un resultado diferente aquí mismo. Pero realmente depende de ti. Por eso estás obteniendo este nuestro archivo de proyecto. De verdad te animo dedo a construir tus propias pantallas, usando este archivo, además de hacer cambios a la diversión existente. Entonces en el siguiente video, vamos a tratar con la pantalla del perfil apenas un poquito y no vamos a crear demasiados efectos para ello y finalmente tratar con decidir menú porque se va a ser una superposición a las pantallas y ya verás vamos a conseguir un bonito efecto. Mientras tanto, simplemente saltaré a la vista y conectaré todos estos otros iconos de la misma manera como lo hice para la pantalla de inicio. Y una vez más, si no recuerdas cuáles fueron esas transiciones, también puedes saltar dentro y hacer clic en estos iconos. Entonces cuando estás en el modo de prototipado de productos, puedes hacer clic en este fondo, por ejemplo, y puedes ver aquí qué ajustes se usan para ese efecto, Así que te veré en el siguiente video. 96. Prototyping 8: terminemos ahora nuestros prototipos con el perfil, y lo único que quiero hacer aquí ya hice es conectar todos estos pasos a excepción de éste, y éste es para el menú. Entonces si hago clic en control y clic en sitio para seleccionar mi menú, simplemente puedo arrastrarlo y soltarlo aquí y lo que yo qué? Quiero usar este paso y en lugar de también animar quiero usar más tarde porque se va toe superponer esta pantalla en la parte superior de este grito, y puedes usar este mango para moverlo todo el camino justo aquí hasta la parte superior, y puedes mantener el turno clave si quieres. Y lo que quiero hacer es elegir leve abajo porque quiero que esto levante y abajo de la parte superior en todas las pantallas que tienen este icono de menú. Y por último, quiero usar easy an out, y la duración va a ser de 0.8 segundos. Entonces cuando hago clic aquí mismo, haga clic en este ícono, se puede ver que se desliza hacia abajo desde la parte superior, y si lo hago una vez más, puede ver cómo se ve eso, y debido a que esto tiene un desenfoque de fondo, se puede ver la imagen. Pero en cualquier pantalla que se presente esto, se verá un poco diferente porque está borrosa y tiene más bajo o básicamente por lo que se ordenará , será translúcido un poco y se verá solo un poquito diferente. Entonces hacia aquí, se puede apagar, por supuesto, usar y ah, fondo blanco, fondo negro, cualquier otro color vendido y se veía igual en todas las pantallas. Pero así solo agrega un poco más de interés visual de esta manera. Ahora, finalmente, lo que quiero hacer es que quiero conectar estos elementos de menú con las pantallas. Entonces, por ejemplo, puedo dar click a casa y puedo saltar todo el camino aquí mismo, y quiero conectarlo con el hogar, que está en esta pantalla, y lo que quiero usar aquí mismo es paso. Yo quiero usar la transición. Yo quiero usar disolver, así que está justo aquí en la parte superior, relajando y 0.8 segundos, y ahora puedo saltar atrás y hacer lo mismo por toda la pantalla. Entonces aquí están los gustos. Simplemente puedo arrastrarlo para escuchar que tendrá exactamente la misma configuración. Este es mi perfil, y mi tablero va a ser esta primera pantalla. Por lo que aquí es donde se accede al tablero. Entonces lo que sea que puedas hacer clic aquí , te llevará al tablero de instrumentos. No tenemos ajustes, tendremos cerrar sesión. Entonces, básicamente así es como se ve. Por lo que una vez más, cuando hacemos clic en vista previa, podemos hacer clic en el icono del menú. Saltará desde la parte superior, y cuando haga clic en dashboard, por ejemplo, le mostrará la pantalla del tablero. Entonces ahora lo que quiero hacer es entrar y básicamente crear lo que hice para la pantalla de perfil y este menú. Entonces saltaré aquí mismo y te mostraré por un par de ellos. Por lo que simplemente conectaré mi menú. Yo vengo y te ofrezco paso. Voy a usar excesivamente, y lo superpondrá aquí mismo en la parte superior. Y también puedes saltar aquí mismo y usar el mismo ajuste. Así que deslízate hacia abajo, relajándote y 0,8 segundos. Entonces aquí estamos, en lugar de disolverse. Deslízate hacia abajo fácilmente ahora 0.8 segundos. Y ahora, cuando haga doble clic aquí en cualquiera de ellos y lo arrastre para escucharlo tendrá exactamente la misma configuración, y no voy a seguir adelante, saltar adentro y cambiarlo, dedo del pie todos ellos. Y una vez que lo haga, volveré a. Entonces ahora que hice eso y conecté todo, quizá podamos saltar dentro y previsualizar prototipo completo. Entonces aquí vamos. Vamos a empezar desde el principio, y voy a agrandar un poco esto para que podamos ver todo el proyecto en acción . Entonces recordemos que usamos un gatillo de arrastre aquí mismo, y tenemos estos elementos capaces. Entonces cuando hago clic aquí, por ejemplo, y quiero previsualizar esta imagen de un click justo aquí, tal vez hasta que me gusten. Entonces así se ve eso. Y quizá quiero volver a la pantalla de inicio desde este ícono. Pero agreguemos, por ejemplo, una nueva imagen. Esto se va a mover el dedo del pie apenas un poquito y vamos a dar click desde galería, y tal vez podamos usar primera imagen. Estos deslizadores están apareciendo desde abajo y hagamos algunos cambios en esta imagen. Entonces tal vez aquí. A lo mejor un clorato está abajo. A lo mejor puedo aumentar esto hasta aquí. A lo mejor quiero ver antes y después de eso. Se ve bien en ti Podría ahorrar. Sí, me pareció satisfactorio el cultivo. Y quiero seguir adelante y dejarme añadir una descripción. Y Ochlik publicó aquí mismo. Y aquí estamos al principio, en la pantalla de inicio y, por ejemplo, quiero echar un vistazo a mis gustos y ver que a alguien le ha gustado mi imagen desde aquí. Y vamos a revisar el perfil realmente rápido. Y aquí está. Esa imagen también está aquí. Echemos un vistazo a algunas otras cosas. Entonces, por ejemplo, echemos un vistazo a Dash Word. Y aquí está nuestros analistas de panel regresan rápidamente a casa desde aquí. Entonces ese es todo nuestro prototipo. Esa es la parte del prototipado que se hace. Y en el siguiente video, voy a mostrar cómo puedes compartir este prototipo con tu cliente. Y en la siguiente sección, fuera del curso, vamos a hacer algunos ajustes aquí y allá, y vamos a compartir esto con nuestros clientes así como con sus desarrolladores. Entonces te voy a mostrar cómo puedes hacer eso y también cómo puedes exportar todos estos activos toe Finalmente compártelos con tu cliente y el desarrollador. Una última cosa que quiero hacer en este video. Simplemente hacen clic atrás en el diseño y mueven este texto a algún lugar por aquí. Toby. A lo mejor un poco más en el medio. A lo mejor justo aquí. Y si pudiera controlar cero, se puede ver hasta dónde ha llegado esto, y siempre se puede seleccionar todos estos m, por ejemplo, Muévalos aquí abajo si eso es algo que usted quiere. Pero por eso le dimos tanto espacio para que nos quede mucho más espacio aquí mismo. Si quieres jugar con él un poco más y más pantallas o más efectos, o hacer pocos cambios o en el futuro en versiones Android y Web también. Entonces eso es todo para este video, y te veré en el siguiente 97. Guía de creación de estilo: antes de que lleguemos a compartir están diseñados con desarrolladores declinados y finalmente retirados. Tenemos que terminar nuestra guía de estilo. Y para hacer eso, permítanme acercar un poco más rápidamente. Como puedes ver, solo tenemos su logotipo así como los iconos. Pero queremos incluir muchos más artículos aquí. Entonces, por ejemplo, quiero incluir esa ilustración. Aquí. Yo quiero incluir colores. Yo quiero incluir sombra de gota que se incluyó. Tenemos un botón el cual necesita ser incluido aquí mismo para que todo se vea correctamente al igual que los fondos. Entonces, empecemos desde el principio. Primero saltemos adentro. Voy a Presti en mi teclado y déjame incluir las capas hacia atrás para que puedas ver en qué estoy escribiendo. Entonces, vamos a escribir un logotipo aquí mismo. Estamos en sentido abierto. 14 analistas utilizaron en este color, y pongamos este texto aquí mismo en la parte superior. Entonces está organizado esto un poco mejor, así que lo pondré justo aquí y me dejaré mover rápidamente todo hacia abajo para que tal vez podamos moverlo todo por y antes de los píxeles o 60. Entonces 1234 sí, pues Se ve bien. El logo selecto. 1234 Ahora voy dedo del pie duplicar el texto del logotipo. Entonces control D Y voy a mover esto hacia abajo y voy a llamar así a estos iconos. Y me voy a mover en estos iconos así como el frente cuatro píxeles hacia abajo. Entonces 1234 Y finalmente, déjame de seleccionar el texto. Alinear todo con nuestros iconos Texto 1234 Y lo que quiero hacer ahora es incluir nuestros fondos . Entonces golpeamos el control D y movemos esto todo el camino hacia abajo, lo alineamos con este texto y llamamos a este fondo así Y como sólo tenemos un fondo para este proyecto, será realmente bastante sencillo usar todo. Entonces 1234 Entonces lo que tenemos es sentido abierto. Y si saltamos aquí mismo a nuestra pantalla de inicio, si hago doble clic dentro o puedes abrir esta tarjeta, lo que tenemos aquí mismo es sentido abierto. 14 tenemos abierto desde 12 y en este color, y tenemos abierto desde 12. Y en este color, así que sólo tenemos un frente en estos 33 estilos, Así que vamos a hacer eso. Entonces, para hacer eso, simplemente puedes hacer clic aquí y usar estilos de carácter. Entonces vamos a sumar este. Entonces le agregaremos éste porque es del mismo color. Y finalmente podemos sumar éste. Entonces creamos los tres aquí mismo, y tenemos componentes aquí mismo. Pero puedes agregar múltiples componentes. Entonces, por ejemplo, puedes saltar dentro y agregar cada ícono que veas aquí mismo. Puedes agregarlos, puntear los componentes. Se puede agregar la parte inferior como el componente separado. Si eso es algo que quieras, puedes agregar esta barra de pasos como diferentes componentes. Entonces debido a que tenemos cuatro iconos, podrías tener cuatro barras de pestañas diferentes. Puedes agregar esto aquí mismo, Toby. Un tabulador son para que todo lo que quieras puedas agregar como un componente separado. Y de esa manera será más fácil para ti diseñar más adelante si eso es algo que quieres. Pero por ahora, sólo lo mantendremos así. Por lo que tendremos estos tres estilos de caracteres y solo tendremos barra de estado como un solo componente . Entonces déjenme agregar rápidamente estos teléfonos aquí mismo, así que duplicaré el teléfono para enviar un mensaje de texto a Control D y lo moveré hacia abajo 40 píxeles. Por lo que 1234 y saltaremos aquí mismo y llamó a esto abierto desde 14. Perno como así. Y se puede, por ejemplo, hacer el control D y mover que Bottom Corp comido hacia abajo. Tan solo un toque como este. 12 tal vez 20 píxeles. Y conduces como, aquí mismo escribiendo números. Entonces del 0 al 9, eso puede ser impactado en el espacio. Y luego puedes escribir todo el alfabeto si eso es algo que quieres, Así que un B c el y déjame pausar rápidamente el video aquí mientras un topping todo. Entonces aquí está todo el alfabeto así como con números, y también puedes agregar los signos si lo deseas. Entonces tal vez puedas una explicación firmar puntos comunes y así sucesivamente. Pero sólo lo mantendré simple y lo mantendré así. Lo que quiero hacer a continuación es seleccionar estos dos. Puedes hacerlo desde aquí también. Él controlaría D, y tú puedes mover esos dos abajo todo el turno y moverlo 20 píxeles hacia abajo así y entonces yo sólo quería aplicarle este siguiente. O tal vez incluso pueda hacer clic en este porque es del mismo color que éste. Entonces tal vez podamos mantenerlo 20 píxeles abajo así. Y si hago click en este, es regular, Así que lo voy a cambiar aquí. Entonces es regular y es de sentido abierto. 12. Así Y ahora, Por fin, hagamos una copia de turd, así que saltaré aquí. Controlaría a Indy para hacer un duplicado, los movería a ambos hacia abajo, y yo simplemente haré esto. Y para eso puedo dar click en este, y va a cambiar el color y puedes ver que aún está abierto. Postura 12 regular. Pero es de color distinto, así que puedo hacer el mismo espaciado como era antes. Entonces 20 pixeles y son 20 pixeles aquí tan bien como se puede ver. Entonces ahora lo que nos queda hacer es agregar esos colores, para que eso sea bastante sencillo también, para que pueda mover todo hacia abajo. Y como pueden ver, nos falta ese color verde aquí mismo. Por lo que simplemente saltaré dentro de nuestros cuadros de mando, por ejemplo, golpear control y hacer clic en el sitio y luego simplemente agregar ese color verde justo aquí. Entonces esos son todos los colores que estábamos usando. Y entonces simplemente podemos saltar aquí e incluir esos colores para que pueda usar uno de estos textos. Por ejemplo, este golpeó el control D y no lo moveré todo el camino hacia abajo. Y ahora podemos empezar a crear estos grupos así que voy a duplicar los teléfonos así mover los fondos aquí mismo así y luego mover este texto todo el camino hasta aquí y de un grupo. Todos los fondos golpearon control G y llamaron a esto fondos porque nos será mucho más fácil procesar todo. Estos son iconos. Y por último, este es nuestro logos o agruparlo también, así Y por último, lo que queremos para esto son colores así. Déjame que lo haga 40 pixeles abajo. Entonces, ¿qué le pasa? Una vez más desde aquí. Por tanto tiempo. 234 Y sólo podemos usar esto para los colores fiscales. Ahora por los colores. Simplemente puedo agarrar una de estas imágenes de nuestro marco de alambre. Entonces déjame localizar una de esas imágenes. A lo mejor puedo usar este. Por ejemplo, hit control C. Voy a ir todo el camino para aquí golpear Control V y luego oponerlo aquí mismo. A lo mejor puede ir 20 píxeles o incluso mejor para los píxeles hacia abajo. No complicar aún más las cosas. Y vamos a saber, empieza a añadir nuestros colores. Por lo que nuestra causa primaria son así de grande. Y también moveremos el azul justo aquí. Entonces este gris más claro y esto ordenar aún más ligero. Genial. Después escuchamos el verde y el rojo finalmente. Entonces, empecemos desde el principio. Podemos mover éste, tal vez 20 píxeles y déjame seleccionarlos a ambos y elimino sus sombras para poder posicionarlos aquí mismo. Entonces tenemos que por seis colores. Hagamos seis copias. Entonces esto es para cinco aquí y luego seis, así y luego puedes simplemente saltar aquí y empezar a sumar todos estos colores así Y luego una última cosa que nos queda hacer aquí mismo es que puedes crear los hashtags antes y cita hexagonal. Entonces 707070 Ese es el color para esto. Genial. Y podemos usar el color blanco para el texto tan poco rápidamente seleccionar blanco de aquí. Y si salto por dentro y muevo esto por encima de estas imágenes para que podamos llamar a este color seleccionado y luego doble clic y golpee el control V o comando V dedo del pie basado en el dedo del pie. Todo esto, y también puedes moverlos por ahí. Por lo que este es 1er 1 segundo, 1/3 1 4to 1/5 1 y violar. Este es el 6to 1 Así que puedes crear esto fácilmente simplemente golpeando el control en D. Y puedes posicionarlos en el centro de cada color, así. Y obviamente vamos a cambiar el color de éste a éste. Y podemos duplicar estos como así posicionarlos en el centro así. Y luego finalmente, lo que puedes hacer es saltar aquí mismo, doble click y simplemente teclear en estos colores tres C seis ff que es para nuestro azul. El siguiente color es de de de de. Este color es, um, F ocho F ocho F ocho. Este color es 55 D para 66 Y finalmente, al final. Este color es E 53 C 85. Ahora estamos creando esto para nuestros desarrolladores así como para nuestros clientes para que puedan entender de un vistazo qué colores efectivamente usan V Así podemos agrupar todo. Se puede ir color por color y hacerlos en sus grupos separados. Pero no voy a hacer eso. Es como si esto estuviera bien. Entonces vamos a llamar a esto colores. Entonces lo que podemos incluir aquí mismo son esas sombras. Entonces porque sólo tenemos uno y es ese por defecto, podemos duplicar este color así como este, para que él controlara D. Y sólo lo vamos a posicionar todo el camino hasta aquí así. Y tal vez podamos empujarlo a 40 píxeles de este. Por lo que 1234 por ejemplo. Y podemos mover este texto. Déjame seleccionarlo una vez más para que podamos moverlo a aquí, alineándose a la izquierda con esta sombra. Hazlo hacer sombra el nombre. Muy bien, entonces y vamos a hacer este blanco, pero solo incluye el show de fondo, y lo vamos a llamar Sombras simplemente sombra porque sólo tenemos uno. Y ahora podemos incluir botones aquí mismo. Pero no voy a hacer eso. Déjame seleccionar todo en realidad. Y me voy a posicionar para pixeles como este así así. Para que tengamos el mismo espaciado. Voy a llamar a esta sombra y a lo que queremos aquí mismo. Voy a incluir esos botones. Entonces déjame duplicar este texto, y lo voy a posicionar a la derecha de esta sombra para que tengamos algo de espacio. Entonces esto va a ir y a llamar botellas así? Déjame posicionarlo a 40 píxeles de este. Por lo que 1234 y déjame seleccionar nuestros botones. Entonces no lo voy a seleccionar desde marcos de alambre ni un diseño. Voy a seleccionarlo de los prototipos. Entonces voy a seleccionar a estos dos sosteniendo, turno hit control C. Y voy a saltar en todo el camino de vuelta a nuestra guía de estilo hit Control V. Pero acaba de seleccionar los botones. Entonces déjame hacer eso una vez más. Voy con el dedo del pie. Seleccione esto así como esto. Así que presiona mi tecla de turno Hit Control C. Esperemos que ahora seleccione y basado todo aquí mismo. Así que golpea el control V Sí, aquí están nuestros botones y simplemente puedes hacer clic aquí para ponerlos a ambos en el medio. Y lo que quiero hacer es mover estos botones para que pueda ver cuál es cuál. Entonces puedes alinearte con esa sombra sólo para que podamos ver dónde está esa sombra? Entonces tal vez aquí es bueno, pero vamos a moverlo. Simplemente 40 píxeles hacia abajo. Alguien tomó 34 Ahora se alineará con esta sombra. Haz lo mismo para éste. Por lo que 1234 Y podemos llamar a este fondo clicado. Y solo llama a este estado inferior o vacío. O como quieras llamar a estos y puedes hablar con los desarrolladores solo para que puedas estar seguro de qué nombres debes usar en tus nombres de capa. Entonces estos son botones así y finalmente, lo que necesitamos es incluir esa ilustración. Por lo que voy a mover este texto un poco para escuchar, y luego posicionarlo para el píxel. Entonces 1234 y vamos a incluir nuestra ilustración así, y déjame localizar esa ilustración. Aquí está el control de golpes C hit Control V y ahora sólo lo vamos a posicionar justo por aquí, y voy a moverlo a aquí. 1234 abajo. Y voy a simplemente hacer doble clic y extender el nuestro puerto en ambas direcciones para que pueda cumplir con el requisito fuera de nuestra ilustración. Y eso es básicamente todo para nuestra guía de estilo. Se puede golpear el control. Eso es para decir de tu proyecto, pero déjame agruparme rápidamente estos también. Entonces esta es nuestra ilustración. Y ahora, una vez que terminó de ahorrar porque es un proyecto bastante grande, como ya viste. Por lo que tenemos los archivos de preparación que tenemos en los marcos de alambre. Hemos diseñado prototipos, así que tenemos todo lo que hay dentro de este archivo, y si lo reviso en mi escritorio, siguen siendo 75 megabytes, lo cual es increíble. Simplemente imagínate si estás haciendo un proyecto es más grande esto dentro de cuatro tienda. Seguramente será unos gigabytes de tamaño, por lo que 75 megabytes es realmente pequeños tamaños de archivo realmente manejables. Puedes enviárselo fácilmente a tu cliente, y eso es lo que vamos a cubrir los dedos en algunos fuera de los próximos videos. Pero en el siguiente video, vamos a cubrar cómo puedes compartir este proyecto con tu cliente y cómo puedes recibir comentarios antes de que nos pongamos a exportar nuestros activos de diseño y enviarlos a los desarrolladores. Entonces te veré en el siguiente video. 98. Compartir con cliente: en este video, vamos a cubrir cómo puedes compartir tus prototipos con el cliente, y es realmente extremadamente simple el aceite que tienes que hacer es acercar a la primera pantalla, que es ésta, si recuerdas de nuestros prototipos para que puedas saltar al prototipo y verás este icono de inicio, que indica que esta es la primera pantalla y simplemente puedes hacer clic en compartir. Si quieres invitar a alguien al documento, simplemente puedes hacer ese dedo del pie aquí, y luego pueden hacer algunos cambios en él. Puedes compartir para una vista, y eso es lo que vas a hacer clic para compartir con tu cliente. Si estás en el plan gratuito gratuito con Adobe X'd, solo puedes compartir un prototipo para que los clientes lo revisen, y solo puedes tener un prototipo dentro de la biblioteca online. Si estás trabajando con múltiples clientes, puedes esperar y terminar con uno de ellos. Puedes eliminar estos prototipos de tu plan, y entonces aún puedes compartir un solo prototipo. Pero si realmente vas en serio con esto, o si ya has comprado Creative Cloud de Adobe, entonces tienes un número ilimitado fuera de estos proyectos puedes compartir para que pueda trabajar en varios proyectos al mismo tiempo y luego compartir múltiples proyectos con múltiples clientes. A continuación hemos compartido para el desarrollo, y ahí es donde vas a compartir con tus desarrolladores y de esa manera pueden ver diferentes espaciamientos entre elementos, diferentes colores. Has usado diferentes formas las cuales están dentro, y ese archivo es extremadamente útil para ellos porque entonces pueden saber qué tipo de márgenes y patrones pueden incluir dentro de su pelaje. ¿ Y qué tipo de transiciones deben usar? Porque ven todas estas animaciones que has creado dentro de Adobe X'd dolor de cabeza y planeado en avanzado lo que pueden poner dentro del abrigo para que todo funcione correctamente. Por último, hemos gestionado enlaces. De esa forma podrás gestionar todos los enlaces que hayas compartido previamente con tus clientes anteriores . Entonces solo imagina que has trabajado con algunos clientes, ya sabes, hace seis meses y quieres eliminar ese proyecto porque ese proyecto ya ha terminado. Te han pagado y todo funcionó bien. Pero quieres liberar algo de espacio dentro de tu biblioteca en línea. que donde simplemente puedes hacer clic ahí, te llevará a tu cuenta, y luego podrás eliminar aquellos proyectos anteriores en los que hayas trabajado. Y finalmente tenemos un video discográfico. Para que así puedas grabar un video de todos estos prototipos, o lanzará un prototipo. Así que igual que un click aquí mismo. Toe previsualice mi prototipo en esta ventana, y empezará a grabarlo y luego podrás tener la opción de exportar ese video. Entonces todo lo que veas aquí mismo estará dentro del video. Entonces todo haga clic y mueva, y luego podrás compartir ese video ya sea en plataformas en línea como Big Chance o Dribble para mostrar a todos los demás lo que has estado haciendo. Y se puede poner ese video, por ejemplo, dentro de cuatro. Tienda dentro de las más copas, puedes usar estáticas más cultivos, que es simplemente imágenes básicamente estáticas. O puedes usar animadas más copas, que son más populares. A za flota, y se pueden presentar esas copas más de una manera conmovedora. Básicamente, para Windows, tienes esa opción básica de grabación de juegos, por lo que de esa manera mantendrá este texto aquí mismo en la parte superior. Entonces, por ejemplo, previsualizar nuestro proyecto y médicamente lloró aquí. Mostrará este texto dis aquí mismo y revelará icono todo lo demás. Pero también se puede agrandar. Estará justo aquí en el centro, y luego lo que sea que estés haciendo, solo se está mostrando aquí en el centro. Y luego puedes cortarlo dentro de cuatro tienda, por ejemplo, por ejemplo, o después de efectos o más rico, más suave que estés usando. Y luego puedes presentarlo de esa manera, si eso es algo que quieres, si estás compartiendo con declines, simplemente puedes enviarles ese video, y eso es todo si quieren ver un video y no quieren dar click para a sí mismos. Pero si estás en un Mac, las cosas son mucho más simples, así que simplemente puedes golpear ese disco o golpear aquí mismo, y grabará un prototipo sin esta barra en la parte superior. Entonces realmente lo es. El principal diferencia entre Eggs D en Windows y Mac es que la función de grabación de video, porque grabará un video justo fuera de esta pantalla. Pero en Windows, todavía no tenemos esa opción porque fuera de cómo se crean las ventanas en estructurado, por lo que todavía tenemos esta barra en la parte superior. Pero como decían, simplemente se puede agrandar. Importa este video como este dentro de tu archivo de la tienda de fotos, y luego puedes cortarlo y asegurarte de que esta barra en la parte superior desaparezca. Entonces eso es básicamente todo para la parte de grabación. Entonces ahora vamos a compartir nuestro proyecto con el cliente, así que solo voy a dar clic aquí. Haga clic en compartir para opinión Cualquier persona con el Lincoln View o solo puede invitar a personas que desee que puedan ver este proyecto. Entonces si has firmado un nd A con el cliente, esta opción es extremadamente útil. Por lo que sólo las personas dentro del equipo, por ejemplo, o algunos grandes interesados importantes pueden ver este proyecto. Puedes darle un nombre aquí mismo, así que tenemos un obturador arriba para que podamos llamarlo así. Se puede permitir comentarios, y se lo recomiendo. Si desea recibir comentarios directamente sobre Adobe salir del sitio web, puede mostrar pistas de hot spot, lo cual es realmente importante porque a veces los clientes se quedan atascados. No saben dónde hacer clic, por lo que las sugerencias de puntos calientes son extremadamente útiles puedes mostrar los controles de navegación, que son los controles en la parte inferior, fuera de la pantalla, y condonan poder cambiar entre los pantallas, y luego sabrán dónde están. Por el momento, puedes abrir en pantalla completa. Si haces eso, mostrar controles de navegación desaparecerán automáticamente, y finalmente, puedes requerir una contraseña. Si se trata de algún tipo de proyecto secreto y quieres mantenerlo en secreto, puedes requerir una contraseña y cualquiera con el pasaporte puede ingresar. Y luego, por ejemplo, comentar y ver todos estos puntos calientes y todo lo demás. Todo lo que tienes que hacer aquí mismo es crear un enlace, y empezará a cargarse. Y dependiendo de lo grande que sea tu proyecto, así como de lo rápida que sea tu conexión a Internet, esto puede tardar en cualquier lugar desde unos segundos hasta unos minutos. Entonces los veré cuando llegue al 100% y cuando se publique. Entonces una vez publicada, es como se ve Si realizas algún cambio a este prototipo, puedes hacer clic en actualizar, y actualizará ese enlace, y luego podrás enviar ese nuevo enlace a nuestros clientes y que actualizado enlace. Quiero decir con el cliente, y luego pueden revisar los cambios. O simplemente puedes copiar copia de enlace en mal frío. Y puedes incrustar esto en representaciones que algo que quieras o simplemente puedes hacer clic en este enlace, y eso se abrirá de lado fuera de la nueva ventana. Cuando lo estés abriendo por primera vez, tardará algún tiempo en cargarse, así que solo ten eso en cuenta. Como se puede ver, animación ya comenzó, y aquí estamos en la primera pantalla, y todas las animaciones están funcionando. Bien, como se puede ver aquí mismo. Si hago clic en el icono del menú, por ejemplo, puedes ver cómo se ve eso. Y si hago click en esta imagen , la ampliará. Entonces todo lo que hemos hecho previamente lo ha creado aquí mismo. Pero vas a ver algunas fallas de vez en cuando porque tienes que caminar por estos en nuestro caso, 29 pantallas diferentes, que puedes ver justo aquí. Y luego vas a poder ver todas las animaciones sin problemas una vez que hayas corrido por todas estas 29 pantallas diferentes. Entonces si hago clic aquí mismo, se puede ver que tenemos son diferentes animaciones. Y si en algún momento quiero saltar a casa, simplemente puedo hacer clic aquí mismo, y me llevará a la primera pantalla. Ahora, a la hora de comentar, simplemente puedes arrastrar este pin. Se puede colocar, por ejemplo. Digamos aquí mismo y vamos a escribir un comentario, por ejemplo, y puedes hacer clic en enviar, y lo enviará. Y, por ejemplo, puedo cambiar a través de todas estas pantallas diferentes. Déjenme comprobar rápidamente. A lo mejor estoy en la pantalla 20 y quiero recordarme, ¿Dónde quedó este comentario? Simplemente puedo hacer clic en él, y me llevará a esta pantalla, y resaltará así. Puedes colocar muchos de estos dolores como quieras. Entonces, por ejemplo, puedes escribir, tal vez cambiar esta imagen y se actualizará en tiempo real, y siempre puedes volver a ella y averiguar dónde estaban estos comentarios. Entonces, como dije antes, quizá estés en esta pantalla. Puedes hacer click aquí mismo, y te llevará a esta pantalla. Entonces es realmente fácil. Puntera realmente simple. Obtén comentarios para hacer cambios de dedo actualiza tus prototipos aquí mismo y luego para revisarlos una vez más con el cliente y ver si todos están en la misma página con el diseño. Y luego finalmente, puedes entregar todo en lo que has trabajado previamente a tu cliente a sus desarrolladores que puedan desarrollar este diseño al final. En el siguiente video, voy a mostrar cómo puedes preparar todo y exportar activos para desarrolladores y cómo puedes empaquetarlos para facilitar el envío a desarrolladores así como a los clientes. Entonces te veré ahí. 99. Exportar recursos: Ahora es el momento de exportar nuestros activos y enviarlos a los desarrolladores así como a los clientes . Entonces, ¿cómo podemos hacer eso? No vamos a ir a exportar prototipos porque todos estos elementos ya están contenidos dentro de nuestras pantallas de diseño. Simplemente se están moviendo y cambiando aquí y allá. Pero por ejemplo, tenemos estos tableros aquí mismo. Pero vamos a exportar los terminados. Y tenemos estos dos botones, así que los vamos a exportar así. Entonces, ¿cómo se puede exportar realmente? Lo que te recomiendo que hagas es que crees algún tipo de estructura. Entonces, como puedes ver aquí mismo, tenemos cuatro, 68 10 12 pantallas diferentes dentro de la sección de diseño y diferentes variaciones de esas mismas pantallas aquí mismo. Pero por ejemplo, esta imagen es exactamente la misma en todas estas tres pantallas así como en este icono. Simplemente están cambiando de tamaño. Entonces, ¿por qué debo exportar estos tres donde puedo exportar sólo este también, no voy a exportar este ícono desde aquí. Simplemente saltaré a la guía de estilo y exportaré todos estos activos desde aquí. Igual que con los fondos Así como puedes ver, guía de estilo es extremadamente útil para eso también. Entonces cómo se puede ir a exportar es que se puede crear una estructura de archivos. Entonces aquí está mi estructura de archivos justo aquí. Para que puedas ver cómo se ve eso. Básicamente, tengo en la carpeta para cada fuera de estas pantallas. Se pueden ver aquí mismo en desde galería de crop dashboard y así sucesivamente. Y además, tengo carpeta Iconos, que es mi carpeta para todos fuera estos iconos aquí mismo de la Guía Sal. Porque si te acuerdas, sólo los copié de las pantallas. Por lo que estos son tamaños originales como aparecen en estos, donde está pantallas así como con el logo. Entonces cómo puedes hacerlo es que puedes exportar todos estos iconos aquí mismo. Se puede exportar el logotipo en ocho carpeta separada o fuera de todas estas carpetas se puede ir sobre. Entonces, por ejemplo, sé que estos botones publicados son de la pantalla de publicación, por lo que puedes ubicar aquí. Es descripción publicada, y luego puedes exportarlos allí. Entonces, por ejemplo, vamos a exportar iconos. En primer lugar, seleccionaré todos estos iconos desde aquí. Por lo que sostendré mi tecla de turno, seleccionaré todo y luego golpearé control o comando E. Y me mostrará esta penalización de activos de exportación. Por lo que elegiré SPG para los iconos. Y antes de exportar algo, te aconsejo hablar con los desarrolladores y preguntarles ¿qué tipo de archivos necesitan? Siempre hago esto cuando estoy creando mi resumen de proyecto. Y se puede leer eso dentro del breve para que pueda saberlo de antemano. ¿ Qué tipo de expedientes necesitan? ¿ Qué tipo de tallas necesitan? Por lo que sabemos que necesitan tamaños de iPhone 10 para empezar y para empezar con este proyecto. Entonces ese es el tamaño Onley que iban a exportar dedo para el IRS. Peoren por ahora. Si quieren que algo se haga más tarde, entonces corregiremos estos tamaños para los dispositivos más grandes y luego exportaremos nuevamente los activos. O si ya tienen ácidos SPG, que son infinitamente escalables porque son formato de archivo rector y X T es herramienta electora para que puedan utilizar esos archivos SVG como se exportaron al principio. Pero por ejemplo, para las imágenes P y G's para J Peg tendremos que exportarlas una vez más. Por lo que una vez que hayas seleccionado en el formato, puedes tener en diferentes estilos. Pero puedes tener CSS interno si quieren copiar CSS de estos iconos. Pero te recomiendo que siempre dejes estos ajustes tal como están, a menos que los desarrolladores se pidan en diferentes configuraciones de exportación para que puedas tenerlos incrustados o como enlaces optimizados, unificados. Por lo que esa es extremadamente importante y gran opción de tener, sobre todo cuando estás diseñando sitios web, porque si haces clic, optimiza, optimizará aún más estos iconos SVG. Entonces se cargarán aún más rápido y abrirán el sitio web incluso foster, lo cual es extremadamente importante, obviamente para S CEO y para la optimización de motores de búsqueda en general. Pero solo mantengamos las cosas simples para este video y solo mantengamos todo como está. Y finalmente puedes exportar a, y puedes crear cambio y podemos localizar nuestros iconos. Aquí está, y puedo seleccionar esa carpeta y simplemente puedo hacer clic en exportar, y exportará todos esos diferentes activos como iconos separados. Entonces si abro esa carpeta aquí mismo, así que aquí está, los iconos se pueden ver que exportó cada icono por separado aquí mismo a esta carpeta de iconos. Por lo que me contento más sobre una exportación todos estos diferentes activos de estas diferentes pantallas. Por lo que no voy a perder su tiempo y exportar cada activo individual. Lo que puedo recomendar es que exporte esta ilustración tal como está. Pero una vez más, si recuerdas, solo cooperamos desde aquí y simplemente lo pegamos aquí mismo en la guía de estilo. Por lo que para esta pantalla en particular en New Image, simplemente puedes exportar esta ilustración desde aquí. O si quieres, simplemente puedes saltar y exportarlo desde aquí porque ya exportamos eso. Estos iconos, simplemente puedes exportar estos comodines y ese es básicamente el final. Hazlo. Entonces vamos a exportar estas imágenes. Entonces lo que puedo hacer porque este es un crit repetido puedo ungroup descript y lo que consigo aquí mismo es la tarjeta. Pero como puedes ver, básicamente se movió. Descartar fuera, fuera y nuestro puerto. Para que recuerden que tuvimos un problema similar con uno de los videos anteriores. Entonces lo que puedo hacer es agrupar todas estas tarjetas para que estén contenidas dentro de este nuestro puerto y simplemente puedo llamarlo tarjetas así. Y puedo posicionar la tarjeta de inicio, que es ésta. Podría moverlo todo el camino hacia abajo. Perdón , en realidad está en este, creo. Comprobemos rápidamente cuál es cuál. Este es el auto número uno. Entonces posicionémoslo justo arriba Esta es la tarjeta número dos. Sí, lo es. Entonces simplemente lo nombraré Coche número dos. Y esta es la tarjeta número tres. Entonces voy a mover ese carro todo el camino hacia abajo. Así que muévelo a aquí y que sean 20 píxeles. Tan mismo como, y estos espaciamientos. Para que yo pueda abrir todas estas tarjetas y se puede ver que tenemos exactamente los mismos nombres aquí mismo. Entonces lo que puedes hacer es saltar dentro y llamar a este arte o a uno. Esto también es amargo. Y finalmente, esto al final, está fuera. Nuestros tres y tú puedes hacer lo mismo con imágenes. Entonces esta es la imagen uno. Esto es imagen a y finalmente esto aquí abajo es imagen tres. Ahora, debido a que has exportado estos iconos, pueden usar los iconos como estaban aquí mismo. para que puedan saltar dentro de la carpeta Icons y llevarlos desde aquí porque son exactamente del mismo tamaño y si lo compartes con ellos para su desarrollo. Entonces si hago clic aquí mismo, tienes que remolcar subir estos activos para descargar y simplemente puedes crear un enlace. Y creará ese proyecto para los desarrolladores y dentro de ahí. Y pueden ver la diferencia de ropa de cama y márgenes y así sucesivamente. Y pueden ver diferentes espaciados que usaste y todo lo demás. Y luego pueden iniciar y crear esta app. También tienen Adobe X'd. Pueden abrirla y ver por sí mismos estas diferencias basando que utilizas en varios lugares diferentes. Pero para que podamos exportar cualquier cosa, podemos seleccionar estas imágenes y puedes mantener el control mientras lo estás seleccionando, o Commander Mac y puedes seleccionar todas estas diferentes imágenes. Después golpear control Comando E. Y en lugar de festividad, puedes elegir PNG. En este caso, puedes elegir diseño o puedes elegir IOS y se seleccionará. Exporta activos seleccionados a una x dos x y tres x y realmente te recomiendo que hagas eso, está diseñado a una X, por lo que está diseñado a tamaño original y se escalará en caso de que necesiten para dispositivos más grandes más tarde para que puedan usarlo así. Y finalmente podemos golpear cambio porque queremos que esto se exporte a diferente carpeta para que puedas dar click aquí mismo y localizar el hogar. Entonces aquí está. Seleccionaré a ese Faller Aaron, una exportación exitosa. Exporta todas mis imágenes como PNG. Y si encuentro casa aquí mismo, puedes ver cómo se ve todo. Entonces tenemos un agua 11 que son dos X y uno a tres x Y hizo exactamente lo mismo por el resto fuera de nuestras imágenes. Por lo que lo siguiente que puedes exportar son nunca barra en Tab son. Entonces déjame cerrar rápidamente todo hacia abajo para que puedas dar click justo aquí a la nab nuestra y a la pestaña son. Es por eso que estábamos dando en esos los nombres como este para que puedas seleccionar tanto Nunca barra como barra lágrima golpe control o comando e seleccionar como PNG y golpear exportación porque queremos que sean ablesto superponer. Estos como PNG's on top off estos diferentes elementos. Y por último, lo que se puede exportar desde aquí mismo es la barra de estado. Pero la barra de estado suele venir por defecto dentro de un menos así que realmente no veo el punto fuera exportar la barra de estado. Está aquí sólo por espaciar. Entonces todo el mundo está en la misma página que el dedo por donde vienen los elementos. Lo mismo es con este indicador de inicio, es la opción predeterminada dentro de Iris. Por lo que realmente no tiene sentido exportarlo porque vendrá cuando los desarrolladores quisieron entrar. Está aquí sólo por la referencia. Entonces, ¿saben qué tipo de espaciado deben usar? Porque una vez más, este indicador de inicio así como la barra de estado vienen del IOS predeterminado. Te gusta hecho por Apple, ya se habló de ello en uno de los videos anteriores. Entonces, ya sabes, vas a ir porque usaste exactamente el mismo espaciado que los propios Apple. Para que sepas que estás en el buen comienzo. No se exporta texto porque van a incluir texto dentro del abrigo, así que van a ver adentro justo aquí. Si compartes para el desarrollo. Van a ver diferentes espaciamientos una vez más. Entonces entre, por ejemplo, esto después de la imagen y esta imagen. Y entre esta imagen y estos iconos, etcétera, van a ver qué tipo de tamaño fuera utilizas para el texto. Cuántos párrafos tienen y demás y demás así lo sabrán todo. Por lo que básicamente solo exportas imágenes y estos diferentes comodines de posición. Entonces para que no me vaya dentro de todas y cada una de las pantallas, dejando correr rápidamente y te lo diga, una vez más vas de dedo exportar estas dos imágenes y vas a exportar la puñalada están en la parte inferior justo aquí. Entonces estoy hablando de nuestro proyecto. Obviamente vas a exportar esta ilustración o si ya lo has hecho desde la guía de estilo, puedes entonces simplemente saltarte este paso. Pero puedes exportarlo desde aquí. Vas a exportar estos marcadores de posición así galería BG así como cámara BG, porque hay diferentes elementos y su clickable. En este caso, ya exportaste el icono, por lo que no tienes que preocuparte por ello en esta pantalla. Te vas de dedo a exportar todas estas diferentes imágenes. Si eso es algo que quieres porque quieres exportarlo y estas dimensiones. También puedes incluirlos en una carpeta separada para que los clientes puedan tener el tamaño original. Por ejemplo, esta imagen estaba citando 5000 por 3000 algo así. Pero en mi opinión, deberías exportar todas estas imágenes directamente desde aquí porque así los desarrolladores sabrán qué tamaños deben usar desde aquí. A continuación, hemos agregado imagen y no voy a exportar esta imagen en estos diferentes estados. Como pueden ver aquí mismo, sólo voy a exportar esta imagen original. Ahora para los deslizadores, solo vas a exportar estos tres elementos. Entonces círculo, color de deslizador y deslizador Bijie, vas a exportarlos como PNG separados lo hicieron de esa manera. Los desarrolladores simplemente van a copiar este slider para que no tengas que exportarlos varias veces. Simplemente puedes exportar a este, y luego simplemente pueden copiarlos porque pueden obtener este share para enlace de desarrollo y pueden ver los diferentes espaciados y así sucesivamente. Aquí mismo puedes exportar esta área de recorte de imagen, pero una vez más pueden incluir la función de recorte original de IOS. Entonces, por ejemplo, pueden incluir estos iconos personalizados. Pero la característica de recorte original fuera del propio sistema IRA, por lo que no hay confusión ahí. Por último, para la descripción y publicación, obviamente se puede exportar esta imagen, esta imagen, y se puede exportar esta área de texto. Estas líneas y para la parte inferior ya te muestran los botones están dentro de la guía de estilo, por lo que puedes exportarlos de esa manera. Ahora para los gráficos de sí mismos, pueden usar los gráficos predeterminados y que el IOS ofrece y saben con tiburones que deben usar para imitar estos. Pero por si acaso puedes exportar estos gráficos como s veggies o PNG, solo por su referencia, no exportas texto, y una vez más vas a exportar dedo. Estos BG's tan tipo de BG le gusta BG y finalmente, mejores tiempos para publicar VG porque esos son tus placeholders. También vas a exportar estas líneas, y eso es básicamente todo para esta pantalla. Para los gustos. Te vas de dedo a exportar imágenes una vez más top bar y la barra nunca para el perfil. Lo mismo una vez más. Por lo que estas dos, así como todas las imágenes que ves y Finalmente, para el menú lateral, puedes exportar este ícono, pero una vez más está ubicado en la guía de estilo para que pueda exportar desde Allí estuvimos como nosotros ya lo hizo, y finalmente, se puede exportar esta imagen tal como está pero exportada como PNG. Por lo que cada vez que incluyeron dentro del menú, será PNG transparente. Por lo que obtendrá todos esos bonitos efectos que ya te mostraron por dentro de nuestros videos. Y eso es básicamente que eso es básicamente eso para exportar. Y finalmente, cuando llega el momento de compartirlo con tu cliente, todo lo que tienen que hacer es simplemente puedes seleccionar todos estos. Y en Windows puedo hacer clic derecho en WinZip y agregar al zip de la aplicación de obturador. Y una vez que haga eso, va a crear un archivo zip sencillo y fácilmente compartible. Entonces, en mi caso es, puedes ver que está en Lee seis megabytes de tamaño, y puedes guardar este nuestro archivo de proyecto y enviarlo por separado si quieres. Pero en nuestro caso, como viste, nuestro archivo ZIP es de apenas seis megabytes, por lo que podemos enviárselo a nuestro cliente, y se pueden compartir fácilmente fueron correo electrónico puedes compartirlos fueron lanzados al aire, por ejemplo, puedes compartirlos a través de WhatsApp Viber. Sea lo que sea que estén usando tus clientes puede estar comunicándose a través de holgura para que puedas enviarlos a través Dropbox y así sucesivamente. Y pueden abrir fácilmente este archivo zip tanto en Windows como en Mac, y tener esta estructura de carpetas aquí dentro. También puedes compartirlo así con sus desarrolladores, y van a poder abrir todos esos archivos y usarlos como su dedo del pie previsto. 100. Conclusión: felicitaciones. Has llegado al final del curso. De verdad espero que lo hayas encontrado útil. Cualquiera para encontrar algunas de estas técnicas útiles y nuevas e informativas, y que te vas a ir de pie aplicarlas en un trabajo futuro. De verdad espero que vayas a poner a prueba este conocimiento y que realmente te vayas de pie aplicar al menos parte de lo que has aprendido en este curso al trabajo futuro y que toda esta información haya mejorado tu trabajo al menos a algunos grado. Y ahora recapitulemos rápidamente lo que tenemos lo aprendido y lo que hemos hecho dentro de este curso. Entonces a primera hora fuente. Hemos recorrido por todas estas ocho categorías diferentes. Entonces pasamos de las imágenes a través de gráficos, botones, efectos y así sucesivamente hasta los demás. Y hemos completado diversos efectos diferentes. Y hemos aprendido a animar todo, desde los iconos hasta la forma hasta el texto y así sucesivamente. Y luego una vez que terminamos la deuda, hemos creado nuestro proyecto. Hemos comenzado a partir del resumen de diseño. Incluimos la planeación del proyecto. Hemos incluido algunos marcos de alambre que dibujamos en papel luego hemos creado nuestra Guía de estilo creó nuestros marcos de alambre y planeó todo el proyecto. Después, una vez que terminamos los marcos de alambre, pasamos con el diseño. Incluimos diferentes variaciones de esos marcos de alambre. Incluimos las diferentes imágenes, creamos algunas sombras de gota diferentes, y creamos thes pantallas de tablero y alguien. Y luego una vez que hemos completado nuestro diseño, después pasamos a los prototipos, creamos múltiples estados fuera de todas esas pantallas diferentes. Y finalmente, una vez que creamos el prototipo, compartimos eso con declinado con los desarrolladores. Y te mostré cómo puedes empaquetar todo eso, Toby fácilmente digerible tanto para tus clientes como para sus desarrolladores. Entonces eso es básicamente todo para el discurso. Gracias. Una vez más, Tanto por tomarlo. Y una vez más, realmente espero que hayas recogido algún conocimiento en algunos consejos valiosos de ella y que te vayas de pie, aplícalos en tu trabajo futuro en el último video de este curso te voy a compartir algunos enlaces. Y recurso es que mencioné en el discurso donde se pueden encontrar fondos donde se pueden encontrar imágenes siempre utilizando donde se confinan. Lindos, buenos iconos gratis donde puedes encontrar esas ilustraciones que usamos y alguien hasta que te veo ahí. 101. Enlaces y recursos: Por último, quiero compartir enlaces y recurso es con ustedes. Por lo que vas a conseguir estos enlaces y el recurso es pdf puedes abrirlo y simplemente dar click en estos enlaces quiere dar click en ellos. lo solicitará con este mensaje. Puedes hacer click permitir para que puedas ser capaz de dedo del pie conseguir que enlace de inmediato. Entonces aquí tenemos abierto Sense Fund, que es libre de fuentes de Google, y estuvimos usando eso en todo fuera de nuestro trabajo, puedes descargar imágenes gratis desde en Splash y que la foto de stock Así que básicamente puedes dar click en estos azules palabras y te llevará a estos enlaces. Y por último, puedes descargar iconos gratuitos del diseño de materiales de Google y son gratuitos de usar tanto para uso personal como comercial. Por último, siempre puedes ponerte en contacto conmigo si tienes alguna duda. ¿ Por qué estas plataformas tan o bien comparten habilidad o tú a mí dondequiera que estés tomando mi curso o mis otros cursos? Y siempre responderé con mucho gusto. Gracias una vez más por tomar este curso, y de verdad espero que hayas encontrado tan valor en él. Y realmente espero que lo vayas a aplicar a un futuro. Tú diseño trabajo así hasta la próxima vez, sé creativo y cuida 102. Componentes de actualización de Adobe Xd: Oye, aquí el diseñador Alex. Y solo quería darte una actualización rápida sobre Adobe X'd en general. Ah, mientras atrás adobe eggs, el equipo lanzó una actualización para los componentes, y ahora puedes crear un componente fuera de tus botones, imágenes, formularios y así sucesivamente, y luego puedes interactuar entre esos componentes. Entonces solo quería crear una actualización para la muerte porque quería esperar y ver qué van a incluir dentro de esos componentes. Porque, como saben, los huevos de adobe, el equipo está lanzando actualizaciones cada mes. Entonces, básicamente, solo quería darte una racha rápida y cómo puedes usar estos componentes si quieres usar técnicas que te enseñé en este curso. Entonces lo primero que quiero mencionar es que no tienes que usarlos, pero es beneficioso para ti usarlos porque crearás tu trabajo más rápido y terminarás tu trabajo más rápido que antes porque esta actualización es realmente importante. Entonces para empezar, te mostraré a lo que me refiero. Entonces vamos a crear rectángulo. Es usar algo así como demasiado temprano con el Coronel 70 por ejemplo, pongámoslo en el centro. Vamos a darle un radio de esquina fuera de 50 por ejemplo, solo para crear una botella agradable y sencilla. Usemos el color Así que tres e C seis staff F sin frontera. Y vamos a incluir, por ejemplo, cargas más texto. Dentro conmigo incluyen sentido abierto como así 20 Oriente. Bien. Hacerlo alineado en el centro y oposiciónelo en el centro así, Y también me aseguraré de que eso sea blanco. Seleccione ambos y simplemente haga clic aquí. Golpea el control G para agruparlos. Y como siempre, lo llamaré Bt end y saltaré adentro y llamaré a esto Bt y B G. Ahora ¿qué puedes hacer con este botón? Es bastante sencillo. Siempre tuvimos creación de componentes dentro de adobe es D, por lo que simplemente puedes presionar control o comando K, y crearás un componente. Y si salto aquí mismo, se puede ver que tenemos componentes y tenemos BT en, que es este componente que acabo de crear. Este diamante rellenado significa que su componente maestro, lo que básicamente significa que es el primer componente que creó a partir de esta instancia, y puede crear tantas instancias como desee utilizar en sus tableros y en todo su diseño, todo lo que tienes que hacer es simplemente arrastrar y soltar desde aquí. Y se puede ver si hago clic en este que este diamante está lleno y éste es hueco en su interior. Si se reanuda mucho más cerca, se puede ver a lo que me refiero. Entonces esto es hueco y esto se llena, lo que básicamente indica que este es el componente maestro. Y esta es la instancia fuera de este componente maestro Lo que eso significa otra vez. En la práctica, por ejemplo, hago clic aquí y escribiendo, por ejemplo. No sé búsqueda. Se puede ver que se actualiza, pero se puede saltar aquí mismo en el 2do 1 y me han soplado más. Y se puede ver eso porque esta es la instancia fuera de este componente monstruo. Una vez más, se puede ver que está actualizado, lo que significa que tiene. Tiene un cambio en comparación con el componente maestro porque ahora se puede ver que este diamante ya no se sostiene. Pero tiene este punto en el medio. Lo que esto significa es básicamente huevos las búsquedas de tus cambios y se puede ver que el color este componente monstruo es azul y apagado. Esta instancia también es azul. Entonces, por ejemplo, si quiero cambiar este color a algún otro color, instancias de actualización odiosas a lo largo. Pero si escribo aquí mismo y hago clic, aprende más, verás que no se actualiza a este componente debajo de esta instancia porque cambiamos esta instancia por separado de este componente monstruo. Entonces básicamente, lo que sea que creas, va a un show a continuación. Si querías mostrar, o puedes anular esas entidades simplemente usando estas instancias y simplemente actualizando lo que no cambiaste en tu componente maestro, por ejemplo, podemos cambiar el radio de esquina. Entonces vamos a usar 20 y ya puedes ver que se va a actualizar el dedo del pie. En ambas instancias en tiempo real, también puedes elegir frontera porque no cambiamos la frontera disminuimos y jugar con ella. Se puede jugar con estos ajustes, por ejemplo. Puedes incluir lo que quieras aquí mismo. puede extender por lo que conferencias para 100 por ejemplo. puede ver cómo se extiende en ingenio y todas esas cosas que se pueden mejorar. Puedes incluir si quieres, y se va a actualizar en tiempo real. A través de sus instancias. Pero solo recuerda, cuando creas una instancia a partir de tus componentes maestros, se va a actualizar como deseabas actualizar el dedo del pie. Entonces, una vez más, si quieres dedo del pie bien, esta instancia y solo mantén el color azul en este ejemplo. Puedo dar click aquí mismo, y puedo escribir 20. Y se puede ver ahora instancia se actualiza mientras que el componente maestro sigue siendo así, todavía en su forma original. Y si hago clic aquí y cambio esto a 20 por ejemplo, o incluso menos, teniente , digamos, como puede ver, no va a actualizar instancia. Simplemente se va a actualizar el componente maestro. Entonces en el siguiente video, les voy a mostrar lo que significa todo esto y vamos a jugar con estados, y les voy a mostrar cómo los estados evolucionarán su proceso de prototipado. ¿ Cuáles son las fortalezas y también Cuáles son las limitaciones? Porque esto sí tiene algunas limitaciones, y todavía vas a tener que usar múltiples nuestros puertos para algunas animaciones. No para todos, sino para algunas animaciones. Entonces te veré en el próximo video donde vamos a explorar eso 103. Estados ados de componentes de actualización de Adobe Xd: por lo que, como dijo en video anterior, esto sí tiene algunas limitaciones, y les voy a mostrar cuáles. Pero antes de hacerlo, déjenme explicar rápidamente qué es esto. Entonces como se puede notar por el video anterior, hemos creado un componente y eso siempre ha estado dentro de fuera de Adobe X'd. Antes se llamaba simple. Ahora se llama componentes. Pero lo que es diferente es esto. Entonces tienes justo aquí en tu componente correcto, master, master, y aquí tienes estado por defecto para que puedas hacer click justo aquí, dedo del pie, agregar un estado, y cuando lo hagas, puedes. Se te va a presentar un nuevo estado o estado flotante. Como puedes ver, tiene este icono de Tonder, por lo que nuevo estado puedes llamarlo como quieras. Entonces llamémoslo clicado, por ejemplo, y puedes agregarlo ahora. Este estado clicado como quieras, así que voy a saltar aquí mismo a mi BT y BG, y voy a cambiar el color. Por ejemplo, se usa algún color oscuro solo, por ejemplo, algo como esto, y ahora puedes cambiar entre tus estilos y puedes ver por defecto. Estado es este bonito azul en clicked es este color gris oscuro. Entonces, ¿cómo puedes usar estos estados? Es realmente simple. Solo necesitas ir a un foso prototipo y simplemente dar click aquí mismo, y se va punta del dedo del pie al mismo nuestro puerto como puedes ver y vas a elegir trigger. Por ejemplo, la transición de toque. Usemos también animar destino, y tienes que elegir un estado porque ahora tienes estados, y puedes agregar tantos fuera de estos estados como quieras. Por ejemplo, vaciar el cursor, hacer clic, error, éxito y así sucesivamente para que pueda agregar tantos de estos estados como desee. Entonces, simplemente usemos judíos. Estado hizo clic porque esos son los estados que tenemos flexibilización tan básicamente igual que antes . Vamos con fácil ahora duración 0.3, y eso es básicamente todo. Por lo que ahora cuando hago clic aquí y hago clic aquí, se puede ver que cambia a este estado de click. Entonces si hacemos eso una vez más, puede ver cuando un click cambia rápidamente a ese estado porque lo único que realmente cambia es el color en este caso Ahora, cómo todo esto se traduce a nuestras animaciones. Te voy a mostrar en el siguiente video cuando me voy de pie. Explicar algunas fortalezas y limitaciones porque esto, como conjunto en el video anterior, sí tiene algunas limitaciones. Y la clave está aquí mismo. Entonces cuando estás eligiendo interacciones, puedes ver que no tenemos tiempo. Entonces básicamente, voy a explicar en el siguiente video, puedes hacer muchas de las cosas con esto, pero aún hay algunas limitaciones, así que te veré ahí. 104. Animación de componentes de actualización de Adobe Xd: El principal limitante con estos componentes es básicamente el tiempo. Entonces si salto aquí mismo, dedo del pie nuestro archivo de botones y también puedes descargar este archivo, ya está proporcionado. Se puede ver eso dondequiera que tengamos el tiempo para que veas disparador de tiempo. Podemos usarlo con componentes si es así, por lo que podemos tener una interacción múltiple entre componentes cuando tenemos el tiempo, pero no podemos usarlo cuando es el 1er 1 no sé por qué. Entonces, por ejemplo, si quieres esa animación de carga que te muestro, que comienza con el disparador de tiempo, no puedes usarlo porque no puedes usar el 1er 1 para ser tiempo. En ocasiones tampoco te dará la opción de usar el disparador de tiempo para estos segundos y giros y así sucesivamente. Pero por lo general lo harás. Pero exploremos la deuda, así que usaré esto como ejemplo, y volveré a saltar al diseño así que copiaré éste. Así que golpear control o comando profundo, saltaré adentro, y se puede ver en lugar de tener thes carpetas como Sur y tener a nuestros puertos. Para esta animación, utilicemos rápidamente Control Command K para crear un componente. Y llamémoslo bajó, por ejemplo, Entonces y como pueden ver, ahora estamos en el estado por defecto. Pero elijamos nuevos estados y llamémoslo cerrado. Y para este nuevo estado, simplemente abramos la máscara, elijala y simplemente mantén presionada la tecla de turno para cerrarla. Y eso es básicamente eso es todo lo que necesitas hacer una vez que tengas tu diseño. Por lo que es importante tienes que tener primero tu diseño para tener este seleccionado. Entonces como pueden ver, tengo esta animación o aquí mismo también extendida. Pero no voy a hacer eso por el bien del tiempo. Yo solo quiero mostrarte lo que puedes hacer con él. Entonces cuando quieras hacer prototipos de esto, todo lo que necesitas hacer es hacer clic en un salto de estado predeterminado al prototipo, haz clic donde quieras. En este caso, voy a dar click aquí mismo. Simplemente haga clic aquí para ampliarlo. Tú pisas, y esto es lo que te estaba diciendo. Como pueden ver, no tenemos el disparador del tiempo. Entonces si el disparador de tiempo es el 1er 1 no puedes usarlo. Entonces vamos a usar el grifo y vamos a cerrar el jugo. Fácil ahora 0.3. Eso está bien. Ahora lo que necesitas hacer cierra esto. Simplemente es la cabeza sobre la de cierre, y luego tienes que hacer clic aquí y zumo paso. Se puede ver que aún no tenemos tiempo aquí. Fácil ahora 0.3 y elige el nuestro puerto fuera de estado predeterminado Y ahora, una vez un hit aquí mismo para entrar al modo prototipo. Haga clic aquí. Se puede ver que se extiende. Haga clic aquí. Se puede ver que se cierra, pero como se puede ver en su lugar fuera a nuestros puertos, sólo tenemos uno. Y como decían, puedes tener tantos de estos estados como quieras, por lo que puedes tener 50 estados 60. No importa, sin embargo, sin embargo, es otro estado, por lo que también se puede agregar un estado portuario. Tienes que elegir el estado predeterminado, por ejemplo, o cerrado. Escojamos el estado de pliegue y ah, flote. Vámonos. Es, sin embargo estado. Y ahora lo que tienes que hacer es simplemente cambiar a Woods. Ve con el rectángulo de la mezquita. Añadamos una sombra de gota que se extiende a 55 por lo 20 por ejemplo, así, Y vamos a extender aún más nuestra mezquita para que podamos ver cómo se ve realmente estas sombras de gota . Y si hago clic aquí mismo, se puede ver que estamos en un estado portuario. Pero aquí estamos, estado por defecto. Entonces cuando hago clic en la vista previa es, se puede ver cómo funciona. Pero cuando intentas cerrarlo y hacer la animación, no funciona. Pero déjame ir al estado por defecto. Da clic una vez más, puedes ver que tenemos el poder, pero no podemos cerrarlo. Por qué no podemos cerrarlo porque hay una diferencia entre el estado portuario y el estado por defecto porque dentro del estado de horror, extendimos la mezquita y los huevos de adobe no pueden funcionar la característica auto animate porque la mezquita es extendido. Pero obtienes la idea uno. Cuando empieces a diseñar, empieza a incluir estas cosas mientras estás diseñando, y luego crea componentes después de que hayas terminado con tus diseños. Entonces primero, crea todo y luego crea componente y luego en diferentes estados a tus componentes . Entonces no lo eres. No terminas con una situación como esta, así que básicamente no puedes tener diferentes elementos entre tus diferentes Estados. Todos tus elementos tienen que permanecer igual si quieres usar auto enemigo, así que básicamente eso es todo para estos componentes. Como puedes ver, te pueden ahorrar mucho tiempo. Entonces, básicamente, cuando tengas nuestros tableros como estos, no van a funcionar porque son el momento. Y cuando tengas nuestros puertos como estos con estados básicos, funcionarán. Una cosa más es cuando estás cambiando de lugar, por ejemplo de aquí para aquí, a veces van a crear algunos incumplimientos, sobre todo en casos como estos cuando estás cambiando de color. Entonces de azul a rojo creará algún tipo de grito cuando cambie de posición de aquí a aquí. Entonces, solo por favor, ten eso en cuenta. Este sistema realmente no es perfecto, y siempre te recomendaré que lo pruebes antes de comprometerte con él. Entonces, básicamente, a ver si funciona así. Si lo hace, entonces fantástico. Y siempre se verá así con algunas animaciones básicas. Entonces, por ejemplo, en casos como estos, va de un lado del dedo del pie del otro y simplemente cambia de color y cambia la forma de este ícono por lo que funcionará siempre en esos casos. Pero en estos casos complicados, tal vez siempre sea mejor usar múltiples nuestros puertos, sobre todo si tienes dedo del pie a muchos de estos pasos, como 1/2 en algunos de estos. Por ejemplo, en esta donde tenemos este proceso Donald y así sucesivamente en casos como estos, siempre funcionará bien para que puedas usarlo para ahorrarte algo de espacio y tiempo dentro Adobe X'd. Y además, todo lo que dije siempre te recomendaré es que uses componentes porque los componentes son una manera fantástica del dedo del pie. Aumenta tu velocidad y para mejorar tu flujo de trabajo, pues con los componentes puedes hacer muchas cosas. Como viste en videos anteriores, puedes cambiar los colores por separado. Se pueden incluir diferentes fondos. Puedes incluir diferentes radios de esquina, sombras de caída y así uno para diferentes estados de componentes, por ejemplo, para realmente puedas jugar con él. En cuanto a la parte de animación de la misma, solo asegúrate de probar si no funciona con un solo tablero de arte, y con todo combinado en ese sencillo nuestro puerto, entonces siempre puedes volver a este principio y simplemente copiar y pegar tu nuestros puertos y simplemente ir entre esos son puertos porque, como viste, tienes muchas más opciones, sobre todo con el disparador de tiempo y con el gatillo de voz cuando tienes múltiples nuestros puertos que solo con uno soltero nuestro puerto.