Domina las rejillas de diseño (Figma, Adobe XD y Sketch)

1. 1: introducción: Hey, bienvenido a esta nueva forma tutorial vamos a hablar de Genial cómo hacer tus calificaciones de capa para producto digital. ¿ Verás un poco fuera de la teoría? Acerca de qué? Nuestras columnas, canaletas Rose, Martin todo y ya veremos Y los más utilizados saludan en todo el mundo que son sofocar setas y ocho píxeles. Por lo que la llamaremos como hacerlas. ¿ Cómo? Dedo del pie Úsalos y te mostraré cómo usar. Digo, producto en un boceto en. Y así si te interesa aprender todo sobre, um, um, Layer Greece se me unió. Toe este curso. Por cierto, voy a ux designer 20 años de experiencia en todo tipo off gráfico y centrado en el usuario. Um, firma. Entonces sígueme y yendo a esto. ¿ Por qué ahora? Estamos por supuesto. Así que vamos, únete a mí y nos vemos después. En el resto 2. 2: lo que son las cuadrículas de la composición (teoría de laicos): Hey, bienvenidos a estos curso. Vamos a ver todo sobre las actualizaciones de Les. Bueno, lo son. Entonces cuando no sabes nada de re para cuidarte, ¿con qué demonios están los jugadores? Correcto, Entonces, ¿qué demonios son mentirosos? Genial. Bueno, saludos son instructores invisibles que nos permiten hacer más equilibrados en decisiones consistentes y por lo tanto tomar decisiones menos ciegas mientras se toma cualquier tipo de producto que, digamos, digamos, traen física digital lo que sea. Por lo que se basan en los negocios de verticalidad. Se les llama columnas en no se asemejan divisiones, que usualmente las llamamos Rosa. Y después de todas esas filas están tirando a una escena, eso es lo que llamamos línea base. ¿ Verdad? Entonces tenemos, como, una breve introducción al respecto aquí. Podemos ver algunas muestras codiciosas para cualquier sentido, este tipo de revista o de periódico Así podemos ver aquí estas divisiones de sopa, subdivisiones verticales aquí. Sí. Entonces en este caso particular, tenemos 123456789 10 11 y 12 columnas. Muy bien, así que estos son 12 de distribución de columnas, avaricia por esta revista o periódico en particular. Y aquí tenemos, como, algún anuncio de Adidas donde puedes ver que han dividido el paté en través en seis. Las columnas. Entonces los tenemos aquí y también tienen el por el debate en tres filas. Perdón, en seis filas. Aquí los puedes ver, ¿verdad? Entonces aunque no lo podamos ver aquí en el diseño que son. Tienen frijol. Toda la mayoría de los diseños han sido diseñados con algún grado de diseño detrás. Entonces aunque sea en BC audaz, puedes tener algún sentido fuera de orden, algún tipo de estructura detrás. Por lo que aquí puedes volver a apreciarlo para que la posición del texto sea si no es aleatorio. Digamos que todo está ajustado a la cuadrícula de diseño. En este caso, la oposición de destinos aquí abajo en que en esta parte del cebo, justo, por ejemplo, en protestas físicas, mismo que se puede ver aquí tenemos como, sí, como, ya sabes, no sé el nombre de estos en inglés, pero digamos que ya sabes, vestuario o algo así. Y como puedes ver, es la señal de victoria pactada. Por lo que empiezan con la forma y luego dividen vertical y horizontalmente. Te espacian medio bien, así que haces un diseño consistente en lo mismo aplica a los sitios web. Como se puede ver, aquí hay un diseño muy típico está dividido por 12 columnas. Y como puedes ver, aunque sea ah, es un signo temprano de partícula aquí puedes ver que no es el texto, por ejemplo, no está unido a la primera fila. Algunas cosas se inician en la primera fila, como el brezo en este acabado también en la Última Columna, y este texto comienza aquí. Lo mismo aquí. Lo mismo abastece aquí. Y como se puede ver también la foto, está siguiendo esta columna. De acuerdo, así que veamos algunos conceptos. Entonces has asentado todas esas cosas. Lo importante. Necesitas saber. Por qué hacer ellos pactados son esos términos columnas, rosa, canaletas y márgenes. Algunas personas se levantaron útilmente. No los uses. OK, tú también. En su mayoría se van a trabajar con canaletas columnas en la de Martin. Pero esto es algo importante. Veremos más adelante por qué, pero veamos algunos ejemplos fuera de estos un poco más fuera de la teoría. De acuerdo, así que basado en estos diseño tendría a su derecha, vamos a ver, con ya sabemos lo que en Coram's son. Entonces no voy a explicar demasiado esto. Pero columnas, como hemos visto antes, dividen la brújula, el ARB o debates tu físico provocó todo en vertical y fuera del mismo fuera del mismo con ladrón Parece bien. Y como se puede ver entre estas columnas, hay algunos espacios, ¿de acuerdo? Y esos espaciadores son lo que llamamos canaletas. ¿ De acuerdo? Esas canaletas son el espaciado entre las columnas. De acuerdo, si estás siguiendo a algún tipo fuera, volvamos de pie. Sí, ha vuelto dedo del pie son básicamente si estás siguiendo cualquier tipo de avaricia o, ya sabes, hay este típico dolor por un pico de ventas, todo. Lo que significa es que todas ellas todas las columnas en el espaciado en el Martine en su separado en la separación entre los alemanes son múltiples fuera de ese número ocho píxeles es el más comúnmente utilizado en la pared en el diseño Web y on up obligatoriedad diseño. Si estás hablando de revistas o periódicos de ese tamaño, es diferente. Por lo general es tener fotos. De acuerdo, 12 14. Algo alrededor de eso algunos periódicos que tienen tipografías súper diminutas que usaron, um, como 10 píxeles con bien, pero generalmente en productos digitales. De lo que vas a usar este post de película se comió algunas algunas personas. Está consiguiendo que el dedo del pie llegue a números más bajos con el fin de ganar algo más de versatilidad, como si estuvieran bajando a cuatro píxeles o al exceso, como Google o IBM con su sistema diseñado por Carbone. Están bajando porque se dan cuenta de que necesitan más flexibilidad. Y a veces un píxel puede ser un poco apretado. OK, entonces ¿qué hay de vuelta? Líneas de base? Las líneas base son en su mayoría son divisiones horizontales, y, como se puede ver aquí tenemos como lo mismo está enfrentando este tipo off Bink cosido y este blanco . Entonces como puedes ver, tenemos como columnas horizontales. Pongámoslo así. Entonces tenemos, como el ancho de la columna, que es de ocho semanas L. Y entonces tenemos la canaleta horizontal o un espacio entre columnas. En este caso, rose. Son ocho pixeles para así Cada paso que se hace por ocho semanas es así que creo que es importante porque si sigues una forma súper estricta de hacerlo genial, yo soy como, en este caso, o si estas siguiendo estos en este caso, hay un píxel. Genial lo que obtienes. Es Ah, super asado y buen ritmo vertical. Entonces todos los elementos están separados por la misma cantidad de un espacio, o es una victoria es siempre va a ser como destino múltiple, digamos ocho o 16 o 32 o 24. Y así si haces que esos espacios sean consistentes, vas a tener, como un buen ritmo vertical. Y esto también es importante, también es importante, porque si más adelante, lo veremos con más detalle. Pero es importante que si estás poniendo tus tipografías con algunos tamaños y todo, es súper importante que cuando dijiste que yacen altura del orden fuera tu tipografía es con tus teléfonos. Es importante que sean múltiples un dedo del destino, por ejemplo. Estás sentado como un tamaño de teléfono de 14 píxeles, pero la altura de mentira debe ser múltiple de ocho. Entonces para ese caso, quieres ir por tal vez 16 va a ser demasiado apretado. A lo mejor, pero a lo mejor quieres aumentar a 24. ¿ Por qué es eso? Ya veremos más tarde, pero este es buen dedo del pie. Consigue adecuado en buena vertical brillante en tus diseños. De acuerdo, entonces vamos con un concepto como aquí. Como dije, canaletas son los espacios. Estar haciendo tus columnas. Está bien. El abasto aplicado a tu rosa son los espacios entre tu cada fila. Por lo que tienes unos está basando y otros también. Debe ser consistente en dos tamaños. Lo mismo con Y si te atacan en remolque, pixel. Genial. Digamos unas fotos. Nuestro hijo. Ejemplo. Puedes usarlo como 16 píxeles para móvil la ciencia e ir por 24 32 para el diseño de escritorio en tableta . De acuerdo, entonces los márgenes son los espacios que el espacio que están fuera de nuestras columnas. De acuerdo, entonces nuestras columnas, todas las columnas hacen que nuestras digamos sean trabajo práctico en un espacio afuera de ahí. No trabajamos. No ponemos ningún elemento. Ah, bueno, estos tienen algunos. Si pones como una imagen de héroe o algo así, puedes ir por camino para la muestra. Pero el resto de tu contenido se va a adjuntar a tu digamos, trabajando, cosido o tu zona segura donde pones tu prueba Y ese lugar es lo que estás poniendo tus columnas así fuera que columnas el espacio que tienes vacío A esos se les llama márgenes. Está bien para firmar más ampliamente. Por lo general es entre 16 picks, vende 20. Pick vende algo alrededor de eso. De acuerdo, algo con lo que alguien va lleno. Pero la mayoría de las veces te vas a ver trabajando con 16 píxeles. Tienen 16. 14 dependiente, dependiendo de qué? Tu qué tipode pixel leíste que estás haciendo. A lo mejor estás trabajando con una pelea, pixel. Espera. Entonces vas por cinco. Entonces depende de ti. Pero recuerda, es importante que dejes algún espacio en el exterior, dependiendo de tu diseño. En esto, es trabajo Lo que llamamos márgenes. De acuerdo, así que esto es toda la furia Necesitas saber eso ahora. Vayamos impactados. Practica algunos diseños la más comúnmente fuera que vas a descubrir por ahí. Vamos, vamos a los ganadores. Escuchar 3. 3 - cuadrícula de diseño de Bootstrap: Entonces vamos a estas lecciones en esta lección. Nos vamos dedo del pie aprendió a hacer la codicia de diseño de bootstrap. Y dirás Qué es bootstrap y por qué necesitamos aprender el bootstrap. Genial. Bueno, en realidad sí. No necesitas saberlo, pero es un buen punto de partida para aterrizar el post robo. ¿ Por qué es eso? Bootstrap? Se trata de un marco para un rápido desarrollo fuera de sitios web en East Basin Esteem, L. CSS y JavaScript. Y tiene todos los componentes que pueda necesitar. Estamos aquí para venir a la documentación. Verás que tiene muchos componentes como los fondos y todo. Entonces esto es genial porque, um, podemos hacer nuestros decididos. Y los desarrolladores front-end pueden codificarlo súper rápido porque ya tienen los fondos hechos y las tarjetas, las alertas y todo. Y, por supuesto, más tarde, más tarde en el front end, los desarrolladores pueden cambiar sobre estos. Estas botellas dan punta a nuestro diseño, pero ya las tienen hechas para que no tengan que escribir todas estas gafas, poner todo en su lugar por lo que sólo tendrán que sobrescribir nuestro nuevo tú yo diseño estético . ¿ Verdad? Y luego hay algo importante aquí en la documentación de bootstrap que es todo este tipo de puntos de ruptura que ponen puntos de ruptura son ¿cuándo? Cuando el tamaño de la pantalla. Por lo que para pantallas mayores a 1200 píxeles, vas a estar trabajando con el contenedor. Pensamos, digamos un lugar de trabajo y apagado 1000 140 pixels. Está bien. Y volvamos a casa. Yo quiero mostrarles algo interesante aquí. Si inspeccionamos el hogar fuera de Bootstrap, verás que post op obviamente está construido sobre boost bajo bootstrap. Y si si si selecciono este contenedor aquí, podemos ver aquí algo realmente en muy cool, podemos ver los márgenes aquí como podemos ver en naranja, entonces cerca de él aquí a la derecha. Tenemos como bar verde, que sería nuestra canaleta fuera la que impulsa los abusos. Pero lo veremos más tarde. Pero lo importante aquí que quiero que vean es que estamos trabajando con un área de trabajo real de 100 on 1110 pixel. Se puede ver aquí que tenemos aquí en medio. Tenemos todos esos valores, acuerdo? Aunque ellos criban, es que yo lo hago más grande. Se puede ver que esta área de trabajo sigue siendo la misma aquí. Tenemos, como, un burbujeante por fuera, posponiendo 15 pizza fit big vende por su lado. De acuerdo, entonces ahora si vamos dedo del pie sigma y vamos aquí a nuestras calificaciones, he preparado todos los bootstrap, uh, saludos viables ahora mismo. Booster up. Una persona estable es 4.5, pero están a punto de liberar Bootstrap cinco. Dado que éste es el más común, vamos a replicar esto. De acuerdo, este este impulso envuelto para el diseño, pero no los cinco. Yo solo lo vivimos aquí para que puedan echarle un vistazo porque voy a servir estos documentos con ustedes . Para que puedas Puedes copiar y pegar y duplicar y hacer lo que quieras con. OK? Y más adelante, trabajaremos en nuestros ocho píxeles, iniciando su documentación, poniendo estos puntos de ruptura y contenedores y todas esas cosas. De acuerdo, Así que aquí está el digamos, la configuración que arranca puesta por defecto. Y esta es la configuración que vamos a aplicar el diseño del dedo aquí. De acuerdo, así que vamos a ver. ¿ De qué se trata esto? Por lo que tenemos el impulso de 44 ajustes de diseño son 12 columnas por defecto. Ellos la agarraron. ¿ Recuerdas? Llegaron ahí es el espacio entre las columnas es de 30 píxeles, y hay alguna cosa articular que se dejó caer. Nosotros, como hemos visto antes aquí, es que tiene Tiene una despedida afuera, que es la mitad, como se puede ver, es 15 y 15 con sumas 30. Entonces lo que hace es tomar la canaleta y poner a una hija en el exterior sobre una hija en la otra afuera, ahí fuera fuera fuera de la grande. Está bien. Y así podemos ver aquí. Nosotros sólo vamos a hacer estos. Bueno, tal vez veamos cuántos hacemos, pero aquí tenemos la talla X l. El punto de ruptura para Excel es 1000. Entonces vamos a crear aquí como Ann Arbor fuera de esta carne habilidades en creado a partir de cero. Entonces para eso, vamos y vamos a hacer. Es para crear en nuestro tablero off. Ah, 1200. Mi 7 20 Está bien. El importante aquí es el con bien. Fuera del cenador. Más allá abajo. Es Se puede precisar más tarde, pero estamos más interesados en la división vertical aquí. Entonces hagamos una pareja con ángulos. Aquí. El 1er 1 cambia el color aquí, un habla suiza. Queremos el contenedor. Vamos a crear el primer contenedor, que es 1140. De acuerdo, entonces tenemos estos. Eso y nosotros la enviamos. Entonces te lo ponemos aquí. Y luego voy a replicar este y lo que vamos a hacer su dedo descansa 30 píxeles . Porque recuerda que hemos visto antes es que por defecto, Bootstrap pone 15 píxeles a la izquierda y 15 píxeles a la derecha fuera de las columnas. Por lo que no tenemos todos estos 1140 píxeles para que trabajemos. ¿ Esto es menos 30? De acuerdo, así que eso parece llamar. Entonces podemos ver la diferencia está aquí, y yo obvia al centro. De acuerdo, así que esto va a ser vamos a ver el color. Entonces este es nuestro contenedor principal sobre esto va a ser así. De acuerdo, así que déjame anotar un poco esto. rápido aquí. Por lo que tenemos nuestros realmente nuestros o en un mineros de contenedores. 15 picos es de su izquierda de la columna y menos 50 píxeles de la derecha. Por lo que estos nos dan 100 1000 110 células grandes de apagado. Actúa el trabajo salvaje en el espacio. Muy bien, así que casi lo tenemos. ¿ Ahora qué? Necesitamos a la Justicia Goto codicia león y miente. Acordado. Aquí en pies marca, que elegir columnas y luego cuentan, como hemos visto, él tiene 12 en estos escenarios y se reúnen van a ser 30. De acuerdo, así que déjame aumentar un poco estos. ¿ De acuerdo? Entonces tenemos esta parte. Tenemos nuestra configuración. Es de 12 columnas y 30 pero dijo a un tramo, quiero decir, si hago estos marcos más grandes, todo va de pie. Como se puede ver, las columnas un tramo esto va es esto es buen dedo del pie el signo. Ah, 100% por ciento como lleno con los signos o signos más responsivamente. Pero por lo general lo que necesitarás o lo que te encuentres usando Más de su amenaza. Si quieres seguir estos bootstrap. Genial. Es que pones esto en el centro, y ahora tienes que entrar una semana para la columna. De acuerdo, entonces aumentemos estos hasta que lleguemos a nuestro punto. Y ahora, si asumimos lo malo, vemos que nuestra codicia de capa está perfectamente en línea Ok a nuestro espacio de trabajo. Por lo que ya tenemos nuestra primera codicia mentirosa. Está bien. Para el bootstrap, este podría ser el tamaño de exhalación para Busta. Vamos a replicar. Sí, cuanto más mientras, uh, uh, la caída de impulso móvil diseñó los ajustes de configuración. De acuerdo, ya lo tengo aquí. De acuerdo, Entonces voy en contra de ir a replicar esto y así así, borrar todos los elementos. Bueno, en este caso en particular y sólo me voy a ir, sólo voy a deshacerme de esto y aquí. Sí, lo tenemos. Al igual que tengo he elegido un 3 60 pixeles con tipo off dispositivo android, pero puedes elegir lo que quieras. Sólo recuerda que el ancho de la columna no es tan importante en términos fuera. Ah, ajustando dedo del pie un dolor como en un pixel duelo. Porque algo por los signos son responsivos. Por lo que no se puede controlar tanto el con off de la columna. Pero es importante más que el espacio vertical. Ya lo veremos. Entonces imagina que queremos tener, como 15. Imagina que aquí tenemos, como, un margen, como 15 células de cerdo a la izquierda y 15 15 fotos a la derecha, como dijimos antes. Y es una buena práctica en los dispositivos móviles, así que tenemos, como, 330 cajas con aquí para nuestro contenedor. Entonces vamos a estar y mentir de acuerdo. Dicho esto, nuestras columnas y lo que vamos a hacer aquí. Se dice que cuentan hasta tres. Aquí es más gratis. Es decir, solo puedes poner 635 lo que quieras y el margen sobre por ser consistente con el layout off muestra, y eso va a ir con tres y el otro. Recuerda , eran 30. ¿ De acuerdo? Y la comercialización. Aquí son 15. Está en su tamaño. De acuerdo, A veces en diseño móvil, recomiendo dedo del pie ir dedo del pie para hacer un punto de ruptura muchas equidad. Entonces cambias aquí los valores y tal vez cabra con 24 o incluso menos tal vez 15 o 16 dependiendo de tu propio lado Georgie. Vamos a poder Atrapado para aquí en el diseño móvil es un poco más, um, um, más relajado para estos particular booster up para lo que recomiendo se dice que consiguieron su a 15 también. De acuerdo, 15 o 20 múltiplos de cinco. Boost for se basa más en múltiplos de cinco. Entonces porque como puedes ver, si nosotros si tiramos aquí como un rectángulo, podemos ver que estas columnas tienen 65 la separación es de 30. Entonces todo es múltiplo de cinco. De acuerdo, entonces te recomiendo que hagas eso. Y veamos aquí. ¿ Qué tienes? Es una columna de 97 ah. Pero si quieres ser más preciso, puedes cambiar estos dedo del pie sigues la canaleta y hacer estos, no sé, tal vez 95. O, ya sabes, para que puedas jugar con estas invitadoras. Tienes esto y lo que haces, es Vienes aquí y luego intentas la justicia que tenemos ahí. Sí. Entonces si pones como una reunión de 22 lo que obtienes, es una columna de 95 y depende de ti en este caso en particular. Pero he puesto aquí los valores por defecto. OK, para mí, 30 píxeles en separación móvil es demasiado, pero bueno, es lo que dice Bootstrap. De acuerdo, así que hemos completado nuestro primer diseño para su parada y para móvil. Pero formar un rato. Vamos a hacer algo con esto. ¿ Está Rose aquí, cuál es? Bueno, no lo voy a hacer con Bootstrap. Veremos cómo a qué Rose y ritmo vertical con nuestro personalizar un píxel con en la siguiente lección. De acuerdo, entonces tienes estos archivos para que puedas mirar a tu alrededor y en copia todos estos saludos. Ya están aquí. Nos basó el estilo. Por lo que se puede Sí. Copia. Pega, haz lo que quieras con ellos. De acuerdo, Entonces el sindicato está menos encendido. Y hablemos de las ocho semanas pactadas. 4. 4: cuadrícula de 8px (y ajustes en Figma): Hey, bienvenidos a esta lección en estos. Escucha, vamos a hablar de una gran venta de acuerdo y cómo lo hago. Entonces sin demora, sólo me voy a poner el dedo del pie aquí, como por defecto. Michael Bro sentado con este 1140 por él. No me gusta esta sesión. Prefiero Sí, consigue mis 100. Es más paisaje, bien. De todos modos, lo importante aquí es que con Así estás trabajando para pantallas grandes fuera de curso, podrías estar haciendo grande. Podrías ir más grande, como, no sé, 100 1920 por ya sabes, los valores por defecto. Pero por lo general prefiero el trabajo del dedo del pie un más pequeño como algo alrededor de eso Estos son mis valores predeterminados para establecer. Ahí hay jabalíes. De acuerdo, así que vámonos. Y vamos a un griego aquí. Bueno, ¿ más está eso acordado? Somos columnas. De acuerdo, Entonces para el conteo, el predeterminado, recuerda, es 12 para esta parada. Y lo que queremos aquí es sólo centrar nuestras 12 columnas aquí y el reunir. Ya que estamos trabajando con un dolor de ocho píxeles, tenemos que tomar una decisión si lo queremos en 24 o 32. De acuerdo, Dejémoslo ya con 24 en la cuenta, fuera de las columnas a 12 y queremos controlar el con. Podrías pensar que quieres hacer el duelo súper perfecto con un gran dice Todo es múltiple un desvanecimiento incluso las columnas con su múltiplo off ocho Así que podríamos empezar con 80 con es el valor más sobreutilizado para empezar. Correcto. Y esto se ve bastante bien. Podemos ver que el otro es de 24 con este 80. Por lo que estamos en la parte trasera en nuestra en nuestro lugar de trabajo. Esto no es bootstraps, así que no necesitamos hacer algunas fueron, uh, uh, sumas Descansa mis noticias. Lo que sea. Entonces esta sería nuestra brújula de trabajo, acuerdo? Sí. Entonces déjame solo, uh, valor de co pd aquí. Entonces este va a ser nuestro contenedor principal. Si nos gusta esto con de contenedor, estamos bien para trabajar. Así es como haces salir a una dama. No necesitas dedo del pie. Estrézalo más. De acuerdo, Entonces tu centro, tus valores de entrada de mentira, que son múltiplos de ocho. Entonces lo tenemos. De acuerdo, Entonces las columnas son 80. Como se puede ver, todas las columnas son 80 en el espacio entre ellas es de 24. OK, y ahora salgamos de nuestras carreteras. De acuerdo, entonces presionamos aquí en fig MMA hacia otro tipo de grande en la rosa. En este caso en particular, no queremos 12 porque 12 con sólo nos haría tener, uh, Rose. Y veremos que volvimos a ser más en lugar de un tramo. En este caso, queremos aliar el dedo del pie. Nuestras separaciones se elevaron en la parte superior. De acuerdo, Y para este caso en particular, lo que tenemos, lo que queremos es el espacio entre las columnas con las queremos apagado en ocho gran altura de venta . Nosotros queremos juntarnos para ser también, ocho. Entonces ahora tenemos nuestra columna apagada. Ocho semanas es nuestro encuentro. Ocho semanas es así que tenemos Todas estas separaciones son ocho semanas de separaciones en el conteo . Lo que suelo hacer. Se pone un número enorme aquí, como 800. ¿ Por qué es eso? Porque normalmente tu cuando estás diseñando normalmente estás diseñando cosas más grandes que eso. Entonces cuando haces estos, cuando eres nuestra junta y estás haciendo landing page, por ejemplo, por ejemplo, o tu portafolio o diseñando un bloque o Lo que sea que estés diseñando, probablemente necesites mucho de esconderte por días . ¿ Verdad? Entonces si tienes suerte si estás aquí en crece, solo pones no sé, 200. Perdón, como, 50. ¿ Qué pasa? Es Ah, cuando estás cuando te re talla thes, tienes que volver de nuevo aquí. Recuerda que aquí tenemos 900. Sí, no tienes aquí la Rosa necesaria. Entonces como queremos tener mucho de rosa fuera aquí, puedes ir con 1000 y está bien. Por lo que siempre tienes espacio y esa rosa suficiente para ello. De acuerdo, así que esta es nuestra 1ra 8 semanas de perfecto. Genial para ello. Hagamos para cuatro forma. De acuerdo, entonces vamos a quitar esta semana que creamos antes y vamos a deshacernos de esto porque queremos crear su Esto va a estar ahí, una gran forma de venta un rato y lo que queremos aquí, es Es Es hacer lo mismo. Sí escuchamos bien o todo en múltiplos del destino que está fuera. Columnas acordadas en este caso, nos vamos a ir con el color. nuevo un recuento de tres. Céndalos. Está bien. Um bueno, en este caso particular, lo que puedes hacer es ponerlo en un tramo en el margen para que podamos controlar. Se trata de 16 células pico en la canaleta. También puedes jugar con 6 16. Por 24. Yo iría con esta cosa por esto. Y luego tenemos nuestros Tenemos nuestros ocho píxeles con lo que pasa aquí que, um, ya sabes, puedes diseñar para Android más esposas como estas para 3 360 o puedes estar diseñando para Tomemos algunos otros valores aquí como no conozco iPhone ocho plus aquí y hago tipo de la misma configuración. Hagámoslo aquí demasiado alto. Eso está fuera, como pactado y luego nuestras columnas. Digamos tres columnas. Eso es un seis, y entonces nuestro marketing va a ser 16 en nuestro got. Va a haber 24 OK, o sacarlo de nuevo a 16. Entonces veamos cómo va la columna con. Entonces son 50. Como puedes ver, no es posible. O vamos con tres para que podamos hacer como un mismo diseño. Aquí. Se puede ver que ni siquiera es su 117 así que lo llaman la columna con no es tan importante para el día realmente siguiente. Cuadrícula de píxel, pizza avaricia. Se trata más de las canaletas, el espacio de las canaletas y cómo configuraste tu rosa. Entonces en este caso, hemos hecho chaqueta perfecta ocho púas, una genial, y eso está perfectamente bien. Funciona en teléfonos móviles no va a ser tan posible tener las columnas como tú las quieres, verdad? Um, y por eso hemos hablado de ello. Por ejemplo, iPhone 11 Pro X. Es 375 con Así que no podemos dividirnos por ocho nos va a dar los Simoes y nos va a hacer diferentes tipos de columnas. Entonces pero lo que podemos controlar Y eso es lo que quiero señalar. Muchas veces, aunque sea un poco de latas gemelas al respecto, es cuando creamos. Esto es lo importante para crear la rosa para que puedas volver a poner aquí. Aquí lo importante no es la cuenta. Lo ponemos en la parte superior, el grueso hacia fuera lo vamos a aumentar a 500 es bueno. Y recuerda que la altura aquí va a ser de ocho píxeles y la reunión de nuevo va a ser de ocho semanas es así que ahora tenemos, como, una codicia perfecta. Aunque nuestras columnas no sean una imagen, la columna no es importante. Lo importante es que tienen los suyos y son estas rosas espaciando. Veamos un ejemplo Imagina que quiero decir para poner una foto aquí. Y lo importante es que esta foto en altura va a ser múltiple fuera ocho con esto , lo cual es bueno. Y pero Pero lo importante también es cuando estamos configurando un texto. Ah, pero lo importante aquí en cambio, fuera en este tipo de valores no sé qué son, qué podemos hacer. Dijo múltiplos ocho en este caso, como 32. ¿ Y qué está pasando? Es eso. Déjame adivinar de la justicia. Si yo tuviera los Estes, se puede ver que esta línea 'll. Él empezando aquí, y esta línea está empezando por ahí. De acuerdo, Pero lo más importante es que ahora puedes ver mi texto descansando aquí. De acuerdo, puedes verlo, ¿verdad? Entonces ahora la separación Bueno, veamos que son así ahora la separación entre estos elementos sobre esto es 16 e imagínense. Quiero dedo del pie fuera como un texto Aquí, déjame de mi maravilla Señor suelto y pronto generador. Entonces vamos a traer que estos 2 14 y esto va a ser, como, 24 nuestro para nuestra copia. Vayamos con nuestro generador Señor y Epsom. Entonces vamos en un radio fijo. ¿ De acuerdo? Entonces a veces puedes una lucha trabajar para posicionar las cosas, Pero con esto, no solo pones tus elementos aquí, ¿de acuerdo? Y en este elemento aquí, si quieres ser súper purista, lo que puedes hacer y lo que es una buena práctica es configurar este texto en la línea base es lo que se llama la línea base. Esta donde la salida, lo puedes ver aquí. Se puede sentir bien que es el Texas sentado en nuestra en cada fila, cada espacio turístico, es comer, Está bien. Y esto es bueno porque porque podemos establecer, por ejemplo, podemos decir, Vale, nos vamos como, Bueno, ¿te gusta eso? Podemos decir entre el texto y el título va a ser 24 píxeles con su sido gente de fe entre esto y esto es 16. O quizá podamos decir que queremos decir ahora yo justo lo que quiero todos los destinados a lo grande con lo mismo es basar. Por lo que tienes 20 pixeles aquí tienes 26. Perdón. izquierda hay 16 picks. 16 piezas a la derecha y 24 nos recoge aquí y todo. ¿ Ese es Justin? Perfectamente bien. Y esto debería ser una burla, en realidad. Si lo sabes, las herramientas de prototipado generalmente no alimentan perfectamente su realidad. O lo que vas a ver más adelante, ellos re firman, OK, porque esto debería sentarse aquí y es sí, el pixel que me está volviendo loco, pero es traje aliado ahí dentro, Ok, pero va a depender de tu en tus teléfonos. Pero lo que es importante aquí es este valor, ¿de acuerdo? Porque puedo cambiar el tamaño de la misma y como tú puedas. Y como se puede ver, esto va a seguir en el en el dolor porque número importante es un 30 a la vida ocho. Entonces mientras cosa humana que a esto les gusta odiar en múltiplos del destino, eres bueno para ir. Entonces esto es más o menos un pixel genial y cómo ayuda a diseñar cosas. Y déjenme preguntar, Déjame solo hacer un diseño rápido aquí para que podamos ver cómo vemos es hacia con glitz toe hacer el sistema. Entonces imagínense. Tenemos aquí, como tres elementos. Entonces sólo tenemos que dividirlo aquí para tomar cuatro columnas y justo ahí. Y si ves los elementos aquí y allá en la línea base, todo va a ser orgánico y el hop tiene el mismo espacio, y puedes jugar más con tus saludos si quieres. Al igual que ustedes saben, este tipo fuera de la plaza de Montreal, la señal de que está hecha de cubos. Pero aquí es de donde se trata todo. Es consistente, es agudo. No tienes que tomar decisiones Si estás tratando de diseñar ciegamente, imaginaste tu insumo y coincidiste en ello. Déjenme deshacerme de esto. Cómo sé que vamos a proceder. Algunas cosas las podría poner ahí y poner esto ahí y está ahí y poner este texto aquí y tratar de alinear necesidad por mí o con herramientas. Pero este tipo de azar, ya sabes, y el dedo del pie Dar consistencia al acercamiento. Lo que necesitas es hacer todo este ajuste. OK, Así que OK, así que esto es más o menos el agarre de imagen. Recuerda que Puedes cambiar los valores que te piden. Por favor aquí. Imagina Quieres trabajar con él entonces picks pactados Este valor estaría bien. A lo mejor aquí se pueda. O cinco píxeles se desgarran. Entonces estás bien aquí. Puntera del dedo del pie. Uh, aquí puedes ir con 30. Llegaste ahí. Ponga el con múltiplo de cinco u ocho u 10. Cualquier saludo que decidas ir es bueno. Bien por ti. Está bien, pero recuerda mantener la altura de la línea. Siempre consistente. Entonces veamos cómo replicar esto. Un píxel. Grandes en fuga, Andi en adulto x'd. Si no te interesa esto en el software, solo puedes saltarlo e ir al final de la clase. Está bien, eso nos vemos en la siguiente lección. 5. 5 cuadrícula de 8px en el boceto: Hey, bienvenido de nuevo en estas bendiciones. Vamos a ver cómo hacer que las ocho semanas pactadas y escapadas sean algunas columnas sobre drogas. De acuerdo, entonces para eso sólo vamos a insertar un r cuatro. O puedes presionar un luego seleccionar aquí en Tech Stop HD nuestra guerra, y aquí imbuye Vamos a mostrar diseño. Entonces tenemos, como, cuatro columnas aquí. Y veamos cómo se configura esto por defecto con él que están con off en los 160 píxeles . Recuerda que fuera de curso queremos con columnas no queremos metidos por fuera. Esto es bueno si estás haciendo genial la capa bootstrap. Pero en este caso, estamos haciendo apenas en ocho porque su gran simple Así que no necesitamos reúne en el viejo set. Se puede ver que se está moviendo. Nosotros queremos que tengan con apagado 24. Y nos gustaría tener, como, como, un 8 80 píxeles para la columna con lo que ha pasado aquí en un boceto. Cuando pones estos valores aquí mont eins el total con aquí. Entonces es un poco complicado porque tienes dedo del pie o del pie aumento thes por siento que obtienes los valores que quieres o tienes que hacer. No lo sé, su multiplicación está afuera. De acuerdo, entonces primero necesitas saber el total con lo que vas a conseguir para que no sea tan fácil hacer tu capa esté de acuerdo aquí. Eso para la muerte. Lo que voy a hacer es que él s copia este valor que tenemos en pies mi antes es 1200 2024 . Entonces solo voy a copiar esto aquí y ahora. Vamos a centrar los días. Y ahora tenemos estos ajustes, ¿verdad? Todo lo que queremos 24 picks es para la canaleta. No. Reúnase en el inicio hacia columnas y llamando con apagado 80 píxeles. Centro de prensa aquí. Entonces tu disposición, codicia y tu contenedor se ponen al centro y lo tenemos. OK, ahora tenemos 1/2 hora nuestro contenedor. ¿ Qué instructor? Aquí podemos ver el valor. Está bien. Y nosotros nos queremos. Bueno, volvamos a nuestra configuración de mentirosos. También queremos ahí Rose se instaló en ocho celdas grandes. Por lo que queremos la altura del papel, la distancia multiplicada por la altura del canalón. Entonces, en un caso particular, queremos que haya más para jugar por uno. Entonces es lo mismo para nosotros. Ocho piezas. De acuerdo, entonces podrías dibujar las líneas Ori en algún momento, pero me parece demasiado. Entonces con este ajuste, me siento bastante confiado, ¿de acuerdo? Y nos vamos a ir. Es decir, ahora, todo lo que posicionemos aquí va a ser múltiplos de ocho. Y estamos bien para ir. Entonces esta es nuestra configuración. Y en caso de que los kits de oficina sean buenos porque crea toda la rosa necesaria. Por lo que nunca te quedas sin Rose Light puede suceder en figura. De acuerdo, entonces insertemos otro son para cuatro o más mientras dispositivo. En este caso, podemos ir con estos móviles, los 320 baht antes de que acabemos de configurar el androide. Entonces vamos con el androide. Como vimos en la otra lección, realmente no importa. Um, ¿qué tipo? Suficiente dispositivo Tú también. Porque lo importante no es la columna fuera de la con importante. Lo importante son las canaletas en la separación. De acuerdo, entonces para estos lo que queremos, es Es apoyo nuestro tenemos ahí, ¿recuerdas? ¿ Tienes una la otra vez? Fuimos por 16 pick vende el número de columnas en este caso particular va a ser tres. Empecemos a ver qué está haciendo. A Así se puede ver que el peso total es demasiado. Entonces lo que queremos aquí es recordar, es, um, es 36 60 menos 32 porque queremos, como, 16 piezas a la izquierda y 16 píxeles a la derecha para que podamos hacerlo así. Por lo que nos dio 328 bastante cool. Y ahora les dieron su hierba. Podemos simplemente ir con 16 y luego incentivar estos y el venir con él nos va a dar 93 ¿ verdad? Entonces, sí, esto está bastante apagado. Nuestros están configurados, pero algo algo algo. Tenemos estos se reúnen en el exterior otra vez. No lo queremos. Me preguntaba por qué tanto espacio aquí, pero sí, hay que quitar la canaleta de entrada. No lo queremos a menos que estemos haciendo este tipo de diseño bootstrap. Está bien. Y por el camino, lo mismo. Sí, llegaron ahí. Kate va a cumplir ocho años. Y la altura del papel, recuerda en multiplica por el otro odio. Entonces en este caso en particular, queríamos por uno Así que tenemos, como, consistentes ocho correcciones, reúne y subió aquí. Y sin embargo estamos bien para ir. Entonces si nosotros arbustos y ahora elementos aquí y lo siento, porque para esto no quiero 24. Yo quiero 16 ahí dentro. Tienes bien. Entonces aquí tenemos nuestras columnas y podemos empezar a decidir. ¿ Recuerdas? Nuevamente, como vimos en el pasado. Escucha, que lo importante aquí es trabajar con la posición, todos los elementos separados por la misma cantidad de espacio. Por lo general quieres dedo del pie la mayoría de las veces que quieres separarlo. Lo mismo con esta distancia va a ser lo mismo que la canaleta. Y algunas otras veces. A lo mejor quieres separarlo más. Pero mantener tu espacio es consistente. ¿ De acuerdo? Si te estás separando aquí como 56 celdas grandes aquí, es una buena práctica separarla también. En 56 píxeles o lo que pueda necesitar, recuerda también la altura tumbada o derecha. Entonces aquí en el boceto, misma cosa, Um, tienes dedo puesto aquí en la línea en la sección Heights de la línea y destino múltiple. De acuerdo, entonces para este particular no lo sé. Se puede ir con 72 y si lo vemos aquí, puede ver que casi está tocando la línea de base. Sería como si ocurriera un píxel arriba. Igual que el estigma. Pensado como puedes ver, va a ser dedo del pie estar todo sentado en la línea de base y te va a dar una ciencia más consistente. Entonces vamos por Dennis Lesson, donde vamos a ver cómo crear una gran avaricia de venta en adultos X'd. 6. 6: cuadrícula de 8px en Adobe XD: Hey, bienvenido de nuevo al vientre. Nuestra última lección aquí vamos a ver cómo crear un pixel leyendo en la OPEP de para estas partícula son una. Yo sólo voy a presionar aquí, y como pueden ver, tenemos todas las plantillas por defecto off by evil para estos y vamos a volver a escoger. Andre More Wild One y nosotros. Bueno, vamos a tomar Vamos a por y este bolso de nuevo en Seleccionar un látigo, um, por defecto. Otras X'd hace como tipo de un tamaño diferente para el suceder para estos son jabalíes se mantuvieron fuera 1000 440. Ellos van con esto. Señor Realmente no importa. Usted contendía aquí. Si quieres o deja estos por defecto, está bien. Cosa importante. Es nuestro Es nuestro genial Así que para ver lo grande solo te vas a ver panel y solo puedes presionar aquí resaltador avaricia o si está apagado, puedes venir aquí para ser tú y así deja salir verde también. Cuando estés seleccionando el marco, puedes presionar aquí la codicia y dos solo sacarán eso. De acuerdo, así que empecemos sin son paran la señal así para este caso. Yo solo quiero camino Tener algunos valores anteriores es bastante fácil de hacer. Aquí en Adobe 60 es pedazo de pastel, debo decir los reunidos con nosotros hemos estado usando 24 pixeles para nuestra separación entre columnas y la columna con hemos usado 80. De acuerdo, este es un comportamiento raro para mí, debo decir, porque si estoy tratando de poner a Theis estos valores, siempre está jugando con esto con la canaleta y el conducto. Por lo que tienes el cálculo de remolque también. ¿ Cuánto? ¿ Cuánto quieres de Martine aquí, verdad? Entonces para mí, es un poco molesto si quiero poner mis mismos valores como 24 aquí quiero poner 80. Debería, ya sabes, respetar mis decisiones. Pero esto es como lo importante aquí. Me está poniendo un poco nerviosa. Entonces para estos lo que tengo que hacer, es calcular Bring up the calculator. Entonces tenemos nuestros estos. Este es el número que queremos ser. Nuestros Toby son geniales sentando nuestro o nuestro contenedor. Entonces lo basamos aquí y lo que hacemos, es ah, solo haz que estos descansen y sigan. Este va a ser el margen orbital. Necesitamos dedo del pie para dividirnos por dos. Por lo que 71 va a ser nuestro marketing aquí. Entonces tenemos que ir aquí 71 y ahora, como pueden ver llamando con es 80. Entonces ahora está funcionando. Está bien. Entonces tienes que traer sus calculadoras ópticas tipo fuera Messi y el punto razonable que realmente no me gusta de adoptar X'd mientras hacen lecturas es que no puedo tener las dos al mismo tiempo porque porque no rebaso no me permite que poner como líneas horizontales. De acuerdo, así que bueno, eso es para mí. Apagando una falta de unos pies. Er vamos con la configuración móvil. OK, entonces para este caso en particular, como sabemos, queremos 16 píxeles desde el exterior, fuera de los márgenes y la canaleta con Remember, también estamos usando 16 16 16. No sé qué Así 16 bien, Y las columnas. Quieres un tres, así que está bastante listo. Es bastante fácil hacerlo aquí porque tienes que controlar todos esos ajustes y estás listo para ir. Entonces es que estamos teniendo aquí los mismos valores que teníamos antes, Pero de nuevo, es un poco molesto que no pueda montarme como Rose y tengo que estar cambiando a este tipo fuera de una plaza y, sí, tienes que poner tu talla cuadrada en ocho. Entonces es nuestro son geniales, pero no puedo tener a ambos fuera de ellos al mismo tiempo. En este caso en particular, si quieres dedo del pie, uh, para hacer tu como un honoree de la codicia basal, a veces tienes que empezar a poner como son como guías. De acuerdo, entonces es tan, uh, para mí, algo falta aquí. Algo importante. Si quieres usar, como, como, un súper apretado, lo recoge con. Pero así es como haces el gran salario que Adobe 60. Y espero que disfruten de estos tutorial. Entonces vamos al video final Y donde te voy a decir enhorabuena por terminar. Entonces nos vemos en el siguiente video. Gracias. 7. 7: felicidades: Hola ahí. Por lo que felicitaciones. Terminas tu maquetación. Curso. Por lo que espero que hayas aprendido todo el dedo del pie para que puedas desarrollar a tu jugador. Grandes habilidades. Por lo que hemos estado cubriendo actualizaciones de pósters e imágenes. Dejar de fumar. Y si te gustan estos videos, espero que me sigas. Por lo que hoy estás levantado. Toe tutoriales nuevos. Y si te gusta, entonces revisión hepática Para que otras personas puedan encontrar su curso más fácilmente. Y sí, gracias por unirte. Y espero que tuvieras una gran experiencia. Gracias.