Aprende diseño de UX de interfaz de usuario con Adobe XD

1. Introducción a Adobe XD: Hola a todos y bienvenidos a nuestra clase de Adobe XD para aprender I. Si planeas aprender la interfaz de usuario y la experiencia del usuario desde el principio, entonces estás en el lugar correcto Porque vamos a cubrir en esta clase desde lo básico hasta avanzar. Esta es una clase de nivel principiante. Si no tienes experiencia previa, entonces puedes unirte a esta clase. Echemos un vistazo a lo que aprendiste de esta clase. Introducción, espacio de trabajo e interfaz. Después aprenderemos sobre herramientas básicas y wireframe low fi en Adobe XD Cómo usar la opción de tipo en XD usando formas en Trazo XD. Copia y pega iconos gratuitos para usar en proyectos y UIKits existentes Agrupación y edición de iconos, creación de prototipos en Adx D, animación, cómo compartir tu word frame y comentar Además, aprenderemos a crear colores de moodboard en AdoBxD e imágenes en OOBxD Por último, proyecto sobre cómo hacer diseño de páginas web. Después de completar esta clase, podrás hacer tu propia aplicación móvil y diseño web. Haz tus propios gradientes de color y las paletas de colores obtienen un buen conocimiento para colorear en el diseño web Hacer el prototipado, seleccionar imágenes para hacer botones y también hacer el estilo de la página web Este es un proyecto basado durante el aprendizaje, tendrás proyectos de clase. Lo que aprendas, podrás participar en proyectos de clase, así podrás practicar mientras estás aprendiendo. Tendrás recursos de apoyo en esta clase, por lo que te será fácil aprender durante el aprendizaje. Si ustedes se enfrentan a algún problema o si tienen alguna pregunta, entonces no dude en preguntarme. Siempre estoy ahí para que te ayudes. Empecemos a aprender XD para YU X juntos. 2. Introducción, espacio de trabajo e interfaz: Hola a todos, y les damos la bienvenida a todos al tutorial sobre Adobe XD Aquí este es el primer capítulo, y aquí aprenderemos sobre el diseño de UI UX. Bien, entonces en el primer capítulo les estaré diciendo qué es Adobe XD y en qué se diferencia de cualquier otro software de diseño UI UX disponible en el mercado, ¿de acuerdo? Entonces les estaré contando sobre el espacio de trabajo y también la interfaz de esta aplicación en particular, ¿de acuerdo? Cómo puedes realmente uno cómo trabajar y cómo empezar a hacer tu primera aplicación móvil o una página web. Bien, no perdamos el tiempo y comencemos con esta UI UX diseñando juntos. Aquí ustedes pueden ver que estoy en la página principal de Adobe XD Aquí ustedes pueden ver si están familiarizados con otras aplicaciones de Adobe. Ustedes están familiarizados con este espacio de trabajo, ¿de acuerdo? Ya sea una tienda de hotel o en diseño, o Illustrator, o después de efectos. Esta página de inicio en particular, es bastante la misma. Bien. En la parte superior de la esquina izquierda, ustedes pueden, este es el logo de Adobe XD ¿Bien? Entonces este es el logo después de eso. A partir de aquí, ustedes pueden hacer un nuevo archivo si hicieron algún trabajo anteriormente y han guardado ese. Si haces clic en Abrir, este tipo de menú ba vendrá de donde podrás acceder a tu sistema. Y desde aquí básicamente puedes elegir cuál quieres abrir. Bien, voy a cerrar como uno y aquí está la opción como que te llevará a la página web desde donde sabrás cómo empezar con esta aplicación en particular. Bien, entonces desde aquí ustedes pueden ver que hay algunas cosas que podemos aprender. Aquí hay tutoriales, algunas de las guías de usuario y algunos de los problemas comunes que puede enfrentar. Ellos también tienen la solución para todo eso. Bien, volvamos otra vez a mi de page aquí después de eso. Si te encuentras bajo la opción de archivos. En la opción de archivos, ustedes pueden ver si he trabajado algo o si tengo algo guardado aquí. Como ustedes pueden ver, tengo aquí un archivo en el que trabajé anteriormente. Si alguien está compartiendo este trabajo en particular con él quiere trabajar en este X D junto contigo que también puedes trabajar, podría compartir contigo como compartir algún archivo contigo. Desde aquí, ustedes pueden acceder a todos esos desde aquí. Ustedes pueden administrar enlaces si antes han puesto algún enlace en su trabajo. Desde aquí ustedes pueden ver, pero no tengo ninguno por ahora. Es solo llevarme a otra página para simplemente mostrarme que no tengo ningún enlace compartido. Bien. Sólo voy a volver otra vez. Ven a mi X D desde aquí, ustedes pueden ver si han eliminado algún archivo de aquí. Bien. Desde aquí ustedes ven el archivo eliminado. Al igual que si quieres recuperarte, chicos, puedes recuperarte. Pero dentro de los 30 días se eliminará permanentemente si estás poniendo tu trabajo aquí en la opción de eliminar. ¿Bien? Entonces necesitas recuperarlo antes de los 30 días, ¿de acuerdo? Como estoy usando el plan start up, me están diciendo que actualice desde aquí puedes tener acceso a todos los archivos recientes que has trabajado o has visto. Bien, desde aquí les estaré mostrando chicos cómo pueden abrir un nuevo archivo o cómo pueden crear uno. Bien, aquí, supongamos que quiero crear un nuevo archivo. Yo sólo puedo dar click en éste, ¿de acuerdo? Aquí, este es el espacio de trabajo. Pero como acabo de seleccionar esa, esta web 1920 por 1,000 ATP. Este es el tamaño de marco predeterminado, o el tamaño de la mesa de trabajo, ¿de acuerdo? Desde donde podemos empezar a trabajar. Pero para mí, básicamente si quiero hacer algo en ese caso, como si tengo un tamaño particular en mente para lo que es una aplicación móvil o es una aplicación web para lo que estoy creando. En ese caso, lo que puedo hacer es volver a mi página principal. En mi página de inicio ustedes pueden ver que sí tengo diferentes tipos de presets aquí Puedes ver que sí tengo diferentes aquí como para iphone, para Google Pixel ipad. Si lo están haciendo para cualquier página web, ustedes también pueden hacerlo para la página web. Bien, ven aquí otra vez. Si solo arrastro esto aquí abajo, se puede ver para la página web también, sí tengo diferentes tamaños. Si estás creando una historia de Instagram o cualquier publicación de Twitter, publicación de Facebook o video de Youtube, ustedes pueden usar este preset en particular desde aquí. Si ya tienes alguna talla, ya sabes el ancho y el bombo Hay muchos sitios web. De donde ustedes pueden obtener los tamaños de pantalla. Como a partir de ahí se puede ver el ancho y la altura según que ustedes puedan poner aquí también. También puedes guardar este tamaño personalizado desde aquí. Bien, les voy a enseñar a ustedes cómo crear una mesa de trabajo aquí Como pueden ver, ahora estoy en el espacio de trabajo aquí, Bien, Este es el espacio de trabajo básico desde donde ustedes van a estar trabajando. Si quieren volver a su página de inicio, ustedes pueden volver aquí o hacer clic en este botón de inicio. Bien, voy a cerrar esta después de eso, vamos a saber que todas las páginas tengo aquí. Bien, entonces aquí ustedes pueden ver que esta se llama la barra de herramientas. A partir de aquí les voy a estar contando sobre todas estas herramientas, lo que todos podemos usar después de eso, ustedes pueden ver que sí tengo la opción de prototipado Bien, también les voy a decir cómo hacer prototipos. Al lado de mi página aquí, ustedes pueden ver si acabo de alejar el zoom. Bien, déjame tomar otros presets aquí. Bien, déjame tomar mesa de trabajo, déjame crear una a partir de aquí Déjame venir aquí y quiero crear una mesa de trabajo. En ese caso, lo que voy a hacer es seleccionar, básicamente puedo crear diferentes mesas de trabajo. Permítanme mostrarles chicos creando uno, vuelvan a su archivo de diseño. Desde el archivo de diseño justo aquí, ustedes pueden ver la opción Mesa de trabajo Una vez que haya seleccionado esta mesa de trabajo aquí, ustedes pueden ver que sí tengo diferentes plantillas o diferentes presets Déjame tomar iphone 14, Pro max aquí. Ustedes pueden ver que tengo una mesa de trabajo aquí. Básicamente, las mesas de trabajo son como marcos o lo mismo. Bien, si estás usando Figma o si estás familiarizado con cualquier otra aplicación de diseño de UI UX, entonces ustedes enmarcarán una mesa aquí en X D. Es bastante lo mismo Usando esta herramienta. Yo sólo voy a mover este de aquí. Esta es la opción para la creación de prototipos. Supongamos que quiero prototipar esto con éste. Eso lo puedo hacer así. ¿Bien? Después de eso, puedo simplemente borrar esta otra vez. Ir a la opción de diseño. Bien, espero que ustedes hayan entendido como básicamente pueden crear mesas de trabajo. Aquí, ustedes pueden ver que esta es la capa de mesa de trabajo, ¿de acuerdo? Desde aquí básicamente puedo ver, bien. Esto se llama el panel, ¿de acuerdo? Entonces a esto se le puede llamar el panel de diseño. Aquí. También puedes hacer prototipos y también si quieres compartir en el archivo, también puedes compartir el archivo Este es el panel de diseño después de eso. Aquí ustedes pueden ver que sí tengo diferentes opciones. Bien. Aquí. Esta es la biblioteca de donde podemos sacar diferentes colores. Si quiero agregar algún color puedo agregar. Si quiero agregar algún estilo de personaje, puedo agregar desde aquí. Bien, Diferentes componentes, videos, lo que sea que ponga aquí en esta caja aparecerá aquí. Bien, veamos sobre diferentes enchufes. Bien, aquí ustedes pueden ver que puedo llegar a un plug ins aquí. Los plugins son básicamente un lugar desde donde ustedes pueden importar diferentes tipos de imágenes, iconos, diseño web y tantas cosas que podemos hacer. Veamos y descubramos nuestros plug ins. Qué todo lo que tenemos, es aquí. Bien. Si hago clic en eso, ustedes pueden ver que estoy siendo redirigido a la página automática aquí Desde aquí ustedes pueden ver qué es lo que tengo, ¿de acuerdo? En lo que toda aplicación. Puedo usar esos si quiero Were frame, un montón de plantillas de marco de alambre. Puedo llevarme el Framer Were aquí. Puedes ver si quiero algún icono, ilustración de tres días, puedo llevarme este Icon Scout. Voy a por éste. Y aquí me están pidiendo alguna recomendación, o me están pidiendo permiso. Voy a hacer clic en. Bien. Porque quiero usar este Can Scout aquí. Bien. Aquí ustedes pueden ver muchos más. Yo tengo este iconos para el diseño aquí, ustedes pueden ver, en realidad se pueden descargar básicamente hasta su necesidad. ¿Bien? Lo que sea que necesiten, ustedes pueden tomarlo desde aquí. Estos son algunos de los recursos. Ahora si voy o vuelvo aquí otra vez, este es el icono Scout Desde aquí puedo dar click en siguiente si quiero iniciar sesión, o si quiero inscribirme, lo puedo hacer también desde aquí. Ahora me he inscrito con éxito. También después de que se inscriban, ustedes pueden ver que así es como se verá en realidad. Bien, esta es la página de aquí. A partir de aquí, ustedes pueden elegir. Bien, si solo quieres el gratis desde aquí, si haces clic en gratis, aquí tienes todos los iconos que puedes usar gratis. Bien, aquí hay diferentes íconos que solo puedes poner. Déjame poner uno y mostrarles chicos y el. Hay muchos packs si quieres personaje, si quieres algún ícono de redes sociales, cualquier tema como San Valentín o para Navidad, cualquier NFT's, ustedes pueden tener acceso a todo esto aquí Este es el uso de plug ins, cómo podemos obtener diferentes iconos según nuestro uso. Voy a ir a los individuos otra vez. A partir de aquí voy a estar tomando uno. Supongamos que quiero insertar esto. Bien, ahora me están preguntando, ¿quiero importar un archivo PNG pequeño o simplemente un PNG básico? Bien, aquí está trabajando el scout. Para que importe mi imagen en el AutoBXDBox o dentro de mi En lugar de eso, podría tomar un poco de tiempo. Voy a parar este y voy a tomar esto y sólo voy a insertar el pequeño PNG. Bien, aquí ustedes pueden ver que sí tengo este icono en mi marco aquí. Puedo cambiar el tamaño de esto. Y si me acerco, ustedes pueden ver que así es como básicamente puedo resolver. Si quiero hacer alguna página o alguna página web referente a whatsapp, puedo usar este icono. Bien. También puedo buscar diferentes tipos de iconos si tengo alguna búsqueda relevante aquí. Espero que ustedes también hayan entendido el uso de plug in aquí. Bien, aquí sí tengo los marcos eran también. Si quiero descargar algo, en realidad puedo empezar. Si hago clic en Iniciar aquí, ustedes pueden ver que sí tengo diferentes marcos aquí los cuales pueden usar para su trabajo también. Bien, ustedes pueden editarlos. Volvamos de la opción de enchufar. Voy a cerrar ésta. Espero que ustedes también hayan entendido tres de estas cosas. Esta es la barra de herramientas básica. Ahora vengamos aquí y vayamos al tablero de arte. Bien, a partir de aquí, básicamente este se le llama panel de control. ¿Bien? Sea cual sea el carácter o objeto que elija y que esté presente dentro de este marco, en realidad puedo transformar esos anchos y alturas. Si quiero cambiarlo individualmente, puedo hacer esa rotación. Y tantas cosas que vamos a estar aprendiendo en las etapas posteriores de la clase. También podemos cambiar la opacidad. Aumentar la opacidad, el modo de fusión y diferentes tipos de efectos también están aquí Bien, si quiero exportar esa cosa en particular, solo puedo hacer clic en Marcar para exportar, y también las explico. O si solo quieres seleccionar una página de aquí como puedes ver. Si seleccionas una página en particular, ustedes pueden tener acceso a todo eso, ¿bien? Si quiero cambiar algo o si quiero cambiar el ancho, alto, o si quiero cambiar el color, puedo hacer esto desde aquí. Bien, así es como vamos a estar trabajando en esta página. Déjame volver otra vez. Quiero mantener esto en color blanco, espero que ustedes también hayan entendido tanto sobre el panel de control. Aquí sí tengo la opción de compartir, bien, así que desde la opción de compartir realmente puedo enviarles el enlace. Bien, básicamente puedo crear un nuevo enlace. Desde aquí también puedo establecer los ajustes de vista. Bien, a partir de aquí, ¿cómo los quiero usar, como van a poder hacer algún trabajo aquí? Al igual que podrán diseñar y ¿quiénes tendrán acceso todos al enlace? Bien, solo invitaba a la gente. Sólo uno con contraseña. Yo también puedo establecer la contraseña. Después de eso, si creo link, se creará un link entonces podremos compartirlo con mis compañeros o mi cliente. Bien, aquí si quiero obtener alguna vista previa del dispositivo, puedo usar esta opción. Al igual que después de terminar de hacer una app móvil desde aquí puedo obtener la vista previa, o puedo probarla. Bien aquí. Otra opción es la opción de zoom, bien, ya que mi pantalla está ahora en 30 grados. Si lo hago 100, ustedes pueden ver cómo se verá. Si lo hago 50% así es como se ve realmente. Hazlo 33, así es como se verá realmente a partir de aquí. Así es como básicamente podemos trabajar. Aquí hay otra opción es como Desktop Preview. Bien, si quieres ver este en un Escritorio de página web, bien, puedo dar click aquí también aquí. Si quiero guardar este documento en mi espacio de nube creativa o en mi nube creativa, entonces también puedo guardar este desde aquí. Bien, es la manera fácil de hacer esto. Ahora si hago clic aquí. Bien. A partir de aquí también puedo cambiar el nombre. Bien, déjame venir aquí, déjame desmarcar ésta Ven a la opción de diseño. A partir de aquí, en realidad puedo cambiar el nombre también. Bien, si hago clic aquí. Sí, desde aquí puedes guardar esto como quieras. Espero que ustedes ahora hayan entendido sobre el espacio de trabajo y la interfaz. Ahora ustedes están bastante familiarizados de cómo empezar a trabajar en esta aplicación. Te he explicado sobre el espacio de trabajo, la interfaz y qué es este Adobexd Básicamente, como ya les he dicho chicos, pueden crear diseño UI UX y también probarlo desde aquí también. Hacer el prototipado. Después del final de este tutorial, me aseguraré de que ustedes sepan cómo hacer su propio diseño, cómo hacer su propia aplicación móvil. Como también tenemos proyecto de clase vamos a estar aprendiendo y al mismo tiempo vamos a estar practicando esas cosas también. Nos vemos a todos en la siguiente clase donde estaremos aprendiendo sobre todas las herramientas básicas aquí en la barra de herramientas, que pueden ver. Les voy a estar diciendo, chicos, cómo pueden usar esos. Después de eso, también les estaré contando chicos sobre la baja fi y la alta fi eran frame. ¿Bien? Diles, cuídate y nos vemos a todos en la siguiente clase. 3. Herramientas básicas y Lofi y Hifi wireframe en Adobe xd: Hola a todos y les damos la bienvenida a otro capítulo del tutorial de Adobe XD Bien, entonces aquí en nuestro capítulo número dos, estaremos aprendiendo sobre la herramienta básica. Y también les estaré diciendo lo que es un frame de low fi y un hi fi were. Bien, entonces tengo dos de esos. Tengo una aplicación de archivo bajo, y además te voy a estar mostrando chico un hi fi were frame en este tutorial en particular. Así que no perdamos el tiempo y empecemos con este diseño UIUX juntos Aquí, de nuevo en el espacio de trabajo. Bien, ahora intentemos entender todas estas herramientas básicas que sí tengo en mi barra de herramientas. Bien, comencemos. Esta es la primera. Esto se llama una herramienta de selección herramienta de selección atajo es V de nuestro teclado. Supongamos que si selecciono esto, si ahora hago clic en V en mi teclado, se convertirá en una herramienta de selección. Bien, desde aquí. Como puedes ver, después de eso, usando la herramienta de selección, básicamente podemos movernos. Además, podemos seleccionar cualquier artículo en particular si lo tenemos en nuestra página. También puedo cambiar el tamaño del espacio de trabajo como puedo mantener. Y aquí se puede ver que estoy cambiando la altura desde aquí. Y si cambio el ancho, se verá así. ¿Bien? Una vez que estemos trabajando aquí, los chicos no podremos movernos si solo toco aquí. Bien, si tengo algún contenido o algún objeto dentro de mi marco aquí, bien, en ese caso necesito seleccionar este de aquí. Básicamente puedo moverme, bien, del nombre voy a seleccionar y puedo moverme alrededor de mi marco desde aquí. Este es uno. Y también puedo cambiarle el nombre desde aquí. Supongamos que no se confundan en qué marco, o esta diapositiva voy a nosotros o prototipo con otro. En ese caso, puedo cambiarle el nombre en consecuencia. Ahora, espero que ustedes hayan entendido sobre la herramienta de selección. Y también puedes escalar esto si quieres. ¿Bien? Ahora, esto se llama la herramienta rectángulo, justo debajo de la herramienta de selección. La tecla de método abreviado para eso es R en el teclado. Bien, si vengo aquí, puedo hacer caja rectangular aquí. Se puede ver que hice caja rectangular aquí. Voy a seleccionar esta, puedo borrar esa. Ahora sí tengo la herramienta de selección. Usando esto, básicamente podemos cambiar o cambiar. Como pueden ver aquí, ustedes pueden ver el cambio en la forma. Nosotros chicos podemos hacer eso básicamente desde aquí usando esta herramienta de rectángulo. ¿Bien? También puedo disminuir el tamaño, aumentar el tamaño. Si quiero escalar este hacia arriba, puedo hacerlo aquí. Si quiero rotar, puedo rotar esto también. Bien, así es como básicamente podemos trabajar con esta herramienta aquí. Espero que ustedes hayan entendido mucho. Ahora pasemos a la siguiente herramienta, que es el círculo o la herramienta Elipse, ¿bien? Esta es la herramienta Elipse, y ustedes ya entendieron usando la herramienta elipse, ustedes pueden crear un círculo, Así es como ustedes pueden crear un círculo. Si quieres crear un nuevo círculo como proporcionalmente, solo necesitas presionar el turno de control y ustedes pueden hacer un círculo proporcional aquí Ahora, ustedes no podrán cambiar la forma. Como pueden ver, este es proporcional y este no lo es, ¿de acuerdo? Este no lo es. Voy a borrar esto y mover círculo aquí en un lado. ¿Bien? Usando todos estos, podemos hacer nuestros botones. Cualquier diseño si quieres hacer, nosotros chicos podemos hacer eso. Aquí hay otra forma también, que es el polígono. ¿Bien? Básicamente puedo crear un polígono aquí Como puedes ver en las opciones, como puedes ver, hay algunas opciones. Usando eso, lo que puedo hacer es cambiar la fuerza de las esquinas o simplemente disminuir la fuerza de las esquinas. Esta es una forma en la que quiero simplemente mover esto hacia abajo o reducir esto. Yo puedo hacer eso. Si lo haces así, este tipo de iconos, puedo hacerlo desde aquí. Puedo escalar este usando la herramienta de selección. Voy a poner este de aquí. Sí, esto está bien. Después de eso, intentemos ver aquí sobre la herramienta de línea. Bien, la herramienta de línea se utiliza básicamente para crear líneas. Como si quiero crear cualquier línea desde la esquina, en realidad puedo cambiar la longitud o el posicionamiento. Bien, aquí una vez que esto está en el medio, me está mostrando así, pero ahora estoy divergiendo de la línea Me va a mostrar así. Bien. Así es como realmente podemos hacer una línea a partir de aquí. Si tomamos nuestra herramienta de selección, básicamente puedo entrar o salir también usando esta herramienta de aquí. Ahora bien, esta es una forma de usar la herramienta de línea desde aquí. Voy a estar contándoles en detalle sobre todo esto, como cómo pueden cambiar el trazo o cómo podemos cambiar el color del trazo, el color del campo, y también la fuerza o el ancho de esta línea en particular aquí. Cómo se puede cambiar. Bien, seleccionaré todo esto de aquí, voy a borrar, espero que todo esto esté claro hasta tanto. Bien, ahora les voy a contar sobre la herramienta Pin, ¿de acuerdo? Usando la Herramienta Pluma, ustedes pueden crear diferentes tipos de animación y también diferentes tipos de logotipos, ¿de acuerdo? Pero la herramienta Pin es bastante complicada. Usemos la herramienta Pluma aquí. ¿Bien? Simplemente, les voy a mostrar un uso básico que ustedes puedan entender, cómo pueden usar esos en su palabra aquí. Sólo estoy haciendo una forma de acuerdo a mí mismo. Voy a hacer una forma aquí. Y aquí sí tengo una forma particular. Bien. Lo que también puedo hacer es si quiero cambiar el tamaño de este, aumentar la longitud aquí, traer este a algún lado de aquí. Yo también puedo hacerlo aquí. Como pueden ver, ya hice un logo desde aquí. ¿Bien? Esta es una manera de cómo podemos hacer eso. Y también aprenderemos a partir de aquí cómo básicamente podemos llenar esto con colores. Estas son algunas opciones, puedes hacerlo de acuerdo a tu deseo o como lo quieras. Pento es bastante útil. Después de eso, también tengo la opción para el texto. Bien. Aquí como ustedes pueden ver, he seleccionado la opción de texto o la herramienta de texto. Ahora sí tengo mi cursor aquí y he hecho clic en este fotograma Y ahora puedo escribir las cosas según mi necesidad. A partir de aquí. Lo que puedo hacer es seleccionar esta capa en particular aquí y puedo cambiar el tamaño de esta, o puedo cambiar el tamaño Supongamos que quiero 60, voy a dar clic en Entrar, Y aquí puedes ver el tamaño carta o mi tamaño de fuente. Aquí lo puedo escribir así. Aquí se pueden ver los objetos que tengo aquí en este marco en particular o en la mesa Tendrás estas capas aquí. ¿Bien? Si solo vuelvo aquí, puedes ver éste. También puedo verdecer esta mesa de trabajo en particular Desde aquí, básicamente puedo subir aquí, y una vez que seleccione esta, tengo todos los objetos en esto también Bien. Aquí, si quiero ocultar este, puedo dar click en este. Si quiero registrar este, entonces no voy a poder cambiar posicionamiento ni nada como tal. Aquí también lo hago si solo quiero exportar esta escritura en particular de aquí. Yo también puedo exportar esto. Como si quiero usar esta misma cosa en particular, o el mismo botón, o el mismo diseño en otra página, también puedo hacerlo. Al igual que si quiero usarlo en otras aplicaciones mientras hago cualquier póster, también puedo usar esos. Espero que esta opción de texto también haya sido clara. Voy a borrar esto también aquí. Así es como puedes hacer Db, que ya te he mostrado aquí. Tienes todos estos presets. No quiero preset, solo puedes venir aquí y hacer arte board de ti mismo, de tu propio tamaño. Aquí, sí tengo el tablero de aquí, básicamente puedo cambiar el nombre. Bien, yo también puedo hacerlo. Bien, después de eso, la última opción en nuestra barra de herramientas es la opción de acercar. Bien, si hago clic aquí, ustedes pueden ver que solo puedo acercarme. ¿Bien? Esta es la opción para acercar el zoom. A partir de aquí. Puedo copiar cualquier cosa, o simplemente puedo moverme. Yo también puedo moverme. Bien, Esta es la opción para acercar el zoom. Si hago clic aquí, ustedes pueden ver que también les he mostrado diferentes formas de acercar el zoom Al alejar, bien, aquí hay otra opción. O si solo presionas en tu teclado y con tu mouse también, simplemente puedes acercar, alejar, Depende de ti. ¿Bien? Ellos sí tienen diferentes funciones para hacer lo mismo aquí en esta aplicación también. Si quieren mover el marco, totalmente como todo el marco o toda la página, ustedes tienen que simplemente hacer clic en Shift desde su teclado. Y usando el mouse, ustedes ahora pueden arrastrar aquí en mi teclado. Ustedes pueden ver. Ahora sí tengo un letrero de mano. Bien. A esto se le llama la herramienta de mano. Bien. Usando la herramienta de mano, básicamente puedo moverme con mi herramienta de selección. No puedo hacer esta. Bien. Con la herramienta de selección, puedo seleccionar cualquier marco en particular y moverlo por la página. Pero para cambiar el posicionamiento de toda la página, puedo cambiar. Y después de eso, con mi ratón, sólo puedo moverme. Bien. También puedo alejar usando control y mouse. Espero que ustedes hayan entendido todas las herramientas básicas. Bien, ahora déjenme mostrarles chicos. Hola. Y ¿qué es un marco de fi eran bajos? Bien, hay dos tipos de marcos de desgaste, básicamente. El primero que es de baja fi, la forma completa es de baja fidelidad. Enmarcamos a Hii es de alta fidelidad fueron marco. Bien, déjame abrir un archivo. Ven aquí. Y de aquí como pueden ver, tengo esta página aquí, ¿bien? Ahora éste se está cargando. Este será un ejemplo de cómo se ve aquí una página baja. Tengo todos estos marcos aquí, bien. Ahora haz zoom en un fotograma, ¿de acuerdo? Y les diré chicos por qué llaman a éste como el cinco bajo. Bien, acabo de aumentar este de aquí. Básicamente, no pusieron nada. Este es solo un prototipo que si te gusta, supongamos aquí ustedes pueden ver que sí tengo el lado en opciones, inscríbase opciones aquí si les gusta el diseño y todo, ustedes pueden hacer éste solo como Hi Fi eran frame. Bien, este es solo un resumen si te gusta el estilo y todo aquí, ustedes realmente pueden ver los estilos y todo desde aquí. Como pueden ver, después de registrarse, tendrá opciones aquí y todo esto aquí. Se puede ver en la parte superior que ha renombrado esto también al abordar Bien, este será el perfil aquí. Básicamente, solo necesitas poner esas cosas como te he mostrado. Este es el de baja fi de aquí. De hecho, también puedes editar todo esto. Si no quiero este, entonces simplemente puedo hacer clic aquí y eliminar. También puedo poner diferentes estilos. Aquí puedes ver yo puedo las curvas también desde aquí en este icono si ves O también puedo cambiar el tamaño. Bien, esta es una forma de hacer un lo fi. Primero, crear un lo fi mostrándolo o simplemente guardarlo como recomendación te ayudará a obtener un mejor conocimiento sobre el diseño. Bien, aquí viene el L uno. Bien, ahora déjenme mostrarles a ustedes alta o alta fidelidad. Nosotros, si les muestro chicos, ustedes podrán entender y diferenciar entre una estructura de alambre hi fi y low fi. Ahora déjame volver a mi página de inicio. A partir de aquí voy a estar abriendo una página. Iré a descargas, o iré a mi escritorio aquí. Yo sí tengo éste. Ahora si voy a algún archivo, este es un archivo PSD. Déjame buscarlo y mostrarles chicos. Ahora les puedo mostrar chicos el marco de alambre de alta fidelidad. Este es un marco de alambre oscuro de alta fidelidad. Ustedes pueden ver este es el marco de alta fidelidad Were de aquí. Básicamente lo que hicieron es aquí, como puedes ver, todos estos botones y todos estos diseños e iconos. Por lo que esto solo se basa en, o se hace sobre la base de la baja fidelidad fueron marco. Bien, Por el uso de una baja fidelidad fueron marco. Este está hecho, bien. Ahora bien, este alto diseño, bien. Desde aquí también básicamente puedo editar éste. Lo principal es que se llevaron una cosa baja fi y tienen aquí el hi fi were frame es un vínculo directo entre el usuario y el trabajo. ¿Bien? Entonces verán esta cosa en particular y la interfaz de usuario, diseñador de UX intentará que sea más fácil de usar y tratará directamente con la interfaz o la experiencia del usuario, ¿de acuerdo? Esto es lo que van a poder ver, ¿de acuerdo? El usuario nunca llega a ver el bajo fi bien, o el marco artístico o el espacio de trabajo. Bien. Esto está hecho en base a un marco We de baja fidelidad. Pero ahora este es el producto final. Se ocupa del conjunto particular de clientes o de las personas objetivo. A partir de aquí, en realidad puedo agregar diferentes botones. Ahora éste está bastante hecho y ahora puedes darle este trabajo en particular a tu codificador y explicarle lo que quieres que hagan Bien, espero que ustedes hayan entendido. Como pueden ver este es solo un pequeño marco de eran de una aplicación de criptomonedas, supongo. Sí, espero que ustedes hayan entendido esta clase. Espero verlos a todos en el siguiente tutorial donde aprenderemos sobre cómo pueden escribir en adoptar eran marcos. Bien. Espero verlos a todos en la próxima clase. Hasta entonces, cuídate y adiós. 4. Cómo usar la opción de tipo en Xd: Hola a todos y les damos la bienvenida a otro capítulo del tutorial de Adobe XD Bien, entonces aquí en esta clase vamos a estar aprendiendo cómo puedes usar la opción de texto en X D como cómo básicamente puedes escribir o hacer un cuadro de texto. Cómo podemos realmente manejarlos. Cómo podemos cambiar el kerning, también el let, y también otro tamaño de fuente Y también los estilos de fuente también. Bien, entonces vamos a estar aprendiendo en esta clase todo sobre estas cosas en detalle. Empecemos ahora con esta clase en particular. Como ustedes pueden ver, estoy aquí en mi espacio de trabajo o en la pantalla de inicio, pero ahora iré a mi espacio de trabajo desde aquí. Como pueden ver, sí tengo una página aquí por defecto. Bien, seleccionaré esta y solo eliminaré esta. Ahora, voy a estar creando por mi cuenta a partir de aquí. Bien, iré a la mesa de trabajo. Déjame este Samsung Galaxy S talla diez. Con esta herramienta de selección. Voy a mover este. Voy a crear cuatro de ellos. Bien, me quedaré con este aquí otra vez. Voy a hacer otro aquí. Voy a tener cuatro pantallas aquí como ustedes pueden ver. También puedo renombrarlo desde aquí si quiero. ¿Bien? Voy a poner esto como uno solo. Este tiene dos, este tiene tres. Este como cuatro. ¿Bien? Yo también tengo este nombre. Por ahora. Ahora, intentemos entender cómo usaremos nuestra opción de texto aquí. Bien, déjame un poco ahora aquí, hay dos formas básicas, ¿de acuerdo? Entonces el primero es si simplemente haces clic aquí con el mouse, una vez que seleccionas la opción de texto, bien, desde aquí puedes simplemente escribir lo que quieras. ¿Bien? Por lo que también puede salir de la caja. Bien, entonces esta es una manera. Ahora, otra forma es si creo un cuadro de texto. Bien, déjame regresar, dielecciona esto. Ahora bien, si creo una columna de texto aquí, como ustedes pueden ver, puedo crear una página aquí. ¿Bien? O un cuadro de texto. Ahora, en realidad puedo poner texto dentro de esta caja en particular. Una vez que alcanzó el cierto nivel que había creado la caja, bajará automáticamente. Bien, aquí ustedes pueden ver, bien, estoy llenando mi caja aquí. Simplemente se extenderá en el lado vertical. Esta es una opción de cómo puedes hacer eso. Ahora seleccionaré de nuevo este cuadro de texto y lo eliminaré. Bien, entonces otra vez, déjame escribir algo aquí. Entonces a lo mejor voy a escribir Roberts Toy World. Bien, entonces voy a escribir Roberts toy, Robert, Toys Toys World. Ahora sí tengo aquí esta frase en particular. Lo que puedo hacer es con mi herramienta de selección, puedo seleccionar esta aquí. Ya ves que la puedo traer en el centro. Bien, tal vez me quede esta aquí desde aquí. De nuevo, lo que voy a hacer es como estoy haciendo una página mundial de juguetes aquí, solo voy a poner mi mensaje de marketing. Bien, a partir de aquí tal vez voy a crear una caja. Voy a elegir la talla de aquí. Como pueden ver aquí, también hice una caja. Bien, solo escribiré mensajes de marketing para que se desplieguen aquí. Bien, sí tengo esto y ahora seleccionaré esto. Después de eso, ustedes pueden ver aquí hay diferentes opciones. Bien. Aquí. Si quiero traerlo al centro, puedo hacerlo. Y si quiero ir o alinearlo a la derecha, también puedo hacerlo. Bien. Volveré a venir aquí. También puedo aumentar el tamaño a partir de aquí. Voy a cambiar el tamaño de la caja. Seleccionaré este texto. Ahora lo que puedo hacer es hacer clic en el turno de control y puedo aumentar el tamaño en consecuencia de este mensaje de marketing. Bien, me quedaré con esta hasta aquí. Voy a disminuir el tamaño aquí también. Bien, Esta es una manera de cómo podemos hacer eso aquí en este particular ahora, voy a cambiar esto por eso. Primero necesito seleccionar esta de aquí, ustedes pueden ver que puedo cambiar el tipo de fuente. Bien. Aquí sí tengo diferentes tipos de fuentes aquí ustedes pueden ver si selecciono eso, voy a poder obtener esos tipos. Bien, voy a tomar esta. Iré por el Calibri básico. En Calibri, elegiré la negrita cursiva. Ahora, también puedo cambiar el tamaño desde aquí también. Bien, déjeme tomar 30 aquí. Puedes ver aquí está el título. Bien, seleccionaré esta de aquí. Lo voy a poner en una esquina o arriba. Bien, a partir de este fin. Básicamente lo que puedo hacer es si selecciono de nuevo todo el texto, lo seleccionaré nuevamente. Desde aquí puedo hacer doble clic en esto y aquí ustedes pueden ver sí tengo pocas opciones aquí. Bien. Aquí. Como pueden ver, si vengo aquí y si escribo como 50. Bien, Primero selecciona y si, 50, voy a dar click en. Bien. Entonces aquí pueden ver esta es la opción, el interlineado, si tengo dos líneas aquí, ¿bien? O voy a aplicar en este de aquí. Si selecciono este interlineado desde aquí. Bien, 18 aquí, se puede ver que el espaciado entre líneas aumentó en el medio. Bien, aquí hay otra opción es como espaciamiento de agua. Puedo aumentar eso si lo aumento en cinco. Aquí ustedes pueden ver. Pero como pueden ver, sí tengo esta opción. Sólo voy a franquear esto de nuevo. Ahora, aquí sí tengo muchas más opciones también. Bien. Auto, viento. Puedes ver si hago clic en auto con cómo está cambiando mi cuadro de texto. Bien, si le hago clic en el centro aquí, ustedes pueden ver aquí. Como ustedes también pueden ver. Bien, aquí hay diferentes opciones. Espero que ustedes hayan entendido que este es el espaciado entre párrafos. Supongamos que tengo éste de aquí. Ahora quiero aumentar el espaciado entre párrafos. Yo puedo hacerlo desde aquí. Si sólo hago otro cuadro de texto aquí. Acabo de llenar esto con texto simple, ¿de acuerdo? Y ahora voy a crear otro párrafo. Ahora como pueden ver aquí, Bien, aquí sí tengo esto y aquí ustedes pueden ver. Ahora quiero hacer el espaciado entre párrafos. En ese caso, lo que puedo hacer es seleccionar esta casilla de esta casilla de aquí, bajaré, y ahora pueden ver que son diez. Voy a hacer 30. ¿Bien? Aquí puedes ver el espaciado entre los párrafos cambiado aquí, ¿bien? También puedo aumentar el tamaño. La distancia del párrafo será la misma, como será la misma, pero las palabras se moverán. Como ustedes pueden ver. Voy a borrar esta otra vez. Espero que ustedes hayan entendido hasta tanto. Bien, así que lo primero que tienen que hacer es que ustedes no deberían hacer mucho cambio con sus palabras, ¿bien? Pero solo selecciona la talla y todo, ¿de acuerdo? Como qué tamaño de fuente vas a usar para el título y qué todo vas a usar aquí. Ahora sí tengo esto. Voy a copiar aquí de nuevo este texto en particular. Bien. Pero aquí lo que voy a hacer es poner el conjunto de productos y ahora seleccionar este cuadro de texto en particular de aquí. Y ahora puedo traerlo en el centro. ¿Bien? Como ustedes pueden ver, estoy trayendo esto al centro. Ahora, aquí sí tengo éste también. Ahora lo que voy a hacer es tomar mi viejo botón y también voy a dejar caer uno aquí. ¿Bien? Pero voy a escribir este por, y voy a tomar otra caja de aquí y escribiré Saber más. Ahora aquí escribiré Saber más. Escribiré más como ya lo he dicho aquí. Voy a seleccionar esta y ahora realmente puedo disminuir esta altura. Bien. Entonces me quedaré 010 está bien. Yo sólo voy a poner 20. Veamos cómo se ve. Si, este esta bien, supongo Ahora lo que puedo hacer es que en realidad puedo traerlo aquí y así es como podemos hacer nuestros botones también aquí. Una cosa más buena de esto está aquí, como ustedes pueden ver C aquí, ustedes pueden ver que me está alineando a la parte superior del otro botón. Y aquí me está alineando con el medio. Y aquí, abajo de aquí, también puedo ver el ancho aquí. ¿Bien? Entre los párrafos de aquí, también puedo ver el ancho. Bien, aquí, básicamente lo que puedo hacer es que también puedo rotar esto. Aquí puedes ver que hay un cambio en mi icono. Usando esto, puedo rotar esto y también puedo ponerlo de acuerdo a mi uno. ¿Bien? Pero en este caso no quiero rotar este. Lo voy a poner en el centro. Ustedes también pueden ver aquí. Aquí está la opción de rotación. Desde donde ustedes básicamente pueden rotar, ¿de acuerdo? Desde aquí puedo ver o verificar el posicionamiento. Yo me quedaré con este aquí. Espero que ustedes hayan entendido esta clase de lo que aquí hemos aprendido. ¿Bien? Después de esta clase, aprenderemos sobre cómo puedes hacer formas. ¿Bien? Os voy a estar diciendo chicos cómo hacer un rectángulo o simplemente voy a dar esquema para estas cajas aquí. ¿Bien? Yo los voy a dar. Voy a añadir esos también. Nos vemos a todos en el siguiente ticker tutorial y adiós. 5. Usando formas en XD: Hola a todos y les damos la bienvenida a otro capítulo del tutorial de Adobe XD aquí ya que estamos aprendiendo el diseño de UI UX Este es nuestro capítulo número cuatro y vamos a estar aprendiendo cómo podemos usar las formas. Entonces aquí en esta clase, les voy a decir cómo pueden usar formas, cómo cambiar el radio de esquina de esas formas y cómo pueden hacer cualquier forma proporcionalmente también Les voy a decir chicos cómo básicamente pueden disminuirlo individualmente también. Voy a estar diciéndoles cómo llevar su texto delante de una forma. ¿Bien? Supongamos que si tienes tus tomas hacia atrás, cómo puedes traer eso formado. También les voy a contar chicos sobre cómo hacer agrupamiento eso mientras hacen botones o mientras hacen cualquier icono, que es la vista previa final, en ese caso, cómo van a sacar eso adelante. Bien, no perdamos el tiempo aquí y empecemos con esta clase. Como ustedes pueden ver, ya estoy en el espacio de trabajo en que estaba trabajando en la última clase, bien, ahora les voy a mostrar cómo pueden crear básicamente, les he contado todo sobre las herramientas básicas en las que tengo mi barra de herramientas. ¿Bien? Desde aquí puedes crear una caja rectangular. ¿Bien? Quiero crear una caja rectangular. En primer lugar, lo que voy a hacer es simplemente aumentar el espaciado a partir de aquí. Bien, traeré este aquí abajo. Imagen del producto, ¿ quieres encajar aquí? Ahora lo que voy a hacer es poner una caja aquí. Bien. Que pueda poner mi trabajo primero. Lo que voy a hacer es seleccionar la caja rectangular. A partir de aquí voy a hacer una caja. Bien. Ahora, como ustedes pueden ver aquí, cubrió. Tengo mi texto cubierto aquí. Bien. Justo dentro de esta caja para llevar esta al frente. Hay tantas maneras diferentes usando las cuales podemos llevar ese texto delante de este rectángulo. Pero les estaré mostrando los más básicos y lo que ustedes pueden usar. Básicamente lo más básico que uso es si simplemente haces clic derecho sobre tu mouse aquí, puedes ver la opción se llama enviar hacia atrás, ¿bien? Entonces el control de atajo, abre corchete aquí. Si quieres sacar eso adelante como supongamos si quiero sacar algo adelante en ese caso puedo dar click en la opción Control más Bc cerrar. Bien. Voy a enviar este hacia atrás o necesito seleccionar todo este texto de aquí. He seleccionado este enviar al revés. Aquí estaba mi control o mi candado de gato, por eso no funcionaba. Básicamente. Aquí, haré clic en Enviar este producto al revés. Así es como básicamente puedes hacer, puedes encajar este en el centro, o la otra forma de hacerlo es si seleccionas ambos de esto, supongamos que voy a poner este de aquí en alguna parte. Ahora quiero traer ambos de esto en el centro. En ese caso, voy a venir aquí. Y lo que voy a estar eligiendo está aquí. Como pueden ver, puedo traer esto en el centro. Bien, voy a la opción de alineación. A partir de ahí, puedo elegir aquí usando la tecla de método abreviado. He comprado este en el centro. Bien. Esta es otra forma de hacerlo. Ahora espero que ustedes hayan entendido como básicamente pueden jugar con esto. ¿Bien? También voy a bajar aquí y aquí. Ahora, en realidad también puedo cambiar el ancho. Bien, para esta, como básicamente puedo hacer eso es si vengo aquí, si vuelvo aquí, supongamos que quiero seleccionar esta página, ¿bien? Ahora bien, lo que voy a hacer es aquí, como pueden ver, los pequeños puntos aquí, ¿de acuerdo? Usando eso, de hecho puedo cambiar el radio como ustedes pueden ver desde aquí. Y la otra forma de hacerlo es si venimos aquí, ¿de acuerdo? Básicamente de aquí también, puedo cambiar, déjame tomar 50 aquí, puedes verlo cambiado por 50, el radio de esquina. Si quiero cambiar el radio para cada esquina individualmente, supongamos que quiero poner aquí 80, voy a 70. Aquí 20 y aquí 40, ¿de acuerdo? Así es como se verá en realidad. ¿Bien? Pero no lo quiero, volveré otra vez. Ahora aquí sólo voy a disminuir el radio de la esquina aquí. Ahora, básicamente, puedo moverme por ahí. Bien. Si quiero hacer algún cambio aquí en la forma, puedo hacer esto desde aquí. Bien. Ustedes podrán ver así. Yo también tengo estos rincones. De donde puedo mantener el tamaño hasta aquí. Espero que ustedes hayan entendido. Bien, ahora voy a hacer otra caja aquí, de la misma manera. Tomaré esto aquí y haré que esto llegue a la herramienta de selección. Desde aquí, seleccione esto, envíe hacia atrás. Sí tengo mi mensaje aquí, solo lo voy a meter dentro de esta caja en particular. También voy a cambiar el radio de la esquina desde aquí. Bien, tengo esto aquí. Yo guardaré estos botones aquí abajo y también pondré cajas para esos. Bien. Espero que ustedes puedan ver cómo se ve en realidad. Sólo voy a hacer opción plus aquí. ¿Bien? Esa opción más, voy a tomar un círculo desde aquí. ¿Bien? A lo mejor voy a ponerlo aquí en el centro, creando círculo. Les voy a enseñar a ustedes cómo hacer eso. Una vez que selecciono el botón de elipse. Con eso puedo crear o jugar con el círculo. Puedo elegir el ancho y el alto. Pero aquí como sí tengo este tipo, pero si quiero un círculo perfecto o una forma redonda perfecta, en ese caso lo que puedo hacer es clic en Control Shift. Ahora ustedes pueden ver que solo me va a dar un círculo perfecto. Aquí no puedo jugar con el ancho y la altura. Me va a dar un círculo proporcional. Espero que ustedes hayan entendido este. Voy a seleccionar esto y voy a eliminar esto. Sólo voy a reducir el tamaño otra vez. Haré clic en Control Shift. Ahora aquí sí tengo este botón aquí. Voy a poner este botón aquí. Ahora voy a poner un signo más. Bien. Signo más. O simplemente puedo seleccionar otra cosa. Bien. Déjame solo tomar una línea o solo tomaré un plus. Voy a ir a la opción de texto desde el cuadro de texto. Vendré aquí, lo haré, para seleccionar esta carta en particular de aquí. Y pon este en el centro. Bien, voy a tratar de poner éste en el centro. Ahora como puedes tener esta cosa en particular aquí en el centro, voy a poner así aquí. También puedes ver la opción plus aquí. Y ahora es bastante visible. Bien, voy a estar haciendo más cajas. Supongamos que quiero esta caja, seleccionaré esta. Sólo puedo copiar cualquier caja si quiero. ¿Bien? A lo mejor este es el rectángulo. O uno rectángulo aquí. Y aprende más página. Éste. Esta página aquí. ¿Bien? A lo mejor voy a tomar este rectángulo de aquí. ¿Bien? Lo que voy a hacer ahora es copiar éste usando control. Puedo venir aquí y puedo dar click en el control V. Aquí pueden ver que sí tengo la caja del mismo tamaño. A partir de aquí voy a disminuir el escalado o el tamaño de esta caja. Ahora sólo voy a encajar esta. Bien, para mis botones aquí, como ustedes pueden ver, hagan lo mismo. Enviar hacia atrás, o simplemente seleccione este texto primero. Si lo envías hacia atrás. Y hay otras formas de hacerlo, ¿de acuerdo? Si acabo de quitar el campo, también puedo hacer eso. ¿Bien? Puedo seleccionar esto desde aquí. Esta es una forma de hacer esta cosa. Otra vez, de la misma manera voy a venir aquí, quizá aquí, rectángulo uno, voy a copiar éste. Y yo sólo voy a pegar aquí. Bien, yo también tengo esta caja. Ahora con esto, me voy a mover, ahora. Voy a mover este de aquí. Ustedes pueden ver ahora que tengo esta carta también. Bien, desde aquí también, si quiero cambiar, puedo cambiarlo, pero espero que ustedes hayan entendido esto mucho. Bien, sí tengo esto y también puedo disminuir el tamaño si quiero traer este al centro así. Sí, bien. Tengo esta página lista. Bien, espero que ustedes hayan entendido esta C de aquí. Les he mostrado chicos cómo pueden realmente hacer una página así, cómo pueden usar las formas y cómo llevar esta al frente. Al igual que si tienes dos, ustedes también pueden agruparlo. Bien, si selecciono estos dos de aquí, básicamente puedo seleccionar o si quiero cambiar el ancho, puedo hacer eso. Si quiero rotar, bien, puedo hacerlo también. Bien. Si quiero rotarlo un 5% aquí, ustedes pueden ver que la rotación se llevó a cabo con ambos. ¿Bien? Entonces así es como básicamente podemos agruparnos. Haga clic derecho aquí y aquí podrá ver la selección del grupo. Bien, A partir de aquí, si acabo de mover uno de los, se eliminará todo el texto. ¿Bien? Este es el uso de la agrupación que ustedes realmente pueden mover alrededor de las páginas o un botón por completo. Bien, espero que ustedes tengan esta clase y ahora puedan empezar a hacerla así por su cuenta. En la siguiente clase, Copiar pegar y trazos, como cómo es útil y qué es lo que podemos hacer usando esas opciones en este Adobe XD Espero verlos a todos en el siguiente tutorial. Hasta entonces, cuídate y adiós. 6. Iconos gratis para usar en Proyectos y kit de interfaz de usuario existente: Hola a todos y les damos la bienvenida a otro capítulo de Atop XD donde aprenderemos a diseñar UY Ux Bien, entonces ahora estamos en nuestro capítulo número seis. Y aprenderemos de donde todos ustedes pueden obtener íconos gratuitos que pueden usar en sus proyectos mientras hacen una nueva aplicación móvil. O recién estás empezando con esta aplicación. Entonces de donde puedes obtener esos archivos de recursos. Bien. También les estaré diciendo chicos cómo pueden encontrar kits de interfaz de usuario existentes que pueden usar y tomar iconos o tamaño de color y diferentes colores. Color de fondo primario, secundario, cómo puedes tomar sugerencias de los trabajadores. Y les estaré contando algunos de los sitios web de donde ustedes pueden obtener todo esto gratis y cómo pueden usarlos en su trabajo también. No perdamos el tiempo y empecemos con este capítulo en particular aquí. Como pueden ver, nuevamente ahora estoy de vuelta en mi espacio de trabajo. Y ahora les voy a mostrar chicos de donde ustedes pueden obtener algunos de los iconos gratuitos que pueden usar en su trabajo. Bien, primero lo que voy a hacer es que les voy a estar mostrando sitio web chicos que se llama el buscador de iconos. Bien, aquí tal vez buscaré el ícono de la página uno de la página de inicio. Aquí ustedes pueden ver que sí tengo diferentes opciones. Si quiero una ilustración o una ilustración de tres días o cualquier pegatina, puedo conseguir todo esto desde aquí. Si ustedes solo se desplazan un poco hacia abajo, ustedes pueden ver aquí hay diferentes recomendaciones de diferentes trabajos aquí. Bien, así que aquí están algunas de las pegatinas o ilustraciones. También puedes descargarla y usarla apropiadamente. Ven a la búsqueda de iconos para el hogar. Me va a dar una sugerencia para íconos como home desde aquí. Bien, entonces aquí estos son algunos de los íconos que están cargados. Bien, entonces supongamos que aquí tengo esto, bien, pero permítanme hacerles entender sobre los precios, la prima, y todas las licencias también. Bien, así que aquí, primera parada. Si quieren ver los productos premium así como los productos gratuitos, ustedes pueden hacer clic aquí y ver esto. ¿Bien? Pero para este proyecto, lo que voy a hacer es estar seleccionando el botón libre desde aquí. Bien, ahora voy a tener los tres iconos, que está bajo la opción de iconos de inicio. Bien, aquí puedo seleccionar todos los estilos. No tengo ningún problema con el estilo. Bien, aquí puedes ver Action Call todas las licencias desde aquí. Básicamente ustedes pueden elegir por lo que van a usar. Bien, aquí no se puede ver ningún enlace atrás, licencia básica. Si quieres tomar una licencia básica y quieres usar esta, puedes tomarla aquí. Voy a elegir el no enlace de vuelta. Como si no tuviera que mencionar su nombre o algo como tal, puedo hacer eso. Y este es para comercial, como si lo estamos usando para cualquier uso comercial, como hacer la página web de cualquier empresa o cualquier cosa como tal. En ese caso, puedes dar este y ellos te mostrarán las opciones. Bien. Quiero todos los libres, así que déjame venir aquí y dejarme llevar este. Bien. Aquí hay dos formas básicas de cómo puedes descargar. Icono libre. Bien, aquí este es el formulario PNG y este es el formulario SVG. Espero que ustedes estén familiarizados con lo que es el formulario PNG, pero ahora aquí veremos qué es también el formulario SVG. Bien, voy a estar descargando ambos simultáneamente, uno al lado del otro. Bien, voy a dar click en 48 pixeles. Primero, descargaré el PNG. Como ustedes pueden ver, mi PNG se está descargando. Ahora voy a llegar a la opción SBG y desde SVG también descargaré el icono de SBG Bien. También hay otros íconos. ¿En qué formato? Si quiero descargar, si quiero descargarlo en un formato Illustrator, como si voy a trabajar en Auto Illustrator, entonces puedo descargar este aquí. Si quiero descargarla en formato ICO, también puedo hacerlo. Desde aquí puedes ver para que puedas usar el formato CNS también Este formato solo se puede usar ins o si tienes producto Apple. Bien. Ahora he descargado ambos de estos. Os voy a estar enseñando chicos desde aquí. Bien, voy a ir a las descargas desde aquí. Yo sí tengo dos. Bien, les voy a enseñar a ustedes lo que podemos hacer desde aquí. Bien. Ahora la forma más fácil de dejar tu trabajo aquí es venir a la opción de archivo. Bien, del archivo se llega a la opción de importación. La tecla de atajo para eso es shift más control más I. En Macs o PC, es control de turno o comando más I. Bien, simplemente estoy importando esto y todos mis archivos están siendo descargados en las descargas Jo, traeré este aquí o seleccionaré este Voy a tratar de importar éste. Bien, aquí como ustedes puedan. Ya tengo esta imagen aquí. Voy a importar otro. A partir de ahí iré y revisaré las propiedades desde aquí. Este es el archivo PNG. Como ustedes pueden ver, sólo voy a cortar esto por ahora o voy a eliminar esto. ¿Bien? Voy a estar descargando archivo SVG, ¿de acuerdo? Voy a descargar el formato SVG desde aquí. Bien, vamos a ver desde aquí. Aquí ustedes pueden ver que sí tengo el formato SVG aquí. Ahora como pueden ver, sí tengo esto. Estaré importando lo mismo aquí en mi X D también. Ven al archivo, ve a él, y él, este de aquí, ustedes pueden ver que este es el formato SVG. Trabaja aquí, ¿de acuerdo? Déjame poner esto lado a lado y mostrarles la diferencia entre el formato SVG y el formato PNG, ¿de acuerdo? Déjame acercar más, ¿de acuerdo? Entonces ahora voy a acercar más. Aquí puedes ver este es el archivo PNG que se está rompiendo, ¿bien? Y aquí sí tengo el archivo SVG, ¿de acuerdo? Aquí, si aumento el tamaño, bien, a partir de aquí, seleccionaré esto o lo haré un grupo, ¿bien? Puedo cambiar esta de aquí, ¿de acuerdo? Entonces este es un grupo. Puedo moverlo, bien, según mi deseo. Y también puedo dividir esto también si quiero. ¿Bien? Este es el archivo PNG. También puedo aumentar el tamaño a partir de aquí, pero la calidad no es tan buena. Bien. Como ustedes pueden ver desde aquí, puedo mantener esto también si quiero que sea redondo. Bien, voy a volver. Espero que ustedes hayan entendido la diferencia entre el archivo SVG y también un archivo PNG, ¿de acuerdo? Ahora lo que voy a hacer es que quiero borrar esta otra vez. Desde aquí eliminaré esto y también eliminaré este archivo PNG. Bien, desde aquí tengo acceso. Ustedes también pueden tener acceso a todos estos iconos desde. Bien, entonces voy a descargar la versión SVG solo a partir de ahora debajo de esto. Bien, buscaré un icono de imagen. Bien, buscaré imagen y voy a dar click en Enter Here. Puedes ver que tengo un conjunto diferente de icono de imagen aquí. Supongamos que quiero instalar este, o quiero descargar este. Voy a hacer clic aquí, y aquí se descargó. Ahora voy a volver a mi archivo XD aquí afuera. Como pueden ver, sólo voy a borrar estas líneas de aquí. Bien, voy a borrar esta línea también. También eliminaré esto, dos lados. Bien, que tengo aquí. Voy a borrar esto. Ahora, aquí vendré con mi herramienta de mano. Ahora haz zoom para seleccionar esto. Ahora a partir de aquí lo que voy a estar haciendo es voy a estar poniendo ese archivo SVG aquí. Bien, voy a volver a la opción de importación desde aquí. A lo mejor voy a seleccionar esta. Esta es la primera y quiero importarla. Bien, tengo mi archivo aquí o simplemente puedo elegir de aquí. Bien, a lo mejor voy a elegir esta. Ahora, aquí como ustedes pueden ver, hecho puedo descomponer esto y moverlo por ahí. Bien. Ahora, como pueden ver, he comprado este archivo SVG aquí, pero como también puede ver desde aquí, puedo seleccionar las capas individualmente. Supongamos que solo quiero importar la parte media en ese caso. Solo selecciona la parte media de aquí. Y a partir de aquí, básicamente puedo seleccionar esto y de hecho traerlo aquí abajo. Bien, el lugar que quiero, esta es una forma de hacer o trabajar aquí. Ahora sólo voy a importar éste. O primero simplemente desvincularé esto. Bien, sólo voy a poner aquí ahora voy a tratar de mantener esto en el centro. Bien. Ahora esta voy a borrar. Me queda sólo éste de aquí y lo traeré en el centro. Así es como ustedes básicamente pueden poner una opción de imagen si no les gusta ninguna otra cosa. Si quieren tomar cualquier otro icono de cualquier otro marco, ustedes también pueden hacerlo. Bien, voy a descargar este SVG desde aquí. Voy a importar en el mismo lugar. Bien, ven de nuevo a la X D y juega en la importación de archivos. Después de eso ustedes pueden importarlo de aquí. Bien, ya tengo este archivo aquí. Básicamente puedo cambiar el tamaño o la forma de esto también, ¿de acuerdo? Como pueden ver, puedo cambiar a partir de aquí. Si solo quiero seleccionar una capa en particular, puedo venir aquí y puedo seleccionar una capa en particular como esta. Yo sólo puedo implementar 23 cosas al mismo tiempo. Esta es una forma de hacerlo. Puedo venir aquí con Shift. Si presiono en Shift, puedo seleccionar ambos de esto, solo esto dentro de las capas. Puedo hacer click en esto y puedo simplemente hacerlos bien. Ahora bien, si trato de mover algún icono de aquí, supongamos que estoy seleccionando esto. Básicamente puedo mover esto también. Bien, esta es una forma de cómo podemos trabajar aquí. Espero que ustedes hayan entendido hasta esto mucho de cómo podemos importar y hacer uso de su icono de donde todos ustedes pueden llegar hasta aquí. Iconos gratuitos que puedes usar abajo en tu trabajo. Hay una variedad para diversos usos que puedes usar. Si quieren algo colorido, ustedes también lo pueden conseguir de aquí, ¿de acuerdo? Ya en otras clases, he mostrado chicos que como pueden tomar algunos recursos, iconos de sus acciones Dob ¿Bien? Aquí para eso necesito venir a Plug ins, y aquí puedes ir a Scout. Y bajo el ícono Scout, él también, ustedes sí tienen muchas opciones. Bien, si solo quiero los gratuitos, entonces puedo buscar aquí. Aquí sólo buscaré íconos. Además, tienes animación, tres ilustraciones de D's. Ustedes pueden buscar desde ahí. ¿Qué tipo de formato necesito aquí? Además, ustedes pueden ver, ¿lo quiero en formato PNG o SVG? Para mí, personalmente les recomiendo que ustedes usen el formato SVG. ¿Bien? Porque yo uso ese tubo y eso es bueno, no está mal. Bien. Ahora vamos a estar aprendiendo como cómo puedes obtener un tipo diferente de kits de UI gratis cuando intentas practicar, ¿de acuerdo? O simplemente copie sus textiles o textiles listos para cumplir y úselo en su trabajo para hacer un nuevo diseño de página web o diseño de aplicaciones móviles. Bien, empecemos primero con esa. Bien, para eso otra vez, iré a mi Chrome. Bien. Voy a añadir una nueva página web. Desde aquí buscaré X DUI kids. Bien. Entonces este es un sitio llamado Xd Guru.com Así que a partir de aquí ustedes podrían obtener algunos de los kits de interfaz de usuario gratuitos, pero ahora consigo el monto del cargo desde aquí para que ustedes puedan realmente cuidar sus comunidades y desde aquí ustedes pueden unirse a su grupo Si tienen algo que preguntarles, ustedes también pueden enviar su comentario. Bien. Aquí están los pocos kits de interfaz de usuario que puede obtener por usted mismo. A lo mejor necesitas pagar una pequeña cantidad por mí. Lo que voy a recomendar es que al principio ustedes comiencen con niños UY gratis Y después de eso, cuando apenas estás avanzando en tu nivel de trabajo en esta plataforma, entonces solo puedes obtener una premium, lo que será una gran inversión para tu trabajo. Aquí ustedes pueden ver R pocos de los kits premium que se pueden usar. Solo voy a escribir kits de interfaz de usuario gratuitos. Bien. A lo mejor voy a tomar este y puedo tratar de conseguirlo. Ahora. Déjame ver qué me están pidiendo aquí. ¿Me están pidiendo algo como tal? Aquí ustedes pueden ver estos pocos de los kits. Bien. Ustedes pueden usar este color aquí. Tú. Iconos. Ahora puedo guardar esto en mi mood board. Bien, necesito crear una cuenta para eso. Solo voy a volver y puedo conseguir pruebas gratis aquí. ¿Bien? Como pueden ver, puedo usar esto mientras trabajo. Esta es una forma de cómo podemos conseguir todo esto, ¿de acuerdo? A partir de aquí ustedes pueden obtener esto ya que estas son algunas de las páginas web de manos que pueden usar. ¿Bien? Ahora déjame volver de nuevo a mi E aquí e intentaré obtener un archivo diferente. Bien, voy a tratar de importar de aquí, dentro de importar aquí. Puedes ver que ya tengo importado un archivo aquí. A lo mejor se borró de nuevo, necesito descargarlos de nuevo, labio descárgalo. Voy de nuevo a ir a otro sitio web que es el adora de un stock. Además, ustedes pueden obtener diferentes tipos de UI, ¿de acuerdo? Pero para esto ustedes tienen que pagar un poco por eso. Ustedes también pueden usar el premium. Desde aquí ustedes pueden ver diferentes cosas aquí. Bien. Entonces esta es una plataforma de comercio electrónico, Así que permítanme descargar esto aquí. Ustedes pueden ver que esto se está descargando. Bien. Este es un recurso XD Sólo voy a tratar de abrir esto aquí en mi archivo aquí. Estoy descargando el kit. Bien, déjame volver a mi X D e importar ese archivo de aquí. Bien, voy a llegar a la opción de importación desde aquí. Este, el lado de E Commerce, voy a importar, supongo que no de aquí. Básicamente lo que tengo que hacer es cancelar esto. Voy a venir aquí. Desde aquí realmente puedo abrir el archivo, bien. Básicamente ahora ustedes podrán ver una página web que está siendo diseñada por otra persona. Desde aquí ustedes pueden ver que hizo algunas de las páginas, también lo nombró. ¿Bien? El inicio de sesión de la página de registro y la página de contraseña olvidada. Aquí están el hogar y las categorías. ¿Bien? Pero lo principal en lo que me voy a centrar es en los componentes. Bien, déjame acercarme y mostrarles qué componentes usó todos los componentes. Bien, aquí ustedes pueden ver que ha usado diferentes tipos de iconos o logotipos. Básicamente, ustedes pueden tomar los logotipos, tal vez cambiar algo o tomarlo así y de hecho cambiar el color por mí. Ahora mismo lo que puedo hacer es que me pueda llevar el botón de inicio desde aquí. Lo que voy a hacer es que puedo desagrupar a éste. Ahora puedo seleccionar uno individualmente y dar clic en Control plus, que es la copia básica. Ven aquí, baja aquí y escribe, o simplemente haz clic en la opción Pace. Bien, aquí ustedes pueden ver que sí tengo esta cosa aquí. A lo mejor voy a poner esto por aquí. Sólo piénsalo como el logo, ¿de acuerdo? Entonces este es el logo del mundo del juguete de los ladrones de aquí. Ustedes no necesitan poner ningún color, pero si ustedes quieren poner cualquier color o cualquier cosa como tal aquí en este icono. Así que déjame llevar otra aquí. Ven a esta página y controla V. Ahora sólo voy a aumentar el tamaño de ésta. Y supongamos que quiero cambiar el color. Entonces ven a la opción de campo desde aquí. Elige el color de tu propio gusto y ustedes pueden poner ese color, ¿de acuerdo? Y también puedes elegir la opacidad desde aquí. Y también puedes elegir el tamaño del borde, ¿de acuerdo? A lo mejor voy a cambiar un poco el ancho , así que voy a hacer tres. Y le voy a dar este color amarillo. O tal vez algo en rojo. Bien, algo en rojo. Y también voy a cambiar la talla, quizá seis. Bien, este es el icono que quiero. Voy a disminuir el tamaño a partir de aquí. Bien, puedo disminuir el tamaño a partir de aquí. Básicamente lo que puedo hacer también es si hago doble clic en esto desde aquí, si ustedes pueden ver que sí tengo los pequeños botones aquí, ¿bien? Básicamente a partir de aquí puedo disminuir el tamaño del icono. También básicamente puedo hacer cualquier cambio si quiero. Bien, Aquí puedes ver diferentes puntos. Usando esos puntos, en realidad puedo moverme y jugar, pero aquí se verá feo. Para eso, volveré aquí de nuevo y eliminaré este agujero. Bien, así es como podemos realmente poner colores o cualquier detalle en nuestro icono también. Al igual que podemos editarlo también después de obtenerlo de cualquier otra persona. Donde pocos del sitio web gratuito o útil donde ustedes pueden obtener sus kits de interfaz de usuario y así como diferentes tipos de iconos que pueden usar mientras desarrollan su diseño web o el diseño de su aplicación móvil. Espero verlos a todos en la próxima clase donde aprenderemos sobre grupos. Y también hablaré con ustedes sobre algunos de los problemas que ustedes podrían enfrentar cuando acaban de editar el icono. Bien, hasta entonces, cuida de todos y espero verlos a todos en la próxima clase. 7. Iconos de agrupación y edición: Hola a todos y les damos la bienvenida a todos a otro tutorial de Adobe X D Aquí. Ahora estamos en nuestro capítulo número siete y les voy a estar diciendo chicos cómo pueden hacer agrupación y agrupación. Y también en última clase como les he dicho chicos, que ustedes pueden tomar diferentes tipos de iconos de diferentes lugares. Si obtienes esos íconos, cómo básicamente puedes editar esos iconos de acuerdo a ti mismo y cuál es la forma más precisa y mejor o la forma única de editar esos iconos como tu propio yo. Bien, les estaré enseñando todo aquí en esta clase, así que no perdamos el tiempo y empecemos con el diseño. Ahora como ustedes pueden ver aquí, estoy de nuevo en mi espacio de trabajo. Ahora lo que voy a hacer es primera parada, voy a tomar cuota de los íconos. Bien, aquí ustedes pueden ver que estoy en la página número uno aquí. Puedes ver que sí tengo esta página aquí, algunos íconos, y los he nombrado en consecuencia que no me confundo cuando la aumento. Bien, voy a estar trabajando y voy a estar mostrando cómo agrupar en consecuencia. Bien, Primera parada ustedes saben el uso básico de agrupar ya que yo estaba agrupando cosas mientras tomaba otras clases también. Bien, primero, voy a venir aquí en archivo. Supongamos que si quiero importar más de una página. En ese caso lo que puedo hacer es seleccionar Control. Y después de eso puedo seleccionar dos o tres imágenes al mismo tiempo. Bien, voy a seleccionar esto, voy a importar todos estos tres iconos aquí. Bien, después de eso puedo importar los de aquí. Bien, así que a lo mejor voy a seleccionar aquí con mi herramienta de selección. Aquí. Ustedes pueden ver estos son los pocos íconos que acabo de comprarlo en mi espacio de trabajo. Ahora lo he importado en la página número dos. Ahora veamos primero sobre la agrupación y desagrupación. La forma más básica de saber eso es una vez que seleccionas todo el marco aquí o todo el ícono, haz clic derecho sobre tu mouse aquí, ustedes pueden ver opción, bien, aquí puedo desagrupar este de nuevo, seleccionar todo esto, ustedes agrupan Ahora si trato de mover un fotograma de aquí, supongamos que si selecciono esto, ahora quiero mover esto, ¿de acuerdo? O si solo estoy seleccionando la capa exterior, puedo mover esta de forma independiente. ¿Bien? Aquí. De la misma manera si hago clic aquí y puedo hacer clic en éste, básicamente puedo moverme también. Bien, para eso, déjame simplemente aumentar el tamaño. ¿Bien? Sólo voy a agrupar esta otra vez. Ahora, voy a tratar de escalar esto, ¿de acuerdo? Como pueden ver, estoy escalando esto. Si quiero escalarlo como correctamente, en el sentido proporcional, en ese caso, lo que puedo hacer es que pueda venir aquí, seleccionar esto, y dar clic en turno de control Entonces trata de mover esta casa por aquí. Se puede ver que va a aumentar proporcionalmente. ¿Bien? A lo mejor voy a tomar otra imagen, que la tenía aquí antes. Importa ahora toma esta tarjeta aquí. El carrito de compras está siendo seleccionado aquí, como puedes ver. Bien, a lo mejor voy a poner esta tarjeta por aquí. Y ahora básicamente voy a hacer zoom para que ustedes puedan entender mejor. Bien, así que como pueden ver, tengo esta tarjeta por aquí. Si quiero hacer algún cambio o editar cualquier cosa desde aquí. Primero, necesito dar click en esta. Y desde aquí ustedes pueden ver que puedo cambiar la proporción, pero quiero hacer más, ¿de acuerdo? En ese caso, haré doble clic aquí. Ya ves que puedo cambiar la talla, ¿de acuerdo? Pero como pueden ver, una vez que he hecho clic muchas veces, ustedes pueden ver aquí hay algunas opciones, ¿de acuerdo? Básicamente, si quiero aumentar o disminuir algún tamaño en particular a partir de aquí, si solo vuelvo de aquí, supongamos que si solo selecciono este extremo, ¿de acuerdo? Quiero cambiar algo a partir de aquí. ¿Bien? A lo mejor sólo voy a poner este de aquí. De la misma manera traeré este trato aquí. ¿Bien? Para que pueda hacer esto, bajar un poco este o simplemente. Comprueba o hazlo así. Esta es otra forma de cómo realmente podemos trabajar aquí. Bien, esta es una manera. Ahora si lo selecciono individualmente, bien, puedo dar click aquí, o simplemente seleccionaré todo este marco. Voy a seleccionar clic derecho. Y voy a seguir dando click en Opción de Grupo desde aquí. Bien, voy a dar click una y otra vez, voy a dar click en Grupo. Ahora ya no tengo opción de grupo aquí. Ustedes pueden ver que todos estos no están agrupados, supongo. ¿Bien? También puedo seleccionarlo individualmente. Aquí. Ahora no tengo la opción de grupo bajo. Tenemos que entender que esto es simplemente una cosa simple aquí. ¿Bien? Lo que puedo hacer es simplemente disminuir el tamaño aquí. Tal vez tome esta si quiero sumar alguna línea aquí. Bien. Entonces voy a añadir una línea aquí así. A lo mejor de la misma. Voy a copiar desde este lado. Bien, así que a lo mejor voy a hacer este clic en Alt y traer uno aquí. ¿Bien? Y voy a seleccionar este de aquí. Ustedes pueden ver básicamente cómo se ve realmente aquí. Así es como realmente se verá. También puedo cambiar el tamaño del trazo desde aquí. Bien, ven a la opción de frontera, cambia la frontera. Voy a tomar un cinco. Éste también. Voy a hacer clic aquí, Copiar. Yo sólo voy a pegar apariencia aquí. Yo sólo voy a pegar apariencia. Así es como realmente se verá mi icono. Si quiero añadir algo más, puedo hacerlo. Espero que ustedes hayan entendido cómo podemos trabajar realmente con las opciones. Bien, Básicamente puedo trabajar desde aquí, bien, en realidad puedo disminuir el tamaño a partir de aquí también. Aquí, ustedes pueden ver estas opciones. ¿Bien? Entonces así es como básicamente podemos evitar. O si quiero cambiar el color aquí, puedo cambiar el color aquí también. A lo mejor quiero tomar un rojo aquí, quiero tomar verde. ¿Bien? El campo, la frontera, bien, aquí. Así es como básicamente podemos evitar. Vuelve a la frontera, toma un color amarillo, elige uno, y tienes esto aquí también. También puedes agregar diferentes colores en este ícono en particular. Elige el color azul, a lo mejor voy a tomar un icono azul aquí. Bien, entonces este es mi carrito de compras, que se ve bastante diferente al momento en que he descargado este. Bien, así es como básicamente puedes trabajar con tu diseño. Supongamos que quiero poner esto o hacerlo como un solo grupo. Voy a seleccionar esto y dar clic en Control. Bien, ahora puedo mover este por ahí. Bien, ahora puedo moverlo por aquí. Acabo de copiar esta otra vez. Sólo voy a alejar un poco y voy a tratar de ver cómo se ve esto básicamente. Bien, entonces voy a éste. Puedo seleccionar esto y ahora puedo moverlo por aquí, ¿de acuerdo? O en vez de la opción de compra aquí, tal vez si acabo de borrar esto, solo puedo poner en esta. Yo sí tengo esto. Lo voy a poner aquí entre. Bien. Entonces así es como realmente podemos trabajar también. Pero ahora ya no quiero poner este logo aquí. Bien. Para eso, lo eliminaré. Voy a volver. Sí, espero que ustedes hayan entendido cómo pueden editar realmente su icono, sea cual sea el icono que sea. Bien, así que si voy al buscador de iconos, hay diferentes íconos entre los que puedes elegir. Bien, aquí puedo tomar cualquier icono y en realidad lo uso para mí mismo. Bien. Déjame descargar esta venta uno. Y otra vez, ven a mi X D desde aquí. Ahora en realidad puedo importar, bien, control de turno. Además yo también, puedo usar el control de turno. Voy a ser redirigido esta página aquí y aquí ustedes pueden ver que sí tengo el logo de venta también. ¿Bien? Este, quiero ampliar este proporcionalmente para ese turno de control Y yo seleccionaré esto, éste, podrías ponerlo en alguna esquina en alguna parte. ¿Bien? O en algún lugar de aquí. Para que podamos trabajar con todo esto también. ¿Bien? Si hago clic en esto y también puedo desagrupar este, ¿de acuerdo? Ahora básicamente puedo cambiar a partir de aquí, ustedes pueden ver, ¿de acuerdo? Entonces así es como básicamente podemos poner ustedes pueden ver así es como realmente podemos solucionar. ¿Bien? Pero voy a borrar éste por ahora. No quiero esto, espero que ustedes hayan entendido esta clase sobre cómo usar esta agrupación. Bien, entonces esta es una de las cosas principales como cómo podemos editar todos estos iconos que obtenemos. Bien, también les he enseñado sobre la agrupación, cómo básicamente pueden agruparse alrededor de la otra forma de importar cualquier cosa desde cualquier otro lugar. Supongamos que tengo aquí esta página de componentes. Solo puedo acercarme, moverme con mi herramienta de mano aquí. Bien, a partir de aquí, básicamente lo que puedo hacer es a lo mejor quiero este ícono para este ícono. Lo que puedo hacer es hacer clic en Control. Ahora vuelve a esta página aquí y tal vez selecciona esta página. Y ahora haga clic en el control V. Bien, entonces aquí ustedes pueden ver que sí tengo un componente aquí, ¿bien? Entonces este componente lo puedo poner aquí. O si quiero aumentar el tamaño, puedo aumentar el tamaño. Si quiero aumentarlo proporcionalmente, puedo hacerlo desde aquí ¿Bien? Así. Básicamente puedo aumentar el tamaño de éste también. ¿Bien? Este es básicamente un componente y solo puedo seleccionar esto de aquí. Básicamente puedo seleccionar la opción de grupo si quiero agrupar esta. Pero aquí puedes ver que esto consiste en todas estas cosas, ¿de acuerdo? Desde aquí se puede ver si quiero desagrupar componente, lo puedo hacer aquí Ahora ya ves que sí tengo este diferente. Esta parte es diferente. Puedo simplemente mover este por ahí, supongo que no quiero esto. En ese caso, lo que puedo hacer es seleccionar esta y también puedo eliminar esta. Así es como realmente podemos descomponer un componente. Solo ven aquí y cómo sabrás que este es un componente, básicamente algo de color verde. La forma en que acabo de mostrarles antes en algún momento, si ustedes quieren volver a verlo, así es como buscará el margen para un componente A partir de aquí, sólo puedo seleccionar este componente en particular, venir aquí y desagrupar componente, o el atajo para eso es el control de turno Para Mac, es Shift plus Command plus. Bien, voy a borrar. Bien, voy a borrar esto también. Aquí ustedes se pueden hacer. Voy a seleccionar esto, poner éste aquí. Y éste voy a borrar. Bien. Ahora aquí si quiero editar esto también, puedo hacer la edición también. ¿Bien? Así que sólo puedo acercarme. Cuanta mejor vista tenga, mejor manera podré hacer esto. Bien, entonces a partir de aquí quizá elija esto aquí. Yo me quedo con esto. Ven aquí. Sí, elige esta. Ven aquí otra vez. Y ahora ustedes pueden hacer algo así. Bien. Aquí como ustedes quieren hacer de esto algo así, ustedes también pueden hacerlo. ¿Bien? A lo mejor si disminuyo uno de aquí, esta es una forma de hacer las cosas. Espero que ustedes hayan entendido esta clase de cómo trabajar por aquí, ¿de acuerdo? Así es como realmente puedes hacer tu logo y puedes hacerlo en consecuencia. Si quieres usar estas opciones, siempre puedes usar estas opciones por ti mismo. Esto es sobre lo que he hecho. Bien, déjame regresar. Si quiero colocarlo en algún lugar en el medio, también puedo hacerlo. Bien, pero por ahora solo eliminaré este icono también. Entonces esta es una forma de hacerlo. Bien, entonces nos vemos a todos en la próxima clase donde aprenderemos sobre cómo comenzar con su prototipado Bien, entonces la creación de prototipos es básicamente como si me uniera a este icono con esta página o aquí si hago clic en este icono, me voy a mover a algunas otras páginas aquí Como sí tengo cuatro páginas, como pueden ver, sólo he empezado a hacer el trabajo aquí en la primera, Bien. Entonces también estaremos haciendo el prototipado para que ustedes entiendan cómo hacer su diseño IBX Bien. Hasta entonces, cuida de todos y nos vemos a todos en la siguiente clase. 8. Prototipos en Adobe Xd: Hola a todos y les damos la bienvenida a otro capítulo del tutorial de Adobe XD donde estamos aprendiendo sobre el diseño de UI UX Ahora estamos en nuestro capítulo número ocho y vamos a estar aprendiendo sobre prototipos en Adobe XD prototipos es básicamente conectar páginas con páginas de cómo será la apariencia Bien, entonces aquí en esta clase vamos a aprender sobre el prototipado Y también les voy a mostrar a ustedes diferentes formas de poner interacción entre sus marcos. Y también les voy a estar enseñando a ustedes sobre lo toda la animación ustedes pueden hacer usando eso. Bien, así que no perdamos el tiempo y empecemos con este capítulo de aquí. Entonces aquí ustedes pueden ver que estoy en mi espacio de trabajo y sí tengo cuatro páginas aquí. Bien, entonces les he enseñado a ustedes cómo hacer las páginas, así que de igual manera, hice estos marcos en particular aquí, bien. Para que ustedes puedan ver si quiero Como, bien, ahora todos estos están alineados. Entonces aquí se puede ver que sí tengo cuatro marcos, pero lo que quiero hacer es en la creación de prototipos, quiero conectar estas páginas entre sí Bien, entonces primero intentemos entender cómo podemos empezar a hacer eso o cómo podemos comenzar con la creación de prototipos Entonces aquí en este panel en particular, ustedes pueden ver al lado de la opción de diseño, sí tengo la opción prototipo y la tecla de atajo para eso es Alt más dos en nuestro teclado. Vendré a esta página de prototipos. Como pueden ver, cuando estoy en una página de prototipo y cuando hago clic en cualquier icono, tengo este tipo de letrero justo al lado de eso. Bien. Si hago clic en la página de inicio, también tengo esta de aquí. ¿Bien? Pero de la misma manera si voy al archivo de diseño, y si hago clic aquí aquí, pueden ver que no tengo la misma opción disponible aquí en el panel de diseño. Entonces iré a la opción prototipo. Otra vez. Aquí voy a poder conectarme con páginas. Bien, a lo mejor quiero conectar esta página de inicio en particular a esta. ¿Bien? Esta página aquí. Esta página en particular. Quiero conectarlo con esta y esta página con la última. ¿Bien? Aquí ustedes pueden ver que tengo todo esto aquí. Si os muestro ejemplo chicos de cómo se verá. Entonces iré al panel de vista previa de Dekstop si quiero previsualizarlo, pero iré a la vista previa del dispositivo desde aquí Bien, aquí como ustedes pueden ver, yo sí tengo el marco aquí. Bien, si acabo de hacer clic en esto, estoy en mi segunda página. Ahora si hago clic aquí, ustedes pueden ver esta es la tercera página. Esta es la última página ya que sí especificé cualquier cosa en particular. Entonces esta es la vista previa que voy a tener aquí. Bien, entonces aquí ustedes pueden ver que no puedo regresar. Y otra forma de lo que puedes hacer es desde tu teclado, simplemente puedes hacer click en el botón, los botones de flecha. Desde aquí estoy dando clic en el botón de flecha izquierda. Y puedo dar click en el botón de flecha derecha aquí, como ustedes pueden ver. Pero esto es solo lo básico de lo que puedes hacer aquí, ¿de acuerdo? Apenas lo muy básico. Si vengo aquí, si hago clic en esto, eliminar, eliminaré este. Yo también eliminaré esto. Yo también eliminaré esto. Bien, espero que ustedes tengan una idea de cómo es básicamente esto básicamente, yo también he eliminado este mensaje. Bien, pero solo quiero borrar esto. ¿Bien? No el mensaje aquí. Voy a venir aquí. Esta es la forma en que podemos empezar a trabajar aquí. Bien, espero que ustedes tengan una idea breve. Ahora les voy a contar algunas de las maneras más fáciles de hacer sus prototipos, Bien, una vez que esté aquí Ahora lo que quiero seleccionar es que quiero seleccionar esta opción particular Por. Y directamente quiero ir a la página de pago, ¿de acuerdo? Ahora bien, si hago clic en esta, y conectaré esta página con esta, ¿de acuerdo? Con la página de pago desde aquí. Como ustedes pueden ver bajo la opción Más Aprendido, voy a conectar esta página con esta de aquí. Como pueden ver, sí tengo el botón de inicio aquí. Voy a conectar la página. Esta, a lo mejor esta página de inicio. Lo conectaré con el primero. Ahora como pueden ver, tengo este icono aquí. Lo que puedo hacer es si quiero paginar también la misma característica, solo voy a copiar esta de aquí. Eliminar esto, ven aquí, voy a pegar este de aquí. Se puede ver una vez que me haya pegado, aquí también se está pegando la misma característica. ¿Bien? Como ustedes pueden ver, la misma manera, si vengo aquí, bien, en este botón en particular y solo quiero cualquier devolución que pueda hacer también. Bien, espero que ustedes hayan entendido lo básico de cómo pueden trabajar aquí en esta página. Bien, camino, este también para ir aquí, yo también vengo aquí, voy a, éste, voy a hacer clic en esto, voy a hacer clic en el control C, y voy a pegar el control V aquí. Bien, para que puedas ver la función aquí también. Bien, ahora déjame ir a la opción de vista previa desde aquí. Bien, aquí seleccioné sólo este botón, ¿de acuerdo? Y aquí ahora si hago clic en la opción Por, aquí, pueden ver que me están transfiriendo a mi página de pago. Si quiero volver de nuevo a mi página de inicio, lo que tengo que hacer es solo necesito dar click sobre este icono en la parte superior. Esta es una forma de hacerlo. Y ahora si solo me muevo y quiero ir de aquí a la página principal, y vamos a llegar a esta página aquí. De aquí también, puedo volver a la página principal ya que acabo de copiarla y pegarla, la misma función si tenemos tantas páginas y tenemos que hacer unas cosas como en cierto sentido hago prototipo o hago prototipos como si tengo 500, 600 fotogramas En ese caso, puedo usar este método que es bastante útil. Ahora volvamos a ver la vista previa. Si hago clic en la opción Más información aquí, puedes ver que puedo ir a la página del producto aquí. Bien, voy a hacer click en esto, voy a venir aquí. Voy a seleccionar esta opción por ahora. Y ésta me llevará a la última página. Bien, aquí sí lo tengo todo y espero que ustedes hayan entendido cómo funciona este prototipado Bien, espero que hasta tanto quede claro para todos ustedes. Ahora intentemos ver la animación. Lo que toda la animación podemos poner mientras hacemos prototipos. Bien, tu página simplemente saltará o rebotará para eso. Como ustedes pueden ver, sí tengo menú aparecido aquí en mi panel de control, como si tuviera todas estas cosas aquí Particularmente si yo, si hago clic, ustedes pueden ver donde está todo conectado. Si vengo a esta página aquí, ustedes pueden ver, si vengo a la página de pago aquí, pueden ver todo este forro o la unión. Bien, aquí ustedes realmente pueden manejar esto desde aquí. Si quieres agregar alguna otra, también puedes hacerlo. Bien, si toco, puedo meterlo en cualquier lugar que quiera. Bien, puedo cambiar la colocación. Ahora vamos a tratar de entender. Supongamos que con este botón más, va a venir aquí, pero quiero que venga en un estilo, ¿de acuerdo? Para eso lo que voy a hacer es a lo mejor voy a seleccionar esta, ¿de acuerdo? Este particular forro de aquí, se puede ver el modo de transición desde aquí, ¿de acuerdo? Aquí puedes ver diferente tipo de transición, bien, si hago clic en auto Animate. Y donde esta el destino, bien, De aqui. Además, si no quieren elegirlo o vincularlo desde aquí, ustedes aquí, bien, aquí. Como pueden ver, una vez que esté aquí en mi página de inicio aquí, pueden ver dónde quiero que esa página enlace, la página del producto, la página de pago, o la página del pedido realizado desde aquí. También, nosotros, chicos, podemos hacer eso. Tenemos aquí una opción para la facilidad hacia fuera, fuera, snap wind bound. Voy a mostrarles todo eso, ¿de acuerdo? Esta es otra opción que se llama el disparador. ¿Bien? Trigger es básicamente cómo se moverá tu app, ¿bien? Supongamos que he seleccionado este botón aquí. Si selecciono arrastrar, tengo que beberme el botón Y entonces sólo voy a pasar a la página siguiente o al siguiente lugar donde haya seleccionado. Bien, yo elegiré aquí. Déjenme mostrarles un ejemplo a partir de aquí. Bien, déjame disminuir el tamaño a partir de aquí. Déjeme mantener esto en una esquina. Bien, aquí ya que he seleccionado el auto animar. Y toca aquí. Si solo hago clic en esto, esto es simplemente flexibilizar. Bien. También puedo seleccionar la duración de cuánto tiempo quiero esa animación. Bien, supongamos que lo quiero 2 segundos, así que le daré 2 segundos. Vuelve a abrir la vista previa y haz clic en Más información. Así es como se verá básicamente, ¿de acuerdo? Se va a relajar así. Si quiero seleccionar este de aquí, supongamos ahora este forro, bien, o este unirse aquí, en ese caso aquí, se puede ver que está vinculado con la página de pago. Y voy a elegir la opción de disolver desde aquí. Y yo también elegiré el momento, ¿de acuerdo? Tomaré 0.5 segundos. Quiero una transición, ¿de acuerdo? No quiero dar ningún tipo de reproducción de audio o reproducción de voz durante eso. Si selecciono todo esto, necesito elegir un archivo de audio. Y todo lo que puedo hacer también. Porque en muchos lugares que ustedes podrían haber visto, como si van a la página siguiente, le dirán como una vez que hagan clic en un botón. Una vez que pasen a esa página, dirán la página número dos o bienvenidos a la página de pedidos. Bienvenido a Amazon. Bienvenido al Tesla, algo así. Bien, eso es lo que nosotros también podemos hacer. Bien, de aquí voy a venir y voy a ir a opción de auto animación A partir de aquí elegiré esto en lugar de aliviarme. Ahora voy a elegir en. Bien, volvamos a ver la vista previa. A partir de aquí, así es como vendrá. Bien, ahora veamos otras opciones también. Bien, yo hice esta. Ahora vamos a llegar a esta opción. Bien, me llevará a esta página. Ahora, voy a animar a éste. Les estaré enseñando toda la animación. Bien, Desde aquí puedes seleccionar la opción de disolver. De facilidad hacia fuera, tal vez elija snap. Bien, volvamos a ver la vista previa. Aquí se puede ver con un chasquido, estoy de vuelta en el mismo lugar, ¿de acuerdo? En vez de disolverse, si vengo a la opción de diapositiva derecha aquí, Si hago clic en rebotar, bien, ahora veamos la vista previa desde aquí. Aquí puedes ver que este es el rebote. Puedo seleccionar el momento desde aquí. Supongamos que si quiero 1 segundo, puedo dar click aquí. Y ahora da click en esta opción aquí, o ve al botón de vista previa. Ahora haga clic, puede ver la forma en que aparece mi página o la animación, es diferente. Bien, entonces espero que ustedes hayan entendido qué es el detonante. Bien, solo les voy a mostrar un ejemplo de drag. Supongamos que he escogido éste, quizá no. Este seleccionará éste. O voy a volver aquí. Sí, voy a elegir uno. Ahora seleccionaré en lugar de cualquier cosa y elegiré la opción de flexibilización De aquí entra y sale. Ahora voy a ir a la opción de vista previa. Ahora si arrastro, puedo ir a la página siguiente. Bien, pero aquí no aplicé lo mismo. Bien, si vengo aquí. Entonces esta es una forma de cómo puedo arrastrar esta cosa. Bien. Aquí también, elegiré drag. Y ahora estoy en esta página. Si lo arrastro con el ratón. Bien. Entonces aquí en este caso, tal vez he cometido algún error aquí, porque esto es bastante, sí, espero que ustedes hayan entendido aquí. Si solo necesito arrastrarme y si llego a esta página y si le doy esta de aquí, voy a poner drag, bien, veamos la vista previa. Bien, lo voy a arrastrar aquí. Vuelve aquí, arrastra, arrastra. Así es como básicamente podemos hacer este trabajo también. Bien, voy a borrar esto. Yo también eliminaré este. Bien, espero que ustedes hayan entendido hasta esto mucho de lo que podemos hacer. Espero que ustedes hayan entendido sobre el disparador de opción, sobre el tipo, como como quiero hacerlo para animar o quiero una superposición Si quiero dar alguna reproducción de see, cualquier reproducción de audio, a veces una vez que haces clic en cualquier cosa habrá un sonido. Si quiero agregar eso, puedo dar click en la reproducción de audio. Si quiero decir algo, puedo dar click en la reproducción de voz. ¿Bien? En ese caso, necesito subir ese archivo de audio aquí. ¿Bien? Esto es sobre el tipo, ¿de acuerdo? Y este es el destino. ¿Dónde quiero que termine mi página? Bien. Esta es otra opción llamada el desplazamiento. Bien. Si quiero fijar la posición mientras me desplazo, entonces solo podemos marcar esta Bien. Yo también tengo estas opciones de flexibilización Si no quiero ninguno, solo puedo seleccionar ninguno, no se aplicará nada, bien. Esta es una forma de cómo básicamente podemos hacer nuestro prototipado aquí Si quiero agregar esto, bien, agregue este, entonces puedo agregar como cualquier interacción. Si quiero agregar, puedo agregar haciendo clic en la opción más desde aquí. Espero que ustedes hayan entendido que en realidad hay tantas formas de hacer algo sencillo aquí en toda la aplicación, sobre todo en X D, esto es bastante útil y bastante saludable. Espero que ustedes hayan entendido cómo pueden comenzar a hacer sus prototipos Cómo también puedes hacer animación de prototipos al mismo tiempo. Cuídate de todos. En la próxima clase, vamos a estar aprendiendo sobre animación en AutoBxD ¿Bien? Estaremos aprendiendo más sobre animación. Cómo se puede animar, como cualquier objeto, supongamos que este objeto está aquí Una vez que llegue a esta página, simplemente dejará en alguna parte, o simplemente aparecerá aquí, o este botón en particular, simplemente caerá. Aprenderemos sobre la animación también después de esta clase en particular. Día a día, cuando vamos más adelante en la lección, la clase se está emocionando y espero que ustedes también estén entendiendo esta clase. Hasta entonces, cuídate y espera verles a todos en el próximo capítulo. 9. Animación en Adobe Xd: Hola chicos y les damos la bienvenida a otro capítulo del tutorial de Adobe X donde estamos aprendiendo sobre el diseño de UI UX. Entonces ahora estamos en nuestro capítulo número nueve y vamos a estar aprendiendo cómo puedes agregar animación en esta aplicación en particular. En la última clase les he hablado de la creación de prototipos. Y ahora en ese mismo marco de guerra, les estaré mostrando chicos cómo pueden hacer su animación. Cómo un objeto particular puede aparecer en tu pantalla por su cuenta. Una vez que solo vayas a esa página en particular, estaré mostrando cómo puedes seleccionar un objeto en particular o puedo desde la caja o incluso un botón, y animar aquellos en tu estilo en tu marco Bien, vamos, comencemos con este capítulo en particular aquí. Ahora, aquí como ustedes pueden ver, aquí estoy en el mismo espacio de trabajo. ¿Bien? En última clase les he enseñado sobre la creación de prototipos Bien, aquí sí tengo esta página con mi herramienta de mano. Lo que voy a hacer es simplemente alejarme un poco. Bien, con mi herramienta de mano, voy a moverme desde aquí. Ahora lo que voy a hacer es parar primero. Si quiero hacer alguna animación, qué voy a hacer aquí, como pueden ver este icono justo por aquí. Quiero que este icono simplemente caiga así. Cuando llego a esta página primera parada, necesito duplicar esta página desde aquí. ¿Bien? Hay muchas formas de duplicar usando los dos pueden duplicar, lo contrario solo puedo copiar esta, ¿de acuerdo? Voy a copiar esto y lo pegaré aquí con control V. ¿Bien? Aquí pueden ver que sí tengo esto. Ahora déjame acercar las dos páginas aquí, ¿de acuerdo? Ahora lo que quiero es que este icono esté aquí. Quiero que este icono venga aquí. Bien, esta es una forma de cómo podemos hacer eso. Primero tenemos que asegurarnos de que una vez que esté en esta página, primero seleccionemos este icono en particular. Aquí, su nombre es icono de flecha. Bien. Ahora otra vez, voy a venir a esta página aquí. ¿Bien? En esta página voy a seleccionar, bien. El nombre de éste también es icono de flecha. Ambos nombres deben ser similares para hacer que suceda o para que esto funcione. ¿Bien? Esta es la página uno del pedido realizado. Voy a nombrar esto como dos. Bien, tengo aquí las dos páginas. Quiero que mi animación se lleve a cabo aquí. Bien. Primero lo que voy a hacer es que sólo voy a mantener esta página aquí. Voy a conectar este con este de aquí. Bien, aquí en esta opción de acción. Por defecto, siempre permanece como transición. Pero voy a estar cambiando este auto animado que estaba ahí antes También puedo elegir la duración de cuánto tiempo quiero que sea mi animación. Bien, déjame tomarme 1.2 segundos aquí. Y ¿qué tipo de flexibilización en quiero? Bien, quiero que se relaje aquí. Bien, ahora intentemos ver el avance desde aquí. Bien, como estoy en esta página aquí, si hago clic en todo este icono, ustedes pueden ver que se mueve aquí, ¿de acuerdo? Esta es una manera de hacer esto, ¿de acuerdo? Si vuelvo de nuevo, si hago clic aquí, ustedes, simplemente se mueve hacia este camino. Bien. Espero que ustedes hayan entendido hasta tanto cómo pueden comenzar con su animación. Pero básicamente lo que quiero es que no tengo que hacer click aquí. Supongamos que estoy en mi página. Bien, sólo voy a ir a esta última página aquí. No quiero mi página eso, no tengo que presionar esta básicamente para conseguir esta animación por aquí. Bien, lo que voy a hacer es ahora, así que ahora pasemos a eso. Bien, para eso tenemos que asegurarnos de que no estamos conectando aquí con este icono. Bien, como el icono con la página. Entonces si vengo aquí, bien, a ver sólo puedo hacer este tipo de adelanto. Si hago clic en esto, vendrá aquí, aparecerá así. Pero lo que quiero, quiero auto animar, ¿de acuerdo? En esa jaula, necesito seleccionar toda esta página. Una vez que seleccione toda la página, moveré esta aquí, ¿de acuerdo? Ahora, una vez que seleccione esta página con esta, si llego a la opción trigger, ustedes. Yo también tengo la opción de tiempo. Bien, Pero supongamos que voy a borrar este de aquí. Voy a borrar esto aquí. Déjame conectarme con esta página ahora. Intentemos ver aquí en opción trigger, no tengo la opción de tiempo, pero para auto animar necesito hacer eso. Voy a borrar esto. Seleccionaré esta página de pedido uno. Selecciona esta página con esta de aquí. Ahora, una vez que venga aquí, puedo elegir la opción de tiempo. Bien, ¿cuántos segundos de retraso quiero? Bien, aquí como pueden ver, no voy a demorar aquí nada. Y sí tengo la opción de animación automática. Ahora sí tengo la duración aquí para 0.3 segundos, que voy a cambiar a 0.5 Bien, voy a elegir 0.5 aquí. Voy a hacer clic en Entrar. Ahora ven a esta página en particular aquí, y veamos el avance desde aquí ahora. Bien, ahora volvamos. Sí, iré a esta página. Voy a tratar de ver la vista previa. Si hago clic en el botón Por aquí, puedes ver que es solo auto animando aquí Bien, si vuelvo otra vez por y check out opción, voy a dar click aquí y podrás ver la animación automática desde aquí. Espero que ustedes hayan entendido esta parte en particular desde aquí. Con este, en realidad puedo elegir cómo quiero que aparezca esto como ¿quiero que aparezca? Yo también puedo hacer eso. Ven a esta página, ver la vista previa. Haga clic en ya. Aquí puedes ver la opción aquí. Bien, en la misma página, lo que puedo hacer es tal vez quiero que éste simplemente se desvanezca. Bien, ahora quiero que este icono se desvanezca. Vendré aquí, voy a la opción de diseño. A partir de aquí en opción de diseño, ustedes pueden ver que mi opacidad aquí es de 100 Lo que voy a hacer es que puedo cambiar mi opacidad. Algo como esto, así, en realidad puedo trabajar. Bien, ahora veamos el avance desde aquí. Bien, ven a esta página aquí. Ver la vista previa. Bien, voy a hacer click en esto. Así es como básicamente aparecerá. Bien, aquí puedo cambiar la opacidad. O si solo quiero rotar este, puedo rotar esto también. ¿Bien? Supongamos que quiero rotar esto, algo así. A partir de aquí. También puedo hacer la rotación. Bien, aquí sí tengo esto. Ahora, vamos a tratar de ver la vista previa desde aquí, ¿de acuerdo? Da click en la opción Por, así es como aparecerá, ¿de acuerdo? Si quiero verlo lento, entonces necesito administrar la opción de prototipo desde aquí. ¿Bien? Pero lo voy a seguir recto desde aquí. Ahora sí tengo esto, volvamos a ver la vista previa. A partir de aquí, espero que ustedes hayan entendido cómo pueden hacer su animación inteligente desde aquí. Bien, ahora si también quiero animar estos íconos de forma inteligente, Supongamos que quiero que este icono en particular caiga aquí Esta página particularmente, voy a mantener esta aquí. Ahora, básicamente puedo seleccionar de aquí. Supongamos que con esta página, voy a ir de nuevo al prototipo, aquí seleccionaré esto. Bien, a partir de aquí realmente puedo elegir, tal vez voy a crear otro prototipo aquí. Veamos la vista previa desde aquí. Bien, es hacer clic en A estas alturas, así es como va a caer. Bien, así es como podemos hacer esto. O si quiero poner alguna opción de rebote aquí, también puedo hacerlo. Supongamos que he seleccionado este de aquí. Tengo este fotograma clave aquí. Yo sí tengo las interacciones. Vendré aquí, escriba éste. Voy a tocar, ven a la animación automática aquí. Puedes elegir la opción de rebote desde aquí. Al mismo tiempo puedo poner Tres interacciones aquí. ¿Bien? Así es como básicamente podemos sumar. Si quiero añadir otro, puedo hacerlo desde aquí también. En este momento sí tengo dos. Bien, aquí están algunas de las acciones. Si quiero agregar alguna reproducción automática que ya les hablé chicos. Bien, ahora intentemos ver un adelanto desde aquí. Haga clic en ya. Aquí pueden ver que esto está cayendo por aquí, ¿de acuerdo? O supongamos que quiero que todos estos tres iconos solo aparezcan aquí en mi pantalla. En ese caso, lo que voy a hacer es volver a llegar a la opción de diseño. Esto, trae esto aquí. Ahora, sólo voy a tomar esto fuera de la pantalla aquí, aquí y aquí. Ahora, vamos a tratar de ver un avance. Así es como aparecerá. Nosotros también podemos hacer esto. Espero que ustedes hayan entendido esta clase de cómo hacer su animación inteligente. Bien, ahora voy a mostrar otra forma de cómo realmente puedes avanzar en la animación. Bien, para eso seleccionaré aquí este icono en particular. Bien. Como ya estoy en mi opción de diseño, voy a cambiar el empate de opacidad cien aquí Pero aquí en esta quiero que esto desaparezca. Bien, voy a disminuir el icono aquí. Ahora lo que quiero hacer es que quiero copiar esta página. Bien, antes de eso, déjame salir, solo voy a copiar esta página aquí. Sí tengo esta página aquí. Bien, así como pueden ver, simplemente se desvanecerá. Entonces déjenme mostrarles chicos y previsualizar cómo se desvanecerá. Bien, así es como se desvanece. Pero básicamente puedo trabajar con el cronometraje aquí. Bien, a lo mejor voy a aumentar el tiempo a 1 segundo. Ahora, vamos a tratar de ver la vista previa. Ven aquí. O simplemente muévete con mi mano para ver éste. Da click en esto y así es como aparecerá. Se ve bastante rápido Otra vez, voy a venir aquí, toca esto. Este es de 1 segundo. Yo sólo voy a hacer dos, 2 segundos aquí. Sí, esta está bien. Supongo que así es como va a aparecer aquí. Ven aquí y selecciona esto. Ahora, solo borra uno de aquí. Bien, voy a borrar esta de aquí. Ahora, vamos a ver. Bien, aquí sí tengo este segundo, seleccione esta página, vea la vista previa. Da click aquí, ustedes pueden ver que desaparece así. Bien, ahora como he creado otra página aquí, bien, ahora lo que voy a hacer es importar un icono aquí. Bien, desde archivo, iré a la opción de importación. En opción de importación, ustedes pueden ver que sí tengo SVG. Aquí está mi icono como ustedes pueden ver aquí. Bien, entonces seleccionaré de aquí. También voy a disminuir el tamaño de ese icono en particular. Nuevamente, vaya a la opción de diseño desde aquí. A partir de aquí. Básicamente con turno de control y con tu mouse, solo puedes disminuir su tamaño de acuerdo a ti mismo. Bien, ahora sí tengo esta marca aquí. Lo que va a pasar es que, como sí tengo esta de aquí, una vez que llegue aquí, ésta desaparecerá en esta pantalla en particular. Este solo aparecerá aquí una vez hecho esto. Bien, déjame conectarme, ven a la opción de prototipado, coloca esta y conecta esta página con esta Aquí puedes ver el intrigger. También tienes el tiempo. Bien, a lo mejor voy a demorar aquí tal vez 1 segundo. Y voy a hacer clic en Entrar aquí. Ahora voy a tratar de ver el avance desde aquí. Bien, ahora veamos el avance como ya lo he dicho. Bien, ven aquí a esta página. Haga clic aquí, ustedes podrán ver la animación aquí. ¿Bien? O simplemente empecemos desde el principio, bien, Selecciona esta página aquí para ir a la opción by. Y a esta página de pago, una vez que haya terminado con la compra. Aquí puedes ver la animación. Bien, entonces aquí pueden ver que mi pedido ha sido recibido, y aquí hice la animación. Espero que ustedes hayan entendido cómo pueden realmente hacer un nivel avanzado de animación de su trabajo aquí Como pueden ver, aquí sí tengo tres tableros de arte. Bien. Puedes tener 20, puedes tener 15. Si tienen tantas animaciones, ustedes pueden hacer eso usando esta opción en particular. ¿Bien? Entonces espero que ustedes hayan entendido sobre esta animación en detalle ahora. Bien, les voy a decir algunas de las cosas de los problemas que ustedes podrían enfrentar mientras trabajan con mesas de trabajo aquí Bien, voy a venir aquí, ir a mesa de trabajo. Quiero seleccionar o hacer mesa de trabajo desde aquí. Supongamos que sí tengo esto. Duplicaré este solo con Al. He duplicado esta mesa de trabajo. Ahora, aquí sí tengo dos páginas. ¿Bien? Ahora, supongamos que quiero crear una caja rectangular aquí. Déjame llenar esto con un color rojo. Ahora lo que quiero hacer es con mi herramienta de selección, voy a duplicar esta de aquí también. Pero lo que quiero es que quiero poner esto afuera aquí. Ahora quiero hacer prototipado, ¿de acuerdo? Yo quiero hacer el prototipado, ¿de acuerdo? De aquí vendrá aquí si elegimos así. Ahora si tratamos de ver el avance aquí, ustedes pueden ver tener cualquier cosa aquí. Bien. Entonces así es como se anima automáticamente, pero no debemos seleccionar o mover estas cosas dentro o fuera antes de que ya esté ahí Bien, ahora veamos la vista previa. Así es como se verá básicamente, ¿de acuerdo? Pero la forma correcta de hacer esto, lo mismo solo es si muevo este después de hacer el prototipado Supongamos que hice este de aquí, bien, voy a borrar todo. Empezó desde el principio, ¿de acuerdo? Como sí tengo este de aquí, como pueden ver sí tengo esto ahora después de ir a la opción de prototipo, después de mover este de aquí, y tal vez simplemente borraré esto ahora si quieren que se vaya desvaneciendo Bien, puedo hacer eso. ¿Bien? Yo también puedo cambiar la opacidad Ir a la opción de diseño. Cambia la opacidad aquí. Básicamente podemos hacer esto, o tal vez cambiar la opacidad, cambiar la capacidad a partir de aquí Ahora veamos la vista previa. Bien, entonces así es como se verá básicamente. Espero que ustedes hayan entendido estas diferentes partes. Cómo básicamente puedes animar todo si quieres hacer alguna transición Para que ustedes puedan hacer la transición desde aquí. ¿Bien? He seleccionado este de aquí. Y supongamos que aquí voy a cambiar la opacidad de esto primero. Déjame copiar este, control C, ven aquí, control V, bien. Ahora voy a hacer el prototipado desde aquí, como pueden ver. Ven aquí, ve a la opción de diseño, cambia la opacidad. Ahora desde aquí, si voy a la opción de reproducción aquí, se puede ver la animación. Ahora se ve bien, pero si pongo esto directamente afuera o antes de hacer el prototipado, no aparecerá aquí Bien, esta es una forma de hacerlo. Desde aquí ustedes pueden ver también puedo usar las opciones de la herramienta Pin de aquí. Bien. Como si pudiera simplemente hacer mi propio logo o cualquier cosa como tal. Yo también puedo hacer todo esto desde aquí. Esta es una manera de hacer esto, ¿de acuerdo? Entonces si vengo aquí, puedo hacer esto desde aquí también. Volvamos a ver el avance desde aquí, así es como básicamente se verá. Espero que ustedes también hayan entendido esta clase, lo que todo lo que pueden hacer aquí en esta clase. Te he contado todo sobre la animación, todos los problemas que ustedes pueden enfrentar durante la animación, y cuáles son las formas avanzadas también. Bien, espero verlos a todos en la próxima clase donde aprenderemos a compartir y comentar. Supongamos que envió su trabajo a su cliente, entonces su cliente quiere comentar y dar su vista previa. O tus comentarios diciéndoos chicos desde el intercambio, como cómo puedes empezar a compartir, cómo pueden agregar comentarios y todo en detalle. Así que nos vemos a todos en el siguiente tutorial. Hasta entonces, cuídate y adiós. 10. Cómo compartir tu marco y comentar: Y B uno. Y les damos la bienvenida a todos a otro tutorial de AutoBXT donde estamos aprendiendo sobre el diseño de UI UX Ahora estamos en nuestro capítulo número diez y aquí vamos a aprender cómo puedes compartir tu marco de alambre. Bien, en la última clase, les he enseñado sobre la creación de prototipos, creación de su marco de alambre Ahora te voy a estar mostrando como puedes compartirlo. Supongamos que sí tienes a tu cliente o tal vez alguien que quiera previsualizar tu trabajo. Solo quieres darles para que revisen como tu mentor, puedes darles eso y decirles que comprueben cómo se ve realmente. Les estaré mostrando chicos desde el principio cómo pueden empezar a compartir y también en el comentario, que podrán ver como editor. Bien, empecemos con esta clase ahora. Ustedes ya pueden ver que estoy aquí en mi página, ¿de acuerdo? Este es el mismo espacio de trabajo donde estaba creando mi página aquí, bien, la página de la aplicación móvil. Lo que voy a hacer es que quiero compartirlo. ¿Bien? Justo al lado del prototipo, puedes ver la opción de compartir. Una vez que hagan clic en esa opción de compartir, ustedes pueden ver algunas de las cosas aquí. Bien, están los ajustes de enlace aquí. Yo sí tengo los enlaces. Si quiero crear un nuevo enlace, puedo hacer eso solo necesitas administrar. Eso es. Bien, aquí hay una opción, aquí hay otra opción, que es la configuración de vista. Esto básicamente significa que quien estés compartiendo con tu trabajo con lo que ellos podrán hacer, ¿ podrán diseñar la revisión o también podrán desarrollar como si se les permitiera editar Como ellos estarán presentando tu diseño o pruebas de usuario o personalizarán la experiencia del espectador. Puedes hacer click aquí si quieres personalizar lo que todos ellos podrán hacer. ¿Se les permitirá poner comentarios o quieres que lo abran en pantalla completa e incluyan especificaciones de diseño? Puedo hacer esta desde aquí. Lo que voy a hacer es dar click en este, Design Review. Quiero obtener una revisión de mi diseño. Aquí puedes ver un pequeño adelanto de lo que va a hacer esta opción está aquí, justo debajo. Bien, este recibirá comentarios sobre tu diseño y prototipo. Aquí puedes compartir este con el desarrollador. Ahora has compartido tu diseño con el desarrollador. Ahora intentarán hacer el sitio web o la aplicación. Bien, entonces esto es para presentación y esto es para probar tu prototipo. Entonces voy a dar revisión de diseño. Y ahora lo último aquí es el acceso al enlace. Bien, entonces básicamente aquí, esto significa que ¿quiénes podrán acceder todos a este enlace y cuál será su trabajo? ¿Bien? El primero es que cualquiera con el enlace podrá acceder a mi diseño particular aquí. Bien, entonces este espero que ustedes hayan entendido, y ahora el segundo solo es gente invitada. Bien, así que si hago clic en solo personas invitadas, bien, así puedo invitar a esas personas de aquí, y solo esas personas podrán obtener mi diseño de aquí. También puedo seleccionar cualquier contraseña. Supongamos que seleccionaré una contraseña, y después de eso compartiré la contraseña y también el enlace en el clic. Una vez que establecen la contraseña o una vez que ponen la contraseña, entonces pueden obtener una vista de mi trabajo. Bien, solo voy a seleccionar aquí enlace, acceder a cualquiera que tenga el enlace. Ahora voy a crear un enlace, y aquí ustedes pueden ver que están creando un enlace público aquí. Bien, ahora está tomando poco tiempo. Entonces aquí ustedes pueden ver que tengo mi enlace aquí. Bien. Entonces aquí puedes ver algunas opciones. Si quiero copiar el enlace, puedo dar click aquí. Y aquí sí tengo otra opción como copiar Embedded Cut. Si quiero copiar el código incrustado, puedo hacerlo desde aquí. La otra opción es compartir en las manos. Bien. Si quieres compartir este proyecto en el sitio web de la mano, solo puedes compartir tu proyecto en las manos. Este es un prototipo público como donde puedes obtener diferentes tipos de marco de artículos de aquí. Si quieres actualizar tu enlace, puedes actualizar el enlace desde aquí. Bien, entonces a lo mejor voy a venir aquí en Chrome. Voy a pasar éste y voy a dar click en Entrar. Bien, me está llevando al marco de guerra. Ahora aquí estoy, y sólo está cargando la obra. Bien, entonces aquí pueden ver que sí lo tengo en una página de aquí. Básicamente puedo ver cómo funciona realmente. Bien, aquí hago clic en la biografía. momento voy a seleccionar esto y puedo ver la animación de lo que han hecho. Bien, Y voy a dar click en. El Robert otra vez. Bien, no seleccioné en esto. Regresa aquí. Sí, estoy vuelta otra vez a esta página. Haga clic aquí. Desde aquí, ustedes pueden ver el avance total aquí. Bien, así es como tu cliente o tu mentor pueden ver tu trabajo y también pueden comentar aquí arriba. Esta es la forma básica de cómo pueden comentar. Bien, si están diciendo cambiar el color de fondo, me están diciendo que cambie el color de fondo. Y puedo simplemente enviarla desde aquí. Como ustedes pueden ver desde aquí, básicamente puedo agregar un comentario. Hay dos formas en las que puedo iniciar sesión con un AdoBid. Esto es más profesional. Para que puedan iniciar sesión con un Adobe ID y pueden agregar un comentario aquí. Pero si quiero añadir un comentario como invitado, puedo escribir Darren, puedo continuar desde aquí Bien. Aquí puedes ver lo que ha dicho Darren tienen mensaje que Por favor, cambie el color de fondo aquí. Aquí puedes ver en mi Creative Cloud aquí puedo ver menú pop up que muestra nueva actividad en la clase D de Adobe Eggs, que he nombrado mi clase. Aquí puedes ver a Darren comentó sobre la clase Adobe Eggs. Bien, desde aquí básicamente puedo ver, si quiero anclar este comentario, también puedo anclar este comentario. Bien, ahora como estoy aquí, puedo añadir comentario aquí. Puedes ocultar anotaciones desde aquí. Se pueden comentar en consecuencia. Bien, si quieres ver la opción de resolver, si quieres aclarar cuáles son los comentarios para hoy y todos ustedes pueden ver y pueden ver quiénes son todos sus revisores Bien, esta es una forma de cómo tu cliente básicamente puede revisar tu trabajo. Te pueden decir si necesitas cambiar algo o si el trabajo está bien, ellos también te pueden apreciar. ¿Bien? Esto es por parte del lado del cliente, ¿de acuerdo? Así es como su cliente verá su trabajo y podrá comentar en consecuencia. Pero si vienes aquí, ¿cómo vas a resolver ese problema? Bien, ven aquí en la opción de diseño, ve al prototipo, y desde aquí ustedes básicamente pueden tener acceso a los comentarios. Bien, ahora tal vez venga de aquí otra vez, voy a venir aquí, bien, vaya a las opciones de diseño ya que me están diciendo que cambie el color de fondo. A lo mejor voy a seleccionar esta página. A partir de aquí, vaya a la opción de llenado. Puedo elegir el color en consecuencia. Bien. Como pueden ver, puedo elegir el color en consecuencia. Una vez que lo mío es resultado como lo he hecho todo, lo que puedo hacer es aquí, volver a la opción de compartir. Una vez que hayas terminado de actualizar un enlace, comparte este enlace de la misma manera. Bien, puedes ver esos comentarios desde tu caja de Creative Cloud. Bien, a partir de aquí recibirás una notificación. Bien, desde aquí se puede ver cual es el comentario en X D, cambiar el color de fondo. A partir de aquí puedo, sólo puedo despedir el. De lo contrario, puedo volver a ir a este expediente en particular. Bien. A lo mejor quiero ir a esta página aquí. He creado mucho. Muchos. Puedo venir aquí en esta página y puedo responderle a Darren que, sí, ya terminé con su palabra con solo ingresar Bien. Como sí inicié sesión, no tengo la opción de ver. Bien. Espero que ustedes hayan entendido como cómo básicamente pueden compartir, cómo pueden actualizar su enlace, cómo pueden obtener comentarios y también cómo pueden editarlos una vez que obtengan esos comentarios. Bien, entonces en la próxima clase estaremos aprendiendo cómo podemos básicamente hacer un moodboard y qué es un moodboard Bien, entonces aprenderemos sobre cómo hacer nuestro propio moodboard. Hasta entonces, cuida de todos y espero verlos a todos en la próxima clase. 11. Coloración en Adobe Xd: Hola a todos, y darles la bienvenida a todos a otro capítulo de Adobe X Diutorial Aquí estamos aprendiendo sobre el diseño de UI UX. Y estamos en nuestro Capítulo número 12. Así que aquí en nuestro Capítulo número 12, vamos a estar aprendiendo todo sobre la coloración en esta aplicación. ¿Bien? Entonces les estaré diciendo chicos cómo pueden crear su propia paleta de colores, cómo podemos jugar con sus colores, cómo podemos hacer su propio degradado para cualquier botón o cualquier color de fondo. Y además te estaré mostrando desde donde todos ustedes pueden obtener su inspiración de color. Bien, entonces vamos a estar aprendiendo sobre todo eso en este tutorial en particular. Entonces comencemos con esta clase. Entonces ahora lo que voy a hacer es, como pueden ver, estoy aquí en mi espacio de trabajo. Ahora, primero, les mostraré chicos cómo pueden crear su propia paleta de colores. ¿Y por qué usas básicamente paleta de colores? Bien, supongamos ahora quiero crear mi propia página web, y ahí he seleccionado un tema de color. Bien, supongamos que aquí en Moodboard, les he mostrado chicos, estos son algunos de los colores Y ahora lo que voy a hacer es tomar las cajas de aquí o caja de colores, ¿de acuerdo? Supongamos que quiero hacer algo así. ¿Bien? Así que déjame acercarme a eso. Y supongamos que quiero usar esta coloración en mi página web. En ese caso, lo que voy a hacer es primero arriba, voy a crear una caja aquí. Bien, he creado esta caja. Y ahora usando la herramienta Cuentagotas, lo que voy a hacer es seleccionar un color en particular Supongamos que quiero este color, y si, tengo este color, este va a ser mi color primario. Bien. Ahora aquí sí tengo este color primario. Con esta herramienta, simplemente duplicaré esta capa. Bien, he duplicado esta capa desde aquí. Lo que voy a hacer es llegar a la opción de relleno y voy a cambiar la intensidad del color. Como pueden ver, he vuelto a cambiar la intensidad del color. Ahora selecciona esta otra vez, copia esta aquí. Ahora también voy a cambiar la intensidad de esta caja en particular. Bien, ven aquí a la opción de llenar. Tal vez este color o algo en la oscuridad, ¿de acuerdo? Así es como realmente podemos hacer nuestra propia paleta de colores. Bien, ahora otra vez, toma esta y vamos a repetir el proceso de cuantos conjuntos de color queremos. Básicamente depende de nosotros. Bien, Todos lo pegan aquí. Ahora, ven a éste y cambia el relleno de aquí. A lo mejor quiero un poco oscuro. Bien, ahora sí tengo esta paleta de colores. Supongamos que desde aquí quiero tomar tema de color de esta imagen también. Bien, en ese caso, lo mejor voy a venir un poco de este lado. Bien, voy a crear una paleta de colores aquí. Sólo voy a repetir el mismo proceso, crear una caja aquí. Bien, ahora con tu cuentagotas para mantener aquí esta herramienta cuentagotas Ahora desde aquí puedes seleccionar un color. Bien, a lo mejor he seleccionado este color. Ahora lo que puedo hacer es que ahora puedo copiar esto, o simplemente puedo hacer un duplicado de éste. ¿Bien? Voy a hacer un duplicado de éste. Ahora, puedo cambiar la intensidad del color a partir de aquí. A partir de aquí. Como pueden ver, estoy cambiando de nuevo la densidad. Repita el mismo proceso. Supongamos que quiero un color particular aquí de este cuentagotas dos, tal vez pueda algo aquí Bien, esta es la más oscura. De nuevo con Al. Duplica esta capa y ahora cambia la intensidad a partir de aquí. ¿Bien? A lo mejor algo oscuro, cambiar el posicionamiento de aquí. Bien, yo también tengo esta paleta de colores. Bien. Ahora básicamente podemos agrupar a éste y movernos. Supongamos que quiero quedarme con este de aquí. Bien, Esta es otra paleta de colores. Supongamos que esta va a ser mi primaria, y esta va a ser mi segunda paleta de recolor Cuantos colores quieras usar en tu página web, chicos pueden agregarlo o apilarlo. Espero que ustedes hayan entendido cómo pueden crear su propia paleta de colores. Ahora les estaré diciendo chicos cómo pueden crear su degradado de color. Supongamos que ahora vengo aquí y voy a crear una caja aquí. En esta casilla en particular, lo que voy a hacer es que voy a llegar a la opción de llenar aquí. Bajo la opción de relleno, ustedes pueden ver en la parte superior yo sí tengo una opción. Bien. Voy a soltar el menú. Bien, aquí puedes ver si quiero tomar algún color sólido. Yo puedo hacerlo desde aquí. Como ustedes saben de aquí, puedo cambiar la intensidad tanto como quiera. Esta es la herramienta cuentagotas. Desde aquí en realidad se puede guardar el color. ¿Bien? Ahora, permítanme llegar primero al gradiente lineal. ¿Bien? Así es como se ve un gradiente lineal. ¿Bien? Voy a seleccionar éste. ¿Bien? De este lado lo haré, este de aquí, puedo cambiar el color. ¿Bien? Supongamos que quiero volver a tomar este color. Yo elegiré esta . Y de este lado, quiero un color diferente aquí. Se puede ver que esta es la combinación tanto de los colores aquí, el verde y el rojo. Si quiero agregar un color diferente en cualquier lugar, puedo agregar un color diferente como. Bien, puedo cambiar el posicionamiento y puedo agregar tantos colores como quiera. Depende de cuál se verá mejor. Y también puedo cambiar el posicionamiento desde aquí. Bien, déjame seleccionar algunos colores diferentes. ¿Bien? Seleccionaré otro color aquí. ¿Bien? Así es como básicamente puedes crear tu propio gradiente. Puedes poner todo lo que quieras. También puedes cambiar la opacidad como ya te dije. Déjame llevarme esto aquí. terminé con el gradiente y así es como básicamente puedes trabajar aquí. En realidad se puede cambiar este. Particularmente volver a la opción de campo. Y a partir de aquí, si quieres cambiar esto de aquí, puedes seleccionar cómo fluirá el color, ¿bien? Básicamente, si quiero mover el color así y qué parte tendrá qué cosa me está mostrando aquí mismo, he creado un degradado. Este fue el ejemplo de gradiente lineal. Pero veamos ahora cómo básicamente puedes crear uno radial. ¿Bien? Seleccionaré otra casilla aquí. Ahora ven a la opción de llenar. De nuevo, bajo la opción de relleno, tengo este gradiente radial, ¿de acuerdo? Vendrá en forma radial. Esto también es lo mismo. A lo mejor voy a elegir un color rojo. Voy a cambiar un poco la opacidad. Ahora voy a seleccionar este será de color verde. Bien. Desde aquí aquí se puede ver este es el rojo afuera. Yo sí tengo el verde aquí. ¿Bien? Puedo cambiar el posicionamiento también si quiero o simplemente puedo agregarle más colores. ¿Bien? Como pueden ver, puedo cambiar la opacidad de esa Esto es en radial. la misma manera selecciono cuánto color y qué colores necesito. Voy a venir aquí. Bien, voy a seleccionar otro aquí. Bien, voy a poner otro color aquí. Voy a seleccionar éste. Espero que ustedes también hayan entendido sobre lo radial. Así es como puedes, si estás haciendo algún logotipo o cualquier diseño, ustedes pueden hacer eso. También puedo cambiar esta . Puedo hacerlo alrededor. También puedo rotar esto si quiero. Bien, supongamos que quiero rotar este. Puedo rotarlo según mi deseo con mi herramienta de selección. Voy a mover este de aquí. Les he enseñado a ustedes cómo crear su propio gradiente aquí también. A ahora voy a ver sobre el último gradiente que vas a hacer. Déjame tomar elipse o lo haré esta. ¿Bien? Una forma de polígono también. Crearé un polígono aquí, lo moveré aquí y me quedaré con este Ahora, seleccione esta herramienta de la opción de campo. Ven al gradiente angular desde aquí. la misma manera ustedes básicamente pueden elegir qué color quieren. Si quiero agregar más colores, puedo agregarlo desde aquí. Bien, voy a añadir más colores. Voy a añadir algunos más. Así es como básicamente podemos crear este gradiente. Sí, espero que ustedes hayan entendido esta clase de cómo ustedes pueden hacer su propia paleta de colores. Cómo puedes crear tu propio degradado de color. Bien. Particularmente en la coloración, no hay tal cosa que necesites poner éste, necesitas poner este color en particular para esa cosa. No hay nada como tal. Pero siempre les recomendaré a ustedes que revisen el trabajo de otros, como cómo están usando sus colores en sus páginas web para que ustedes puedan inspirarse. Y por eso el mood board es bastante importante. Bien, entonces ahora vamos a mi Chrome y les voy a mostrar chicos de donde ustedes pueden tomar algunas de las ideas de color. Bien, si ustedes están usando su gradiente desde aquí, ustedes básicamente pueden ver que estos son algunos gradientes, bien, que se están usando mayormente aquí Ustedes pueden ver cuáles son los gradientes que la gente básicamente usa y ver aquí ustedes Ahora la pregunta que ustedes podrían tener es, bien, veo que todos estos colores son finos y lo suficientemente buenos. Pero la cosa es cómo puedo tomar estos colores si quiero este color en particular aquí, cómo lo voy a conseguir en mi espacio de trabajo. Bien, aquí ustedes pueden ver que un código está escrito. Estos se llaman el código de color. Y voy a copiar este código de color en particular desde aquí, e iré a mi desfiladero X. Supongamos que quiero obtener el mismo color, puedo una caja aquí y venir a mi opción de campo, o la opción de colorear aquí. Ustedes pueden ver que sí tengo un código que le dije que luego les contaré sobre esto chicos. En ese caso, lo que puedes hacer es simplemente venir y pegar ese código de color en particular aquí. Bien, entonces voy a borrar esto primero. Ahora pegarlo. Aquí estoy teniendo algunas dificultades para pegar esto. ¿Bien? Voy a tomar esta copia aquí en el huevo T, sólo podemos pegar ese color en particular. ¿Bien? O solo necesito llevarme esta. Bien, no el hash tech. Puedo hacer click aquí. Suprimir esto. Ahora puedo pegar esto. O también puedo hacerlo de forma manual. Como si veo qué, ¿99? Entonces voy a llegar a la X, D, D nueve. Bien. Y puedo dar click en Entrar aquí. Ustedes pueden ver el color particular que sí tengo aquí, mi banqueta, E. Voy a volver aquí otra vez. Bien. Haré clic en Entrar aquí. Usted tiene el color particular. Ustedes no pueden simplemente elegir nada. ¿Bien? Estos son códigos, básicamente, si quiero crear una paleta de ésta, en realidad puedo hacer de la misma manera como lo hacía antes. Bien, ven aquí, cambia la intensidad. A lo mejor dos de esta copia esta otra vez, cambian la densidad de esto a esto. Ven aquí, toma uno. Yo sí tengo mi paleta de colores aquí. Bien, puedo usar esto como mi otra paleta de colores. Siempre debemos mantener los colores que siempre estás usando. Espero que ustedes hayan entendido el uso de colorear, cómo básicamente pueden colorear aquí. Si quieren agrupar esto, ustedes pueden venir aquí, clic aquí, y pueden dar clic en Grupo. No. Si muevo este, se moverá en consecuencia. ¿Bien? Esta es la paleta de colores. También puedo nombrarlo también. Bien, de las cajas puedo ir y nombrar este archivo. ¿Bien? Ahora, supongamos que aquí tengo este color en particular. ¿Bien? Ven a la opción de llenar. De esa opción de relleno, básicamente puedo elegir esta. ¿Bien? Tengo esto de esto, hecho puedo guardar este color. ¿Bien? Si hago clic en éste y vengo aquí, se guardará. Esta paleta de colores en particular se guardará. Se trata de colorear aquí en esta clase. En la siguiente clase, les estaré contando cómo pueden jugar con las imágenes y cuáles son las diferencias de usar imágenes en la creación de su propia página web o desarrollar su propio diseño móvil. Bien, entonces nos vemos a todos en la siguiente clase. Hasta entonces, cuídate y adiós a todos. 12. Imágenes en Adobe Xd: Hola a todos y les damos la bienvenida a otro capítulo del tutorial de OBX Bien, así que aquí mientras estamos aprendiendo a diseñar UX, estamos al final de este tutorial. Y después de esto solo les estaré mostrando un proyecto de cómo pueden crear su propio diseño. Bien, ya les he mostrado sobre la aplicación móvil, cómo pueden obtener un marco bajo de cinco hilos. Ahora puedes llenarlo de acuerdo a ti mismo. Recomiendo muchos trabajos como he hecho yo. Pero también les estaré mostrando un proyecto y también les estaremos dando proyectos de clase. Bien, aquí ahora vamos a estar aprendiendo cómo puedes usar las imágenes. ¿Bien? Este es nuestro último capítulo, que es el capítulo número 13. ¿Bien? Imágenes. Aprenderemos cómo puedes hacer enmascaramiento, cómo puedes usar tu herramienta de lápiz mientras usas imágenes. Empecemos de nuevo con esta clase aquí, vuelta en el mismo espacio de trabajo. Ahora aquí como pueden ver, estoy aquí en este espacio de trabajo. Entonces ahora sólo voy a tratar de subir algunas imágenes de aquí. Iré a la opción de importación. De importar iré al archivo de recursos, bien, O iré a algunas de mis capturas de pantalla que sí tengo aquí. Voy a bajar aquí y estas son las pocas imágenes que tengo, ¿de acuerdo? Lo más básico es que solo puedes arrastrar y soltar. De lo contrario solo puedes importar. Pero lo que pasa con la importación es que ustedes pueden ver que viene en un tamaño total aquí, ¿de acuerdo? El tamaño es bastante grande aquí, ¿de acuerdo? Como ustedes pueden ver. Si me alejo para que ustedes puedan ver, este es el tamaño de la imagen. Pero lo que puedo hacer es simplemente disminuir el tamaño de la imagen a partir de aquí. Supongamos que esta es la página web. Puedo disminuir el tamaño en consecuencia, y puedo poner este de aquí. ¿Bien? Antes de eso voy a disminuir el tamaño. Desde aquí. Puedo cambiar de mi teclado y va a cambiar el tamaño en consecuencia Bien, supongamos que si mantengo esta encima, y ahora selecciono ambas capas. Ahora lo que puedo hacer es si selecciono esta capa aquí, y puedo mandar esta a la parte de atrás. Ahora puedo disminuir el tamaño de esto aquí. Yo sí tengo esto aquí. Yo también tengo mi imagen. Bueno, ya no puedo ver. Esta es una forma de cómo básicamente puedes hacer esto. ¿Bien? Simplemente puedes tomar cualquiera de las imágenes como puedes ver. Cambia el ancho o la altura desde aquí. Se puede cambiar el posicionamiento de la imagen. ¿Bien? Esta es una forma de enmascararlo. Supongamos que quiero que esta imagen esté aquí primero. Lo que tengo que hacer es seleccionar esto. Ven aquí ahora a enmascarar esto otra vez, a lo mejor voy a tomar una imagen diferente de arriba aquí, bien. O vaya a la opción de archivo importar. También puedo hacer click control de turno además vengo aquí, lo mejor voy a esta imagen. Bien, Desde aquí seleccioné esta imagen. Voy a importar esto, pero el tamaño es demasiado grande. Lo que puedo hacer, puedo volver a disminuir el tamaño en mantener esta imagen aquí. Ahora lo que voy a hacer es seleccionar ambas capas. Bien, mi caja de abajo también está seleccionada. Ahora lo que puedo hacer es que básicamente puedo agrupar esta o simplemente puedo desagrupar estas cosas también Bien, supongamos si grupo ahora sí tengo esta capa separada aquí. Se puede ver que esto no va a salir, bien. Esta es una forma de hacerlo. Aquí ustedes pueden ver, bien. Ahora también puedo disminuir el tamaño y tratar de encajar aquí. Una forma básica de hacer esto es aquí. Tengo este seleccionar ambas capas. Ahora ustedes pueden venir aquí. Y ustedes pueden seleccionar y tratar de hacer de esto un componente. Bien, esta es una manera, o simplemente puedo enmascarar esta con una forma. Si acabo de aumentar esta, mi imagen también va en aumento. Ahora esto está dentro de una forma, y de la misma manera ustedes pueden traer cualquier imagen aquí abajo. Supongamos que quiero controlar turno I. Bien, tengo esta página aquí otra vez. Vendré aquí y quiero poner una imagen. Puedo seleccionar Importar. Y aquí ustedes pueden ver que sólo voy a hacer clic en Shift, disminuir el tamaño. Guarda esta imagen aquí. Desplazar, disminuir el tamaño. Guarda esta en alguna parte de aquí. Ahora podemos seleccionar ambas capas y usar esta máscara con forma. Desde aquí. Básicamente podemos realmente mantener la imagen de cómo queremos. Si queremos hasta tanto, puedo poner esto mucho y tú puedes hacer el enmascaramiento desde aquí. Esta es una forma básica de cómo puedes hacer enmascaramiento y usar las imágenes en consecuencia. ¿Bien? Estas son algunas opciones. Y desde aquí también se puede cambiar la opacidad, ¿de acuerdo? Si quieres cambiarlo aquí mismo, aquí, tienes esa opción. ¿Bien? Básicamente también puedes cambiar las fronteras. ¿Bien? Supongamos que quiero tomar un borde amarillo, quiero tomar este tres. ¿Bien? Puedo hacer esto desde aquí. Espero que ustedes hayan entendido cómo pueden usar las imágenes. Existen diferentes formas de usar las imágenes. Supongamos que si vengo aquí y tomo otra imagen. Supongamos esta imagen de aquí, control C. Voy a pegar esta imagen aquí, o voy a tomar esta imagen de aquí. Bien, esta imagen en particular, lo que quiero hacer es con mi pluma para primero voy a acercar. Ahora solo quiero mantener esta forma aquí desde aquí. Yo quiero hacer la conformación desde aquí. ¿Bien? Yo sólo quiero esta parte. No quiero los antecedentes. En vez de eso, quiero poner fondo verde aquí. Bien. Básicamente puedo hacer todo eso aquí mismo. Yo sí tengo esto, lo he hecho hasta tanto. Bien. Ahora lo que puedo hacer es básicamente poder seleccionar este fotograma en particular. Puedo delinear los trazos, ¿de acuerdo? Puedo esbozar aquí este trazo en particular. Como pueden ver, básicamente puedo seleccionar de aquí. De hecho puedo cambiar la frontera. Puedo fortalecer la frontera. Seis, Sí, aquí ustedes pueden ver. Y también puedo tomar una imagen en particular. Bien, vendré aquí, haga clic aquí, y también puede seleccionar Marcar para exportar. Simplemente puedes seleccionar una parte particular de la imagen si llego a otra imagen. Entonces déjame borrar esta. Les estaré mostrando chicos en una imagen sencilla. Bien, déjame subir aquí o aquí. Esta imagen sólo voy a copiar y la voy a pegar aquí. Bien, aquí sí tengo una imagen. Solo voy a aumentar el tamaño con mi pluma para suponer que solo quiero, uh, esto. ¿Bien? Quiero tomar esto solo de esta imagen en particular aquí. ¿Bien? Este es el esquema. ¿Bien? Entonces ahora lo que quiero hacer es que quiero tomar la marca, ¿de acuerdo? Yo solo quiero obtener solo esta opción de marca de aquí. En ese caso, lo que básicamente puedo hacer es que pueda éste para exportar. Bien, esta opción en particular aquí, es como básicamente podemos tomarlo y marcarlo y simplemente quitarlo y poner cualquier otro fondo aquí. Espero que ustedes hayan entendido sobre las imágenes. Ahora les voy a mostrar chicos cómo básicamente pueden tomar una imagen y cómo pueden exportar esa. Supongamos que he tomado esto y he marcado éste como exportación. Ven aquí en la opción de archivo, exporta esto. Y si quieres seleccionar todas las mesas de trabajo, puedes seleccionar todas las mesas puedes seleccionar todas las mesas Y se puede ver el tamaño de exportación. Voy a tamaño de página web esta mesa de trabajo. Y donde quiera guardar esto, tal vez solo lo guarde en mis descargas aquí, solo puedo exportar los activos desde aquí. Ahora si voy a esta página aquí, bien, entonces déjame venir aquí, ir a las descargas. Aquí puedes ver mi mesa está siendo exportada en mi escritorio Así es como los chicos podemos seleccionar realmente la mesa de trabajo en particular Aquí puedes ver todas estas páginas, cuadro por cuadro, se está descargando. ¿Bien? Así es como básicamente puedes descargar para obtener una vista previa de tu trabajo. Bien, así es como ustedes pueden, espero que ustedes hayan entendido todo este tutorial, cómo pueden trabajar en esta aplicación en particular y hacer su propio diseño. En la siguiente clase, les estaré mostrando chicos haciendo un proyecto en la página web, cómo pueden diseñar su propia página web, cómo pueden colorear, hacer el prototipado todos juntos Nos vemos a todos en la siguiente clase. Hasta entonces, cuídate y adiós a todos. 13. Proyecto de clase 1: Hola a todos, y les damos la bienvenida de nuevo al proyecto de la clase Atop X D. Aquí, este es nuestro proyecto de clase número uno. Ahora diseñaremos nuestras propias mesas de trabajo para aplicaciones móviles. Y vamos a estar haciendo prototipo en consecuencia. Entonces básicamente ustedes necesitan hacer sus propias mesas de trabajo de diseño ¿Bien? Tal vez crear cuatro a cinco y después de ese prototipo esos en consecuencia. Utilice el método de facilidad de salida, diferentes tipos de transiciones y también diferentes tipos de efectos. Bien, veamos qué es todo lo que necesitas hacer en esta clase. Aquí, como puedes ver, el nombre del proyecto de clase es diseñar tus mesas de trabajo de aplicaciones móviles y hacer el prototipado Bien, puedes ver la descripción, lo que he escrito. Esta es una aplicación móvil en Adobe XD que implica la creación de mesas de trabajo, el diseño de interfaces de usuario y la creación de prototipos de interacciones le ofrecerá una gama de herramientas para ayudarle a través de este proceso y crea una aplicación móvil fácil de usar y visualmente atractiva Bien, aquí ustedes pueden ver cuáles son los diferentes pasos que ustedes van a seguir. Primero, necesitas recolectar todos los iconos y paletas de colores necesarios y diferentes tipos de tamaños de fuente para tu mesa Después de eso, necesitas crear tu propio diseño en todas las mesas de trabajo, bien. Simultáneamente, se pueden crear cuatro mesas e ir a la opción de prototipado y hacer el prototipado Les he enseñado a ustedes dónde se lleva a cabo el prototipado. Si ustedes tienen algún problema, ustedes siempre pueden referir el tutorial mínimo, usar cuatro mesas de trabajo, bien, para crear el enlace Al menos crea cuatro mesas y también usa animación en las mesas de trabajo, que incluyen animación inteligente y también la animación básica Lo último será, copiar el enlace de tu archivo en particular y subirlo en nuestro panel de proyectos. Después de esta clase, tendrás un diseño de aplicación completamente funcional que puedes verificar desde la opción de vista previa. Y será un diseño interactivo bien definido y probado por el usuario que servirá como base para el proceso de desarrollo. Bien, veamos cómo se hace esto. Como pueden ver, estoy en mi espacio de trabajo, y ahora desde esta opción de prototipo, vendré aquí después de eso. Ustedes pueden ver una vez que haga clic en alguna cosa en particular aquí, aparece este tipo de icono, que ya he mostrado en el tutorial de esta página. No seleccionaré toda la página, seleccionaré este botón en particular. Si hago clic en este botón en particular, seré redirigido a esta página Aquí, puedo cambiar la transición. ¿Bien? Voy a dar auto animar aquí Voy a cambiar el momento. Ustedes pueden hacerlo de acuerdo a ustedes mismos. ¿Bien? Ustedes tomen diversas acciones. Si quieres elegir algún archivo de audio, voy a estar haciendo este como Tap. Después de eso, esta página en particular, a lo mejor voy a seleccionar esta. Y ésta, la vincularé a la primera página. Yo haré lo mismo. Éste. Ustedes deberían vincularlo entre sí. Les he hablado diferentes atajos que pueden usar aquí también. ¿Bien? Entonces esta es una forma de hacerlo. Ahora voy a enlazar esta página en particular, aprende más opción aquí. Voy a conectar este con esta página aquí. Bien. Entonces como pueden ver, yo he hecho éste. Ahora lo que voy a hacer es, como esta es la animación inteligente ya en mi tutorial, os he mostrado chicos cómo hacer la animación inteligente. Bien, ven aquí o selecciona todo el archivo aquí. Después de eso, seguir adelante. Este de aquí, selecciona la opción de tiempo, y no voy a retrasar nada. Bien, después de eso seleccionaré esto también, como toda la página desde aquí, no ningún icono en particular. Y voy a dejar caer esta, tal vez aquí me lleve dos o 1.5 segundos. Bien, 1.5 segundos. Voy a hacer clic en Entrar aquí, voy a dar animación automática. Básicamente, así es como se verá y ustedes pueden comprobarlo desde el panel. Bien, entonces déjame ir primero a esta página desde aquí. Bien, así como pueden ver, ustedes pueden ver los vínculos entre eso. Si ustedes quieren cambiar algo desde aquí, pueden hacerlo. Bien, vamos a esta página. Haga clic en esta opción de vista previa. Permítanme dar click en esta opción por ahora aquí. Aquí va a esa página. De nuevo, estoy teniendo algunas dificultades llegando a esta página a finales de esto. Ahora otra vez al prototipado de aquí. Ahora ya pueden ver que vine aquí en esta opción. Si hago clic en esto por opción, simplemente redirigiré aquí. Bien, ahora vamos a ver. Como puedes ver la animación aquí también. Espero que ustedes hayan entendido como básicamente pueden hacer el prototipado Pero este diseño, como lo he hecho yo mismo, pido chicos que lo hagan ustedes mismos. Este particular diseños que ustedes pueden poner si ustedes tienen algún problema. ¿Qué pasa con la animación inteligente he enseñado chicos todo en detalle en la clase, Crea una página así Después de eso, lo último que ustedes van a hacer es que ustedes pueden subir aquí, Haz clic en esta opción para compartir. Bien, todo esto ya están seleccionados. Bien, puedes actualizar el enlace desde aquí. Bien, ustedes no necesitan actualizarlo, crearán un enlace para ustedes y ustedes pueden simplemente copiar este enlace y compartir este enlace en nuestro panel de proyectos. Bien, aquí solo puedes darle como reseña y puedes simplemente ponerlo a cualquiera con el enlace o solo a personas invitadas. Así es como ustedes pueden compartir su trabajo conmigo, que yo pueda revisar su trabajo. Bien, gracias a todos por unirse a este tutorial de proyecto de clase y estaré esperando que ustedes envíen su proyecto lo antes posible. Estoy muy interesado en ver tu trabajo y tu diseño de cómo diseñas tu página web. Bien, así que nos vemos en cualquier siguiente tutorial. 14. Proyecto de clase 2: Hola a todos. Y ahora este es el momento de nuestro proyecto de clase. Y ahora vamos a estar haciendo nuestro proyecto de clase número dos aquí. Necesitas hacer tu propio moodboard y necesitas hacer tus propias paletas de colores Bien, entonces para eso primero, necesitas importar algunas imágenes, y después de eso, crear tus paletas de colores Alguna duda que tengas al respecto, ¿cómo hacer eso? Los tengo cubiertos en mi tutorial. Ustedes pueden volver a recomendarlo por ustedes mismos. Bien, entonces veamos cuáles son todos los pasos que debes seguir en esto. Aquí arriba, ustedes pueden ver el nombre de la clase. Project es crear un moodboard y hacer tus propias paletas de colores Bien, aquí puedes ver la descripción. ¿Cuál es la descripción creando un moodboard y por qué no hacer un moodboard y una Bien, para que ustedes puedan ver aquí está. Tener herramientas integradas que hacen conveniente crear, administrar e implementar estos elementos de diseño de manera efectiva. Bien, El primer paso que seguirás es que necesitas obtener tu inspiración de color de diferentes sitios web que te mostré. Te he enseñado diferentes sitios web como Hads Awards, algo así A partir de ahí, ustedes pueden obtener sus inspiraciones de color. Después de eso, puedes importar esas imágenes en la página. Posteriormente, apilas todos esos en consecuencia y creas paletas de colores de al menos tres colores Y ajusta todos aquellos en una mesa de trabajo, exporta esa mesa de trabajo seleccionada a tu sistema, Y después de eso, despliega tu mesa de trabajo en un panel Después de esta, obtendrás un conjunto de imágenes y pocos conjuntos de paletas de colores dentro de tu mesa de trabajo, lo que será bastante atractivo visualmente Desde aquí, también puedes hacer paletas de colores personalizadas, creando tu moodboard Mejora el proceso de diseño general, lo que conduce a resultados de diseño más cohesivos, visualmente atractivos y efectivos para su proyecto Te ayuda a mantenerte organizado, inspirado y alinearte con los objetivos de tu proyecto una vez que crees este moodboard en particular y también algunas paletas de colores Bien, permítanme ahora mostrarles cómo se hace esto. Ahora estoy aquí en mi espacio de trabajo, y desde aquí iré a la mesa de trabajo Voy a estar creando una mesa de trabajo aquí. Bien, en esta mesa de trabajo, voy a estar tomando diferentes tipos de formas Bien, déjame crear formas aquí. Bien, tal vez más como esto. En realidad puedo este de aquí. Y ahora puedo duplicar estas capas también. Bien, desde aquí sólo puedo duplicar esto. ¿Bien? Yo también duplicaré esto. Así es como básicamente puedo duplicar, o si quiero crear muchas más cajas, puedo crearlas en consecuencia. Bien, aquí voy a estar poniendo las paletas de colores. A lo mejor me quedaré con esto aquí. Sólo voy a poner unos colores aquí y una imagen, o simplemente voy a crear eso justo afuera. Bien, no te preocupes Con eso también, simplemente voy a crear otra caja rectangular aquí. Ahora a partir de aquí, lo que voy a hacer es la forma más básica en la que intentaré importar primero las imágenes aquí en esta casilla en particular. Aquí. Bien, voy a importar, si vengo aquí, archivo paso, vaya a archivos de recursos. Desde aquí puedes tomar diferentes imágenes. Bien, puedes bajar las imágenes. Sí tengo seis imágenes por ahora, que si importo esta, sí tengo todas estas imágenes aquí en mi caja. Bien, si me alejo, ustedes pueden ver aquí, están todas estas imágenes que sí tengo aquí. Básicamente lo que puedo hacer es simplemente seleccionar una imagen en particular, solo puedo bajar los tamaños. Entonces ustedes realmente pueden hacer zoom en esta imagen y luego traer esta aquí en The mood board. Bien, supongamos que si me quedo aquí, si sólo voy arriba aquí, ustedes tendrán el tablero por aquí en alguna parte. He creado un tablero. De lo contrario voy a crear otro tablero de arte a partir de aquí. A lo mejor voy a seleccionar el tamaño de la mesa de trabajo aún así. Ahora sólo puedo poner estas imágenes aquí. Tal vez disminuya el tamaño. Todas estas imágenes que tengo aquí, puedo guardarme así. Todos estos marcos que he tomado mis inspiraciones de color, en realidad puedo aumentar el tamaño de esto también, acuerdo a mi deseo aquí Además, sí tengo diferentes imágenes, que puedo ponerla aquí. Bien, disminuye el tamaño. Ven aquí en las esquinas. Y disminuir el tamaño a partir de aquí también. Puedo importar más imágenes. Supongamos que si quiero importar aquí todo este frame, que he creado. ¿Bien? Todo este marco. Puedo seleccionar este marco desde aquí, y puedo poner éste también. Bien, puedo hacer eso, pero ahora solo voy a dilatar esto aquí Ustedes pueden ver que aquí sí tengo cosas diferentes, así que puedo moverlas allí también. Bien, las diferentes opciones aquí, puedes ver estas son imágenes a tamaño completo que básicamente puedo copiar para mí también. Voy a mantener este de aquí en una esquina. A lo mejor voy a aumentar el tamaño de éste también. Selecciona las cosas extra y muévalas a un lado por aquí. A lo mejor puedas aumentar el tamaño así. Puedes ponerlo aquí. Así es como puedes hacer un mood board por ti mismo. Ahora intentemos entender cómo vas a crear una paleta de colores. Bien, ven aquí, selecciona una caja. Supongamos que quieres inspirarte en el color desde aquí. Acércate a la herramienta cuentagotas aquí. Y con la herramienta cuentagotas, selecciona este color de la misma manera aquí Entonces copia esto. Ahora ven aquí en la caja de campo y cambia la intensidad del color, de la misma manera. Repita este proceso de cuatro a cinco veces. Ahora selecciona esta casilla aquí, y cambia la intensidad un poco más. ¿Bien? De nuevo, ven aquí, selecciona esta casilla, ven a ésta, y cambia la intensidad. Así es como ustedes básicamente pueden cambiar la intensidad. Cuántas veces ustedes quieren, ustedes también pueden hacer esto. ¿Bien? Supongamos que quiero más colores claros en comparación con esto. Ven aquí y ve a algún lado por aquí. Así es como puedes crear tus propias paletas de colores. Ustedes crean como esta paleta de colores, tres de ellos, ¿de acuerdo? Como puedes ver aquí son diferentes colores. También puedes experimentar con diferentes colores. Así es como puedes hacer tu propio mood board. Lo último será que selecciones los dos marcos aquí. Después de eso, ven aquí, ve a la opción de archivo. De aquí ir a exportar, y seleccionas el seleccionado. Exporta esos. Como se puede ver, va a exportar. Ahora bien, si van al sistema, si van a la opción de descargas aquí, ustedes pueden ver, bien, primero creo que necesito agrupar esto. Bien, voy a agrupar esto. Seleccione esta única moodboard. Ahora puedo marcar este para exportar uno aquí. Exportar, seleccionado. Entonces así es como básicamente puedes exportar tu mesa de trabajo. Aquí, de vuelta otra vez. ¿Bien? Y aquí pueden ver que sí tengo mi mesa de trabajo, así es como ustedes pueden tomar, exportar su mesa de trabajo y también su paleta de colores de la misma Bien, así como pueden ver aquí, sí tengo las paletas de colores Agrupe los abajo y solo los seleccionados. Y aquí, así es como ustedes básicamente pueden exportar. Sí, yo también tengo las paletas de colores, así que ustedes pueden enviarme su trabajo así y dejarlo caer en nuestro panel de proyectos Y estaré muy feliz de revisar su trabajo y darles las instrucciones correspondientes a ustedes. Bien, hasta entonces, cuídate. Todos, espero verlos a todos en el próximo tutorial. 15. Proyecto de diseño de página web: Hola chicos, y les damos la bienvenida a todos a otro tutorial de Adobe XD Entonces esta va a ser la última lección básicamente donde es solo una clase de proyecto. Les he dicho todo sobre X D, cómo pueden usar la aplicación en particular, cómo pueden comenzar con el diseño de UI UX. Entonces aquí en esta clase les voy a mostrar desde cero a ustedes cómo construir una página web de diseño. Les voy a estar enseñando todo eso, chicos. Y comencemos con la clase y empecemos a diseñar una página web. Bueno, de nuevo en la misma página, ¿de acuerdo? Y ahora desde aquí estaré creando un arte. ¿Bien? De aquí seleccionaré la mesa de trabajo, y como pueden ver, tengo diferente tamaño webdectop Seleccionaré el tamaño 1920, 5,080 de aquí, y lo trasladaré a algún lugar por Bien. Sí, esta está bien. Ahora, la forma más básica voy a seleccionar una imagen. Bien, para eso he guardado una imagen. Lo que voy a hacer es cubrir esta página con imagen, después escribiré mis cosas y la editaré de acuerdo a mí mismo. Bien, desde aquí iré a la opción de importación. Importar. Iré a mis descargas. De descargas, he descargado una imagen de píxeles. Voy a poner este de aquí con mi turno. Voy a disminuir el tamaño de este cambio de imagen en particular aquí, voy a disminuir el tamaño. Bien. Yo sí tengo este marco en particular aquí. Como pueden ver, sí tengo esto aquí. Bien. Básicamente puedo disminuir el tamaño ahora si quiero. Bien, pero lo guardaré hasta tanto. Ahora, mira la capa de esta está buena para ir, para mí comenzar mi trabajo aquí. Bien, A lo mejor voy a seleccionar esto si quiero que sea un componente o si quiero editar en el Photoshop, puedo hacer eso. Bien, básicamente puedo trabajar con eso también. Si quiero moverlo, puedo simplemente moverlo de acuerdo a mí mismo. Bien, ahora ya está listo el fondo de mi página web. Ahora lo que tengo que hacer es que necesito editar esta página en particular aquí. Para eso, lo que voy a hacer primero arriba, iré al cuadro de texto aquí en el cuadro de texto, voy a crear un cuadro de texto particular aquí donde voy a estar poniendo lo que voy a escribir aquí Supongamos que aquí voy a venir y voy a aumentar el tamaño. Le voy a dar un 30 y entrar. Bien, voy a volver aquí. Herramienta de selección. Con esta herramienta de selección, sí tengo esta página aquí, crear un cuadro de texto. ¿Cómo debo ponerle nombre a éste? Bien, déjame nombrar esta caja 45 casa para todos. Tengo aquí esta página web críticar. Da click en esto y ahora cambia el tamaño desde aquí. Supongamos que quiero tomar 45, y aquí lo he tomado en este tamaño. También puedo el tamaño desde aquí, o puedo escalarlo desde aquí. Bien, si vengo aquí, voy a aumentar el tamaño de la caja. Seleccione de nuevo este texto. Ahora lo que voy a hacer es a partir de aquí vendré haga clic en Entrar, seleccionar. Esto básicamente depende de tantas cosas de como quieras. Lo voy a poner en el centro. Ahora quiero cambiar el tipo de texto. Bien, el estilo que quiero cambiar. Bien. A lo mejor voy a tomar algo. Me llevaré el Collaborate básico. Me gustaría que mi trabajo fuera bastante sencillo. Bien, entonces a lo mejor voy a tomar la negrita cursiva, y voy a cambiar el tamaño a 90. Sí, también necesito aumentar el tamaño de la caja. De aquí, seleccione esta. Yo sí tengo este de aquí. Selecciona este, y elige un color de acuerdo a ti mismo. Bien, supongamos que lo haré. Uh, algo, que pasa con ese color en particular aquí. Bien, voy a tomar este color, Supongamos que también seleccionaré el borde de este color como rojo o algo oscuro. Pero aquí voy a cambiar el borde a dos y voy a hacer clic en Entrar aquí, se puede ver que el logo está listo aquí. Ahora puedo poner diferentes imágenes o diferente tipo de iconos si quiero poner para iconos. Voy a ir otra vez a este de aquí. Entonces en el buscador desde aquí, puedo tomar muchos tipos de ilustraciones, muchas pegatinas como quiera. Bien, a lo mejor voy a escribir a casa. Voy a hacer clic aquí. Aquí puedes ver que hay muchas tres animaciones D las cuales puedo tomar y ningún enlace de vuelta. Y quiero los libres de aquí. Podría tomar algún tiempo cargar aquí. Como pueden ver, puedo elegirlo en consecuencia. Supongamos que quiero llevarme este, pero estoy buscando los gratuitos. Iré a las ilustraciones de la opción de pegatinas. Así es como básicamente podemos tomar bien. Las imágenes, pero están tratando de cargarme alguna caja aquí, pero quiero alguna versión gratuita de eso. Bien, sólo me llevaré esta. Ahora estoy descargando el vil. He descargado. Regresa a mi X D. Ven aquí de esto, voy a importar este de aquí. Ustedes pueden tener esto. Bien, a lo mejor con turno solo pueda aumentar el tamaño de este. Bien, seleccionaré esto y traeré esto aquí. Bien. Y a partir de aquí lo que puedo hacer es seleccionar el tamaño del borde como diez. Y voy a hacer clic en Entrar aquí. Puedes ver que sí tengo un ícono aquí. Bien, selecciono esto aquí y solo agruparé este. Yo sí tengo esto ahora aquí. Esta ya está hecha. Y todo lo que quiero poner aquí, Bien, Si quiero poner alguna imagen o como diferentes imágenes sobre el grupo. Bien, puedo poner aquí, supongo que quiero poner como el menú o algo como tal. De nuevo, crea el cuadro de texto o simplemente trae tu cuadro de texto aquí mismo. Crea un cuadro de texto aquí. Voy a disminuir esto a 30. Voy a hacer clic en Entrar aquí, ven aquí y escribo Menú. Ahora lo que voy a hacer es con esta, puedo crear diferentes cajas. ¿Bien? Supongamos que con Al, voy a crear una caja diferente aquí. Supongamos que quiero tener cinco cajas aquí. Como cinco opciones, ¿de acuerdo? Aquí, voy a seguir aquí, pero más adelante les estaré explicando cómo ustedes básicamente pueden aquí. Tengo cinco opciones arriba aquí, ¿de acuerdo? Ahora lo que voy a hacer es escribiré, bien, primero voy a escribirnos, al siguiente escribiré trabajo. Entonces iré a este menú y nosotros, ¿qué debo escribir aquí sobre nuestro trabajo? Y escribimos aquí eventos. Vendré aquí y escribiré, bien, todas estas opciones son bastante diferentes aquí. Lo último que escribiré es unirse a nosotros. Estoy tratando de hacer una página de ONG aquí, ¿de acuerdo? Me aseguraré de que el espaciado entre todos estos sea bastante apropiado, ¿de acuerdo? Voy a mantener un buen espaciamiento entre cada uno y todo. Aquí sí tengo. Estoy alineando también en el mismo lugar. Bien. Sí. Como pueden ver ahora sí tengo un buen espaciado entre esos y pueden entender que esto es como, este es el menú ba desde donde básicamente pueden trabajar alrededor. Bien, ya terminé con este y ahora puedo crear a partir de aquí. Quiero dar un breve de lo que se trata esto. Puedo usar un subtítulo si vengo aquí y quiero crear otra caja aquí Entonces voy a crear un cuadro de texto aquí. Ahora en este cuadro de texto, escribo, escribiré , inspirando el cambio y la esperanza. Este va a ser mi subtítulo, ¿de acuerdo? O el lema de aquí. Sólo voy a cambiar el tamaño de este tal vez a 60. Voy a hacer clic en Entrar Ahora, puedo cambiar el color desde aquí también. Supongamos que quiero un contraste de este color y quiero revisar también el borde. Bien, tal vez la frontera. Voy a tomar algo en verde. Voy a cambiar este trazo a dos está bien. Bien. Voy a mantener este aquí con mi herramienta de selección. Lo seleccionaré, lo colocaré en consecuencia. Ahora, también puedo crear una caja aquí. Bien. Una caja para una caja de búsqueda. Bien. O yo, cualquier icono. Ven al buscador de iconos aquí y voy a crear un botón de búsqueda aquí. Bien, voy a venir aquí. Como pueden ver, sí tengo diferentes botones de búsqueda aquí. Puedo tomar uno de aquí, puedo hacer esto, y otra vez, volver a mi archivo XD desde aquí, básicamente puedo poner ese en alguna parte de aquí Bien, vuelve al archivo de importación. De aquí voy a importar esto y voy a escalar éste hacia abajo. Éste, a veces es bastante difícil simplemente mover esto alrededor. Sólo voy a mover este alrededor de este círculo en particular aquí. Ahora sólo puedo disminuir el tamaño de esto. Sí, sí que tengo. Sí, este es el botón de sobretensión de aquí. Básicamente puedo poner algunas imágenes de esta ONG en particular. ¿Bien? El nombre de la ONG es el hogar de todos. El eslogan es inspirador de cambio y esperanza. Bien, Ahora bien, si quiero crear una página, supongamos aquí quiero crear cuadros particulares. Como quiero que llenen sus nombres. Aquí, Bien, aquí. Y la misma caja. Duplicaré éste. Bien, ven aquí, revisa la herramienta de selección. Haga clic en esto. Éste. Este de aquí puedes seleccionar. Tomaré otra caja aquí, y aquí estaré escribiendo con mi caja de texto aquí. Escribiré a Don. Bien, seleccione este texto en particular. Con esto, traeré este aquí. En el medio. También voy a cambiar el color. Bien, a lo mejor voy de color negro. No quiero fronteras. Bien. Quiero que eso sea amplio. Yo me quedaré con este aquí. A lo mejor sólo puedo aumentar a negrita. Ahora voy a copiar la misma caja aquí. Bien, Ahora voy a seleccionar esto. Con esta, la llevaré aquí. Aquí, aquí. Entonces básicamente lo puedo poner así. ¿Bien? Entonces a partir de aquí, así que ahora voy a escribir nombre aquí. Voy a escribir número de teléfono, monto, dirección de correo electrónico, correo electrónico. Bien. Entonces sí tengo este de aquí, chicos pueden ver mi página web está lista aquí. Bien. Puedo agregar algunas cosas más aquí, donarnos desde aquí. Se puede ver que aquí sí tengo las opciones de texto, pero si tomo aquí el negrita Metálico, pueden ver así es como se verá básicamente. Bien. Aquí puedes ver que mi página web está casi terminada, pero quiero poner algunos de los botones aquí. Bien. Volveré a venir aquí. Bien, Aquí quiero iniciar sesión botón, iniciar sesión o voy a ver cuál se ve mejor. Bien, a lo mejor pueda tomar esta. Este se ve bastante bien. Voy a descargar el formulario SVG desde aquí. Ven a mi X aquí. Ahora ustedes podrán ver eso. Lo volveré a importar. A partir de aquí lo haré. Como pueden ver aquí, sí tengo ese botón en particular. Bien. Haga clic en Shift, y después de hacer clic en Shift, ustedes pueden venir aquí un poco. Seleccione aquí. Una vez que hagas clic en esta, te llevará a otra página aquí. Bien, entonces espero que ustedes hayan entendido. Y ahora también puedo importar algunas de las imágenes. Como a lo mejor voy a poner aquí y voy a escribir nuestra campaña de campaña. Selecciona esto, pon esto en alguna parte de aquí. Mueve este, un poco arriba debajo de este. Voy a añadir algunas de las imágenes. Bien, aquí, quiero agregar algunas imágenes para eso, voy a seleccionar esta casilla en particular aquí. Primero, volveré a duplicar esta caja. Bien, aquí también he seleccionado una caja en particular aquí de nuevo. A partir de aquí, voy a alinear esto con la misma línea aquí. Ven aquí, ve a la opción de importación. Desde la importación, estaré importando algunas de las imágenes. Bien, de aquí otra vez seleccionaré supongamos esta imagen. Voy a importar este, pero la imagen es demasiado grande. Con mi turno, disminuiré el tamaño de la imagen e importaré otro archivo también. Debería haberlo hecho de inmediato, pero a lo mejor voy a tomar esta imagen. Voy a importar este de aquí. Bien. Sí, sí tengo esta imagen. Voy a tratar de traer este aquí y éste de aquí. Ahora, de nuevo me acerco a mi lugar de trabajo aquí. Ahora como pueden ver, sí tengo ambas imágenes, pero lo que quiero hacer es darle de comer esto por dentro. ¿Bien? Supongamos que sí tengo esto y éste. Ahora lo que puedo hacer es a lo mejor voy a seleccionar esto, esto juntos. Quiero seleccionar ambos juntos. En ese caso, lo que pueda hacer, vendré aquí, haga clic en esto. Voy a hacer de éste un grupo. Bueno, tengo aquí dos imágenes, como pueden ver en mi fondo. También tengo imágenes. Lo que puedo hacer aquí es , bien, déjame borrar esta. En lugar de poner mis imágenes dentro de esta caja en sí, si vengo aquí, agrupo esta, y ahora puedo seleccionar, eliminar esta. Y selecciona esto. Y borra esta también. Bien, este será el último paso donde me voy a poner en todo y voy a estar página aquí. Bien otra vez, ven aquí. Ir a la opción de importación. En las opciones de importación, seleccione ambas imágenes. Importarlo. Y como pueden ver, sólo voy a alejar un poco. Y ahora sólo puedo seleccionar imágenes en consecuencia. Supongamos que solo quiero seleccionar esta imagen aquí. Y ahora quiero disminuir el tamaño de esta imagen en particular aquí. ¿Bien? Y de la misma manera quiero disminuir el tamaño de esta imagen también. Bien, ahora vamos a venir aquí. Pongamos esta imagen con mi herramienta de mano. Vendré aquí y con lo viejo me acercaré. Muévete esto por aquí. Puedes ver que sí tengo esta imagen aquí. Bien. A partir de aquí, con solo hacer clic en Shift, básicamente puedo moverme por esta imagen donde básicamente quiero poner esta. Supongamos que si quiero poner esta imagen aquí, puedo poner esto. Y sí tengo otra imagen también aquí. Bien, voy a traer esta imagen en particular aquí también. Ustedes pueden ver aquí. Yo también tengo la imagen aquí para que ustedes puedan ver que básicamente puedo cambiar o aumentar el tamaño de las imágenes. Sí, ahora mi página web está lista. Como ustedes pueden ver, he hecho una página web para ONG. Bien. Entonces el nombre de la ONG es el hogar de todos y este es el lema y esta es algunas de las imágenes de su campaña Y aquí puedes donar, dar tu nombre si quieres saber algo. Entonces así es como básicamente puedes hacer diseño web. Bien, entonces espero que hayas entendido de la manera más fácil. Y ahora lo último que vas a hacer es venir aquí y básicamente puedes agrupar a éste. Si muevo este ahora mismo, se moverá todos juntos a la vez, ¿de acuerdo? Entonces si selecciono esto aquí, como pueden ver, una vez que seleccione este y venga aquí, puede ver que hay diferentes grupos. ¿Bien? Este es el grupo uno, el grupo cuatro, ¿de acuerdo? Aquí puedes ver que hay diferentes tipos de cosas aquí. Esta es la página web en la que estaba trabajando. Voy a borrar esta de aquí. Este es el tablero de arte. Espero que ustedes también hayan entendido todo sobre esta clase. Por fin, les he enseñado a ustedes cómo crear nuestro propio diseño de ustedes mismos mientras crean una página web. Bien, les he mostrado la forma más sencilla de cómo pueden empezar a diseñar realmente. Espero verlos a todos en el proyecto de clase, y les he dado a todos algunos proyectos. Y voy a estar esperando recuperarlos de todos ustedes, bien. Que pueda revisarlos y enviarles comentarios sobre cómo ustedes pueden lograrlo. Bien. Así que aquí acabo de hacer bastante simple página web aquí. Ustedes realmente pueden mejorar eso, usar algunas de las tres animaciones D. Y así es como puedes ver otras páginas del sitio web y verlo en consecuencia. Y les he mostrado prototipo para que ustedes también puedan hacer prototipos creando más páginas Bien, así que si ustedes están enviando más páginas, no tengo ningún problema en revisarlas. Estaré muy contento de que ustedes hayan enviado. Hasta entonces, cuídense y esperen verlos a todos en cualquier otra clase. Si ustedes tienen algún problema con respecto a este tutorial, si no están entendiendo nada, cada vez que ustedes puedan responderme, estaré ahí para ayudarles a salir. Cuídate chicos y adiós.