Adobe XD desde principiantes a expertos: diseño, prototipo y colaboración

1. Introducción a Curso de Adobe XD: bienvenido a mi curso al respecto. Más de 60 y en las escuelas vas a aprender todas las cosas básicas y todas esas cosas ofrecidas más de 60 vamos a diseñar, vamos a crear prototipos, íbamos air de pie, ir de pie, aprenderás todo sobre prototipos de papel y toda la diferentes prototipos interactivos, prototipos en vivo. Y vamos a colaborar con tus desarrolladores. Entonces, lo que significa la colaboración es que vamos de la mano de nuestro diseño a los desarrolladores sobre el uso Zeppelin y Advil cold. Entonces no te preocupes si no sabes de esto esta materia avanzada porque vas a aprender que en este curso voy a cubrir todos los conceptos básicos. Atajos? ¿ Cuáles son las diferentes herramientas que puedes usar para construir tu diseño? Y luego vamos a pasar a la fase de prototipado donde vamos a ir generar la gripe off app y diferentes pieles. Vamos a conectar las diferentes pantallas entre sí. Y luego al final, vamos a usar nuestro diseño para colaborar con otros desarrolladores. Vamos a diseñar, vamos de punta, vamos de punta, darles especificaciones de diseño y diferentes las distancias entre los diferentes elementos y las guías de estilo citadas, que tus desarrolladores pueden usar al instante ahí nos diseño de aplicaciones o Diseño de aplicaciones para iPhone. Ahora vamos a cubrir mucho sobre tipeo fronterizo. Me verás creando diferentes papeles Prototipos iban a cubrir la parte de bocetos o el diseño a nivel de bloque, que es la primera cara de cualquier diseño. lo que este curso es una mezcla de técnicas de experiencia de usuario, pocas fuera de ellas. He discutido en mucho TD como prototipos y también sobre Adobe X T. Cómo puedes usar y crear prototipos instantáneos originar prototipos instantáneos usando Adobe X'd . Ahora mucho fuera de los diseñadores, he visto que nunca hablan de directrices de diseño, yo las directrices de diseño de Estados Unidos o las directrices. Todo diseñador y desarrollador debe saber que la barra de navegación o que están pero fuera la aplicación U. S. S.debe ser de 49 puntos o la carga debe ser de 44 puntos. Todas estas especificaciones voy a cubrir en este curso. Y, uh, si tienes algún problema o te enfrentas a algún problema, puedes contactarme fácilmente. ¿ Por qué son respuestas de preguntas y también me pueden preguntar directamente por mensajes. Haremos muchas cosas fuera juntos, así que nos vemos pronto en ese curso, y seré tu instructor 2. ¿Qué es Adobe Xd?: Hola a todos. hoy nos vamos a conocer la nueva herramienta fuera de Adobe, que es un trabajo x d y estuve leyendo durante mucho tiempo por pocas características la introducida justo ahora en X t. Y ahora te voy a mostrar algunas de las grandes características de él. Y son ah, equipo Robur. Están trabajando un mes en estos y lanzando cada función mensualmente sobre la base de premiar de diferentes tú A diseñadores y diseñadores de experiencia de usuario de todo el mundo. De acuerdo, así que esto es a más de 60. Ahora mismo estoy en Windows. Solo hay pocas diferencias menores dentro de la versión macro y la versión de Windows, pero son casi similares. OK, ahora te voy a mostrar algunas off las grandes y cool características off X'd y por qué deberías usarlo como, ah diseño vía frame y prototype tool en tu experiencia de usuario, diseño, diseño, flujo de trabajo o tu te un trabajo de diseño. De acuerdo, ahora por qué estas tres herramientas para boceto de tienda y hace respaldos D Son geniales para tu diseño o diseño de experiencia de usuario porque apple son versión lideres U S, están produciendo sus gráficos en estos tres para Max Ok, por lo que en este momento están deportivos para el sketch de la tienda y aeróbicos T. Y si miras los tamaños de archivo el archivo adobe X t tamiza el más pequeño de los ochenta, 18.9 MB para que puedas ver está muy cerca del tamaño del archivo de boceto, por lo que es de cinco tamaño es muy pequeño. De acuerdo, entonces este es un punto plus muy grande porque puedes crear, como, como, cientos de diferentes tableros de arte en él. De acuerdo, Así que diferentes pantallas, tal vez cientos sean 20 o 30 pantallas diferentes, y el tamaño de tu archivo seguirá siendo pequeño. De acuerdo, así que es más fácil compartir una de las características fuera de la grilla fuera de un trabajo X t es. Se repite. Bien. ¿ Saber qué? Repetir avaricia es que creas tu elemento de diseño una vez, y lo vas a repetir haciendo un gran Reino Unido Puedes ver en este ejemplo de diseño que vamos a crear un final de las partituras. Se puede ver que esta es nuestra repetición crea. Entonces si intento dedos cortos cortos en él, se puede ver que está quitando todas las demás, uh, estas, um, um, plantillas de contenido por aquí. De acuerdo, entonces se está moviendo estos. De acuerdo, Así que puedes extender tu cuadrícula en destrucción y en dirección vertical, tanto fuera de estas direcciones como se va a multiplicar tu contenido único y puedes cambiarlo. Se puede. Yo lo hice. Y puedes hacer lo que quieras para hacerlo. Y ah, significará un grupo. De acuerdo, entonces esta es muy buena característica para crear origen. Leer contenido al instante. Está bien. Por lo que no necesitas generar todo una y otra vez. Se puede ver por aquí. Estos son duplicados. Está bien. Mi protección infantil. Producción infantil, capacitación en protección infantil. Entonces tenemos otra característica que se llama prototipado. Puedes enlazar toda la pantalla que puedas ver o escuchar. Aquí tienes un prototipo de sección, y puedes ver el prototipo en tu escritorio. Puedes ver tu cabello. Aquí hay un prototipo. Esta es una gran característica porque en el diseño de la experiencia del usuario, necesitas probar tus prototipos con tus usuarios. Necesitas ver cómo los usuarios van a usar realmente esto. Si este botón es suficiente para su Tom o si falta ahí, Tom. OK, entonces todo tipo de estas cosas, si el espaciado entre estos dos elementos es lo suficientemente bueno como para que el usuario no esté tocando este y abriendo éste. De acuerdo, así que estas son algunas características geniales de Adobe X'd, y ah, vamos a cubrir un montón de cosas en él. ¿ De acuerdo? Además, puedes moverte. Voy a previsualizar tus, uh, estos prototipos. Podrás verlas directamente en tu móvil. móvil de tu usuario. Además, puedes compartir las especificaciones de diseño. De acuerdo, déjame mostrarte las especificaciones de diseño. Aquí tenemos las especificaciones de diseño fuera del mismo proyecto, y se puede ver si voy a alguno de estos. Me está mostrando que este verde está ligado a éste. Entonces si voy a este, Ok, Ok, entonces está mostrando todos los colores utilizados en este tablero de arte junto con todos los estilos er correctos . Entonces si hago clic en algún off thes item, se va a mostrar los detalles fuera de eso ¿Cuál es el pueblo en altura fuera de este artículo? ¿ Cuál es la distancia entre estos dos ítems de eso? 16 puntos. Entonces todas estas cosas colores, redondez. Esta es la redondez de este botón. De acuerdo, Esquinas redondeadas. Y está mostrando también otros hechos, como la sombra y este material. De acuerdo, así que esto es muy útil. Es en este momento en amargas especificaciones de diseño, Peter. Están tratando de mejorarlo para el y espero que vaya a ser una gran característica en futuro próximo. Está bien. Está bien. Ahora el dedo del pie atrás, Adobe X'd algunas características más, que realmente me encanta es esta biblioteca de símbolos. Se pueden ver activos. Puedo agregar todos los colores que he usado todos los diferentes textiles, y, uh, uh, estilos que he usado en los símbolos es en realidad el elemento reutilizable. Puedes crear un símbolo y puedes multiplicarlo o usarlo en cualquier pantalla. Y si hice algo fuera de los símbolos, se puede ver la sobrecarga. Sé que estamos en prototipo más. Entonces aquí tenemos un símbolo. De acuerdo, entonces esto es un símbolo. Y si trato de cambiar el color del símbolo se puede ver que ha cambiado por todas partes. Diferentes aburrimientos de arte en todo el diseño. Dondequiera que haya usado este símbolo, se va a cambiar. Por lo que esta es una gran característica. Puedes cambiar instantáneamente cualquier cosa en tu tablero de arte. Si es un símbolo, se va a actualizar en todos los tableros de arte. Por lo que este lado está básicamente en las guías de estilo que solíamos crear normalmente en otro Softwares o cualquier cosa en Zeppelin. O si has lavado mis otros cursos, ¿ sabes qué son las guías de estilo? Básicamente son las guías de estilo, coloración y tipografía para usar diferentes cuatro tamaños, diferentes colores y cómo se van a utilizar en nuestro diseño. De acuerdo, así que estas son todas las grandes características off X t, y te voy a mostrar mucho de acuerdo y cómo podemos generar rápidamente estos diseños en X T. en el mundo real, situaciones creando diseños con mucha velocidad es realmente necesario. Quieres mostrar tu prototipo o estás trabajando ab demo. Haz tu cliente o tu usuario y querías hacerlo instantáneamente dentro de dos horas o dos yardas o tal vez cuatro horas. Creo que este tipo de diseños con estas muchas pantallas, como una puerta nueve pantallas. Creo que se puede hacer en sólo a la nuestra. Y también puedes compartir tus prototipos. Se puede ver su cabello publicar prototipo. De acuerdo, puedes compartir tu prototipo link toe cualquiera fuera de tu cliente o cliente en el instante, y ellos pueden hacerlo en sus dispositivos. De acuerdo, Ahora, en la siguiente lección, te voy a mostrar cómo descargarlo y cómo comprar este software si realmente quieres comprarlo. Pero ahora mismo, si estás aprendiendo, solo necesitas descargar la versión de prueba. De acuerdo, entonces pasemos a la siguiente lección. 3. Descarga e instalación de Adobe Xd: Está bien, ahora adelante. Vamos a descargar en Obey X'd versión de prueba. Entonces vas a ir a esta joya adobe dot com productos slash x escritura artista TML o voy a compartir este mundo contigo. De acuerdo, entonces esta es la prueba gratuita. Puedes descargar el trial por un mes, y también puedes comprarlo. Entonces si haces clic en esto por ahora, es muy barato en este momento, y está disponible por departamento de $10. De acuerdo, así que esto es apenas recientemente, creo que hay otros APS ahí por $20 al mes, pero en realidad está disponible por departamento de $10. De acuerdo, si de verdad quieres comprarlo. Está bien. Ahora llegando a los requisitos del sistema. Está bien. Por lo que antes de instalarlo en tu PC son Mac, esto es muy genial cosa genial de esta app que está disponible para ambos sistemas operativos . De acuerdo, Entonces si tu usuario o tu cliente están trabajando en un PC o un Mac, pueden ver su diseño, y pueden jugar con él. De acuerdo, entonces aquí tenemos los requisitos del sistema para Mac OS, que es Mac os 10.11 y posteriores. De acuerdo, estos son los recuerdos para G B, 1.4 gigahercios conocidos. ¿ Listo? No mostrar. Retina recomendada. Está bien. Y luego tenemos Windows 10. ¿ Alguien? Tres actualización. OK, así que si tienes ventanas simples, entonces y norte y la misericordia actualización o nada por debajo de esta versión 16 07 se va dedo del pie. Te da problema. No se puede instalar mucho fuera de los estudiantes. Me preguntaron eso cómo instalarlo en Windows 10. Asegúrate de tener alguna actualización de misericordia o la última versión fuera de Windows 10. Está bien. Y estos son los requisitos CPU, memoria de dos gigahercios para G B A, G B, fuera del espacio de instalación y pantalla. Y desciende ahí. Está bien. De verdad prefiero que tengas una buena tarjeta gráfica en Leeds. Al menos tener Koji bi o un GB off ram en tu tarjeta gráfica. ¿ De acuerdo? Porque es necesario que la mayoría de ellos diseñen aplicaciones intensivas. De acuerdo, ahora, estos son los requisitos, así que asegúrate de seguir adelante. Si aún no has instalado en absoluto Baxter. Intenta instalar la versión de prueba gratuita y descárgala e instálala, y te veo en la siguiente lección. 4. Por qué Adobe Xd es tan impresionante: tres y te voy a presentar. Wired se extinguirá es tan popular entre los diseñadores de interfaz de usuario. Eres diseñadores y diseñadores de experiencia de usuario. Hay varias cosas o se puede decir, características que deben estar presentes en cualquier tipo off herramienta de diseño para que sea perfecta para la experiencia del usuario . Los diseñadores disfrutan de los diseñadores. Ahora. El primer rasgo es que debe generar prototipo ¿Eres tú? Diseño o pantalla fuera de cualquier aplicación rápidamente para que podamos construir rápidamente en ella. Podemos diseñar. Ciertamente. No debe tomar como todo el día para crear cinco o seis cosas, a menudo app. De acuerdo, así que esto es una cosa. En segundo lugar, es que podemos compartirlo fácilmente y podemos es un fantástico con los usuarios, es decir también puedes construir un prototipo rápido dammit, Prototype off your product X Pruébalo con tus usuarios rápidamente. Entonces si estás probando con el usuario y mostrándole o corazón tu primera idea fuera de tu app y hey no le gusta algo o él dice que esto es no es lo que quiero. Puedes cambiarlo instantáneamente en adobe X T y generar otro prototipo paseo lejos y demostró que realmente quieres este. De acuerdo, entonces esta es otra característica. Tercera características, que realmente introdujeron en este momento, es para desarrolladores. Lo que necesitan los desarrolladores es que realmente necesitan especificaciones, colores los cordones fuera de los colores en valores accesibles o valores RGB o a veces algún otro valor rgl para el valor. De acuerdo, entonces están más interesados en las especificaciones que qué colores necesitamos usar en nuestro este equipo fuera de esta app o sitio web. ¿ Y con qué son las diferentes especificaciones que se alargaron? De acuerdo, así que estos se introdujeron recientemente en Adobe, En realidad, que es que puedes extraer tus generar tus elementos, tus especificaciones de diseño, que este elemento está tan lejos de este botón. De acuerdo, se puede generar en ella dentro elemento inspect, que es, creo que son característica de Adobe en la división B en este momento. Además, recientemente han introducido que puedes exportar tus diseños extra de adobe en Tow Zeppelin , que es otra herramienta para crear en especificaciones de diseño y grabar cualquier mención tu diseño. Y luego también han introducido que puedes exportar tus capas a siempre cool. Está bien. Y también hay uno más. Creo que proto por crear cualquier misión fuera de tu prototipo. Más detalle y emisiones son micro animaciones. De acuerdo, entonces todo esto se trata de esta lección. Espero que hayan disfrutado de mi presente operativo de introducción txt y qué se puede hacer con él y por qué se está volviendo popular entre otras herramientas. Porque hay una razón más por la que su tamaño de archivo es realmente pequeño. Creo que es aún más pequeño que el boceto. Si conoces un mapa de boceto, es más pequeño que bosquejo. Por lo que se está desarrollando a un ritmo rápido y de paz y se agregan muchas características cada mes en él. Así que realmente aconsejo que si te gusta el diseñador están en alguna sensación de diseño UX realmente debes aprender a, ya sabes, mezclarte con esta mano de distancia exceso de oferta. Está bien. Es realmente genial. Ligero, y espero que te guste. De acuerdo, nos vemos pronto. En otro menor 5. Actualiza la pantalla de bienvenida: Espero que hasta ahora, ya hayas instalado Adobe XD en tu máquina. Ahora vamos a ver lo que esta pantalla de bienvenida aquí. Entonces cada vez que ejecutes Adobe X D, esta es la primera pantalla que vas a ver. Por lo que por aquí en la parte inferior puedes ver estos son mis archivos recientes. Por lo que estos son mis proyectos o archivos recientes que he abierto. Puedo reabrirlos haciendo click en cualquiera de estos. A la izquierda, tenemos diferentes áreas como home learn. Aprende es si quieres ver algunos de los videos de la empresa de Adobe sobre cómo usar este Adobe XD. Después tenemos documentos en la nube. Adobe XD ha sido desplazado recientemente a la nube. Por lo que siempre que abras o guardas cualquier archivo, también se guarda en la nube. Por lo que te trae los cambios y el historial modificado de tu documento. Entonces lo que sea que diseñes, por ejemplo, como una hora para ir a nuestra hace, si lo has guardado, reflejará todos los cambios que hiciste con el tiempo. Por lo que se va a auto actualizarlo en la nube. Por lo que estos son documentos en la nube. Si hago click aquí puedes ver estos son todos los documentos que he subido a mi nube. Se puede ver por aquí, estos son pocos documentos. Si quieres eliminarlos, puedes dar click aquí. Puedes eliminarlos así. Además, puedes ordenarlos. Estas son opciones diferentes. Y entonces tenemos dab compartido con ustedes. Entonces estos son los archivos si alguien más ha compartido sus proyectos conmigo y estoy trabajando con ellos en los documentos de la nube. Esto va a ser por aquí. Estos son todos los archivos borrados. Por lo que hace poco lo borra, levanté este expediente. Entonces todo esto está aquí. Ahora, si haces click en Administrar enlaces, se va a ir a tu nube por aquí puedes ver este Macleod y una vez que hagas clic en la gerencia, pero entonces estos son los prototipos o especificaciones de diseño o proyectos todos publicados I han compartido con esos. Por lo que puedes ver si miras de cerca aquí en la parte inferior dice prototipo, prototipo, especificaciones de diseño prototipo, especificaciones de diseño prototipo. Por lo que estos son diferentes archivos que he compartido con otros. Se puede ver por aquí, esto es enlaces publicados, así que estos son todos los que he compartido con los demás. Puedes manejarlos por aquí. Puedes hacer click aquí, puedes copiar ese enlace y compartirlo con otros. Puedes eliminar permanentemente estos enlaces compartidos o publicados. Ahora, volvamos a nuestra pantalla de Adobe XD y puedes ver si volvemos a casa, eso es todo lo que tenemos estamos aquí, nuestros documentos en la nube compartidos conmigo, archivos borrados, LINCS gestionados, enlaces gestionados para los archivos que he compartido con otros. Entonces todo eso se trata de esta pantalla de bienvenida. Espero que hayan disfrutado de esta lección. Vamos más allá y discutamos la interfaz en la siguiente lección. 6. Introducción a la interfaz de adobe XD NEW 2020: Ahora vamos a abrir un nuevo expediente para eso. Tenemos diferentes plantillas por aquí. Aquí tenemos iPhone, diferentes pocos quieren diseñar una aplicación para iPhone o Google App o Android, te vas a ir y aquí, si quieres ir por diseño web, estarás usando algunas de las plantillas por aquí. Si quieres diseñar algo para redes sociales, publicaciones de Instagram, publicaciones de Twitter, encabezado de Twitter se desvanecen, publicaciones de Facebook, dispara tu video. Te vas a ir por aquí. Ahora mismo. Voy a seleccionar algo de aquí. Al igual, vamos a seleccionar este Google Pixel para, para Excel. Ahora, este es nuestro tablero de arte por aquí. Entonces, maximicemos este. Y se puede ver en la parte superior dice sin título y aquí está un pequeño login en la nube y me está mostrando el tiempo por aquí. Así que pinchemos por aquí y cambiemos el nombre a nuestro, digamos primera visita a XD guardar. Entonces ahora puedes ver ya tengo algunos plug-ins y star, así que me está mostrando que un plug-in necesita actualización que tenemos momento voy a cerrar este. Y esta es nuestra sencilla interfaz o Adobe X a la derecha puedes ver que tenemos pocas opciones por aquí como este es el nivel de zoom. Podemos acercar al 100%. Este es un 100% de este diseño. Esta es nuestra vista previa de escritorio para el prototipo. Esta es nuestra Vista previa móvil. Si tenemos instalada la app móvil y queremos ver esta pantalla en nuestro móvil. Esto va a ser o aquí. Si quiero invitar a alguien más, alguien más, a algún otro diseñador, puedo hacer click aquí. Esto sigue en la beta, por lo que puedo habilitar la edición. Para que otro diseñador pueda editar mi diseño dos. la izquierda aquí, tenemos tres pestañas, diseño, prototipo y cizallamiento. El diseño es donde estaremos diseñando presume de nuestras pantallas, estaremos poniendo diferentes. Pero como vamos a estar haciendo cosas diferentes por aquí. Por ejemplo, este botón por aquí. Y en la sección de prototipos, estaremos vinculando dos o tres pantallas. Por ejemplo, si tengo otra pantalla donde aprendemos cada atajo y todo, solo estoy tratando de explicar. Por lo que ahora puedes ver tenemos dos pantallas. Uno es este 11 es este segundo. Yo los puedo vincular así. Y esto va a ser en nuestro prototipo. Por lo que nuestros prototipos interactivos serán generales. Nuestros archivos de diseños serán de sobrecarga. Compartir será cuando queramos compartir nuestros diseños con alguien. Para que puedas ver tenemos diferentes opciones donde revisión de diseño para obtener retroalimentación sobre tu diseño o prototipo. Entonces tenemos desarrollo donde estaremos compartiendo nuestro documento con los desarrolladores para mostrarles el código que tenemos para todos esos elementos por aquí. Entonces para presentación, tal vez queremos mostrárselo a nuestros clientes. Y luego para las pruebas de usuario y luego para la configuración personalizada personalizada. Por lo que estos son diferentes ajustes para compartir tu documento. No, voy a volver a casa. Y si hago clic en Inicio, se puede ver que podemos volver a esta pantalla de inicio donde podemos abrir cualquier otro documento reciente. Nuevamente, tenemos algo de menú por aquí, se puede ver a la izquierda en Adobe XD es versión para Mac, tenemos el mismo menú en la parte superior de MAC por aquí. Por lo que puedo dar click aquí, puedes ver tenemos nuevo documento abierto. Entonces tenemos diferentes puertas de UI. Entonces tenemos documento reciente, renombrar este documento, guardar como guardar como documento local. Por lo que también puedes guardar este como tu documento local. Ahora el problema será que si intentas guardarlo como tu documento local, tus cambios son historial no se guardará por aquí. Por lo que pueden ver estos son los dos cambios que he realizado a las 302 PM y a las 03:04 PM. Tres nuestras 3pm y cuarto minuto, en realidad agregué esta segunda pantalla. Por lo que en realidad está guardando todos mis cambios en la nube. Entonces, siempre que quiera acceder a ella, puedo volver, por ejemplo, a ésta. Puedo revertir. Se puede ver abierto en una nueva ventana. Entonces si trato de abrir esto en una nueva ventana, se puede ver que tendrá sólo una pantalla. Para que veas que tenemos este prestatario tiempo aquí. Y es la primera pantalla con la que creo que empecé. Esta es la diversión. Empezamos con pantalla vacía. Por lo que va a salvar toda la historia de todos los cambios que vas a hacer o tal vez ahorrar después de cuatro o cinco minutos. No estoy seguro de todos modos. Entonces a la izquierda tenemos todas las herramientas. Estas son las herramientas que vamos a utilizar en las próximas lecciones. Voy a explicar cada uno de ellos. Entonces en la parte inferior por aquí tenemos activos, tenemos panel Capas, tenemos nuestros plug-ins por aquí. Entonces, sean cuales sean los plugins que vas a instalar, estos son plugins gratuitos. A algunos de ellos se les paga. Puedes instalarlos por aquí y puedes usarlos así. Por lo que si haces click aquí, puedes ver que dice un error. Escala de colores demasiado amplia. Vamos a crear, puedes ver esto es una escala de colores por aquí. Por lo que estos son los plug-ins que van a automatizar y mejorar tus capacidades de Adobe XD. Entonces estas son las herramientas. Estos son los tres que mayormente veremos este tablero de arte por aquí a bordo de Arbor, Pelham. Estos son tableros de arte, en realidad, estos se llaman tableros de arte. Y eso se trata de la interfaz de Adobe XD. Tenemos tres pestañas principales por aquí, diseño, prototipo, y compartir. Y este es el nivel de zoom. Lo estaremos usando mucho. Este es el botón de reproducción para previsualizar nuestro tiempo perfecto lejos. Se puede ver en esta ventana, esto también se va a utilizar mucho. Entonces esa es toda la introducción sobre la interfaz. Cavaremos más en los mensajes de texto de Adobe en la siguiente lección. Saltemos a la siguiente S Y ahora. 7. Interface de Adoe Xd: Entonces si vuelvo a ir a este diseño, se puede ver aquí tenemos otro panel, que es nuestro panel de propiedades. De acuerdo, entonces si hago clic en esta pizarra de arte Así que esta pizarra de arte está seleccionada de selección, y esta línea azul muestra que esta pizarra de arte está activa, voy a mostrar un ver todas las opciones alegadas. Hacer esta tabla de arte, como con en la posición de esta tabla de arte altura fuera de estribor. Cuál es será la altura del tablero de desplazamiento y vista. Cuánta altura es visible, entonces tenemos apariencia, el color de relleno. También puedo cambiar el color si quiero. Ah, y quiero decir, tengo que hacer clic en esto. De acuerdo, así que también puedo crear rejillas y Leo está en ello. Nos vamos a hablar de los diseños de Gretchen más adelante. Solo te estoy mostrando que este es el panel de propiedades. De acuerdo, Entonces si hago click en este rectángulo redondeado, vale, entonces si hago click en este ángulo de rechazo redondo, puedes ver todas las opciones más adelante a esto, como alineación. Un grado de repetición. Este ajuste y estos enojadores relacionan Todo Vale, Así que todo esto está aquí. Está bien. En la barra superior estarán alineaciones. de lo que tenemos. El repetido creó nuestra unión. ¿ Son estas opciones? No quiero explicarme ahora mismo. Simplemente necesitas saber que esta área es para controlar tus objetos de diseño. De acuerdo, entonces si tienes un tablero de arte, puedes controlar su altura y otras características. Si tienes ah, rectángulos, puedes crear diferentes efectos y diferentes tamaños y diferente redondez y diferente capacidad como usar los paneles de propiedades del mismo. De acuerdo, entonces todo, la mayoría de las cosas sobre cualquier objeto estarán de este lado. Se puede ver qué aquí. Ahora, he seleccionado este texto y el texto. Um, las opciones están por aquí. Se puede ver. Y si seleccionas el arte abordado, las propiedades relacionadas con el tablero de arte estarán por aquí. Entonces así es como usamos un trabajo. A x t. OK, Ahora, hay dos iconos más a la izquierda. En la parte inferior, se pueden ver u escuchar capas y activos. De acuerdo, Ahora, estos activos están ahí van a haber todos los colores. Los estilos de carácter son símbolos que voy a utilizar a lo largo de mi diseño o todos los tableros de arte. De acuerdo, Entonces si trato de agregar esto como el estilo de la tía Corrector, se puede ver, se ha agregado un estilo R tractor en este área de activos. OK, así que no confundas este diseño y prototipo con estos dos. ¿ De acuerdo? Estas te van a mostrar todas las capas y esto te va a mostrar todos los activos que has utilizado en tu diseño. De acuerdo, entonces esta es la introducción a la interfaz fuera de Adobe X'd. Espero que hayan disfrutado de esta lección. Pasemos al siguiente ejercicio. 8. Adobe Xd Mac y en las diferencias de ganar: De acuerdo, ahora en esta escucha, vamos a ver cuáles son las diferencias entre la versión Max off. No, B, x d y versión de B. C apagado, así que sé extra. De acuerdo, Entonces lo primero que vas a notar es esta barra de stop, que es barra de acceso directo por aquí, que no está presente en ventanas. Y aunque los atajos son muy fáciles de recordar, pero aún así va a ayudar mucho. De acuerdo, Entonces puedes ver que sabes lo que puedes hacer con estos objetos. Puedes agregarlas. Se puede. Hay opciones de texto de lo que tenemos un rango y todo lo demás capa on. Entonces tenemos esto una fecha y archivo. De acuerdo, entonces esta es la primera diferencia importante. Entonces tenemos algunas diferencias más. Al igual que puedes ver el reciente adobe X t. Tienen al menos algunos, um, enchufes que son compatibles, o las herramientas de terceros que son compatibles con Adobe X'd on. Y si voy a esta exportación, se puede ver por aquí está Zeppelin. Ahora, Zeppelin es una herramienta, y alguna vez se llama otra herramienta y dos, o ver estos tipos de herramientas fuera que se utilizan para generar cable y generar especificaciones y especificaciones de documentos. Si no sabes de Zeppelin, debes quitarme mi flujo de trabajo más que representar curso donde generamos todas las guías de estilo , colores, equipos, todo dentro de Zeppelins usando para la tienda. Está bien. No, estamos todos arreglados. Tengo uno creado, un párrafo uno encabezado en un botón, y lo vamos a exportar. Dedo del pie Zeppelin. Veamos qué va a pasar por aquí. De acuerdo, entonces vamos a seleccionar este tablero de arte, y vamos a exportarlo a Siplin. De acuerdo, entonces eso es importante. Entonces lo creé en una X. Así que lo voy a importar a una siguiente, y está subiendo el diseño en este momento. De acuerdo, entonces todo está hecho. Veamos esto. De acuerdo, así que eso es muy guay. De verdad me gusta. De acuerdo, Entonces este es nuestro rumbo, y este es todos los tamaños son que puedes ver en los puntos que son para el desarrollo móvil. Se puede ver por aquí. Entonces tenemos esto también, el color también viene en RGB. Creo que es para nosotros. Entonces puedes ver por aquí cómo podemos exportarlo a ah Zeppelin. De acuerdo, entonces veremos esto más adelante. Nos vamos del dedo del pie. Vea esto en detalle más adelante. En las últimas lecciones en este momento, solo quería mostrarles que se pueden hacer muchas cosas con Adobe XY. Entonces, lo que hace Adobe Extra es que normalmente lanzan sus nuevas funciones primero para mi pregunta, y después de uno o dos meses, se va a incluir en remolque. El cuestionamiento de las ventanas. OK, así que no te preocupes si tienes ventanas que te faltan atrás. De acuerdo, entonces esa no es una diferencia muy grande. De acuerdo, entonces hay una diferencia más que olvidé decirte si creas un prototipo por aquí, Así que voy a duplicar esto reprimiendo mi tecla de opción de arte. Y me voy de pie. Simplemente crea un prototipo sencillo. Vincularía estas dos pantallas, aparecería tan disuelta, y solo cambiaría el color de este botón. Entonces sabemos que estamos dentro. Otro fue por aquí. De acuerdo, así que todo hecho. Ahora vamos a jugar esto y se puede ver por aquí. Uh, entonces lo que se puede ver por aquí es un pequeño botón, que es registro. Está bien. Para que pueda presionar esto y puedo grabar un video fuera de mi vista previa. ¿ De acuerdo? Y entonces puedo exportarlo así. Va a ser un video. Se va a guardar una renovación de video, tipo brutal. Y puedes compartir este video con cualquiera. De acuerdo, En este momento, este funcionario no está disponible en Windows. Espero que venga pronto en ellos. Las próximas actualizaciones, tal vez el próximo mes o tal vez de marzo o Apple. No lo sé. Esta es también una característica ordenada que sólo está presente en la versión de Adobe X'd Mex. Y espero que hayan disfrutado de esta lección para los usuarios de Mac. Creo que esto es un creador, Will y tú puedes hacer muchas cosas con él. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme a menos que pases a la siguiente lección. 9. Actuaciones y funciones Xd: una de las mejores cosas de los aeróbicos T es que se actualiza regularmente. Por lo que adobe una empresa y están trabajando en ella un día a día y noche por noche y el casi te dan una actualización cada mes. De acuerdo, para que puedas ver la última actualización. WAAS 11 de diciembre de 2017 y la última es generalmente el 22 de 2018. OK, así que tienen mejor rendimiento de zona. Vista previa de Dropbox para cambiar de archivo extra entre color morse tres morse de colores diferentes que están ofreciendo en este momento y nuevos INT codiciosos. Realmente Ingredientes mejoran las especificaciones de diseño mental pantalla están bordeadas 100% y nueva característica, que se llama exportación por lotes. También, están iniciando trabajos de terceros a través de integraciones como Zeppelin. Nunca canjear. Simplemente ponga un pastel y una guía compuesta. De acuerdo, entonces ah, puedes ver aquí han demostrado que disponible para Mac en Lee. Por lo que son pocas las características que les voy a mostrar en la siguiente lección. A algunas de las diferencias que van a ver en mi pregunta. La versión para Mac es como, uh, 10%. O tal vez pueda decir 5% cabeza fuera visión de ventanas. De acuerdo, entonces tienen más características en Mac. Primero los lanzaron en Mac primero, y luego se lanzan en windows. De acuerdo, entonces esto se trata de las actualizaciones. Déjame mostrarte una cosa más que están trabajando en muchas solicitudes de funciones. De acuerdo, así que este es adobe Formulario de solicitud de característica extra, y puedes ver aquí la gente está votando por diferentes características nuevas, como texto para apareamiento. Y entonces tenemos el objeto fijo estático entre tradiciones. Entonces puedes ver esta es la revisión a partir de un debate? Están diciendo característica en revisión. De acuerdo, entonces están revisando esta característica de la que tienen característica necesita más información de la que han destacado en el atraso. De acuerdo, entonces son pocas las características que ya tienen funcionando, iniciaron, comenzaron a trabajar, como se puede ver u escuchar sobre refugiados características deportivas iniciadas, así que ojalá lo van a perder en al mes siguiente, O tal vez dos meses después de esto. Empieza a trabajar en ello. Por lo que se puede decir que esto es muy cool Característica. Podrás estar actualizado con lo que viene a continuación en una puerta. X'd. De acuerdo, pasemos a la siguiente lección donde vamos a ver cómo empezar a usar X d. Ok, entonces en realidad vamos a empezar a usarlo 10. Ejercicio de primer proyecto: No. Vamos a conseguir algunas cosas prácticas con Adobe Extra. De acuerdo, Ya hemos hablado mucho al respecto, y ahora te voy a mostrar cómo puedes crear algunas cosas sencillas en ella. OK, entonces vamos a hacer esta primera asignación. Esta va a ser tu tarea. Voy a crear una pantalla sencilla. Déjame mostrarte. Por lo que he abierto este tablero de arte, que es el iPhone 678 y voy dedo del pie presionando control cero comando cero, zoom. O también puedes ir por aquí y acercar 200%. Está bien. Ahora, lo que quiero que hagas es solo dar click en este taburete de elipse y sólo tienes que arrastrar y mantener presionada tu tecla de turno para que puedas hacer una circular proporcional. Estamos aquí, y ahora nos vamos de dedo presionando esto, seleccionamos y vamos a hacerlo en el medio. De acuerdo, así que una vez que está en el medio, se puede ver que hay ah, línea rosa o guía inteligente, que nos está mostrando que está en el medio. Entonces vamos a ir por aquí en esta zona y este es nuestro tamaño de frontera. Podemos aumentar el tamaño de la frontera a cuatro así. Y voy a agarrar mi imagen Jewel por delante, y voy a arrastrarla y dejarla caer dentro de este círculo así. De acuerdo, así que quiero que hagas algo como esto. Puedes usar tu propia imagen. También puedes cambiar el color del borde. Haga clic aquí y puedo cambiar el dedo del pie del asesino fronterizo a 7 a 7. Algo así. Y luego quiero que escribas algo de texto por aquí. Por ejemplo, este es mi título. Um, como Mohammed s y CES. Algo así. Y quiero que escribas tu ah cancha favorita por aquí. Vale, entonces tal vez Ok, así que si tu texto es un poco más largo así que me voy de dedo este es tamaño de ataque por aquí. No te preocupes por que soy esto. Voy a ir con mucho detalle en la siguiente sección, así que no muy en este momento. Apenas viendo el tamaño del texto a algo así como 16, puedes ver No, cuando trato de moverme, me está mostrando las distancias entre diferentes elementos. Además, puedo seleccionar este y puedo ir de aquí dedo del pie algo tablero, ¿de acuerdo? Y también puedo alinearlos en el medio así. Esto ya está en medio. ¿ De acuerdo? Y luego te quiero dedo del pie. Ten ah botón por aquí. Entonces vamos a crear un botón con herramienta de ángulo distrital. Haga clic en el ángulo de secta. Este es un ejercicio muy sencillo. No te preocupes que eres No. Te vas a meter en el problema. Quitar la frontera y para el campo. Yo quiero el color. Y voy a usar mi herramienta fiscal para crear algo sobre ella. Al igual que contratarme. De acuerdo, entonces tengo escape de senos o V dos seleccionados. Y luego voy a seleccionar en otro lugar. Sí. Muévete en el medio así. Y voy a cambiar su sentir. El color está por ahí a la derecha. Voy a dejarlo vacío. ¿ De acuerdo? También puedes seleccionar a ambos como esta holgura de dragón, y puedes alinearlos en el medio así. Pero normalmente eso me gusta. Debería moverlo de ello hacia arriba. Y he seleccionado comprarlos otra vez así y moverlos arriba así. Es muy simple Herramientas, diseño de puntera y trabajo por aquí. K Además, si quieres, también puedes escribir algo por aquí como esto. Entonces si quiero un párrafo fuera de texto son mucho texto, voy a dar clic y arrastrar así y bla bla, bla, bla, bla , bla, bla, bla, bla, bla, bla, bla, bla, bla. De acuerdo, esa es una buena poesía. Y voy a cambiar el color del relleno. De acuerdo, entonces primero necesito seleccionar este texto y ver el color de la película a algo como esto. De acuerdo, así que no quiero que escribas bla, bla. Oye, así que me voy a ir con regular y me voy de pie. ¿ Conseguirlo? 18 salidas fuera de tamaño. De acuerdo, entonces vamos a escribir algo por aquí. Voy a saltarme. De acuerdo, así que escribí algo sobre mí. OK, así que voy a quitar este, y voy a usar esto aquí de esta manera. Y puedes usar eso en el medio. ¿ Algo así? Sí, porque es una muy tendida en el medio, y puedo usar algo como esto. Y ahora puedes ver aquí tenemos Vamos a cambiar el color de relleno dedo del pie color más oscuro como este. De acuerdo, así que esta va a ser tu primera asignación. Sólo tu nombre, lo que amas y lo que haces y lo que te gusta Y lo que has visto en tan solo dos líneas y Abberton. De acuerdo, entonces si quieres cambiar el radio de la carga quieres dedo del pie, haz las esquinas redondeadas puedes hacerlo por aquí como yo quería ser. Ocho píxeles redondeados. Puedes ver tu cabello Si quiero agregar algo de sombra, puedes hacer clic en esta sombra no cambies nada, No hagas jugar mucho con estos valores iban a cubrir Ah, mucho en el detalle. Entonces esta va a ser tu primera tarea que quieras crear algo parecido a esto. Simplemente crea una elipse. Arrastra tu imagen dentro de ella tu nombre, lo que te guste. También puedes cambiarlo dedo del pie un poco de color de gracia. Entonces hay un contraste entre estos dos y una bonita carga y alguna sombra a su alrededor. También puedes redondear las esquinas si quieres, y también puedes usar algo que te asuste. Entonces voy a usar cuatro para las esquinas redondeadas. Hagamos capacidad al 100%. Está bien. Para que puedas hacer algo como esto. Déjame cambiar este color a algo así. Entonces esto es más profesional. De acuerdo, así que quiero que creéis algo como esto y ah, publicado en la siguiente asignación. Y los veré pronto en el siguiente apartado. 11. Tableros de trabajo y cuadrícula de XD: Ahora bien, de lo primero de lo que voy a hablar son los tableros de arte, porque esto es lo primero que vas a encontrar en Adobe X'd. De acuerdo, entonces estoy por este ejemplo. Voy a dedo del pie seleccionar esta web, y voy a seleccionar este tablero de 12 80 yardas y vamos a acercar comando o control plus o simplemente presionar comando o control cero dedos. Umit dedo del pie el ajuste y dentro de este lienzo. Entonces aquí tenemos sobre nuestra mesa directiva. Este es el nombre del tablero de arte. Si quieres hacerlo puedes hacer doble clic, y puedes editar como diseño de sitios web o algo así. Vale, Ahora, siempre que quieras seleccionar un tablero de arte, debes hacer click en su nombre, así que haz clic una vez y se va a seleccionar y podrás ver diferentes opciones y más tarde dedo del pie esta pizarra de arte sobre aquí. Este es el ancho y la altura. Si quieres medallón, puedes si quieres. Mira, bloqueará la relación de aspecto. Y una vez que aumente esto, también se va a aumentar el segundo valor, que normalmente no queremos. De acuerdo, Entonces tenemos este retrato y paisaje más, que no es uh, tiene sentido en el diseño Web, pero en la aplicación móvil, por lo que tiene sentido. De acuerdo, entonces tenemos este desplazamiento. Vale, Así que el desplazamiento es que cuando creas un prototipo fuera de este diseño, si quieres una barra de desplazamiento por aquí para desplazar su diseño y bien, entonces algo como esto. Por lo que Vieux Port Height va a decidir dónde está el cuerpo de pergamino. Entonces si tengo esto, uh, uh, Vieux Port Heights dijo a 600 se puede ver aquí es mi pedacito escolar. De acuerdo, así que este es mi se puede decir página completa gesso en diseño web. pliegue del tiempo es el área que va dedo del pie visible en la primera vez, y alguien visita. De acuerdo, entonces hasta esta zona, el sitio web será visible a continuación, batiremos rollerball. De acuerdo, Ahora pasando a esta aparición. La apariencia es básicamente el color de fondo fuera de todo tu diseño. Puedes ajustarlo a lo que quieras, pero creo que mantenerlo con el dedo blanco es la mejor opción. O aquí. De acuerdo, volvamos a hacer clic. De acuerdo, ahora tenemos las rejillas. Se trata de conceptos muy importantes, y esto se utiliza principalmente en el diseño web. Mucho. De acuerdo, Entonces, incluso en el diseño gráfico, hay dos tipos de diseños fuera de la cuadrícula. Uno es este diseño, que está basado en columnas, y el 2do 1 es cuadrado mejor. De acuerdo, así que el tamaño cuadrado normalmente está destinado para abdominales móviles. No es bueno para creo que el diseño web, pero puede colocar objetos rápidamente si quieres. Ah, así. De acuerdo, así que esto es muy, ya sabes, va a chasquear el dedo del pie cada caja. De acuerdo, entonces es más fácil dedo del pie tuyo así. Vale, Pero tiene más sentido en el diseño móvil vino y estás diseñando para laboratorios móviles. Tiene más sentido. Vamos a borrarlo de nuevo. Ve a la plaza y este es el tamaño de la baldosa. Quieres si quieres, como 24 cerdos, analfabetos, susto duro, tamaño cuadrado. Puedes ajustarlo a 24. Se puede ajustar a 64. Todo depende de tu propia elección. Entonces nos vamos de pie. Discuta este otro diseño, que está basado en columnas. Normalmente utilizamos en diseño Web. Un diseño de 12 columnas y el bien de ello depende de tu propia elección. Pero normalmente, si usas la configuración de bootstrap va a ser de 30 píxeles. Después vamos a estos márgenes. Los márgenes son básicamente este todo el espacio a la derecha, este espacio en blanco o y a la izquierda. Entonces lo voy a ajustar a 30 algo así. De acuerdo, entonces me está mostrando eso. ¿ Quieres márgenes diferentes en cada lado o mismos márgenes? Entonces si hago clic en el mismo margen se va a establecer 31 pixeles, por lo que un pixel no importa mucho, así que viviré con eso. De acuerdo, Así que esta es nuestra avaricia estilo casi bootstrap. Y si quieres congee en el dedo del pie talla 12 bajo 11 70 algo como esto. Está bien. Y si quieres márgenes diferentes en cada lado, esta es la opción que vas a usar Stop, zancada inferior e izquierdo. Está bien. También puedes convertirla en la columna predeterminada más adelante Configuración. De acuerdo, así, y se va a establecer por defecto. Por lo que siempre que empieces a usar algunas columnas, se dirá a esta configuración de Defar. Entonces esto es lo básico. Propiedades básicas fuera de cualquier tablero de arte. Ahora bien, si quieres otro tablero de arte, quizá yo quiera otro tablero de dardos. Entonces da click en esta herramienta de tablero de arte y voy a dar click a una. Entonces, ¿qué? ¿ Aquí? Y ahora va a generar otro arte. La segunda opción es que si quiero dedo del pie, basta con dar click en V. D. Seleccionado primero y volver a hacer clic en el tablero de arte y podrás ver diferentes opciones de bota de arte . Entonces si quiero y el iPhone seis suene una plantilla por aquí, puedo hacer click en eso, y será paralelo a mi diseño Web. De acuerdo, entonces si te vi, hice clic una vez más. Entonces volvamos a mover el dedo del pie esto otra vez, movido todo y voy a alejar un poco para que podamos ver comprados los aburridos del arte. Y ahora si quiero moverlo, solo lo seleccioné y luego puedo moverlo, vale. Entonces puedo colocarlo por aquí, o puedo colocarlo por aquí cuando quiera. OK, así es como se crean diferentes vistas fuera del mismo sitio web Norgay y voy a dar clic afuera y seleccionar la herramienta de tablero de arte presionando a y también puedo hacer clic en tablet android . De acuerdo, entonces, no, tengo tres vistas. Uno es un sitio web o escritorio que que tenemos plantilla, vista, y luego tenemos vista de iPhone. Si hago clic aquí, puedo cambiar su diseño dedo del pie cuatro columnas, que normalmente usamos en Mobile APS y se superó. Va a ser 16 y quiero que los márgenes a derecha e izquierda sean 24 s. así que voy dedo del pie seleccionar 24 o aquí. Está bien. Entonces Ok, entonces lo está rodeando a 25 lo cual es bueno. De acuerdo, así que aquí está mi configuración para Web versión fuera del mismo sitio web un juego. Entonces voy a usar cuatro columnas por aquí, y luego voy a usar ocho columnas por aquí, así se puede ver que está bastante lejos en ocho columnas, lo cual es muy creado. Realmente me encanta este software. Tienen muy buenos valores por defecto, así que vamos a ponerlo en 32. De acuerdo, así que esto se ve genial. Entonces así es como configuraré mis aburridos de arte si estoy diseñando diferentes vistas fuera de mi página web . Está bien. Tan vista móvil, vista tableta Andhra y vista de escritorio. Está bien. Entonces no voy a entrar en detalles y crear un diseño de sitio web en esto, pero así es como vas a configurar tus crudes. Ahora bien, si quieres eliminar un tablero de arte, puedes seleccionar y presionar borrar, y se va a eliminar este tablero de arte. De acuerdo, entonces es así de sencillo. Además, puedes seleccionar desde aquí y eliminar. Y también puedes duplicar copia y diferentes comandos que puedes ver por aquí. De acuerdo, Entonces así es como usas estos libros de arte. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección y nos vemos pronto. 12. 8 herramientas de XD: en esta lección. Vamos a aprender de esa barra de herramientas que tenemos en Adobe X'd. Entonces voy a pasar rápidamente por todos estos objetos y el taburete bar. OK, entonces vamos a empezar con este iPhone 678 Vamos a acercar. Comando cero en control cero. Y aquí tenemos nuestro hardball. OK, entonces esta es V herramienta de selección más rica, que es, uh, esta se puede seleccionar cualquier cosa con ella. De acuerdo, entonces tenemos la herramienta de ángulo de secta, que es nuestra r y puedes crear pero termina con ella. Basta con presionar son, y aquí tenemos sólo arrastrarlo y soltarlo en el medio. Y esto es frontera. Estas son propiedades diferentes fuera de ella. Vamos a venir a esta zona más adelante. OK, entonces estos son alineaciones. Repite las alturas de grado con apariencia y diferente este radio de esquina de radio sentir borde. Vamos a ver estos en otra lección ahora mismo. Yo sólo voy a presentarles todas las herramientas por aquí disponibles por aquí. OK? Tenemos herramientas muy limitadas y esto es lo callejero de este adobe extra. De acuerdo, entonces tenemos este eclipse y puedes compartir sostén shift toe, ya sabes, tenerlo en una proporción proporcional y puedes presionar arte con él son opción key toe make y creerlo en destrucción. De acuerdo, entonces va a crecer desde el centro así. Entonces depende de ti. Voy a colocarlo en el medio. De acuerdo, entonces tenemos esta herramienta de línea. Puedes usar esta herramienta de línea en cualquier lugar que quieras. De acuerdo, entonces aquí tenemos esta línea. Después tenemos el combustible gastado y estos atajos son muy fáciles. Y ah, lo que llamamos en experiencia de usuario. Diseño, mapeo, mapeo Es más fácil de recordar. De acuerdo, entonces ps pentti es texto nuestras fronteras a Exumas e Así que estas son auto explicativas. No es necesario que los recuerdes. De acuerdo, entonces tenemos esta herramienta de texto de lo que tenemos esta herramienta de pluma Con mental, puedes crear diferentes formas como esa. Basta con seguir moviendo. Y luego también podemos hacer clic y arrastrar. Haga clic y simplemente déjelo así. Después haga clic y arrastre para que podamos crear muchas formas diferentes. Es casi similar a para una tienda. De acuerdo, nos acercaremos más adelante en profundidad. De acuerdo, Entonces esto es textil. Simplemente puedes seleccionar el 30 o y puedes escribir algo por aquí como algo. ¿ Qué tienen fuga de prensa y eso es todo. Presiona V, y puedes seleccionarlo y moverlo. Ahora, las opciones de alineación. O se puede decir que la alineación inteligente es muy sofisticada para el nuevo próximo. Tu software de diseño es como sketch, y será extra Reino Unido. Una vez que mueves algo, se va a mostrar la distancia fuera con todos los elementos diferentes por aquí en relación con ellos. OK, entonces me está diciendo que ahora está alineado a éste. Y la distancia entre estos dos es de 15 píxeles. De acuerdo, entonces tenemos estas herramientas de tablero de arte. Creo que ya hemos discutido esto. Acabas de seleccionar y crear otro tablero de arte. Este es el tablero de arte para iPhone X. Y entonces esta es la herramienta de zoom que puedes hacer zoom en cualquier elemento. ¿ Eso es algo de vuelta? Presioné control cero comando cero, y puedes acercar todo el puerto de arte así. De acuerdo, así que esto es muy sencillo. También puedes establecer el nivel de zona a partir de aquí en adelante. Alejar el zoom. Estos son se pueden ver diferentes teclas de método abreviado. Control un control de puntera más plus y control más menor. Zoom hacia fuera y ah, zoom a selección, Control o comando tres. Entonces si estaba usando Mac, va a ser reemplazado por comando. De acuerdo, tan muy sencillo. Muy fácil. método abreviado. Yo voy con el dedo del pie. Crea una lección separada para todas las teclas de método abreviado utilizables. De acuerdo, así podemos usar rápidamente y empezar a usar Adobe X'd. Entonces estas son todas las herramientas. 3456 y ocho herramientas que tienes sobre él. Y la mayoría son justicia. 123456 Así que seis herramientas una es tablero de arte y una zoom, que es especie fuera de una utilidad para usar en. Acerque y aleje sus tableros de arte. Eso se trata de la barra de herramientas. Por aquí tenemos. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 13. Herramienta de rectángulo para crear botones: en la distancia. Y voy a hablar de esta herramienta de rectángulo y cómo podemos usarla y cómo hay diferentes propiedades. Deja que espere y cómo podemos crear un bonito botón de aspecto con directing. De acuerdo, así que voy a seleccionar nuestra prensa son y vamos a arrastrar por aquí y crear un rectángulo como este. Y se puede ver en el lado derecho tenemos el ancho y la altura. Vamos a ponernos a 75 en la altura de 60. Picks está aquí. Por lo que lo hemos fijado en 60 y el hiatus en 75. Ahora puedes ver aquí tenemos el primer control, que es esta opacidad, que es como están de vuelta. Será. Y voy a dejarlo 200%. Entonces el siguiente es radio de esquina. Entonces si quería estar por ahí, me voy de pie. Usa algún radio de esquina como seis por aquí. Ya puedes ver ahora son 100. Entonces si d seleccionado para conceder Ok, si quieres diferente por diferentes razones para cada esquina, vas a seleccionar esta. De acuerdo, entonces si presiono cero aquí y también cero para este. De acuerdo, así que ya puedes ver ahora tenemos dos esquinas carga ni truncada. De acuerdo, así es como puedes hacerlo. Entonces si quiero 32 por aquí, puedo tener algo como esto. De acuerdo, así que voy a presionar con el dedo del pie este. Entonces si quieres una forma de píldora, puedes aumentarla a, como, 39 o algo así. Soy este 1 39 y puedes conseguir este sido enviado. Pero entonces tenemos estas dos propiedades, Que es una es Phil, que es el color. Entonces lo voy a llenar con un bonito color azul. A lo mejor esta tienda Buchler por aquí así. De acuerdo, entonces tenemos esta frontera. Creo que lo vamos a quitar ahora mismo. Y si miras las propiedades del borde, puedes ver aquí es cuánto quieres que el borde alrededor de él y llene el borde será Debe ser de un trazo. El Bader debe estar dentro. Estos están fuera de nuestro en el centro. De acuerdo, s. así que voy a usar afuera y vamos a cambiar el tamaño del dedo del pie 10 píxeles. De acuerdo, así que ahora puedes ver aquí Tenemos la selección y la frontera está fuera de esto. De acuerdo, entonces voy a usar algún borde fuera de este color como este solo por mostrarte lo que podemos hacer con él. De acuerdo, entonces tenemos esta sombra y sangre de fondo. No voy a hablar de la sangre de fondo. Vamos a hablar de ello en la siguiente lección ahora mismo, vamos a añadir algo de dedo del pie sombra este botón, y se puede ver que tenemos esta posición vie y esta sangre. Entonces este es básicamente el radio de sangre. Hasta dónde va a desenfocar la sangre del radio. Esta sombra. De acuerdo, entonces si lo pongo a 20 se puede ver ahora la sombra está más borrosa en esta zona. Si miras de cerca, acuerdo, ¿por qué la posición es estos dos hacha? ¿ Y por qué la posición está fuera de tu sombra? De acuerdo, entonces si quiero dedo del pie, hazlo un poco más por debajo de mi forma, voy a añadir más de yo y puedes ver No, es en esta zona. Lo es. No lo sé. De acuerdo, Así también, puedo moverlo horizontalmente en la dirección. Entonces si añado 50 se puede ver ahora está del lado derecho. Por lo que X es el momento en la destrucción. También puedes poner valores negativos por aquí menos 10 y va a ser en esta zona por lo que también puedes usar menos nueve. Si quieres, se va a mover en la parte superior. Entonces, ¿así es como vas a poner tu sombra? No. Si quieres el color fuera de tu sombra, puedes hacer click en esta zona y puedes establecer el color fuera de tu sombra. A lo mejor quiero algo de sombra en la gama brew de color azul. Y ah, esta es la opacidad de tu sombra. Yo quería a Toby como 20% de descuento en pick, 30% transparente. Entonces puedes ver ahora la sombra es así. Entonces así es como vas a usar las sombras y cosas diferentes con tu forma, rectángulo y ah, todo esto se trata de este rectángulo. También puedes alinearlos alineación. Voy a hablar de alineación en otra lección. Y también se puede llegar a ella. Pero normalmente no necesitamos repetirlo así. Pero si quieres, puedes hacerlo. De acuerdo, así que voy a volver. Vamos. Consulta tu control, Z Y estas son todas las propiedades. Si tienes alguna pregunta sobre hacerme y tratar de crear a alguien así, me voy de pie. Ponle un poco de texto sobre él. Hola, querida. De acuerdo, algo así. Y voy a presionar V y la exportarla en el medio y cambiar su color de relleno dedo del pie blanco. De acuerdo, así que vamos a moverlo un poco hacia abajo. De acuerdo, Así que 16 cerdos están en la parte superior y 17 picos en la parte inferior. Entonces si puedes despejar algo como esto, me encantaría verlo y probar el dedo del pie. Muéstrame los botones que puedes crear en él. Y me encantaría revisarlos y ver qué se le puede ocurrir. Vale, Entonces todo esto se trata de cómo puedes crear diferentes tipos de botones redondeados, redondeados , cuadrados de esquina o Bill guardado, pero ansf usando x d Pasemos a la siguiente lección. 14. Fondo y desenfoque: Hablemos de objeto. Desenfoque de sangre y fondo. Hecho en Adobe X'd. Estos dos efectos son muy geniales. Uno de ellos. Yo uso mucha sangre de fondo. De acuerdo, entonces les voy a mostrar ejemplos apagado, ambos fuera de ellos cómo usarlos correctamente. De acuerdo, así que empecemos por usar sangre objeto o esto de nuevo en sangre. Necesitamos algo de imagen. De acuerdo, Así que voy a arrastrar y soltar la imagen en este tablero de arte, que es el iPad, que es el iPad, y voy a alinearlo del dedo del pie en el medio y presionando turno. Y aunque voy a hacerlo un poco más pequeño gracias. Entonces algo así. De acuerdo, entonces tenemos esta imagen ahora. Yo quiero una sangre de fondo para eso. Necesito cualquier forma. A lo mejor voy a usar este rectángulo y voy a usar el todo arrancado este lienzo prensa nosotros y no, este rectángulo está seleccionado. La imagen está detrás. Entonces no, voy a usar mis antecedentes. Por lo que una vez que haga clic en esta sangre de Bagram, se puede ver todo el fondo está borroso. Ocultemos esta frontera y puedes cambiar la cantidad del sangriento deseo. Entonces tal vez quiero tanta sangre. ¿ Quieres que sea brillante en el lado vital? O querías ser un oscuro en el lado más oscuro. Se puede ver que el efecto es diferente y también la opacidad. Yo no uso tanto. Se va a cambiar la opacidad de este efecto, así que manténgalo del pie 0%. De acuerdo, entonces tal vez algo como esto y algo así y lo voy a extender fuera de esta zona. ¿ De acuerdo? Está bien. Entonces así es como usamos la sangre de fondo. Entonces aunque quieras usarlo en el medio así Así que tal vez solo quiero que esta zona se borre. Puedo usar eso de igual manera así. OK, entonces esta forma es básicamente nuestra principal área de sangre de fondo. Por lo que esta forma va a definir qué área va a ser borrosa. Entonces tenemos esto. Si vas a este desplegable, tenemos este plan de objetos el cual se va sangre del dedo del pie. Este Onley este objeto. Entonces si hago clic en objeto que se puede ver ahora nuestro rectángulo es básicamente sangre ni el fondo. Entonces si te cambio el dedo del pie esculler negro o algo así Ok. Por lo que puedes ver ahora esta forma en realidad se está mezclando en el fondo ni en el fondo. De acuerdo, así que esta es la diferencia entre el desenfoque de objetos y una sangre de fondo que he usado en mi aplicación móvil Vas a diseñar al final de este curso, así que mantente atentos, y este es un efecto muy cool. Se puede utilizar este desenfoque de fondo en muchas ubicaciones y se va del dedo del pie. Haz visible tu texto y tus botones si el fondo está muy ocupado. Entonces esto se trata de la niña Bagram y la sangre del objeto. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección. 15. Herramienta de Ellipse: hoy, voy a hablar del taburete de labios y ah, su propósito principal. Por qué lo usamos. Y es de dedo muy rápido, ya sabes, recorta más de mis imágenes de avatar. OK, así que vamos a hacer click y arrastrar así, y estoy sosteniendo turno para hacerlo en proporción. Y si quería estar creciendo desde el centro, voy a presionar la tecla de opción de arte junto con mi tecla de turno. De acuerdo, entonces estoy sosteniendo turno y arte y opción clave ahora mismo para hacerlo así. De acuerdo, ahora lo voy a colocar en el medio así. Voy a ocultar su borde, y voy a cambiar su color de relleno para que puedas verlo fácilmente. Ahora voy a arrastrar y soltar cualquier imagen sobre ella para crear un avatar. Rápidamente. OK, ahora puedes arrastrar y soltar cualquier imagen sobre esta elipse que puedas ver u escuchar para crear un avatar rápidamente. Entonces lo que básicamente hace es recortado dentro de este círculo. De acuerdo, el problema con ello es que no se puede cambiar ni mover esta imagen. De acuerdo, entonces lo que puedes hacer es solo que puedes aumentar el tamaño de este círculo. Se va dedo del pie. Aumenta la imagen. Y también puedes cambiar la forma que puedes ver por aquí. De acuerdo, Ahora es una forma de huevo, y la imagen es que se puede ver ajustando con esta nave. Por lo que en su mayoría utilizamos herramienta Ellipse para este propósito. Las otras opciones que tenemos para un taburete labial son casi las mismas. Tenemos frontera, relleno, opacidad, sombra y sangre de fondo. No hay mucho en ello. Por lo que la mayoría de las veces lo usamos para este propósito. Simplemente arrastramos y soltamos cualquier imagen en esto para crear un radar. Nuestros iconos así. Entonces eso es todo sobre el paseo de deslizamiento. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 16. Conceptos básicos de la herramienta con bolígrafo en XD: en esta lección, vamos a crear estos tres iconos. Uno es este queso. Uno es este icono del mapa, y otro es este icono del chat usando Adobe Excuse. Entonces primero vamos a aprender a usar gastar dos buscando. No recomiendo que sigas adelante y crees todos los diferentes tipos de iconos fuera usando Adobe Extra porque no está destinado a crear AARP. Los iconos son iconos. Simplemente puedes usar iconos SPG de todas las líneas. Hay muchos gratis en línea en bibliotecas. Off SVZ iconos son así que primero vamos a ver cómo usar Bento. Entonces voy a crear otro tablero de arte caducidad de ese iPhone X y asumir en un poco. Y primero vamos con el dedo del pie. Selecciona esta herramienta de lápiz, y así es como puedes crear formas simples. Haga clic, haga clic, haga clic, haga clic, haga clic o haga clic en Aceptar y vuelva a hacer clic en el primer punto y se va a cerrar la nave. Vas a presionar V, y ahora puedes mover esta forma por aquí. Entonces así es como se crean naves simples ahora en contra, como esta herramienta de lápiz, haga clic y haga clic y arrastre para obtener algunas esquinas redondeadas y luego voy a dar clic, estaban aquí y luego dar clic atrás. Entonces aquí he creado un arco por aquí. Por lo que si haces doble clic en esta forma, puedes ver puedes hacer clic en cualquiera fuera de thes y ahí están los manillares. Puedes ajustarlos después que quieras, como quieras. Por lo que se están moviendo a medida que muevo esto. De acuerdo, así que he seleccionado este. Entonces si solo quiero mover este y no debe afectar a éste presiona inviertes tu opción o Arch. De acuerdo, Entonces en tu teclado, si presionas tu tecla are y luego haces clic y mueve esto, se va a mover. Sólo éste. De acuerdo, así que estas son las dos asas, Así que ahora esto se va a mover de forma independiente. Entonces si lo alineo con esto, se puede ver que ahora es una línea recta. Entonces si d seleccionado, esta es una línea recta. Esta es una línea curva. Entonces así es como controlas y editas tus partes y ah, diferentes puntos de anclaje. Entonces si hago doble clic en él, hay tres puntos de anclaje por aquí. De acuerdo, Entonces uno es éste. También puedo usar algo como esto. Entonces estoy presionando dedo del pie de cambio, alinearlo en algún ángulo perfecto. Entonces es ahora mismo, creo que 90 grado o quería graduarse. Entonces así es como he creado este bache. Muy bonito. Bump suave. De acuerdo, entonces así es como usamos nuestro pento. 17. Herramienta de bolígrafo para crear íconos: De acuerdo, así que voy con el dedo del pie a eliminar esta forma. Y ahora voy a empezar con el rectángulo Tauqir, este primer ícono. Entonces vamos a crear un rectángulo. De acuerdo, entonces, presiona V Y ahora tenemos el ángulo de secta. Haga doble clic en él. Y tenemos estos cuatro puntos de anclaje. Ahora vamos a seleccionar Ah, mental En este momento. Si ni siquiera seleccionas un lápiz, puedes ver el lugar, Khobar. En estas líneas donde puedes poner algunos puntos de anclaje, se vuelve del dedo del pie mental, Así que solo tienes que hacer click una vez pero aquí, una vez por aquí y uno en alguna parte. Por lo que agregamos tres puntos de anclaje más a esta nave. Ahora lo que voy a hacer es ir dedo del pie prensa V, y lo voy a mover al fondo así. De acuerdo, entonces ahora tengo esta nave básica, Así que si vuelvo a hacer doble clic en ella, puedo seleccionar este punto de anclaje y puedo moverlo. Si quieres algo mal por aquí, haz doble clic en él. Y vas a conseguir esta redondeada alrededor de nestlé aquí y puntos de anclaje más manillares para controlar la redondez fuera de tu forma de nuevo para que puedas ver ahora he redondeado esta zona así. Por lo que esta es una forma de crear múltiples formas diferentes a partir de barcos básicos. De acuerdo, ahora vamos a crear este queso, acuerdo? Entonces a la mayoría de los ratones realmente les va a encantar esto si están viendo a mi papá, de Dorian. De acuerdo, así que vamos con el dedo del pie, crear este un clic una vez, clic dos veces, y tengo manillares por aquí. Esta es otra forma, y yo sólo voy a dar clic aquí, y luego Entonces lo que voy a hacer es ir de pie justo a ellos ahora mismo así. Y voy a presionar mi tecla de opción de arte para mover esto como, Vale , entonces , no, se endereza. Y movámoslo para hacer una perfecta Ella es así. De acuerdo, entonces tenemos nuestra nave. Hagamos que el borde sea dos píxeles. Y durante el dedo del pie de color de relleno, este amarillo todo puede ser un poco más claro, amarillo como este. De acuerdo, entonces tenemos sobre forma. Vamos a añadir algunas formas más por aquí con este taburete de elipse. Entonces estoy presionando shift toe despejado, shift y drag para crear thes círculos así. De acuerdo, entonces tenemos nuestras formas ahora podemos cambiar el color de la botella a éste, que es un amarillo más oscuro y ah, tenemos un destino muy. Caray, No es bueno para llamar a un paseo Si tienes como yo. Tengo colesterol alto, por lo que no es bueno para mí, pero aún así. De acuerdo, entonces aquí tenemos nuestro icono de queso. Entonces así es como se crean formas personalizadas, Icon. Ahora voy a crear éste. Esto es básicamente alcalde por maíz. Es muy fácil. Simplemente selecciona este taburete de elipse criado, Ah, labios por aquí. Y lo que voy a hacer es que voy a presionar V DoubleClick y sólo quiero cambiar este manillar. Por lo que acabo de seleccionar este, este punto de anclaje, y voy a presionar las teclas de mayúsculas y de flecha para moverlo en la parte inferior así. De acuerdo, ahora nuestra forma básica está completa. Lo que voy a hacer es hacer doble clic aquí para conseguir nuestra esquina afilada. De acuerdo, así que este es muy bonito truco DoubleClick toe obtener esquinas redondeadas de manera diferente para conseguir esquinas afiladas . De acuerdo, así que tengo algún rincón afilado por aquí. Ahora voy a crear otra elipse de forma pequeña dentro de ella así y solo selecciona la forma externa y, ah, solo quita el borde y usa el color de relleno a algo así como, Sí, voy a utilizar este golpe. Usemos este azul. De acuerdo, entonces para esta, voy a quitar la frontera, y voy a añadir algo de sombra aquí, que va a ser cero cero y seis. De acuerdo, no eclipsar es que iban a saquear esta forma y simplemente alinearla aquí así . Selecciona estos dos, y lo voy a alinear en el medio así. De acuerdo, así que puedes ver por aquí nuestro ícono del mapa también está construido. Puedes ampliarlo si quieres. Puedes hacer que sea un poco vital para que se vea más profesional. Está bien. Está bien. Por lo que así es como puedes crear diferentes iconos usando mental. No te recomiendo que sigas adelante y crees algo como éste o algo así puedes usar iconos SVG ya construidos, creados profesionalmente. SPD significa gráficos vectoriales escalables y en las próximas lecciones, pocas lecciones o en las últimas lecciones donde vamos a crear nuestra app. Te voy a mostrar cómo usar iconos SPG. Entonces hasta entonces, voy a ver pronto. En otra lección, pasemos a la siguiente lista. 18. Herramienta de línea: Ahora, hablemos de la herramienta de línea. Si hacemos click aquí o presionamos l es una herramienta de línea y puedes crear una línea o separador con ella. De acuerdo, así que esta es nuestra línea. Esta es la frontera fuera de esta línea. Vamos a crear un borde de cinco píxeles como este. ¿ De acuerdo? Entonces también, se puede ver que estas opciones están ocultas por aquí. No estoy seguro de si están habilitados o no en primer lugar. Vamos a crear en la línea. De acuerdo, Entonces esto fuera de la frontera no es opción para éste. Es sólo una línea. Y, ah, puedes cambiar el color si quieres. Ah, y también la opacidad, sombra y la espalda sobre la sangre. Estas son las cuatro opciones que tenemos por aquí. El único uso de la herramienta off the line, que veo es que se va a utilizar para el texto del enlace. Entonces si tengo un enlace por aquí, puedo poner una línea y así. De acuerdo, así que esta es la única noticia que puedo pensar. Y tú diseño para esta línea a buscar. Entonces eso se trata de la herramienta de línea. Si tienes alguna pregunta, me lo has hecho. Pasemos a la siguiente lección donde vamos a ver la herramienta de texto 19. Herramienta de texto en Adobe XD: No. Vamos a hablar de esta herramienta de texto, jabón, jabón, lujurioso o texto. Y me voy a arrastrar por aquí así para crear un párrafo. Todo lo que puede simplemente hacer clic en cualquier lugar para borrar. Justo en la línea de Dexter aquí. Entonces voy a crear un párrafo por aquí. De acuerdo, Ahora, tengo algo de texto en mi párrafo. Simplemente puedo hacer click en cualquier otro lugar para crear un párrafo y los pechos V y me puedo extender se contratan mediante el uso de los mangos que puedes ver por aquí. De acuerdo, Así que voy a usar esto así y simplemente moverlo aquí así. ¿ De acuerdo? Ahora, del lado derecho, se puede ver que tenemos texto. Este es el teléfono. Puedes cambiar el teléfono, lo que quieras, Toe. Y entonces aquí tenemos el fuerte. Nos haríamos todos los estilos fuera diferentes. Y este Ford, esta es la talla que quiero 24. Puedo seleccionar 24. Ahora se esconde. Es hacerlo lleno. Y, uh, que algunos adentro para ver el tamaño real del corrector. De acuerdo, entonces tenemos esta alineación. Este es el centro. Esto se intenta, alineado, dejó una línea. Y esta es la diferencia entre nuestro texto de idea o se puede ver párrafo y un texto de punto de línea . De acuerdo, entonces aquí tenemos este texto puntual. Es mejor para la alineación. Ya puedes ver ahora es un cuadrado fijo. De acuerdo, entonces si intento dedo del pie cámbialo. No es básicamente un párrafo. Se trata de un párrafo. Por lo que esta es sólo una nueva característica. Agregaron en ella. Entonces puedes subrayarlo si quieres. Y luego tenemos este espaciado de líneas el cual puedes establecer dedo del pie algo más si quieres. Ah, como lo he puesto en 32. Y esto es cactus meando Qué ancho debe ser el espacio dentro del director. Entonces si yo, um él tenía 10 o 25 años, se puede ver ahora el espacio entre las letras es mucho. De acuerdo, entonces estos son los principales controles de los que tenemos otra vez. Los mismos controles similares, como todos los demás rectángulo. Laura, las herramientas. Tenemos un pase. Nosotros hemos fallado. Tenemos fronteras, sombra y fondo, fondo sangre, sangre. No vamos a usar en ninguna parte de esta única sombra. A lo mejor vamos a usar cuando hay un fondo oscuro o algo así como ese borde. Creo que no vamos a usar el fondo. Entonces sólo quédese con el Phil y ah, usa cualquier color que te guste. Al igual que éste. Y eso es todo sobre esto. Ah, video de texto. Ahora solo viene un tiburón a esta zona, que es que sería genial si pudiera ver diferentes cuatro estilos o cabello. Y ahora sólo puedo ver el nombre del teléfono fuera de la fuerza parte Nordea cómo se ve o cómo se siente. De acuerdo, así que en realidad tengo que pasar a eso para ver ese estilo de fuerza. Entonces creo que tal vez podrían básicamente haberlo hecho solo a un amplio más procesamiento y hacerlo veloz. De acuerdo, así que tal vez en las versiones posteriores, podrían agregar aquí algún textil de vista previa para diferente fuerza. Entonces eso se trata de la herramienta de texto en adobe X t Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección. 20. Herramienta de polígonos - ACTUALIZación: De ninguna manera vamos a hablar de una herramienta muy nueva que se ha introducido en Adobe EC. Steve pica. Están manchando en herramienta y puedes además por qué, demasiado lijado o simplemente haz clic aquí. Y ahora vamos a dibujar un polígono. Entonces aquí lo estoy secando. Si puedes sostener un turno de prensa, va a ser en proporciones y simplemente dejarlo así. Ahora se puede ver a la derecha aquí en la apariencia apuñalada, podemos controlar su opacidad. Podemos cambiar su tamaño Concha, por ejemplo, en los sitios que queramos, como cinco bandos y podemos cambiarla para pelear. También podemos cambiar su color relleno. Por ejemplo, Si quiero tenerlo, tal vez en este color y quiero ocultar el borde, puedo ocultar el borde, y también puedo tener un radio de esquina fuera como 50 20 o cosas así, algo así como esto. Y también puedo controlar el radio de esquina desde esto para que veas que este es un pequeño círculo dentro de él. Si quiero cambiar el radio de esquina, puedo usarlo. De acuerdo, Entonces si quiero dedo del pie tienen como ocho esquinas para conceder. Puedo tener ocho esquinas, así que esta es una herramienta muy útil. Si quieres crear algunas flechas o cosas así. Creo que esta es una de las formas básicas distintas del rectángulo, elipse. Y esto es polígono o triángulo. Entonces necesitábamos algo así. Tanques de espada en obedecer. Ha agregado algo como esto, Senador B X d Espero que lo pruebe y cree algunas formas usando esta herramienta poligonal. Es casi similar a otro rectángulo y elipse on. Y eso se trata de esta nueva herramienta poligonal. Pasemos a la siguiente lección. 21. Colores y paletas: hoy, voy a hablar de colores y cómo podemos crear quienes crean esquema de color en Adobe X'd. De acuerdo, así que empecemos. Empezó con este tablero de arte, que es el iPhone 678 Y lo que vamos a hacer es simplemente crear un rincón muy bonito, redondo, con tierra. Gran Bretaña. Voy a presionar la televisión y moverla y vamos a crear unos seis cerdos de la equivocación. Está bien, así que se ve genial. De acuerdo, entonces me voy del dedo del pie, quita la frontera. Y cuando voy a este color de relleno, si haces click por aquí, puedes ver aquí tenemos nuestros colores. De acuerdo, entonces aquí tenemos esto. Ah, bar donde podemos cambiar el tono de qué color quieres. Quién es básicamente el color significa color. De acuerdo, entonces tal vez si me gusta entrar en esto, tú y yo queremos que esté por aquí, ¿de acuerdo? Entonces cuando me muevo arriba en destrucción y el matiz o saturación apagado, este color en realidad está aumentando, Vale, Así que cuando me mudé en área de descubrimiento, se está volviendo más oscuro en esta zona. Se va a hacer más ligera. De acuerdo, agrega invitación a ella. Entonces me voy dedo del pie mantener casi en el medio por aquí. ¿ De acuerdo? Ahora bien, esta es la opacidad. Entonces si querías ser transparente, puedes mover esto, creo. Ah, debería quedármela aquí. De acuerdo, Entonces así es como tu caja de color sólido, Ok. No. Ah, aquí hay pocas opciones que vamos a discutir una. ¿ Es este valor decimal exacto? Entonces esto es lo que van a necesitar tus diseñadores web. Color del dedo del pie los británicos. De acuerdo, así que esto es para desarrolladores. Entonces si quieres, puedes convertir este rgb más, que es rojo, azul, verde y Alfa RGB. Está bien. Y, ah, normalmente nosotros los diseñadores, normalmente uso este matiz, saturación y brillo, que es más fácil de controlar y dedo del pie más fácil. Ya sabes, yo solo tus colores en crear hermosos esquemas de color. Usando esto, es SB. De acuerdo, entonces aquí te tenemos que saturación. Cuánto color quieres poner en saturación fuera de ese color. Y este es el brillo. De acuerdo, entonces, ¿qué tan brillante debe ser jocular? Entonces si lo reduzca al 90% se puede ver ahora este color se ve creado es un color azul un poco más oscuro . De acuerdo, vamos de nuevo a este año. ¿ De acuerdo? Por lo que no puedes agregar tu dedo de color tu estiramiento de color. Así que solo presiona este icono más y puedes ver aquí tenemos $1 agregado por aquí. De acuerdo, Ahora, si quiero agregar una circular, la mejor manera es simplemente cambiar esto. De acuerdo, así que quiero que esto vaya a lo que es crear. Y tal vez sólo dos muy algo. Yo voy con el dedo del pie. Ah, reduce su brillo dedo del pie 80%. Veamos cómo surge este color. Entonces voy a añadir este para entonces podemos ir a algo así este negro oscuro. Por lo que puedes ver aquí. He creado una paleta de colores muy bonita y se puede ver la mayoría de los colores que he generado por aquí. Están realmente emparejando. Genial. OK, entonces estos son todos colores médicos, este Seong azul y este color azul. Ahora, todo esto se trata de este panel de color. Cómo se puede ser un esquema de color diferente por aquí, moviéndose en este espacio 22. Gradientes de color en Xd: Ahora vamos a ir a este radiante lineal. Tan indulgente. Brillante es que tenemos uno y dos colores y este es el ángulo por aquí de arriba a abajo. Por lo que 90 grados es el ángulo de tu ingrediente. De acuerdo, entonces tuvimos mezclando juntos Así puedes ver No, si muevo el ángulo cómo está cambiando el ingrediente. Entonces si lo muevo así, Ok. Y, ah, cambiemos los colores por otra cosa. Por lo que puedes ver ahora he creado un botón int muy bonito, codicioso por aquí. Y si quiero cambiar el ángulo, puedo cambiar de ángulo así, tal vez moverlo así Así puedes ver ahora cómo se ve genial. Ahora de nuevo, voy a dar click en esto y me voy de pie, Phil. Y se puede ver aquí tenemos nuestro radiante Tratemos de agregar disco. Radiante. Por lo que no está sumando por aquí. Entonces esto es una cosa. Creo que deberían tener algo. Eso si presiono este botón, debería agregar mi codicioso. Y por aquí. De acuerdo, entonces no está agregando por aquí, pero podemos agregarla a algo en otro lugar. ¿ Verdad? Haga clic y haga clic en este asesino de anuncios. De acuerdo, entonces una vez que agregue este color, va a estar en mis activos asesinos. Se puede ver por aquí. Esta es mi guía de estilo. Básicamente. Entonces lo voy a cubrir todo después. Dos asesinos en adobe Extra. De acuerdo, entonces aquí tenemos este color. Entonces tenemos thes cuatro colores. En este momento, estos no se suman a esto. Entonces podemos hacer es solo crear unos rectángulos Voy a crear el lunes enredo. Y lo voy a duplicar presionando art u option key que simplemente arrastrándolo así . Y como esta polla ahora, voy a usar los mismos colores que quiero aquí. Basta con quitar la frontera y voy a usar este sculler que decolorar. De acuerdo, entonces descubierto Ahora aquí está mi esquema de color. Acaba de crear esto al instante, así que no te preocupes mucho por ello. ¿ Eso qué es este esquema de color? De acuerdo, así que me voy dedo del pie como, seleccionar todos estos colores y voy dedo del pie click derecho y añadir color. Está bien. Por lo que puedes ver No, tengo todos mis colores mover a mis activos. Está bien. También puedes advi color o variaciones de blanco o pastar. Si quieres agregarlo a tu esquema de colores. De acuerdo, así que esta es la forma en que puedes agregar INTs codiciosos y todo el colesterol, tu esquema de color o la guía de estilo. Está bien. Guía de estilo es básicamente el dedo guía para tus desarrolladores y tus diseñadores que qué colores se utilizan para qué propósito y cómo podemos construir ese sistema de diseño usando esos colores . De acuerdo, así que ahora, llegando al último punto, que es un ingrediente de Zadie, acaban de agregar este ingrediente realmente, que es un int codicioso desde dentro. Se está moviendo en círculo, así que hagámoslo un poco más grande así. De acuerdo, entonces hagámoslo un fondo. Entonces me voy dedo del pie, crea una bolsa como esta. Es más visible. Este tipo off radiante es más visible cuando se tiene un fondo. Está bien. Por lo que puedes ver ahora está buscando rejilla dentro de una bolsa redonda. Cambiemos nuestros colores a este. ¿ De acuerdo? Uno es un poco más oscuro. Uno en el 2do 1 es un poco más ligero. Quitémoslos. De acuerdo, entonces vamos a experimentar con estos. Cambiemos este color más oscuro con este azul. Y, uh bien, Así que se ve genial. Vamos a moverlo, Añadirle algunos puntos más. Así que acabo de hacer clic aquí y le agregué un punto más. De acuerdo, entonces aquí voy a cambiar el color a negro. O tal vez algo más afilado que así puede No. Te voy a decir de corazón estos puntos radiales de ingrediente. De acuerdo, Así que el único punto que puedes eliminar es el punto que has creado hasta ahora un ingrediente. Debe haber dos colores. De acuerdo, así que no lo son Ah, no soy capaz se puede decir borrar estos dos puntos y esto es a la derecha. La mayoría o 0% y 100%. Y el punto que creé en el medio lo completé simplemente presionando delete en mi teclado. Todo lo que puedo alejarlo así y arrastrarlo, y se va a borrar. De acuerdo, entonces estos dos colores, son, ya sabes, necesarios para este int codicioso, y puedes controlar el ingrediente desde aquí. De acuerdo, así que si quieres, es algo como esto. Se puede ver ahora esto se ve un gran fondo. De acuerdo, entonces pongamos algo de texto aquí para que veas lo que hice. Acabo de agregar una línea con el espesor de cinco. Y no sólo me invitaba algún texto. Hola, Doctor. Y esto se ve genial. De acuerdo, entonces puedes ser este tipo de fondos para tus pantallas de inicio de sesión o pantallas de registro. Está bien. Con algún ingrediente en ella. Entonces todo esto se trata de los colores y el ingrediente de radio en colores sólidos e ingredientes lineales . Y estos tres colores apagados de Moore Hexi decimal RGB y ser normalmente estaremos usando este o Hexi decimal para Web mayormente, pero creo que éste es perfecto para crear los esquemas de color, ¿de acuerdo? 23. Usar coolors.io para crear esquemas de color: una herramienta la cual recomiendo para generación de esquema de color es este uno enfriadores dot ru? Supongo que puedes buscar este nombre en Google. Voy a compartir la u R l Así que ve a esto. Generar? Sí. Entonces voy a ir a esto generado y empezará con algunos colores aleatorios. De acuerdo, Entonces lo que sugiero es que primero intentes usar un color que ya tienes. De acuerdo, así que me voy a basar un color azul de mi esquema de colores o dos colores de ahí para sacar el resto de los colores. De acuerdo, entonces volvamos a X'd. Ahora. Lo que voy a hacer es que voy a copiar este color azul y este Ah, ver, ver, en un dedo del pie de color, mi esquema de color. De acuerdo, así que me voy de pie, copia este valor de salida decimal valor, y voy a volver por aquí. De acuerdo, entonces yo corporativo de un color, y lo voy a encerrar por aquí. De acuerdo, Así que presiona esta cerradura y es Te va a mostrar cerradura cerrada. De acuerdo, entonces voy a copiar a la segunda chica por aquí, y también voy a bloquear este color. ¿ De acuerdo? Ahora, tengo que registrar colores. Ahora voy a presionar barra espaciadora para conseguir unos colores más. Colora América a estos dos asesinos. De acuerdo, entonces tenemos este color morado. Esto se ve bien. Además, este color azul soy me gusta este color azul. Y también podemos usar algo como esto que es un poco naranja. Ahora, en mi esquema de colores original, uso algo más cercano al amarillo y ah, este morado es un poco morado oscuro para que puedas crear cualquier esquema de color. No, voy a volver a presionar barra espaciadora y me gusta este color. De acuerdo, entonces voy a presionar de nuevo la barra espaciadora para que puedas bloquear cualquier color que te guste. De acuerdo, así que he encerrado a estos malditos. Entonces éste sólo va a cambiar. Entonces no me gusta este color demasiado amarillo. A lo mejor este es bueno, Onda. A lo mejor voy a probar un par de tiempo más. Me gusta mucho este color amarillento, aunque es un poco aburrida, pero creo que va a ir bien con estos fondos. De acuerdo, Entonces una vez que tenga este esquema de color generado, puedo sacar una imagen o foto de esto o Ah, puedo exportarlo en un archivo PDF o PNG o SVG cinco. Entonces usemos el archivo SVG. Por lo que está claro creado este archivo SVG. Ahora voy a importar este archivo svg a mi, um X'd. De acuerdo, así que menos. Vamos a moverlo por aquí. No, puedes ver aquí tenemos este esquema de color, archivo svg, y, uh, me voy de pie. Hazlo un poco más pequeño así. Diluvamos este fondo y todo lo demás. Ahora puedes ver que tienes este esquema de color y es inevitable. Puedes ver aquí tenemos 45 cajas y puedes cambiar tu esquema de color. Entonces así es como te aconsejo que te lo tomaras. Esquemas de color. Debes tener al menos uno o dos colores para empezar. Podrás agarrar esos colores del icono o logotipo de la app de esa empresa y empezar desde ahí. Entonces todo esto se trata de colores y cómo crear esquemas de color. Al instante con este taburete y estos pocos consejos. Espero que disfruten de esta lección. Pasemos a la siguiente 24. Máscaras de Xd: en esta lección, vamos a aprender sobre enmascarar y cómo podemos hacerlo en un no b x d Hay dos maneras, y una es ah, que realmente me encanta es cómo podemos donde podemos controlar nuestras mezquitas y la imagen dentro de ella . De acuerdo, así que ahora mismo vamos a crear este, y se puede ver si hago doble clic en él, puedo mover la imagen así. Entonces esta es una mezquita controlable. Ahora bien, si creo un elipse simple como este, Ok, entonces les voy a mostrar a los dos. Maestro, éste es el sencillo más simple, y no es irritable. Entonces solo voy a arrastrar y soltar esta hermosa imagen de chica en esta. De acuerdo, entonces tenemos este clip dentro de esta elipse, y puedes ver que no podemos editarlo. Entonces si hago doble clic en él, va a editar la forma, pero no puedo mover la imagen. De acuerdo, entonces esta es su limitación. Por lo que esta es una forma de crear mezquitas al instante. Ahora la voy a dirigir, y vamos a crear esta mezquita. Está bien. Entonces, masa personalizada. También voy a borrar este. Entonces, primer lugar, todo lo que vamos a hacer es que ya sea puedes usar cualquier rectángulo en la forma que quieras, o puedes construir tu forma con un mental. Entonces voy dedo del pie aquí la forma con mi herramienta de pluma, click, drag, click, drag. Y voy a crear algo como esto. Tan solo un barco a medida. Entonces tengo esta sobrecarga de forma personalizada, y tengo este rectángulo por aquí. De acuerdo, eso es redondo este rectángulo. Pixeles del dedo del pie. De acuerdo, entonces tenemos dos formas por aquí ahora mismo. Uno es éste. De acuerdo, entonces este es otro. De acuerdo, entonces tenemos esta parte, que es Ah, forma personalizada. Vamos a nombrarlo forma personalizada. Entonces desarrollé, como, esta área, y uso esta cosa y vamos a crear Call this rectángulo. De acuerdo, entonces mi sexo ortográfico, Así que no te preocupes por ello. De acuerdo, entonces ahora lo que vamos a hacer es esa racha es que te vas de pie. Ah, arrastra y suelta cualquier imagen. Entonces voy a arrastrar y soltar una imagen por aquí así. De acuerdo, Ahora la imagen es muy grande, así que solo puedes acortarla con turno y arte la voy a usar y voy a hacerla corta . Basta con alejar, controlar o comando menos, y vamos a usar este. De acuerdo, así que así. De acuerdo, así que lo voy a colocar por aquí para que puedan ver la forma. Está bien. Ahora, el truco es que vas a usar Voy a usar este rectángulo. Entonces voy a mover este rectángulo por encima de esta imagen en mi panel de capas. De acuerdo, así que ahora mismo estoy esto en estas capas, y esta imagen está por debajo, y el ángulo de secta está en la parte superior. No, voy a cambio de dedo y haga clic en puerto fuera de ellos para seleccionar barco de todos ellos. Puedes seleccionarlos a ambos desde aquí. ¿ Verdad? Haga clic. Y se puede ver que hay una mezquita de opción con turno de barco. Control em o shift command M es una tecla de acceso directo, y solo puedes presionar esto y ahora se ha deslizado dentro de esta caja. Ahora, lo genial al respecto es que si me desarrollé como, puedo mover la imagen así. Entonces esto es realmente genial. Por lo que tengo más control en mi mezquita, y puedo cambiar la ubicación fuera de la imagen. A lo mejor quiero enfocarme aquí. Puedo usar algo como esto. De acuerdo, ahora aquí nos tenemos forma personalizada. Y de igual manera, solo lo maquillemos más grande y lo rotemos dedo del pie 30 así. De acuerdo, ahora voy a creer este, y voy a usar esta nave en su lugar. Y voy a importar de dedo este archivo, Sólo tienes que arrastrar y soltar, y es muy grande. Entonces voy dedo del pie, hazlo un poco más pequeño. De acuerdo, así que eso es casa. Fuera. Se puede ver que la imagen es demasiado grande para nuestra zona de recorte. Ahora son casi buenas. OK, entonces voy a mover esta forma personalizada por encima de esta imagen e ir a seleccionar ambos fuera de ellos presionando shift en mi teclado y click derecho y may mezquita con nave. Entonces tenemos una linda mezquita o aquí y eso es sólo moverse y ah, ve Algo así lo hacen más interesante. Y ahora se puede ver también puedo cambiar este idiota preguntante nuestras cabezas. Si hago algo como esto, puedes ver puedo cambiar el área de la mezquita ing, así que doble clic. Y también puedes cambiar esta mezquita en zona y luego también esta imagen para que puedas ver el cuadro limitador de esta pregunta India es diferente y esta imagen es diferente. Para seleccionar esta imagen se puede ver No, esta es de seleccionada por lo que puedo mover esto alrededor así y luego puedo volver a dar clic en cualquier otro lugar del dedo del pie, ver mi mezquita. Ok, entonces así es como puedes crear mezquitas en mezquitas personalizadas en Adobe X'd. Son realmente útiles en tu diseño. Espero que hayan disfrutado de esta lección y pasemos a la siguiente. 25. Estilos de personajes en XD: Ahora voy a hablar de las baldosas de práctica y cómo puedes reutilizar tus textiles en todo tu documento Un juego. Ahora, Ahora mismo, yo soy esto en esta profundidad patrimonial, que está por aquí. Vale, Así que te vas dedo del pie presiona este, y te vas del dedo del pie Ven a este activo así o todo en tus activos paso si sus colores, corrector, estilos o símbolos, son global. Entonces si cambias algo por aquí, se va a reflejar en todos tus tableros de arte. De acuerdo, Así que déjame ilustrar ejemplo fuera del estilo tractor y cómo podemos agregar pocos. Este es mi rumbo. De acuerdo, Así que he creado un encabezado lex changer, Sculler toe algo más como éste. Y lo voy a crear en un párrafo. Vamos a moverlo en dos líneas como esta. De acuerdo, así que este es mi rumbo, y luego me voy a crear el dedo del pie. Ah, párrafo por aquí. Utilizó regular. De acuerdo, Entonces este es mi párrafo, ¿de acuerdo? Y además, voy a cambiar su color por otra cosa. A lo mejor quiero un poco. Ah, gris claro color negro por aquí. Al igual que éste. Aparte de ah, pitch black. Ok, entonces sólo para diferenciar entre mi rubro en mi párrafo. De acuerdo, así que este es mi pantagraph. Añadamos otro enlace. De acuerdo, entonces home I links se dará click aquí para seguir adelante. Entonces este es mi enlace. Voy a usar color, que es éste para este enlace y voy a usar un subrayado. De acuerdo, entonces este es mi enlace. Este es mi párrafo. Este es mi rumbo ahora. Lo que voy a hacer es que quiero que todos estén en mis estilos de personaje. OK, así que voy a seleccionarlos todos y yendo del dedo del pie ¿Cierto? Haga clic y agregue estilo de carácter. De acuerdo, así que ahora puedes ver tenemos tres estilos. Me está mostrando el cuarto nombre. He usado esto. Ver Goy, tú yo y también diferentes tamaños y colores 48.20 punto. Es un poco aburrido, Grey. Es de un color oscuro, negruzco y luego tenemos esta diversión para nuestros dext links. De acuerdo, Ahora déjame mostrarte cuál es el poder apagado esto? Ok, entonces voy a presionar nuestra espinilla gota y voy a duplicar esto a otro tablero de arte. Entonces no tenemos a los libros de arte Vale, así que voy a cambiarlo. Haz algo. Esos están bien. Está bien. Ahora lo que vamos a hacer es que necesitamos cambiar el color de estos encabezamientos simultáneamente . ¿ De acuerdo? Ahora podemos hacerlo a partir de aquí en esto. Agrietado a un lado, ¿verdad? Al igual que en ello. Y me voy de pie. Usa algo más. Algo más como éste. Y voy a usar algún otro color. A lo mejor quiero que este color se pueda descubrir. Está bien. Ahora puedes ver cómo cambié instantáneamente todos los estilos de director, que básicamente son mis cuatro estilos. Y son globales. Entonces si lo cambio en un área, va a cambiar en todos los demás. De acuerdo, esto es realmente genial. ¿ De acuerdo? Entonces si quiero cambiar mis párrafos, Sí. Entonces, ¿dónde está mi párrafo? Creo que este es mi párrafo. Voy a editar su color. Yo no. Yo quería ser más licenciado. Puedo cambiar el color desde aquí. Ahora puedes ver que tengo cambio de grado de dedo sculler y también puedo cambiar otro revestimiento. Entonces si quiero cambiar, los Ford son el espaciado. Todo se va a cambiar. Entonces si quiero una tele ve por aquí y quiero que el espaciado sea línea. Hola, Toby. 28. Puedo cambiarlo de ella. De acuerdo, así que esto es muy útil. Puedes cambiar cualquier cosa al instante a través de todos tus diferentes tableros de arte. ¿ De acuerdo? Entonces si tienes, como, 20 tableros de arte son pantallas y quieres cambiar de rumbo, puedes hacerlo al instante. ¿ De acuerdo? Te va a salvar. Dunn está fuera de tiempo. Entonces, ¿así es como usas estos estilos correctores? Puedes agregarlas y puedes eliminarlas desde aquí. También puedes eliminar unos estilo de texto, estilo director. Y ah, así es como usas este power off estilos de director y será X t Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección. 26. Uso de guías en Adobe XD- ACTUALIZACIÓN: ahora. Recientemente en mayo de 2019 Adobe X T ha introducido una nueva característica, que es guías que fueron esenciales para cualquier herramienta de diseño. Y yo en este video, te voy a mostrar cómo usarlos y cómo copiarlos dedo del pie y otro tablero de arte. Entonces ahora mismo se puede ver que tengo en nuestra pizarra. Y si vas en la parte superior por aquí, puedes ver discutir er se ha cambiado a otra cosa. Entonces este espacio por aquí, vas a conseguir este y arrastrarlo y dejarlo así. OK, para que veas tenemos la navegación stop toe top donde tenemos ajustes de cuenta y botón Atrás . Entonces voy a tener algún guía por aquí. Entonces voy a ir otra vez por el lado izquierdo y voy a agarrar otro y dejarlo por aquí, luego uno debajo de uno, y lo voy a dejar por aquí así. Usemos otra, y me voy de pie. Ponte del lado derecho por aquí. De acuerdo, entonces tenemos derecha e izquierda Margen, stop, margen Y también podemos establecer nuestro marginal inferior aquí, y nuevamente necesitamos arrastrarlo desde arriba y dejarlo por aquí justo debajo de este siguiente botón. De acuerdo, así que hemos hecho sobre estas guías. Si quieres esconderlos, sólo tienes que localizarlos. S o.- Lo que voy a hacer es que voy a crear un nuevo tablero de arte. Vamos a crear otro tablero de arte X s y vamos del dedo del pie. Copia a todos estos chicos haciendo click derecho. Y veamos dónde tenemos guías, guías copia. Y aquí vamos con puntera press control o comando V, o puedes basar nuestras guías para el cabello o tarjetas de lugar. De acuerdo, así que eso es todo. También puedes esconder a todos los chicos por control. Y este semi colon, este es, creo, creo, el mismo atajo de teclado a través de todos los abs extra adobe. Entonces si quiero esconderlos rápidamente, puedo ir a éste, y puedo controlar o mandar semi puntos. De acuerdo, así que aquí lo tenemos. Se ven que se esconden por todas partes en todas las tablas de arte. Por lo que esta es otra nueva característica de Toby X. T. Espero que lo disfrutes, te guste y lo pruebes. Porque era muy necesario. En ocasiones tenemos dedo del pie tenemos algunas pautas para colocar nuestros objetos rápidamente. Entonces ahora si tengo estas pautas, sé que me voy a poner el dedo del pie mi primaria pero un no pelo y así. OK, por lo que coincidirá perfectamente con todas las demás pantallas. Entonces todo eso se trata de guías y cómo puedes copiarlas y cómo puedes eliminarlas y cómo puedes usarlas. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 27. Repetir cuadrícula: Hasta ahora hemos hablado de símbolos, estilos de personajes, colores y todo. Ahora vamos a hablar del dedo del pie de la característica más poderosa off a no B x d, que es cardo. Repite crudo. De acuerdo, entonces lo que hace es que tengamos este bloque de contenido como este. Este post de bloque, por ejemplo. Y quiero dedo del pie crear una repetición. Crear fuera de él. Entonces voy a patear esto y simplemente arrastrarme médicamente en la parte inferior así y puedes crear múltiples instancias copias de eso en sexualmente en esta dirección y también en destrucción. Si quieres, puedes usar algo como esto. OK, entonces depende de ti, Restricción. ¿ Te quieres ir ahora? La segunda gran parte es la distancia entre ellos, por lo que puedes cambiar la distancia entre ellos. Entonces tal vez quiero esta distancia de 48 píxeles entre estos dos postes de bloque. Y ahora tenemos esto. Y la tercera parte de crear es que puedes crear un archivo de texto y en cada línea te vas dedo del pie texto claro para diferentes encabezados. Entonces tenemos este rubro, que es similar. Cámbialo por otra cosa. Cámbialo por otra cosa. Ahora vamos a crear un archivo de texto y cambiar este encabezado al instante. Todos estos encabezamientos fácilmente. De acuerdo, entonces este es mi archivo de texto. Entonces voy a despejar este rumbo uno, y luego en la siguiente línea, voy a ver rumbo do por ustedes. Y en la tercera línea, voy a decir, rumbo 34 Comey. De acuerdo, entonces voy a guardar este archivo. Y ahora el truco es que necesitas arrastrar y soltar este archivo en la primera instancia de esa cuadrícula repetible. De acuerdo, así que aquí está mi archivo de texto. Entonces voy a arrastrarlo y soltarlo sobre esto. De acuerdo, así que este es mi rumbo. Entonces en la primera copia, esta es mi primera copia fuera de mi instancia. Entonces siempre arrástrelo por aquí. No en esta zona. Es tan primera copia y me fui dedo del pie, arrástralo y soltarlo. Simplemente déjalo caer. O aquí, así, y se puede ver al instante. Se crean los tres encabezamientos. De acuerdo, así que esta es la magia off repeat cred. De igual manera, se puede hacer lo mismo con las imágenes. Está bien. Entonces, por ejemplo, si solo vuelvo atrás y, uh, uh, solo elimino este párrafo y me voy del dedo del pie, crea una imagen. Una ojiva. De acuerdo, ahora puedes ver he abierto la toda la colección fuera de mi gente imágenes de mi colección de imágenes gratis . Y guardo mi colección así. De acuerdo, entonces lo que voy a hacer es que sólo voy de dedo arrastrando una imagen hacia esta. De acuerdo, así que ahora puedes ver tengo esta imagen lo deja salir de la frontera y no alto. Tengo esta imagen de encabezado y luego este enlace. OK, ahora los voy a seleccionar a todos, y voy a crear un crit repetido y simplemente aclarar algo como esto. De acuerdo, así que ahora tengo tres cuentas de cuadra y quiero cambiar estas tres imágenes al instante. De acuerdo, Entonces lo que voy a hacer es que voy a arrastrar estas tres imágenes, y las voy a soltar aquí en primera instancia. Ahora puedes ver que los tres han sido cambiados al instante. De acuerdo, así que esta es la magia apagada. Repetir credo. Y creo que es una de las mejores características off adobe extra you. Ahora tenemos ah dominado esto. Repita crear. También puedes extender tu beat Genial por aquí así. Si quieres. Ah, pero no lo recomiendo ahora mismo. No estamos en esto. ¿ De acuerdo? Ya nadie más es que ahora se puede ver aquí tenemos algo recortado. De acuerdo, entonces este contenido se está moviendo afuera. Ahora, si pasamos a este prototipo dab y ah, oigámoslo. Dos pantallas solo para aplacar este. De acuerdo, así que mueve esto, remolca este prototipo, y cuando haga clic en esta área, esta va a ser mi pantalla de inicio. Entonces solo hazlo en casa. Este click por aquí y me voy a mover el dedo del pie en este. Sólo su look todo, Así que eso es todo. De acuerdo, así que intentemos ejecutarlo, y ya puedes ver que simplemente no puedo ir. Lo que está limpia. Parece cuando no soy capaz de ver la diferencia de simplemente cambiar esto a otra cosa para que podamos ver al instante la diferencia. Algo así. De acuerdo, entonces ahora vamos a ejecutar esto. De acuerdo, entonces no tenemos aquí en la segunda pantalla. Ahora, lo que vamos a hacer es en la pantalla. Ahora tenemos el tablero de vista ocultar 6 67 No, vamos a moverlo a otra cosa. Siguiente. Cámbialo dedo del pie esto Así podremos ver todo el contenido. De acuerdo, entonces ahora tenemos esto. Y, uh, vamos a la hora. Tipo preferido y no, puedes ver tenemos esta barra de desplazamiento de barra. No, es cruelmente. ¿ Tendrá aire fresco la primera semana? Apenas el desplazamiento vertical y poca altura de tablero va a ser lo mismo. Está bien, no cambies esto. De lo contrario se va de pie aquí. Algunos problemas. La puerta cambia la altura del tablero de vista. Simplemente arrastra tu click tu tablero de arte y arrástralo en la parte inferior de tu pantalla. De acuerdo, entonces todo es visible. Para que waas la parte más baja fuera de tu área de tablero de vista de pantalla, puedes ver las líneas hijas. Y ahora tenemos esto. Si si puedo extender si quiero extenderlo más así. Y si extendo esto un poco a otra cosa se puede ver ahora tenemos más espacio por aquí y podemos desplazarnos un poco más hacia abajo. Ahora si vuelvo a ejecutar esta vista previa ahora puedes ver que tenemos más área de nivel de desplazamiento. ¿ De acuerdo? Ahora, si quieres quitar esta repetición crear, OK, OK, así que voy a hacer clic en él y en grupo Bueno. Ahora, ¿Por qué lo necesito? Entonces si vas a capas, puedes ver aquí no tenemos nada. Por lo que sólo un grupo llamado repetición. Genial. No puedo editar o cambiar algo si quiero. De acuerdo, Entonces lo que voy a hacer es grilla grupal de la ONU y voy a cambiar algo. A lo mejor. Vamos a seguir adelante. Está bien. Y otra vez, voy dedo del pie a crear un ritmo. Genial. Si todos estos grupos ahora se puede ver todos he seleccionado todos estos tres grupos y claramente eso apareció genial otra vez. De acuerdo, así que ya puedes ver ahora yo creé esto y uno de ellos. Acabo de tenerlo editado. Vale, Así que si quieres personalizar tu lectura genial y editada así, solo Hoy lo hiciste puedes o bien hacer clic derecho y un grupo de cuadrícula o usar esto en grupo crear y editar y luego en contra, como, el cada grupo que has separado. Entonces si soy grupo otra vez, puedes ver tenemos este grupo en este momento y ah, dentro Descubre tenemos tres grupos. ¿ De acuerdo? Para que puedas cambiar lo que quieras por aquí. A lo mejor no voy a cambiar este. Sí. Entonces voy a ir a este grupo y voy a Owen Group it porque este es un grupo extra . De acuerdo, entonces tenemos ahora tres grupos. Una demasiado invernal otra vez. Voy a crear Beat Creed y puedo crear un gran out off. De acuerdo, Así que esta es la forma en que puedes, uh, en grupo tu grado y un grupo tu grande otra vez Y puedes actualizar instantáneamente tus valores, tu texto a tus imágenes, cualquier cosa que quieras. Sólo tienes que arrastrar y soltar. Eso se trata de esta nueva característica, que es repite grilla. Por lo que espero que hayan disfrutado de esta lección. Pasemos al siguiente. 28. Componentes en Adobe XD: ACTUALIZate: ayer. Adobe X'd waas actualizado a la versión Mayo 2019 y han lanzado una actualización masiva. Por lo que en esta actualización reemplazaron los símbolos por los componentes. Entonces, en lugar de usar símbolos, que era mi vieja lección, estoy sustituyendo por componentes de qué? Nuestros componentes. Voy a explicar todo este concepto en esta lección. Entonces quédate conmigo y empecemos. Entonces aquí sólo tenemos un tablero de arte con sólo unos pocos extra estaban aquí un botón y esto Puedes ver estos son separados Este es de fondo y este es texto. Entonces otra vez en la parte inferior. Se puede ver que tenemos esto para esto estos cuatro grupos en ¿tenemos? Ah, otro grupo, que es navegación de fondo. Por lo que todos estos cuatro iconos se pueden ver por aquí están dentro de esto y luego tenemos el fondo. Entonces, um ahora lo que vamos a hacer es en todos los sentidos, diseño de sistemas o diseños de interfaz de usuario es algunos. El mejor sistema es que puedes reutilizar tus componentes por lo que componente es igual que los símbolos, Pero son un tratable. Se pueden cambiar sus palabras. Se pueden cambiar sus tamaños. Se pueden cambiar sus colores. Se puede anular un propiedades diferentes fuera de ellos. Para que veas que estamos aquí por cómo podemos hacer un componente. Simplemente selecciona la capa de grupos que quieras. Por ejemplo, este y me voy de dedo de la prensa comando o control K o Y esto va a ser un componente se puede ver aquí tenemos componente von Dishman. Para que puedas renombrarlo como, um uh, botón subrayado primario. De acuerdo, entonces tenemos este componente ahora, hay una cosa que entender por aquí. Se puede ver aquí tenemos un pequeño enredo de gato verde alrededor de este componente. Significa que este es el componente maestro. Entonces si intentamos dedo del pie, ve a este activo y puedes ver aquí tenemos otra pestaña por aquí, que se llama Componente. Podemos renombrarlo aquí prime re leyendo algo así. Y ahora lo que voy a hacer es que voy a arrastrar el dedo del pie esta ojiva y y estoy alineada así y se puede ver u oír en este botón que tenemos. No tenemos ningún tipo de cosa cuadrada o diamante por aquí, Así que si selecciono este, puedes ver aquí tenemos un diamante. Y si selecciono esta, ésta es en realidad una instancia de ese botón. Entonces este es maestro de esto es un niño. Instancia instantánea. Y es Puedes cambiarlo sin cambiar este. Entonces, no trates de cambiar al maestro. Vamos a editar esta, así que voy a hacer doble clic dedo del pie goto estas capas para que veas cómo se ha abierto esto . Este componente está abierto. Podemos ver las capas dentro de ella. Podemos cambiar el color. Entonces voy a ir con, uh, uh, este color y se puede ver el componente maestro está ahí. De acuerdo, entonces estamos usando el mismo componente. Y si quiero volver al componente anterior, puedo hacer click derecho y restablecer al componente Mars Master. Por lo que se va a restablecer mi configuración del dedo del pie el componente maestro anterior, que era éste. De acuerdo, entonces, um, esto es una cosa. También podemos cambiar el tamaño fuera de él sin que se pueda decir, canjee el tamaño fuera de él desde aquí. Por lo que puedes ver ahora estoy seleccionando todo el componente en lugar de sus partes. Entonces voy a ir cangrejo del dedo por aquí, y voy a expandirlo así, um, dedo del pie toda mi pantalla y puedes ver todo igual. No tenemos cambios en el componente maestro. Pero si tratamos de cambiar algo por aquí, por ejemplo, el juicio de fuerza, cambiémoslo por otra cosa. Cambiémoslo para servir mejor. Por lo que se puede ver una vez que t y hacer un cambio en el componente marcial, se va a reflejar en todos sus Niños. Por lo que he cambiado mi tipografía, y ahora se refleja en todos los Niños. Entonces esto es una gran creo, mejora porque podemos editar, podemos crear diferentes instancias fuera del mismo botón, tal vez a tus cuatro tipos diferentes de Putin Primaria secundaria, terciaria Burton diferente adul mensajes directos o cosas así. Entonces esto es genial. De acuerdo, entonces creo que eso es todo por esta. Ahora voy a crear otro componente usando este. De acuerdo, así que puedes ver aquí tenemos esta navegación de fondo y yo voy a crear un componente. También puedes hacer click derecho. Y aquí tenemos make component y va a ser un componente Vale, así que ahora puedes ver si voy a ir a tablero de arte presionando a y quiero ir con esta pantalla iPhone seis emanan. Puedo ir a mi sección de componentes por aquí, y puedo arrastrarlo así. Entonces ahora si quiero cambiar el tamaño fuera de él, por ejemplo, era iPhone X son pantalla de acceso y esta carta de unicidad así puedo ir por aquí y puedo adicto por aquí. Entonces todo eso se trata de componentes en los escombros. En realidad, espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 29. Activos vinculados en XD: ACTUALIZación: en este video, vamos a hablar de una característica muy nueva última que Adobe en realidad acaba lanzar hace dos días en mayo de 2019. Y eso es en realidad un sistema de diseño. Puedes mantener un sistema de diseño en Adobe X T. Y si abres cualquier archivo nuevo puedes ver a la izquierda tenemos activos de enlace. Entonces vamos a ver cómo podemos desarrollar todo un sistema de diseño. Y podemos vincular nuestro sistema de diseño hacia cualquier nuevo proyecto que estemos diseñando. Por ejemplo, um, Airbnb o uber puedes ver esos sitios web que tienen Todo su sistema de diseño ahí finge que son iconos ahí, Di biografía. Todo está, ya sabes, en un diseño con un sistema. Entonces lo que hacen es que simplemente usan todo el sistema de diseño y judíos esos componentes de esos sistemas de diseño y los usan para construir un nuevo diseño. Ahora, antes de entrar en activos vinculados, nos vamos de pie descargar este hermoso diseño una semántica. Lo despiertas por más de 60 semánticos. En realidad eres un marco para que los desarrolladores front-end construyan abdominales fabulosos y es uno genial . Podrás visitar su página web. Voy a mostrar el enlace. Por lo que aquí hay un kit gratis y es muy detallado. Se puede ver que tenemos botones. Tenemos pasos. Tenemos morir. Bogra fee colores, formas, marcador de posición, comando, busca todo lo que tenemos por aquí. Por lo que esto en realidad se llama todo el sistema de diseño. Contamos con componentes. Tenemos cargas. Tenemos tipografía, escalas y cada rubro y todas esas cosas. Por lo que una vez que hayas descargado esto, puedes ver por aquí. Descargar Semantic. ¿ Te gusta? Vamos a abrir este archivo X T en nuestro adobe X'd. Ahora donde puedes ver he abierto Semántica. Te gusta y es un detallado. Te gusta con mucho fuera de tableros de arte. Se puede ver dónde si hago zoom, se puede ver estos son pocos mensajes de advertencia. Algunas cosas más que si vamos por aquí. Se puede ver que tenemos iconos. Tenemos cargas. Onda, Este este documento se puede ver existir, componente maestro. Si recuerdas de mi última lección anterior, ese componente maestro es en realidad el que originalmente creaste. Y si haces algún cambio o aquí se va a reflejar a través de todo tu sistema de diseño . Entonces todo lo que tienen por aquí no es maestro. Estos están en estos muchos. Tenemos cargas. Estos no son componentes maestros. Estas son solo instancias apagadas del mismo botón. Defilar primaria. Déjame acercar. Se puede ver por aquí. Desfilar Primaria secundaria. Estos no son componentes maestros ya que no tenemos ningún diamante a la izquierda. Entonces aquí tenemos descarte guardar. De acuerdo, entonces tenemos botones de colores. Después hemos etiquetado botón con likes o cosas así. De todos modos, entonces el primer paso, si quieres, si has desarrollado todo tu sistema de diseño Entonces, ¿cómo vas a hacer eso? Te vas del dedo del pie, especifica algunos colores. Vas a tener algo de tipografía, asustos y todas esas cosas y también las vas a sumar aquí en el panel SX. De acuerdo, así que has creado este archivo. Se puede ver que todos estos colores están por aquí. Se les nombra adecuadamente advertencia, mensaje, antecedentes y todo eso. Tienes que asegurarte de que todo se haya agregado por aquí y entonces vamos con el dedo guardar este documento. Vamos a ir a guardar como y lo vamos a guardar como nuestro documento en la nube. Entonces lo voy a guardar como mi documento en la nube. Está bien, entonces ahora mismo lo está guardando. Tomará algún tiempo porque lo está subiendo a mi nube varios fuera de Toby, y vamos a ver cuánto tiempo lleva. De acuerdo, entonces ahora se ha salvado. Vamos a cerrarlo. Vamos a abrir un nuevo expediente. Entonces voy a abrir un nuevo archivo. Abramos esta web 1920 y nos vamos toe klik. Ahora bien, si queremos traer todos esos componentes que guardamos en semántica te vamos toe klik o aquí vincula activos y vamos a ir de pie a estas nubes, documentar documentos en la nube, y vamos a selecciona este. Por lo que ahora se puede ver que ha traído todos los activos del lado izquierdo. Se puede ver que tengo todas las afirmaciones. Tengo todo el sistema de tipografía, todo por aquí. Entonces si quiero construir algo rápidamente Uops. Um así que si quiero construir algo rápidamente, puedo arrastrar por aquí. Y este es mi botón. Ya puedes ver. Ahora mismo. ha sido. Tiene algún pequeño icono por aquí que es un activo vinculado. Por lo que también podemos desvincular este componente si si queremos saber si queremos quedarnos con el componente y usar éste igual que nuestro semántico um, Kate o sistema de diseño, podemos hacerlo. Está bien. Por lo que también podemos restablecer al componente maestro. Si hemos realizado algún cambio, también podemos agregar este componente en los documentos de la fuente maestra. Entonces si hacemos clic aquí, se va a abrir un documento fuente, y aquí lo tenemos y podemos editarlo por aquí. Entonces hay muchas cosas que puedes hacer por aquí y arrastremos este fondo Así que tenemos Facebook , pero y luego tenemos componentes básicos de tarjeta. Ya ves, estamos aquí, y, um, tal vez pueda agregar este botón aquí así. Muévete por encima de algo como esto para que puedas ver dentro de solo unos pocos arrastramientos y caídas. Yo he creado esta guardia para Christie y podemos, ya sabes, usar esta. OK, entonces estos son realmente componentes. Pueden ir fácilmente juntos. También podemos arrastrar algunas cosas más como las que tenemos por aquí. Una barra escolar vertical manual. Por lo que tenemos este menú de navegación del menú, entonces tenemos muchos verticales. Por lo que estos están construidos en componentes. Podemos reutilizarlos. Podemos ajustarlos si queremos. Si queremos que nuestros vincularlos y cambiarlos, también podemos hacerlo. Entonces vamos a anular por aquí, y voy a ustedes algunos mi bandeja de entrada. Está bien. Tan simple. Simplemente, este es, creo, el sistema perfecto que puedes hacer. Y si vamos por aquí, se puede ver que tenemos, um no tenemos iconos por aquí. ¿ De acuerdo? Entonces si quieres Oh, usa esos iconos que estaban en el otro documento. Estamos aquí. Podrás ver estos y todos los iconos que necesitas para agregarlos a tus activos. De acuerdo, Entonces si tenemos esto o tal vez esta de una manera, queremos agregarlos a sobre activos. Entonces voy dedo del pie seleccionar a sus selectos. Icahn es este ícono y ah tenía que convertirlo en un componente. Voy a convertirlo en un componente. De acuerdo, así que vamos a llamarlo , como en expandir. Está bien. Así que asegúrate de nombrar es perfecto. No necesitas,ya sabes, hacer ya sabes, algo como este juego. Entonces es una vista. No, salvando esto. El mismo documento, que es mi documento maestro. Yo cambio. Creé un activo, que es mi ícono por aquí. No, volvamos al primer documento que estaba vinculado, que estábamos diseñando en Por aquí. Y puedes ver aquí tenemos un botón diciendo actualización. Por lo que significa que alguien ha actualizado en los documentos maestros. Voy a presionar después de la palabra aquí o si voy abajo, puedes ver voy a presionar la actualización y se va del dedo del pie Podrías ver. Muéstrame una nueva ya que se ha agregado de semántica. Te gusta así que voy a bajar. Y aquí está el componente. Acabo de agregar Este es icono. De acuerdo, así es como puedes integrar sin problemas tu sistema de diseño en remolque. Cualquier diseño que estés haciendo, así que lo que sea que estés haciendo los diseñadores, si tenemos ah sistema ya hecho, tenemos un sistema de diseño. Podemos usar eso y podemos subir sus cambios en los componentes maestros o archivo maestro, que es nuestra semántica que malvada manera han vinculado por aquí y va a enlazar todos los componentes. Todos los estilos estuvieron aquí desde estilos de encabezamiento, todos los colores, todo lo que va a importar a nuestro nuevo documento. Entonces todo eso se trata de activos vinculados. Creo que es una gran característica. Por lo general podemos es que, Ah, y crear impresionantes Ojos interfaces de usuario. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 30. Atajos comunes: Si quieres aprender algún software, cualquier app, cualquier software de diseño y según software, si quieres conseguir rápido en él. Y si quieres O haz que tu flujo de trabajo sea muy rápido, necesitas aprender que son atajos en el atajo. Las claves son, ah, un poco diferentes, no muy diferentes en Mac y Windows. Hay demasiada similitud, y me encantan las teclas de acceso directo que se mapean en este software de Adobe Exley porque son muy fáciles de recordar. De acuerdo, entonces vamos a cubrir las teclas Crocker más básicas o mayormente usadas en esta lección. Y en la siguiente lección, vamos a explorar algunas más que pueden ayudarte en, ah, ah, acelerar tu flujo de trabajo en Adobe X'd. De acuerdo, así que empecemos. Entonces, antes que nada, vamos a ver algunas fuera de las herramientas de la izquierda. Estos son muy fáciles. Seleccionable es V como siempre tuvimos en para una tienda y creo que en ilustrador entonces tenemos este ángulo de secta, que es rectángulo para nuestra y si presionas estás yendo dedo del pie. Entonces voy a seleccionar esto y voy a presionar nuestro y ahora tengo un rectángulo Dibujemos un rectángulo por aquí y quitemos su borde. De acuerdo, entonces tenemos un rectángulo entonces tenemos esta elipse y muy fácil Y te vas de dedo del pie conseguir una elipse. Puedes presionar la tecla Mayús para que sea proporcional así. Entonces esto es muy fácil. Voy de nuevo a presionar v saudita. Por aquí no. Voy a presionar V y voy a dar click en cualquier lugar para de seleccionarlo. Está bien. De acuerdo, entonces tenemos esta herramienta de línea, que es l Esto también es muy fácil. Tan sólo una línea se puede controlar. Las opciones estuvieron aquí otra vez. Voy a presionar V y voy a dar click en otro lugar que este mental. Esto es ser muy fácil. Puedes arrastrar y hacer algo así. Entonces esta es nuestra herramienta de planta y de nuevo voy a presionar escape para dejarlo así y v d seleccionado y seleccionado de nuevo. Además, puedes usar el relleno si quieres. Entonces este es Bendel. Entonces tenemos este texto sobre HST D es para herramienta de texto. Se puede utilizar cualquier tipo de texto. De acuerdo, así que estos son muy fáciles. Entonces tenemos este tablero de arte A y tendrás más nuestros tableros. Vamos a crear un hardboard iPhone X por aquí, y voy a presionar barra espaciadora, que también es clave muy común para mover todo y cómo. De acuerdo, ¿por qué? Estás diseñando controles el y yo voy a presionar V, y voy a presionar barra espaciadora para sostener este lienzo, y me voy a mover hacia arriba para enfocarlo en el medio. De acuerdo, así que esta es otra tarjeta corta. Puedes presionar la barra espaciadora para mover estas cosas así. De acuerdo, entonces tenemos la herramienta de zoom Z, y puedes usarla presi, y puedes usarla para acercar un elemento. OK, Ahora, si quieres volver atrás, puedes presionar y mantener presionada tu tecla de arte u opción, y puedes alejar así. OK, así que haz click una vez y te vas con el dedo del pie. Alejar el zoom. Entonces este es el nuevo loco. Va a estar en esto más. Si desea alejar, debe presionar la tecla art u opción y seguir presionándolo y se alejará. De acuerdo, Ahora estamos Puedes ver u escuchar en la herramienta de zoom ampliación de zoom que estamos al 75% o 100% en este momento. Entonces si me alejo, ahora estamos 75 50%. Está bien. Ahora, si queremos volver con atajos chicos, acercar y alejar. Eso también es muy común, y lo vamos a utilizar mucho tiempo, que es control o comando. Además así. Por lo que presiona control o comando y luego la explosión de esquí que el menos para alejar. Esto se va a utilizar muchas veces. Después para un zoom 200% o zoom toe esta ventana, entonces vamos a presionar control y cero. De acuerdo, así que ahora se puede ver que es propiedad de 79.44% y se zonifica por respeto a la zona que tengo por aquí con mi lienzo. De acuerdo, entonces si estaba usando, conocí pronósticos Rey cinco k Podría asumir más del 200%. Estás ahora mismo, estoy usando mi PC windows. Entonces tengo menos espacio. Por lo que se zonifica a 79.4% lo cual es cómodo para mí dedo del pie Haz mis cosas de diseño gráfico. Ahora, si quieres acercarlo 200% puedes hacer eso para que puedas comando o comando o control Presione uno. De acuerdo, Ahora se puede ver que casi se está apagando. Fuera de mi alcance están mi pantalla y lienzo. Por eso este software expandió el dedo del pie 79.4%. OK, así que puedes presionar cero para acercar el dedo del pie del ajuste. Se puede presionar control o comando uno, y ah, y controlar y comando cero para ajustarlo de nuevo al lienzo. De acuerdo, entonces estas son algunas herramientas. Vamos a usarlos mucho tiempo. Acercar, alejar y alejarlo. Ahora, en la siguiente lección, vamos a cubrir algunas teclas de acceso directo mawr que nos van a ayudar a movernos con las capas. Entonces si vamos dentro de las capas fuera de este panel, se puede ver que tenemos 12345 años. Entonces vamos a hacer algunas cosas con estas capas, moverlas, alinearlas y cosas así. Entonces pasemos a la siguiente lección. 31. Más palabras de atajos: De acuerdo, Ahora, empecemos con aprender algunas teclas de acceso directo más para el trabajo de remolque de adobe X T. Foster en ella. Ahora vamos a encerrar algo años. ¿ De acuerdo? Ahora, si tienes una capa de fondo por aquí, por ejemplo, vamos a crear un fondo por aquí así. ¿ De acuerdo? Ahora se puede ver que está en la parte superior. Yo quería estar en la parte de atrás. Vamos a crear un ingrediente lineal y elegir algunos de los colores por aquí. A mí me gusta eso en así. De acuerdo, entonces tenemos un ingrediente. Citemos dos colores. Está bien. Ahora se puede ver aquí es donde parte de la frontera y ahora se puede ver que está en la parte superior. No, queremos que se mueva al fondo. De acuerdo, Entonces lo que vamos a hacer es si tienes la razón, click aquí, puedes ver la opción arreglar. Entonces esto es muy fácil. Centro atrás. Trae a un amigo. De acuerdo, Así que ten en cuenta. Cambio de punta muy fácil. Entonces estamos cambiando esto a la bolsa. Entonces vamos a presionar el comando shift y el soporte trasero o el soporte inverso para enviarlo atrás y el soporte delantero para traerlo en diferente. OK, así que lo voy a hacer ahora mismo. Desplazamiento de mando o controlado. Desplazar hacia atrás, Atrás. Beckett y registro frontal. Ahora se puede ver a la izquierda en el panel de capas. Se está moviendo hacia arriba y hacia abajo. Ahora podemos ver que esta capa está en la parte inferior. De acuerdo, Así que como es nuestro fondo así queremos bloquearlo para que puedas hacerlo de dos maneras, verdad? Puedes hacer click derecho. Y se puede ver Aquí está el listo. Fácil comando o control de teclas de acceso directo. Y así simplemente cerrarlo así. Ahora se puede ver un candado pequeño. Ya he ido por aquí. No podemos moverlo accidentalmente así. Entonces si seleccionamos, vamos a seleccionar estas texturas y todo propio sobre esto más adelante. De acuerdo, entonces no vamos a ir a la capa de fondo selector de dedo por aquí. Está bien. Está bien. Por lo que puedes ver ahora tenemos tres capas sobre el cabello. Uno está en la parte de atrás y está bloqueado. Ahora, una cosa más que puedes hacer es esconder tus capas. Entonces si seleccionas algún día como este y si quieres esconderte es que te vas de puntera a control y semi colon o control o en el Mac, Será comando, control de teclas o comando semi colones. Y se va a esconder así. Se puede ver que me estoy escondiendo y mostrándolo una y otra vez. Por lo que esta es también una clave común que necesitas aprender. Entonces hay una cosa más. Por ejemplo, estos dos. Yo quiero que se vinculen. Entonces yo lo soy. Lo que voy a hacer es que quiero que sea y se agrupe con éste. De acuerdo, así que lo voy a cubrir de blanco. Y así me voy. Yo quiero que sean de grupo. Entonces voy a presionar la tecla Mayús y seguir haciendo clic en que los elementos o las capas. Yo quiero estar en un grupo que voy a presionar control o mando G. De acuerdo. Por lo que se puede ver a la izquierda. Ahora es el grupo uno. No, Si quieres cambiarle el nombre, puedes hacer doble clic aquí y puedes cambiarles el nombre. Se puede ver que hemos agrupado uno de tres años y también podemos en agruparlos hasta ahora en agruparlos, vamos a simplemente cambiar una clave con ella. Entonces comando y nuestro control G fue para agrupar y comando Shift G es a en grupo ahora se puede ver que se han agrupado. Entonces estas son pocas cosas que vamos a usar mucho, por ejemplo, agrupar y agrupar. Ahora una cosa más es que si quieres duplicar antes, si quiero duplicar este, puedo o seno son drop shin key y drag así y se va a crear un duplicado. El otro camino es que también puedo presionar al comandante Control D y se va a duplicar. Entonces estas son dos formas de duplicar cualquier leer en Adobe X'd ahora algunas cosas más. Por ejemplo, si quiero seleccionar todo, viene Controller Command. Es casi común en todo el diseño de ábside, AP, incluso Microsoft Word. Y si desea de seleccionar, puede volver a agregar una tecla de turno en la mezcla, control o comando. Desplazarlo y lo va a diseccionar. Por lo que vamos a volver a seleccionarlo ahora. Una clave más que vamos a perder mucho es la alineación. El alineamiento es muy necesario. Por ejemplo, si tengo esto por aquí y quería en el medio horizontal. De acuerdo, entonces lo que voy a hacer es ir dedo del pie use shift y ver en ventanas Szefc Así es muy fácil. Basta con cambiar esta capa en el centro. De acuerdo, Entonces turno ¿ves? Tiene sentido. De acuerdo, Ahora, en el Mac, tenemos un set de teclas diferentes, que es comando controlado y ver en windows shift Ver, y en Mac operativo System Control, comando y ver. De acuerdo, así que ten eso en cuenta. Ahora, esto es porque el corazón está bajo centro en la destrucción. No, si quieres que esté en medio de esto, por ejemplo, por ejemplo, si elimino esto y lo quiero en medio de todo este lienzo, lo que voy a hacer es que voy a presionar el dedo del pie tecla de atajo. Turno em, que es para medio. Por lo que el medio es verticalmente. Centro es horizontalmente, así que turno em es la clave. Y en Mac, se va a controlar mando y m él es igual. Apenas el mezclado fuera de las teclas como comando y control. Eso es diferente. Entonces si estás en un Mac, necesitas presionar el control, comandante. Y bien, ahora hay unos cuantos más que podemos usar, que está relacionado o cubiertas. Entonces si me dyp un poco de Dextre ¿Qué? Aquí. De acuerdo, entonces tenemos textos por aquí. Y si quiero hacerlo audaz, voy a seleccionar y controlar comando sea toe, hazlo bold control comando te lo hagas subrayado y cursiva para I, que es muy similar a los editores de texto usarán Esto es útil ahora si quieres para cambiar un tu siguiente tamaño y si quieres aumentar el tamaño del texto al instante, lo que puedes hacer es igual que los pasos siguientes y en las ventanas es control shift e iraquí dentro de tus llaves, que es básicamente tu parada completa. Por lo que control turno de parada completa. Y luego hay un coma, que es otra tecla de flecha hacia atrás Carol para reducir el aumento de tamaño reducido. Por lo que estoy presionando mi turno y control mantener en mis ventanas en el sistema operativo Mac acaba quitar la tecla de turno. Y va a ser Kamande y tus iraquíes, tu hija y tu coma. Está bien. Y ahora la última tecla de acceso directo que quiero mostrarles Es este enmascaramiento. Entonces si tienes dos años, uno está en la parte superior, esta imagen, y entonces esto es un rectángulo. Ibas a seleccionar barco fuera de ellos con tecla de turno. Y tú y tú vas a presionar comando. Turno em o control. Turno em. De acuerdo, así que así. Está bien. Por lo que ahora puedo mover esto así, y se puede ver que he enmascarado esta imagen dentro de esta forma. Por lo que este es el último turno de control o desplazamiento de comando M m formulario preguntando. Estas llaves son muy fáciles de recordar. Yo sólo los amo. Estas teclas de acceso directo de adobe X'd son muy fáciles de recordar porque están mapeadas con diseñadores en la mina y son fáciles de recordar la función que realizan. Por ejemplo, enmascararlo es para ellos. Y es por eso que esto es lo principal. Me encanta esta herramienta que no sea a través de las características. Así que solo asegúrate, Jack, que has aprendido lo más básico y puedes hacer fácilmente estas cosas dentro de este software. Y ahora, si quieres crear un credo repetido, es muy fácil. Simplemente selecciona este, y presiona control o comando son y vas a tener nuestro secreto así para que puedas verlo o él. Esta es otra tarjeta corta, pero creo que el gran bien Tenemos este botón por aquí, por lo que es más fácil acceder por aquí. Entonces todo esto se trata de estas teclas de acceso directo. Si tiene alguna pregunta, hágamelo. Pasemos a la siguiente lección. 32. ¿Qué es diseño de nivel de bloque?: hoy vamos a crear este diseño a nivel de bloque y vamos a aprender técnica muy nueva fuera del diseño de aplicación móvil, sitios web de tiendas o cualquier cosa que estés diseñando. Por lo que esta técnica se utiliza básicamente cuando estás iniciando tu diseño. Por lo que hay dos cosas que puedes hacer cuando inicies tu diseño. Una es que puedes construir múltiples capas a partir de diferentes elementos que tengas en tu pantalla. Segundo es que comienzas básicamente con bolígrafo y papel. Entonces realmente elogio que cada vez que estabas diseñando, comienzas con un bolígrafo y papel y te voy a mostrar mis bocetos de papel colgante y prototipos de bolígrafo y bolígrafo de papel en esto en la próxima Nellessen pronto. Pero ahora mismo nos vamos a centrar en este diseño a nivel de bloque y cómo nos puede ayudar a acelerar nuestras ideas de diseño. Y, ah, diseñar los diferentes diseños y diferentes composiciones que lo harán. En la imagen será donde estará el texto, dónde estarán los encabezados y qué elementos van a ser interactivos, interactivos en tu pantalla. Ahora vamos a iniciar este ejercicio y yo voy a hacer uno fuera de pantalla y el 2do 1 es para ti. Para su asignación. Voy a crear video de asignación en la siguiente lección, que va a ser este artículo uno. Vas a generar esto y saber lo que necesitamos son sólo dos o asesinos de árboles. Al igual que se puede ver. Su color gris es un poco oscuro, acuerdo. Y aquí te dejamos un regular negro gris negruzco y un color para nuestros elementos interactivos. Al igual que los botones. OK, entonces puedes adivinar qué pantalla es ésta con sólo mirar los elementos por aquí. De acuerdo, entonces este es nuestro logo o cualquier imagen. Se trata de texto introductorio. Bienvenido a nuestra Una nueva aplicación creativa o algo así. Esto es iniciar sesión y contraseña. Y luego tenemos este botón de inicio de sesión. Entonces tuvimos esto. Olvida el texto de tu contraseña, y luego en la parte inferior, hemos inscrito enlace. Se puede ver un poco fuera pequeño y la línea o ella. De acuerdo, así que esto es muy fácil. Muy sencillo. No te preocupes por ello. Lo vamos a aprender en poco tiempo. Entonces, empecemos. Entonces lo que voy a hacer es que voy a crear un nuevo tablero de arte va a dar click en el tablero de arte y vamos a dedo crear un iPhone 67 plus son Ok, vamos a darle un click una vez. Goto nos remolinamos, presionamos mi barra espaciadora, y la voy a mover y controlar cero sí omite dedo del pie el ajuste. De acuerdo, entonces vamos a crear esta pantalla de inicio de sesión ahora. Es muy sencillo. Lo que vamos a hacer es que vamos a usar esta herramienta de rectángulo y simplemente dibujar un rectángulo por aquí así. Se quitó el borde, se utilizó el color. Este estoy usando dos D dos D dos D dos D para las imágenes en DA para las imágenes. Yo estoy usando este. De acuerdo, entonces el medio está de acuerdo color. Está bien. Y luego nos vamos a escapar de la prensa del dedo del pie. Nos voy a la línea del dedo en el medio ahora para el texto. Puedes ver tu aquí. Aquí te presentamos diferentes líneas de diferentes longitudes. Cómo puedo usar esto es porque fuera de un fuerte de encuadre viral muy bonito, que se llama Block, déjame mostrarte. Es ah, un sitio web donde puedes descargarlo. De acuerdo, así que puedes ver esto es bloque para dot com. Voy a compartir el enlace contigo, y puedes descargar este teléfono por aquí. Descargar teléfono. También es invertir agricultores telefónicos. Entonces si vas a usar algún teléfono web ¿quieres mostrar esto hacia adelante en tu página web? Puedes hacerlo, dedo del pie. Está bien. Para que se pueda ver por aquí. Están usando esto para crear diseños muy simples como este. Se puede ver por aquí. Y empecemos de nuevo, Leo. Elegir esto. Entonces descarga este cuarto, instálalo, y eso es todo lo que necesitamos. De acuerdo, Entonces , no, vamos a usar el mismo teléfono, y vamos a Presti en nuestro teclado. Haga clic una vez por aquí. Entonces este es el cuarto. Lo vas a seleccionar desde aquí. Yo estoy usando este bloque nuevo fuerte. Y una vez que haga clic aquí, puede escribir algo como cualquiera. Cualquier tipo de letra, cualquier letra. OK, si presionas espacio, va a estar mucha distancia entre los dos artículos. Por aquí están las dos áreas de texto. Entonces lo que hago normalmente es que elimino este espacio retroceso, y solo selecciono un carácter y cambio su color dedo del pie blanco. Por lo que también tengo justo aquí. Ahora puedes ver Se ve bonito. Genial. Y además, um, asegúrate de que este color de sexo sea 707070 Ahora necesito dedo del pie hacer lo mismo otra vez. Ahora se pueden ver eventos que acostumbraba a asesinos por dentro. Se mueve un elemento de color de relleno a este guión, y no hay Colette en él porque estamos usando múltiples autos. De acuerdo, entonces aquí tenemos nuestros dos elementos dicho, Ahora vamos a usar nuestra herramienta este rectángulo ah, Samer enredado, y vamos a dibujar para un campo de texto. Vamos a hacer que la frontera dedo del pie cinco cinco. Y voy a usar el mismo asesino fronterizo para éste, que uso para esta imagen. De acuerdo, entonces tenemos esta que voy a presionar la tecla de opción de arte para duplicarla. Se puede ver por aquí. Yo lo he complicado. Todos podemos olvidar este retrato de aquí. Simplemente quita algo de aquí en el frente. Entonces nos vamos de nuevo a aplacarlo desmayando nuestra tecla de opción en tu teclado. Simplemente muévelo por aquí. ¿ De acuerdo? Entonces veamos la distancia. Mejor arte en clave de opción y mantener selecto uno fuera de los elementos. Si quieres ver la distancia, vamos a acercar un poco. Déjame mostrarte cómo voy a mi oído. A la distancia entre estos dos elementos hago clic en uno de los elementos, presiono mi tecla de opción de arte y se puede ver en contra de ella empezó a mostrarme las distancias. Pero el elemento con el que quiero comparar es éste. Entonces voy a poco más en mi boca en este, y me va a mostrar que es cerdos. Los males de tus ocho puntos de distancia de ella. Está bien. Nuevamente, Si hago esto, son siete. Entonces voy a hacer ocho. Por lo que se ven profesionales y se ven similares. Hay armonía en el diseño. Entonces vamos a usar el dedo del pie. Eso también puede movernos. Quita éste por aquí. Entonces, no, lo alinearía en el medio. Está bien. Así. Ahora hemos completado nuestro Este fue imagen o bajo. Ve. Éste fue bienvenido. Impuesto. Hola, Essen, o algo así. Aquí están nuestros dos campos contraseña iniciar sesión y contraseña. Y luego vamos a usar un personal aquí hasta ahora. Pero vamos ganando va a usar el mismo rectángulo o lo que puedes hacer es simplemente aplacar este son corrupción y usarla o aquí, así. Quitar la frontera. Cambia el filtro. Ah, ¿ éste o éste? Voy a usar este color ahora mismo. Sólo cambia un poco el dedo del pie. Cambia un poco el equipo. De acuerdo, entonces tenemos este color ahora mismo. Debe ser de color muy brillante. Por lo que hace que sea diferente de todo el fondo o de toda la interfaz, porque es un posible, pero Ok. Entonces de nuevo, voy a dar click aquí. Basta con usar la sombra tres puntos abajo. Por lo que es el en la parte inferior en la posición vertical. Y esta es la sangre. ¿ Cuánto? Está borrosa. Está bien. Y también podemos usar 20% para que la sombra sea visible aquí tenemos la sombra otra vez. Voy a duplicar esto, y voy a moverlo. Y el comando de trabajo turno control turno, registro frontal y ah, usando el color vied Siguiente más Adelante. Ahí tienes algo como esto. Por lo que el espacio es muy grande. Entonces yo Lo que normalmente hago es simplemente Ok, Así que este también se ve bien. Y podemos usar algo como esto para la carga que se ve bonita y crujiente. De acuerdo, entonces hemos terminado nuestra carga. Nos quedan dos elementos. Se olvida uno. Tu pasaporte y uno va de pie la pantalla de registro. De acuerdo, así que debes pensar en todos los elementos que se van a colocar en la pantalla, necesitas enumerarlos primero. Entonces si puedes enumerarlos, puedes planearlos fácilmente por aquí. Y no te vas a perder a menudo. De acuerdo, entonces ahora nos hemos ido de éste y de éste. Está bien. Entonces de nuevo, nos vamos de dedo replicar este texto por aquí luce mantenerlo cerca de abatido porque tiene sentido. Va a ser. Y luego lo voy a duplicar de nuevo, y voy a ponerlo un poco. Ah, muy lejos. Y voy a usar este color, que es siete Trudy. Trudy. un poco más oscuro. Y también voy a perder este Subrayado. Está bien. Si no quieres usar este subrayado, también puedes usar esta herramienta de línea para colocar una línea debajo de ella así. Por lo que está un poco lejos de éste. Y ah, solo escapa V y me voy de pie muévelo un poco más cerca de esto. Así. Eso esta espera es 105 Así que vamos a hacer el poco de este. Este 105 budista, un pixel corto, y voy a seleccionar. Peleó contra ellos y turno. ¿ Ver? De acuerdo, entonces son turnos mar. Y en el Mac, vas a presionar turno de control. A ver, supongo que manda barcos fácilmente. Por lo que está en una línea en el medio. Se puede ver he usado un poco fuera de técnica diferente de este aire. Estoy usando espacio en el texto de aquí que van a ser dos palabras como pelo Logan o algo así. Aquí estoy usando solo uno. No importa. Es sólo una representación. Entonces si quieres algo así, solo usa Colette blanca por aquí y déjame usar vital. Uh huh. De acuerdo, así que ahora puedes ver que todo se ve genial y bonito. Vamos a mover lo vital de este. Y aquí tenemos preparada nuestra pantalla de inicio de sesión. Está bien. Ahora tu tarea es que voy a hacer otra contigo en la siguiente. OK, entonces te voy a mostrar cuál es tu tarea. Es muy fácil. Vas a utilizar este bloque un nuevo fuerte para crear este diseño de nivel de bloque. De verdad se va dedo del pie. Um, haz tus diseños, ya sabes, lucir profesionales. Y es el primer paso en tu diseño. Más bien, eres un diseñador experimentado o eres un gran no diseñador. Necesitas empezar así. Realmente va a mejorar tus habilidades de diseño. De acuerdo, Puedes ver el espaciado es perfecto entre todos estos elementos. Algunos están, ya sabes, alineados adecuadamente. Entonces este es un consejo también, vas a empezar con un solo color. Esta es la mejor cinta que te voy a dar para cualquier diseño. Entonces, siempre que empieces tu diseño, no intentes introducir cinco o seis colores a la vez. Se puede ver por aquí en estas son pantallas muy simples en solo usar un color Greg y diferentes acciones fuera de tres. Y estoy usando sólo uno para ver en azul Color o él aquí. Estoy usando un color azul púrpura y puedes ver qué tan bien se ve esta pantalla OK Así que ten estos pasos en tu mente. Y, ah, si tienes alguna pregunta que hacerme, pasemos a la siguiente lección, que será tu tarea. 33. Bocetar primer papel de bloqueo de ideas de diseño: bien hoy. Lo que vamos a hacer es que vamos a crear un diseño a nivel de bloque usando lápiz o papel, o tengo estos pocos resaltadores aquí conmigo. Uno es este Sharpie, o puedes decir un poco el marcador. Pobre marcador. Entonces tenemos esto. También puedes usar estos bolígrafos de gel, que son un poco más oscuros. Y también puedes usar solo a la defensiva en solo este tipo de papel. De acuerdo, entonces lo que he hecho es que lo he doblado en remolque. ¿ Ver? Pliegues como puedes ver por aquí. Entonces esta va a ser una pantalla, segunda piel y su piel. Puedes separarlos después de dibujar alegría. OK, entonces el beneficio del lápiz es que puedes dibujarlo muchas veces y lo puedes quitar con esta reserva. Y así empecemos. Entonces primero voy a hacer o usar. Simplemente voy a usar mi lápiz para dibujar estos elementos de nivel de bloque. Entonces este va a ser nuestro logo. No creas que no son grandes día de factor cremallera. No se ve muy bien. Está bien. Y entonces tenemos este look extra aquí. Está bien. De acuerdo, entonces vamos a tener que hacer campos por aquí. Este es el mismo al que voy a ir. Esta es una pantalla de inicio de sesión que puedes ver por aquí. Entonces vamos a acatar. Detalles overoye. De acuerdo, Entonces podemos tener algo como esto entonces esto va a ser de un segundo campo. Este va a ser nuestro Burton. De acuerdo, Así que asegúrate de las texturas en el medio así. De acuerdo, entonces hemos puesto nuestros elementos. Ahora bien, esto es olvidar contraseña. ¿ Lo haces? A lo mejor algo como esto. Entonces tenemos por aquí. Date de alta. Por lo que aquí tenemos el apuntador. ¿ De acuerdo? Ahora hemos construido nuestro primero, podemos comerciar mucho en este layout. Al igual que podemos tener nuestro logo por aquí y luego el texto de bienvenida por aquí. Hay algo como esto. A lo mejor algunas estadísticas. Queremos demostrar que algo como esto, algo así. A lo mejor algunos elementos por aquí. De acuerdo, entonces podemos tener este, uh, otra vez, otra vez, este Logan y esto otra vez, este campo de Spotswood. Entonces tenemos este botón también podemos tener sobre botón por aquí y olvidar el campo de contraseña por aquí. Está bien. Para que puedas ver cómo este diseño es diferente. Aquí no hay títulos. Van a estar aquí. De acuerdo, algo así. A lo mejor vamos a utilizar algunos iconos por aquí en estos campos, y esto va a ser sobre botón. Entonces usemos algún texto por aquí. Y entonces tenemos este apunte por aquí, ¿de acuerdo? Entonces podemos tener otro botón, que va a ser un poco diferente. Esto se va a terminar. Apúntate ahora, pero está bien. Para que veas que estos dos despidos son totalmente diferentes. De acuerdo, entonces puedes ver por aquí cómo he dibujado estos. Si quieres compartir, puedes compartirlos así. Al igual que esto no los hagas muy bonitos. Simplemente nos vamos de pie. Rellena que esto va a ser una imagen. De acuerdo, otra forma es que vas a usar cualquier resaltador como este. Estoy usando este color azul, y lo que voy a hacer es que sólo voy a resaltar los botones. Entonces este va a ser mi botón. Y esto también me va a dar mi botón, vale. Y ah, lo que normalmente hago es usar otro asesino como este amarillo para resaltar los enlaces de texto o algo así. Al igual que esto es un enlace. Entonces voy a usar amarillo para ello. De acuerdo, Entonces este tipo de cosas. Entonces si éste está ligado, también puedo usar mis estos bolígrafos de gel para resaltar algo como esto. De acuerdo, entonces tal vez este es un campo de entrada de campo, así que voy a usar algunos aspectos destacados. 100. Uh, así. Está bien. Para que puedas ver lo fácil y rápido que es. Simplemente estábamos totalmente fuera por la misma página. De acuerdo, entonces tal vez necesitamos algunos términos y condiciones o algo así para otra iteración. Al igual que, tal vez tenemos algo por aquí, uno que quiso decir más. Por lo que puedes ver aquí. Tenemos más elementos por aquí. A lo mejor tenemos términos y condiciones. O tal vez línea de ayuda o algo así. Entonces aquí tenemos más. Déjame moverme. Este de aquí. Tenemos más artículos están en una pantalla, y aquí tenemos menos artículos. Por lo que debes asegurarte de que esta ayuda de diseño va nos va a ayudar a decidir qué vamos a usar un marcado de hora o marco de alambre. De acuerdo, así que estos van a ser muy menos detalle. Sin detalle en absoluto. Apenas los marcadores de posición para todos los elementos. De acuerdo, así se puede ver he usado sólo dos colores. Y si lo deseas, puedes usar este tipo de resaltado de punta de gelatina. Diferentes enlaces como esta es contraseña. Por lo que sólo voy a subrayarlo. Olvídate de tu contraseña. Es un enlace. Por lo que sólo voy a subrayarlo. Algo así. También puedes usar este dedo Sharpie. Destacarlo. A lo mejor quiero Esto es una sombra. Algo así. También, voy a poner algo de sombra por aquí que está animado. Es importante. Entonces estos son los detalles que van a estar en tu, um, um, diseño de nivel de bloque de personas. Está bien. Para que veas que he estado realmente fuera. Puedes decidir muchos diseños. Esta pantalla es muy sencilla. Aquí tenemos pocos elementales, así que si tenemos demasiados elementos, como tal vez 10 elementos por aquí, podemos cambiar a otro diseño. Entonces así es como puedes crear muchos de Leo's rápidamente con solo bolígrafo y papel y pocos otros marcadores o tal vez resaltadores como estos. De acuerdo, así que déjame mostrarte una cosa más como puedes ver por aquí. Este es nuestro prototipo de gente que iban de pie. Discutir en la siguiente lección y salón debilitar. Rompe este. Entonces estos son los cuatro pasos. Siempre que ibas a empezar a diseñar o resolver un problema diseñado problema o cualquier aplicación que estés construyendo estás resolviendo problemas que el usuario experimenta problemas. De acuerdo, entonces para resolver esos problemas, vas a estar cambiando de dedo estos prototipos de papel. Se puede ver aquí tenemos esta oleada en el número fuera de esta pantalla. Entonces este es el número uno. Pantalla nuestro dashboard eso he usado este. De acuerdo, entonces en la siguiente lección, vamos a diseñar algo como esto. Nos vamos de pie, crear algunos detalles más para esta pantalla y asegurarte que puedes usar poner prototipos de papel dedo del pie, probarlo con tus usos. Por lo que esta va a ser tu primera que puedes ver por paso. Si no vas a usar prototipos de papel, entonces vas a decirle a Adobe X'd que cree los mismos prototipos. Y puedes hacer clic, hacer clic en prototipos aplicables o interactivos para mejorar y juicio son ver lo que piensan sus usuarios acerca de esta app o cómo se comportan usando este prototipo. De acuerdo, así que eso es todo. Necesitas apenas unas cosas como este pasador de gel y este mercurio y este lápiz. Y eso es todo. Un resaltador cuando pasador de gel y un lápiz. Y puedes crear este tipo de diseños de diseño a nivel de bloque múltiples diseños al instante. Ahora, en la siguiente lección, pasemos a la siguiente lección donde vamos a discutir cómo diseñar el detallado, este tipo de prototipos de papel detallados. Entonces pasemos a la siguiente lección. 34. Primer prototipo de papel: adición de detalles: Está bien. Ahora, en esta lección, vamos a empezar con detallar este diseño de bloque de papel, y vamos a usar ese creativo marco de alambre estático todo lo que puedas usar el mismo vía frame en remolque. Prototipo de papel prototipo. Entonces lo que vamos a hacer es ahora vamos a usar sus títulos o texto por aquí. De acuerdo, entonces voy a usar algo como esto y llamarlo logo. De acuerdo, entonces vamos a usar algún texto. Bienvenido, sn o algo así. Por lo que este es texto bienvenido. Entonces vamos a usar campos de texto por aquí como este uno y dos, y voy a usar tal vez lápiz por aquí para mostrar un gran ext log in y password. De acuerdo, entonces hemos llegado a este punto, y luego vamos a usar un botón. Entonces veamos que hemos decidido usar este por aquí. Inicie sesión. Está bien. Y aquí tenemos trabajo de jefe de corte corte. De acuerdo, entonces hemos usado este diseño, y luego podemos usar algo como esto. Uh, no tengo señal de conteo. Entonces tenemos nuestros elementos dispuestos, y ahora vamos a usar el mismo resaltador para resaltar nuestros botones s. Entonces este es un cable. Mejor lo tenemos. Uno de ellos. Y ahora voy a usar este pinto gel rojo Seguro que esto va a ser un enlace. OK, puedes usar esto o simplemente puedes usar este Este negro ayuda en remolque Resaltalo así . Entonces esto va a ser un enlace. Por lo que aquí tenemos todo dispuesto. También puedes usar este Sharpie son marcador para resaltar este feudo como este K también así . Y si quieres, también puedes resaltar un poco este logo si quieres ir. Pero así es como va del dedo del pie Mira ahora para que puedas ver aquí tenemos la técnica de bloque simple y aquí tenemos nuestro prototipo de marco de alambre o personas o bocetos de diseño de papel para construir un prototipo de papel. De acuerdo, para que puedas construir múltiples pantallas como yo tengo grande para esta app. Esta es básicamente una aplicación de venta de entradas y creo que no quiero entrar en demasiados detalles, pero así es como lo vas a construir. Entonces básicamente lo que uso son algunos colores, un color para enlaces están destacando mi segunda reacción prime. Y estos son mi familia o yo en botones en mi pantalla. Se trata de acciones primarias que el usuario debe tomar en este botón. ¿ De acuerdo? En en la pantalla. Entonces estas son algunas cosas que realmente quería mostrarte antes de entrar en Adobe X'd porque esta es la fase de planificación fuera de cualquier diseño, es más importante que crear un diseño muy bonito o muy brillante o diseño perfecto de pixel en Adobe X'd. Entonces todo esto es de mi parte. Y espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, te voy a dar un dedo del pie de asignación, crear una persona, crear una persona, un prototipo o diseño de bloque de papel, y un marco de alambre detallado fuera de ese mismo diseño y tomar una foto y presentado. De acuerdo, entonces en la siguiente lección, vamos a lapidar esa asignación. Entonces si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 35. Prototipos verticales: De acuerdo, en esta lección, vamos a hablar de estas cinco cosas prototipos de papel y sobre las usaron. Entonces nos vamos de puntera prototipos horizontales. ¿ Cuáles son el prototipo vertical de STI y el tipo perfecto local. Vamos a cubrir todos estos. Te voy a dar los ejemplos. Y primero vamos a pasar por el prototipo de papel. No, los prototipos de papel son la mejor y más fácil forma y la más barata de crear cualquier prototipo en el deporte. Al igual que se puede ver por aquí es un papel para una cancelación. Diferentes pantallas fuera del proceso de reserva Fuera de esta app de tren puedes ver por aquí. Esta es la pantalla de inicio de sesión. Este es el dashboard que está reservando. Y luego tenemos los asientos y los sueños y luego tenemos ver detalles que puedes ver por aquí. Entonces tenemos unos cuantos más llenando los detalles, detalles reserva y así sucesivamente y así sucesivamente. De acuerdo, entonces, ¿cuáles son el prototipo horizontal? Ok, entonces te voy a dar ejemplo de usar estos prototipos de papel que tengo por aquí prototipo horizontal. Como su nombre indica, se va dedo del pie estar en esta dirección. Dirección significa que si estoy construyendo ah Horace bajo prototipo se puede ver por aquí este tablero. Si construyo prototipo horizontal para esta pantalla de tablero de escondite, aquí hay cuatro elementos interactivos. A lo mejor esta pelea. Entonces lo que voy a hacer es, si el usuario hace clic aquí, ellos voy a diseñar estas cuatro y cinco pantallas más que se van a vincular con este libro de estatutos. Pero por otro lado, no voy a ir de pie crear en proceso de reserva de profundidad. Entonces si alguien hace clic en el libro, los tomadores van a ver la siguiente pantalla para reservar como este plan buscando. Pero después de que haga clic aquí no va a ir a ninguna de la pantalla que va a volver a coger. Para. ¿ Por qué? Porque no estamos probando el trabajo detallado a través de off cualquiera de estas características por aquí. De acuerdo, entonces, uh, así que este va a ser nuestro prototipo de centro del corazón. Muy limitado en destrucción. Se va a cubrir en su mayoría la información, arquitectura o la navegación fuera de su sitio web. Entonces si tienes, como, 10 categorías, 10 categorías, te vas del dedo del pie, crea 10 páginas, y el usuario solo va a tocar el dedo del pie en cualquiera de ellas. Visita esa página. De acuerdo, entonces esto se trata de prototipo horizontal. No hay prototipo vertical. Esto va a ser en profundidad. Por lo que vertical te significa que estás bajando en lo profundo del suelo. De acuerdo, así que ahora mismo, si te muestro el prototipo vertical para reservar boletos así se va a golpear o va a ser puntera específica una característica de una función fuera de tu manzana. Nuestra página web. De acuerdo, entonces voy a construir un prototipo vertical para boletos de libro, lo cual he hecho por aquí. Por lo que si haces click en tickers de libro, este va a ser el siguiente plan de reservas de pantalla. Te vas a holgar muerto y tu ruta y vas a ver las disponibilidades de asientos. Está bien. Y a continuación, vas a ver el asedio en trenes. Entonces te vas a quitar los detalles. Consulta detalles para más expandir más fuera de esta cepa que has seleccionado de lo que puedes hacer click en este libro para obtener ahora. Y vas a ir a estos detalles de reserva. De acuerdo, entonces después de que selecciones tus datos, te vas a ir de pie el yo te mostraré esta última reina la cual he diseñado opciones de pago . Tienes opciones de reembolso. seleccionas uno de ellos, está resaltado y seleccionas Este botón va a cambiar. Favorito ubl esta tarjeta y te vas a tocar por aquí y tu pago se hará. OK, entonces este es un ejemplo fuera del prototipo Vertical. No de prototipo. Como su nombre indica, se puede ver por aquí. Esto es horizontal y esto es vertical. Entonces en los prototipos t, vamos a mezclar prototipo horizontal y vertical. Entonces déjame mostrarte aquí tenemos como, aquí tenemos esta pantalla de inicio de sesión. Déjame mostrarte. Aquí tenemos el eslogan skin para la misma app drain booking app. Y si vas al tipo más empinada, si construyo justicia pantalla de inicio de sesión y esta pantalla de registro, va a ser mi prototipo d. Porque yo soy puedo ver estas dos pantallas horizontalmente y luego puedo ir a esta pantalla Esta ok, también, también, si construyes cuatro pantallas diferentes para pantallas para esto, estas tres funciones y grupo entran en detalle en Lee. Este. Está bien. Aún así, será tu prototipo d. Entonces, uh, una característica que vas a probar en profundidad otros Te vas del dedo del pie. No vas a probar a fondo. Habrá una o dos pantallas por cada una fuera de ellas. Si Está bien, entonces vamos a venir de pie este prototipo local. ¿ De acuerdo? Ahora, lo que significa prototipo local es que vamos a la prueba del dedo del pie. Tan solo un área específica fuera de tu app. De acuerdo, entonces tal vez si tenemos esto, como, olvidó la función de contraseña. ¿ De acuerdo? Queremos probar diferentes horas laicas o diferentes flujos de trabajo fuera de esta función de olvidarse de contraseña . Sólo vamos a probar esto. De acuerdo, entonces tal vez si lo toco, yo la siguiente pantalla será esa. Escriba su correo electrónico para obtener su contraseña. Entonces esta es mi primera idea. Y si lo vuelvo a tocar, o tal vez en la siguiente idea de prototipo, si toco aquí, llego a una pantalla donde acabo de poner mi emisor móvil. De acuerdo, entonces tal vez esta contraseña de cuatro guardias. Me pidió número de móvil en un prototipo en otro. Me pidió correo electrónico en otro. Me llama a mi teléfono. De acuerdo, entonces estas son opciones diferentes. Puedes probar por éste. Entonces si te estás centrando en un solo elemento en tu interior toda tu aplicación en una sola pantalla, vas a usar este prototipo local. Entonces todo esto se trata de prototipos de papel, horizontal vertical de prototipo, prototipo local, Todos estos tipos y cómo vas a usar prototipo de papel. Entonces lo que normalmente hacemos es mostrarle al usuario la primera pantalla y esto se va a esconder. Estas pantallas próximas pantallas volverán a ser. Entonces déjame mostrarte estas tres cosas. Voy a hacer algo como Thetis. OK, entonces voy a ocultar estas pantallas y voy a mostrar a mi usuario esta pantalla, no esta. De acuerdo, así que este es el texto de bienvenida del logotipo. De acuerdo, Ingresó tu contraseña de número de móvil, y quiero que él o el dedo del corazón. Piensa en voz alta significa que van a decir, OK, quiero poner mi número de móvil aquí. Yo quiero poner mi pasaporte por aquí, y luego me voy a talar con puntera. De acuerdo, entonces después de eso, me voy del dedo del pie, deslízalo así, y les voy a mostrar este escondite que vale la pena se esté deslizando hacia ellos. Y una vez que vean este tablero, se van a enfocar en él. De acuerdo, estos son mis libros. Tú Estos son boletos dependiendo. Estos son mis boletos cancelados. De acuerdo, así que quiero O ticket. Está bien. Antes de eso, quiero asegurarme de que mi usuaria, ella sabe que soy yo quiero difícil reservar algunos boletos. De acuerdo, Así que déjame quitar esta etiqueta por aquí para mostrarte la parte superior por aquí. Esto es Pakistán. Ayuda ferroviaria y perfil. De acuerdo, entonces, uh hola, Essen. Y estos son este es tu panel de control. Todos tus excavadoras reservadas y canceladas y pendientes, y luego solo tienes cuatro cosas que puedes hacer. Entonces quiero dura protesta. Apenas este país de boletos de reserva. De acuerdo, también, se puede ver por aquí. Tengo número ellos. Se puede ver que esto es cero, y éste es uno. Esto es solo para asegurarme de que no pierda mi todo mi prototipo y no los mezcle. Y luego necesito, ya sabes, combinarlos. Me confundo. Ok, una cosa más se puede ver que he grabado esto. Esto es muy fácil. En personas prototipos. Simplemente puedes usar otro papel y unirlo con la primera pantalla en la porción que quieras. Si quieres solo a Jane, estos botones puedes arrancarlo y puedes pegarle otra pieza a la gente. De acuerdo, entonces creo que todo esto se trata de prototipos de papel sobre el trabajo paradisíaco horizontal, un prototipos verticales. Creo que los hemos cubierto todos. Y pasemos a la siguiente lección. 36. Nivel de fidelidad y prototipos: Está bien. Ahora, en esta lección, vamos a empezar con detallar este diseño de bloque de papel, y vamos a usar ese creativo marco de alambre estático todo lo que puedas usar el mismo vía frame en remolque. Prototipo de papel prototipo. Entonces lo que vamos a hacer es ahora vamos a usar sus títulos o texto por aquí. De acuerdo, entonces voy a usar algo como esto y llamarlo logo. De acuerdo, entonces vamos a usar algún texto. Bienvenido, sn o algo así. Por lo que este es texto bienvenido. Entonces vamos a usar campos de texto por aquí como este uno y dos, y voy a usar tal vez lápiz por aquí para mostrar un gran ext log in y password. De acuerdo, entonces hemos llegado a este punto, y luego vamos a usar un botón. Entonces veamos que hemos decidido usar este por aquí. Inicie sesión. Está bien. Y aquí tenemos trabajo de jefe de corte corte. De acuerdo, entonces hemos usado este diseño, y luego podemos usar algo como esto. Uh, no tengo señal de conteo. Entonces tenemos nuestros elementos dispuestos, y ahora vamos a usar el mismo resaltador para resaltar nuestros botones s. Entonces este es un cable. Mejor lo tenemos. Uno de ellos. Y ahora voy a usar este pinto gel rojo Seguro que esto va a ser un enlace. OK, puedes usar esto o simplemente puedes usar este Este negro ayuda en remolque Resaltalo así . Entonces esto va a ser un enlace. Por lo que aquí tenemos todo dispuesto. También puedes usar este Sharpie son marcador para resaltar este feudo como este K también así . Y si quieres, también puedes resaltar un poco este logo si quieres ir. Pero así es como va del dedo del pie Mira ahora para que puedas ver aquí tenemos la técnica de bloque simple y aquí tenemos nuestro prototipo de marco de alambre o personas o bocetos de diseño de papel para construir un prototipo de papel. De acuerdo, para que puedas construir múltiples pantallas como yo tengo grande para esta app. Esta es básicamente una aplicación de venta de entradas y creo que no quiero entrar en demasiados detalles, pero así es como lo vas a construir. Entonces básicamente lo que uso son algunos colores, un color para enlaces están destacando mi segunda reacción prime. Y estos son mi familia o yo en botones en mi pantalla. Estas son acciones primarias que el usuario debe tomar en este botón. ¿ De acuerdo? En en la pantalla. Entonces estas son algunas cosas que realmente quería mostrarte antes de entrar en Adobe X'd porque esta es la fase de planificación fuera de cualquier diseño, es más importante que crear un diseño muy bonito o muy brillante o diseño perfecto de pixel en Adobe X'd. Entonces todo esto es de mi parte. Y espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, te voy a dar un dedo del pie de asignación, crear una persona, crear una persona, un prototipo o diseño de bloque de papel, y un marco de alambre detallado fuera de ese mismo diseño y tomar una foto y presentado. De acuerdo, entonces en la siguiente lección, vamos a lapidar esa asignación. Entonces si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 37. Agregar detalles a tu diseño de bloques en XD: Está bien. Ahora, en la última lección, estábamos haciendo este diseño a nivel de bloque, y te mostré muchos prototipos de papel y diferentes tipos fuera de prototipos y todo sobre prototipos. De acuerdo, ahora vamos de pie al siguiente paso. De acuerdo, Entonces el siguiente paso en cualquier fase de diseño es rápido. Empezaste con el diseño a nivel de bloque, y el siguiente paso será que nos vamos a sumar detalles. Es igual que cuando ves a un pintor cuando empieza a pintar algo en su lienzo. Lo que hace es que se va dedo del pie poner sólo unos colores aquí y allá. Asesinos mayores para simplemente quitarle la forma a su pintura o algo así. De acuerdo, Entonces empezarán a sumarle detalle. De acuerdo, así es como funcionan los bocetos. Incluso si trataras de bosquejar algo, te vas dedo del pie primer boceto. Muy perder. Lo cual no se parece demasiado a un Cardone o algo que empieces a refinarlo. Y al final, se ve realmente increíble. Ok? De igual manera, en diseño Web, aplicación móvil, diseñadores, diseñadores, experiencia de usuario, diseñar el todo el diseño de la física fuera de la experiencia del usuario desde obtener información de los usuarios, entrevistas de usuarios, todo lo que estás agregando detalles, paso a paso. Entonces a medida que pasemos al siguiente paso, vamos a sumar más detalles. OK, entonces ahora lo que podemos hacer es crear un solo marco de fuego asesino. De acuerdo, Entonces lo que quiero decir por solo color es que para cualquier acción voy a usar solo un solo color . ¿ De acuerdo? Entonces en lugar de reemplazar estos en este teléfono de bloqueo telefónico, lo que vamos a hacer es que lo vamos a reemplazar, dedo unos cuatro, tal vez fuente. Está bien. Entonces voy a usar esto. No manda la OTAN. De acuerdo, Entonces lo que voy a hacer es que voy a agregar, como, como bienvenida a una persona, ¿de acuerdo? Algo así. Entonces va a ser por aquí, y entonces también nos vamos de pie. Dile al usuario que este va a ser el logo. De acuerdo, entonces vamos a añadir una capa de texto más por aquí. Se va a estar diciendo logo. De acuerdo, Entonces lo que estamos tratando de hacer es que estamos agregando un poco más de detalle. Hazlo. De acuerdo, Entonces esto va a ser logo que este es texto bienvenido. Entonces esto va a ser nuestro vamos a eliminar estos y voy a duplicar esto porque tiene más sentido. Y es más fácil así. Estoy pasando mi clave de arquía u opción. Esta va a ser palabra de jefe. Esto va a tardar mucho en ser humano. Así que deja más claro que el correo electrónico es más fácil para que los usuarios recuerden. Entonces vamos a usar el correo electrónico por aquí, K. Así que también, vamos a usar algunos, um, vamos a cambiar esto. Por lo que también vamos a usar algunas señales visuales como esta es extensión más importante, ésta va a ser un poco más pequeña que ésta. Entonces voy a usar, um, 24th y aquí también voy a usar 20 on. Entonces por aquí estamos otra vez yendo a Él era dos costura como este comando cambio de registro frontal para hacerlo. Yo lo traigo adelante, y esto no va a ser contraseña. Va a ser, um, um, tala. No. Ah, son acceso. De acuerdo, así que hazlo más fácil. Inicie sesión. No. De acuerdo, entonces esto es hace mociones, y luego vamos a seleccionar a ambos presionando turno, y voy a dedo del pie de la prensa. Yo m así ve por centrarlo de la manera horizontal y propia Mac, Vas a presionar turno de comando? Si. OK, entonces estas son las teclas de acceso directo. Lo estoy haciendo una y otra vez para que puedas recordarlo fácilmente entonces. Aquí tenemos por Dios, su palabra jefe. Deja que Shing sea dedo del pie del teléfono. No hace falta dedo ¿Cuál es la raíz del sentido y lo tenemos. No vamos a hacer que lo jalen. Sólo van a ser 20 grandes Oezil's Y, uh, alinémoslo en el centro. Está bien, chef. ¿ Ver? No parece una línea en el medio. A lo mejor todo lo demás no está alineado. Entonces ella tamiza en el para las ventanas y yo lo voy a alinear aquí así. Se ve genial. Y ahora vamos a sumar Ah, detalle muy sencillo por aquí, que está apuntado. De acuerdo, así que inscríbete menos Imo, mantén esta línea y me voy de los pies Replicarlo por aquí. Firma. Ah, ir de paseo. Cuenta nueva. Siempre deja tu declaración muy clara al usuario que esta va a ser una acción separada . OK, entonces me voy a quedar así. Ahora voy a usar esto en la línea. Esto se ve un poco veer. Entonces me voy con el dedo del pie. Usa la misma línea. Veamos cuál es el veredicto de este Ah, a 71 píxeles de ancho. Entonces vamos a hacer de éste el mismo día. Y luego vamos a alinear estos así. Voy a agruparlos, Comandante Control turno G, ¿ Ves? Y va a estar en medio. De acuerdo, Ahora veamos si todo lo demás está en medio. ¿ Agrupémoslos dedo del pie así que va a ser no ir. Y este va a ser nuestro grupo de registro. Vamos a movernos. Mueve todo en el medio. Antes de eso, También podemos agrupar a estos dos ahora se ve equilibrado y todo está en medio. Eso es lo que queríamos crear. Ahora todo parece en medio. Eso es lo que queríamos crear. Ahora yo Lo que quiero que hagas es que vas a crear una pantalla de registro similar a ésta en la asignación. Entonces voy a crear otra asignación. Este es el siguiente paso. Estos son básicamente nuestros marcos de alambre. También puedes utilizarlas para conectar dos pantallas y si quieres crear una simple protesta prototipo con tus usuarios. Esto será un bajo nivel o baja fertilidad o, creo que hizo marco de alambre Fidelity o prototipo. Entonces no te preocupes, puedes destinar fácilmente porque tu acción es visible. Ahora se trata de un Burton. OK, espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente. 38. Uso de patrones de diseño de Ui para acelerar el diseño: en esto. Escuchen, les voy a compartir con ustedes dos fuera de mis secretos, lo que les ayudará a diseñar más rápido y mejor. De acuerdo, Entonces estos dos buscadores los voy a revelar en esta lección, y los vamos a diseñar para apuntar pantallas en esta lección, y estos van a ser el primer paso para construir el prototipo. De acuerdo, entonces en la siguiente sección, realidad vamos a diseñar, mejorar y diseñar la aplicación médica que te mostré al principio. Y ahora mismo, voy a terminar esta sección con este ejercicio, y espero que lo disfruten. De acuerdo, Entonces el primer secreto es que así cuando estás diseñando para algo como esto y estabas tratando de mejorar algo. Nuestro diseño o tratarde construir una solución. Necesitas usar el dedo del pie como menos colores como puedas. ¿ De acuerdo? Entonces solo usa un color, que es mi recomendación. Y yo siempre utilizas esto. Se puede ver estas son estas dos pantallas realmente se ven crear. Incluso estoy usando sólo un color. ¿ De acuerdo? Y ese solo color es este color azul. Por lo que puedes ver esto puede simplificar fácilmente tu proceso. Y puedes crear fácilmente algo como esto. De acuerdo, Ahora, el segundo secreto es que siempre tratan de usar build up ya buildup librerías patronales o bibliotecas gráficas. Pero se puede utilizar en acelerar el proceso como se puede ver. ¿ Qué? Aquí. Este es el teclado. No lo diseñé, porque si traté de diseñarlo yo mismo, tal vez no soy capaz de diseñarlo Lo primero y lo segundo entrenamiento es que tardará , como, tal vez tres o cuatro horas solo en diseñar este teclado. De acuerdo, entonces lo que hice es que conseguí esta pizarra de brebaje clave de la biblioteca, que te voy a mostrar en un segundo y también la barra de parada. Se puede ver esto es de mi estándar estadounidense en De Library de la OPEP. Han construido de forma gratuita, pero puedes descargar gratis en la página web de Apple y también esta y también esta zona en la parte superior. Esto también está bordeado de la misma biblioteca. De acuerdo, entonces estas bibliotecas patinan bibliotecas, guías de autos Styx. Nos van a ayudar a construir y agilizar nuestro trabajo. De acuerdo, Así que no intentes crear iconos como estos. ¿ Estos Son ésta esta batería? Yo te llamo a ti mismo. Se va a ralentizar tu diseño por ciento. Y esto no te va a ayudar en tu vida profesional. ¿ De acuerdo? Normalmente, lo que hago es normalmente compro Great are cool looking icons from creative market o algún otro website, porque esto me va a ayudar a mantener mis diseños y mantenerlos, ya sabes, hacerlos muy rápido. De acuerdo, Entonces lo que necesitamos es que necesitamos un diseño rápido. No queremos desperdiciar como Dan Astor diseñó un ícono. De acuerdo, así que esta es toda la charla de dos secretos que primero vas a usar bibliotecas construidas en bibliotecas ya construidas bibliotecas de diseño, bibliotecas patronales, que iban a pedir prestado por nuestros diseños. Estas son bibliotecas estándar. Y también estos son teclados rus estándar. De acuerdo, entonces estamos diseñando dedo del pie. Son tus pantallas básicamente Así que esto te va a ayudar si diseñas en photoshop o Adobe X'd o bosquejo. Estas bibliotecas construidas en eres tú, como si normalmente los llamaran generalmente niños de diseño de interfaz, te van a ayudar mucho. De acuerdo, entonces voy a compartir mostrarte los recursos que necesitamos para este ejercicio. Al igual que yo. Acude a mi navegador. Está bien. Ahora, lo primero que necesitamos es si estás en Windows, lo primero que necesitamos es este San Francisco Ford, que es ah, siente Ford fuera de nosotros, ABS y en Mac, ya está instalado. Si estás en, um, um, Última pregunta de Mac y segunda cosa, puedes descargarla desde aquí. De acuerdo, que puedas presionar esta descarga, descargar, comprimir, e instalar la versión pdf, no la verdadera inmersión abierta. De acuerdo, así que déjame mostrarte. De acuerdo, así que aquí he esperado esta carpeta que he descargado, que tienen s f pro teléfono San Francisco probar en San Francisco compacto, que es para relojes Apple, supongo. De acuerdo, entonces San Francisco pro, estoy abierto y tienen tipo abierto de tipo verdadero. Probado. Instalar este TDF. De acuerdo, eso será suficiente. Así que selecciónalos todos, instálalos. Y estamos un poco como yo comparto contigo los trabajadores de U que necesitas descargar antes de iniciar este ejercicio. Ahora bien, si vas a este desarrollo arte apple dot com, tales fuentes de barra de diseño. Hay recursos para diseñar estos, Ya sabes, yo nos 11. En este momento la versión es 11. Yo nos 11 interfaz. Ya puedes ver que estamos aquí. Esto es de las directrices de interfaz humana para el archivo de boceto show file y será X desafíado . Entonces descarga este archivo y lo vamos a necesitar cuando vamos a diseñar esto. ¿ De acuerdo? Además, puedes encontrar mucho apagado. Otro recurso es como si pudieras ver tu cabello en extra crecido. Ahí hay otro chico como éste. También, hay con este sitio web, gratis por supply dot com. Busco XDR nosotros. Se puede ver que hay escapes también. Se puede ver aquí es otro caso que me gusta mucho. Asegúrate de que sean gráficos estándar. No son un tú lo trabajas para aplicación específica. Se puede ver que estas son cosas estándar que necesitamos cuando estamos diseñando. Como puedes ver, estos son teclados por aquí. Está bien. Y ah, eso es todo. Antes de comenzar tu diseño, necesitas al menos este, o al menos éste. De acuerdo, así que no les dejes pasar nada. Y para mantenerlos en una carpeta separada y también tratar de descargar instalar. Si estás en Windows 10 instalado este San Francisco Prue en San Francisco Compact. Se puede ver que esto es para hombres virtuosos. Entonces en la siguiente lección, realidad vamos a empezar a diseñar esto. De acuerdo, así que pasemos a la siguiente lección y empecemos a diseñar las pantallas de apuntar ahora mismo. 39. Crear ejercicio de pantalla de que Signup Ios: De acuerdo, Ahora vamos a empezar a diseñar esto para esto. Vamos a abrir un nuevo archivo y vamos a seleccionar este iPhone 678 Haga clic en él. Y tenemos otro expediente por aquí. Control o comando cero para acercar al nivel máximo que podamos tener. De acuerdo, ahora vamos a empezar con la parte superior, y para eso vamos a necesitar nuestro Te gusta. De acuerdo, Entonces antes de eso, creo que deberíamos diseñar nuestras otras cosas rápidamente. Está bien. Por lo que rectángulo DOOL dedo del pie consigue un poco de cabello textual. OK, así que tenemos sensación fuera de blanco. A ver si va a caber en el medio. Está bien, así que se ve genial. De acuerdo, ahora tenemos sobre el texto. ¿ En serio? Ahora vamos a agregar una etiqueta por aquí, y para eso, vamos a usar capa de texto, y voy a ir a la fuerza, que va a ser San Francisco. Por lo que presiona s f en tu teclado y verás como media pantalla centro de prensa. Vamos a usar el texto de un chef o como unos látex, lo que quieras. Está bien. Y voy a usar excepto texto. Y vamos a teclear, um Vale, así que aquí tenemos uno. Ah, campo de texto. Y además, me voy a oscurecer en la frontera de este. ¿ De acuerdo? Y van a ser dos píxeles así. Se ve bien. De acuerdo, así que tenemos un campo, y lo que podemos hacer aquí es que podemos crear un make a symbol, y sería, um los próximos pocos simplemente dijeron, y podemos tener otro símbolo arrastrando o aquí. Y se puede ver que cambié a este SX, y ahí está mi símbolo, y puedo seguir adelante y cambiar x dos. Um, posible así que tenemos ahora mismo para sentir, y ahora necesitamos un botón. De acuerdo, así que para eso, voy a volver aquí. Vaya a esta herramienta de rectángulo, y me voy dedo del pie crear un botón un poco más pesado que este. Estos dos. Um Vale, así que esto se ve genial. Y voy a ir por algún color como este, ¿de acuerdo? Entonces no, no la frontera. Pero yo quiero el relleno. Toby, escucharemos algo como esto. Bueno, tal vez estemos bien. Entonces voy a agregar este asesino a los interruptores Michaela, así que no necesito acceder a él una y otra vez. OK, entonces este es de un color. Está bien. También, puedo agregar este grave ular este trabajo creativo siguiente vehicular para poder usarlo una y otra vez . También este color de borde. Esta es otra sombra de tres. Entonces tengo asesinos de árboles ahora mismo, así que no tengo más dedo del pie, ya sabes, los agrego una y otra vez. Ahora voy a duplicar este texto para que puedan ver en este panel de arrendamiento símbolo y el texto está fuera de este símbolo. ¿ De acuerdo? Y también puedes presionar control, cambiarlos y ver si lo recubren en el medio. Voy a cambiarlo una gran venta para arriba porque así me gusta. Se ve más natural. De acuerdo, entonces tenemos ahora esto por aquí, dos temores un inicio de sesión y lo que necesitamos es que necesitamos dos cosas más. Al igual que olvidó la contraseña. Vamos a estar bien. Para que veas cuando lo arrastro cerca, los dos se sienten ahí hay una distancia. Muestra que cada distancia es igual a 22 picks está bien, así que voy a dejarlo así. De acuerdo, así también, creo que estos, uh me fui de la escuela al símbolo me voy del dedo del pie. Cámbialo. Sí, lo voy a cerrar como dos cerdos están más cerca y ahora se ven más mejor. De acuerdo, moviendo el éste un poco más hacia abajo. De acuerdo, así que esto se ve crear. De acuerdo, entonces el eslogan también tiene que estar un poco abajo. De acuerdo, Ahora tenemos sólo necesitamos una contraseña olvidada y una más siguiente. OK, entonces a continuación haz clic en esta copia y lo estoy basando por aquí. Y luego cuando el moovit y se puede ver cuando trato de pagar algo, siempre está en la posición. OK, asegúrate de que tu distancia esté en buena entre los dos elementos capaces. Entonces si quiero tocar este, no quieres que toque también toque este. ¿ De acuerdo? Así que asegúrate de que tus thes dos elementos tienen buen espacio entre ellos dedo del pie mucho los grifos por tu bouquet tom, así que asegúrate de que estén al menos 44 o 50 píxeles separados entre sí. Por lo que esta zona debe ser 54 cuadros o algo así. De acuerdo, entonces tenemos, um no, será un enlace, y me voy a mover un poco más hacia abajo para que los usuarios puedan tocar fácilmente. Vale, No lo hagas más cerca de estos bordes están en la parte inferior o demasiado en la parte superior porque los usuarios no pueden acceder a esa zona. Esta es una gran zona. Si has visto mis puntajes de experiencia de usuario, ya sabes de lo que estoy hablando. Entonces lo voy a mantener por aquí así, y voy a cambiar su dedo de color este azul y también voy a poner una línea en directo. De acuerdo, Así que vamos a ver, cuál es la tasa de este 81 Y voy a usar mi herramienta de línea para crear una línea presionando shift. Y también son 1 81 voy a cambiar el color a este azul, y eso es todo. Pecho V. Y me voy a mover. Se sale de esto, algo así. De acuerdo, Ahora puedes ver casi he creado la mayoría de mis sentimientos. Ahora podemos agregar algunas sombras aquí en esta pantalla de inicio de sesión. Así se llama la sombra. De acuerdo, entonces estoy agregando esta sombra tres sobre violación y golpe 66 Y el color es este. Yo soy también puedo usar este y ah, puedo reducirlo al 20%. Algo así. De acuerdo, Así que tenemos ah añadió sombra y ah, estas son nuestras dos contraseñas y este campo. Y también los puedes saludar fuera de la frontera. Se ve muy pesado. Supongo que sí. Voy a usar lo mismo se puede ver una vez que cambie este, se va a reflejar a éste. Hazlo esto es muy puedo ver una característica muy bonita. No quiero que sean demasiado destacando porque ahora mismo, nuestra acción primaria es esta patéticamente. De acuerdo, Entonces si tenemos ah, hecho esto, vamos a moverlo un poco arriba 20. De acuerdo, entonces ahora se puede ver si me muevo en este símbolo. Esta es la zona. Va a ser accesible. Entonces si toco en esta esquina están en esta contraseña, debería activarse. De acuerdo, Entonces esto es algo que debes considerar. Puedes contárselo a tus desarrolladores al respecto. Que esto va a ser que este hoyo va a ser el área capaz son video interactivo . De acuerdo, ahora vamos a agregar algunas cosas para los detalles de nuestro tú, como si estuviera encendido. Y me gustaría que descargaran los nosotros Lo despiertas de mi nosotros y, ah, vamos a importar eso desde aquí. De acuerdo, entonces ahora voy a abrir eso aquí, y vamos a arrastrar algunas cosas por aquí. ¿ De acuerdo? Entonces, no, estoy en mis fuentes xdd para adultos mayores, y se puede ver si llamé a ésta. Yo puedo. Esta es la carpeta, y puedes ver aquí es para iPhone X, y esto es para iPhone. Entonces voy a abrir el sencillo, que es para iPhone, y voy a acercarlo controla tu comando. Cero un poco más. Vamos a importar este título por aquí. ¿ De acuerdo? se pueda ver esto se va dedo del pie tener todo dentro de él. Entonces se trata de embotelladores de navegación. Trata de ocultarlo y mostrarlo. Entonces lo que necesitamos es que no necesitamos la barra de herramientas, pero necesitamos al estado un spot en la parte superior. Entonces voy a copiarlo con el dedo. Mando y control o control C. Y voy a ir de pie a mi expediente. Estoy trabajando y controlando o mando V para pegarlo o aquí y simplemente arrástrelo en la parte superior y se va a pegar por aquí. De acuerdo, entonces este es un detalle que hemos agregado en este momento. Y entonces también podemos añadir el otro detalle que va a ser Ah. De acuerdo, ¿y qué? Necesitaba waas esto. De acuerdo, entonces, en realidad, necesitaba esta zona blanca. Déjame copiarlo desde aquí. Y, uh, básicamente con esto. Entonces recuerdo ahora que descargué esto para este blanco porque necesitamos uno blanco en ese blanco. ¿ Estás bien? Entonces me voy de pie, usa esta barra de navegación. Copiarlo, y lo voy a despilfarrar en mi un año aquí así, y se puede ver que está en la parte superior, Así que vamos a cambiarlo en la parte inferior. De acuerdo, Ahora puedes ver tengo pulsaciones de comando shift y back bracket, y está todo el camino de regreso. Entonces creo que solo debí haber presionado. Déjame conseguir ese control y nuestro núcleo comanda este corchete. De acuerdo, entonces ahí se está moviendo de nuevo por aquí, y ahora vamos a cambiar el color, así que haga doble clic en él y voy a cambiar el dedo del pie de color. Esto parece llevar a estas estrellas porque no las necesitamos en este momento. ¿ Verdad? Accede a ella e y dejó excesiva. Estás aquí. Y ah, siguiente movimiento al perro. ¿ Qué está pasando? Está bien, ahora está frito. Cambiemos su color blanco y usemos. Date de alta. Date de alta, ya sabes. De acuerdo, Entonces no tenemos ningún texto por aquí como si esto fuera gratis o algo así. No queremos que el dedo del usuario se confunda. Ese apuntar cuesta o algo así. Entonces vamos a añadir algo de texto por aquí. Traer el apuntarte es gratis. De acuerdo, Ahora, una cosa más. También podemos agregar este para armar puntera. OK, entonces voy a hacer un símbolo de esto, pero y así vamos a necesitar estas herramientas dedo del pie cosas. Y además, voy a ver si podemos hacer de esto un símbolo. De acuerdo, así que vamos a dejarlo. Porque este subrayado será un problema. Si podemos usar subrayado fuera de este textil aquí, será mejor. Solar. Ya sabes, yo también voy a convertirlo en un símbolo. Por lo que es más fácil para mí agregar enlaces, pero entienda esto. Date de alta. Higos. Está bien. No, voy a arreglar pocas cosas o aire aquí y allá solo para hacer correcto el espaciado y voy a dejar la siguiente pantalla que Toby diseñó para ti. ¿ Y vas a importar el teclado de aquí así? No, estoy presionando mi tecla de arte u opción para ver las distancias. Y yo espero en este. Sospecha de éste. Aguanta esto. Se pueden ver las distancias. Ahora puedes ver que he terminado de alinear todo. Y hemos utilizado con éxito el RUS. Lo trabajas desde Apple y que ese tipo dedo del pie copie estas cosas y lo hagas rápidamente. De acuerdo, entonces en la siguiente lección, les voy a dar una asignación para crear más pantallas, pantallas similares mostrándoles el estado es y les voy a vincular dedo del pie, crear un prototipo. De acuerdo, así que hasta entonces, cuídate. Adiós. Y espero que hayan disfrutado de esta lección. Pasemos a la siguiente 40. Comenzar preparativos de diseño: Está bien. Ahora, Intersección, vamos a diseñar nuestra aplicación de herramientas GP de gran apariencia en Adobe X T. Y antes de cavar en este material de diseño, necesito discutir algunas cosas. Al igual que cómo juntos están estos recursos he usado cómo vas a descargarlos y cómo vamos dedo del pie seleccionar este esquema de color. Está bien. Para que puedas ver estas son todas las diferentes pantallas. Vamos a alejarnos y, uh, mostrarte qué? ¿ 100%? Creo que es mejor porque está renderizando mi fuerza. De acuerdo, así pueden ver por aquí que he usado tres colores. De acuerdo, si miras de cerca, uno es este color principal, que se acabó. Se puede decir prime regular para acciones primarias como estas son para botones. Se puede ver que estas son todas nuestras mayores cargas creando un auto. Blogueando. Ahora inicia sesión ahora. Está bien. Además, puedes ver que uso el mismo color por aquí en el menú slide out. Y como este es nuestro color principal, utilicé otro color, pero se puede ver por aquí, que es un Betsy en color. De acuerdo, entonces, no, estos dos asesinos están relacionados del dedo del pie campo médico o medicina. De acuerdo, Entonces necesitas dedo del pie. Ten en cuenta así lo que intentas usar, ¿de acuerdo? Y se puede ver en este color necesitaba un color muy nítido para que pueda tener algunos elementos resaltados en él. Entonces uso este color joven. De acuerdo, entonces están combinando mujeres. Entonces hay un problema que si quiero mostrar enlace en este fondo este color oscuro, necesitaba un color más, que era este color amarillo. Entonces usé un dedo del pie de color amarillento, ya sabes, mezclar con mi esquema de color. De acuerdo, entonces entonces te hemos dejado mostrarte. ¿ De acuerdo? Por lo que ya tengo un color más para este link, que es un color extra. Ya puedes ver si me cambio a éste. Se puede ver que esto también se ve muy bien. No se ve muy mal. De acuerdo, entonces si quieres pasar por encima decolorar, este es nuestro color azulado. Se puede ver u oír es uno a seis e c tres. OK, así se puede ver aquí. Tengo muchos colores. Cuando trato de diseñar algo, hago muchos colores. Trató de experimentar con ellos. Está bien. Entonces en lugar de tener uno o dos asesinos. Para empezar, empiezo con un color como este un color principal y pruebo dedo del pie. Agrega unos colores más en combinación a esto. OK, para que se pueda ver este azul también está trabajando con éste. Está bien. Y ah, el otro apalancamiento Hlinka que estoy usando por aquí, que es mi color estándar es un azul púrpura que es el mismo, creo que como este botón. De acuerdo, entonces puedes probar diferentes colores si quieres Toe. Hay mucho fuera de los recursos en línea para crear esquemas de color que te voy a mostrar en tan solo un minuto. Uno de ellos es mi favorito, donde puedes usar solo un color para crear todo un esquema de color. De acuerdo, entonces se puede ver u oír en esta puñalada son se puede ver que he usado un color oscuro y en general estaban o estado activo. Estoy usando este color. Esto es un poco como todos los promedios. Yo Ok, ahora se puede ver aquí en este botón. Esto es diferente. Es un poco más oscuro. Sombra el mismo Ver en color muy nítido. Color muy brillante. Por lo que este es Britt son de color aburrido. Está bien. También puedes usar este color. Pero estoy usando decolor este color púrpura oscuro, azulado para mis acciones primarias. De acuerdo, Y dentro del ab, cuando estabas dentro de la app en la puñalada estoy usando decolor para diferentes botones. OK, así que puedes ver esto también es un botón por aquí. Y esto también se trata de un no pelo. OK, para que puedas ver la similitud que necesitas para ser consistente dentro de tu app. Entonces si uso un color azul oscuro morado Calero aquí y uso ah Pil Seong color o aquí va a ser esto es inconsistencia. Por lo que hay que quitárselo todas estas inconsistencias. Por lo que tu app se ve increíble y consistente en tu diseño visual y tus colores y esquema todo bien. Y antes de iniciar este diseño, quiero que descargues todos los activos que he utilizado en este ejercicio. Los puedes encontrar en recursos en esta sección en la primera lección sobre se puede adjuntar a esto. Escucha, la fuerza de iconos SPD llama el fondo que he usado Estos son todos gratis y este es el ícono que realmente diseñé para el aire por cinturón. Ok, diseñé Ok, Así que esta es una app de Reino Unido para médicos. De acuerdo, Entonces antes de iniciar este diseño, quiero que descarguen estos activos los cuales se adjuntan a esto. Ah, conferencia. Y necesitas todos estos activos antes de iniciar este ejercicio. Vuelve a descargar estas fuerza. E sand dijo si tú y Ford y también puedes usar roboto si quieres. Ah, y esto otra vez, E. Y también van a quedar muy bien. Estos otros recursos los descargan y vamos a empezar en la siguiente lección. De acuerdo, Entonces nos vemos pronto en la próxima lección. 41. Esquema de colores y Insprations: De acuerdo, Antes de empezar a diseñar esta impresionante aplicación, vamos a discutir algunas cosas. De acuerdo, el número uno es inspiración. Antes de comenzar cualquier diseño, vas a ver los abs similares y sitios web similares para ver qué esquemas de color están usando. Qué tipo de tipografía corta que están usando. De acuerdo, entonces para eso, déjame mostrarte cómo empecé este proceso. Antes de entrar en esto, tenía que elegir al menos dos asesinos para empezar. De acuerdo, Entonces déjame mostrarte mi inspiración y cómo las uso. Se puede ver esta es mi carpeta de inspiración. Yo sólo tengo tres cosas por aquí. Este esquema de color. Creo que me las arreglé para crear este a partir de refrigeradores punto C o r Tal vez pienso un trabajo en un particular Ok, AB, Y este es otro que puedes ver. Esto es déjame mostrarte acercando. Por lo que esto también está usando un color y un color verde y otro es azul. Y están estos diferentes tonos azul claro del alcohol del dedo del pie brillante. De acuerdo, entonces este es otro ejemplo en mi show. Ya has oído uno Puedes ver por aquí. Esto se ve genial. Y si miras de cerca a estos dos asesinos que fueron el principal objetivo para mí. De acuerdo, Así que realmente me encantan estos dos asesinos, que se pueden usar en nuestro ab. variación árabe de decolor de Michaela no es similar. Entonces no intentes copiar totalmente todo. A pesar de que creo que puedes usar los mismos colores que son o aquí. Pero necesitaba un poco de pescado brillante y tío de mar azul en lugar del croquet estilo. Entonces esta es mi carpeta de inspiración. Y ah, creo que ya vi mucho fuera de APS médicas. Entonces, uh, eso no fue un gran, gran problema, pero se puede ver principalmente esquema Michaela está dentro de esto. De acuerdo, estamos usando camioneta amarilla, el mar en el talón azul Eso está entre CNN y este color púrpura. Y entonces este teléfono es un quemador un poco azul brillante. De acuerdo, entonces puedes agregarle vacío o negro, y puedes hacerlos aburridos ajustando el brillo y la saturación y sacarle más asesinos . De acuerdo, entonces déjame mostrarte cómo obtuve diferentes colores de ella. ¿ De acuerdo? Para que se pueda ver esto es de un color. Es un gran, opaco color azul oscuro. Adelante. Ahora, si te muestro éste y este asesino Así que este color Vale, para que puedas verlo es casi del mismo color azul, pero en el lado grande. De acuerdo, así que he usado ah, poco gris y esta zona negra movió un color desde aquí. De acuerdo, entonces si voy a este color como yo te muestro tan descubierto, supongo. De acuerdo, Entonces ya puedes ver ahora ¿cuál es la diferencia? Cómo logré usar en el mismo color y creé un nuevo color a partir de él arrastrándolo en la esta área, se puede ver. De acuerdo, entonces aquí está casi cerca de esto. De acuerdo, entonces vuelve. De acuerdo, Así que estoy usando no puramente Kriegler. Por aquí está un poco apagado de color azul grisáceo. Y también se puede ver esto también es lo mismo. Se puede ver que todavía está en esta zona 211 Hugh y Ah, Y si voy a esta, creo que esto también es 211. Déjame ir a este. Ya veo. Entonces, ¿quién es el mismo? Entonces este color es el mismo. Apenas la saturación y el brillo. Yo he cambiado. He demostrado esta técnica en mis otros cursos toe que puedes crear muchos colores a partir de cambiando sólo el brillo y la saturación y manteniendo el tono mismo. De acuerdo, ¿Quién es el color básico que define eso? ¿ De qué color estás usando? En realidad era el color. Estos son ajustes toda situación casa hattrick saturado. El color será Y que este sea el brillo médico estará del lado de la vida o del lado oscuro. De acuerdo, Entonces así es como elegí este esquema de color y cómo obtuve inspiraciones y colores diferentes. Cómo dedo del pie, Ya sabes, empezar a diseñar con este tipo off. Ya sabes, profesionalismo. Una cosa más es que tus diseños van dedo del pie a mejorar con el tiempo. De acuerdo, entonces si crees que acabo de crear este diseño al instante y no había ningún proceso en medio donde yo, ya sabes, probé diferentes diseños o pruebo diferentes mecenas Antes de eso, estaba usando sólo ah, fondo de avión. OK, entonces no estaba usando Déjame esconder éste y éste. De acuerdo, entonces estaba usando algo como esto. De acuerdo, Entonces pensé que debería usar algún contexto en el fondo, y dije que debería usar algo detrás de ti. OK, entonces así es como usamos la inspiración y la zumo para crear nuestros APS unos buscando. No hay un diseño en el mundo que sea original. De acuerdo, todo está sacado de alguna parte. De acuerdo, entonces este es un tema fuera de mi disertación. Espero que hayan disfrutado de esta lección. Pasemos a los siguientes s y donde voy a discutir los puntos de la experiencia del usuario. Vamos a mejorar y te vamos a mostrar las viejas pantallas fuera de la misma app. 42. Resolver problemas de descarga de la aplicación antigua: De acuerdo, ahora en esto Escucha, te voy a mostrar lo que señala aspectos de experiencia de usuario que mejoramos en esto cada diseño. De acuerdo, Ahora puedes ver esta es la primera versión de esta app que puede acercar en 200% y puedes ver aros. De acuerdo, entonces aquí tenemos, Puedes ver la pantalla de inicio de sesión. Dice contraseña de nombre de usuario, lo cual es muy confuso. Lo cambiamos por correo electrónico. También, Este No hay equipo visual claro acusan y visual, como se puede ver este perro barra azul y este tronco, y son iguales. De acuerdo, entonces este botón de acción, que se llama acción primaria, debe ser diferente a esto porque no necesita saber que esto es una acción. Y este es un título que fue un error de diseño visual muy grande. Entonces aquí tenemos mucho fuera de diferentes campos, que vamos a reducir toe tres se siente, y luego tenemos el tablero de escombros, que es realmente no parece un tablero. Y se pueden ver todos los colores y todos los botones. Si miras de cerca aquí, son iguales. De acuerdo, No hay indicio de que esto esté activo. Esto está borroso con el fondo, que es muy difícil dedo del pie, ya sabes, años de defensa. De acuerdo, entonces tenemos esta pantalla y hay muchas actividades diferentes por aquí. Y esta es una pantalla de entrada de actividad que no vamos a diseñar. Y les voy a mostrar algunas pantallas más cuáles son su reciente y diseño. Este es un diseño reciente de su ah ah, aplicación de Android. Y se puede ver que vamos de pie. Hazlo más bueno. De acuerdo, entonces esta pantalla, casi estamos tomando lo mismo. Pero se puede ver como se puede ver u escuchar esta área es un botón. Esta zona también es un botón, pero no parece una carga demasiado. De acuerdo, entonces si ves mi ejemplo en mi equipo, cambio esto por un botón. Entonces tenemos ah, muy gran fondo de gaviota por detrás, que es que no sé me parece extraño. Aquí no hay imagen de avatar. Está bien. Y, uh, déjame hacer zoom, vaya a la otra. Ok, así que aquí están nuestras actividades. Lo que hicieron es, en lugar de tener ah, mucho fuera barra de navegación muy grande en la parte superior. Los judíos, combinan todas las actividades en este. De acuerdo, entonces cualquier actividad que se utilice la mayor parte del tiempo que estás en su mayoría son utilizadas mayormente por el usuario. Deben estar en la cima. OK, para que puedas acceder fácilmente a ellos. Y luego tenemos la pantalla del fregadero desde. Estamos casi copilando esta misma estructura, pero estamos tratando de mejorar el dedo del pie. De acuerdo, entonces el diseño visual de esta aplicación realmente apesta. Si bien es mejor que la primera versión que fue ésta. Pero aún así creo que podemos mejorar mucho. De acuerdo, entonces no se ven así. Estos son posibles. También esto están usando solo un asesino para todo. Por aquí, se puede ver el mismo color para todo. Para botones, para estado, para todo. Ahora puedes ver aquí este es estado. Ahí, ahí, cinco tasaciones. Pero no hay esquema de color que ese puro diferente que esto es ah, botón posible o no. Está bien. Además, la brecha entre estos me parece un poco menos, para mi gusto. O a lo mejor creo que se va de pie. Ah, mucho fuera. Pasos en falso. Pasos equivocados significa que si alguien está tratando de tocar aquí van a tocar en esta zona porque están muy cerca. De acuerdo, entonces necesitamos separarlos. Este es uno otro problema de experiencia de usuario en él. De acuerdo, Entonces eso es todo lo que me gustaría decir que vamos a mejorar al equipo visual fuera de esto. Nos vamos a diferenciar de la acción primaria, que es el botón, que es un título. ¿ Y cuál es la información? De acuerdo, entonces tenemos que separar todos de estos. Entonces empecemos a diseñar esto. Vamos a empezar con la primera pantalla, así que pasemos a la siguiente lección. 43. Diseño de pantalla de bienvenida: Está bien. No, En esta lección, realidad vamos a empezar a diseñar esta. De acuerdo, Ahora se puede ver en la parte superior. Esto se toma prestado de en te gusta de manzana. Y te mostré antes, y puedes ver que esta pantalla está un poco borrosa. Estamos usando sangre de fondo por aquí, y todo lo demás es Vamos con el dedo del pie diseñado, ¿ verdad? Los ñoquis. Entonces lo que vamos a hacer es crear un nuevo documento, y va a ser pantalla de iPhone 67 años. Basta con pulsar kick una vez y con zoom en el control, comando cero. OK, ahora, vamos a empezar de nuevo aquí antes de eso. Ya sé que has descargado la carpeta de activos que te he dado. De acuerdo, Entonces lo que vamos a hacer es que vamos a traer las fotos y todo por aquí antes de eso. Necesitamos esta barra de navegación superior, así que vamos a traerla de, uh, ¿ eres un niño de manzana? Entonces esto está en manzana. A ti te gusta. Y si voy por aquí, necesito éste al norte, en realidad. X iPhone X uno. De acuerdo, entonces necesitamos éste. Entonces vamos a copiar la parte superior. Entonces lo tenemos por aquí. Copiarlo. El estado de adelante. Disculpe este. De acuerdo, así que aquí tenemos el Skopje y simplemente arrastrarlo en la parte superior, y va a sobresalir un médicamente Vale, No, nosotros el estatus de Garda, pero en la parte superior. Ahora vamos a traer la imagen de fondo por aquí, - otro rectángulo en la parte superior para crear el efecto de desenfoque de fondo. Entonces voy a tener un rectángulo por aquí quitado el borde, y se puede ver el tamaño es el mismo que un lienzo. Y luego vamos a usar sangre de fondo. De acuerdo, Ahora el desenfoque de fondo. Los valores serán sangre entre árbol. Necesitamos sangre muy pequeña. Brillo será menos uno. Necesitamos un poco fuera. Oscuro oscuro, suelo desnudo y opacidad será del 15%. De acuerdo, Ahora puedes ver este es el efecto que creé. Otra vez necesitamos moverlo hacia abajo así por aquí antes de esta imagen. ¿ De acuerdo? Ahora lo que vamos a hacer es ir del pie, seleccionarlos, agruparlos , y vamos a bloquearlo. Ese es nuestro trasfondo. Hemos creado nuestro fondo borroso por aquí y el stop navigation. Pero ahora necesitamos un logo por aquí. Entonces, rastreemos este logotipo. Está en PNG. Formarlo para que podamos usar la transparencia por aquí. De acuerdo, entonces esto es un gran grande, Así que voy a encogerlo hacia abajo presionando y manteniendo el turno. A lo mejor 1 72 Así que voy dedo del pie talla 1 72 pixels por 1 72 ¿Por qué crees que tengo un logo muy grande? Porque tal vez para otras pantallas, tal vez iPhone X. Necesitamos una más grande. Toby exportó. De acuerdo, eso va a ser en nuestras discusiones posteriores ahora mismo. Sólo necesito saber que necesitamos esto. Y también vamos a añadir algo de sombra sobre él. Y los ajustes de sombras son seis y seis. De acuerdo, entonces seis cerdos se enferman al fondo, y seis es la sangre, y va a ser del 10%. De acuerdo, así que en lugar del 16% voy a usar el 10% por aquí. Entonces el color está por aquí. Este es el porcentaje de la sombra, la opacidad. Esto es básicamente transparencia y opacidad fuera de esta sombra. Alfa, ¿puedes ver qué? Aquí. De acuerdo, entonces aquí tenemos sombra muy agradable, cremosa a su alrededor. Y luego vamos a crear algo del texto por aquí Eso es como el té. Y voy a presionar una vez por aquí y vamos a volver a usar el Ford. A que veo. De acuerdo, Entonces vamos primero Taipower textil Hair GP dedos de los pies, y luego vamos a volver a kowtow. Y voy a usar extra audaz. Y, uh, tamaño es de 32 fotos en 32 puntos. Voy a presionar la TV a continuación, traerla en el medio, y también el color va a ser algo así. Toto. Además, si quieres, puedes usar algo que va a estar en la playera azul. De acuerdo, entonces tal vez algo más cercano a esto diga, sí, Ok. Entonces el color que puedes ver, lo que he usado es que he cambiado a este matiz, saturación y brillo, y estoy usando el enorme 211 que es nuestro color principal, yo y prime regular off este diseño. Entonces estoy usando esta situación y este brillo. De acuerdo, entonces estamos bajando la situación. Si tratamos de aumentarlo, le pondrá algo más de color. Se puede ver que se está moviendo hacia este lado de color Vale, así que si lo muevo por aquí como el 90% va a estar por aquí, así que no queremos que sea un color negro azulado. Pero queríamos ser algo, uh, en esta área. 17. Eso se ve bien. De acuerdo, Ahora vamos a escribir nuestro texto por aquí, y vamos a la primera vez el texto. Ahora puedes ver he hecho clic en este texto de área porque es un párrafo. Por lo que necesitamos ajustarlo con eso. Bajemos el tamaño a 16 y lo vamos a bajar así. Entonces vamos a traerlo en algo como esto. A lo mejor así. ¿ De acuerdo? No, necesitamos un fuerte regular, y necesitamos cambiarlo a s f tú me mezcle. Ve a esto. En primer lugar, éste. Ahora, vamos a usar el medio y el centro por aquí y alinémonos. Económico. De acuerdo, ahora la altura de línea y el espaciado de línea es de 19. Puedes mejorarlo a 20 si quieres. Ah, pero creo que 19 luce perfecto. Esta es una muy buena legible telefonizada en tamaños muy pequeños. Y también puedes volver a usar esto. Es si quieres dedo del pie depende de ti. Pero realmente me gusta la agonía. Ah, voy a preguntar al barco Son las formas libres y fuerza realmente agradable. Entonces me voy a quedar con otra vez ahora mismo porque creo que compartí contigo la agonía. De acuerdo, entonces nuestra pantalla de carga o la primera pantalla fuera de nuestro ab ya está hecha. Espero que hayan disfrutado de esto. Ah, asegúrate de que este color de este texto sea un poco, um, menos o tal vez un más oscuro como este. Una cosa más que tenemos que hacer aquí es que necesitamos seleccionar este color y añadirlo a nuestro interruptor asesino. De acuerdo, entonces este es nuestro primer color. Por lo que necesitábamos estar en la muestra de color. Y además, quiero este color Toby en la puntera de muestra de color. De acuerdo, entonces tenemos dos colores por aquí. Al final, vamos a, ya sabes, encontrar una tumba. Bien. Sintoniza estos colores, así que no te preocupes por ello en este momento. Esta es nuestra primera pantalla. Si quieres cambiarlo, dedo del pie este, uh, punto X. Puedes cambiarlo a texto puntual si quieres, porque en este momento ya lo hemos hecho con él. ¿ De acuerdo? Entonces esta es nuestra pantalla. Vamos a espacio 200% así y se ve realmente genial. Hagámoslo de nuevo. El mismo color excepto lucir realmente afilado. De acuerdo, así que nuestra primera pantalla está hecha. Vamos a crear otra pantalla en la siguiente lección. Y espero que hayan disfrutado de esto. Una cosa más que puedes hacer es que este va a ser nuestro rumbo. De acuerdo, así que necesitamos que esté en esta sexy OK, así que necesitamos hacer click derecho y crear y matar. De acuerdo, entonces queremos decolorar para nuestros encabezados de texto. Y también nos vamos de pie. Haces una cosa más, que es que vamos a crear el texto. De acuerdo, así que esto va a ser al estilo de tractor. Uno es éste. Y esto va a ser sobre el estilo de encabezamiento y director. De acuerdo, Así que puedes ver ya tenemos que corregir unos estilos, por lo que será más fácil para nosotros hacer lo mismo en la siguiente lección. De acuerdo, entonces eso es todo lo que ya empezamos a construir sobre el estilo corrector y nuestros colores. Normalmente aconsejo que cree y mejore sus colores de guía de pocillos y agrietados a un lado y símbolos a medida que avanza en su diseño en lugar de construir todo primero y luego implementarlo en el diseño. De acuerdo, así que vamos a conocerte en la siguiente lección donde vamos a diseñar la siguiente pantalla. 44. Diseño de la pantalla de acceso: ahora en esto. Escucha, vamos a diseñar esta pantalla de inicio de sesión para la misma aplicación. Antes diseñamos éste. Esto en el proceso, y diseñamos esta pantalla de bienvenida o pantalla de carga, y ahora vamos a ir a esta pantalla de inicio de sesión. De acuerdo, entonces aquí tenemos un poco este botón. Sombra estos dos botones con estos colores. Entonces empecemos y realmente diseñemos algo como esto. Voy a cerrar este. Y este es nuestro último expediente de trabajo. Ahora, simplemente lo que voy a hacer es duplicar este hardboard, pasando por alto mi clave de opción de arte y arrastrándola así. ¿ De acuerdo? No, no necesitamos éste. Ya tenemos los textiles, así que no los necesitamos para nada. De acuerdo, entonces primero que vamos a hacer es que vamos a tener una parada dirigiéndonos hacia aquí, que también podemos conseguir de mi U Y de manzana. Déjame ir a este. Y veamos con el título. Sí. Está bien. Entonces aquí tenemos este título. Se puede ver que Este es nuestro título en esta barra de navegación? Esta es una barra de herramientas. Este es el cuerpo. No necesitamos el cuerpo. Sólo necesitamos esta barra de navegación. Y necesitamos esto, en realidad, sí. Entonces voy a control del dedo del pie, Ver un comando C y colocarlo por aquí. De acuerdo, entonces lo vamos a mover en la parte superior debajo de la barra de estado, y no necesitamos ningún color en esta. Y voy a usar lo mismo esta área para escribir Jeep ser la cara de Toole, así que puedes ver en este momento está en la pantalla pro de San Francisco. ¿ Qué? No lo necesitamos ahora mismo. A lo mejor podemos usar el mismo teléfono si quieres. Ah, porque muestra para rumbo. Así que vamos a hacer click derecho para el color extraño a local cada necesidad, y luego lo voy a agregar a otro erstein agrietado. Entonces tal vez podamos cambiar esta herramienta tan prodigiosamente. De acuerdo, Ahora lo que voy a hacer es que lo voy a alinear en el medio así, y vamos a quitar estas estrellas porque no las necesitamos. De acuerdo, entonces vamos a la escuela a esta capa y veamos que este es nuestro grupo ¿verdad? Accesorio y accesorio izquierdo. Nosotros los vamos a quitar. De acuerdo, entonces aquí tenemos las mismas especificaciones que Apple está usando. Estas son las especificaciones por defecto también podemos hacerle lo mismo. Vamos a dar clic en este y ya está. Se puede ver ahora esto convertido a esto. Ah, éste. Voy con el dedo del pie. Créanlo para sf un texto. Y este es sentido fuera de los productos de San Francisco. Pero también puedes usar de nuevo. Ese no es un tema muy grande ahora mismo. Ahora vamos a usar velas. Estaban aquí y me voy a la carrera algo así por aquí. Este va a ser nuestro campo de texto. Hagámoslo 60 de alto. Creo que 60 es demasiado. A lo mejor 50 seis waas luciendo bien, quitaron la frontera y le vamos a añadir algo de sombra. Añadamos algo de sombra. Se trata de tres y seis. También voy a hacer algunas esquinas redondeadas y va a estar muy asentado. Entonces voy a usar a o aquí Y creo que Shadow se ve bien con los valores por defecto. Creo que no quiero cada difusión La sombra. Yo quería estar cerca de esto y también quería muy ligero. Por lo que 10% se puede ver 000 10%. Es de color negro. De acuerdo, entonces aquí tenemos un campo de texto. Entonces podemos tener nuestro texto sobre él. Y ese lado email como este. Y ahora vamos a usar una caja fuerte. Te un texto. Y vamos a usar otro color. Agregar otro color a ella puede ser discreto. Entonces tenemos a este Kriegler. Ahora, eso es presionar V y muévelo por aquí. Va a tener 18 píxeles de distancia de esto. Este es nuestro único campo de texto. Esto se ve genial. Siguiente selecciona tanto fuera de ellos como a la derecha. Haga clic y haga un símbolo. De acuerdo, entonces ahora tenemos un texto tres abajo aquí. Simplemente arrástrelo así. Entonces voy a tener palabra jefe para que veas lo fácil que es ahora. Y es muy fácil crear diferentes campos fuera del mismo tipo. De acuerdo, entonces tenemos dos campos por aquí, y ahora necesitamos el botón de inicio de sesión. Sí. Entonces lo que voy a hacer es otra vez un rectángulo y voy a tener el mismo tamaño como un poco más alto 60 para la altura, fuera de la carga porque debería ser diferente a nuestro este campo. De acuerdo, entonces el color que voy a usar es 211 y 84 60. De acuerdo, entonces este es el color. Y Ah, me agregan. O aquí. Y nos vamos a dar el dedo del pie. Alguna sombra, este botón drop shadow y nuestros valores son la sombra extrema. Los colores apagan la sombra. Este es del mismo color, y va a ser 36 22. Este es un color de sombra, y ah, entonces vamos a cambiar los valores a cuatro y él. De acuerdo, así que estos son estos valores van a ser después de alguna experimentación. Además, la esquina redondeada es de cuatro para este. Es más redondeado que estos dos. ¿ De acuerdo? Y sea así parece un botón. De acuerdo, también, este porcentaje es diferente. Va a ser 30%. Necesitamos una sombra más pesada sobre ella. De acuerdo, Entonces se separa del fondo. Dicho esto, el texto, que va a quedar vacío por aquí. Añadamos el texto log in. Ya sabes, algo así. Cuellos blancos y el colateral blanco adelante. Y, uh OK, así que voy a moverlo en el medio así. Y esto se ve crear porque ya tiene menos espacio. El top. Creo que necesito moverlo en la parte superior así. Entonces se ve bien. De acuerdo, Ahora, también podemos agregar este uno dos horas de recolección, click derecho y bien. Entonces, en lugar de sumar éste, vamos a sumar ambos de ellos. Entonces OK, vamos a sumar por el estilo Specter, y luego vamos a añadir grupo. De acuerdo, así que no los agrupemos hagamos un simple sí. Entonces tenemos un mejor saber aquí ahora. Está bien. Entonces si hice algo por aquí, va a ser detenido en todo el mundo. Así que asegúrate de que este va a ser tu botón, y no vas a cambiar muchas cosas en él. OK, ahora vamos a añadir un texto que se va a formar todavía. Olvidó su contraseña. Esto va a ser enlace. Por lo que voy a añadir el singular para el enlace ahora mismo va a ser el medio. Asegúrate de que tus ataques y todo sea una línea en el medio porque ahora mismo estamos diseñando todo para el medio. De acuerdo, así que esto es bueno. De acuerdo, Así que no está en el medio ahí pequeño Todo en el medio. Y entonces este dedo con respecto al escaneo estaba bien. Por lo que también podemos subirlo un poco así. Así. También, tenemos mucho espacio por aquí, así que ¿por qué no moverlo arriba? Por eso voy a tener 44 pixel lejos de la ciudad. Entonces tenemos mucho espacio por aquí porque lo necesitamos. Vamos a diseñar la evidencia de bitácora para Facebook y Google. De acuerdo, así que ahora nos vamos de pie, haz lo mismo otra vez por aquí. Y esta vez voy a tener menos altura para el botón. Sólo vamos a ser 50 cuatro. Creo que debería estar emparejando con éste. Este es el 56. De acuerdo, así que esto va a ser 56 y el alto. Muy duro. Esto es 5 60 t Esto es 5 63 más o menos. Todo debe ser consistente en esto en diseñado. Entonces vamos del dedo del pie, mueve la frontera. Color de relleno será, Ah, el Facebook azul a 18. 84% de saturación y 60% de brillo. De acuerdo, entonces tenemos este color azul, que es de los clics de Facebook. Vamos a moverlo un poco más arriba en el brillo así. De acuerdo, entonces vamos a sumar cuatro alrededor de este estudio. Plena redondez a la misma. Es una capacidad de lord para todo esto. De acuerdo, así que ahora se ve bien, y entonces vamos a ir de dedo duplicarlo y usar nuestro otro color naranja para nuestro, uh, Google Google Google. De acuerdo, entonces tenemos en la escullería cero dedo 70 y 85. Entonces, ¿cómo puedes conseguir estos colores? Puedes conseguir los scullers de internet. Puedes colorearlos. Se puede elegir un color de él con el uso de algunas fuera de las herramientas que tengo. Te voy a mostrar algún día pronto. De acuerdo, entonces tenemos estos dos botones, y luego necesitamos un texto. Acabamos de inscribirnos con correo electrónico. Está bien. Entonces vamos a moverlas un poco arriba. Sí. Entonces, así , entonces también lo vamos a mover hacia arriba porque tenemos menos base en la parte inferior y vamos a duplicar esto. Este es nuestro enlace. Entonces vamos a usar el registro, humano, algo así en el medio, ese pequeño en el medio. De acuerdo, así que asegúrate de que estos estén separados para que puedan ser fácilmente capaces. De acuerdo, así que ahora mismo veo mucho menos espacio por aquí. Entonces voy a subir estos Albert, así que hay más espacio para ello. Dedo reprimido. Está bien. Está bien. Entonces lo hemos trazado todo. Llevemos nuestros iconos SPG de iconos de fondación. Voy a abrir. Este recurso es aseveraciones y iconos SPD. En realidad, guardo estos iconos. Los he escogido de los iconos de la fundación y, ah, para que puedas tener menos tiempo, ya sabes, buscándolos. OK, así que les voy a quitar a los dos. Simplemente arrástrelos en remolque. X'd así se ve, pero así y lo arrastró hasta aquí. De acuerdo, Ahora puedes ver que hemos comprado iconos por aquí. Vamos a moverlas por aquí en esta zona. Siguiente muévete al panel de capas, y lo que voy a hacer está bien, así que voy a moverlas del dedo del pie de la posición real. Y vamos a Jane el relleno color el blanco para éste, también. Voy a hacerlos más pequeños. Hagámoslos 48 por 40. Es Cerremos esto. Vamos a intentarlo. 36. 36 es demasiado pequeño, creo que para el se veía bien. Siguiente hazlo en medio así. Creo que se ven bien. Ahora vamos a añadir algo de texto por aquí. Vamos a mover este texto y llevarlo al frente. De acuerdo, entonces vamos a cambiar el color del blanco Todo lo que podemos usar algo como esto. Selecciona esto y selecciona este blanco y vamos a cambiarlo con el dedo del pie. Inicia sesión yendo a alinearlo en medio de ella más cerca de este inicia sesión con Facebook, va a duplicarlo de nuevo e inicia sesión con Google. Ahora puedes ver estos comprados se alinean a la izquierda con su texto. OK, así que no intentes desalinearlos ni moverlo en medio por aquí. De acuerdo, Ahora todo parece escuela. Vamos a añadir un estilo de carácter más, que son nuestros enlaces de texto. ¿ Verdad? Haga clic y agregue Estilo Corrector. Ok, entonces este es nuestro enlace de texto de prueba. Se trata de texto sobre un fondo oscuro. Esto es sobre fondo claro. Este es nuestro rubro. O también puedes usar este. También usó Roberto para ello si quieres. Ah, y eso se vería genial, Tok. Por lo que terminamos con este ejercicio. Hemos creado pocos símbolos como éste sobre esta carga y esta. Ah, pocos estilos más, estilos carácter. Espero que hayan disfrutado de esta lección. Si necesitas más ayuda o quieres hacer preguntas, puedes preguntarme en cualquier momento. Pasemos a la siguiente lección. 45. Design la sesión de la pantalla activada: Está bien. No, en esto Escuchar, vamos a diseñar en estos. Ah, obstrucción y pantallas se pueden ver por aquí. Este es nuestro Logan Skin fueron diseñados en la lección anterior. Y creo que nos olvidamos de agregar esto, como, para mostrar la contraseña. Y ahora vamos a diseñar esta pantalla activada, uh, uh, Passmore. Vamos a moverlo. Vamos a moverlo a otro lugar como este y mover el cardo aquí para que haga más sens. No hay apuntalamiento está del otro lado. De acuerdo, Ahora tenemos tres pantallas de inicio de sesión. Una es esta pantalla de inicio de sesión de bienvenida. Entonces este se activa uno una vez que intentas enviar tu contraseña y correo electrónico y esto es mientras intentas agregar intentarpara escribir algo. De acuerdo, así que una vez que hagas click en esta capa Ok. Entonces este es nuestro campo de texto Cuando alguien intenta introducir algo por aquí, se va del dedo del pie, conseguir un borde azul en la parte inferior, y este icono de ojo se va a poner azul. De acuerdo, así que ahora mismo estamos activando dos cosas este campo y también este Ah, botón. De acuerdo, entonces esto va a ser una carga. Esta va a ser zona emocionante la cual les voy a mostrar cuando empecemos a crear un prototipo para esto. Bien. Está bien. Tuve muchos problemas al crear prototipos porque necesitamos tener un fondo completo sobre el cabello para enlazar dedo un prototipo. Entonces toda esta zona es capaz, ¿verdad? No sólo éste es un paso por ahí. De acuerdo, así que empecemos. Y ah, vamos a crear estas dos pantallas ahí. Casi similar. Sólo un poco de diferencia. Entonces vamos a empezar con este. De acuerdo, así que vamos a pedir prestado esto de nuestro lo despiertas de manzana y empecemos. Está bien. Ahora, simplemente lo que voy a hacer es que voy a duplicar la pantalla, y vamos a replicarla así y las alertas que la alinean con ésta. De acuerdo, entonces ahora es una línea. Ahora estamos dentro de esta pantalla y no vamos a cambiar nada por aquí. Entonces vamos a sumar primero este II desaparecido. Por lo que voy a ir de pie a mi carpeta de activos icono SVG. Este es mi ícono arrastrado a nuestro adobe X'd este archivo y oops arrastrado en algún otro lugar porque se va del dedo del pie. Clifla dentro de este contenedor Así que lo voy a dejar caer por aquí. Voy a ir dedo talla a 32 robles, 32. De acuerdo, ahora, creo que se ve bien. Voy a arrastrarlo por todo aquí y vamos a estudiar sobre panel de encaje y a ver si el ojo está dentro de este campo de contraseña o no. De acuerdo, Entonces, ¿dónde está nuestra contraseña? Este son nuestros pasaportes, Así que voy a nombrar una contraseña. Asegúrate de que estás nombrando a tus listas ahora mismo. No los voy a nombrar porque no los quiero dedo así porque me voy dedo del pie agrupa esto y la contraseña te di algo como esto. Y este es yo creo que este es nuestro campo de email email email. Yo soy los billetes mirando por aquí. De acuerdo, así que este es nuestro, um,icono social um, de Google. Esta es nuestra navegación. Eso está cerca. Todo X cerca, éste. De acuerdo, Entonces, ¿qué es este símbolo? ¿ Este es el botón? Sí, está bien. Por lo que inicia sesión B, T n Dash, Logan, VT. Y prohibido. Yo lo voy a habilitar. De acuerdo, así que tenemos casi todo llamado probablemente por aquí y este ícono del ojo. Vamos a cambiar su dedo del pie de color. Por lo que tenemos dos capas dentro de ella. Entonces voy a cambiar. Tu sculler hace algo como esto. Entonces hay uno. Este. ¿ Podemos combinarlos? Voy a combinar este barco a formas. Seleccione estas dos formas y Prestes. De acuerdo, entonces ahora sólo tenemos una forma con un color. Por lo que es más fácil para nosotros dedo del pie, ya sabes, cambiar tecla de color. Nuestros colores de cambio puntera este. De acuerdo, ahora se puede ver ahí. Esto se ve genial. Ahora vamos con el dedo del pie. Crea otra pantalla a partir de esto. De acuerdo, entonces tenemos otra pantalla, y ahora necesitamos nuestro teclado o aquí, que vamos a sacar de nuestro y esto apagado. Perdón, éste. X evers, el teclado. De acuerdo, entonces aquí tenemos el teclado. Siguiente gradado, Este teclado y control. Ver o comando. ¿ Ver? Y me voy de pie. Cerremos este. De acuerdo, así que estoy vencido. Nuestra mente diseñada así. De acuerdo, Así que puedes ver ahora esto se ve realmente genial. Vamos a cambiar el correo a mi correo electrónico. Está bien, así que se ve genial. Contraseña va a ser, uh, estática así. Siguiente. Muévete un poco. Perdón. De acuerdo, Ahora necesitamos desprender el dedo del pie. Este del símbolo. De acuerdo, entonces me voy del dedo del pie, desconectarlo del símbolo y vamos a moverlo afuera. El símbolo. Entonces un símbolo de grupo. De acuerdo, entonces tenemos bajo el símbolo. Voy a moverlo este un poco hacia abajo en el medio. Al igual que esto. De acuerdo, ahora lo tenemos todo. Ahora vamos con el dedo del pie. Podemos agruparlos si quieres, pero creo que ya están en esto. Entonces lo voy a dejar así porque no vamos a usar esta sensación de pasaporte. Sólo necesitamos un símbolo genético, que es nuestro campo de texto que tenemos por aquí. Entonces déjame mostrarte. Tenemos un campo de texto. Mira, es lo que realmente no necesitamos un campo específico una y otra vez. Entonces esto va a ser así. De acuerdo, entonces este es un estado. Por lo que si alguien intenta hacer clic en esta de esta zona para ver su contraseña, va a ser así. So Hola, World on. De acuerdo, entonces voy a Mi contraseña es un grupo uno. De acuerdo, así que esto se ve bien, y voy a cambiar el color de relleno dedo otro color, que es tienda ver tío A Veamos qué waas ese color C cero e seis. De acuerdo, así que lo voy a agregar ahora mismo. Entonces no me olvido de este color. De acuerdo, así que esto se suma a éste y de lo que voy a hacer es en photoshop. Es más fácil sujetar Ah ah, otra capa en otra capa, que no es más fácil o aquí porque quiero dar forma a Toby recortado. Entonces lo que voy a hacer es ir dedo del pie apareció y otro rectángulo por aquí. Y será de cuatro fizzle de alto, no de 40% de cuatro píxeles de altura. Y voy a quitar el color de la frontera será éste. Este es nuestro estado activado y voy a usar este esquinas redondeadas por separado alrededor de esta parada de esquina será cero arriba izquierda será cero. Este será cero dedo del pie. Ah, correcto. De abajo a la derecha se va a hacer. Y éste más va a estar bien. Entonces ahora voy dedo del pie alinearlo y el fondo medio fuera de esto se puede ver así Y también necesitamos moverlo un poco arriba así. Entonces ahora creo que se ve mejor si no vas a reducir el tamaño, puedes reducir. Pero creo que se ve bien. De acuerdo, entonces tenemos una recta activada donde alguien está tratando de aprovechar este campo, y se va a cambiar de dedo bajo color de intercambio de este. Entonces va a ser un color un poco más oscuro, y nuestra sensación es ahora mismo actividad, ¿de acuerdo? No, hay algunas cosas más que puedes agregar en este momento. Aquí no tenemos colores, así que voy a añadir unos asesinos más. Agrega color. De acuerdo, entonces tenemos unos colores más aquí. También, vamos a añadir en este color este color azul por aquí. De acuerdo, así que tengo hice pocos asesinos. Añadamos este dedo del pie de color. Voy dedo del pie color ventilado. Entonces este es uno de Greg Miller en. Entonces tenemos esto un blanco gris oscuro, negruzco. Y estos creo que estos son todos los colores. Vamos a necesitar todos los jabones. Yo sólo cardo por un místico. De acuerdo, entonces creo que hemos hecho estas dos pantallas y se puede ver ahora usando símbolos y duplicando otros tableros de arte. Es cuánto más fácil el dedo del pie, ya sabes, producir este tipo de pantallas fácilmente. Está bien. Y creo que deberías cambiarles el nombre. Si quieres saber, yo lo voy a verde por separado. Pero debes cambiarles el nombre. Deberían agruparlos. Y ah, esto te ayudará a crear esto fácilmente. Eran tan como puedes ver aquí No tenemos nada grupo por aquí, que debes estar agrupado en un botón. Y Ah, está bien. Entonces va a tener menos lío aquí así. Agrupémoslo en esto. De acuerdo, Así que tengo éste y Facebook. Últimamente es a Facebook. Por lo que voy a presionar comando de control y seleccionar ambos fuera de ellos. Control G. Vamos, G. Y este es nuestro grupo de Facebook. De acuerdo, creo que dejamos esto social. Uh, está bien. Ahora puedes ver que este es un problema en el que puedes meterte cuando no los has nombrado correctamente. Se trata de libro de caras de iconos. De acuerdo, así que normalmente trato de usar el tipo fuera de esta cosa antes de ese nombre. Entonces ahora podemos tener este look, éste y éste controlando. Vamos, G, G, para que esta cara se resplandezca. De igual manera, vas a combinar todos estos. De acuerdo, Así que ibas a arreglar tu organizar tus capas así. Entonces espero que hayan disfrutado de esta lección. Hemos creado estos remolcan más pantallas. Además, creo que no estamos cambiando ningún título sino en medio. Y ya terminamos de diseñar estas pantallas. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección donde vamos a crear pantalla de registro. 46. Diseño de pantalla de Signup en XD: ahora en esto. Escucha, vamos a crear y registrarnos por pantalla de correo electrónico y a decirte que esto va a ser de la piel. De acuerdo, Así que el usuario se va toe klik este o toca éste y se va a mover del pie la pantalla de registro por aquí. De acuerdo, Ahora, en el signo de pantalla, tal vez quiera volver y no quiera apuntarse. A lo mejor lo pasó con lo místico. Entonces tú debes tener algo por aquí en la punta del pie. Volver a la pantalla de inicio de sesión. OK, entonces ahora lo que voy a hacer es que voy a copiar de pie esta pantalla. De acuerdo, Entonces voy a alejarme, y voy a mover la pantalla o aquí. Está bien. Entonces voy a ponerle nombre, pantalla de registro, porque creo que es mejor nombrar a éste porque no produje ningún nombre. Eso Necesitamos este botón en la parte inferior. A lo mejor este texto no necesitamos este encendido. No necesitamos éste. De acuerdo, así también, no necesitamos éste. De acuerdo, así que necesitamos que se inscriba. Es médico. Entonces tal vez tenía algún número de decisión médica. Creo que vamos a usar eso aquí en el aire original, pero creo que no usé nada como ahí. Entonces vamos a expandirnos a cuatro campos en este momento. Correo electrónico, contraseña, y Ah, dos más. Vamos a mover estos. Remolque el fondo así. Y empecemos con la duplicación, este sólo va Toby DoubleClick. DoubleClick va a ser tu nombre. Y vamos a empezar con el número de puesto de Dr Medical porque creo que es una necesidad para esta app. Um, vale, así que vamos de pie, confinarlo a cuatro campos de granja. Creo que esto es una necesidad. Por lo que va a anotar todos sus datos de acuerdo a este número de posición. De acuerdo, entonces ahora vamos a mover esto un poco al fondo. Ahora mismo, este está en 1 48 este es aquel para 34. Entonces me voy con el dedo del pie. Déjalo caer, dedo del pie. Está bien. Entonces, ¿y si tratamos de seleccionar todo por aquí? Bajar ganó 40 años. Ups. Usemos este. Distribuir verticalmente y se va dedo del pie distribuir todo verticalmente así. Vamos a mover todo un poco más hacia abajo. A lo mejor por aquí. Está bien. y ya lo voy a mover un poco hacia abajo. Miembro. Uh, entonces necesitas mucho tiempo aquí. De acuerdo, Tal vez podamos separarlo en dos líneas porque aquí tenemos esta imagen simplemente no luciendo realmente bonita. Voy del dedo del pie línea centro este texto y también alineó esto en el medio. Entonces para esto, voy a usar el color Este ya es miembro inicia sesión aquí. De acuerdo, entonces esto tiene sentido. Ahora también, vamos a sumar una línea por aquí, que va a ser como esta Morsi Es mejor usar Reutilizar tus elementos y esto es algo por aquí. Yo lo voy a usar. De acuerdo, entonces vamos a mover este botón un poco hacia abajo. 24 cerdos males y necesitamos cambiar el texto a la cuenta. Está bien. Y vamos a la línea central. De acuerdo, Entonces antes de ir del dedo del pie Kamanzi, voy a dar un paso, dar un paso atrás porque necesito asegurarme de que sean la línea central. De lo contrario se va dedo del pie Mueve las cosas por aquí y por allá. De acuerdo, Así línea central. Y ahora si trato de usar algo cuenta despejada, se quedará en el centro. Ya puedes ver ahora está en el centro. No necesito alinear nada, así que asegúrate cuando crees un botón y estás enviando mensajes de texto en el medio, está alineado en el centro. Está bien. Creo que hemos creado esto. Yo no necesitamos este tipo aquí. A lo mejor, um, creo que vamos a mostrar la contraseña. Sea lo que sea que esté escribiendo, lo vamos a mostrar. A lo mejor lo necesitamos. O aquí. Está bien. Por lo que tal vez usuario quiera ver su pasaporte Erhardt contraseña mientras tecleas. Nosotros lo vamos a mostrar o golpear. Entonces, no, necesitamos una navegación back toe esta primera pantalla anterior la cual falta por aquí. Y para eso, vamos a ir a nuestra biblioteca, y y vamos a acercar un poco y vamos a ver ¿dónde está la navegación? OK, entonces necesitamos éste este año. Esta es la navegación izquierda y lo que necesitamos de ella es este accesorio izquierdo? Sí, me voy con el dedo del pie. Copia esto. Ahora puedes ver que he seleccionado este control de RNC, y voy a volver a mi pantalla y voy a ir de pie basándolo por aquí. Algo así. De acuerdo, así que ahora puedes ver podemos volver con el dedo del pie iniciar sesión en pantalla. Y ahora necesitamos cambiar el color a otra cosa porque tenemos algo. Y así estamos aquí. Y creo que tal vez podamos ir a algunos otros colores, que es un color azul un poco más nítido, como este, que También para éste. Voy a usar esto porque necesitamos separarlo de éste. De acuerdo, tal vez podamos usar este O r Este. Este también se ve bien. No importa. De acuerdo, entonces Ok, entonces ahora creo que nuestra pantalla está hecha y está buscando crear. Creo que todo. Todo lo que seis hicieron debería ser. Y acabamos de llegar con cuatro campos para crear este fácil proceso de registro. Esto es realmente necesario en la experiencia del usuario fuera de cualquier aplicación. Pasemos a crear nuevas pantallas en la siguiente lección. 47. Diseño de paneles parte 1: De acuerdo, ahora en esta escucha, vamos a crear este impresionante panel de control de aspecto. Y para eso antes de eso, vamos del dedo del pie, ver algunos fuera de los cambios de color. Entonces lo que hice es dejarme mostrarles antes de que esta guerra de botones la tuviera. Te vas a 11 o dos. Entonces supongo que ahora he cambiado a 218. Ahora está en un tono un poco apagado púrpura. Ahora, por qué lo hice Porque nuestro descolorido este color está en el tono apagado 20. De acuerdo, entonces si estás usando dos colores, no quiero que tengas demasiado. La diferencia entre el que uno o dos puntos es buena, pero más que eso se verá totalmente diferentes colores. Está bien. Además, quería estar separado de este color azul de Facebook. Por lo que está un poco fuera de color azul púrpura. Si quieres cambiar más como tal vez agregarle más saturación, más colaborar, puedes agregarla. Ya puedes ver cómo se ve diferente a estos dos asesinos. De acuerdo, así que esta es nuestra interacción primaria por aquí. De acuerdo, Ahora vamos a empezar a diseñar este, así que vamos a cambiar a nuestro otro tablero de arte donde estábamos diseñando. Entonces, empecemos. Ya sabes, aquí estamos en pantalla, y creo que vamos a empezar con este, así que voy a duplicarlo así. De acuerdo, entonces lo voy a alinear a continuación. Snam it dashboard. De acuerdo, Entonces, ¿qué necesitamos aquí sobre todo lo demás que vamos a eliminar? De acuerdo, así que voy a ponerle el nombre Toe dashboard, y lo vamos a alinear en el medio así. A ver. ¿ Cuál es el 64? 64? Está bien, esto es perfecto. No, vamos a llamarlo tan bienvenido. De acuerdo, entonces me voy de pie, muévelo hacia abajo, y vamos a crear una elipse tomando un taburete de elipse. De acuerdo, así que esto está lejos teniendo al Abadan fuera del médico. Estamos aquí. Vamos a mover la frontera ahora mismo. Vamos a usar básicamente el borde blanco encendido con cuatro sauditas cuatro de espesor. De acuerdo, Ahora vamos a arrastrar la imagen por aquí. De acuerdo, Entonces esta es la imagen de su doctor. Vamos a moverlo aquí adentro. Y se ve muy bien en este momento. Además, vamos a cambiar el color al Stark Black para este mensaje de bienvenida. Siguiente Muévete más cerca. Dedo del pie este doctor imagen una clave. De acuerdo, así que esto está hecho. Probemos con dedo del pie usar esta zona inferior y crear la barra de navegación. ¿ Están la barra de herramientas por aquí? De acuerdo, esto se llama Barra de Oro en la U.S. U.S. Diseño. Y en realidad Ok. Ahora, déjame mostrarte que el tamaño fuera de esto. Ah, tablero de instrumentos. Perdón. Eso es tablero de arte es 375. Entonces si lo dividimos con tres, déjame dividirlo con 33 75 divididos por tres. Entonces es 1 25 Vale, entonces vamos a crear. Perdón. Entonces lo que vamos a ser es Vamos a mirar tres cajas fuera del veredicto del 25, y van a actuar como toda una barra de navegación de botellas. Está bien, está bien. Por lo que antes de eso, voy a ir a mi carpeta de sexo A, y me voy de los pies a por esta manzana. Yo nosotros y vamos a utilizar las mismas especificaciones de diseño para barra de herramientas o la altura y en el tamaño de la cubierta, que tiene Apple. De acuerdo, entonces estas son sus especificaciones. A ver, es una barra de herramientas. Está bien. Entonces Ok, Así que hay dos ejemplos que puedes usar uno es éste. Y el otro es éste. De acuerdo, entonces básicamente, necesitamos algo como esto con títulos, así que voy a copiar el control de mando C y voy a pagar se quedó lejos. Entonces lo voy a pegar al fondo, y lo vamos a cambiar a nuestros colores donde vamos dedo del pie coloreado con azul y morado. Entonces hagámoslo. De acuerdo, ahora puedes ver por aquí. Este es nuestro bar de papá. Y es escondite es 49. Eso es lo principal que queríamos copiar. O también, si nos fijamos en este tamaño de texto, es 10. De acuerdo, entonces vamos a usar tamaños similares porque estos son los estándares. Entonces me voy dedo del pie, quítate esto, ¿de acuerdo? Y vamos a usar la seg enredo, puntera de herramienta, crear un rectángulo, y vamos a dimensionar. Ganó 25. Entonces no sé por qué resulta esta opacidad. De acuerdo , 25 y luego 49 va a ser su altura. Vamos a quitar la frontera y expreso V y película toman el fondo y lo vamos a duplicar sin tecla de opción. Entonces uno y está bien, entonces vamos a tener espaciado de distribución horizontal. Y así es como vamos a crear nuestra barra de bar. Vamos a acercar y se puede ver que sólo hay un problema un poco apagado o aquí si hago zoom un poco más. De acuerdo, entonces ahora está desaparecido. Pero si nos alejamos, hay una línea entre estos remolques No te preocupes por ello. Es sólo la representación. En realidad no ahí. OK, entonces vamos a usar el color para este, que está activo. Y va a ser, supongo, este 11 91 90 en 90. Está bien. Y luego para estos dos, que están inactivos, vamos a usar el color, que va a ser nuestro nuevo color. Eso es 220 y 65 40% de rectitud, porque va a ser un color grande, opaco. Entonces voy con el dedo del pie. Perdón. Yo lo voy a agregar por aquí si la queremos. Si quieres. Elimina un poco de color, solo arrástrelo así y se va a quitar. De acuerdo, Entonces el mismo color para este. De acuerdo, entonces ahora tenemos nuestro bar por aquí. Tienen bobblehead, y necesitamos iconos. Y aquí Dexter. Entonces, para el texto, voy a utilizar esta herramienta de texto, y vamos a escribir en herramienta de texto saudita. Vamos a Taipower, uh, primeros deberes de Dec Acti, y voy a sectarlo dedo del pie, entonces , Ok, así. Y voy a usar el color del blanco. De acuerdo, así que esto es una caja fuerte. Te un texto. Está bien. Todo es mirada, cantar parece bonito. ¿ Verdad? Haga clic y agregue al estilo crypto. De acuerdo, entonces tenemos este pequeño mazo por aquí, y necesitamos nuestro ícono por aquí. ¿ De acuerdo? Por lo que antes de eso, los vamos a alinear en el medio seleccionando turno y seleccionándolos a ambos. De acuerdo, así que haz clic en unos cambian y selecciona otro, y voy a alinearlo con el dedo del pie. La mayoría ya está en medio. De acuerdo, Ahora voy a duplicarlo, y voy a alinearlo en medio de un aquí, y este es nuestro fregadero, Deb. De acuerdo, entonces tenemos de nuevo esto en el medio. Este es nuestro hogar, Dabord, dashboard. También podemos llamarlo yo creo dashboard más que en casa. Por lo que esta vez voy con dashboard en lugar de a casa. De acuerdo, entonces vamos a moverlo en el medio. De acuerdo, entonces el texto está configurado. No, necesitamos traer nuestros iconos. O aquí. Entonces para eso, ya tenemos sobre iconos en la carpeta, que ya he seleccionado para los iconos ocupados de U. S. Puedes usar cualquier SPD que te guste. Excepto a ti. Uno es este hogar. Necesito traerlo aquí. Está bien. Entonces solo copiado afuera, y voy a llenarlo de color blanco. Y voy a reducir su tamaño a 32 ciudad de cristal. Úsalo para decir siguiente video habla tamaño dos 32. De acuerdo , sigue siendo grande, así que voy a ir con 24. De acuerdo, así que esto se ve bien. Tamaño 24, y sigo pensando que es un poco más grande. Entonces, ¿qué? Eso pensé yo. Voy a reducir esta altura a 24 así. Vamos a alejarnos y ver si este icono se ve bien o no se ve grande, así que ahora se ve un poco más grande para mí. Voy a mover esto a 20 ver cómo se ve. De acuerdo, así que 20 mirada anotada. Vamos a mover esto al fondo y moverlo un poco hacia abajo. Por lo que ahora se ve genial. Uh, vamos a moverlo en medio de éste. De acuerdo, Entonces este es nuestro hogar o tablero o algo así. Entonces tenemos estas actividades aquí. Vamos a usar otro ícono, que es algún icono de página múltiple, que pensé que encaja en esta categoría donde vamos a realizar un montón de cosas diferentes . De acuerdo, ahora puedes ver que tiene múltiples formas. Entonces lo que vamos a hacer es que vamos a combinar todas estas naves en una sola, así que voy a sumarlas sindicales. Entonces ahora puedes ver que es una vez forma, y solo podemos seleccionar el color y cambiarlo una vez, y eso es todo. De acuerdo, así que lo voy a mover adentro por aquí, y vamos a cambiar su tamaño del dedo 20. No pude ¿Cómo has estado? Ves, es casi lo mismo. Asegúrate de que tus distancias superior e inferior sean las mismas para tus iconos y tu extricate. Entonces este texto es si presionas impar, está a cuatro píxeles de la parte inferior, así que voy a hacer de este un dedo del pie. Siete cerdos. Árbol frontal. Está bien. Además, voy a ir a siete cerdos sonan imágenes. Perfecto. De acuerdo, ahora necesitamos un fregadero. Yo fui por aquí y voy a añadir una cosa. Yo maíz, que waas este bucle. Supongo que ahora se puede ver como todos estos colores son muy brillantes y muy afilados o tienen mucha saturación. Entonces, ¿por qué los colores se ven bien? De acuerdo, así que tienes que asegurarte. A lo mejor no se ve bien a veces en tu esquema de color de piel para que puedas cambiar al negro o algo así. Algún otro color fuera de tu elección. De acuerdo, Así que esta es nuestra ficha están completas. Está bien. Para que puedas ver u oír. Esta es nuestra ficha son ahora. Creo que deberíamos agruparlo para poder fácilmente ah usarlo así. Org. De acuerdo, así que solo estoy asegurándome de que no se agrupe con nuestros antecedentes. Entonces este es nuestro grupo. Vamos collard. Ah, papá, Bar algo así y me voy de dedo del pie antihigiénico. De acuerdo, entonces nuestro tambor está completo ahora. 48. Diseño de paneles parte 2: Vamos a crear botones largos de oro y de registro por aquí. De acuerdo, así que voy a nombrarlo, cierra sesión bien. Y yo voy con el dedo del pie. Muévete desde aquí, y yo lo voy a mover. Uno 24 5 Así que tal vez por aquí forrando con esto. De acuerdo, así que vamos a ver. ¿ Cuál es la distancia? Ocho píxeles. De acuerdo, así que eso es bueno. De acuerdo, Ahora, por aquí, vamos a usar Ah, despejó este ícono de hamburguesa Una línea, y va a ser de este color o tal vez decolorar. OK, entonces voy a usar este color, hacer por el tamaño un directo fuera de esta línea, y voy a usar. A lo mejor voy a hacer que sea de 24 píxeles de ancho. Vamos a duplicarlo. Hay muchas formas de crear A veces mucha gente que crearon con esta grilla de repetición , y simplemente lo repiten así. Está bien. Y entonces son sólo del tamaño entre él así. Algo así. Pero traté de usarlo al revés. Simplemente no me gusta porque necesito personalizar la media, así que voy dedo del pie talla 18 pixels, y la última también van a ser 24 picks es así. Entonces voy a creer esto, ¿de acuerdo? No, hemos construido nuestro menú de hamburguesas. Vamos a moverlo. Agruparlos. Está bien. Selecciona todos estos. Tres. El izquierdo Acceso E. Vamos, G. Vale, Entonces lo que voy a hacer es combinarlos en una sola forma, así que no necesito cambiar el color una y otra vez. Entonces voy a usar este Brugler porque lo es. Creo que es del mismo color para este log out. De acuerdo, entonces creo que esto es bueno. Tenemos que comprobar las distancias con las especificaciones de la manzana. Entonces voy a ir por aquí y ver cuál es la distancia de estos accesorios. Hacen las fronteras. OK, entonces voy a hacer doble click, doble click otra vez cuando reflejemos esto y veamos cuál es la distancia. Por lo que es un limón. Los píxeles son 11 puntos de un similar, este, Así que voy a ver que es casi creo 12.6, esto es 11 o 12. De acuerdo, entonces son 11 o 12. Al igual que pensar. OK, entonces voy a usar 12 ahora mismo. Son ocho píxeles, así que lo voy a mover por aquí. 1234 Y también este 11 tau Jefe. Ahora puedes ver que tenemos Estamos usando las mismas especificaciones, que somos nosotros está usando. De acuerdo, así que debes asegurarte de que estas distancias y todo esté de acuerdo a tus especificaciones , que Apple tiene ahí dentro. Tú lo despiertas. De acuerdo, entonces tenemos esto. Entonces ahora vamos a crear el área media que está despejada en una maraña por aquí. ¿ Por qué? Dirigiendo? Y voy a quitar la frontera, y voy a tener algunos son líos a su alrededor. Cuatro puntos. Y luego vamos a usar algunos fuera de la sombra. A lo mejor sólo deja el refugio ahora mismo, y voy a usar Ah, Dexter por aquí. Entonces vamos a llenar primero esto con texto, así que lo voy a hacer texto de área, y vamos a ir con el dedo, y vamos a ir a nuestros activos de esta área, y voy a usar nuestro avance y todo sobre especificaciones. De acuerdo, Ahora vamos a dimensionar este dedo del pie 347. Ups. 3 47 Así que lo voy a alinear en el medio, así que estoy usando tanta área como pueda vivir. Yo más 14 fotos por ambos lados. De acuerdo, ya sabes, puedes ver aquí tenemos esta cosa y vamos a crear otro botón por aquí, que va a ser de la misma altura. De acuerdo, así. Y vamos a usar un ser cuatro fijadores quitan la frontera. El color será de 1 91 Pero vamos a cambiarlo a otra cosa como la tecla de brillo 100 83 . Entonces va a ser más afilada y un poco aburrida, como oscura. OK, ahora puedes ver este es nuestro botón interno dentro de nuestra app y ah, vamos a moverlo un poco arriba Eso es hacerlo un poco corto. Y voy a usar sombra a su alrededor. OK, entonces esto es un botón. Entonces por eso necesitamos una sombra a su alrededor. Además, si vas a este fondo, este fondo, pero lo vamos a hacer es que lo vamos a desbloquear, y podemos cambiar algunos de los valores como, um tal vez necesitamos brillo. Ah, cambiemos la cantidad. Entonces me voy a la sangre del dedo del pie más por aquí, casi el doble Vale, así que vamos a moverlo a cinco. Y me voy otra vez. Lockett y yo creo que es mejor tener más claridad por aquí, porque en nuestras otras pantallas, solo estábamos intentando bloquear el dedo del pie al usuario o crear un nuevo Konkey. Soho estuvieron aquí. Yo lo he difuminado un poco más. Y ahora se puede ver que se ve más claro y te deja algún texto por aquí sobre la carga. Y necesitamos iconos por aquí en el costado. Y hay uno, creo aquí en el ícono de la flecha y, ah, ah, vamos a movernos en el medio. Entonces esto va a estar un poco fuera de problema, porque este texto está alineado Línea Norte en el medio, y esto va a ser en el medio. Por lo que se ve permitiéndolo así. ¿ De acuerdo? Y vamos a traer nuestra flecha ancha que por aquí, que es nuestra ¿Dónde está nuestro Aargh? Aargh! Aargh! ¿ Está bien esto. Entonces esto es flecha, así que la voy a traer adentro por aquí así. Entonces también, creo que deberíamos duro otra sombra un poco más, tal vez 30% porque necesitamos más sombra alrededor sobre la carga que voy a usar por aquí y voy a usar Ford o aquí. De acuerdo, Así que 30% en antes, Y esto va a ser mis valores para mis botones, y se puede ver que se ve realmente bonito. De acuerdo, así que se hace una porción. Necesitamos, y me fui por aquí, que es Link Icon. De acuerdo, entonces no necesitamos un tono negro. Dejen pasar por aquí. De acuerdo, así que casi esto se hace. Y ahora vamos a pasar a la siguiente zona. Es que creo que todo bien, así que voy a reducir un poco más su tamaño porque no necesitamos ir dedo del pie grupo esto. Margie, esto es una carga Bt y alabanza. Y así voy a subirlo así, subiendo negro este arriba en éste, alinearlo en la parte superior así. Siguiente. Muévete un poco más arriba. No parece una línea. De acuerdo, así que hemos completado esta zona. Nos vamos con el dedo del pie. Uh, selecciona todo por aquí. Esto Vamos, G. Y este va a ser nuestro tablero. Y sí, OK, así que esto es idea del tablero, y voy a duplicarlo aquí así. A lo mejor subirlo hacia abajo. Pero esto. De acuerdo, ahora voy a colorear esto a gris son tal vez más como un gris. Y necesitamos un gran en el azul A Vale, así que voy a usar fiscal esto algo como esto. De acuerdo, ahora puedes ver lo genial que se ve este color, ¿ acuerdo? Entonces, no intentes usar un color. Eso es así que me voy de pie. Prueba uno o dos asesinos así. Se puede ver que hay un color más. Mm, por aquí. De acuerdo, así que he agregado a los clientes habituales, y voy a probarlos todos. Creo que este luce anotado es tal vez éste. De acuerdo, así que voy a dejarlo así, y voy a quitar la sombra de aquí porque este botón está deshabilitado. De acuerdo, entonces no podemos presionar esto, así que voy a usar el texto por aquí. De acuerdo, entonces tenemos que pensar hundirse, hundirse , hundirse. De acuerdo, entonces usemos lo mismo. Yo fui por aquí. Este, y copiarlo y pegar IQ estaban aquí y mudarse. Muévete, Lex. Cambia tu sculler dedo del pie el lugar que waas 24 píxeles de distancia y todo se ve muy bien. De acuerdo, entonces, um, creo que esto se ve bien. Por lo que esto se ve genial. De acuerdo, entonces todo se ve genial. Hemos construido nuestro área principal de salpicadero, y en la siguiente lección, vamos a crear nuestro área de diapositivas, que va a ser la barra de menú lateral cuando presionamos este menú de hamburguesas. Entonces aparece el área, que vamos a diseñar en la siguiente lección. Entonces pasemos a la siguiente lección. 49. Diseño de navegación de estacionar: De acuerdo, así que empecemos y creemos esto. Ah, barra lateral de aspecto impresionante. Navegación. OK, ahora lo que vamos a hacer es empezar con nuestro tablero, y lo vamos a replicar. Presionando todas las teclas o tecla de opción. Y aquí tenemos una copia del tablero de escombro. No, Lo que voy a hacer es que esto va a ser barra lateral. Entonces lo que voy a hacer es ir a las todas las capas y todo, y vamos a seleccionar todo y crear un grupo. Margie, desvinculemos este 12 Y esto también va a estar en este grupo. Sí, me voy de pie. Denle su nombre. Dashboard. De acuerdo, entonces aquí tenemos nuestro tablero. Ups. Entonces hay algo malo en ello, creo. De acuerdo, así que lo voy a mover hacia abajo, que era el fondo. Y ahora lo que vamos a hacer es ir dedo del pie a usar otro rectángulo encima de él y vamos a usar fondo, sangre, el mismo trato. De acuerdo, entonces movieron el desenfoque de fondo fronterizo, y vamos a usar algo como esto. Seis. Ups. En la diversidad, esto va a ser seis brillo va a ser menos cinco. Y la opacidad va a ser 15. Algo así. OK, entonces esta vez estoy usando un poco su color más oscuro por aquí. También puedes usarlo para menos dos o algo así. No, la opacidad. El brillo menos dos. De acuerdo, entonces esto es lo que necesitamos en la bolsa. No, no, hemos creado la espalda. Ahora vamos a usar y otro rectángulo encima de él, y vamos de pie. Ah, dibujarlo desde aquí y se va a llenar Casi 2 36 fueron también. Está bien. Y voy a hacer que la altura sea igual la frontera. Y vamos a usar el color, que es éste para nuestro sitio. Nunca. Y vamos a usar algo de sombra a su alrededor. Entonces para que se tome un poco Ok, Así que voy a usar la explicación para esto porque necesitamos a la sombra Toby en destrucción de izquierda a derecha. De acuerdo, Entonces la sombra estará por aquí, Así que vamos a usar este. Disculpe. Cero en la posición via, y voy a usar cuatro por aquí. De acuerdo, Así que vamos a ver. Ahora puedes ver un poco de sombra por aquí. Un edificio por aquí en. Tenemos que hacerlo un poco más garrapatas en lanzamiento 20%. Y voy a usar ocho aquí para difundirlo un poco más. De acuerdo, entonces aquí tenemos la sombra de que este elemento está en la parte superior de este. De acuerdo, así también, puedes hacerlo un poco más brillante si quieres, Así que la sombra va a ser más clara. De acuerdo, Ahora se puede ver la sombra es más clara en ella. A continuación, utilice los mismos valores menos uno. Y sobre éste. De acuerdo, entonces tenemos nuestro lado, pero estamos aquí, y ahora vamos a usar esto mismo. Ah, Aladar. Y voy a ser un estricto por aquí. Tráelo por aquí. A lo mejor podemos apretar el dedo del pie 72 por 72 en lugar de hacerlo un poco más grande. Entonces voy a hacer uno pequeño. Y vamos a usar otro Dexter por aquí, que va a ser yo hice perfil. Ahora puedes ver este color también se ve bien por aquí porque es la misma chica como este color de fondo. Pero ahora vamos a introducir un nuclear, que va a ser nuestro color amarillo. Este es el 3er 1 va a ser Hugh 54 41 situación y brillo 100% apagado. Por lo que es de color muy brillante y amarillo tú y puedes ver por aquí. De acuerdo, entonces tenemos sobre editar perfil en la parte superior, y ahora vamos a usar algunos fuera de la zona ¿Aquí te gustaría esto, vale. Y quitar la frontera. Se va a invitar, pero voy a usar algo fuera de la opacidad. De acuerdo, entonces creo que debería ser que no va a ser. Vijit se va a decolorar. Casi. De acuerdo, entonces voy a presionar V, y vamos a tener algún ícono por aquí, que es nuestro otro ícono. Cerremos este y vayamos a nuestra carpeta. Limpio, seco, Khan. Y lo voy a arrastrar en el en mi este 80 nuestro pelo y vamos a ver cuántas caja tiene. Por lo que tiene muchas partes, muchas naves, así que las voy a combinar. Sindicarlos. De acuerdo, así que asegúrate de que esto va a tener la misma forma. De acuerdo, entonces ahora vamos a cambiar tu sculler. Dwight, este es nuestro icono del calendario, y lo vamos a dimensionar. 24 arreglos como este. Yo lo voy a alinear en medio de esto, y vamos a usar algo de textura. Estamos aquí, que va a estar en medio. Y voy a ir de pie a mis activos, nuestra guía de estilo. Y voy a elegir este texto blanco. Roy. Ahora puedes ver que se ve perfecto. Vamos a alinearnos. Póngalos. Estoy presionando. cambio en el medio también alineó este en el medio. Esto es Ya está en medio. De acuerdo, entonces ahora tenemos nuestro botón. Tu cabello iba a usar dedo del pie por aquí, que es círculo X. Entonces me voy del dedo del pie Dragón por aquí así. Usémoslo primero afuera para que podamos combinar sus chips. De acuerdo, así que hay dos formas uso lex cambiarlas rápidamente, así que voy a cambiarlo rápidamente. A continuación, Haz esa talla a 24 que es muy pequeña porque voy a puntear con el dedo del pie. Mi usuario se va del dedo del pie. Toca con los dedos, así que voy a hacerlo un poco más grande. Tecla selecciona uso 32. Entonces esto es bueno. Además, creo que esto está buscando algo más pequeño para que también lo vaya a hacer 32. Aleja el zoom y vea cómo se ve esto. Se ve ¿Se ve demasiado grande? Sí. De acuerdo, entonces voy a usar de nuevo 24 que se ve bien. Bonito. Seleccione ambos fuera de ellos con turno. Por lo que siempre que intentes alinear algo, necesitas alinearlo con algo más. Algún objeto más. Es necesario seleccionar ambos de ellos presionando shift. De acuerdo, entonces ahora este barco ha seleccionado, por lo que va a estar en medio. De acuerdo, así que esto parece despejado. ¿ Por qué? He movido todo hacia abajo porque la mayoría de las interacciones que usos hacen del 70 al 80% van a ser tambores ahora. El mejor área para dirección derrumbada es este No vas a usar ya conoces la radio superior . Además, lo voy a mover un gran arriba porque mira un poco hacia abajo. De acuerdo, entonces voy a cambiar de calendario anual y rectángulo de Brasil. Warren G, Este va a ser mi menú. Oops, yo no. Y vamos a apuntar y disparar. OK, así que esto se ve bien. Siguiente. Muévete un poco arriba. Está bien. Entonces lo voy a mover en medio de esto, que no se ve así. Está en medio. De acuerdo, así que vamos a mover esto un poco arriba así. Y también este porque es demasiado al fondo. Sí. Ahora se ve mejor. Y hemos terminado de hacer nuestra barra lateral por aquí. Y espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, sigamos adelante y creamos las otras dos pantallas, que son actividades y hundirnos. 50. Diseño de pantalla de Actitivies: De acuerdo, ahora, Incesante. Vamos a crear esta pantalla de actividades, y ah, vamos a usar esa gran característica de API fuera de Adobe X. Steve edges puedes ver u escuchar Tío, Creando esto es una gran y vamos a replicarlo y usar esta gran característica para diseñar la piel. De acuerdo, entonces va a tomar muy menos tiempo porque la mayor parte del tiempo creo waas para el tablero de escombros porque tiene muchos elementos diferentes. Y ahora vamos a ir con éste. Entonces, empecemos. Entonces voy a ir a esto y vamos a ir de pie, uh, duplicar este. Lo voy a duplicar en la parte inferior por aquí, y lo vamos a nombrar, en realidad, que es No importa mis ortografías si están equivocadas. Así es. Y ahora voy a presionar. Vamos, uno está controlado. Uno de los dedos omite dedo del pie mi pantalla, y vamos a quitar esto y esto en esto. De acuerdo, entonces voy a usar este como mis tasaciones de tasación. No. Entonces fue actividades, actividades, y lo voy a mover en el medio así y este convoy tenía 64. Entonces lo voy a mover al lugar Debería estar bien. Ahora, tenemos mucho espacio, y vamos a crear repetir bien. Pero antes de eso, vamos a utilizar tanto espacio como de nuevo, o aquí para crear este credo repetido. Entonces voy a dejar casi este espacio, y voy a usar el color vied. De acuerdo, entonces y vamos a usar ocho píxeles por aquí, si quieres. Ah, usa más excepto a ti. Está bien, noche. Ahora lo voy a usar, y voy a usar algo de sombra porque va a reprimir estado capaz. Debería ser capaz. Entonces vamos a significar del dedo del pie usando significantes que este estado es posible y va a ser 20% de sombra negra. Ya puedes ver cómo se ve. Se ve así y como éste. De acuerdo, así se ve presionado o posible estado. Entonces vamos a usar algún texto premiado, que va a estar aquí como esta valoración. Y vamos a utilizar nuestro texto negro de este texto aquí sobre él. Vamos a moverlo en el medio. Y, ah, también necesitamos usar lo mismo en sobreutilización por aquí. Entonces voy a copiarlo y basté este anuncio por aquí. Cambia su dedo del pie de color, este. Y ah, también podemos usar el otro color, que era 83. Perdón. No. 90 y entidad. Por lo que el brillo reduce el brillo para que sea Whitmore opaco y oscuro. Entonces me voy a gustar así y moverlo por aquí. De acuerdo, así que toda esta zona será terrible. Entonces no nos preocupa que estos artículos se coloquen fuera de estos artículos para que pueda acercarme a esta , um, frontera. De acuerdo, entonces 10 píxeles, Así que 10 cerdos se ven muy bien. Algo que vamos a crear aquí es el estatus de cuántos tasadores has completado. Entonces voy a crear una elipse, quitando el borde y yendo por el color de relleno a éste. Ahora mismo, vamos a cambiarlo dedo del pie algo así, y vamos a usar menos brillo 55% o tal vez menos 50% tal vez más o menos. 40%. De acuerdo, así que esto se ve bien. Y voy a usar la herramienta de texto para tener algo por aquí como este cinco. De acuerdo, así que debes asegurarte de que si la caja se va dedo del pie tengan, como, dos valores, por lo que todavía se ve genial. De acuerdo, Entonces si esta elipse no puede contener valores de 22 o 21 o dos dígitos, va a ser un problema contigo. Está bien. Así que asegúrate de que tu escritorio estés diseñado para estos límites. ¿ De acuerdo? Por lo que no se va del dedo del centro. Alinearlo en esto. Hagámoslo 36 picos es y ah, veamos. Ahora si se alinea correctamente, es mejor. Ahora puedes moverlo arriba y abajo a tu gusto como me gusta así. Entonces voy a usar, ya sabes, uno algo como esto. De acuerdo, entonces vamos a usar de nuevo el color blanco por aquí, y vamos a moverlo un poco hacia abajo. Ya viste que ahora es perfecto, y tratemos de agrupar estas cosas. Margie, esto va a ser que nuestros labios dirigieran esto. Está bien. Y alineemos así todas estas tres cosas en el medio. Por lo que ahora están alineados. Agrupémoslos para que podamos alinearlos con este trasfondo. De acuerdo, Ahora, esto se llama alineación perfecta. ¿ De acuerdo? No, Tenemos nuestro unítem por aquí, y nos vamos de grupo del dedo del pie. Vuelve a agruparlo. Por lo que va a ser nuestro artículo. Yo vengo actuando es. No te importen mis ortografías. Yo mis dedos no están en mi control. De acuerdo, entonces ahora lo vamos a replicar creando un crítico repetido. Y voy a mantener esto un grado B, y lo voy a repetir en esta dirección así. De acuerdo, ahora, una cosa más. Necesitamos más. Hola. Puerta aquí. Entonces me voy dedo del pie a usar algo así como 850. De acuerdo, entonces lo que voy a hacer es ahora voy a mover este un pueblo grande como este también, este fondo se va a cambiar. Yo lo voy a desbloquear, y vamos dedo del pie aumentar su tamaño. Algo así, algo así. Se lo va a mover por aquí para que no veamos su brazo ni aquí. Entonces voy a moverlo así. A lo mejor así. Y también voy a reducir la cantidad, aprender a tres. De acuerdo, entonces tenemos nuestros antecedentes y todo. Voy a duplicar esto un poco más. De acuerdo, así que hasta. Este es un 12345678 Así que tengo ocho por aquí. Voy a establecer la distancia entre ellos, así que voy a ir por esta zona y tratar de apretar todo lo que pueda. OK, así que 14 look anotado. Y creo que el tamaño de éste es 67 que es fácilmente capaz. Entonces si lo intenté ya usarlo a 62 se puede ver todo lo demás se introduce. Por lo que se trata de los grupos de terapia médica. Si trato de cambiar las cosas en el 1er 1 se va a reflejar en todas ellas. Por lo que ahora voy a reducir el tamaño a 10. Y ahora puedes ver que puedo tener una más. Estamos aquí. Entonces esto se va a querer. 3456789 nueve. Vale, Ahora lo que voy a hacer es que voy a tener algunos, creo que copiado por aquí, que va a ser mi archivo de texto. Y este ya es mi expediente fiscal. Listo. Apreciación. 123456789 10 11. Estos son de limón. Y estos son 1234569 De acuerdo, así que los voy a quitar para quitarlos de aquí, ¿de acuerdo? Entonces solo déjalos así y veamos qué va a pasar. De acuerdo, entonces voy a seleccionar esto y luego esta valoración, y voy a arrastrar mi arrastre mi archivo de texto. Ah, sobre él. De acuerdo, este es el expediente. Voy a usar el dedo del pie este archivo por aquí y dejarlo caer aquí. Está bien. Por lo que se puede ver ahora todo el texto ha sido cambiado. Auto. Médicamente. De acuerdo, así que esto es crear. Se puede ver así es como me gusta. Si desea cambiar algunos de estos valores, también puede crear un archivo. O puedes usar solo unos valores aleatorios como este. O tal vez 05 por aquí. El timbre garrapata coleccionable, doble clic para entrar y más detalle. Y también puedes presionar control o comando dedo del pie Ir directamente a eso. De acuerdo, Entonces si te holgas esto, esto va a seleccionar todo el grande, luego doble click para seleccionar este un este grupo y luego este grupo. Si quieres evitar todo esto, puedes presionar comando, control o comando, y sólo tienes que ir aquí así y hacer doble clic y seleccionar éste. Entonces también voy a Jane, algunos fuera de los valores aquí solo para asegurarme de que se vea aleatorio y bueno. Está bien. Además, creo que este color de colores es un poco diferente a mi color diseñado. Entonces voy a ir con algo más como esto. De acuerdo, Ahora está mirando más cerca de lo que realmente diseñé y usé. Vale, Así que puedes ver por aquí hemos usado repetidamente dedo del pie al instante crear esto, y ah, eso es todo lo que pienso para esta ventana de actividades. Y una cosa que tenemos que hacer aquí es que vamos a activar este, y vamos a desactivar éste, así que yo sólo vamos a cambiar de dedo. El color lo inicia. De acuerdo, entonces terminamos con la pantalla, y espero que hayan disfrutado de esta lección. Este es el grado de repetición de apagado apagado. Y pasemos a la siguiente lección donde vamos a personalizar esto para que sea bueno y crear nuestra pantalla de fregadero 51. Diseño de pantalla de sincronización: De acuerdo, ahora en esta escucha, vamos a crear este sink to cloud screen, y estoy feliz de que estemos llegando al final de este proceso de diseño porque estos largos videos con mi voz de embarque podrían, tú saber, hacerte ir a dormir. De acuerdo, Así que no te vayas a dormir. Vamos a usar el diseño de esta pantalla, y vamos a usar la misma pantalla que esta. La actividad es una, y vamos dedo del pie reducir esta repetición buena y crear un botón y el estado del fregadero por aquí. De acuerdo, entonces eso es todo. Empecemos con ello. Y voy a cerrar este, y vamos a volver a nuestra piel de diseño, que estábamos usando menos duplicar estas actividades y hacer que se hunda pantalla. De acuerdo, así que voy a cambiar el dedo del pie su fregadero, la nube del dedo del pie, y voy a dedo del pie que sea en el medio. Entonces ahora voy a esto. Usa este mismo grado de repetición y hazlo más pequeño, y , ah, vamos a usar el dedo del archivo de texto, conseguir todo por aquí, este cuatro texto o aquí. Entonces cagemos ese archivo de texto. Entonces esta es nuestra pantalla de texto. Se puede ver interés para subir interesados. Descargar significa subir un lead desde la nube. OK, así que voy a arrastrar este archivo por aquí. De acuerdo, entonces aquí tenemos este impuesto sobre el disipador de incendios. Antes de eso, voy a seleccionar el que voy a cambiar. Entonces este y yo vamos a dejar este expediente en esto. Leah. Entonces, Jack. Está bien. Por lo que puedes ver nuestro texto ya está hecho. OK, entonces ahora lo que vamos a hacer es un poco apagado. Estos están desactivados, por lo que necesitamos un color deshabilitado o un poco fuera de la creación. Un poco de jabones para el cabello. Entonces nos vamos del dedo del pie en grupo este grado, y te voy a cambiar de los colores por aquí. Al igual que éste. Voy a cambiarlo, dedo del pie este color y también este. Voy a cambiarlo a este color, que es un gran grisáceo. De acuerdo, Así que 00 o simplemente decir, cero en medio de un 00 me parece un poco duro. De acuerdo, así que no hay interés descarga del dedo del pie, y luego también, voy a quitarle la sombra. Por lo que no es capaz de mama. Todos estos son posibles, Así que voy a deshabilitar este. De acuerdo, entonces si quieres desactivar cualquier otra cosa, puedes hacer la misma gracia. Por lo que tu estilo es tus colores debe asegurarse al usuario que esto no es capaz. Esto no permite hacer clic. Ok, entonces esto es ah, poco off afford ends y significa concierto, que discutí en mi experiencia de usuario para puntajes de bigness. Y espero que si conduces si no lo has visto, creo que deberías tomarlo. Y entonces también vamos dedo del pie color este remolque este color resaltado y esto va a ser en la oscuridad. Color azulado. De acuerdo, así que esto está hecho. Ahora vamos a crear nuestro mejor saber aquí. También. Necesitamos dedo del pie moverlo por aquí porque no necesitamos dedo del pie. Que sea 667 Está bien, lo siento. 667 Deben ser los grupos de altura. Qué está pasando para reflejar esto y vamos a usar 667 que es una pantalla de reporte predeterminada para esta ap próxima película seis it en la parte inferior. De acuerdo, entonces tenemos nuestra pantalla de vuelta, y ahora vamos a usar un botón por aquí y ah, vamos a crear un botón. O tal vez podamos conseguir este botón de todos aquí. De acuerdo, así que esta es nuestra valoración de botones, y me voy de pie místico con aquí, y creo que es un poco más grande, así que tal vez podamos hacerla más pequeña un poco. Ver Korpi. O quizá más. Ver 100. De acuerdo, así que 300 looks anotados. Eso es quitar esto. Ups. El deporte está pasando por aquí. Yo quiero bloquear esto porque no quiero seleccionarlo una y otra vez. De acuerdo, entonces voy a borrar esto, y vamos a moverlo en el medio y hundirlo todo. Sin ortografía. Desactivar sincronización no son correctos. Entonces los voy a hacer correctos. OK, entonces necesitamos un ícono por aquí, que es el mismo, este, y ah, voy a copiarlo y pegarlo por aquí. De acuerdo, Así que lo voy a hacer en este, este dentro del dedo del pie abatido, cangrejo y arrastrarlo por aquí, y vamos a hacerlo un poco más grande porque se ve muy pequeño por aquí. Entonces voy a usar talla 24 o pelo. Alinémoslo en el medio así y Ah, oops. Simplemente hazlo. Ah, está bien. Ahora esto se ve genial. Piensa todo ahora. Y creo que nuestra carga casi está terminada. Veamos cómo se ve desde lejos. Por lo que parece separado vacío de aquí. Entonces voy a recoger el dedo del pie así. De acuerdo, creo que fue bueno para OK, así que no estamos preocupados por demasiado de las alineaciones. De acuerdo, tal vez podamos reducir el tamaño a partir de aquí. Algo así. Ahora se ve más equilibrado y alinémoslo en el medio, así. De acuerdo, entonces, uh, sólo un estado por aquí, que es nuestro texto allá último. Y creo que necesitamos ah, área de texto por aquí. Cambiemos el color para que lo veas con claridad. Y ah, nos vamos de pie. ¿ Por qué este menos 24? De acuerdo, entonces creo que estas son las especificaciones. Creo que necesito confiar en esto aquí, y sólo seleccionamos soldados externos en la siguiente línea. Voy dedo del pie centro así. Creo que debe estar más cerca de esta carga porque es sólo un status apagado de este botón. Entonces esto tiene sentido porque las cosas más cercanas van a ser yo voy a ser considerados juntos. Por lo que se adjuntan Ok, así que cantar pantalla está hecho. Espero que hayan disfrutado de esta lección. Esa fue una forma rápida de hacerlo con nuestro este grado de repetición. Y si quieres repetir nuestro cambiado una gran espalda. Puedes seleccionar todos fuera de ellos y puedes volver a crear un beat. Crea por aquí. Y también puedes extenderlo de esta manera. ¿ Porque qué? No lo necesitamos. De acuerdo, entonces eso es todo por esta lección. Espero que disfruten de esta lección. Pasemos a la siguiente lección donde vamos a crear el mensaje de la nube del dedo del pie del fregadero. Entonces cuando presionamos este botón, el mensaje rebosa que todo se ha hundido. Entonces movamos órdenes creando el último verde de este diseño encendido. Y no te aburras o no te vayas a dormir. De acuerdo, Así que pronto en la siguiente lección. 52. Sincronía la actualización de estado: Está bien. Ahora, en esta lección, esta es la última lección de nuestras ciudades de diseño. Y esta es nuestra pantalla la que se iba dedo del pie hundir nube. Cuando alguien está presionado, déjame mostrarte. Cuando presionamos este botón, se va a mostrar esta pantalla y todo se sincronizará, y le dará el estado. Por lo que esto se llama la retroalimentación en la experiencia del usuario El diseño son el diseño de usabilidad. De acuerdo, entonces nuestra app deberíamos estar ah diciendo que esto se ha hecho en este cabello. Esto sigue pendiente o algo así. Entonces este es el mensaje de retroalimentación, y este es el todo del departamento de nuestro sistema operativo estadounidense. Eso nos vamos dedo del pie pedirlo prestado a mi usu diseño niño. Entonces, empecemos y diseñemos esta pantalla ahora. De acuerdo, Ahora vamos dedo del pie contra arranque desde esta pantalla y simplemente replicarlo. Y esto es la pantalla del fregadero. De acuerdo, entonces todo se hundirá. De acuerdo, Entonces lo que vamos a hacer es que voy a desbloquear esto, seleccionar todo con comando shift, G control G, G control G, y esta es nuestra llave de pantalla del fregadero. Y lo que vamos a hacer es que vamos a bloquear esto para que no lo seleccionemos. Y voy dedo del pie crear otro rectángulo de capa en la parte superior, él fuera del borde desenfoque de fondo. Y voy a usar el valor para ser cinco brillo. Toby. Menos dedo del pie. Algo así. La capacidad será del 15%. De acuerdo, Ahora vamos a pedir prestado el mensaje de nuestro rus get y vamos a abrir el EU Kate. ¿ Las desgastes son tu skit aquí? Apenas tenemos doble clic en él, y se va a abrir, pero no se abre. Vamos, Tzeitel. Y vamos uno o controla uno. Ups. Déjame ver. ¿ Dónde están los mensajes? Entonces aquí tenemos los mensajes que puedes ver por aquí. Este es un mensaje. Entonces nos vamos holgura del dedo del pie. Este mensaje. Vamos a ver, esto se le llama alerta. Control de Comando V. De acuerdo, entonces tenemos este mensaje por aquí. De acuerdo, Entonces es grande en un color gris. Yo lo cambio. Dividir. Creo que esto debe ser posible con nosotros el diseño. Entonces voy a usar el blanco por aquí, y también, voy a usar algo de la sombra por aquí. De acuerdo, Entonces así es como usé este título. No estoy seguro de que si es posible en nuestros EU creo que sería posible simplemente cambiar el color. Todo lo demás es igual. Entonces hundirse. Ah, Y aquí diremos eso y esto se va a hacer. De acuerdo, así que esta es nuestra pantalla, y volvamos atrás y cambiemos es brillo de menos Lo sentimos, menos tres. Por lo que es más aburrido para que podamos ver este mensaje con claridad. Está bien, también, voy dedo del pie mover el dedo del pie sombra un lado más oscuro. De acuerdo, entonces ahora se ve mejor. De acuerdo, así que esta es nuestra pantalla encendida. Y si quieres cambiar este color, me gustaría cambiarlo por algún gran color. O tal vez discal regular. De acuerdo, así que esto se ve genial. Y espero que hayan disfrutado de esta pantalla de diseño Ciudades. Esta es la última reina. Ahora, en la siguiente lección, vamos a prototiparlo. Nosotros lo vamos a vincular, y te voy a mostrar Cuáles son los problemas que enfrentamos normalmente por las áreas de mesa sobre DA. Muchas otras cosas. De acuerdo, entonces en la siguiente lección, vamos a empezar a crear prototipos, y vamos a vincular el flujo de trabajo fuera de estas pantallas, así que espero que hayan disfrutado de esta serie. Si tienes alguna pregunta que hacerme, pasemos a la siguiente sección. 53. Usar cuadrículas para mejorar más diseños: Ahora vamos a ver algunos fuera de la red. Presentó a Rory diseñador en todo el ejercicio de diseño. Nunca usé ningún tipo de grandioso es porque estaba construyendo bastante rápido. Ahora me voy con el dedo del pie. Si quieres realmente querer encontrar diseño junior necesitas crea para eso. Las calificaciones OK te ayudan a alinear y armonizar tu diseño como puedes ver por aquí Esta es una gran salida 12345678 columnas Genial. Y he dejado pocas áreas a la derecha o a la izquierda, que es márgenes Por aquí se puede ver me han dejado 11 puntos en ambos lados para estar seguro y estoy alineando todo Mi inicio de sesión se puede ver aquí es mi menú hamburguesa logoed todo dedo del pie estos criaturas. De acuerdo, así que va a hacer más armonía y también nos va a ayudar a usar el dedo del pie, ya sabes, un amplio click en o tocando en las zonas ville. No es accesible, así que asegúrate de tener al menos 11 o 12 puntos de margen fuera en ambos lados. Entonces una cosa es que la segunda cosa es que puedes ver por aquí también puedes alinear tu o hacer que las Everton Heights de tus elementos. Según Toa estos, se van a quedar más amables. Como se puede ver. Aquí está mi botón. Puedo alinearlo a esto. 123456 seis columnas medias por aquí y también todas ellas. Por lo que van a dejar estas dos columnas afuera para tener un buen margen. Entonces déjame crear diversión para este para ti. Entonces voy a dar click en esto, que es nuestro nombre de tablero de arte, y voy a dar click en Crear. Y voy a usar columnas, que va a estar aquí y luego dejar lo bueno de ello tal como está. 10 píxeles. Y lo que voy a hacer es que estos son los márgenes. Quiero márgenes similares en ambos lados. Entonces voy a usar 12 para este. Entonces creo que usamos 11. Entonces lo siento voy a usar este, así que voy a usar 11 y creo que hay algún problema. Así que vamos a dar click en esto usado antes porque he hecho el default por aquí. Está bien. Y, ah, se puede ver u oír. Esto es usemos 11 para aquí dedo del pie para ver. ¿ Por qué esto es un problema? A veces es un cálculo. Entonces el cálculo no es correcto. Por lo que podríamos tener algunos problemas, como márgenes desiguales en ambos lados. Por lo que necesitas atenderlos más adelante. Por lo que ahora puedes ver que está arreglado. Esto voy a hacer este default. Y ahora se puede ver esta es la zona que estamos utilizando. Y esto es que puedes ver si hago zoom. Ahí hay algunos fuera de las zonas que están saliendo como esta. Entonces voy dedo del pie usarla así y se va a chasquear a esto. Por lo que ahora está más apropiadamente alineado a esto. Esta zona Puedes hacer lo mismo por esta. Entonces el vert es al 62. Entonces voy a hacer esto del 1 al 62. ¿ Quién es seis para? De acuerdo, así que ya puedes ver ahora tenemos un tamaño un mapa a nuestra codicia, y se ve más natural. Más se puede decir diseño más alineado Ok s Oh, esto es genial. Y es por eso que quiero hacer para ver este grado de diseño para que puedas crear el tuyo propio. Y ah, puedes tener tu diseño dispuesto así. De acuerdo, entonces puedes ver aquí si voy a esto. Esto se ve bonito. Es más baja en la esquina izquierda. Está en la esquina derecha. Y Ah, estos son mis otros elementos en mi página. No estoy en este momento re dimensionándolos, pero realmente se puede decir realmente recomiendo que se debe usar algún tipo off crea porque van dedo del pie hacer que tu diseño se vea bastante bien, así que lo estoy alineando en esta área de este lado. Este 3 52 también, esto va a ser 3 52 Así que asegúrate de que todas tus áreas o esta área de contenido medio sea 3 52 puntos de ancho. Entonces este es el tamaño que obtuve de este credo. De acuerdo, entonces eso es todo lo que quería mostrarles este gran sistema y cómo diseñamos usando este grado. Y puedes ver aquí si vas a esta zona de botones. Estamos usando estas seis columnas para este botón también para estos campos. Entonces todo eso se trata de sistemas de red. Y si de verdad quieres saber más en un gran sistema y vertical de ellos. Deberías ver mi tipografía para escuelas de diseñadores y desarrolladores. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección donde voy a discutir la guía de estilo faltante y cómo vamos a prepararla. De acuerdo, así que vamos a seguir Creando guía Estilo. 54. Refinar guías de estilo en XD: Ahora vamos a ver nuestra guía de estilo, y vamos a refinar nuestros colores, nuestros estilos de práctica. Hemos usado nuestros símbolos Vamos a usar una y otra vez. OK, así que empecemos. Y vamos a utilizar todas estas pantallas para crear estos colores. OK? Y ahora, hasta ahora, tenemos un color mayor, que es éste. Esto es pero en doble clic y se puede ver aquí hemos fallado. Puedes hacer click derecho. Y se puede, um bien, así que ya está agregado. Por lo que no me está dando la opción de agregar el color. Entonces me voy a ir con este, así que doble clic clic derecho, y se puede ver aquí. Dice agregar color. Ahora, esta opción va a venir cuando haga clic derecho en ese sim de esa capa. ¿ De acuerdo? Además, puedes convertirlo en un símbolo y ah, eso es que no necesitamos porque va a aparecer por aquí una vez, así que no necesitamos que sea un simple Ok. Entonces sobre Lee, esos elementos reutilizables que vamos a utilizar una y otra vez nuestra repetición en nuestro diseño vinieron esos elementos reutilizables que vamos a utilizar una y otra vez nuestra repetición en nuestro diseño que van a ser un símbolo Entonces tenemos este tablero mazos, que es agonía. Creo que es éste. Si hago doble clic en él, está usando sentido que si pro display bien. Y de alguna manera está diciendo que no lo es No es capaz de encontrarlo en ventanas, pero creo que lo encontrará en mi Mac. Entonces ahora mismo voy a cambiar es dedo del pie. Ah, sí. Si te dext te mostré. Entonces me voy a ir con ustedes. Yo exhibo y se va a cambiar este. De acuerdo, entonces para Windows, voy a usar este para Mac. Se puede utilizar la pantalla SF Prue. Está bien. Este lugar es básicamente para esconderse fuerza, así que hemos editado. Por lo que nuestros tamaños de encabezamiento son 32 esta agonía y 34 esta. Por lo que estamos utilizando como f usted una pantalla en todas partes que es de este tamaño. Entonces en este momento, si quieres eliminar, puedes completar o quitar correctamente el estilo tractor desde aquí. ¿ De acuerdo? Entonces solo lo estoy guardando solo para asegurarme de que no he usado en otro lugar. Está bien. Ah, OK. A continuación, aquí, se puede ver que tenemos nuestro color de enlace, que está por aquí. You Text Esta es también otra alerta de link que he intentado utilizar. Sería creativo. Puedo reorganizarlos, pero ahora mismo, creo que no puedo reorganizarlos en Adobe X'd. De acuerdo, Entonces o bien puedo probar este estilo de enlace. Que es esto un poco azul azul claro, que es, ya sabes, más nítido que este color opaco, morado oscuro. De acuerdo, así que lo he guardado por aquí. Por lo que hay dos estilos de enlaces, éste y éste. Entonces tal vez una cosa más. Lo que podemos probar aquí es que podemos cambiar el fondo o aquí, así que lo voy a desbloquear. Y si hacemos que este fondo sea más brillante, fondo s. Así que déjame mostrarte a lo que me refiero. Entonces voy a ir con hacerlo más brillante. Entonces voy a mejorar el brillo dedo del pie tres esperanzas tres. Está bien. Y ahora voy a querer esta capacidad 200%. Y también hagámoslo Ah ah, cinco. De acuerdo, ahora se puede ver el efecto ahora Mi todo. Mis campos, mis enlaces. Mi todo es más visible. Por lo que depende de ti tu elección de diseño si quieres hacerla más visible porque en la luz donde tierra estos colores oscuros se verán realmente impresionantes. De acuerdo, así que esto sólo está en efecto, lo que te mostré. Se puede ver por aquí. Voy a volver a mi configuración anterior y ah, está bien. Entonces, controlar o comando Z para volver a la configuración anterior, usemos el mismo valor. Creo que manera tiene menos uno. Y la cantidad waas, creo, fue de tres o cinco. Disculpe cinco por no pasar a nuestros otros colores se puede ver u oír este color le falta a nuestro color. El color está por aquí. Se puede ver porque este es un color un poco más oscuro y esto es un poco más nítido. Otros. Entonces voy a hacer click derecho. Ya se ha agregado, por lo que puedes no ver ninguna opción para añadirlo de nuevo. Entonces voy dedo del pie DoubleClick, DoubleClick y doble clic otra vez Toe. Muévete a este y secó click. Se puede ver este color no se agrega, así que tenemos dos asesinos, que es un ist más oscuro. Uno es un color más nítido, más claro y tres colores para nuestro texto. Negro Oscuro y Gree y éste. De acuerdo, creo que no hemos agregado avuncular para este nombre. Entonces voy a dedo del pie anuncio. Creo que debo añadirlo como un estilo de personaje, porque si quiero agregar más texto siente que voy a simplemente dar clic en él. De acuerdo, Así que este es nuestro Aquí está nuestro textil. Este es nuestro gran X trial para nuestro enlace. Perdón. Nuestros sentidos tour de poder. Siente que esto va a estar por aquí. De acuerdo, así que esto casi se hace. Pasemos a otras áreas. De acuerdo, Entonces una cosa más, también puedes hacer de esto un símbolo, ¿ verdad? Haga clic y haga símbolo y se sumará por aquí, que ya he hecho. Ya puedes ver si me desplazo aquí abajo. Tengo el símbolo porque quizá necesitemos usarlo una y otra vez en diferentes pantallas. De acuerdo, entonces tenemos ah, este color falta. De acuerdo, entonces voy a hacer click derecho esperanzas, ¿verdad? Haga clic y agregue estilo de director. Entonces tenemos este 17 punto Sand dijo si pro dext Así que una cosa más. Creo que me voy a ir con el s f tú me dext. Entonces, ¿te voy a cambiar esto? Yo ahora mismo en mis ventanas. De acuerdo, entonces en tu Mac, vas a usar SF Brutus jugando al teléfono de texto a prueba de SF. Está bien. De acuerdo, así que esto es bueno. Tenemos casi todos los colores añadidos a nuestros paladares. Esto s es un casi todos los estilos de coleccionista que necesitamos. Está bien. Ah, OK, así que creo que eso es todo. A lo mejor no necesitamos nada más. A lo mejor éste. Este es nuestro más pequeño. Creo que lo he hecho. Yo lo hice todo aquí. Se trata de 10 puntos, así que tal vez estos colores no he agregado. Ok, entonces este es el color en este taburete de elipse. Y si hago click derecho, puedo añadirlo a los colores. Es de un color diferente. También Este este es un grado diferente es de un color gris azulado. De acuerdo, entonces ahora puedes ver cómo creé esto. Podrían estos colores empecé con solo una decoloración. Entonces sigo agregando este segundo promedio de recuerdo fue éste y creé dos tonos fuera él. Entonces tengo este curricular azulado para apagarlos. Uno es oscuro, otro es claro. Entonces tengo tres variaciones diferentes de negro y gracia para texto y una vital. Entonces eso es todo lo que necesitas para tu esquema de color o un gran esquema de color, que es solo de dos colores. Una es la reacción de primera. Segundo es tu segundo color de reacción o tu segundo recuerdo que vas a usar para botones o enlaces ingresados es dos o tres acciones gree off next, y la cuarta es alguna otra variación de tres y tu asesino. De acuerdo, entonces se va a maquillar toda tu app. Entonces todo eso se trata de este esquema de color, estilo, guardias y todo. Creo que hemos completado nuestra guía de estilo. Voy a guardar mi documento y eso es todo. Espero que disfruten de esta lección. Pasemos a la siguiente lección y más cosas sobre Adobe X'd. 55. Directrices de diseño de IOS: hoy vamos a aprender la parte más importante del diseño, es decir Ah, eres especificaciones y monumentos y diferentes elementos off design que necesitas atender cuando estás diseñando cualquiera. Yo era app. De acuerdo, así que empecemos. Entonces esto es un temporal que voy a compartir con ustedes. Acabo de crearlo ahora mismo. A lo mejor dentro de los últimos 30 35 minutos, ¿eh? Entonces lo que les voy a decir es que diferentes tamaños fuera de diferentes elementos fuera de su diseño IOS . Entonces en este momento estamos diseñando para iPhone 678 ni la versión plus son el iPhone X. Vale, Entonces estos monumentos, son casi lo mismo en todas las especificaciones diferentes para incluso para X. Pero el tamaño está apagado. Las pantallas son un poco diferentes. De acuerdo, Ahora, lo que vamos a hacer es que vamos a empezar con esto. Ah, arriba por aquí. De acuerdo, entonces este es nuestro estado de spot en la parte superior, y va a ser de 20 puntos de altura. De acuerdo, así que hay que tener en cuenta estos monumentos que estamos diseñando este es el espacio por 20 puntos. Van a estar ocupados por este estatus. Enfréntalo. De acuerdo, El siguiente es nuestra idea de acción. O ahora bar donde vas a navegar entre tu app. Podría haber botones por aquí. Esta es la versión estadounidense 11 sobre la reciente actualización en el sistema operativo iPhone IOS. De acuerdo, así es en el momento es lo mismo, que es de 44 puntos. Y este es el tamaño estándar de tu Tom o tu dedo tap en puerto. De acuerdo, entonces este es básicamente un concepto de experiencia de usuario, tu cualquier botón o vecino posible o accionable o cualquier elemento que quieras que tu usuario sea presionado más tap on, debes tenerlo con la altura despegada al menos 44 puntos y también el vit. Entonces si miras este título de los padres, vale, Así que si voy a este acceso izquierdo E, puedes ver esto es que está hit target. Entonces esto es muy grande. Es de 1 80 vied y 44 de altura. De acuerdo, así que necesitas tener todas estas cosas en mente. Además, si miras esto, es zona de hit. Debería estar por aquí así. OK, así que debes especificar el dolor de cabeza. Está bien, está bien. Pasando adelante. Ahora. Esta es en realidad la altura completa de esta área de título o esta acción Ni bar con esta área de título es de 96 puntos. Para que veas en qué he pensado? Esto es casi 56. A lo mejor puntos. No estoy seguro. A lo mejor 50 pies. Bueno, adivina o puedes hacer eso. Tapetes y cálculo. De acuerdo, así que estos son dos monumentos. Voy dedo del pie ir con el texto y tamaños fuera de diferentes encabezamientos y texto de párrafo más adelante . Ahora mismo, sólo me muevo con estos momentos, ¿de acuerdo? No justo en la parte inferior. Si miras aquí, tenemos la puñalada nuestra y tiene cinco iconos, que es estándar. Entonces no aumenten más de cinco. Los iconos son áreas de tabulador o aquí porque cada uno va a ser de 75 puntos. ¿ Por qué? Que es lo suficientemente bueno para tu caída para que sepas, del tamaño de tu tiempo Bookie. Ahora a la altura de este día, pero es de 49 puntos. Por lo que si haces doble clic en él, puedes ver aquí tenemos la altura es de 49. Y también creo que usamos lo mismo en nuestro vamos a usar la misma altura en nuestro diseño. De acuerdo, así que para los botones se puede ver aquí está el botón. El estándar es el mismo. Debe ser 44 puntos de altura mínima y se puede alterar. Tengo ahora 1 80 Y también se puede ver que debe haber una buena distancia entre estos dos ahora estamos nosotros Creed está trabajando en ocho cerdos Ill, Genial, Genial, que he impartido en mi flujo de trabajo fuera del curso de diseño web moderno. Y si sabes, no sabes mucho del auxiliar 8.8, simple simplemente te voy a mostrar que son los múltiplos fuera son cuatro. Por lo que todas estas distancias que puedes ver escucharás 16.16 punto, 16 punto. Estos son todos también en los múltiplos de 16 u ocho o cuatro o tal vez dos. Entonces todo está en números pares. De acuerdo, entonces ah, 44 es mínimo. También puedes usar si quieres. También puedes usar 48. Ese no es un problema muy grande. Entonces no te pegues que solo quiero dedo del pie hacer todos los botones. Deben tener 44 de altura. Puedes aumentar la altura si quieres, pero no la atrices. Será un problema para el usuario tocarlo. De acuerdo, entonces estoy usando la distancia de 16 puntos entre dos botones posibles para que mis usuarios no se equivoquen. De acuerdo, así que si el usuario está tratando de tocar aquí, no se pierde un toque accidentalmente en este botón. Entonces esto es eso. De acuerdo, entonces ahora estoy moviendo dedo del pie los tamaños de encabezamiento. Por lo que este tamaño, básicamente, este encabezamiento principal es de 34 píxeles o 34 puntos. Básicamente. Entonces este es el encabezamiento principal o el medio encabezamiento fuera de tu página, Y entonces nos estamos moviendo a este texto corporal. El texto corporal va a ser de 17 puntos. Esto es estándar. No se puede intentar ir por debajo de eso, porque tendrá algunos problemas para leer en dispositivos más pequeños como el iPhone cinco. De acuerdo, así que ten en cuenta que estás diseñando para todos los diferentes. Yo era modelos. 5678 on. No solo mires a ocho o siete y usa ese tamaño de texto. De acuerdo, así que este es un tamaño de texto cómodo. Está en sus estándares para el rubro. Tamaños en. Están a la derecha. Cualquier cosa por encima de 20 puntos. Se puede hacer de eso un rumbo. Entonces estoy usando por aquí. 27 puntos. San Francisco, eres exhibición de exhibición. vados son básicamente cuatro rubros. Por lo que siempre que intentes usar encabezados, vas a usar display para ello. De acuerdo, para que puedas ver San Francisco pro display force son para encabezamientos. Esto lo he mostrado en mi tipografía para diseñadores, escuelas y si lo sabes, quieres saber más sobre línea, cueros de mano y ritmo vertical y todo esto. Deberías mirar mi tipográfica Xenia Hope. De acuerdo, entonces ahora me voy del dedo del pie, vengan del pie los márgenes. Ahora puedes ver por aquí a la izquierda y a la derecha. Hay márgenes fuera de 16 puntos, así que esto es básicamente un ocho puntos Genial. Por lo que están viviendo el doble de ocho, que es de 16 puntos en ambos lados. Este es un margen seguro porque voy a dedos no pueden tocar en esta zona Si intentas,ya sabes, ya sabes, apretar el dedo o tratar de tabular sobre cualquier cosa por aquí porque juego un juego en mi móvil android. Y cuando trato de tocar, hay una carga que es un palo ahí está atascado en esta zona, y es realmente difícil acceder a que tengo que, ya sabes, tocar un diferente como Dan. Diferentes ángulos. Sabes, en realidad, y pulsa ese botón por aquí. De acuerdo, Así que necesitas dedo del pie tratar a una amplia esta área se puede ver por aquí. Esta es una gran cantidad de área fuera de área capaz está fuera de estos márgenes. También se puede ver este encabezado este texto. Todo está fuera de estos márgenes. Por lo tanto, intenta usar eso en tu diseño. Ahora, todo esto se trata de las especificaciones de diseño. Hay mucho fuera de muchas otras especificaciones de diseño como diferentes alturas de otros artículos y otros elementos y gráficos. No voy a entrar en los detalles. Ah, mucho. Te voy a dar compartirte uno o dos artículos más. Se puede leer sobre todas las diferentes especificaciones. Pero estos son los básicos. Creo que no puedes equivocarte si consigues todo esto perfectamente. Por lo que el área de tap casi siempre será de 44 puntos de altura mínima y ah, estos son diferentes. El tamaño del texto es también el tamaño del texto en la escalera. Pero si miras de cerca, esto va a ser de 10 puntos. Debido a que este texto no está destinado a leer es solo para sacar la pista de este ícono. Entonces si estoy usando un ícono muy nuevo y mi usuario es incapaz de reconocerlo , puede. Él o ella puede leer este texto y al instante saber que esto es ah, ingresos. Me fui o algo así. De acuerdo, entonces todo esto se trata de diferentes especificaciones de diseño fuera de nosotros 11. Espero que hayan disfrutado de esta lección. Voy a dar el dedo a compartir este documento para que puedas descargarlo. Estará en mi carpeta Google Drive. Así que echa un vistazo a este y diseña tu quizás bellamente. Y usar el gasto son pautas U S. Estos se llaman yo uso pautas de diseño. Espero que disfruten de esta lección. Si tiene alguna pregunta, háganme preguntas. Pasemos a la siguiente lección. 56. Arregla los límites de tope: no. Antes de entrar en prototipado y cavar en prototipado, vamos de pie Organizar pocas cosas y afinar Pocas cosas que me pareció muy problemáticas cuando probé mi prototipo en mi iPhone. De acuerdo, entonces el problema es Ah, aquí tenemos mucha pantalla. Entonces nosotros primero nos vamos de pie. El primer paso que voy a hacer es que los voy a arreglar. Eso tenemos menos pantalla a un paso. Entonces voy a mover este tablero hacia abajo. Estamos aquí, y luego estas actividades junto con dashboard, y luego tenemos esta barra lateral, que es menú. Después de que salgamos del tablero de escondones y también estas dos pantallas, las voy a mover por aquí. De acuerdo, entonces vamos a seleccionar todos de ellos libros. Seleccionemos todos estos haciendo clic en los nombres y presionando turno, y los voy a mover así. De acuerdo, así que esto es todo lo que necesitamos en este momento, Y hay un problema más que encontré es el área golpeada Medios, por ejemplo, si estoy tratandode vincular esta ley dedo del pie de cabra, la siguiente pantalla o el registrador pantalla o esta pantalla 1er 1 Vale, ahora en esta pantalla, va a funcionar. Bien. Si trato de probarlo en mi PC Esto mediante el uso de este prototipo por aquí, va a funcionar. Bien. Pero si intento probarlo en mi iPhone cinco s o en cualquier dispositivo y el problema será que el usuario no pueda tabular en esta pequeña área. De acuerdo, entonces necesitamos hacer que esta terrible área sea un poco más grande para el dedo. De acuerdo, Entonces lo que vamos a hacer es que vamos a cuidar de esta área capaz, que es creo que lo discutí en experiencia de usuario para grandes puntuaciones de enfermeras. Por lo que debe ser al menos 44 puntos o algo más cercano a esto, que los usuarios puedan capitalizar fácilmente. Esto fue de 44 píxeles de 44 puntos. De acuerdo, entonces primero que voy a hacer es ir del dedo del pie, crear algunos fondos vacíos de fondo o fondos transparentes detrás de este logotipo. De acuerdo, así que hagámoslo primero con una pantalla para que veas lo que realmente quise decir. De acuerdo, entonces vamos a seleccionar este aquí. Ahora puedes ver esto es toda nuestra espalda a Logan. ¿ De acuerdo? Ahora lo que podemos hacer aquí es si voy a este apunte y si voy a este diseño y voy al detalle de este, Ok. Por lo que podemos ver esto es accesorio dejado. Está bien. Una cosa que podemos hacer es que se puede ver aquí. Ellos han añadido esto es prestado de ti como lo de nuestro nosotros, que es de Apple. Por lo que se puede ver que han añadido el límite, que es así de grande. Entonces si incluso grifos en esta zona, se va a volver atrás. De acuerdo, Pero para nosotros, puedes ver si voy a esta contraseña sentir si alguien intenta tocar este ícono I icono, es solo este ícono, así que necesitamos ampliar su área de grapas ahora. Lo que vamos a hacer es que vamos a usar algo parecido a esto, y voy a utilizar esta zona tanto medios que es él fuera de la frontera y también el lleno. De acuerdo, entonces este es un rectángulo vacío, y lo voy a usar justo debajo de este ícono de pez, y lo voy a llamar límite para I Icahn. De acuerdo, ahora, cuando alguien intente tocar esto, va a mostrar esta pantalla. OK, entonces estos son pocos detalles menores. Es necesario tener en cuenta que tu prototipo debe tener áreas buenas y capaces que un usuario pueda tocar fácilmente. Además, si miras este log in hair, también podemos agregar algo similar por aquí. Entonces voy a hacer que toda esta zona sea capaz. Yo voy a sacar la frontera, él fuera del campo, y me voy de pie. Muévete por debajo de esto. Esto va a estar hambriento mucho tiempo aquí, ¿de acuerdo? Y voy a agruparlos. Vamos, G. Así que esto es iniciar sesión aquí, Link. Entonces estas son cosas que debes considerar. Estos son muy pequeños detalles los cuales van a hacer perfecto tu prototipo. Así que asegúrate de hacerlo con todos tus elementos capaces por aquí así. Este. Está bien. Para que veas que esto es un grupo, así que lo voy a abrir y voy a despejar el dedo del pie. Son área capaz por aquí. Entonces va a ser algo así por aquí. Quita esta frontera de esta llena, y la voy a mover por debajo de esta nave. Llamémoslo un límite. Sí, algo así. Y, uh, creo que esto es bueno. Además, podemos hacer la misma área límite para este cierre de sesión. También, podemos hacer lo mismo por esto. Hecho. Entonces nos vamos de dedo a usar toda esta área en la parte inferior o esta pantalla entera porque hecho, si alguien va a dar click en alguna estaban en la pantalla este pequeño paso área pop up, va a ser volver a este fregadero a pantalla de Clark. Entonces eso es todo lo que quería compartir con ustedes que antes de comenzar cualquier prototipado, necesitamos arreglar algunas cosas, que es el tema del área de grapas. Está bien. Y el límite fuera de tu objetivo de tap, básicamente se llama objetivo de tap del mismo. Por lo que espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección y realmente empecemos a crear prototipos. 57. Login de Prototipos y pantallas de Signup: De acuerdo, ahora vamos a empezar a crear prototipos, y en esta lección, vamos a cambiar a esta pantalla de prototipos y vamos a empezar. OK, entonces primero vamos a prototipo de dedo las cinco primeras pantallas porque no podemos tomar todo en una sola Clough en una sola lección. De acuerdo, entonces, uh, si haces clic en cualquiera fuera de la pantalla, puedes ver que hay dos opciones si puedes vincularlo a cualquier otra pantalla en y también este ícono de inicio. De acuerdo, entonces casa en esto va a ser la pantalla de inicio, así que voy a dar clic en esta. Por lo que esto va a ser sobre pantalla de inicio. Entonces si juego esta revisión de escritorio, puedes ver esta pantalla de inicio es esta pantalla. Entonces si trato de dar clic en cualquier otra pantalla y hacer que arranque Si empecé, puedes ver que va a empezar desde esa pantalla. Esto es una cosa. De acuerdo, entonces hagamos esta pantalla de inicio, y la voy a vincular a mi registro y bienvenido, porque esto es lo que queremos. Basta con pisar la pantalla y va a estar en la pantalla de bienvenida. ¿ De acuerdo? Por lo que quería ser blanco es largo y bienvenido. Así que nombra sabiamente sus pantallas. UK iniciar sesión bienvenida. Y quiero la tradición que va a ser el efecto Slide izquierda. Intenté Así que me secé. Empuja a la izquierda, empuja Correcto. Por lo que quería ser disuelto en la siguiente pantalla. Y esto es relajante. Es como se va tobogán del dedo del pie. ¿ Qué es esa transición? Cómo se aliviará su tradición en lugar de con desaceleración o será muy veloz en el arranque al final. Entonces no quiero entrar en detalles apagados. Esto es relajante. Simplemente usa esto dentro y fuera están fuera. De acuerdo, así que he seleccionado este. Entonces voy a ir a estas duraciones. ¿ Cuánto tiempo se mostrará este efecto de flexibilización? ¿ Debería ser demasiado largo? No te recomiendo que vayas por encima de 10.5. Se va a estar tomando mucho tiempo. OK, así que asegúrate de estar entre 0.12 punto 4.5. Entonces voy a usar esto, que es punto para así creo que debería usar algo más cerca. 2.25 De acuerdo. Y esta es otra opción que voy a mostrar en la siguiente lección. Entonces ahora mismo, no te chamarres y ah, probemos nuestro protrude. Tengo y veo si se trata de enlaces para que puedas ver No, puedo tocar o hacer clic en él. Por lo que si hago click en él, puedes ver ahora tengo puntera de maíz esta pantalla de inicio de sesión. De acuerdo, Ahora estamos en esta pantalla. Tenemos prototipo exitosamente para juego de esto a esta pantalla. Por lo que estamos decidiendo flujo de trabajo fuera de nuestra aplicación o sitio web o capa de diseño. Ahora en esta pantalla, hemos diseñado interacciones para este Logan. Ahora botón, porque va a ir al proceso de consigna por aquí. Y luego tenemos este proceso de registro con correo electrónico, que va a estar llevando a esta pantalla para iniciar sesión con Facebook y Google. No hemos diseñado ninguna pantalla para eso. En ella estará Ah, prototipo muy vertical. Si recuerdas, será muy en profundidad Prototipo para este Inicia sesión y firma un proceso. No quiero que sea proceso muy profundo. Y ah, esto es que vamos a enlazar esta pantalla. Esta zona se puede ver no se selecciona esta zona de grifo frío. Entonces de verdad, queremos que esto suceda. Entonces ahora me voy dedo del pie vaya a esta pantalla y usemos slide left. De acuerdo, Ahora hay una cosa muy importante que debes tener en cuenta. Deslice a la izquierda se aplicará dedo del pie esta pantalla, no la pantalla. Y quería a Toby 10.4 2do porque el punto será demasiado rápido. Entonces lo voy a usar 0.4 segundos y vamos a usar estos fuera. Ah, nuestro está adentro afuera. Disculpe este. De acuerdo, ahora se hace una interacción. Ahora, una interacción más en esta pantalla es ésta inicie sesión ahora y se va a ir del dedo del pie al registro de la pantalla y se llena. Es sólo la siguiente pantalla. Queremos mostrarle al usuario que cómo será la pantalla. Y también podemos ir a este registro inactivado, lo cual es mejor, porque por defecto vamos a mostrar la contraseña al usuario mientras ella o él está escribiendo . De acuerdo, Así que voy a ir dedo del pie de la piel en lugar de largo. Y Fred mira una así esta pantalla y la quiero dedo del pie. Vamos a disolverlo porque va a la siguiente pantalla y apunte Duración forzada. De acuerdo, ahora tenemos algunos vinculados unos valores. Vamos sólo a esta pantalla y me voy de pie. Usa esta revisión de escritorio y veamos cómo es. Ahora, vamos a dar click en el eslogan. De acuerdo, así que va muy bien. Y Ah, ahora mismo, éste no está ligado o no. Ni siquiera éste. Entonces estoy atascado con esto. Entonces éste es crear. Y, ah, si enlazamos esta zona, que va a ser vamos a vincular esta contraseña y entonces la tenemos es un límite para ícono. De acuerdo, entonces este es el límite que he seleccionado en el lado izquierdo en el panel de capas, y voy a vincularlo, dedo del pie este. Entonces vamos a hacer clic en la pantalla, y se va a disolver el dedo del pie, acuerdo. Y todos estos ajustes serán los mismos. Y si en esta pantalla trato de dar click en tap en esta, voy a volver a ésta. Entonces esta es nuestra tesis de inicio de sesión, contraseña, vista, interacción. Y así quiero volver a este. Entonces básicamente es cambiar entre estos dos estados, y yo quería ser muy rápido, así que quería ser 20.2 segundos. Y también cambiemos este. Dos puntos. Si quieres cambiar algo, solo tienes que dar click en la pantalla y en la interacción o aquí que te va a mostrar las opciones que yo quería. Toby. 0.2 segundos. Está bien. Ahora, Ah, también necesitamos selectos, y queremos que se vaya del pie de los cuadros de mando. Después de la tala. Yo quería que fueras a esta pantalla de dashboard, así que esta vez lo queremos dedo del pie, no disolver. Um, vamos a empujarlo a la bien. Entonces voy a usar eso está bien ahora, porque creo que es lo correcto. Y yo quería ser cuatro segundos también lo mismo para este log en Berlín. Yo quería ser cuatro segundos que esté bien. Ahora voy a jugar esto desde el principio. Voy a dar click en este. De acuerdo, así que quiero iniciar sesión. Está bien. Soy parte escribiendo mi contraseña y se me muestra. Vamos a dar click en tocar esta otra vez. Otra vez. Por lo que este es muy bonito y fresco efecto que puedes ver por aquí. Está bien. Y luego me voy a volver a ir de pie. Inicie sesión. Y este es mi tablero de instrumentos. Entonces así es como estoy usando esta pantalla y estas interacciones y para crear este prototipo. Y ahora vamos a ver si hay algún eslabón que falta por aquí. Entonces este es Piensa tothis inscribirte. De acuerdo, así sucesivamente Regístrate. Yo quiero volver a la tala. Entonces estas son las dos interacciones que estaban aquí en la parte superior. Quiero volver a la lista, iniciar sesión en pantalla, y quiero que se sel. Yo escribiría. De acuerdo, así que quiero que éste se deslice justo en destrucción, y éste se deslice hacia adentro. De acuerdo, entonces esto es básicamente deslizarse hacia fuera, en realidad. De todos modos, así que esto se va a deslizar a la izquierda. Y si hago click en este, vamos a ver. ¿ Cuál es el Ok, Así que esto también se desliza a la izquierda. De acuerdo, así que esto es diapositiva a la izquierda. Este tipo debe ser diapositiva. ¿ Verdad? Entonces va a estar en la dirección correcta, Entonces Ok, entonces esto va a ser deslizamiento, ¿ verdad? Y además, esto va a ser diapositiva derecha y fácil ahora apuntar para. De acuerdo, entonces vamos a probar este. Y ahora voy a dar click en este. Date de alta mucho tiempo y regístrate. Blogueando. Date de alta. Blogueando. De acuerdo, así que realmente se ven muy bien. Se puede jugar esto con todo el día. ¿ De acuerdo? Por lo que volver a iniciar sesión. Este también está funcionando. Por lo que nuestras pantallas superiores están hechas Ahora estamos Las hemos ligado adecuadamente. Si ejecutas esto, puedes ver que esta es nuestra pantalla de carga. Y luego si voy al eslogan puedo ver que esta es la pantalla de inicio de sesión de actividad donde estoy escribiendo mi contraseña y te puedo servir y puedo esconderla. Puedo volver a silenciar. Puedo ir a este inicio de sesión. Y este va a ser mi tablero ahora mismo. No estamos activando. Éste fue éste porque vamos a abordarlos en la siguiente lección. Espero que hayan disfrutado de esta zona de escalones y de todo. Cómo se va a vincular. Si quieres eliminar cualquier interacción, solo tienes que arrástrala de esta manera. Y es Se borrará. Ahora puedes ver este artículo no está vinculado a ninguna pantalla. Entonces así es como lo borras. Entonces esto es más o menos así. Si quieres editar alguna configuración, solo tienes que hacer clic y se abrirá un pop off. Ten qué objetivo y transición y flexibilización quieres. Y eso es todo. Si tienes alguna pregunta que hacerme A pasemos a la siguiente lección y creemos la gripe para el resto fuera del prototipo. 58. Prototipos de tableros y otras pantallas en XD: De acuerdo, Ahora, en esta lección, vamos a vincular el resto de las pantallas y hacer el club con ellas, y vamos a completar el resto fuera de nuestro prototipo. De acuerdo, así que empecemos. De acuerdo, vamos a acercar remolque, Controlar o mandar uno. De acuerdo, así que este es nuestro tablero, y esta es nuestra barra lateral. Por lo que necesitamos asegurarnos de que se deslicen. Muy bien. Entonces si alguien hace clic en este botón por aquí, que es menú de hamburguesas. Entonces primero, vamos a crear esta interacción y también este cierre de sesión. Entonces todo en todas estas pantallas, voy a crear la misma interacción. De acuerdo, entonces vamos a seleccionar este. Y voy a ir a este prototipo, y soy igual que este grupo, que es mi izquierda, uh, uh, menú ex Nombrelo menú. Y voy de pie a esta pantalla, que es mi barra lateral, que va a aparecer, y quiero que este arbusto de un dedo del pie que Bush hizo es el empuje de arbusto tratando de pagar. Entonces aquí, vamos a usar la acción de empuje, y vamos a probarlo. Voy a hacer de este una pantalla de inicio sólo por la facilidad de este ejercicio no quiero estar de pie. Pase por todas las pantallas antes, así que vamos a probarlo. De acuerdo, así que se ve un poco raro. A lo mejor necesitamos dedo del pie. Hazlo fomente. Hagámoslo un 0.15 segundos o 0.1 segundos sechados de nuevo. Y quiero ver cómo se ve. Es muy rápido. Ahora, hagámoslo 0.2 segundos y veamos cómo se ve. De acuerdo, entonces se ve mejor. Ahora, veamos si alguna otra interacción se ve mejor en ella. Entonces voy a usar easy out. Y además, voy a usar slide. Correcto. Entonces a ver si los derechos de deslizamiento funcionan mejor o el arbusto. Correcto. De acuerdo, así que bloqueemos esta pantalla y ah, haga clic en esta interacción y debería ser Bush. ¿ Verdad? Y usemos esto está adentro afuera, y voy a aumentarlo. 2.3 segundos. De acuerdo, veamos cómo ahora parece que se ve genial. De acuerdo, ahora, esto es bueno. Seleccionemos este. De acuerdo, entonces estoy tratando de copiar esta interacción, pero creo que no hay manera. Entonces voy a usar la misma configuración. Bush, correcto. Está fuera y 0.3 segundos. Sí, un empujón. Correcto. Nota fácil. 12 segundos. De acuerdo, Ahora vamos a vincular este, uh, límite. Sólo éste. Voy a volver a la creación de prototipos, y no lo vincularemos de pie esta primera clave de pantalla de inicio de sesión. Entonces quiero que lo arbustemos bien. ¿ O debería estar disolviéndolo? Creo que debería disolverlo porque parece más natural. Por lo que quería estar saliendo del camino y disolviéndolo, dedo del pie esta pantalla de inicio de sesión, y voy a usar este 0.4 segundos para disolver. De acuerdo, Ahora, ya terminé con esto, así que voy a ir a éste. Ups. Por lo que he seleccionado este así parece de nuevo. Y luego está éste, y creo que no he usado ninguno. Um, es un límite. Yo quiero el límite o aquí, que va a ser éste. Y quiero que se vuelva a vincular dedo del pie. Esta pantalla igual. De acuerdo, ahora vamos a probar nuestro todo de los, así que ver que todo está funcionando bien. Entonces voy a empezar con esta pantalla que está probada. De acuerdo, Así que sólo estaban trabajando. Y vamos sólo a las otras pocas cosas como ley Oro. Está bien, así que se ve genial. Cerrar sesión se ve genial. Ahora hay una cosa más. Yo quería volver a esta pantalla, así que quiero activar algo por aquí. Como tal vez he advertido a toda esta pantalla para volver a ésta. De acuerdo, así que quiero que Bush se quede y el mismo escenario. A ver cómo se ve. Entonces voy a mamar esto. ¿ Alguno de vosotros prestes paso a alguna parte? Prestes Stephanie. De acuerdo, entonces ahora se ve más natural. De acuerdo, así que esto se hace lado, pero se hace. No, tenemos estas actividades. De acuerdo, entonces esta barra inferior, la barra de puñaladas o la barra de taburetes, queremos unirlos a todos. De acuerdo, así que hagámoslo este. Esto es muy sencillo. Nosotros vamos a vincular esto a esto y se va de pie. Creo que debería disolverlo. Esto se va a disolver dentro de estos 0.2 segundos, que realmente me encanta. Este valor es realmente amor. Es de acuerdo a nuestra psicología humana. De acuerdo, así que esto es bueno. Empecemos a usar este. De acuerdo, entonces en esta pantalla, quiero que sea ésta para ir por aquí, y quiero preservar este puesto escolar. De acuerdo, entonces la posición del pergamino es que ahora mismo es la escuela a la cima, y va a preservar eso. Siempre es empezar con la tienda, bebé. De acuerdo, así que lo quiero. Toby deslizándose a la izquierda. Por lo que esta pantalla este tablero se va a deslizar a la izquierda, y esta actividad con actividades pantalla entrará. De acuerdo, así que quería Toby point tres segundos temporada fuera, bien, bien, igual manera para el fregadero. Entonces vamos una pantalla a la vez para el fregadero. Yo voy a hacer lo mismo. Esto se va a deslizar a la izquierda y está dentro y conserva el puesto escolar. Y para esta pantalla. Ahora, esta pantalla está hecha. han hecho todos los enlaces. Este tablero ya está vinculado a éste para que no lo necesitemos. Toby, ya está activo. Por lo que queremos sólo los dos últimos. Que es este o este de un dedo construyendo Tok. Entonces ahora nos vamos de nuevo con el dedo. Vincularlo como esta luz izquierda. De acuerdo, así que esto se llama Ok, entonces queremos que lo haga. Este se va a deslizar a la izquierda porque está yendo las palabras del pie hacia adelante hacia éste. De acuerdo, pero ahora nosotros Si volvemos al tablero, la dirección es diferente. De acuerdo, entonces si vuelvo al tablero, debería deslizarse. ¿ Verdad? Por lo que debería ir así, y el tablero volverá. OK, así que vamos a probarlo al mar. ¿ Qué? Es decir, así que este es el puesto escolar. Por lo que está en la parte superior. Esto va a ser así. OK, entonces ahora lo que necesito o aquí es que quería ser No conserve la ubicación de pergamino. Recordar. Se me ve difícil o diferente. A lo mejor. Creo que deberíamos usarlo así. De verdad no me gusta la escolarización una y otra vez de todos modos, así que esto se va a deslizar a la izquierda de todos modos, así que Ok, así que estábamos tratando de usar el dedo del pie. De acuerdo, entonces estas dos pantallas están hechas. Estas dos interacciones, completan todas las interacciones en estas pantallas. Ahora vamos a pasar a esto una vez o tablero va a ser de vuelta diapositiva. Correcto. De acuerdo, Entonces esto se va a deslizar, ¿verdad? Está bien. Eso anotó también este. Este también va del dedo del pie esta pantalla, y también se va a deslizar. Correcto. De acuerdo, así que esto es bueno. De acuerdo, así que también necesito vincular esto, pero debajo de esta pantalla, que va del dedo del pie No, creo que deberíamos usar disolver. Está bien. No queremos deslizarnos porque en el diseño de interacción, no vamos a ir del pie a ninguna otra pantalla. Es la misma pantalla. Queremos mostrar el mensaje sobre la pantalla, así que lo voy a disolver. De acuerdo, entonces vamos a inyectar esto. Ahora. Creo que toda nuestra pantalla tiene prototipo de frijol. Y vamos a objetar este y voy a usar en la pantalla de inicio para éste, y voy a probarlo. De acuerdo, entonces voy a probar esta pantalla. Ocultemos todo lo demás, y voy a probar esto en la pantalla para tu ventana. Siguiente click acorralado. Siguiente. Acude al apuntador. Está bien, inscríbete. Se ve bien. Voy a ir a iniciar sesión y justo esta zona. OK, entonces esto se ve muy bien el registro ahora voy a ir a la pantalla. El menú de la barra lateral. Está bien. Búsquedas, trabajando. Genial que se ve genial. Goto esta actividades. Y si voy a hundirme y volver a las actividades se está conservando de nuevo en la zona superior. Realmente no me gusta cuando me está mostrando la bola de pergamino. Es Se ve realmente espantoso. Pero creo que están trabajando en un día día por día y noche por noche, así que lo mejorarán. Entonces creo que todas nuestras pantallas de trabajar prueba de Knoller esta luce genial. De acuerdo, para que veas cómo esto se está difuminando. Realmente fresco y bonito hecho. Vamos a cerrar sesión y volvemos a nuestra pantalla de inicio de sesión. Por lo que ahora puedes ver cómo creamos este prototipo y en todo este proceso, intenta enlazar fuera de pantalla por pantalla. Para que no te olvides de vincular tu interacción alguna. Espero que hayan disfrutado de esta lección en los próximos s, y vamos a ver cómo se puede grabar el video de este prototipo y cómo se puede compartir este prototipo con otros usuarios para probarlo o comandarlo. Entonces pasemos a la siguiente lección. 59. Comparte prototipos con los demás: el propósito principal fuera de cualquier prototipo es que lo puedas compartir con otros. Se puede discutir qué podemos mejorarlo en él y otros pueden comentarlo. Por lo que esto puede ser posible publicando sobre esto compartiendo nuestro prototipo con nuestros otros miembros del equipo . Y para eso, tenemos este ícono por aquí compartir. Y si hace clic en él, hay tres opciones publicadas prototipo, administrar, administrar, publicar enlaces y especificaciones de diseño publicadas. Vamos a hablar de especificaciones de diseño, electrones que son para básicamente para desarrolladores y tal vez otros Los otros miembros del equipo que realmente necesitan sus especificaciones de diseño. Y nos vamos de pie ahora mismo. Haga clic en este publicar prototipo. Ahora le voy a nombrar X'd. Entonces aquí está el título. Voy a llamarlo X'd Gauss. Asignación Algo así. Y voy dedo del pie desmarcar esta pantalla completa abierta mostrar manos de deporte duro. De acuerdo, Entonces me va a mostrar que qué áreas son interactivas muchos comandos de otro tipo, Comandante. Entonces voy a crear enlace público. Se va del dedo del pie Subirlo. Tomará algún tiempo subiéndolo. De acuerdo, Ahora se puede ver que se ha subido, y puedo abiertamente en copia convincente y cable de cama, y puedo incrustarlo en cualquier otra página o algo así. Entonces voy dedo del pie enlace abierto. Puedo copiar el link y email toe otros integrantes del equipo o cualquiera con quien quiera compartir este prototipo. Ahora mismo estoy trabajada. Abre este enlace. De acuerdo, Ahora puedes ver que el prototipo ha estado abierto en mi navegador, y si hago clic en él, puedes ver que está funcionando. ¿ De acuerdo? Por lo que puedo hacer click en él, puedo trabajar en ello. Y además, puedo dar click en este show. Comando dijo que me va a mostrar el comentario. También puedo hacer algunos comentarios como este. Uh, el tablero se ve genial. Excavar. Entonces voy dedo del pie prensa someter. Y además, si hago clic en algunas otras cosas como, tal vez este color parezca bonito. Y si trato de dar click en él Pinto Art Board, puedo dar click en cualquier área fuera del tablero de arte donde quiera. Por ejemplo, si quiero esto So Okay, así que ahora puedes ver a este asesino parece agradable. Está apegado a esta zona, así que estoy hablando de decolorido para que veas cómo Esto es realmente genial. Puedes mostrarle a los miembros de tu equipo que pueden discutir de diseño que esto se ve bien . Esto se ve mal. Algo así. OK, así se puede ver que este es un prototipo que funciona. Puedes compartirlo con cualquiera. Va a funcionar en el navegador, y eso es todo. También puedes pasar a pantalla completa si quieres. Yo sólo tengo mejor escape y se puede ver Aquí hay un enlace hecho con Adobe X T y esta es la fecha y hora y todo. Y creo que así es como puedes compartirlo con los miembros de tu equipo. Y ahora, si quieres administrar tus enlaces, hay otra dirección publicar enlaces. Se va dedo del pie. Acude a todos los enlaces que hayas compartido. Está bien, está bien. Ahora se puede ver que hay dos, que en realidad es el desayuno. Invertir menos. Y esta es la asignación de clase. Por lo que ahora mismo me voy a creer en este enlace compartido y sólo mantener este. De acuerdo, así que también voy a compartir este enlace con ustedes chicos para que puedan probarlo y cuidarse a sí mismos. Espero que hayan disfrutado de esta lección. Y lo harás de verdad, me encanta Ah, mejorando tu prototipo y puedes compartirlo con los demás. Podrás empezar desde otros, miembros del equipo o tu familia, tus amigos o lo que sea. De acuerdo, entonces todo se trata de compartir tu prototipo. Pasemos a la siguiente lección. 60. Grabación de prototipos en Mac: Está bien. Ahora, en esta lección, les voy a mostrar la muy bonita y fresca característica off grabar su video prototipo en la macro. Ahora mismo, estoy en mi sistema operativo Mac. Y si ves si te voy a dar click en este. Entonces voy a tocar mi prototipo y puedes ver aquí está mi prototipo y hay un pequeño botón de grabación en la parte superior. No, Si hago clic en este registro, se va a empezar a grabar mi prototipo. Y si trato de interactuar con él va a registrar todas las interacciones. Entonces voy a grabar todas las interacciones así. Y si paso a otras pantallas, va a grabar todo eso. Está bien. Y si voy por aquí así, cierre sesión, cierre sesión, y ahora se puede ver que le ha dado todo. Voy a presionar esta otra vez, y va a guardar esto en mi nube creativa llena si quiero O en el formato MP cuatro. OK, así que voy a guardarlo así. Y ahora voy a abrir este archivo en un plan de tiempo rápido. ¿ De acuerdo? Ahora puedes ver su Ah, video. Creo que este lo crearon hoy a las 11. 29 AM y me voy a abrir el dedo en tiempo rápido, jugador. Es un poco grande, así que voy a hacerlo corto así. De acuerdo, Ahora ya puedes ver si lo toco, se va a tocar toda la interacción así. Ahora se puede ver que se ve realmente cool, transición muy suave y todo y grabado a una resolución muy agradable porque es Mac cinco pantalla. OK, entonces esta es la característica fuera de un Mac auto B x d Mac pregunta donde puedes grabar tus pantallas ah . Y si no estás usando Mac, te lo digas porque la versión de Windows se está manteniendo al día. Entonces hasta el momento en que veas este curso, o tal vez en los próximos meses, tal vez su arrendamiento esta característica en el dedo del sistema operativo Windows 10. OK, entonces ah, eso se trata de grabar tu prototipo en el sistema operativo Mac. Si tienes alguna pregunta que hacerme, pasemos a la siguiente Escuchar 61. Diseño de herramienta de inspeccionar en la herramienta: Ahora en este video, te voy a mostrar una característica muy bonita que ahora mismo está en beta Better, que es de Adobe X'd. Y ese nombre de función está diseñado. Inspeccionar. De acuerdo, Entonces, Inspector, que básicamente te va a mostrar, te mostraré los colores y todos los diferentes espacios entre diferentes elementos para tus desarrolladores. Entonces si quieres Oh, entrega tu diseño a tus desarrolladores y estás pensando en usar herramientas. Herramientas de terceros. Primero debes ver que hay incorporado dentro y obedecer extra, que se llama publicar. Inspeccionar. De acuerdo, así que déjame ver si está bien, Así que las especificaciones de diseño. Por lo que lo llaman especificaciones de diseño. Es en este momento en versión beta. Están tratando de mejorarlo una y otra vez y día a día. Entonces Ah, ahora mismo, cuáles son las características que les voy a mostrar. Así que solo abre tu diseño así, y te vas a dar click en estas especificaciones de diseño y puedes ver Ya lo he compartido en mi sitio web ah, adobe X t especificaciones. Y ahora se puede ver aquí dice viñedo basado en IOS. Por lo que realmente necesitamos que las unidades estén en nuestro EU, que son puntos. Entonces me voy de pie a abrir ese eslabón. De acuerdo, Ahora puedes ver esto. Se ha abierto este enlace y lo he nombrado creado en clase. Entonces si haces clic en el cursor sobre cualquiera fuera de la pantalla también está mostrando la gripe para que esa pantalla se vaya del dedo del pie esta o ésta o ésta. Entonces también me está mostrando el flujo fuera de todas las pantallas, diferentes pantallas Y además, si haces click en alguna de ellas, va a llevar algún tiempo a Lourdes y puedes ver que me está mostrando todos los colores. También puedo cambiar los valores de color para ejercer decibel rgb, alfa y el I s L. A que es matiz, saturación, ligereza y Alfa que se utiliza mayormente en de acuerdo creo y es diferente de solo ser normalmente. Entonces estos son los cordones que se utilizan en los sitios web RGB a o en realidad también se puede ver esto mostrándome todos los estilos de director en la parte inferior. Se puede ver también se puede cambiar el tamaño de dos píxeles o puntos o DP DP es normalmente para android. De acuerdo, Así que ahora mismo es para nuestro U S. Air. Esto es un iris. Abso los tamaños están en puntos. De acuerdo, entonces volvamos atrás y pinchemos en cualquier otra ventana. Si hago click en este y ahora vamos a venir de pie las distancias entre diferentes elementos. Entonces si hago click en este, puedes decir que me está mostrando que tiene 352 puntos de ancho y 62 puntos de altura. También, me está mostrando a la derecha la aparición de redondez de ocho puntos desde todas las esquinas . Opacidad, 100% calorías. Sombra blanca es cero puntos en el eje X y un punto. Es vertical en la parte inferior. Un punto es la sangre. Está bien. También saber si hago click en este, me está mostrando las distancias del lado izquierdo. Es de 18 puntos dentro de este rectángulo blanco. Entonces, ¿así es como le das las especificaciones a tus desarrolladores? Hay herramientas de terceros que puedes integrar con Toby extra perras siempre sostenidas y Zeppelin, que te voy a mostrar en la última sección donde vamos a utilizar tanto Zeppelin alguna vez llamado toe show ingeniería los cordones y el diseño especificaciones y todo en esas oficinas. Espero que hayan disfrutado de esta lección, y si tienen alguna pregunta que hacerme, pasemos a la siguiente lección. 62. ¿Por qué exportar en 1x 2x 3x?: Está bien. Ahora, en esta lección, voy a hablar de los diferentes tamaños de exportación, que necesitamos para diferentes iPhone iPhones, como iPhone X iPhone six plus iPhone, seis pantallas y iPhone, cinco pantallas. De acuerdo, entonces diseño de sedes en Adobe X'd El diseño que estás haciendo siempre está en una X. Vale, Así que estás diseñando en esta Resolución uno X. Así que si necesitamos más resolución o necesitamos los botones e iconos para otras pantallas iPhone six plus y el iPhone X y el iPhone seis, necesitamos el doble del tamaño de ese recurso. Está bien, te voy a mostrar en unos segundos. Sólo asegúrate de eso, ya sabes, y entiende estos términos fuera. Una al lado de obras y tres X. Ahora puedes ver si miramos a estas pantallas. Pantalla iPhone cinco. puede ver que es de 6 40 por 11 36 píxeles que el iPhone. Seis. Es éste 7 50 por 1334. Esta es la altura, y esta es la palabra. Y no, si saltas dedo del pie iPhone seis plus, esto básicamente es ah, resolución. Y normalmente no diseñamos en esto porque es bajada escala por iPhone six a six plus Y para iPhone X, Puedes ver este es el tamaño del retrato. Por lo que estos son diferentes tamaños y se puede ver en estas tres pantallas. Por aquí necesitamos diferente resolución fuera de las imágenes porque si diseñamos usando esta X como 6 40 11 36 o algo por aquí. iPhone 3 20 por 40. El Gran Bretaña que tenemos será muy pequeño porque tenemos menos píxeles. Número de píxeles. Ahora tenemos más pixeles. Entonces en este gran número de píxeles, si tenemos, como 50 pixeles, nos escondemos de un botón, se verá muy pequeño en este iPhone X. Así que necesitamos extraer. Nuestro recurso está en tres tamaños diferentes una obra XTO y tres X para que podamos diseñar y atender a todos. Hacer estas diferentes pantallas. Entonces puedes ver aquí tenemos todos los diferentes tamaños que se muestran por aquí, eso que uno usa yo de nuestros próximos dos X y tres X. Ahora voy a cambiar a por la tienda porque a veces necesitas dedo del pie entre para la compra y más de 60 y más de 64 imágenes diferentes y para diferentes fondos Ahora, si quieres diseñar un fondo que necesitas, siempre debes diseñar un fondo en alta resolución. De acuerdo, Entonces si te estás diseñando, deberías estar diseñando algo en este iPhone six plus size porque necesitamos este fondo y lo escalaremos en diferentes dispositivos. De acuerdo, así que también puedes ver este iPhone seis, pero necesitamos un fondo más grande. Entonces si estás preparando tu fondo, tu imagen de fondo en el iPhone seis, necesitas dedo del pie usa el tamaño seis más, y necesitas crear un fondo más grande. Por ejemplo, Si solo creo un fondo por aquí, vamos a crear un fondo. De acuerdo, entonces ahora voy a usar un codicioso int overlay en esto en la tienda de fotos. Y usemos algo como esto. De acuerdo, Entonces, por ejemplo, tengo esto de vuelta. No, no, voy a exportarlo. Y ah, este es el tamaño al que estoy exportando. Y estoy usando PNG 24 voy a guardar esto se va a exportar. Mal préstamo para la tienda. De acuerdo, Ahora voy a cambiar a mi X T y voy a abrir el iPhone seis plus. De acuerdo, Así que he abierto este. Hagámoslo 100%. Y no, quiero importar ese fondo a este. Entonces voy a ir a mi exportación de escritorio y solo importar esto. Ahora ya puedes ver que este es el fondo, ¿de acuerdo? Y es muy grande. Entonces necesitamos algo como este fin de semana. Ajusta el cambio de talla y justo el tamaño así. Entonces es más fácil para nosotros si tenemos un trasfondo más grande. Tenemos un fondo de diseño más grande. Ahora puedes ver aquí tenemos esto, um 4 14 por salmón, 36 Así que si tratamos de diseñar el tamaño real fuera de dos X tamaño porque en Adobe Xtendría una cosa en mente, siempre se va a diseñar en una X. Entonces en este momento, este tamaño no es básicamente dos X o tres X. Así que si cambio a este y veo el tamaño que waas, usemos esta talla 10 80 para 1920. De acuerdo, entonces voy a cambiar el tamaño. Uh, vert va a ser 9 10 80 y esto va a ser 1920. Entonces ahora este es en realidad el tamaño do X. ¿ De acuerdo? Creo tres x Así que si arrastro mi fondo por aquí ahora, puede ver que está bien. Entonces es en este momento este tamaño de tres x y las células grandes reales las cuales fueron las tres guerras X. Este 12 24 por 2200 y ocho. Entonces si realmente quieres el tamaño real fuera de tres X, en realidad es este y el downscale size esta 1 10 ity por 1920. Entonces necesitas dedo del pie. Ten en cuenta todas estas cosas. No. Si tratamos de crear un tablero de arte fuera del iPhone X, puedes ver que es en Vanek. Por lo que se ve muy pequeño. No, si tratamos de hacerlo tres x, debería ser algo así como este 11 25. Entonces voy a usar la altura. Esa tasa es de 11. 25. Por lo que es 11. 25 y la altura va a ser 2436. De acuerdo, Ahora puedes ver este es el real tres X cerdos tamaño enfermo fuera de tu iPhone X. Y si volvemos, esto es morir para siguiente tamaño en una X así que Ah, adobe axity. Siempre es vicio diseñar usando Benex nunca trató de diseñar en una resolución más grande porque tendrá algunos problemas. Siempre trata de diseñar en una X, pero cuando importas tus gráficos a Adobe X'd siempre los diseñó en tres X el tamaño más grande que tienes para tus fondos porque se exportará a tres tamaños diferentes más adelante cuando entregárselo a tus desarrolladores. Entonces este es el consejo que quería darles chicos. Una X es en realidad el tamaño real. Está en el tamaño real del píxel y dos extra dobles y tres X es triple los lados. Entonces algo como esto. Por lo que tenemos tres píxeles en lugar de uno en el iPhone X y el iPhone 67 Plus, tenemos peleando tres X sí, tres píxeles en DA en el iPhone seis. Tenemos dos X, lo que significa dos píxeles por cada uno píxeles en lugar de un píxel. Entonces si tenemos iPhone sencillo iPhone el 1er 1 tendremos solo un pixels. Y si cambiamos al iPhone cinco, entonces tenemos la doble resolución. Tenemos más espacio, y así nuestro diseño se verá muy pequeño. Por lo que vamos a diseñar para cuellos y podemos actualizar nuestra talla de exportaciones, puntera estas dos tallas. Esto va a tener más sentido en el futuro porque realmente vamos a exportar nuestros aburridos gráficos y arte. De acuerdo, así que solo quería asegurarme de que sacaras la idea de esta. Siguiente dos x y tres X Aquí tenemos la pantalla más grande más píxeles. Aquí tenemos un poco menos tamaño de pantalla, un poco menos píxeles. Y aquí tenemos los más pequeños son los píxeles reales traducidos al diseño real. De acuerdo, entonces si diseñamos en una X, se mostrará en el iPhone. Igual que nuestro diseño. Esta es la dos x más grande. Estas son las tres x más grandes. Entonces vamos a exportar en remolque, todos estos tres tamaños en la siguiente lección. 63. Ejemplo de 1x 2x 3x: ahora en esta lección, les voy a dar el ejemplo perfecto dedo del pie, entender una x dos x y tres X y su relación. Y lo que es esta gran densidad celular y estos aburridos es y estos dos x tres x y uno x problema. OK, así que desde hace mucho tiempo no pude entenderlo. Y ahora me acaban de entender perfectamente. Pero quiero que lo entiendas perfectamente también. De acuerdo, entonces aquí se puede ver esta es una siguiente y el tamaño físico fuera de la plaza. Este es un cuadrado perfecto en estos tres ejemplos y éste es el mismo. Entonces solo asuma que es un área de píxel de una pulgada. OK, entonces esto es de una pulgada una pulgada una pulgada una pulgada. Ahora, en el iPhone cuatro o en los dispositivos que son uno X dispositivos más antiguos, va a tener 10 píxeles por 10 píxeles. Entonces, ¿cuál es una X? Ciertas cajas pequeñas por aquí y paran fotos por aquí por lo que habla mal será una caja un poco más grande para ocupar el mismo espacio ahora en los dispositivos retina o dos dispositivos X donde la resolución es muy alta. El mismo área está respaldado con más píxeles o más tales puertas. Por lo que cada puerta cuadrada se puede ver. No, tenemos 20 por 20. Ahora tenemos el doble del tamaño fuera de estas puertas. Aquí. Teníamos 10 pixeles, y aquí tenemos 20 pixeles en el mismo espacio Ahora en los tres x los últimos dispositivos que son iPhone siete más ocho más seis plus y iPhone X. Aquí tenemos más resolución o más pixeles con más detalle en un pequeño espacio fuera de esa misma pulgada. De acuerdo, entonces tenemos ahora 30 pequeños y pequeños y 90 tang endorse. Sé lo que eso significa es que estamos viendo a Mawr Chris, gastamos gráficos más coloridos en estos dispositivos. OK, entonces y necesitas tener estas cosas thes en mente. Ya puedes ver aquí han demostrado que necesitas deporte todas las demás de alta resolución tienes remolque Espera dos X y tres X y von X, tu ah, todas las imágenes para diferentes dispositivos. También puedes usar uno siguiente. Si quieres admitir dispositivos más antiguos, si no quieres dar soporte y puedes hablar con tus desarrolladores al respecto. También, aquí volvemos a ver que pixel a pixel Genial. Por lo que se basa en el diseño se basa en la tasa de ocho puntos estimulados. Por lo que estos son algunos fuera de los lineamientos sobre cuáles son las imágenes, tamaños y resolución. Y lo que es este excéntricos extra. Espero que hayan sido destruidos Este concepto ahora, y , um, si tienen alguna pregunta que hacerme, pasemos a la siguiente lección. 64. Exportar tableros de trabajo para crear maquetas: De acuerdo, Ahora, en esta lección, voy a mostrar cómo explorar diferentes imágenes. Y vamos a entender más sobre una siguiente dos X y tres X. De acuerdo, Entonces si seleccionas alguna de tu tablero de arte y vas a tu barra de menús, tienes diferentes opciones de exportación, mal seleccionadas y todas las tablas de arte. Puedes exportar todos los tableros de arte o puedes exportar solo un tablero de arte seleccionado. Y puedes insignia de exportación. Voy a mostrar esta exportación de parches en la siguiente lección. momento nos vamos de pie, selecciona esta y ahora puedes ver aquí hay diferentes opciones para tu exportación. PNG SPD pdf jpg Estaremos usando PNG o tal vez SPD no estos puntera, tal vez para fondos. Podríamos estar usando esta imagen JPEG. Vale, Ahora, de todas estas opciones, vamos a seleccionar nuestro EU porque diseñamos para IOS y era la pantalla del iPhone seis y nunca cambias esto porque estás, ah, diseña tu diseño por defecto. Pero los rituales iPhone 67 o six plus o X siempre será una x en tu OBE extra. De acuerdo, a menos que hayas cambiado la resolución Ahora vamos a seleccionar click Ok. Ahora, también, puedes cambiar la carpeta. No vamos a exportar. Yo soy. He seleccionado ya fuera de carpeta por aquí. Y ahora voy a dar click en Exportar. Y veamos qué nos muestra. Ahora puedes ver aquí está mi carpeta de exportación. Y si abro esta carpeta de exportación, puedes ver aquí tenemos tres en diferentes tamaños de fondo dos x tres x y esta es la real. Entonces si abrí este, se puede ver esto es un grande más pequeño y hacer X será un poco más grande. Se puede ver la diferencia de tamaño en tres x será un poco más grande. Pero ahora mismo no lo está mostrando en 100%. Este es el tamaño real de tres x. Ahora puedes ver esto es diferente para todas estas pantallas diferentes. Y ahora, si en photoshop, si intentas dedo del pie, crea un simulacro de este diseño, déjame mostrarte. ¿ De acuerdo? Entonces si tenemos este simulacro ahora mismo, este este este archivo, voy a compartir este con ustedes, así que voy a abrir para la tienda. ¿ De acuerdo? Ahora, puedes ver esto está abierto para la tienda y yo tengo uno supremo, y creo que es eso Me parece así. Ver el tamaño fuera de este. De acuerdo, entonces es la pantalla del iPhone seis. Y vamos a ver si probé dedo del pie usado. Ah, éste, uh, el siguiente. OK, entonces voy a usar este X y tratar de dejarlo por aquí. Ahora se puede ver que es más pequeño porque iPhone seis no es una salida es dos x Así sucesivamente. Ahora lo voy a hacer es que voy a arrastrar esta dos x a mi fototeca y ahora se puede ver que se ajusta a la pantalla. Voy porque nosotros este es iPhone seis es básicamente dos x Así que ahora tenemos este grito de dos x. Entonces está en forma y lo voy a guardar y ya puedes ver Déjame mostrarte. Esta es la versión actualizada. De acuerdo, Ahora, si ex extraes otras pantallas, déjame solo extraer extra esta, y lo voy a exportar por seleccionado, y lo voy a exportar a la misma carpeta y vamos a mover de pie esta carpeta y me voy otra vez. Agarra este dos x uno dos X y oops. Perdón. Tengo que abrir algo por aquí. De acuerdo, así que esta es la pantalla. Voy dedo del pie Agarra mi pantalla dos x y me voy dedo del pie. Ponlo por aquí. Guárdalo y se actualizará en este. De acuerdo, Ahora puedes ver cómo se ha actualizado. Ahora, si voy a esta pantalla de sed y si hago doble clic y borro otra pantalla por aquí ahora voy a exportar. Vamos a exportar. Um, esta pantalla, vamos a exportar esta pantalla. Este es el 3er 1 Voy a explorar seleccionado. Y yo voy a exportar lo mismo. Va a hacer lo mismo aquí. Este. Yo lo voy a arrastrar y soltar por aquí, y es gratis porque es resolución de iPhone seis. Ahora se puede ver así es como se ve. Y este es el cierre completo. Y se puede ver lo bien que se ve esto. Eso anotó pantalla completa. Y puedes ver ahora esto se ve realmente impresionante. que puedas crear tus diseños en adobe X t y puedes crear tus más policías como este en Adobe Photo Shop. Entonces si tienes estas dos herramientas, realmente puedes combinarlas sin esfuerzo y puedes crear mucho de grandes diseños como ese. Entonces así es como creé más taza fuera de mis pantallas. Déjame mostrarte. Creo que usé este. Ahí hay otro recurso. No lo he hecho. Yo usé este de ti. Cómetelo. Este, supongo. Abrámoslo para la tienda. Y se puede ver que hay diferentes marcas como estas. Entonces si selecciono alguna fuera de thes y uso, por ejemplo, este, puedo hacer lo mismo con esto. De acuerdo, Ahora voy a ver el tamaño de la imagen, si está bien, entonces creo que se va a estar tomando los tres impuestos especiales. O probemos este porque se ve más grande. Sí. De acuerdo, entonces se está tomando tres X porque el tamaño de la lona waas más cerca del 2000 algo 11 25 que es un tres muy duro. X iPhone X son impuestos especiales para iPhone. Entonces lo voy a cerrar y vas a ver que esta es la primera pantalla. Si me acerco, se puede ver cómo se ve realmente genial. También puedes cambiar anuncio y la pantalla por aquí. Déjame añadir otra pantalla como ésta. De acuerdo, así que voy a guardarlo rápidamente y dejarme mostrarles. Así es como se acerca ahora mismo. Todavía no lo es. Creo que está en 100%. Y si selecciono este verde, me va a mostrar otra pantalla. Usemos este tres X y lo voy a poner por aquí ahora. ¿ Por qué? Te estoy mostrando todo esto. Entonces tienes una buena idea fuera de estos Todas estas resoluciones tres x cuatro x y puedes fácilmente, uh, uh, mostrar a tus clientes tus diseños de una manera fresca como esta. De acuerdo, entonces espero que hayan entendido esta opción de exportación. Si desea exportar todos sus tableros de arte simultáneamente, puede exportar todos los tableros de arte. Y va a exportar todo nuestro consejo en tres resoluciones. Donde al lado para extender tres x. bien. Entonces si hago clic en este, voy a sustituir a los otros. Y ahora puedes ver que tengo todas mis tablas de arte por aquí. De acuerdo, Entonces así es como exportas todas tus tablas de arte, y voy a hablar de la exportación por lotes en la siguiente lección, así que luego te verán pronto. Y si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 65. Función de exportar lotes en Adobe XD: Ahora en esta lección, vamos a ver la exportación de insignias, que es la reciente característica muy nueva de Adobe X'd. Y es realmente útil. Entonces tus diseñadores, por ejemplo, quieren estos botones en diferentes tres resoluciones. Advirtieron este ícono I icono en tres resoluciones. ¿ Qué sigue? Dos x y tres X. También necesitan estos Ah! Ah, este logotipo de aquí en tres resoluciones. Además, estos dos botones Google inicia sesión con Google, inicia sesión con Facebook en tres resoluciones diferentes. Entonces, ¿cuál es la forma más rápida y fácil de hacer eso? Es muy sencillo en Adobe. En realidad, esta esta exportación por lotes es realmente impresionante Característica. Y si voy a este, Ok, entonces lo que tienes que hacer es seleccionar cualquiera de tu activo que quieras exportar y vas a ir a esto en panel de capas por aquí, y vas a marcar esta marca por aquí . Esto es por mala exportación. De acuerdo, así que también voy a seleccionar este fondo por aquí, y también lo he seleccionado como marca para la exportación por lotes. Y una cosa más que ajusté es mezquino este fondo con esta capa. ¿ De acuerdo? Y hay una forma más de que también puedas extraer este fondo en tres resoluciones diferentes . Y creo que va a hacer eso con esta exportación por lotes. También puedes hacer eso en para la tienda si quieres. Ah, y ah, Ahora en esta pantalla, todos solo lideramos estas dos cosas. De acuerdo, entonces, en esta pantalla, necesitamos este botón. Este es nuestro botón de inicio de sesión. Esto es lo que necesitamos para exportarlo. Embellecedor exportación. Entonces también necesitamos esta exportación de insignia de botón de Facebook. Y también voy a ligar este inicio de sesión con Google con Google. De acuerdo, así que todos estos botones también, solo necesito este este Si I I Puedo te aseguras de que también los nombres adecuadamente. Yo voy en algo así. Entonces tienen más sentido, ¿de acuerdo? Porque las estás exportando para tus desarrolladores, y esto debe ser un buen nombre para ello. Por lo que pueden fácilmente reconocerlo también, puede ver este es mi I. Llamo a, uh, habilitado algo como esto y me voy a comercializar para la exportación por lotes y luego en esta pantalla no necesito. De acuerdo, así que necesito esto. Pero esto es diferente. Entonces me voy marca del dedo del pie, éste. De acuerdo, entonces de esta manera, vas a marcar todos los iconos y todas las diferentes cosas que quieres exportar. Está bien. Por ejemplo, se puede ver este icono por aquí. Este es, uh, este Rike de Glenda en este Este ícono de aquí, este es el icono del círculo F. Por lo que x círculo círculo I on. Yo estoy con el mercado. Por lo que vas a marcar todos tus activos en tu presente en tu diseño, y vas a esperar todos los de tus desarrolladores. ¿ De acuerdo? También puedes usar este. Por ejemplo. Esto está deshabilitado. Y para cada off, estos iconos que vamos de pie tienen diferentes estados, por ejemplo. Por ejemplo, este panel se puede ver por aquí este dashboard Vamos en realidad tengo Esto es en realidad debería estar en un grupo. Entonces este es dashboard. De acuerdo, entonces lo voy a nombrar tablero y capaz. De acuerdo, así que esto va a ayudar mucho. Entonces me voy a exportar así y este va a ser nuestro panel de control no activar o desactivar o algo así. De acuerdo, Entonces vas a nombrar lo que quieras. Estoy presionando control, tecla de comando para seleccionar diferentes artículos y mercancía de controlador para tientas. Entonces esto va a ser desactivado el panel, algo así. Puedes hablar con tus desarrolladores sobre qué convención están usando, si están usando deshabilitado o algo más activo o no activo, algo que podrían tener otra cosa. Ahora te vas con el dedo del pie. Consulta esta marca para exportar y se van a exportar tres imágenes para elementos tanto habilitados como desactivados. Está bien. Y ustedes van a hacer lo mismo por estas actividades y hundirse. Y luego este botón, esta es nuestra valoración de botones. Ya está seleccionado, así que no necesitas dedo del pie. Seleccione eso. Y una vez que hayas seleccionado todos tus diferentes activos y quieres exportar por ejemplo este botón por aquí pero una tasación lo quiero exportar. Sepan que nuestro esto es Pero estoy discapacitado. No voy a exportar. Asegúrate de exportar ambos estados para estos botones habilitados y desactivados. De acuerdo, entonces vamos a ir de pie a esta exportación y vamos a seleccionar este distintivo y vamos a seleccionar nuestro nosotros una x exportación y eso es todo. Vamos a nuestra carpeta de exportación y puedes ver por aquí Esto es realmente genial. Entonces tenemos este botón, este botón para dos x tres x toda la carga para todos los tamaños diferentes Puedes ver que nos vamos de dedo Dáselos a nuestros desarrolladores y nos van a, sabes, realmente besar nuestras manos porque todos los activos ahí duro tienen todos los activos por allá vinieron Ahora puedes ver este es el dashboard diferentes iconos que exportamos Puedes ver este es el icono I todos los diferentes tamaños para todos estos íconos Tú ya tenemos todo lo que necesitamos toe dáselo a nuestros desarrolladores y es realmente, ya sabes, fácil. Ya he marcado Si quiero cambiar algo, puedo cambiar en este botón y puedo hacer clic en la exportación otra vez Exportación por lotes. Se va a actualizar toda mi clave de artículos ya exportados. Entonces esta es la mejor característica que creo en Adobe X'd, que, como han lanzado recientemente, espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección 66. Consulta en tiempo de tiempo de tu aplicación en Iphone: Está bien. Ahora, en esta lección, voy a contar del capital extra. En realidad promedio se puede vivir. Vista previa de tus APS usando la corrección de tu Mac con tu iPhone. Y esta es la app que tengo instalada. Se puede tocar en él. Y esta es la vista que vas a ver. Habrá tres pestañas en la parte inferior. Uno es extra. Documento uno es vista previa en vivo cuando es configuración. Ahora mismo, vamos a ir con este adelanto en vivo. Asegúrate de que tu teléfono esté conectado a través de esto. Debes estar por aquí. Se puede ver que no he actuado con el USB a mi Mac. Por lo que el segundo extremo va a ser con el Mac. De acuerdo, entonces ahora nos vamos de pie. Usa este botón de vista previa de la vida, y puedes ver que se va a Lourdes desde mi Mac. Entonces si miras tu mac, si miras tu Mac por aquí, puedes ver aquí es un pequeño icono fuera de la vida, tus pueblos mostrando esencia iPhone. De acuerdo, así debe ser cuando cuando te conectaste, va a mostrar algo como esto. Ahora te voy a mostrar que cómo puedes usar el mismo mapa por aquí. Voy a presionar el log in probándolo. puede ver que me está mostrando los deportes de corazón por aquí. Y voy a asegurarme de que sea fácilmente capaz y otros. usuario no le falta el grifo. India está bien, Así que el foco fuera de esta cámara es un poco Jaggi, así que no te preocupes por ello. ¿ De acuerdo? Por lo que puedes ver Aquí está la vista previa en vivo de esta app Por aquí. También podemos tener un menú abierto de esta barra lateral. Podemos alargar el oro. Y así es como puedes conectar tu iPhone o cualquier dispositivo IOS iPhone 678 o X con tu ah , Adobe X'd con tu Mac. Y también puedes hacerlo con tus pros de libros Mac. Puedes conectarlo con él y concurso en vivo. Tan solo tu prototipo. De acuerdo, Entonces esta es una característica que de verdad quiero que les digan chicos. Por lo que espero que hayan disfrutado de esta lección. Nos vemos pronto en la lección 67. Handala de Zeplin: ya sabes, en este Escucha, vamos a cubrir la parte de colaboración fuera de la colaboración de diseño significa que tus desarrolladores, necesitan colores cotizados. Necesitan las sombras y todo en el primero citado en el en las tipografías, la fuerza que has usado, quieren todo, cada detalle. ¿ Al igual que cuánto de la distancia entre estos dos elementos y todo? Divorcio Incluía ex. Por lo que es más fácil para ellos convertir tu diseño en remolque. Bien. Está bien. Entonces para ello, tenemos pocas herramientas a las que recientemente Adobe X'd ha actualizado y que es, si vas al archivo, puedes exportar tus diseños en tu Mac. Es solo un Mac solo cuentan con cada cancha y separan la primera que vamos del dedo del pie, cuida el Zeppelin y valora en. Entonces si no sabes nada del avión primero necesitas descargarlo. De acuerdo, Así que vamos a Zeppelin, hija. Puedes inscribirte en cuenta gratuita, que es gratis para una aplicación o una aplicación, y puedes acudir a este diseñador Simon o algo así. Ah, en la parte inferior, se puede ver que hay aplicación Mac y ventanas arriba, así que Ah, bien. abajo. Esto es para la función solo para Mac. Para que puedas descargar esta maqueta. Además, puedes descargar esto. Ah Magan windows app directamente. Si buscas en Google, puedes ir a esto. Sus seguidores como manzana en hija tú y puedes ver hay tres versiones para windows y dos versiones diferentes para windows y una para Mac. Asegúrate de crear una cuenta porque va a funcionar en la línea uno. El APP es gratuito para toda la vida, por lo que no es una gran cosa. Creo que es una característica muy dulce fuera de ellos que hayan dado esta opción libre, un proyecto activo y ah, lo vamos a probar gratis. De acuerdo, entonces una vez que descargues e instales su ab, será algo así. Está bien, este es Zeppelin. Yo he dirigido el Zeppelin, y no hay proyecto en este momento. De acuerdo, entonces vamos a crear un proyecto it Va a ser un Proyecto de U. S. S.porque diseñamos todo en puntos. Era una ah, nos iPhone 67 pantalla años. Entonces vamos a estar necesitando de coraza rápida y objetiva c. De acuerdo Ok, Entonces vamos a conseguir esto y crear. Y ha creado un proyecto para nosotros. OK, ahora voy a nombrar A GP lo hace porque es el nombre fuera de la aplicación real. De acuerdo, así que déjalo así. Ahora vamos a ir a una carta, Toby X'd y vamos a dedo seleccionar todos los tableros de arte. Entonces voy a seleccionar todos nuestros tableros de aquí antes de eso, Asegúrate de que lo estés. Tienes número tus pantallas así. Al igual que puedes ver u oír 030 a 0 para, porque va a ser un infierno de problema si intentas ordenarlos o intentas reorganizarlos en Zeppelin o cualquier otro para que les guste eso. De acuerdo, entonces estas herramientas no van a ayudar. Entonces lo que voy a hacer es que los voy a seleccionar a todos. Presiono turno y voy a exportar Toe Zeppelin. Se puede ver esto mostrándome éste. Este proyecto voy a importar. Nosotros diseñamos esa. Siguiente. Vamos a seleccionar uno siguiente, y ahora se puede ver es que ha empezado a subir mis pantallas toe adobe desde adobe XTC ver dedo del pie mi proyecto en Siplin. De acuerdo, así se puede acceder a estos archivos. ¿ Por qué hay aplicación en línea, que es Web app y también esta Puedes ver también puedes exportar tu boceto fuego. Eso será X t figura mente para la tienda cc. Por lo que estas son cuatro herramientas populares fuera de tu diseño y diseño de experiencia de usuario que va a llevar algún tiempo. Entonces me voy con el dedo del pie. Hazlo rápido, ¿de acuerdo? No, creo que todas mis pantallas y tableros de arte han sido subidas. Y déjame ver. Estamos ¿Todo bien? Entonces todo está aquí. 01 cargando y todo. Ahora podemos resolverlo. Por aquí está el nombre por nombre? No. puede ver que han sido subidos y ordenados por el nombre. De acuerdo, se puede ver esta es la densidad que he diseñado en la de al lado es el tipo fuera del proyecto. Este es el enlace de la aplicación Web. Puedes compartirlo con otros y puedes ver este proyecto en línea y estas otras integraciones. Si desea agregar a holgura, puede agregar a holgura, que es un software de comunicación. Y ah, aquí tenemos las escenas sobre Lee diseñado y guía guardias Styx. Esta es básicamente otra función fuera de ellas que puedes dibujar en tus pantallas si quieres. Ah, pero no vamos a hacer eso. Estas son las extensiones por aquí, que es básicamente la parte según. Entonces, ¿cuáles son las extensiones que están usando? Han hecho recientemente puedo decir que han externalizado sus cosas de programación. De acuerdo, para que veas necesitamos veloz por Zeppelin y atributos. Cuerdas thes. Ambos son para son sistemas operativos U S y cosas es el básicamente el lenguaje de acuerdo para Rus abs. OK, entonces ahora lo voy a cerrar. Si quieres explorar más extensiones o agregar más extensiones, puedes agregarlas. También puedes apagarlos. Se puede ir a la configuración más en como solía implementar objetivo. Si quieres algo, quieres cambiar pocas cosas. Puedes hacerlo por aquí. De acuerdo, así que estoy ahora mismo. El dueño. También puedo invitar a miembros de mi equipo aquí. Esta es la interfaz de ser fuera de mi proyecto. Y ahora si vas a Sy Guide, que vamos a crear en ah, unos segundos, que es el propósito principal de este Siplin. De acuerdo, entonces lo que vamos a hacer es que vamos a ir a este, y este es nuestro rubro principal. Por lo que vamos a crear nuestra guía de estilo. Por lo que sobre el escaneo de Cooder, nuestros desarrolladores pueden usar fácilmente obtener esto. Apuntó estos colores en los tamaños fuera de estos textos y los diferentes elementos diseñan elementos , y pueden usarlo rápidamente y simplemente usar una cancha de ella. , De acuerdo, Así que puedes ver aquí está el tamaño, y aquí está el color. De acuerdo, entonces si trato de agregar este color, puedes verlo. Yo hice este cree de carbón. También puedo agregar gree de carbón a continuación, por aquí. Algo así. De acuerdo, entonces esto va a ser así entonces. Este es mi textil. Voy a decir rumbo y cualquiera. Está bien. Entonces lo voy a agregar así. Presione enter, y se va a agregar a nuestra guía de estilo. Ahora vamos a seguir agregándolo a nuestro Steiger's. Vayamos a la siguiente pantalla y podemos hacer click en ésta. Se trata de otros activos. Si quieres descargar activos a granjeros PNG para los tres tamaños una obra extra y tres x Puedes hacerlo desde aquí. Está bien. Además, si hago doble clic, se puede ver que me está mostrando este color de sensación. Yo lo voy a añadir. Este es mi color primario. Por lo tanto, agrega primaria en Dyn. De acuerdo, Entonces la convención de nomenclatura utilizada mayormente en nuestro EU es que comienzan con una letra pequeña y el siguiente separador será mayúscula y el siguiente separador será capital. Tan oscura pizarra primaria. De acuerdo, para que puedas agregar cosas así. También puede agregar, por ejemplo, esta es mi alerta de enlace. Voy dedo del pie agregar esta luz, tal vez enlace y me voy dedo del pie Añádalo así también puedo agregar a los textiles. Ah, enlace azul algo así. De acuerdo, pasemos a la siguiente pantalla. Y creo que no tenemos nada ni cabeza. Y si quieres agregar, puedes agregar este texto blanco puedes ver también puedes copiar el contenido de diferentes elementos. Entonces si quiero el contenido fuera de esto pero y puedo copiarlo y lo puedo ritmo en mi pantalla o mi software según, donde estoy usando mis acordes y me quedo todo Ok, pasemos a la siguiente. ¿ De acuerdo? Entonces podemos seguir agregando estos colores, vale, vale, en todo el país, este es nuestro segundo regular. Vamos a sumar éste. Entonces si vamos a seguir añadiendo diferentes estilos Así que este es nuestro juicio de párrafos, así que vamos a agregarlo mal. Uh, gráfica siguiente. Algo así. Esto es que ya se ha reunido el color, que es este gris carbón. Ya lo hemos guardado. De acuerdo, ahora, una cosa más. Si vas a este rubro, que no hemos ahorrado iban de pie. Guárdelo como encabezado uno. Entonces me voy con el dedo del pie. Haz carta pequeña por aquí. Algo así. De acuerdo, entonces este es nuestro texto para texto para uso. Entonces voy a campo de texto o ah, forma. Mira, es un campo de texto siguiente. Entonces este es nuestro Así que este es nuestro campo de texto Clave extra. Entonces, sí. Entonces lo hemos hecho pero éste. Por lo que vas a seguir creando diferentes colores y todo por aquí. Esto está deshabilitado, pero en color. Y este es nuestro activo. Este es nuestro hacer dormir oscuro. Color primario. Entonces vamos a seguir sumando todo. Está bien. Por lo que también puedes agregar este. Ah, nunca barcaza a continuación. De acuerdo, así que puedes ver esto es muy fácil para tus desarrolladores obtener esto. Por lo que resguarda la idea. Una cosa más que puedes ver fácilmente tus desarrolladores son las distancias entre diferentes elementos. Entonces si haces clic en algo, puedes decir que me está mostrando la distancia desde la parte superior, esta barra primaria a la derecha, a la izquierda, y también desde la parte inferior. De acuerdo, Entonces si estoy rondando sobre cualquier otro elemento, puedes ver destruyéndome ese 21 punto. Por lo que mis desarrolladores, en realidad necesitan estas distancias en puntos. Por lo que será realmente fácil para ellos, ya sabes, diseñar y desarrollar esta estas pantallas. De acuerdo, entonces , no, vamos a volver al tablero y vamos a cambiar a nuestra guía de estilo. Ahora puedes ver que este es el cable que a nuestros desarrolladores realmente les va a encantar. Este es el cordón veloz que puedes ver en la parte superior. Paleta de colores Swift, todos los colores diferentes, clases para que los usen. Además, puedes ver este es nuestro cuarto libro tenemos todos diferentes encabezamientos y todas las formas diferentes Estilos que hemos usado a través de nuestro Si yo si me he perdido como ahí tenemos color amarillo y otros colores. Puedes agregarlas. Esta lección es para que entiendas cómo puedes usar esta herramienta para, ya sabes, explorar más opciones. Ahora puedes ver he hecho clic en la extensión y también podemos ver las extensiones Más extensiones fuera de Zeppelin. Entonces si estás trabajando en un sistema androide o cualquier otra cosa, quizás necesites algo como por aquí. Déjame mostrarte. De acuerdo, así se puede ver Aquí está el ejemplo. Ejemplo es básicamente para recursos android desde colores Textiles objetivo C y turno es para U S C ss Les dice un estilistas CSS, estos son para desarrollo Web. Reaccionar nativo Ah, y ah atribuyó cadenas en realidad realmente cuerdas. Yo no sé mucho al respecto, pero creo que es para mí ante el sistema iOS de Apple de algo así como ese nativo naufragado es de Facebook. Se puede crear un abs nativo para iPhone y android. Ambos sistemas ag Zamel examen aliado Zimmel. Creo que no sé mucho al respecto. Veo a Emmanuel, conocido que es para el desarrollo. De acuerdo, así que puedes agregar estos dos Zeppelin si quieres. Si estás trabajando en un proyecto ejecutando cualquier otro proyecto, puedes agregarlo y puedes cambiar de dedo del pie. Cámbialo todo. Aquí está bien, así que puedes desmarcarlo y puedes agregarlo. ¿ Qué cabeza? De acuerdo, así que todo esto se trata de Zeppelin y cómo podemos usar el dedo del pie de Zeppelin, aliviar el dolor fuera de nuestras fronteras y para desarrollar esta aplicación médica de aspecto impresionante y hermosa . Y espero que hayan disfrutado de esta lección sobre esto es el chico del estilo. Este es un tablero de instrumentos. Si quieres invitar a tus más usuarios o más fuera de tu equipo son tus aposentos. Eso se puede hacer porque les será más fácil ver las distancias y todos esos colores en las guías de estilo en el primero citado. De acuerdo, entonces todo esto se trata de Zeppelin. Creo que esta conferencia se está haciendo muy larga. Podrás explorar más si quieres. Puedes hacerme cualquier pregunta. Si tienes. Pasemos a la siguiente lección donde vamos a explorar la app ever cord. 68. Handoff de desarrolladores usando Avocode: Está bien. Ahora la segunda herramienta de la que voy a hablar es alguna vez código, que es similar a Zeppelin. Pero tiene algunas características más, y para mí, creo que está construido para desarrolladores de diseñadores. Perspectiva. No siento que sea muy fácil de usar, y hay pocas características que faltan en cada acorde. A lo mejor es tu propia opinión, o tal vez es mi propia opinión, pero creo que falta un poco, igual que un paso detrás de Sepp. De acuerdo, así que también puedes hacer lo mismo con cada cancha. Déjenme mostrarles su página web. Este es un disco y tengo un court dot com y puedes probarlo por 14 días. Este es un problema por aquí. A pesar de que su modelo de precios es muy barato, creo que 6.75 mensuales por cada miembro del equipo. De acuerdo, Entonces si soy un freelancer soltero, creo que este es un gran paquete para mí. Se puede utilizar durante 14 días. Prueba gratuita si quieres dedo del pie. Si lo pruebas. Si te gusta más que el Zeppelin, puedes seguir adelante y usar este. De acuerdo, así que te voy a mostrar. Ya compré su carruaje para mostrarles chicos en las anotaciones. Por lo que voy a ir a mi adobe x'd lo he descargado e instalarlo ya para que lo descargues e instalarlo. Si quieres seguirme a lo largo y lo puedes ver también puedes importar en O B X D archivos y un poco de Photoshopped disparado y boceto archivos. Entonces todos ellos, no luce fig Ma, creo que ahora mismo eso Zeppelin es justo, creo que uno o dos pasos por delante de ellos. Entonces voy a ir de pie a mi adobe X'd y voy a archivar y exportar cada cancha. De acuerdo, así que ten en cuenta que antes de instalar y grabar, esta opción no va a aparecer porque esta ah, esta app debe estar instalada en tu espalda. De acuerdo, entonces voy a dar click en cada cancha. Una buena característica de cada cancha es que no necesito seleccionar todos mis tableros de arte. Se va dedo del pie detectar toda mi pizarra del corazón y va del dedo del pie. Subirlas. ¿ Qué? Aquí. De acuerdo, entonces voy a crear nuevo proyecto. Entonces vamos a crear un proyecto por aquí. Crear nuevo proyecto. Este es un proyecto de iris. De acuerdo, entonces vamos a ponerle nombre. ¿ Son el proyecto de Estados Unidos algo así. Crear proyecto. De acuerdo, entonces ya comenzó a subir mis pantallas. De acuerdo, así ha terminado la subida, y para mí, es muy farsa, pero tienen diferentes propiedades de fregadero. Está bien, así que está bien, así que una cosa más me está mostrando del lado derecho. Puede demostrarlo me está mostrando quiénes son yo soy los dueños del proyecto o la gente con la que estoy compartiendo este proyecto. Además, hay una característica más que es la actividad, que no creo haber visto a Zeppelin en este momento, me muestra actividad fuera de cada usuario. Entonces si tengo ah, promedio algún archivo o algo así, se va a mostrar la actividad a otros usuarios que este usuario está agregando archivos en este usuario ha agregado una nueva versión del archivo. Entonces este acuerdo M, también se puede decir, manejando el control de versiones, que es un problema muy yo diría, muy difícil en la mayor parte del ábside. De acuerdo, así que esto es por nombre, así que voy a neo ordenados por nombre. Esto es lo mismo que Zeppelin. Además, puedes presionar el fregadero para hundir tus archivos si tienes algún cambio y también puedes compartir tu archivo compartido de archivos archivo extra. Por lo que en la parte superior, tienes tu cuenta configurando búsqueda invitar a personas a las que quieres invitar. Este es un proyecto, y este es el archivo x'd. Ahora mismo estoy abierto. Está bien. Entonces si trato de abrir algo, déjame hacer doble clic. Se va a descargar algunos datos de materia, así que básicamente descarga las imágenes y otros datos después de hacer doble clic en él. Está bien. A pesar de que creo que se siente rápido para mí, es solo una experiencia de usuario. Punto de pocos. De acuerdo, así que lo voy a arrastrar por aquí. No hay una cosa genial al respecto es que te va a mostrar todas las capas del lado derecho izquierdo . Entonces este es mi antecedente. Este es el logotipo de barra de superficie de fondo en herramientas GP. De acuerdo, Entonces si haces clic en el logo por aquí, te está mostrando el tamaño y las distancias todo por aquí. También puedes ver las reglas si quieres dibujar algunas líneas por aquí como esta y algunos márgenes o guías por aquí para tus desarrolladores puedes hacer eso. De acuerdo, Entonces , um, en el lado derecho, se puede ver que me está mostrando exportar esto en logo. De acuerdo, Entonces si se va, me está mostrando al exportador tres x dos X Pero no sé por qué me está dando el problema de resolución de exportación . No recomiendo que exporte sus activos usando este registro. Yo he visto que se pueden decir resultados muy horribles. No me gusta lo extraído. Se puede decir los activos que extraen. Son muy miserables en la muy baja calidad. No estoy seguro de por qué tienen esto. Ah, problema. De acuerdo, así que no estoy seguro de que me esté mostrando que el motor J peg B, como con la optimización está habilitado. Pero en realidad, puedes ahorrar en estos 44 minutos. Se puede ver en dónde aquí, pero no recomiendo usar este. De acuerdo, usa adobe x de bads export para exportar tus gráficos. De acuerdo, Así que ahora si haces click en esta capa, que es nuestro textil, puedes ver aquí hemos visto ver todos los estilos. Lo que es un muy al deporte es la gran capacidad de cuatro talla, pero es un Ford que han usado y Si vas a este, puedes ver todo el Gordo adelante. Que en Zeppelin no había tanta cancha disponible, pero en ah registro, he visto que genera cordones para mucho fuera de diferentes capas. De acuerdo, porque está importando todas las capas con ella. Entonces si hago clic en esto, se puede ver aquí la cancha para esto también el cuarto nombre, tamaño todo. Se está generando la cancha, aunque se necesita copiar el anotado mentalmente. De acuerdo, Así que tus desarrolladores necesitan exceso por aquí en que acabas de subir y van a copiarlo pegarlo en su aplicación para construir esto. Puedes ver Aquí está el texto si quieres copiar. Si quieres copiar el texto por aquí, puedes. Este es un acorde para generar este estilo y este es un texto. Entonces todo esto se trata de este lado. También me está mostrando sus ajustes de diseño. Es ese. A continuación, también puedes esconder y mostrar las guías de diseñadores si quieres. También puedes acercar. Alejar el zoom. Voy a alejarme ahora mismo. Y hay una característica más Estamos aquí a la derecha. Se puede ver. De acuerdo, así que aquí en el estilo, hay una cosa más que quiero mostrarte. Si haces click en estas opciones, puedes ver que hay otras opciones fuera de diferentes otros idiomas ah. Al igual que android como ccs estilo reaccionar, reaccionar nativo. Entonces si hago clic en reaccionar nativo, se puede ver que me está mostrando el código para reaccionar. Nativo. Entonces esto es realmente genial. Creo que tiene más opciones por aquí, y es más fácil cambiar entre diferentes estilos de cita. De acuerdo, así que esta es Ana, una cosa más es que si tengo esta, Ok, entonces si voy a esto, déjame mostrarte. Entonces si tengo este texto por aquí y se puede ver aquí es el asesino. Está bien. Por lo que puedo agregar este color como variable y lo voy a nombrar Gray. Gran impuesto. Igual que agregamos ahí. Pero va a estar en la variable por aquí, así que puedes ver aquí Tenemos una variable. Y si hago clic en él y agrego esto, me está mostrando Copiar, variable, crear, extricar. Por lo que también es gran extra dondequiera que se use el mismo color en toda la aplicación. Se va a mostrar ser esta variable. Por lo que estas variables son justo como estilo, colores guía o colores globales para siempre corte. Es solo, puede decir un flujo de trabajo un poco diferente de ah Siplin, pero creo que están llegando. De acuerdo, para que puedas ver puedes agregar todos tus colores así. Entonces si voy a otra pantalla, tal vez como ésta, Vale, entonces, no, estoy en la pantalla. De acuerdo, Entonces si agrego este, este es mi belleza de colores primarios y algo así. Entonces voy a crear una variable. Ahora puedes ver que tengo dos variables de los dedos de los pies por aquí, y OK, así que puedes generar la cancha desde aquí. Creo que si hace clic en esto, se puede ver se puede ver todo el cordón fuera de estas variables. Entonces si sigues agregando todos los colores por aquí como este, voy a llamarlo Link blue. Está bien. Entonces puedes seguir añadiendo diferentes colores como este es, um, campo de texto, ves, así que voy a seguir añadiendo variables por aquí, Y si ves u oyes ya tengo cuatro variables, y puedo crear lo bueno para todas estas variables. Entonces esto es casi lo mismo. me gusta mucho. Su aplicación está mostrando todas las diferentes capas por aquí. Es por ello que está generando más oro. De acuerdo, para que veas si hago click en el eslogan No botón y voy a esto. Me está mostrando la cancha por esto generando este botón de inicio de sesión. De acuerdo, entonces puedes ver aquí. También me está mostrando este desplazamiento de sombras. Entonces no estoy seguro de que no tenga 1/4. Pero desde la perspectiva de un cuarto, creo que no necesitan estos activos. Pueden generar este botón con base únicamente en esta cancha. De acuerdo, ¿ así que esto es eso? No, hay algunas cosas más por aquí. Al igual que esto es mano. Puedes usarlo para moverte por las cosas, y luego tenemos ah, esta herramienta de holgura. Puedes seleccionar diferentes elementos por aquí para mostrar, mostrar cuáles son diferentes estilos, rechazarlos. Y entonces tenemos este monumento. Va a ser Meiring. ¿ Todo bien? Entonces si probé dedo del pie click en algo, se va a moderar así. OK? Por lo que puedes ver ahora me está mostrando algo diferente en los tamaños y las distancias entre elementos. Ahora son más prominentes, y también esto es wiggler. Puedes agregar colores pinchando aquí así. Entonces si estoy tratando de agregar colores por aquí, puedo tener diferentes colores. De acuerdo, así que no obtuve cuál es el significado de agregar todos estos colores por aquí. Porque si voy a otra pantalla, déjame ir a otra pantalla. ¿ De acuerdo? Entonces si voy a esta pantalla y no hay colores por aquí, no son globales. Están definidos en esa pantalla en Lee. Entonces no me gusta esto. Se puede decir este método o disfunción. Además, puedes encomiar en tus, um, diseños. Si alguien quiere elogiar por aquí, puede elogiar por aquí. Y hola ahí. Se trata de mando general. Si quieres generación, también puedes agregar una adición como esta pinchando aquí. Y ah, estás ahí está ah, error ortográfico. De acuerdo, entonces voy a crear esta generación así. De acuerdo, entonces se ha fortalecido y también puedes unirte al estatus. Puedes eliminarlo o puedes decir que ha sido resuelto por mí o el diseñador o el desarrollador. Entonces hay muchas características por aquí, que realmente quiero discutir. Andi, creo que algunas cosas más solo aguantan conmigo unos segundos más. OK, entonces voy a abrir este. Y si vas a esta ventana del proyecto es la barra lateral izquierda. De acuerdo, entonces si abro alguno de estos diseños se puede ver en el lado izquierdo hay control de versión . Entonces este es el control de versiones. Entonces si intento toe subir un nuevo diseño o una cadena diseñada me va a mostrar que esta es versión uno. Se trata de Virgen para lavar entrada. Puedo previsualizarlos. Puedo abrir todas las versiones que tengo por aquí. Entonces esto es realmente genial. También me destruye. El dato del proyecto. Invita al equipo. Copia Fuerza de enlace público. No estoy seguro de por qué esta forma. Está bien. Tú un no estoy seguro de lo que es esto. No lo he usado. Y también el primero Es éste. De acuerdo, entonces esta es solo la información general. Por lo que tiene control de versiones, lo cual es una buena característica de lo que muestra todas las capas. Y ah, tus desarrolladores también pueden descargar el archivo desde aquí. Pueden compartirlo. Puedes compartirlo con el comando de los integrantes de tu equipo. Inspeccionar. Ah, muchas cosas fuera. Puedes hacerlo aquí. Creo que están en igual Tough. Tanto Zeppelin como cada cancha. Son puntera creativa. Colabora con tus desarrolladores. No quiero que esta conferencia vaya como 30 minutos. Por lo que espero que hayan disfrutado de esta lección. Si te gusta este video o realmente quieres saber más al respecto, puedes hacerme las preguntas. Espero que hayan disfrutado de esta lección y de la información en esta lección. Nos vemos pronto en otro video. 69. Boceto abierto, de Photohsop e archivos de Illustrator en XD: No. El muy decente característica off txt es que puede abrir archivos Photoshopped y también puede importar tus archivos de boceto. OK, así que voy a probar eso. He guardado algunos boceto y uno para los archivos de la tienda. Entonces voy a hacer eso si puede abrirla, Ok. Para que pueda abrirlo. BST forex t me voy a abrir el dedo. A ver, ¿Cuáles son los estilos que puede convertir y cómo se ve y Ok, así que bastante bien bien. Tan realmente bueno. De verdad me gustaría. Fue muy rápido. Y se puede ver Cuarta Fuerza son lo mismo. El fondo, Tiene antecedentes. Tenía antecedentes. De acuerdo, entonces es lo mismo. De acuerdo, entonces tengo una carga y entonces tenemos a este Phil, que es Grady int? Está bien, así que súper guay. Todo es igual. He usado ingrediente. He utilizado nuestro expediente fiscal. He usado sombra y ah, no estoy seguro de dónde viene la sombra. De acuerdo, así que si voy a esta redondeada, Ok, entonces sombra también se traduce Bueno, así que voy a dar 10 de 10 marcas en este, así que vamos a abrir este archivo de boceto en Adobe X T y estoy abierto este. Esto también es muy sencillo. Woops. De acuerdo, así que esto es casi lo mismo que aparece en un boceto. Y Ah, creo que estoy muy emocionado con esta nueva característica. Puede importar todo. Se pueden ver todas las capas del lado izquierdo y ah, no digas que está bien. También, aquí tenemos tuve algunos grupos en mi archivo de show fotográfico. puede ver que también ha importado todos los grupos. Entonces esto es sólo reciente apareció, creo que tal vez unos días atrás uno o dos días atrás, encontré esto. De acuerdo, entonces una característica más, que es que puedes usar imagen de bibliotecas CC en ella. OK, entonces si tienes alguna biblioteca, algunos colores guardados. Está bien. Así que asegúrate de estar bien, entonces, como, puedes ver aquí tengo las paletas de colores y todos los estilos de estilo de coleccionista y de párrafo de mi archivo Photoshopped. Yo los he salvado por aquí. Puedes usar eso en tu nube creativa. De acuerdo, entonces si arrastro algo por aquí y quiero llenar este color o este color de mis paletas de colores , he generado info para aparecer o ilustrador puedo hacer eso. Y hay una característica más que me voy a enseñar en otra lección, que es que también puedes usar tu trading en vivo fuera de tus íconos ah ilustrador. Si estás diseñando algunos iconos en illustrator, déjame ver si tengo ilustrador por aquí. De acuerdo, entonces voy a crear un nuevo archivo. Voy a usar cualquier cosa móvil. De acuerdo, así que aclara algo, y voy a usar sólo una forma. Voy a usar sólo una forma por aquí. Accidente cerebrovascular. Estoy usando nueve puntos. ¿ De acuerdo? Y déjame cambiar. Entonces voy a usar mental. De acuerdo, Así que voy a ir con esta nave, sólo esta nave, y vamos a ver si puedo copiarla y usarla en el Reino Unido extra. Entonces vamos a copiarlo del cabello y basarlo en un noble 60. Es yo y lo mejor Oops. OK, para que pueda traer formas vivas por aquí. Se puede ver por aquí he dibujado esta forma en adobe, realidad. Entonces el ilustrador de adobe, que es en realidad tiene mucho control sobre formas e iconos. Se pueden crear muchos iconos en adobe illustrator, que es una gran herramienta fuera de crear logotipos, iconos, todo. Se puede quitar el filtro, se puede ver que estamos aquí, y ha creado esta nave. Por lo que esta es otra característica. Podrás copiar tu contenido de ilustrador o para la tienda y copiarlo de nuevo de él. Está bien. Está bien. Por lo que había otra característica que era de C C. Si has usado tu símbolo en tu biblioteca C C. Está bien. Entonces si voy a esto por aquí, abran bibliotecas CC. Y si tienes algún símbolo aquí en la biblioteca CC, vamos a guardarlo en la biblioteca C a las dos. Biblioteca. Es más de ello. O cabello. Recuérdame más tarde. De acuerdo, Entonces voy a usar mi biblioteca, y voy a agregarla o sibar. Está bien. Entonces tengo mi un gráfico aquí, que es obra de arte uno. Dejémoslo así y lo voy a usar de manera similar. O aquí. ¿ Dónde está mi biblioteca de sissy? Y voy a ir a mi biblioteca y voy a importar esta forma aquí. Eso en realidad se va a vincular estos? Sí. Entonces si trato de cambiar algo por aquí, se reflejará sobre el cabello automáticamente. De acuerdo, así que déjame decirte este también diluye este. Este, éste . Está bien. Entonces, no, he importado mi forma de mi biblioteca. Para dar click derecho en. Debe haber alguna opción del dedo del pie. Está bien. Entonces voy a editar este de aquí. Terminémoslo. O aquí porque es el que está vinculado. Entonces me voy de pie. Ciérralo, guárdalo. Y creo que no , debería reflejarse aquí. Entonces aquí tenemos siguiente, ver si Está bien, así que ahora pueden ver creo que ya se ha visto afectado por aquí. Vamos a cambiarlo por otra cosa. Eso es para lucir este. Vamos, C s. Así que tengo este. De acuerdo, entonces lo que estoy tratando de hacer es que estoy tratando de cambiar el dedo del pie este. De acuerdo, Entonces lo que estoy tratando de hacer es tratar de cambiar su color. Las propiedades van a cambiar su color a azul. Voy a guardarlo así. Siguiente cierra este y veamos con qué está pasando. Ok, entonces se ha actualizado por aquí. No estoy seguro de por qué no ha operado por aquí. De acuerdo, así que vamos Este es el medico. Puedes trabajar tu diseñador. Si alguien está en diseñar algún icono, puede trabajar en Illustrator. Y si operan algún icono por ahí, se reflejará en tus archivos adobe axity instantáneamente sin ningún esfuerzo. Si está utilizando estas bibliotecas, no hay bibliotecas BCC, bibliotecas creativas en la nube. De acuerdo, así que estas son las pocas características que realmente quería mostrarles chicos que puede importar. Ah, mucho fuera de diferentes formatos de archivo y, ah, mucho de diferentes herramientas de Adobe Family y también de sketch. Y ah, espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección. 70. Adobe XD en la actualidad de Mayo de de 2018: hoy voy dedo del pie actualizarte con lo último. ¿ Qué está pasando con Adobe X T Y realmente quería hablar de su nuevo plan, que es el plan de estructura y Adobe? En realidad, tienen un trabajo, una empresa. Ellos lo han hecho gratis. Entonces si eres diseñador o desarrollador o diseñadores de experiencia de usuario. Deberías quitarte el beneficio de este. Cuéntale a tus amigos y a otros al respecto, y también diles que Toma mi curso. De acuerdo, así que este es Adobe X T. Y puedes compartir un prototipo uno y diseñar especificaciones uno y dos GP off cloud storage, que es gratis con Adobe X'd y ah, esto es para ti. Si eres freelancers, puedes usarlo fácilmente. Esta es una gran herramienta. Y hay unas cuantas actualizaciones más que vienen por ahí. Mi y Apple Session, déjame mostrarte. Por lo que aquí están las pocas actualizaciones que más tarde son sujetos fuera. Será XTC. Ver mi una manzana. Te voy a mostrar algunos fuera de ellos en este video. Entonces cambiemos a nuestro adobe, en realidad pantalla y veamos cuáles son los actores. De acuerdo, entonces aquí tenemos en la pantalla. Tengo que hacer símbolos por aquí. Algunos símbolos, tres pantallas, tres pantallas, tablas de tres yardas, un poco de pelo textil. Entonces, si vas a este activo , hágalo pateando este activo por aquí. Si ves algo fuera del textil o de la práctica, con razón lo llamaría. Ahí hay algo nuevo, que se llama Resaltar sobre lienzo. Entonces si hago clic en esto, se va a resaltar el mismo estilo utilizado en en todos los tableros de arte y resaltar son cada uno de ellos. lo que se destacará cada instancia fuera de este estilo tractor utilizado. Una cosa más. De igual manera, se puede hacer lo mismo con este, por lo que esto se utiliza por aquí. Por lo que este es el símbolo lo va a resaltar tres veces en tres tableros de arte diferentes. Entonces este es un truco muy cool si tienes muchos símbolos y no quieres,ya sabes, ya sabes, estropear tu biblioteca, puedes ir fácilmente a ellos y ver dónde se han utilizado. Además, se puede hacer lo mismo con los colores. los colores en los que has usado lo más destacado de un asesino sobre lienzo. Van a resaltar este resaltado de color verde sobre lienzo. Van a resaltar el desgaste del texto. Este color ha sido utilizado. Por lo que esta es una característica muy cool una nueva. Una cosa más. También puedes agotar tus activos como este Corrector de color, estilos, símbolos. También puedes buscar en símbolos. Por ejemplo, les he nombrado símbolo uno. Entonces esto es sólo ir del dedo del pie. Busca el símbolo y me muestra este símbolo uno. Es el nombre fuera del símbolo que estoy buscando. Entonces si vas por aquí y vas a esta pantalla y ah, si voy al símbolo, puedes ver símbolo un símbolo a en algún texto. Entonces esto es un gran allá arriba. Tienen una cosa más que realmente me encantó. Se reemplaza. Estás reemplazando tus símbolos. De acuerdo, Entonces si quiero que este símbolo en estos todos estos tres símbolos símbolos símbolos verdes sean reemplazados por este. Yo sólo voy dedo del pie arrastra esto por aquí y en todos los demás va a ser reemplazado por el símbolo uno. Para que veas que este es un gran truco de magia. Si tienes Ah, adobe x t Puedes probar esto. De acuerdo, Una nueva actualización más se basa en múltiples aburrimientos de arte. De acuerdo, Entonces, por ejemplo, si mi texto este está por aquí y quiero que esté en el mismo lugar en todos los demás tableros de arte , lo voy a copiar y seleccionar botes, los tableros de arte. Voy a seleccionar ambas tablas de corazón presionando el comando de control de turno. Nosotros y puedes ver que están pegados en el mismo lugar exacto donde yo quería que estuvieran, así que puedes usar múltiples tablas de arte, y puedes pegar un artículo o un símbolo múltiples tablas de arte al mismo tiempo. Ahora hay una característica más de pastoral protegiendo tus especificaciones de diseño y prototipos de soporte , que tal vez no quieras que todos vean tu prototipo publicado. Se puede dar click en él. Se puede hacer clic en la contraseña requerida por aquí también de manera similar, para especificaciones de diseño publicadas, se puede requerir una contraseña, por lo que estas son las nuevas pocas características de Adobe X t Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, vamos a seguir adelante aprendiendo más sobre txt 71. Overlays de Adobe XD de la posición: hoy, vamos a mirar a una de las más grandes y más de 60 actualizaciones de la historia, que yo estaba tambaleando esperando y una de ellas es este demasiado apoyo. Entonces te voy a mostrar en esta lección. Cuáles son las nuevas actualizaciones que se han agregado recientemente toe adobe XTC C estaba en posiciones fijas establecidas . Privada invita a un mejor control para campos de imagen, diseño usando cálculos matemáticos y, um, sobre tablero de Lissa. Entonces voy a cambiar a mi adobe extra. Te voy a mostrar primero estos dos que están relacionados con el prototipado del dedo del pie. Entonces vamos a ver, ¿cuáles son estas actualizaciones y qué puedes hacer con estas y qué puedes hacer de nuevo con tus prototipos? Vale, Ahora aquí he creado sólo un simple prototipo fuera de esas pantallas y déjame alejar, y te voy a mostrar que hay unos cuantos tableros de arte más. Uno es este teclado Uno es esta hoja de acción para nosotros. Ahora, si tocas esto, um, este prototipo y puedes ver lo muy bonito del mismo es así que si me desplaza, puedes ver que mi icono este plus esta fijo y este stop header es fijo. Esta parte inferior una barra de navegación o fondo? Nunca. También es fijo, y mi contenido es que se puede ver moviéndose y deslizándose por debajo de ellos. Entonces esto es Ah, realmente crea actualización para Adobe X T y realmente la vas a disfrutar. Por lo que la mayoría de las veces cuando creamos sus AP móviles o tal vez sitios web hay encabezados son fijos. Entonces cuando movamos el contenido, el encabezado se va a pegar a la parte superior. Entonces esta es la nueva actualización en esta actualización de junio X'd 2018 junio 2018 Y lo puedes hacer con tus elementos. De acuerdo, así que una cosa más y excesivamente, y te voy a mostrar. Entonces si voy, voy a presionar este ícono más. Se puede ver esto es más de menos pantalla por lo que puedes usar la misma superposición en múltiples tableros de arte diferentes y déjame mostrarte de nuevo. Esto es superposición. Y si voy a la segunda pantalla, se puede ver por aquí Esta es mi segunda pantalla y se puede ver la solución de Saleh Mantis, pero otras se están moviendo. Entonces si hago clic en este, esto es que esta es otra superposición. Por lo que yo estaba esperando este. Por lo que puedes superponer cualquier elemento encima de cualquier otro arte. Y puedes usar eso excesivamente múltiples veces una sola superposición en diferentes aburrimientos de arte. De acuerdo, entonces te voy a mostrar cómo puedes hacer esto. Entonces esto es muy fácil. Voy a crear un nuevo documento por aquí. Encontré 678 y vamos a acercar el control o comando cero. Y lo que voy a hacer es que voy a crear ah, cabecera fija, y es muy sencillo. Y dedo del pie lo llenan de algún color. Hagámoslo rojo y quitemos la frontera. De acuerdo, así que aquí se puede ver que han agregado en la posición fija del lado derecho, Así que esto va a hacer que se arregle. Y una cosa más que debes recordar en este panel de encaje izquierdo, el orden fuera de la lista también sí importa. Entonces si capas la parte superior, esto se va a arreglar. Detener. Lo tenía. Entonces lo voy a nombrar así. Y ahora lo que voy a hacer es poner algo de contenido sólo para aplacar esta línea varias veces. ¿ De acuerdo? Entonces aquí lo tenemos. Tenemos diferentes líneas. Ahora asegúrate de que esta tu top Heather, va a estar en la parte superior. Entonces lo voy a mover en la parte superior en la pila de capas porque ahí va el dedo del pie en la parte superior de estas líneas. De acuerdo, así que esto es lo que necesitas para asegurarte de esto. Y Ah, lo que puedes hacer es si lo sabes, presiona esto, solo detente. No pasa nada. Entonces necesitamos arreglar una cosa más que vamos a hacer que este arte se aburra un poco más grande como este aquí. Eso es hazlo como OK, así que si puedes ver esta línea azul en esta barra, esto está muy ajustando tu pizarra de vista. De acuerdo, entonces déjame mostrarte. Por lo que puedes ver aquí tenemos la vista. El ajuste del puerto es 2667 Así que si trato de mover esto, se va a mover. Por lo que esta es otra característica nueva que tienen. Yo no lo hice versiones recientes. De acuerdo, así que ahora si trato de reproducirlo, puedes ver que tengo barra de desplazamiento, y puedes ver mi contenido va a estar detrás de este encabezado fijo superior Ok, así que agreguemos algo Shadow it para que podamos ver correctamente lo que está pasando sobre aquí. Entonces voy a tener una sombra oscura que se va a extender, como 30 grandes Oezil o 30 puntos por aquí. De acuerdo, así que voy a saber Juega y puedes ver cómo se mueve detrás de esto. De acuerdo, así que esta es característica realmente genial. También puedes hacer el efecto de sangre de fondo con él. Entonces si tienes alguna imagen con cabello y tienes un desenfoque de fondo ajustado a éste, también puedes hacer el fondo negro. Está bien. Así que asegúrate de que tu encabezado esté en la parte superior por aquí. O cualquier elemento fijo que desee. Toby en la parte superior. Debes estar en la parte superior en el español cercano. De acuerdo, entonces esta es una característica, Entonces la siguiente que te voy a mostrar está demasiado bien. Entonces lo que puedes hacer es, por ejemplo, si me dejo ir a esto, nuestro nosotros, nuestro nosotros, lo despiertas, ¿de acuerdo? Ahora puedes ver que he abierto el que lo despiertes para nosotros. Y lo que voy a hacer es que voy a usar algunos de los elementos de aquí, por ejemplo. Y estos son todos estos estos estos cuadros de mensajes. Entonces esta es una hoja de acción. Voy a control del dedo del pie. ¿ Ver? O mando. Consulta toda la hoja de acción aquí. Y me voy de pie. Cerremos este. De acuerdo, así que aquí lo tenemos. Vamos a basarlo aquí. De acuerdo, Entonces esta es mi hoja de acción, y se puede ver que está en el zócalo. Entonces si voy a volver del dedo del pie este diseño, se puede decir, este es nuestro tablero. Este es el puerto espacial. Entonces lo que tenemos que hacer es que primero sea un tablero de arte. De acuerdo, entonces así es como va a funcionar. Entonces me voy a puntera prensa 678 y se puede ver aquí lo tenemos dentro de esto. Hagámoslo así y sepamos que lo que voy a hacer es en esta zona por aquí. Voy a añadir un botón, tal vez algo así por aquí. Tan solo haz un botón azul. Eso es todo. Este ejercicio es solo para mostrarte lo que puedes hacer con él. Por lo que he creado un botón aquí en esta zona, y también lo voy a hacer para la expedición. Por lo que se va a arreglar ser arreglado por aquí y en la parte superior. OK, entonces, um entonces ahora vamos a ir al prototipo. Aquí es donde vamos a hacer la magia. Por lo que voy a vincularlo a esta pantalla. Y en lugar de transición, voy a hacerlo excesivamente. De acuerdo, entonces ahora puedes ver en el lado izquierdo Te está mostrando dónde estás colocando tu el excesivamente . De acuerdo, Entonces si tienes un tamaño pequeño por ahí como puedes ver que está tomando todo el tamaño del lienzo son toda nuestra vista. Tamaño de poro. Si tienes puerto de vista más grande, puedes moverlo hacia arriba y hacia abajo. Está bien. Entonces si lo muevo por aquí, puedes ver que puedo moverlo hacia abajo o puedo moverlo hacia arriba. Entonces lo voy a bajar así. De acuerdo, entonces cambiemos la transición. Disolver excesivamente está fuera. De acuerdo, Así que eso es crear. Aunque quieras apuntalarlo desde abajo, eso es ah, vamos a sacarlo deslice hacia arriba. Entonces voy a usar slide up ahora. Vamos a jugar y déjame mostrarte cómo va el dedo del pie para que veas que se están deslizando arriba desde abajo así. Y también se puede ver desde arriba está por debajo un poco. Yo lo he ajustado, pero correcto, Pero creo que deberías retomar toda la pantalla. Y esto es sólo para demostración. ¿ De acuerdo? Ahora bien, ¿cuál es el beneficio de esto? Por lo que tenemos sobre arrendamiento. Entonces si tengo otro tablero de arte como éste y tengo otra carga por aquí, que es, por ejemplo, esta y también quieren vincularla a la misma hoja de acción, solo quiero que esté ligada a ésta, y yo voy de dedo, hacer que se deslice hacia arriba, y eso es todo. De acuerdo, así que ahora puedes ver puedo usarlo varias veces en diferentes pantallas. Entonces no necesito, ya sabes, um, um, duplicar mi tablero de arte varias veces. Entonces si tengo un componente el cual se puede usar en otras pantallas o puede excesivamente otras pantallas, tal vez acción engañar algunas opciones más, Así que puedo hacer eso simplemente presionando ese botón y haciéndolo tan excesivamente así Esta es nuestra excesivamente y podemos usarlo varias veces en nuestros prototipos. De acuerdo, así que este es uno de los más poderosos, creo que las actualizaciones ofrecen ser extraditadas. Sin embargo, no estoy seguro del futuro, pero ahora mismo, esto es lo mejor. Creo que se puede obtener de Adobe 61. ¿ Es esto arreglar la contaminación y atornillar el contenido? Se desplaza detrás de él. Y otro es que este excesivamente elementos También puedes superponer tus teclados y otros elementos si quieres. Ah, así que todo se trata de esto. Te voy toe share te compartes con ustedes unas cuantas actualizaciones más las cuales han hecho sus no muy significativas en la siguiente lección. De acuerdo, entonces espero que hayan disfrutado de este nuevo prototipado. Bonito prototipado actualizaciones de adobe X t y nos vemos pronto. En otra lección. 72. Actualiza los cálculos de matemat de junio de junio: Ahora vamos a ver algunas actualizaciones más que Adobe X'd hizo en este junio de 2018. Y uno de ellos es cálculo loco por aquí. De acuerdo, entonces si lo multiplico con 1.5, ya puedes ver que voy a conseguir la siguiente altura. Entonces esto es muy guay. se puede hacer. Por ejemplo. Yo lo voy a menos con 58 lo va a mover hacia arriba. De acuerdo, así que esto es realmente genial. Se puede hacer cálculos matemáticos están por aquí, donde el ahí es muy apretado y exposición. ¿ Y por qué posicionarse fuera de este elemento? Entonces este es uno fuera de su arriba. Hay una actualización más es. Entonces si vas a este publicar prototipo, si haces click en él, puedes ver nuevo enlace privado en mejor, mejor versión. Por lo que si haces click en él, puedes ver puedes poner el título por aquí y crear un enlace privado el cual puedes compartir contigo nuestro show con una o dos personas en privado. Ok, entonces no va a ser global para todos. También puedes crear um puedes ver también puedes invitar por aquí. Necesitas publicar la parte I primero antes de que invitaras a la gente. De acuerdo, entonces, um, puedes crear este enlace privado. Esta es una nueva característica que acaban de agregar por aquí. De acuerdo, ahora, la tercera actualización, que fue muy molesto Primero al principio. Entonces si intentas crear alguna elipse por aquí en un círculo por aquí, el problema es así que si trato de traer alguna foto o imagen por aquí, por ejemplo, este tipo. Entonces si trato de pegarlo aquí así, usando una mezquita. Entonces en la versión más fea antes de eso, no pudiste mover esta imagen. Ahora puedes hacer doble clic en él y puedes moverlo así. Se puede ajustar la altura y el tamaño de cualquier cosa. Entonces esta es, creo, característica muy necesaria la cual faltaba en la primera versión fuera de esta. actualizan las versiones anteriores a este junio de 2018 y me encanta mucho. Para que lo sepas. Solo tienes que arrastrar y soltar tu imagen en cualquier área. Por ejemplo, este y solo puedes arrastrarlo así y moverlo así. Ok, entonces se va dedo del pie. Clip eso dentro. Esa zona, y puedes editar fácilmente haciendo doble clic y ajustando tu tamaño algo así. Por lo que estas son las pocas actualizaciones que son muy geniales. De verdad me encanta este. Esto es realmente genial. Por lo que puedes fácilmente una cita tu mezquita de película o Phil Phil Image Mosque formas por aquí. Y también puedes hacer cálculos matemáticos por aquí. Y uno es este prototipo publicado con Enlace privado. Por lo que estas son todas las actualizaciones en junio de 2018. Espero que hayan disfrutado de esta lección y espero que les encanten estas actualizaciones. A unos pocos de ellos. De verdad los amaba. Todavía echo de menos una sombra por aquí. No estoy seguro de cuándo se van. dedo del pie tenía una sombra más sobre el cabello o múltiples sombras. Estoy esperando ese día. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección. 73. Orden de apilado de 06 de orden de 2020: En este video, vamos a aprender sobre unas características muy recientes de Adobe XD, que es apilamiento. Ahora, apilar, como ya saben, significa que vamos a poner nuestras cosas arriba y abajo y luego podemos reordenarlas. Entonces cómo funciona realmente. Entonces vamos a crear algunos de los grupos. Por lo que funciona con grupos. Por ejemplo, tengo esta línea por aquí. Quitemos la frontera. Y voy a hacer clic en overhead como este azul. Y luego voy a crear un impuesto por aquí. Y hagámoslo 12 pixel por aquí. Entonces este va a ser nuestro comando de grupo o control g. Y luego lo voy a replicar. De acuerdo, ahora se puede ver tenemos seis grupos por aquí la izquierda se puede ver tenemos seis grupos, grupo 123456. No, los voy a agrupar en otro grupo sólo para controlar su apilamiento. Entonces mando y control G, Este es nuestro, llamémoslo grupo maestro. Ahora puedes ver que hemos creado este grupo de monstruos. Ahora vamos a dar click seleccionar este grupo MOSFET y habilitar nuestro apilamiento. Por lo que vamos a dar click aquí. Y este es nuestro apilamiento de arriba a abajo, de derecha a izquierda. Entonces en este momento estamos de arriba a abajo. Entonces nos vamos a quedar con la pila vertical. Y se puede ver por aquí, si trato de hacer clic y hacer clic y seleccionar esto y arrastrarlo hacia arriba por aquí, puede ver que está cambiando la posición con la segunda. Ahora si trato de mover éste hacia arriba, vamos a moverlo por aquí. Se va a apegar a la posición donde estaba todavía la última. Puedo volver a usar esto. Presione y mantenga pulsada la tecla Mayús, para que vaya en la línea. Entonces también se puede ver por aquí, se puede reducir la distancia entre dos grupos por aquí así. Te puedes ver adelante, diseño y distancia o espaciando el cabello antes y después. Para que puedas encadenar este overhead. Entonces si seleccionamos este, ¿de acuerdo? Entonces así es como funciona realmente el apilamiento. Ahora, en siempre que estés diseñando, podrías tener la barra de navegación superior. Es posible que tengas algunas áreas destacadas por aquí, imágenes o algo así. Entonces podrías tener otros grupos o aquí, tal vez podrías tener una imagen por aquí, por ejemplo, como ésta. Por lo que podría tener un rectángulo. Por lo que aquí hay algunas imágenes. Voy a arrastrar y soltar un cabello imaginable a mi flecha vx t. copiemos eso por aquí. Volvamos a las orejas, esferas y haga doble clic en esto. Y se puede ver que esta es nuestra imagen. Entonces si quiero subirlo, puedes ver por aquí, fácilmente puedo moverlo hacia arriba. Entonces esto es realmente útil, realmente, muy útil si quieres cambiar el diseño de tu aplicación móvil o tu sitio web. Se quiere mover algunas secciones arriba y abajo. Eso se puede hacer en un instante. Entonces esto es realmente útil. Nuevas características apilamiento, puedes cambiar el orden a vertical pegándose a aquel donde tenemos este apilamiento por aquí. En este orden. Se puede ver por aquí ahora ya lo ha sido, el diseño ha sido cambiado. Entonces vamos a cambiar el tamaño del, nuestro prestatario aquí. Alejemos un poco. Y ahora puedes ver si quiero cambiar el orden, puedo hacerlo así. Entonces esto es realmente apilamiento horizontal. Y la primera que te mostré, la vertical. También puedes tener algo de relleno alrededor así. Entonces esta es toda la sección. Se puede agregar algo de ropa de cama. Se puede ver si trato de reducir el relleno, este es un relleno en todos los lados de este grupo MOSFET, todo este orden de apilamiento. Entonces así es como se utiliza el apilamiento horizontal o vertical en Adobe XD. Espero que hayan disfrutado de esta lección. Esta es la última característica de los láseres introducida recientemente en 2020, creo. Entonces pasemos a la siguiente lección para aprender algunas cosas más.