Aprender diseño web con Adobe Xd: diseña sitios web profesionales desde cero: diseño de UI y UX

1. Aprende Adobe Xd : diseñar sitios profesionales desde cero con cero en los tesoro, UI UX Design Design: Bienvenido al curso Adobe XD Mastery donde aprenderás a crear un hermoso sitio web para web y móvil de principio a fin mientras tienes un gran flujo de trabajo. Oye soy Reno y seré tu instructor para este curso. Descubrí mi pasión por el diseño hace casi 10 años y por eso fui a la escuela de diseño donde aprendí lo básico sobre el diseño. Empecé un canal de YouTube donde compartí todo lo que había aprendido. Este canal de YouTube me dio suficiente exposición para iniciar mi primera empresa de diseño con mis amigos, y trabajamos para muchas empresas más pequeñas pero también para unas cuantas grandes marcas como Coca-Cola, Microsoft y Adobe. Eso fue realmente genial. Actualmente, paso la mayor parte de mi tiempo enseñando en línea porque eso es lo que realmente me encanta hacer. Diseñé este curso para cualquiera que quiera aprender a diseñar sitios web con Adobe XD. Hay muchos cursos de Adobe XD de lujo sobre diseño de aplicaciones, pero en este curso nos vamos a centrar en el diseño web. Porque de manera realista, ahí es donde la mayoría de nosotros empezamos como diseñadores de UI que quieren ganar dinero con nuestras habilidades. Pero diseñaremos un sitio web completo con cuatro páginas y unos diseños separados, y te proporcionaré todas las imágenes, los iconos y las fuentes que se utilizan para crear estos sitios web, que puedas seguir conmigo. Empezaremos de manera fácil y poco a poco trabajaremos más rápido para que tengas tiempo suficiente para familiarizarte con Adobe XD. Al finalizar este curso, podrás trabajar con Adobe XD para crear páginas web y móviles. El método que voy a enseñar es muy poderoso porque te permitirá reutilizar ciertos elementos que solo tendrás que crear una vez. Después de que termines con la página principal, las cosas se pondrían realmente fáciles y rápidas. También te mostraré algunos de los trucos de diseño que se utilizan para hacer que mis diseños se vean mejor. Esto significa que no vamos a entrar realmente en profundidad en la teoría del diseño, porque el objetivo de este curso es enseñarte Adobe XD. Este curso es para cualquier persona que tenga interés en el diseño web y quiera aprender Adobe XD, pero es especialmente bueno para las personas que utilizan Photoshop o Illustrator en este momento diseñar sus sitios web. Porque una vez que has diseñado un sitio web en Adobe XD, creo que no volverás a Photoshop o Illustrator. Por ejemplo, basta con mirar la herramienta Repetir rejillas. Todo el camino Adobe XD permite insertar imágenes, cambiar el color o hacer que páginas enteras se puedan hacer clic con la herramienta de creación de prototipos. Es solo una herramienta increíble para el diseño de la interfaz de usuario. Entonces si te interesa aprender Adobe XD, entonces espero verte en el siguiente video. 2. ¡Bienvenido a el curso! Qué esperar: Muy bien, bienvenido dentro del Gore. Muchas gracias por inscribirse. Estoy muy emocionado de empezar. Tengo muchas cosas preparadas para ti. Yo quiero decir algunas cosas antes de empezar primero lo primero. El capítulo 1 trata de lo básico. Iremos muy despacio al Capítulo 1, porque realmente quiero asegurarme de que conozcas las claves de las teclas cortas y cómo moverte, cómo alinear las cosas, porque eso te facilitará mucho las cosas en el futuro. La forma en que uso mis atajos la forma en que hago zoom, la forma en que selecciono elementos. Si sólo trataste de aprender lo que hago, va a ser mucho más fácil para ti. Por eso el Capítulo 1 es realmente una inmersión profunda en el control, las alineaciones, los colores y todo. Entonces una vez que empieces a diseñar la Página Principal, la Página Principal tomará algunos episodios. Pero entonces, como dije en el trailer, las otras páginas irán muy rápido porque el método que voy a enseñar en este curso es realmente eficiente. Prepara muchas cosas por delante y luego puedes copiar y reutilizar muchos elementos para crear tus páginas más rápido. Después de haber completado todo este curso y hecho todos los pasos, incluso puedes usar estos elementos para otro proyecto. Porque para cada proyecto necesitas cosas como títulos, necesitas texto, necesitas botones. Entonces si tienes un nuevo proyecto, solo cambias los estilos y luego puedes reutilizar eso en otros proyectos. Yo quiero asegurarme de que te pegues a ella porque realmente quiero que obtengas un resultado. Si tienes alguna pregunta, solo puedes dejarlas abajo. Entonces espero que realmente disfruten del curso. Espero verte en el próximo Episodio. 3. Aquí son tus descargas (no olvides instalar las fuentes): Muy bien chicos. Estoy súper emocionado de sumergirme en Adobe XD. Primero lo primero, lo he hecho es muy fácil para ti para que puedas seguir conmigo. He creado esta carpeta la cual puedes descargar. En esta carpeta encontrarás el primer archivo de ejercicios que vamos a abrir en el siguiente video. Encontrarás mi diseño final. Encontrarás muchas fuentes gratuitas que puedes instalar, y todos los archivos que necesitas para crear el sitio web. Lo que quiero que hagas es ir al enlace de abajo y luego irás a una página. Lo que vas a hacer es hacer clic en descargar, descargar el archivo zip en tu computadora y extraerlo en tu computadora. Si estás en un Mac, solo puedes hacer clic con el botón derecho y hacer clic en extraer. Si estás en un Windows, también puedes hacerlo si tienes instalado WinZip o WinRAR en tu equipo. En la mayoría de las computadoras ya está instalado. Se puede ver extracto con WinRAR o WinZip. Si aún no tienes eso en tu computadora puedes descargar eso de forma gratuita, solo escribiendo en Google, WinRAR o WinZip. Una vez que tengas eso puedes ver todos los archivos que hay dentro. Entonces lo primero antes de que vayas a hacer clic en un archivo XD es que vas a instalar las fuentes, porque he usado fuentes específicas dentro de mis archivos de diseño. Si solo abres esto antes de instalar las fuentes, no puedes ver las fuentes que he usado. Lo que quiero que hagas es pasar por la carpeta de fuentes por aquí y seleccionar todas las fuentes. Si estás en un Windows entonces haz clic con el botón derecho y haz clic en instalar. Si estás en un Mac, necesitas abrir libro de fuentes. Simplemente ve a tu libro de fuentes, abre tu libro de fuentes, y luego solo arrastra todas las fuentes del interior aquí. Simplemente insértalos en esta lista. Ya lo he hecho, así que no lo volveré a hacer. Entonces estás totalmente preparado para ir al siguiente episodio donde vamos a abrir nuestro primer ejercicio, un archivo básico. Instala las fuentes y te veo en el siguiente video. 4. Conceptos básicos de Adobe Interface: Bienvenido de nuevo en el episodio anterior, hemos descargado todos los archivos que necesitamos y ahora vamos a entrar al archivo Básico. Esta es la pantalla de inicio cuando abres Adobe XD por primera vez. Veo todos mis archivos de razones por aquí, probablemente no vas a ver eso si nunca has abierto XD y también te dan algunas opciones para crear un nuevo todo parte. Pero por ahora, he creado un archivo Basic muy sencillo que estaremos cubriendo, así que basta con hacer doble clic en el “ Archivo Básico ” y lo primero que vas a ver es esto. Los fundamentos de lo básico. Estoy asumiendo que la mayoría de las personas que vieron este curso ya tienen un poco de experiencia en crear un software. A lo mejor has trabajado en Photoshop, en Illustrator, tal vez incluso en herramientas como Premiere Pro o After Effects. Entonces muchas de las cosas son iguales en Adobe XD, pero hay algunas diferencias clave, por lo que incluso si eres completamente nuevo para crear un software y esto será fácil de seguir. Pero si tienes un poco de experiencia, entenderás esto realmente rápido. Lo primero es lo primero, la “Barra espaciadora” son las herramientas de movimiento. Si presionas esta “Barra espaciadora”, si vas a ver que tu ratón cambiará en una mano y podrás moverte en la pantalla, así que solo tienes que hacer clic y arrastrar para moverte. Entonces si quieres acercar, hay diferentes opciones, hay diferentes opciones, pero la opción más fácil y la opción que siempre uso y es la más rápida en mi opinión, es el “Alt” más “Scroll”, así que si tienes un ratón, puedes pulsar “Alt” y luego “Scroll”, y donde colocas el ratón es donde se va a acercar. Si no tienes ratón, también te mostraré algunas opciones, pero esta es la opción más fácil. Ahora estoy presionando “Alt” y me estoy desplazando con el ratón, así que acercaré a este círculo. Lo mismo si quiero acercar esta parte, pero muevo mi ratón y acerco a esa parte. Si no tienes un mouse y tienes un trackpad, puedes usar solo el zoom, la misma manera que haces zoom en un smartphone, para acercar una foto, puedes usar dos dedos y luego acercar un área específica. Si no quieres moverte, también puedes usar la “Barra espaciadora” y moverla así o usar dos dedos y luego simplemente moverte a dos dedos en la misma dirección y de esta manera, también puedes moverte muy suavemente dentro de tu Lienzo, por lo que esta también es una manera agradable. Digamos que no tienes trackpad y no tienes ratón, lo cual no recomiendo. Te recomiendo usar un ratón mientras estás diseñando. También pueden usar la herramienta por aquí a la izquierda y solo puedes seleccionar una parte como esta y luego hacer zoom, y luego si presionas “Alt”, puedes hacer zoom hacia atrás. Pero nunca usé como herramienta, acabo de usar el ratón, así que vuelve a la herramienta de selección y luego presiona “Espacio” y presiona “Alt” para alejar, presiona “Alt” para acercar, y simplemente familiarízate con el zoom. Simplemente pruébalo por ti mismo y asegúrate de entender cómo funciona esto. Son tres cositas más que quiero mostrarles. En primer lugar es la herramienta de movimiento, por lo que si quieres mover un elemento, solo tienes que hacer clic y arrastrar el elemento a cualquier ubicación que desees. Haga clic y arrastre, y sucederá fuera de los tiempos que mueva un elemento en extender. No querías hacer eso, así que entonces necesitas dar un paso atrás. Puedes hacer eso por aquí, “Editar” y luego “Deshacer Mover objeto” así y puedes hacerlo de nuevo. Boom, y luego estás de vuelta y como pudiste ver, hay un atajo por aquí y se llama Comando Z o en un Windows es Control Z. Si solo lo mueves así y presionas “Comando Z” o “Control Z”, simplemente retrocederá. Si fueras como no, era mejor en ese viejo lugar, solo estás presionando “Comando Z” pero luego con “Shift” y luego volverá como puedes ver por aquí, así que eso es todo lo que necesitas saber para todo dentro de este espacio. También tenemos un bar por aquí. Hemos hablado de la herramienta de selección, por lo que si tienes seleccionada la herramienta de selección, puedes seleccionar cosas. Si tienes la herramienta de rectángulo, puedes crear rectángulos como este. Si quieres perfeccionar el rectángulo, solo usa “Shift”, así es como creas un rectángulo perfecto. Entonces si quieres liberarlo, asegúrate de que primero sueltas el mouse y luego sueltas el “Shift”. Esto es importante porque si lo haces al revés, así que primero sueltas el “Shift, luego va a saltar hacia atrás, así que primero soltó el ratón y luego suelta el “Shift” para hacer un rectángulo perfecto. Esto funciona igual para el círculo, así que basta con hacer click en el círculo si quieres crear un círculo perfecto, pulsa “Shift”, boom. Primero lanzó un ratón y luego suelta el “Shift”, y luego tendrás un círculo perfecto. Lo mismo para los rectángulos, bastante fácil y con líneas, simplemente creará una línea horizontal o diagonal o vertical. Si utilizas el “Shift” y de lo contrario solo podrías usar cualquier dirección que desees. El lápiz del que vamos a hablar de eso en un video futuro. El instrumento de texto, si vas a dar click en la “Herramienta de texto”, solo puedes presionar en cualquier lugar y puedes empezar a escribir lo que quieras, y luego si quieres volver atrás y quieres seleccionar un texto, tienes que volver a la herramienta de selección y luego puedes seleccionarlo. Esto es lo mismo para todas las demás herramientas, así que si estás dentro de la herramienta de rectángulo, por ejemplo, y estás dentro de aquí. Se quiere mover este rectángulo, hay que volver a la herramienta de movimiento, y como atajo para esto, que es “V”, esta es una de las teclas que vas a usar una y otra vez, que puedas escribir esto abajo si quieres. Pero esta es una de las cosas que usarás muy a menudo. Mi cursor en este momento no es un cursor normal del ratón. Como puedes ver, eso son pequeños rectángulos, así que entonces sabes que estás en un rectángulo para ver si puedes ver ahora mismo es un círculo, ahora mismo es un rectángulo, y luego si presiono “V”, voy a volver a la mudanza herramienta y puedo mover esas cosas alrededor. Incluso puedo seleccionar diferentes cosas presionando y sosteniendo así y luego los borrándolos con la herramienta de retroceso como esta, bastante fácil. Entonces lo último de lo básico que quería mostrar es el panel de propiedades, porque ahora hablamos de esta parte. Ahora, también hay una gran parte por aquí con muchas opciones, así que si haces clic en un ítem, obtendrás muchas opciones para ese ítem. El elemento que tiene un contorno azul que ahora está seleccionado y ahora puedes cambiar estos ajustes por aquí. Por ejemplo, este es el tamaño de fuente. Si haces clic en esto y escribes 60, por ejemplo, este texto va a ser más grande. Ahora mismo, voy a volver a ponerlo a los 52. Si quieres cambiar el color de los textos, vas por aquí para rellenar color. Simplemente puedes cambiar el color por aquí a otro color que quieras, así que tal vez algo como esto, morado, pero también puedes usar la herramienta de títeres por aquí y esto es realmente bonito. Tienen una clave corta finalmente para esta edición, porque no tenían esto en una versión anterior, ahora está bajo “I” o simplemente haz clic en esto y aquí puedes seleccionar un color que quieras, así que por ejemplo, este color, y luego va a cambiar. Si solo usas el “yo”, solo puedes presionar “yo” y ser como, oh, tal vez este color es bonito, tal vez este color es bonito, y tal vez este color es bonito, por lo que en este panel derecho puedes cambiar el color a cualquier otro color que desee. Por aquí, esta es la posición, así que si cambias esto a 300 va a cambiar la posición. Soy más como un diseñador visual, así que solo me gusta mover las cosas en la mesa de trabajo y realmente no echar un vistazo a esto. Pero a veces si quieres crear un círculo que sea, por ejemplo, 50 por 50 píxeles, puedes cambiarlo aquí. Este es el ancho, esta es la altura, la posición X e Y en el Lienzo. Eso es realmente todo lo que necesitas saber sobre este panel lateral por ahora. Eso es lo básico para el movimiento y el cambio de objetos. En el siguiente video, vamos a hablar del panel de capas. 5. Comprender las capas en Xd: Está bien. Entonces en este video vamos a sumergirnos en el panel de capas. Esto es importante de entender. Realmente no vas a pasar mucho tiempo aquí pero si no entiendes esto te vas a meter en problemas. Entonces, solo pinchemos en el panel de capas. Lo vas a abrir haciendo clic aquí, y ahora sólo se puede ver una mesa de trabajo y una mesa de pasteboard. Si haces clic dentro de tu mesa de trabajo, vas a ir dentro de todas las capas que están dentro de esta mesa de trabajo. Se pueden ver diferentes cosas por aquí por ejemplo, todos estos círculos que se pueden ver por aquí, se pueden ver las capas de texto, y se pueden ver las, unas cuantas carpetas por aquí. Si haces clic en un elemento se iluminará en azul claro. Si seleccionas más artículos de una vez, entonces también se iluminará en azul para que sepas cuál es la capa. Entonces, por ejemplo, si estás diseñando y quieres ver cómo se ve tu diseño sin esta caja, puedes ir por aquí y presionar el ojo y eso ocultará esta capa. Por lo que no se podrá hacer clic pero aún así se guardará dentro de su panel de capas. Lo que también puedes hacer es bloquear esta capa, esta también es una característica bonita porque entonces será visible, pero habrá este candado. Entonces, por ejemplo, si tienes muchos otros artículos superpuestos, y no quieres que este ítem se mueva si estás moviendo otras cosas, así que por ejemplo, estás seleccionando muchos artículos por aquí que quieres mover, y luego también se seleccionará la capa que tiene bloqueada pero no se moverá porque está bloqueada. Entonces esta también es una de las cosas bonitas que puedes hacer, y no sugiero que entres al panel Capas y hagas click en bloqueo porque también puedes usar comandos o Control L. Así que esto es lo que siempre hago, solo presiono Comando L para bloquear o desbloquearlo. Lo que también puedes ver es que esta capa o este grupo debo decir, está por encima de esta caja visualmente. Esto también es cierto en el panel de capas. Entonces si quieres mover esta caja debajo de la caja principal, lo que debes hacer es hacer clic en el cuadro de imagen y luego moverla debajo. Así que asegúrate de ver esta línea azul, con un círculo al principio y luego soltarlo así que ahora, esto está debajo de la caja principal. En realidad, esta caja ahora está por debajo de todas las capas así que aunque la movamos hacia arriba, vas a ver que está por debajo de todas las capas. Entonces como dije, si quieres mover esta caja todo el camino hasta la parte superior, puedes hacerlo así pero no aconsejo usar el panel Capas en absoluto, y solo usar teclas cortas, porque también puedes hacerlo con teclas cortas. Entonces si presionas Comando, y luego los corchetes, también puedes traerlo lentamente hacia atrás un paso a la vez. Abriré el panel de capas para mostrarte lo que estoy haciendo. Entonces si utilizas a tecla de corchete derecho subirá con comandos, por lo que comanda corchetes derechazos o izquierda, entonces subiremos o bajaremos. Así que prueba esto por ti mismo y ve cómo funciona. Entonces si quieres moverlo todo el camino hasta la parte superior, también agrega Shift. Entonces estás presionando Control o Comandos, luego Shift, y luego los corchetes correctos. Entonces así es como lo mueves todo el camino arriba o todo el camino hacia abajo. Yo uso esto todo el tiempo por lo que aconsejo que también anote este. Está bien. Entonces eso es todo para el panel Capa. 6. Selecciónar, mover y duplicar: Bienvenido de nuevo. En este video, vamos a sumergirnos en Selección. Al seleccionar elementos, mover elementos es una parte esencial de Adobe XD. Vamos a cubrir primero algunos de los conceptos básicos. Por ejemplo, si quieres copiar esto, dos veces. Lo que puedes hacer es presionar Alt, y luego arrastrarlo hacia la izquierda. Presione Alt, haga clic en él y arrastre. De esta manera se puede hacer un duplicado, como se puede ver. Haz eso una vez más y luego suelta. Para practicarlo una vez más, lo voy a borrar. Asegúrate de que cuando estés duplicando, primero sueltas el clic del ratón y luego el Alt. Ahora por ejemplo, si quieres probar cómo se ve cuando arrastras esas dos cajas hacia abajo, puedes arrastrarlas hacia abajo así o puedes hacerlo al mismo tiempo. Eso se puede hacer con Shift. Si haces clic en un elemento y vas a mantener pulsado Shift, entonces puedes seleccionar dos elementos. Como puedes ver en el panel de capas ahora, se seleccionan dos elementos, por lo que puedes arrastrar eso hacia abajo. Ahora si sostengo Shift, no va a salir fuera de la línea vertical. Esto es lo mismo para lo horizontal. Voy a volver. Si quieres seleccionar esos tres, vas a hacer click, Shift, click, click. Simplemente estás sosteniendo Shift y haces clic en lo que quieras en esta Selección para moverlo. Otro truco que quiero mostrarte es la Selección con Comando. Si algo está dentro de un grupo, por ejemplo, tenemos un cuadro Imagen por aquí, y luego puedes ver el Botón que también es una carpeta. Por ejemplo, si desea seleccionar este texto, lo que normalmente haría es hacer clic, desea hacer doble clic, doble clic, hacer doble clic, hacer doble clic y luego tener el texto. Eso significa que debes hacer click ocho veces. Si quieres omitir eso, solo tienes que pulsar Comando, como puedes ver, solo puedes seleccionar a través de todas las carpetas o grupos. Recientemente, han agregado una nueva característica que es realmente agradable. Digamos que quieres cambiar el color de todo el texto aquí. Normalmente, no podías hacer eso, pero ahora puedes. Si presionas Comando y luego vas a este, presionas Mayús, por lo que presionas Mayús y Comando, porque Comando haces clic a través todas las capas y con Mayús puedes seleccionar múltiples cosas. Ahora, se pueden seleccionar diferentes cosas, pesar de que están dentro de diferentes carpetas o grupos. Esto no era posible antes, así que esto es super agradable. Ahora puedes, por ejemplo, cambiar la opacidad. No vamos a hacer eso en este diseño, pero eso es lo que quería mostrarles. Como mostré antes, también puedes seleccionar los diferentes elementos simplemente arrastrando, pero a veces tienes un fondo. Por ejemplo, si tenemos esta carpeta y esto está encima de aquí, y lo vas a seleccionar así, también seleccionas el fondo, eso no es lo que siempre quieres. Simplemente haz clic en Mayús, haz clic y haz clic en. Ahora, puedes arrastrarlos hacia abajo. Digamos que te gusta usar esta función, y también has seleccionado el fondo. Se puede anular la selección del fondo. Déjame cerrar la carpeta, para que veas lo que estamos haciendo aquí. Voy a seleccionar todos esos. Ahora, si presiono Shift y voy a dar clic en el cuadro principal, grande, va a anular la selección de esa casilla principal. Ahora, sólo puedo mover estas tres partes, pesar de que empecé con toda la Selección así. Nuevamente, seleccionas todo y luego presionas Mayús para lo que no quieres dentro de esa Selección y luego podrás mover todas las demás partes. Está bien, por ahora lo voy a mover hacia atrás. Voy a seleccionar esos. Voy a presionar Shift, va a bajar y voy a dejarlo así. Eso es para la Selección, muy fácil, pero algo muy importante a saber. 7. Fundamentos de la alineación: Bienvenido de nuevo. En este episodio, vamos a hablar de alineación, también cosa muy importante en Adobe XD, pero en el diseño web en general. Si no alineas tus objetos correctamente y no entiendes el espaciado en blanco, tus diseños se verán desordenados. Lo que les voy a mostrar en este momento es cómo alinearse correctamente en Adobe XD. Como probablemente ya viste, es que si mueves un elemento en Adobe XD, aparecerán muchos números morados y a veces incluso estas cajas. Esas cajas son muy bonitas porque te dirán cuál es la distancia entre esos elementos. Adobe XD mirará la distancia entre los elementos y luego te dirá, oye, ¿quieres el mismo espaciado por aquí? Muchas veces quieres eso, así que es muy agradable usar esa característica. Vayamos a este texto por aquí. Por ejemplo, si voy a arrastrar este texto Adobe XD en algún momento será como, hey, ¿también quieres 10 píxeles de esto a este texto, lo mismo que tienes por aquí. Eso es lo que puedes hacer. Los números que vas a ver en la pantalla son los píxeles. El posicionamiento de un artículo, puedes ver por aquí, así que si vas a cambiar esto, el número de aquí va a cambiar también. Ahora sólo lo voy a dejar a los 30 porque ese es el mismo espaciado que tenemos aquí. Pero tengo que mostrarles una cosa y es que contará el espacio desde la parte inferior de sus campos de texto. Por ejemplo, calculará un espacio como se puede ver no a la parte inferior de este texto, sino a la parte inferior de estos campos de texto. Si hago este campo de texto un poco más pequeño, entonces serán nueve píxeles más como puedes ver. Esa es una de las cosas importantes que debes saber sobre la herramienta de alineación. Lo que también es una característica realmente bonita es que puedes alinear artículos muy rápidamente sin tratar de hacerlo así. Por ejemplo, si tienes un diseñador muy desordenado como este, lo que puedes hacer es seleccionar todos tus artículos y luego puedes moverlos a la parte superior. Aquí están las herramientas de alineación. Por ejemplo, si quieres tener este ítem en medio de tu lienzo, solo tienes que dar click en él y darás click en éste. Ahora está perfectamente alineado en el medio. Lo que también puedes hacer con esta herramienta es asegurarte de que, por ejemplo, este botón esté en medio de toda esta caja. Por ejemplo, si tienes un botón largo como este y quieres que el botón esté exactamente en el medio o solo digamos estos textos, quieres tener este texto en medio de este botón. Lo que puedes hacer es seleccionar un texto en el botón y luego puedes usar la herramienta de alineación. Te voy a mostrar, vas a presionar Comando, click en el texto, presionar Mayús y luego dar clic en el botón. Ahora tengo que enviar un texto y el botón seleccionado, y luego si hago clic en esto, va a alinear mi texto exactamente en el medio. Esta es una de esas cosas que es simplemente super agradable para trabajar. También si quiero alinear este botón en medio de esta caja, puedo hacerlo con el mismo truco también. Pero para este ejemplo, si voy a alinear esto, entonces no se alineará con mis textos y el título. Para este ejemplo, solo quiero saber cuál es la distancia entre esto y también quiero aplicarlo por aquí. Simplemente puedes seleccionar los botones, así que haz doble clic sobre él y asegúrate de tener el botón con el texto. Ahora si vas a disminuir o aumentar el tamaño, XD automáticamente sabe que quieres que este artículo esté en el medio. ¿ Cómo sabe eso XD? Bueno, ellos lo saben porque acabas de alinear este texto en el medio. A pesar de que este texto está alineado a la izquierda, XD comprenderá incluso que se quiere tener esto en el medio. Si quieres obtener la distancia de esto a este distintivo, vas a presionar Alt y luego vas a ver que se trata de 50 píxeles. Si solo quieres lo mismo del otro lado, lo que puedes hacer es aumentarlo con tu ratón para que sea 50. O si sabes que este es 50 y sabes que ahora mismo son 62, entonces sabes que solo necesitas 12 píxeles más. Por lo que solo puedes ir por aquí y teclear plus 12 y boom. Ahora está en 290 y ahora solo sabes que esto está perfectamente alineado. De acuerdo, así que digamos que quieres que estos artículos estén perfectamente alineados debajo de esta caja principal. Lo que vas a hacer es que te vas a asegurar que uno de esos artículos solo esté tocando el exterior de la caja, no importa, y el otro también quieres tener eso. Incluso puedes tenerlo así siempre y cuando esté alineado al exterior de esa caja. Ahora incluso si este artículo es como aquí, puedes seleccionarlos todos y alinearlos a la parte superior así, por lo que todos estarán alineados y luego usar esto. Si hace clic en distribuir horizontalmente, calculará el espacio entre los elementos. Vas a tenerlo así, así que esto es super bonito. Ahora solo puedes agarrarlos todos y hacerlos también 50 pixeles a esta caja principal, y ahora tu alineación se ve bastante bonita. Una vez más para practicar esto. Digamos que esto está por todo el lugar que los seleccionas, los haces, por ejemplo, en el medio alinear y luego haces clic en este y el espacio entre esos elementos será el mismo. Si aún piensas que esto es difícil, Adobe XD ha lanzado una nueva función y eso se llama Rulers. Si has utilizado Photoshop o Illustrator, ya lo sabes. Pero si vas al sitio de tu tablero de arte, por ejemplo, tenemos la misma situación como esta por aquí y realmente no ves esta línea, lo que puedes hacer es hacer click en este ítem, luego ir a un costado y luego rastrear en una regla y simplemente hazlo clip a un lado. Haz eso también de este lado así. Boom, simplemente se pegará como ves. Entonces puedes simplemente alinearlo muy fácilmente a esas partes, seleccionarlas, hacerlas igual que ya estaba y luego ponerlo así, seleccionarlas todas y hacerlas 50 píxeles al otro elemento. Por cierto, también puedes mover elementos que son teclas de flecha. Con un solo clic se moverá sobre pixel. Si utilizas estos turnos, puedes mover 10 píxeles. Ahora esto es 44, así que ahora solo necesito que lo hagan 50 pixeles así. Eso es todo, si quieres quitarlos, solo puedes dirigirlos de lado y boom, ahora se han ido. Bastante fácil de usar y hará que tu diseño luzca mucho mejor. De acuerdo, así que eso es todo para este episodio.Te veo en el siguiente video. 8. El panel de recursos muy útiles: Bienvenido de nuevo. En este episodio vamos a echar un vistazo a la columna de activos. Puedes encontrar la columna de activos por aquí. Si haces clic, lo vas a abrir. Esta es también una de esas cosas que los diseñadores iniciadores no usan con tanta frecuencia. Pero es tan importante, porque si usas esto, hará que tu diseño luzca mucho mejor. Porque no vas por todo el lugar con tus fuentes y los colores que sean. Lo que quiero mostrarles es algo muy bonito. Por ejemplo, si tienes tus colores por aquí, esta es una paletas de colores. Es súper bonito tener esto en algún lugar de tus diseños para que solo puedas usar el ojo para escoger un color. Pero lo que es aún más agradable es usar los activos. Por ejemplo, si voy a seleccionar todas estas capas, puedo hacer click aquí y un color, puedo dar click en el plus. Ahora todos los colores con los códigos hex reales serán ediciones a los activos de color. Esto significa que si voy a cambiar un color por aquí, cambiará en todos los documentos. Por ejemplo, tenemos este morado por aquí. Este es el mismo morado en todos los títulos y los botones. Solo veamos que es 7768CC, como puedes ver 7768CC. Ahora, digamos que estás trabajando para un cliente o tienes tu propia página web y has decidido que ya no te gusta el diseño y quieres tener el azul como color principal. Bueno, si tienes un sitio web grande y solo quieres cambiar todos los colores, solo necesitas encontrar todas esas capas. Solo necesitas ir dentro de 100 capas diferentes o tal vez incluso más que eso. Es horrible. Es por ello que uso los activos. Ahora bien, si voy a dar clic en editar aquí en los activos y sé que estos colores son todos conjuntos a ese mismo color. Ahora puedo cambiarlo y cambiarán todos los elementos dentro de mi documento, como se puede ver aquí. Esta es una forma muy rápida de probar los diferentes colores en tu diseño. Ahora solo voy a dar clic fuera de él y presionar Control Z para volver. Pero supongo que entiendes por qué esto es tan útil en este momento. Esto también es cierto para las capas de texto. Por ejemplo, si he preparado algunos bloques de texto por aquí y quiero que este texto sea los textos en todos los textos principales de mi página web. Se trata de 18 píxeles y sus 28 píxeles en altura de línea. Es decir, por cierto, la altura entre las filas. Si disminuyo esto, lo vas a ver que va a cambiar. También estoy contento con el color. Lo que ahora puedo hacer es, voy a añadir un estilo de personaje. Ahora agregará un estilo de personaje. Ahora, si voy a ir a este, veamos qué es esto. Se trata de 16. Digamos que aquí quiero tener lo mismo. Simplemente puedo dar click en esto y ahora va a cambiar. Ahora todos estos están vinculados a los personajes de aquí. Es el mismo principio. Si hago clic en editar e incluso, digamos que quiero otra fuente arial, cambiará en todos los documentos. Voy a volver a ponerlo en montserrat ahora mismo. Incluso puedes cambiar el color del texto si quieres gustarte esto, porque el color también se guarda dentro de este estilo de personaje como puedes ver aquí. Ahora, te mostraré un ejemplo de la vida real. Si vuelves al buscador, puedes abrir mi diseño final, archivo Rino. Basta con dar click sobre él y se abrirá. Como pueden ver he añadido muchos más estilos de carácter en este documento por aquí. Si vas a acercar, vas a ver que tengo diferentes estilos para este sitio web. Por ejemplo, este título de aquí es 36. También se puede ver eso por aquí. Es lo mismo para este título. Pero también he añadido estilos de carácter, 40 colores diferentes como se puede ver por aquí. Hay una última característica que no voy a mostrar en este momento, pero esto son componentes, también forma parte de la columna de activos. Esto es por ejemplo, si tienes un diseño de pie de página que quieres repetir en todas tus páginas y quieres el mismo diseño en todas las páginas, vas a usar los componentes. Pero eso es todo por ahora. Solo necesitas conocer los estilos de carácter y los colores. Ya casi terminamos con lo básico por lo que te veré en el siguiente video. 9. Tableros de arte. Todo lo que necesitas para saber.: Mesas de trabajo, ¿por qué usas mesas de trabajo? Bueno principalmente para páginas. Si vuelvo a mi archivo de diseño final. Como pueden ver en este diseño si voy a cerrar éste. He nombrado a mis mesas de trabajo. Esta es la mesa de trabajo para mi página de inicio. Entonces tengo una mesa de trabajo diferente para la página de diseño Home Mobile y luego para la página de Portfolio y como puedes ver, estas son las mesas de trabajo que he creado y les he dado un nombre. Puedes cambiar el nombre de tu mesa de trabajo con solo hacer doble clic en ella, por ejemplo, este es el V1. Yo lo he nombrado, pero también se puede cambiar eso a Vietnam, por ejemplo, y éste a Indonesia. De esta forma solo puedes estructurar tu diseño. Algo que tienes que saber si te alejas demasiado, vas a ver esos puntos. Necesitas acercar un poco para ver los nombres reales. Se quiere trabajar con los nombres de sus mesas de trabajo. No solo es agradable para tu propio flujo de trabajo, sino que esto también es importante si vas a trabajar con el prototipo en el futuro. Porque con el prototipo también, puedes simplemente hacer clic derecho y luego buscar el nombre de la mesa de trabajo a la que quieres enlazar. Te sugiero que siempre solo uses buenos nombres en tus mesas de trabajo. ¿ Cómo se crea una nueva mesa de trabajo? Volvamos al expediente del ejercicio. Simplemente puedes copiarlo de la misma manera que copias elementos con solo mantener presionada Alt y luego rastrearlo, algo así y luego puedes cambiar el nombre a mesa de trabajo 2, por ejemplo, o puedes hacer clic en la herramienta de mesa de trabajo por aquí. Voy a cerrar éste y luego se pueden ver todas las opciones de mesa de trabajo por aquí. Se puede utilizar una Web, por ejemplo, 1366. Eso es lo que puedes hacer. Puedes arrastrar una mesa de trabajo si quieres. Pero lo que hago la mayor parte del tiempo es solo hacer una buena mesa de trabajo y luego simplemente duplicé. Pero si quiero un diseño móvil, solo iré a las mesas de trabajo e iré a iPhones 6/7/8 y luego solo puedo hacer que esa mesa de trabajo sea mucho más grande si es necesario. Lo que también verás es esta línea azul por aquí. Esta es la posición de desplazamiento. Si vuelves a mi archivo de diseño final, puedes verlo por aquí también. En la página de diseño móvil, se puede ver que la línea está por aquí. Esta es solo la posición estándar y lo necesitarás si vas a dar click en jugar aquí. Alejemos un poco y si vas a hacer click en play, obtendrás una vista previa de tu diseño. Ahora la posición de desplazamiento está en la parte inferior por aquí, y esto parece bastante normal, pero si cambio esta posición, voy a copiar el valor, así que no lo olvidaré. Si vas a cambiar la posición así y luego vas a presionar play, vas a conseguir una vista previa como esta y eso es por supuesto, no lo que quieres. Quieres un diseño de teléfono normal y por eso debes mantenerlo en eso y esto es súper bonito si vas a hacer un prototipo o solo quieres mostrarle tu diseño a alguien más. También puedes hacer esto para tu página de inicio, por ejemplo, realmente no lo tengo en esta página de inicio aquí porque establece un none, pero puedes configurarlo en vertical y ahora está en 4,000 píxeles. Eso no es bueno por supuesto, porque entonces verás toda la página y no puedes desplazarte por ella. Ahora solo lo vas a poner en 800 por ejemplo, tal vez algo como esto y luego si haces click en la vista previa, puedes ver tu sitio web en pantalla completa así. Está bien, eso es todo lo que necesitas saber de las mesas de trabajo. Pasemos al siguiente episodio. 10. Dónde conseguir las últimas plantillas prefabricadas: Bienvenido de nuevo. En este video, voy a mostrar dónde puedes conseguir plantillas prefabricadas. Primero limpiemos por ahora el expediente principal del ejercicio. Sólo voy a eliminar eso y guardar en archivo ahora mismo. Entonces si no eres un diseñador muy experimentado o simplemente no tienes inspiración para un diseño en este momento, lo que puedes hacer es acceder a los kits de plantillas prefabricados si haces clic en archivo y luego vas a conseguir kits de interfaz de usuario, ellos tienen diferentes Kits de interfaz de usuario de Apple, Google y Microsoft. Ya he descargado los adecuados para ti dentro de la carpeta descargable. En esta carpeta, Kits Premade. Entonces si haces clic en “Google Material Design” por ejemplo, y vas a abrir este archivo, vas a conseguir un archivo grande con muchos elementos de diseño diferentes de Google. Entonces, solo vamos a acercar un poco. Vas a ver todas las fuentes que usan, vas a ver sus iconos, vas a ver sus iconos, y solo puedes echar un vistazo a esos iconos si necesitas un ícono por ejemplo para tu sitio web y solo puedes copiarlo porque esto es solo un archivo XD, super agradable. ¿ Te sugiero que solo copies todo de Google o de alguien más? No. Te sugiero que uses esto como inspiración. Pero por ejemplo, si quieres crear una Checkbox, aquí está la Checkbox de Google. Por lo que este archivo puede darte sólo alguna buena inspiración. Esto se centra principalmente en el diseño de aplicaciones, como puedes ver, pero hay algunas cosas bonitas que también puedes usar para sitios web. Entonces por ejemplo, Casillas de verificación, Cajas de radio, y botones como este. Pero solo podrías hacer clic en y puedes copiarlos en tu propio archivo. Mac OS también tiene un bonito kit. Haga clic en los Elementos de la UI y luego haga clic en este archivo. Como puedes ver aquí están los archivos de Mac OS para Adobe XD. Por supuesto que no vas a poner un mensaje como este en tu sitio web, pero puedes usar esto como inspiración. Aquí hay algunas cosas bonitas por ejemplo, una barra de pestañas con diferentes elementos, una reseña de estrellas, un deslizador como este, o tal vez un desplegable. ¿ Cómo se diseña un desplegable? El último que quiero mostrarles es de Microsoft. Esa también es una bonita. Si hace clic en el WindowSUIXD. Este es un momento bastante interesante porque creo que Windows tiene las opciones más utilizables para un diseño de sitio web. Si vas a acercar, vas a ver todos sus botones, un hipervínculo, por ejemplo. Esta es también una de esas cosas que la mayoría de los diseñadores solo quieren usar unos botones para todo porque un Button se ve bonito. Pero a veces solo quieres usar un enlace para enlazar a una página específica. Entonces aquí hay un ejemplo de diseño para eso. Esto es lo que puedes usar para los campos de entrada, por ejemplo. Aquí hay más deslizadores y casillas de verificación. Esto también es bastante bonito. A veces hay que diseñar un desplegable con una vista de árbol como esta. Aquí puedes echar un vistazo a cuánto espaciado, por ejemplo, usa Windows. ¿ Cuál es un espaciado agradable, por ejemplo. Por lo que este archivo también es super bonitos campos de entrada para una contraseña. En ocasiones necesitas diseñar e iniciar sesión. Simplemente échale un vistazo por ti mismo. Pero si quieres obtener la versión más reciente, usa go to file, usa go to file, Get UI Kits, y luego por ejemplo, haz clic en Microsoft Windows. Después irás a una página web y podrás descargar la última versión de los kits de herramientas Diseño como aquí, kit de herramientas Adobe XD y podrás descargarlo. Esto ya es súper bonito, pero en el siguiente video va a ser aún más agradable. Te voy a mostrar el sitio web que uso para obtener fuentes gratis, imágenes gratis, e iconos gratis. Por lo que te veo en el siguiente video. 11. Cómo obtener fuentes e íconos e imágenes e imágenes y paletas de color y paletas de relleno y relleno: En este video, te voy a mostrar de dónde consigo todas mis cosas gratis que uso para el diseño. Por ejemplo, si voy a mi diseño por aquí, se puede ver una fuente bastante cool y creativa por aquí, se llama RB sets de chorros de RB y eso es del sitio web dafont.com. En dafont.com, puedes obtener diferentes fuentes. La mayoría son libres de usar, pero no todos. Como puedes ver, por ejemplo, esta fuente solo es gratuita para uso personal, por lo que si quieres obtener una fuente que sea gratuita, también para uso comercial, necesitas ajustar tu búsqueda. Por ejemplo, si vamos a entrar en una categoría manuscrita, creo que esa es una categoría genial. Como puedes ver muchas fuentes creativas por aquí que puedes usar. Pero entonces si quieres buscar, vas a ir a más opciones y vas a hacer click en 100 por ciento libre o dominio público y si haces click en enviar, entonces solo te mostrará las fuentes que puedes usar 100 por ciento gratis. Incluso puedes usar estos textos por aquí, así que por ejemplo, si quieres saber cómo se ve esta palabra explore como si solo lo vas a escribir por aquí y solo vas a ver cómo se ve la exploración de las palabras, y luego simplemente puedes hacer clic en él, y luego puedes descargar la fuente por aquí e instalarla en tu computadora y luego usada en Adobe XD, este es un super, super, super bonito sitio web para todas las fuentes creativas. Otro sitio web que solo tiene fuentes gratuitas para usar es Google Fonts. Estas fuentes por aquí no son tan creativas. A pesar de que tienes algunas fuentes creativas por aquí, en realidad mucho, pero no tanto como las fuentes de Adobe, así que lo que puedes hacer por aquí, también puedes usar un texto. Por ejemplo, explora Vietnam. Si vas a escribir eso por aquí y haz clic en aplicar a todas las fuentes, también vas a ver cómo se ve ese texto. Puedes ajustar el tamaño por aquí y puedes seleccionar categoría, así que por ejemplo, si solo quieres fuentes manuscritas, solo puedes deseleccionarlas todas y verás las fuentes manuscritas de Google Fonts en una descarga experiencia en esto como un poco diferente, si quieres tener estas fuentes, vas a dar click en plus, y entonces solo estará aquí. Si deshaces click en él, puedes hacer click en “Personalizar”. En ocasiones tiene más versiones para que puedas seleccionar las que quieras, y luego vas a hacer clic en” Download” por aquí, así es como descargas fuentes de Google. Ahora, para iconos', si vas a dar click en un ícono en este es el sitio web de iconos que uso. Si vas a volver a este diseño, puedes ver iconos por aquí. Por ejemplo, este ícono del tour es una montaña. Este hotel icono un camino y este comedor es un vaso. Aquí están los iconos que utilicé, y acabo de buscarlos aquí en la barra de búsqueda, flaticon.com, así que si quieres un icono para una casa, por ejemplo, vas a buscar casa y hay muchos iconos gratuitos que puedes usar. Algunos de ellos son bates, como se puede ver con la corona y él descarga experiencia aquí mismo también es un poco diferente. Simplemente puedes presionar sobre el plus y lo agregará a tu biblioteca. Déjenme borrar las viejas. Si has seleccionado algunos iconos como este, puedes descargar la selección y si quieres usarla en Adobe XD te sugeriría que utilices la opción SVG, y luego puedes descargarla por aquí. Quiero decir toda la información, 40 créditos están en la carpeta de descargas, pero el SVG es iconos vectoriales o como puedes ver por aquí, no importa cuánto zoom siempre va a ser nítido y eso es por supuesto lo que quieres, así que siempre usa SVG, pero también puedes usar PNG, y luego, por ejemplo, escoge un tamaño más grande, algo así, por lo que también será afilado, pero no tan afilado como SVG porque esto es vector, por lo que estos no son píxeles y PNG es siempre píxeles, así que eso es lo que hay que hacer por los iconos. Ahora para las imágenes, el sitio web que siempre uso es unsplash.com y hay muchas fotos hipster cool en splash, así que si tú, por ejemplo, necesitas una foto de una moto, porque va a pasar mucho de veces en las que estás trabajando con un cliente que aún no tienen las imágenes y solo quieres una imagen de relleno para tu fondo, para tus imágenes, así que lo que vas a hacer, puedes buscar bici y luego puedes descargar a este archivo como este a tu carpeta de descargas. Elegiste presionar “Enter” y ahora tienes ese archivo en tu carpeta de descargas. Imagen de súper alta calidad, como se puede ver aquí mismo, por lo que es super agradable. Otro sitio web que uso con frecuencia es pexels.com, mismo principio que en splash. También puedes buscar bicicleta y obtendrás diferentes imágenes. Hay muchos de esos sitios web, pero si estás empezando, solo guarda estos y solo puedes empezar a diseñar, y luego otro sitio web que necesitas guardar es color.adobe.com. Este es un bonito sitio web para crear una paleta de colores. Al igual que yo había creado en mi película de diseño por aquí, utilizo el sitio web de Adobe como inspiración, así que solo puedes arrastrar esto así y ponerlo en morado, por ejemplo, y luego crear una paleta que quieras y puedes hacer diferentes opciones por aquí. Por ejemplo, monogramática, esa es una que utilicé para este sitio web, y luego solo puedes crear una paleta por aquí. Entonces puedes copiarlo. Por ejemplo, puedes hacer una captura de pantalla. Puedes traerlo dentro de Adobe XD, pero solo una base, y luego solo usa la herramienta eyedrop para crear los colores en Adobe XD y luego por supuesto, edita a tu columna de activos, así es como uso este sitio web. Simplemente lo uso como inspiración y luego lo transformo en color activo en Adobe XD. El último sitio web que quieres guardar es este sitio web, loremipsum.nl y en este sitio web solo puedes obtener algún texto de relleno falso. También muchas veces cuando estás trabajando en un sitio web, aún no tienes el texto, así que solo puedes copiar un texto como este y luego ir a Adobe XD, ir a tu archivo así, colocar los textos aquí, y luego tendrás algunos textos con los que trabajar. Estos son el sitio web que quería mostrarles. Guárdalos en tu propia computadora porque en casi todos los sitios web necesitas fuentes, necesitas iconos, necesitas imágenes, y necesitas texto de relleno, y por supuesto también necesitas colores, así que eso es para este episodio. Espero que esto te resulte útil, y luego saltemos al siguiente episodio. 12. Preparar nuestra primera tabla de trabajo y cuadrícula: Hola y bienvenidos de nuevo. En este episodio vamos a preparar nuestra mesa de trabajo. Lo que vamos a hacer es dejar esos dos archivos que hemos abierto por aquí porque vamos a crear nuestro propio archivo. En este episodio vamos a crear el archivo real que vamos a usar, que vas a usar para crear todo el sitio web. ¿ Cómo se crea un nuevo archivo? Es muy sencillo. Sólo tienes que ir a “Archivo” y hacer click en “Nuevo”. Entonces obtendrás algunas opciones. Las opciones que vas a ver por aquí, no son las opciones que a menudo vas a usar para un sitio web de escritorio web. Tenemos que cambiarlo un poco. Por ahora, lo vamos a hacer fácil y vamos a dar clic en este ícono de la web, y ahora crea una mesa de trabajo. Como dije antes, las mesas de trabajo están por aquí. Entonces si haces clic en las mesas de trabajo, vas a ver algunos ajustes por aquí. Pero antes de que solo vas a dar click en una de las opciones, quiero explicarte cómo funciona la web porque esto es realmente importante. Porque el adelanto que te dieron. Ahora estamos en nuestra mesa de trabajo que es 1920, pero eso es demasiado grande para un sitio web porque hay que entender que mayoría de los sitios web en con el contenido del sitio web real. Sólo volvamos a mi archivo de diseño por un minuto. El cuadro principal donde se encuentra todo el contenido, por lo que en este sitio web, es esto de esta parte izquierda a la parte derecha por aquí. En la página web moderna, la mayoría de las veces eso es 1140. Este es uno de esos números que quieres apuntar. No sé si ya lo he dicho antes, pero esto casi siempre es 1140. A veces son 1200. Allá en los días de la página web fueron en 1960 y luego nuestras pantallas se hicieron más grandes. Ahora el contenido principal de la página web es 1140. ¿ Por qué es importante esto? Esto es importante porque quieres diseñar dentro de esa columna. Porque si no lo haces, probablemente vas a terminar en un sitio web que no se ve bien en todos los dispositivos. También deseas que tu sitio web sea visible en pantallas más pequeñas. Por ejemplo, una laptop que solo mide 11 pulgadas. Es por ello que hay que permanecer entre esas fronteras. Adobe XD tiene una gran característica para esto y se llama la grilla. Si haces click en la “Cuadrícula” y lo puedes ver en mi archivo por aquí, puedes ver que el ancho de canaleta, que es el ancho entre los contenidos es de 1140. Esto es lo que también vamos a crear para nuestro propio archivo. Vale chicos, tengo que decir algo. Este es Rino, de tu futuro. Adobe XD ha cambiado la función Grid. Ahora ya no es posible encender la Cuadrícula para cada mesa de trabajo individual. Ahora si apagas la Cuadrícula en una mesa de trabajo, se va a apagar en todas las mesas de trabajo. Por favor ahora que cuando estés viendo este video, porque este video fue grabado hace unos meses. Como se puede ver a los lados por aquí, queda algo de espacio, y no se necesita mucho más, como se puede ver porque el espacio a los lados aquí, esto es suficiente para un sitio web y esta mesa de trabajo es de sólo 1400. Ese es el tamaño que muchas veces uso. Volvamos a nuestro nuevo expediente. No vamos a usar esta mesa de trabajo. Ya que vas a volver a hacer clic en “Mesa de trabajo”. Podrás empezar mejor por un sitio web con éste, que es 1366. Voy a alejarme. Voy a borrar este y boom, aquí estamos. En realidad lo vamos a cambiar a 1400, pero también puedes ponerlo en el 1360 porque realmente no importa. Ahora mismo vamos a encender la Cuadrícula porque queremos asegurarnos de que nuestras columnas sean perfectas, y ya he puesto la información aquí mismo. Es necesario comprobar si tienes los mismos números. Siempre trabajo así. Tienes dos columnas y tienes 1140 por aquí. Ese es el espacio entre. Después tienes 130 en ambos lados. Si suma eso a dos veces 130, y este número, va a terminar con 1400. También aquí, he oído que para algunas personas no funciona como mostré por aquí. Lo que luego debes hacer es intentar primero agregar las columnas y el ancho de canalón, luego saltarte el ancho de columna y luego ir a la última, y luego se agrega automáticamente el ancho de columna. Si esto no funciona para ti, entonces cambia el orden de poner los números. A algunos diseñadores les gusta diseñar dentro de una cuadrícula. Por lo que tendrá un montón de líneas extra por aquí. Pero no lo hago porque la mayoría de los sitios web, solo tienes una columna de tres o cuatro, tal vez una columna de dos, a veces una columna de cinco, y realmente no necesitas las líneas extra para esto. También puedes usar las herramientas de alineación dentro de Adobe XD. Yo solo uso la cuadrícula externa así. Esa es la solución más fácil. Ahora si tu página se hace más larga, puedes simplemente hacer clic en el nombre y luego arrastrarla hacia fuera como puedes ver. Entonces aparece esta línea, y esta línea es el borde de desplazamiento. Muy bien, entonces otra cosa que necesitarás preparar, que creo que es importante, es la columna para tu teléfono móvil. Si vuelves a la función de mesa de trabajo por aquí y te desplazas hacia abajo, siempre uso el iPhone 6. También tienes teléfonos Android por aquí. Como puedes ver, el iPhone 6, 7, 8 es un poco más ancho que el móvil Android, por lo que tienes un poco más de espacio. Te sugiero que escojas este o escoges éste. Siempre escojo el iPhone. ¿ Por qué no uso el iPhone más nuevo? Bueno, porque el iPhone más nuevo es muy largo y mayoría de la gente tiene una pantalla que se ve así, al menos en la relación de dimensión. Entonces por eso siempre sugiero que use este. Voy a cambiar esto a móvil. Aquí también es lo mismo si vas a desplazarte, también vas a ver esa línea. Si luego haces clic en “Jugar”, vas a ver un tamaño de teléfono normal y puedes desplazarte al sitio web si tienes algún contenido dentro de él. En la mesa de trabajo móvil, también vamos a configurar la cuadrícula, así que comprueba esta casilla por aquí. Así es como lo he configurado, y tal vez las características predeterminadas en tu pantalla no sean las mismas, pero quieres tener al menos 20 píxeles en ambos lados. Como puedes ver, si cambias esto a 10, obtendrás menos espacio en ambos lados, pero quieres darle algo de espacio. Entonces volvamos a mi teléfono ahora. Haga clic en “Móvil”, haga clic en “Grid” y como pueden ver, hasta he usado 30 por aquí, lo que hace que se vea un poco más bonito, pero se necesitan al menos 20. Pero a la mayoría de los diseñadores les gusta más espacios en blanco, así que para este proyecto, también lo vamos a poner en 30. Porque más espacio en blanco a la izquierda y el lado derecho solo harán que se vea más limpio. Al menos usa 20, pero prefiero 30. Ahora estamos totalmente preparados para empezar a diseñar. Ahora lo que quiero que hagas es ir a “Archivo” y ir a “Guardar” porque vamos a guardar este archivo. Esto también es algo si eres XD se bloquea y no has guardado tu archivo, creo que sabes lo que eso significa. Siempre lo guardo en mi computadora porque quiero que los archivos estén en mi Dropbox, pero también puedes usar el Adobe Cloud. Pero si no tienes un Adobe Cloud te sugiero que solo uses tu propia computadora. Ahora no quiero guardarlo en mi escritorio. No quiero guardarlo en la misma carpeta. ahora lo voy a poner en la carpeta Archivos del curso”, y le voy a dar un nombre, Xd Course Exercise File, y voy a dar clic en “Guardar”. Ahora puede que estés pensando, vale, ¿por qué necesitamos prepararnos tanto? Porque yo sólo quiero empezar. Bueno, es muy importante que prepares tus mesas una buena manera porque si lo diseñas demasiado grande por ejemplo, y estás trabajando con un desarrollador o estás haciendo el sitio web tú mismo, lo estás construyendo en WordPress o tú estás codificando el sitio web tú mismo, si lo diseñaste en las propiedades correctas, solo puedes hacer clic en un elemento, y solo puedes ver, oh, esto es 46. Si lo has diseñado demasiado grande, necesitas hacer predicciones sobre qué tan grandes son todos los elementos en un sitio web real. Por eso es tan importante preparar tus mesas de trabajo de la manera que lo hicimos en este momento. Sé que esto es un poco aburrido, pero es muy importante. Vayamos al próximo episodio donde vamos a preparar nuestros colores. 13. Preparación de nuestros colores: Bienvenido de nuevo. En este video, voy a mostrar cómo puedes crear tus propias paletas de colores, con el color de tu elección. Vamos a agregar los colores a nuestra columna de activos, los colores reales que vamos a utilizar para nuestro sitio web. Para este sitio web, tengo esta paleta por aquí, y siempre empiezo con algo como esto. Tengo un fondo blanco, es sólo un blanco puro. Entonces tengo un casi blanco, que es como un blanco roto, como pueden ver. Después uno más claro, luego un color súper brillante, y luego unos tonos oscuros. Todos estos colores están dentro de la misma gama de colores. A lo que quiero decir con eso es, que todos estos colores tienen el mismo valor de tonalidad, te mostraré a lo que me refiero. Por ahora solo voy a copiar todas estas paletas de color de mi diseño final, archivo Rino. Vamos a volver a nuestro archivo, y vamos a basar esos colores por aquí. Por ahora los arrastremos fuera de los tableros de arte. Como dije en el video de activos, puedes seleccionarlos todos, y luego añadirlos a los activos de aquí. De esta manera, si cambiamos el color por aquí, se cambiará en toda la página web. A partir de ahora estamos listos para el siguiente paso. Pero digamos que estás diseñando otro sitio web, porque este sitio web que vamos a construir juntos es por supuesto un ejemplo, y utilizarás Adobe XD para muchos proyectos diferentes. Lo que quería mostrarte es cómo puedes crear tus propias paletas de colores. Digamos que tienes un cliente, y tu cliente tiene un logotipo, así que digamos que estás trabajando para la empresa Nikon. Eso sería bastante genial. Este es el logotipo del cliente, entonces, ¿cómo se puede crear una paleta a partir de este logotipo? Lo que vas a hacer es, en primer lugar, vas a hacer un duplicado de éste, donde solo creas tus propios círculos con esta herramienta por aquí. Entonces lo que debes hacer es hacer otro duplicado, y necesitas saber cuál es el color de tonalidad, del color de esta marca principal. Tienes uno de los círculos que vas a usar como referencia, y vas a llevar la herramienta cuentagotas por aquí. Puedes hacer click en él o puedes hacer click en yo, así que haz click en él y luego dejarlo así. Ahora haga clic en el relleno, y vamos a cambiar el código hexadecimal, que es el código de color por aquí, a HSB. Ahora puedes ver el valor de tono por aquí, así que este es el valor de tono. Esta es la saturación, y este es el brillo. Si bajas esto, va a ser de un color más oscuro. Si bajas esto, va a ser más hacia Grey. Si cambias esto, va a cambiar el color real. De nuevo, vamos a sólo, eyedrop, haga clic en él, ábrelo, y luego vas a ver que el valor de tonalidad de este color es 52. Este es blanco, no necesitamos cambiar eso. Pero para este, sólo ábrelo, y solo teclea 52 por aquí. Yo también voy a hacer eso por este, 52. Ahora, he creado una nueva paleta a partir de este logotipo, por lo que estos colores siempre se verán bien junto a este color principal por aquí. También puedes agregar este color, por supuesto, a la paleta si quieres. Pero así es como puedes crear tus propias paletas a partir de un logotipo, o una imagen. En ocasiones hay que hacer algunos ajustes, porque con el amarillo, por ejemplo, el amarillo no se ve tan brillante en comparación con este valor. Aquí la saturación es 94 y 100, y esto también es lo mismo. Pero esto no se ve tan brillante como este color, por lo que a veces necesitas cambiarlo un poco para que coincida. No siempre recomiendo esto, pero cuando se ve realmente diferente, se pueden cambiar los valores, y hacer una paleta que se vea casi igual a ésta. O otra paleta que puedes encontrar en línea, o usar Adobe color, o tal vez una imagen de pinterest, o algo más. Eso es todo lo que quería mostrar para la paleta de colores, por ahora solo voy a eliminar todo esto. Vamos a hacer click guardar por ahora, y lo último que quiero hacer es crear un nuevo tablero de arte para todos los elementos de nuestra marca. Ahora solo voy a dar clic en el título del tablero de arte, presionar alt, y arrastrar un nuevo tablero de arte por aquí. Simplemente dale un poco de distancia así. Apaga la rejilla, y agarra tus colores y ponlos dentro de este tablero de arte. Vamos a utilizar este tablero de arte también para el próximo episodio donde vamos a preparar todas nuestras capas de textos. Esto va a ser realmente bonito porque si tenemos muchos elementos ya preparados por aquí, simplemente podemos arrastrar muy fácilmente un elemento de aquí a aquí. Entonces podemos construir la página realmente rápido. Voy a renombrar este tablero de arte a styleguide, y voy a hacer que el color del fondo algo un poco más oscuro para poder ver en realidad todos los colores aquí. Eso debería ser bueno por ahora. Voy a guardarlo de nuevo, y luego en el próximo episodio prepararemos todas nuestras fuentes. 14. Preparar nuestras fuentes: Bienvenido de nuevo. En este episodio, vamos a preparar todas nuestras capas de texto. Este es también un paso importante antes de que realmente empieces a crear todas las páginas de tu sitio web. A menudo veo diseñadores que no se adhieren a tamaños de fuente, espaciado de fuentes, una altura de línea, y luego comienza a volverse realmente desordenado después de un tiempo. Vamos a preparar sólo todos los elementos principales. No vamos a preparar todo, lo contrario no tendríamos mucha libertad creativa. Pero siempre necesitas un título grande, un título medio, texto corporal único, necesitas dos botones, necesitas los de cada sitio web. Eso es un beneficio, y lo que también tiene beneficio es que ya se puede ver si todo se ve bien juntos antes de empezar realmente a diseñar la página. Eso es lo que vamos a hacer. Como se puede ver, por ejemplo, este es un título muy grande y este es un título de tamaño mediano. Por lo tanto, vuelve a nuestro expediente de ejercicios. Vamos a ir a los tableros de arte de guía de estilo, y vamos a agarrar la herramienta de texto. Asegúrate por cierto, que tienes las fuentes instaladas. Por lo que en la carpeta de fuentes, asegúrate de haber instalado todas estas fuentes en tu computadora. Pero claro, también puedes usar tus propias fuentes si quieres practicar un signo diferente al que estoy creando en este momento. De acuerdo, entonces por ahora, voy a agarrar la herramienta de texto y voy a hacer primero el gran título. No solo haga clic sino haga una caja porque queremos ver la altura de la línea y esa es la altura entre las diferentes filas. Voy a poner esto a la izquierda aquí. Yo sólo voy a escribir, “Este es un título grande con al menos dos líneas de texto”. Haga clic en su herramienta de selección. Vamos a cambiar algunas configuraciones por aquí. En primer lugar, vamos a cambiar el color, así que presiona “I” y luego ve al color oscuro principal y haz clic en él, así que ahora es el color correcto. También cambia este valor a 54 y este a 64, y esto depende de las fuentes que estés usando. Pero casi siempre uso algo alrededor de 50 para mi gran título principal. Entonces solo déjalo así y ahora haz una copia de ella con “Alt” y “Shift” y luego arrastra, primero suelta tu ratón, y luego “Alt” y “Shift” y ahora haz nuestro segundo gran título. Ahora crea nuestro h2, que es el título no tan grande, pero todavía bastante grande. Siempre uso algo alrededor de 36 y ahora necesitas ajustarte a la altura de la línea a algo así como 44. Entonces se ve como un hermano menor de éste. Incluso puedes cambiar el texto a algo así. Entonces en la página web, también he usado otro título aún más pequeño. Tenemos este título este es un título grande, y un título mediums, y un título más pequeño para mis artículos de cartera, por ejemplo, que es 24. También voy a preparar eso. Haga otra copia con alts, haga este 24, y luego cambie la altura de línea a 32. Ahora puedes ver dos líneas porque esta caja es demasiado grande, así que hazla más pequeña, y ahora puedes ver la altura de la línea. Se puede ver que estos corrige. Esta línea, no necesitamos esta línea ahora mismo porque no vamos a desplazarnos dentro de este tablero de arte. Haga clic en su tablero de arte, vaya a “Desplazamiento” y configure esto en ninguno. Esta línea desaparecerá. Ahora para los textos corporales, como dije antes, necesitamos un texto lorem ipsum, que es sólo texto de relleno que utiliza todo diseñador. Sólo tienes que ir a loremipsum.nl o tengo una nueva extensión que se llama Lorem Ipsum generator y puedes crear un texto lorem ipsum así. Por ahora, sólo voy a copiar este. Copia, vuelve a tu Adobe XD. Vamos a hacer una copia de este, “Alt” click y “Shift”, hacer una copia, seleccionar todos los textos y pegar todo tu texto lorem ipsum, no importa que sea demasiado largo. Haga clic fuera de él y haga de éste 16. Para textos corporales, que es la parte principal de tu texto grande. Grandes textos largos como este, siempre uso 16 y a veces hasta 18. Porque en la mayoría de los sitios web y la mayoría de las pantallas, eso se ve suficientemente bien. Aconsejaría 18 ó 16. Para este sitio web es 16. El negrita no se ve tan bueno para el texto corporal, lo que significa textos que son largos para este sitio web, he usado el medio. En muchas fuentes, también a veces se le llama regular y eso debería ser lo suficientemente bueno. A veces ligero, pero siempre me apego a regular o medio. Ahí para la altura de la línea, uso algo así como 25 y luego se ve así. De acuerdo, entonces ahora hemos preparado los estilos de texto, y para los textos principales, lo que también se ve bonito, si el texto principal no es tan negro como los títulos, sino un poco gris. Por eso he usado este color. Vamos a poner estos dos uno al lado del otro, y voy a cambiar el color por aquí. Solo trabajemos con gris por ahora. Como puedes ver, se mezcla un poco mejor si escoges un tono gris. Para mi página web, esto se ve gris pero no es gris, en realidad es morado mezclado con gris. Por eso se mezcla tan bien con el fondo y este color y este título, y simplemente se ve muy bonito. Da click en este texto y por ahora, voy a escoger el color que he usado para el texto, que es éste. En este fondo no se ve tan bien pero en una página web sí se ve realmente bien, así que lo alineó correctamente, y luego vamos a crear nuestro botón principal. Para los botones, no uso el bloque de texto, solo uso una sola línea. Haga clic en la “T”, haga clic en ella y luego escriba algo como “Lorem ipsum” o “Esto es un botón”. Vuelve a tu herramienta de selección, y para tus botones, yo, mayoría de las veces uso semi negrita. El color del texto para los botones en este sitio web es blanco, y el fondo es un rectángulo. Voy a agarrar tu rectángulo y hacer un rectángulo grande como este. Desmarcada la frontera. Asegúrate de que tu color esté establecido en el color de botón que queremos. Ahora, colóquelo debajo de sus textos de botón, pero ahora está por encima de esa capa de texto. Así que usa comandos y luego corchetes izquierdos, si aún no estás acostumbrado a las teclas cortas, ve a tus capas y luego simplemente arrástralo así, asegúrate de que esté debajo de la capa de texto. Ahora posicionarse como esta hacen que sea aún un poco más grande sostenga “Alt”, por lo que de los lados será escala proporcionalmente, algo así debería ser bueno. Para el texto en sí, siempre uso 15, Es un poco más pequeño para los botones. Voy a usar 15 por ahora. Agarra de nuevo la selección y alinéela en el medio. Ahora lo último que hice es, le di los botones, esquinas redondeadas. Para este sitio web, he usado cuatro. Para que puedas agarrar las coordenadas por aquí y luego ponerlo en cuatro, puedes ver el número por aquí, o simplemente podrías escribirlo y usar tus teclas de flecha para crear algo que se vea bien. Pero cuatro es lo que utilicé para este sitio web. Ahora agrupe a esos dos juntos, así que haga clic en el texto mantener “Shift”, también haga clic en el fondo. Ahora esos dos están seleccionados y pulsa un comando “G” o clic derecho y luego “Agrupar”. Ahora este botón es un grupo y podemos moverlo así. También una última cosa, asegúrate de seleccionar un texto, haz doble clic en él y luego asegúrate de que esto esté alineado en el medio. Esto es agradable porque ahora si quieres hacer el botón más grande, automáticamente se quedará en medio de ese botón. Entonces eso también es un lindo truco. Ahora hemos preparado la mayor parte de las capas de textos importantes, pero esto es sólo para web. Déjame mostrarte a lo que me refiero. Para web, he usado un título de 54 puntos por aquí, pero en un teléfono móvil que parece demasiado grande porque este es 64. Te mostraré lo que quiero decir porque si uso el mismo tamaño de título en los móviles y me dejas solo hacer clic en un los textos móviles, y voy a poner esto en 54, se va a quedar demasiado grande en los teléfonos móviles. Quieres que tus títulos sean un poco más pequeños en el móvil. Vuelve a tu archivo de diseño, y solo necesitas hacer eso para estos títulos. Porque los textos corporales muchas veces también se ven bien en el móvil. Agarra todos tus títulos, arrástralos a los derechos, libéralo haz tal vez tus tablas de arte un poco más grandes a nuestro comentario haz clic en el fondo del tablero de arte, haz tu tablero de arte un poco más grande, y luego vamos a hacer que estos campos sean un poco más pequeños. No puedes usar el mismo truco que para las imágenes, por ejemplo, y solo usar el “Shift” porque entonces el tamaño de la fuente no cambiará. Tenemos que hacerlo de una manera diferente, que se necesita para cambiar los valores aquí. Por ejemplo, hazlo un poco más pequeño. Para mi sitio web, he usado 46 y 52 para este título, he usado 30 y 36, 38, y este título en realidad no se ve tan mal en el móvil. ¿ Sabes qué? Solo vamos a tener títulos personalizados para los títulos grandes por aquí. Estos son los sitios móviles y estos son los sitios de escritorio. Déjame solo crear un título muy rápido. A desktop, voy a usar otra fuente de lo contrario, es confuso. Voy a usar algo realmente diferente, algo así como Helvética. Va a hacerlo más pequeño y va a hacerlo de otro color. No lo confundiremos con nuestro propio diseño, escritorio y móvil. Ahora sabemos qué, qué es. Ahora lo último que queremos hacer es agregarlos al panel de activos. Vuelve a abrir tu panel de activos, selecciona todas tus capas de textos de escritorio, y luego pulsa el signo más en “Estilos de carácter”, y ahora también seleccionaste estos dos y también presiona plus. Pero para estos dos, quieres saber que son móviles. Puedes cambiar el nombre por aquí. Haga clic fuera de él y luego cambie el nombre de esos también, y tal vez ponga un m detrás de él, que lo sepas, es para móvil. También puedes reorganizarlos si quieres, así. Tus teléfonos móviles están aquí juntos. De acuerdo, así que eso es todo lo que necesitábamos hacer para preparar todos los teléfonos. Ahora va a ser realmente fácil construir nuestra página. Ya tenemos un botón, tenemos un texto corporal, y tenemos algunos títulos y todos nuestros colores. Espero verte en el próximo video donde vamos a empezar a construir el encabezado que vamos a ver por aquí. Ahora estamos totalmente preparados para empezar a diseñar el sitio web real. Espero verte en el próximo episodio. 15. La imagen y el menú principal principal y el menú grande: Hey y bienvenidos de nuevo a este nuevo capítulo. Ahora por fin vamos a empezar a construir nuestra página. Hemos preparado este diseño de una manera muy profesional. En este video, vamos a crear esta sección que vamos a ver por aquí. Se trata de una hermosa sección limpia con un encabezado transparente y unas cuantas capas de texto diferentes. Sólo empecemos. Estamos aquí en el expediente del ejercicio, y este es el tablero de arte que hemos preparado. Hemos configurado nuestra cuadrícula como podemos ver, que vamos a utilizar para el contorno. Necesitamos muchos archivos en este momento desde esta carpeta, el archivo del sitio web, así que asegúrate de tener este abierto. Lo primero que necesitamos es la foto, así que esta es la foto que utilicé para el encabezado. Pero primero, vamos a crear una forma, así que vamos a agarrar por ahora la herramienta de rectángulo y crear una forma porque vamos a crear primero el fondo. Crea una forma grande como esta y haz que se ajuste a la pantalla, algo así, y ahora vamos a darle un color de fondo. En primer lugar, desmarque la frontera. Ahora es blanco y ahora dale un color de fondo, que es este color oscuro. Ahora hay una bonita herramienta dentro de Adobe XD y es que puedes arrastrar en una imagen a una forma y luego se enmascarará automáticamente. Te mostraré cómo funciona eso. Pero primero, necesitamos crear una copia porque si arrastras la imagen ahora mismo, así, automáticamente creará una forma, pero luego el color oscuro se va. Necesitamos ese color oscuro porque en nuestro diseño final, hay un color oscuro debajo de nuestra imagen, y esta imagen tiene una transparencia del 30%. Volvamos a nuestro archivo y eliminemos esa imagen por ahora con el comando Z. Primero, vamos a crear otro duplicado de esta capa, así que voy a arrastrar Alt, y ahora tengo dos de esas capas, colocarlas encima de el uno al otro. Ahora agarra tu imagen y arrástrala al lienzo, así que ahora tengo una imagen y un fondo. Así es como siempre lo hago. También puedes establecer un fondo para todo tu tablero de arte, pero quiero tener este color blanco para el fondo de mi página web, así que por eso hago una forma separada para el fondo. Ahora tengo una imagen, y voy a poner esa imagen en una opacidad del 30%. Solo tienes que agarrar la opacidad por aquí o simplemente pulsa 3, por ejemplo, o 4, dependiendo de tu imagen y tu fondo, claro. Por ahora, lo voy a poner al 30%. Ahora agarra a los dos. Vamos a agruparlos, así que haga clic derecho y haga clic en Grupo. Ahora los vamos a bloquear con Command-L o hacer clic derecho y luego bloquear, porque entonces ya no podemos moverlo y fácilmente podemos colocar artículos encima. Esa es la primera parte, y ahora vamos a crear el menú superior, así que necesitamos un logotipo. El logo es la versión blanca que puedes ver por aquí, esa es ésta. Ahora lo voy a arrastrar encima de mi lienzo, y si arrastro otra imagen encima de un lienzo que no está bloqueado, también reemplazará esa imagen. Esa es una de las cosas por las que debes tener cuidado. En ocasiones tienes muchas imágenes en tu tablero de arte y luego quieres arrastrar un logotipo fuera de tu tablero de arte, por lo que no reemplazará y enmascarará dentro de la forma a la que lo estás arrastrando. Eso es sólo un pequeño consejo. Por ahora, solo arrastremos esto y usemos la cuadrícula que hemos creado y hagamos que esto sea un poco más pequeño así. Simplemente agárralo, alejate, y eso está bien por ahora. Ahora vamos a crear el menú. Agarra la herramienta de texto por aquí y la vamos a alinear perfectamente después de esto, así que realmente no importa dónde hagas clic. Simplemente haz clic en algún lugar y escribe Inicio. Ahora para el sitio web final, también hemos usado semíbolo muchas veces. Como pueden ver, tenemos un texto por aquí, y esto es semíbulo pero no hemos agregado semíbolo a nuestros estilos de personaje. Lo que te acondico que hagas para que tu vida sea un poco más fácil es hacer otro estilo por aquí que vamos a usar muchas veces. Basta con copiar este título, por ejemplo, hacer otro, sólo ponerlo en 16 en semíbolo, altura de línea va a ser un poco diferente, 22 por ahora. También vamos a añadir este estilo a nuestra boleta, y lo voy a arrastrar al fondo. Ahora tenemos dos estilos de 16. Esto es para el texto corporal y esto es para títulos. Ahora vuelve a tu archivo y ahora podemos usar este mismo estilo. Si hacemos click en nuestros textos de inicio y hacemos click en éste, ahora será exactamente el mismo estilo. Pero como puedes ver en este momento es negro, así que realmente no podemos verlo. Ahora vamos a dar click en blanco, y ahora tenemos este estilo pero luego con un color blanco. Ahora voy a hacer algunos duplicados para todas mis páginas, así que voy a mantener Alt y Shift y luego primero suelta el mouse y luego suelta Alt y Shift. Hazlo de nuevo y hazlo de nuevo, y luego haz doble clic y cambia el texto. Haga clic fuera de él, fuera, boom, y ahora ya terminé. Como puedes ver en mi diseño final, también hay un estado activo debajo de este icono de Inicio. Un estado activo significa que el usuario sabe en qué página está, por lo que también vamos a hacer eso en nuestro diseño, pero primero vamos a alinearlo un poco. Voy a agarrarlos a todos así, y voy a asegurarme de que esté alineado medio con éste. Cómo voy a hacer eso es que también voy a seleccionar un logotipo y dar clic en éste, por lo que ahora estará perfectamente alineado en el medio. Ahora voy a arrastrar estos cuatro, ponerlos a la derecha por aquí, darle un poco de espaciado, seleccionarlos todos, y luego agarrar esta herramienta. Ahora el espacio entre ellos es exactamente el mismo. Ahora solo necesitamos crear una línea, así que ve a tu página de inicio, agarra la herramienta de línea, y solo crea una pequeña línea debajo de tu texto de inicio. Creo que usé dos o tres de tamaño. Va a ponerlo a las dos por ahora y el color del borde es el color morado que usé. Ahora vuelve a tu herramienta de selección, muévelo un poco hacia arriba, eso se ve bien. Ahora lo que quieres hacer es agarrar todo tu encabezado y agruparlo porque vamos a necesitar este encabezado en muchas páginas, claro, así que ahora tenemos un pequeño grupo con todos los ítems en él. Ahora necesitamos crear estos textos y ahora esto va a ser realmente fácil. Pero lo único que tenemos que asegurarnos es que hemos instalado esta fuente, que se llama Abuget. Si vas a tu buscador y vas a las fuentes de carpeta, asegúrate de haber instalado Abuget, y ahora podemos crear un diseño que se vea así. Este es el gran título, 54, este es el semíbolo 16, y es sólo un texto corporal normal. Esto será realmente fácil porque hemos preparado nuestros estilos por aquí. Agarra este título, haz un duplicado, sostén Alt así , y suelta, agarra uno de tu cuerpo texto así, y agarra uno de tus semibolds así, y luego solo necesitamos el Abuget, pero nosotros realmente no necesitan un estilo para esto porque solo hay un lugar en la página web donde se usa Abuget. Ahora alineemos esto primero. Selecciono los dos inferiores y los hago blancos y selecciono el superior y lo hago morado. No voy a hacer que todas las capas de texto de esta serie tutorial sean perfectas porque realmente no importa, así que a veces solo dejaré los textos estándar como puedes ver aquí mismo. Para los textos de Abuget, lo que puedes hacer es simplemente hacer una nueva capa de texto. Haga clic aquí, sólo tiene que escribir su nombre, volver a la herramienta de selección, seleccionar la fuente, hacerla blanca, y hacerla mucho más grande. Para este tipo de fuentes creativas, los tamaños de fuente pueden ser muy diferentes porque tienen muchas formas diferentes. No recomendaría usar las mismas tallas que hemos usado para este porque con títulos creativos, va a ser muy diferente. Como puedes ver en este momento, necesito alinearlo un poco mejor para que se vea bien. Para la alineación, por supuesto, puedes agarrar todos estos y luego presionar esta herramienta para que se alineen correctamente. Pero Xd lo alineará a la parte inferior del cuadro de texto real, así que si voy a arrastrar el cuadro de texto hasta aquí, y entonces voy a usar la misma herramienta que puedes ver ahora, cambiará. Eso no siempre es perfecto. Si estás en alinear y usar esta herramienta en capas de texto, te sugeriría que intentes hacerlo encajar así. También para este, hazlo lo lo más pequeño posible y luego usa la herramienta de alineación porque entonces se verá mejor en el ojo. Eso es lo que hay para este tutorial. Voy a desmarcar la cuadrícula por ahora para ver qué hemos creado. Como puedes ver, ya que tenemos los estilos preparados, este fue un proceso realmente fácil. Sólo tienes que arrastrarlo, cambiar los colores, cambiar el texto, y ahora podemos pasar a la siguiente sección, que será esta sección con una forma personalizada y esta barra o cuadro por aquí con nuestros iconos vectoriales SVG personalizados. Espero verte en el siguiente video. 16. El dividor de la forma de onda: Hola y bienvenidos de nuevo. En este video, vamos a crear esta forma personalizada y esta barra de superposición que estamos viendo por aquí. Como dije antes, estos iconos son puerta de efecto, así que no importa lo lejos que acerques, siempre estarán nítidos. Hay una bonita sombra suave debajo de esta barra. Realmente no lo ves, pero cuando lo apago, lo puedes ver. Eso lo hace flotar un poco. Ahora vamos a crear estas partes, sólo volvamos a nuestro archivo. Lo que vamos a hacer es crear primero la forma personalizada. El diseño personalizado tiene este color, se ve blanco, pero en realidad no es blanco. Agarra la herramienta Pluma porque con la herramienta Pluma puedes crear cualquier forma que quieras. Si has trabajado en Photoshop o Illustrator antes de conocer esta herramienta, pero si no conoces esta herramienta, tienes que saber dos cosas. Se puede hacer clic, hacer clic, hacer clic, hacer clic, hacer clic para hacer una forma y para hacer una forma curva se hace clic y se sostiene. De esta manera, puedes crear formas personalizadas como esta, y luego si quieres cerrarla, vuelves a tu primer punto y luego puedes llenarlo con un color, no puedes ver en este momento porque es blanco. Por ejemplo, puedes crear una forma como esta. Vuelve a tu herramienta de selección, haz clic fuera de ella, luego haz clic en ella y luego elimínala. Vuelve a la herramienta Pluma a través de la P en tu teclado, y ahora vamos a crear esa forma. Veamos cómo funciona eso. Primero, baja luego arriba y luego baja otra vez. Haga clic aquí, y ese es el primero, luego haga clic en algún lugar alrededor de aquí y arrástrelo. Gran ola por aquí, algo así, y podemos ajustarlo más tarde si quieres. Ahora puedes salir un poco fuera de tu app, realmente no importa o solo a un lado y yo solo hago la última forma. No se ve perfecto, pero por ahora, esto es lo que vamos a hacer, click aquí y luego volver atrás y dar clic aquí y luego cerrarlo así. Ahora, vamos a darle un color, que necesitamos para asegurarnos de que esté encendido, y vamos a borrar la frontera. Haga clic fuera de él, vuelva a su forma y muévelo hacia arriba. Como puedes ver en este momento, parece una ola bastante bonita. No es perfecto así que si quieres ajustar la forma, puedes hacer doble clic en ella y luego dar clic en tus puntos de anclaje. Eso es lo que llaman puntos de anclaje, y puedes ajustar las formas así. Cambia esto un poco porque quiero una forma que se vea un poco más similar a mi diseño. Además, depende para que puedas sumar más puntos más adelante. Por ejemplo, si quieres otro bache por aquí, solo tienes que hacer clic y añadir otro punto de anclaje, mover esto hacia arriba y luego usar las asas por aquí si lo quieres. Entonces si quieres eliminar uno de esos puntos de anclaje, solo tienes que hacer clic en el “Punto de anclaje” y hacer clic en “Eliminar”, y ahora estás de vuelta en tu diseño original, al menos cambió un poco. A veces necesitas ajustarlo un poco así. Ahora esto se ve bien. Ahora lo que también voy a hacer es hacer clic en toda la “Mesa de trabajo” y cambiar la apariencia de fondo a un color que está en mi paladar. Ahora parece que esta forma y el fondo es sólo una pieza. Nuevamente, voy a bloquear esta capa, así que haz clic en ella y luego haz clic con el botón derecho y haz clic en “Bloquear” o “Comando L.” Ahora vamos a crear la forma personalizada. Vuelve a esta herramienta y crea una forma. No sabemos dónde está el tamaño de la mesa de trabajo ahora mismo, así que voy a volver a hacer clic en “Mesa de trabajo”, encender la cuadrícula, luego volver a mi herramienta de selección, hacer clic en “Atrás” en el rectángulo y colocar el rectángulo así. Voy a colocarlo en medio de esta línea. Si vamos a dar click en “Jugar” ahora mismo, veremos la mitad de esta caja, que se ve realmente bonita. Eso es bueno por ahora, apaga el borde y hazlo del color oscuro. Ahora para dentro de esta caja, hemos vuelto a utilizar el Semi Bold Montserrat, y tenemos cuatro iconos. Empecemos con la importación de los iconos. Vuelve a tu buscador, ve a los archivos del sitio web y luego ve a los iconos de inicio. Estos son los cuatro iconos. Ahora, antes de que los vayas a arrastrar, asegúrate de estar en algún lugar fuera de tu mesa de trabajo, y simplemente dirigirlos así porque pueden ser realmente grandes, ahora son realmente pequeños, pero a veces son enormes y luego estropean tu mesa de trabajo. Entonces a veces no los puedes encontrar realmente porque se enganchan dentro de una mesa de trabajo. Asegúrate de estar fuera de tu mesa de trabajo cuando insertes elementos. Ahora los seleccionaré y los arrastraré a tu Canvas así. A veces realmente no puedes seleccionarlos así, es realmente frustrante porque realmente necesitas hacer clic en las formas reales de tus iconos. Como puedes ver ahora mismo, si quiero arrastrar todos estos, ahora funciona, pero no siempre funciona. Tienes que estar realmente seguro de que ves esas líneas azules y luego puedes arrastrar los iconos. Si no te gusta ese arrastre, que también puedes hacer es seleccionarlos todos y luego presionar “Comando X” y desplázate hasta la parte donde los quieras, luego pulsa “Comando V." El comando X es para cortar y luego V es para pegar. O también puedes usar el botón derecho y luego cortar, como puedes ver aquí mismo. Ahora los voy a alinear adecuadamente y por supuesto vamos a utilizar las herramientas de alineación para esto. En primer lugar para hacer nuestra vida un poco más fácil, voy a bloquear esta barra y ahora solo colocar los iconos así. Asegúrate de tener suficiente espacio para los textos por aquí. Ahora selecciona todos tus cuatro iconos. Usa esta herramienta, y luego usa esta herramienta, y ahora ponlos en posición. Ahora vamos a volver a nuestra guía de estilo y vamos a agarrar este título porque necesitamos un semi audaz tan alt, y luego arrastrar, hazlo ancho, y luego tenemos nuestros títulos. Como pueden ver en este momento, mi alineación no es tan buena. A veces quieres empezar con el texto, a veces quieres empezar con los iconos, y esta vez quieres empezar con ese texto. Por ejemplo, si tengo una superficie que se llama Diseño Web, por ejemplo, puedo hacerlo así. momento no necesito este cuadro de texto porque no uso dos líneas, solo voy a dar clic en el “Texto de punto” y eso hace que sea más fácil alinear. También asegúrese de hacer clic en el “Alineación central”. Porque entonces si lo copias y haces un nuevo texto, se alineará desde dentro del centro. He hecho un cuatro superficies en este momento, Actualizaciones de sitios web, Copias , Desarrollo, y diseño Web, y ahora quiero alinearlo correctamente. Por ejemplo, si seleccionas estos dos, alinearlos así, y ahora agruparlos. De nuevo, haga clic en éste, turnos, haga clic en éste, alinearlos en el medio, y luego haga clic derecho y agruparlos. Esto no es uno. Eso no fue realmente útil. Si haces clic en tu ícono, y en tus textos, y luego presionas “Comando G”, no tienes que hacer clic derecho porque a veces haces clic mal como lo hice ahora mismo. Ahora quiero que el espacio entre esos iconos sea el mismo, y quiero que el espacio sea el mismo desde este lado. Lo que voy a hacer es que voy a alinear este con un lugar que se ve bonito, y ahora voy a contar los píxeles a un lado, así que son 130. Voy a ponerlo en 110. Nos vamos a asegurar que este también sea 110 pixeles de lado, así. Ahora voy a arrastrar los cuatro iconos y los voy a alinear en el medio. ¿ Eso se ve bien? Desmarquemos la cuadrícula por ahora. No, sí que realmente se ve bien, quiero que estén más cerca el uno del otro. Voy a hacerlo más en el medio así, 160, y también para este 160. Nuevamente, seleccione cuatro de ellos y alinéelos así. Esto se ve un poco mejor. Ahora tenemos que sumar la sombra. Vuelve a la capa de fondo, descúbrela con “Comando L”, y luego agrega una sombra como esta. Amplía para que podamos ver lo que estamos haciendo, y como puedes ver en este momento, es una sombra muy pequeña, y queremos que esa gran sombra la haga flotar. Esto se hace al aumentar este número, lo que hará bajar la sombra. Si pones esto en 30, por ejemplo, puedes ver que traerá a la sombra y si entonces aumentas este número a 30, 60, que es valores que se usan con bastante frecuencia. puede ver que se convierte en esta sombra muy suave y agradable. Incluso puedes cambiar el color de la sombra si quieres. Pero la mayoría de las sombras en negro se ven bien o puedes disminuir la intensidad de la sombra así. Ahora terminamos con esta parte. Vamos a comprobar lo que hemos creado hasta ahora. Haga clic en su “Mesa de trabajo” y haga clic en “Jugar” y como puede ver en este momento, empieza a parecer un sitio web real. Esto es bastante bonito. Saltemos al siguiente episodio. 17. Imágenes flotadas con sombras: Bienvenido de nuevo. En este video, vamos a crear la sección de imágenes flotantes que se ve así. Parece complicado, pero en realidad es una de las cosas más fáciles de hacer. Vamos a volver a usar estas sombras, y también vamos a crear un icono personalizado. Como puedes ver aquí, creamos este icono dentro de Adobe XD. Si realmente quieres meterte en el diseño de iconos, sugiero que vas a usar Illustrator porque esa es una herramienta de software de Adobe que realmente se enfoca en crear formas factoriales. Pero si es solo por un ícono simple como este, también podemos crear eso en Adobe XD. Vamos a ver qué tan rápido podemos crear esta parte izquierda. Vamos a volver a nuestro expediente de ejercicios, y vamos a utilizar nuestros activos por supuesto. Ahora necesitamos un título medio, así que sostén Alt y haz una copia del mismo. Por cierto, no olvides encender tu grilla, para que sepamos cuál es este lado. También necesitamos una cubierta de pernos, así que también voy a hacer una copia de ésta. Alinearlo correctamente, y eso es en realidad todo lo que necesito. Para este texto, hice que sea de tres líneas de alto, sí. Como puedes ver ahora, esta capa de texto casi parece gris, pero en realidad es de color grisáceo morado oscuro. En este fondo, la combinación de estas dos columnas se ve realmente bonita. Entonces sí, ahora vamos a crear dos cosas. En primer lugar, vamos a crear esta pequeña línea, y luego vamos a crear los iconos personalizados. Amplíe su título, agarre la línea dos por aquí y cree una línea como esta. Sujétalo, y luego hazlo un poco más grueso. Sugiero que el grosor de la línea debe ser el mismo que los elementos que la rodean. Entonces ahora mismo tenemos este gran texto por aquí. Si quieres que el diseño se vea bonito, asegúrate de que sea casi tan grueso como este. Entonces tal vez cuatro o cinco. Eso debería estar bien para el color. Por supuesto que vamos a usar el morado. Por lo que ahora se ve en línea con este diseño. Ahora vamos a crear nuestro icono personalizado. Entonces primero vamos a crear una línea de texto. Por ahora solo voy a crear una línea de texto como esta. Ahora queremos crear nuestro icono. Así que agréguese un poco. Ahora toma la herramienta de lápiz debajo de P, y vamos a crear una casilla de verificación. Una casilla de verificación no es realmente difícil. Entonces sólo sígueme en este. Siempre se puede ajustar más tarde, para que no tenga que ser perfecto. Simplemente trata de crear una bonita casilla de verificación como esta. A lo mejor quieres tener un fondo plano, a lo mejor no. Simplemente se ve bien. Entonces, solo probemos si esto es lo que queremos. Apague el borde y para el color de relleno, vamos a escoger nuestro propio color morado así. En realidad no me gusta el fondo plano, así que sólo vamos a hacer doble clic sobre él y voy a eliminar éste y simplemente llevar éste al medio. Sí, esto se ve un poco más bonito. Ahora, solo tienes que ajustar algunos puntos para que parezca un icono de cheque realista. Esto se ve bastante bien, así que voy a volver a hacer clic fuera de él. Ahora lo que quiero hacer es alinearlo correctamente y tal vez hacerlo un poco más pequeño así, mantenga pulsado Shift. Después alinearlo al centro del texto. Alinear el texto así. ¿ Sabes qué? Voy a hacerlo un poco más grande. Si volvemos a nuestro diseño final, se puede ver que he usado coordenadas redondeadas por aquí. También te mostraré cómo hacer eso. Entonces si quieres un fondo redondeado, por ejemplo, solo tienes que hacer doble clic en este punto de anclaje, y luego puedes ajustar el fondo así. A lo mejor también hacer eso por este lado. Dale un poco de sensación personalizada, que se ajuste a tu sitio web. No es perfecto y puedes pasar mucho tiempo en iconos, claro. Pero solo quiero mostrarles los conceptos básicos sobre cómo crear un icono genial. Ahora lo que quiero hacer, es asegurarme de que se vea bien en una sola línea. Ahora solo tienes que seleccionarlos ambos, agruparlos, y luego mantener presionados Alt y Shift y crear otra línea de casilla de verificación como esta. Ahora tenemos tres de ellos. Alinearlos correctamente, boom. A lo mejor darle un poco más de espacio amplio. Y otra vez, a algunas personas les gusta medir cada pequeño bar entre todos sus artículos. Simplemente me gusta diseñar en mi ojo porque las mediciones son bonitas, pero a veces necesitas ajustar la alineación para que se vea bien, aunque no esté perfectamente alineada. Entonces solo usa tu ojo y tu imaginación para que se vea bien. Entonces vamos ahora y apaguemos la grilla. Por lo que voy a volver a hacer clic en el tablero de arte. Apague la rejilla. Vuelve a nuestro diseño final. Como puedes ver, esta línea es un poco más larga. Entonces voy a estirar este para que sea algo así. Se trata de tres líneas y vi que ésta es un poco más larga, y tal vez un poco menos falsa, pero eso depende de tu página web, claro. Entonces ahora terminamos con esta parte, y ahora vamos a arrastrar en nuestras imágenes. Entonces lo que quieres hacer es ir a tu buscador, alejar el zoom y asegurarte de arrastrarlo fuera de tu tablero de arte. Entonces ahora como puedes ver, éste es un poco más pequeño. Entonces voy a hacer eso del mismo tamaño que los otros, así, y asegurarme de que sean uniformemente grandes así. Ahora selecciónalos a ambos, selecciónalos a todos y hazlos mucho más grandes. Ahora solo necesitamos reorganizarlos de una manera que se vea bien y simplemente dirigirlos para que hagan el uno encima del otro, o podemos usar comentarios, o podemos usar comentarios, y luego corchete izquierdo o corchete derecho. Eso es algo que me gusta usar porque es mucho más rápido. Está bien. Esto se ve bien. Voy a hacerlos un poco más grandes de nuevo. Ahora vamos a sumar sombras. Así que selecciónalos todos, y luego ve a tus sombras. Entonces vamos a ajustar los ajustes para todos ellos. Entonces vuelve a poner esto en 30 y poner eso en 60. Ahora como puedes ver, estos artículos están flotando realmente bonitos. A lo mejor es un poco demasiado intenso, así que disminuya este, llevándolo a 12, por ejemplo. Ahora si haces clic de distancia, mira este diseño, se ve realmente genial. Entonces sí, en realidad eso es todo lo que hice por este diseño. Así que pruébalo por tu cuenta. Entonces en el siguiente episodio, vamos a ir a la sección de clientes, donde vamos a trabajar con una nueva herramienta llamada las rejillas de repetición, donde podemos cambiar muchas cosas diferentes simplemente arrastrando así. Por lo que espero verte en el próximo episodio. 18. Sección con logotipos del cliente con la herramienta de la cuadrícula de repetición de repetición: Hola y bienvenidos de nuevo. En este episodio vamos a trabajar con una nueva característica llamada Repetir Grid, y vamos a insertar algunos logotipos. Va a ser realmente divertido. Lo que quiero que hagas es ir a nuestro expediente de ejercicios, y hacer que nuestra mesa de trabajo sea un poco más grande. Seleccionando tu mesa de trabajo como lo hicimos antes, solo puedes hacer clic en el nombre, pero si realmente estás acercado, y simplemente no quieres desplazarte hasta la parte superior de tu mesa de trabajo, también puedes mandar, y luego haga clic en su mesa de trabajo, o digamos, haga clic en el fondo. Porque si haces clic en un ítem con comando, vas a por supuesto, seleccionar el ítem, lo que debes hacer click en el fondo, y luego puedes hacer que tu mesa de trabajo sea más larga así. Ahora vamos a crear esta nueva sección muy rápido. Podemos por supuesto, siempre volver a nuestra guía de estilo y un arrastre un nuevo título desde aquí. Pero como este es el mismo título, también podemos rastrear este título así como éste, alinearlo en el medio, y luego copiar aquí una de nuestras líneas de textos corporales, y también alinear eso en el medio. Quiero alinear estas dos capas en medio de toda mi mesa de trabajo. Simplemente voy a dar click en la capa, boom, click en esta, boom. Ahora, cambia el texto, algo así. Este texto, yo quiero que eso sea morado, así que vuelve a tus activos, y haz ese morado. Alinearlo poner 15 píxeles de arriba, y ahora vamos a trabajar con las Rejillas Repetidas. Lo que quiero que hagas es crear una forma con tu rectángulo. Vamos a crear un rectángulo como este. Al principio, sólo enciendamos la rejilla. Otra vez vienen y dan click en el fondo, y encienden la cuadrícula porque realmente necesitamos la cuadrícula ahora mismo para alinear esto. Porque tu Repetir Grid también es una gran herramienta, porque muchas veces tendrás el mismo artículo diferente en una fila. También podríamos usar un Repetir Grid para este. Sólo practiquemos eso de verdad rápido. Voy a eliminar estos dos, y si haces click en este, y haces click en Repetir Grid, lo que pasa es que, que XD sabe que este grupo necesita repetirse en una dirección. Puedes repetirlo al fondo así, o puedes repetirlo a un lado. Muchas veces tienes una cuadrícula dentro de tu sitio web, y ahí es donde puedes usar tu herramienta Repetir cuadrícula, y ahora realmente puedes cambiar fácilmente la alineación así. Para estos beneficios, sólo necesitamos tres filas. Podemos hacerlo así, hacer nuestras vidas un poco más fáciles, pero para la sección de clientes, también queremos hacerlo. Porque si no usamos esta herramienta Repetir cuadrícula. Por cierto chicos, el atajo para cambiar entre archivo XD es comentario, y luego el icono de onda de un texto de masilla en la pantalla, y en Windows esto es “hold and tap”. Si no usamos esta herramienta Repetir cuadrícula, y queremos cambiar la sombra, necesitamos cambiar la sombra en todas estas capas individuales, y luego necesitas desagruparlas todas, o simplemente hacer clic en todas ellas, y eso no es realmente agradable. De esta manera, si cambias la sombra por aquí, va a cambiar en todas partes como puedes ver por aquí. Vuelve a nuestro archivo, haz clic en este, y luego haz clic en Repetir cuadrícula, y ahora solo crea tres bloques como este, y también al fondo, y ahora tenemos que alinearlo a la cuadrícula por aquí. Simplemente puedes aumentar el espaciado entre los bloques. Wow, esto es 50, que es casi perfecto, pero también puedes por supuesto, hacer los bloques un poco más grandes. Ven y haz click en tu “Bloquear”, y luego hazlo un poco más grande así. Yo quiero mismo espaciado por aquí, así que serán 36. Esto es sólo jugar con los valores hasta conseguir lo que quieres. Ahora tenemos seis cajas perfectamente alineadas, y ahora vamos a peinarlas. Da click en tu primer cuadro, y luego borra el borde, y vamos a añadir una sombra como esta. Creo que usé la sombra por defecto en esto. Puede ser que aumente o debería decir, disminuya la intensidad de la misma, por lo que se ve un poco más bonito. Pero creo que eso es todo lo que hice. Ahora para el interior, he preparado todos los logotipos en la carpeta de logotipos del cliente, y acabo de descargar algunos logotipos de Internet, como pueden ver. Por cierto, esto es sólo un ejemplo, no he trabajado para esas empresas. Pero en realidad trabajé para Coca Cola. Esa es la única empresa para la que realmente trabajé en esta lista. Pero esto es sólo un ejemplo. Lo que hice es que ya los exporté con fondo blanco. Porque si solo vas a arrastrar todos los logotipos dentro de tu mesa de trabajo así, voy a seleccionarlos todos, no la carpeta de exportación, voy a arrastrar a todos así, todavía verás el sombras que acabamos de aplicar. Las imágenes se extenderán de izquierda a derecha, y eso no es lo que queremos. Lo que hice en mi archivo de diseño final es que creé mesas de trabajo separadas para mis logotipos, porque de lo contrario vas a conseguir ese problema. Cuando supe que mis cajas eran de este tamaño, en realidad puedo hacerlas 160 de altura, eso sería bonito, de 360 y 116 de tamaño. Lo que hice es crear una nueva mesa de trabajo. Simplemente agarro, por ejemplo, este, hice una copia de ella, y hice ese 360 por 180, y luego llamé a eso nuestro logotipo por ejemplo, apaga la cuadrícula. Duplicé eso como puedes ver, y luego inserté los logotipos uno por uno porque quieres alinearlo correctamente, claro. Después exporté todas esas imágenes, y esas imágenes las puedes ver por aquí. Vamos a entrar a exportar en otro episodio, pero eso es lo que hice para crear estas imágenes. Acabo de crear primero todos los puertos y luego exporté las imágenes. Pero por ahora para hacerte la vida un poco más fácil, solo puedes usar mis imágenes, y arrástralas al lienzo así, o puedes arrastrar tus logotipos uno por uno, y luego colocarlos en la mesa de trabajo. Pero entonces no forman parte de esta Repetir Grid. Sólo si los arrastras a todos de esta manera, las cuadrículas de repetición funcionarán con estas imágenes. Porque esta imagen ahora está justo encima de nuestra herramienta Repetir cuadrícula. Si quieres usar esa herramienta Repetir Grid, primero necesitas exportar todas las imágenes que te mostraré en el próximo episodio, y luego solo puedes insertar todas las imágenes así, y luego tienes un logo perfecto de Repeats Grid sección. Lo que también es realmente bonito de esto es que si vas a crear tu diseño móvil, solo puedes arrastrarlo así, y luego cambiarlo, y recordará los datos que hay dentro si solo recuerdas los logotipos como puedes ver por aquí. Pero eso también es para un próximo episodio. Esto fue lo básico de la herramienta Repeats Grid. Espero que te haya gustado este episodio, y luego te veré en el próximo episodio donde vamos a crear este esquema en caja numérica. 19. Sección estadísticas con cajas vacías: Bienvenido de nuevo, en este episodio vamos a crear la parte estadística. Este será un video muy fácil, pero esta es solo una bonita sección para romper la página. De lo contrario sólo será este de un color grande. En mi sitio web real, he usado esta parte para animar estos números. Te puedo mostrar el resultado final en mi página web. Como puedes ver aquí, esta es la idea para esta parte donde estos números empiezan a animarse. Empecemos a crear esta parte. Vamos a volver a nuestro expediente de ejercicios, y vamos a mover estos tableros de Rs al decidir porque necesitamos que nuestra junta R sea mucho más larga. Ven y haz click en tu pizarra R, hazlo más largo y ahora apaguemos la rejilla porque realmente no necesitamos eso para esta parte. Recorta tu rectángulo, crea una forma grande como esta, apaga el borde, escoge los fondos más oscuros luego presiona V para la herramienta de selección. Selecciona esto para que se copie con Alts y luego estarán debajo de nuestra capa, y esto se debe a que si creas una nueva capa, estará encima y esta es una copia de una capa antigua. Póngalos aquí y luego presione Comando X y luego presione Comando V. Entonces estarán arriba. No se ve el título, pero eso es porque tiene otro color. Ahora, haga clic fuera de éste, haga clic en el título, hágalo ancho luego haga clic en ambos y alinéelos a la derecha. Entonces también alinearlos a la izquierda. Ah, dijo derecha, me refería a izquierda, claro. Ahora, alinearlos a la cuadrícula y tendremos algunas líneas de ayuda, como esta. Eso se ve bien. Mi diseño y este texto es un poco más corto, algo así, tal vez incluso más corto. Nuevamente, voy a bloquear esta capa de fondo. Lo que voy a hacer ahora mismo es crear dos formas. Simplemente escoge a tu herramienta de rectángulo y crea dos formas como esta; el ancho de las formas, vamos a alinear eso a esta parte. Entonces se verá un poco más bonito. Presiona V otra vez y luego hazlos tan grandes como los otros dos. Ya sabemos el ancho, eso es 360 y 40 de altura. Queremos que eso sea un poco más grande decir tal vez a 40, algo así. Eso se ve bien. Antes vamos a duplicarlo pero primero vamos a darle estilo al primero. Desselecciona el relleno y para el color del borde, vamos a escoger el morado y así es como se crea un contorno. Ahora, es sólo cuestión de dos números. Tan solo una capa de texto que tiene una alineación media y es blanca. Es sólo un título que es sólo un texto puntual. Es un gran número. Este tamaño no forma parte de mi guía de estilo, pero acabo de diseñar esto en el ojo. Si desea alinear todos estos elementos en el medio, asegúrese de seleccionar primero el elemento que desea y luego su fondo y luego presione éste para que se alinee en el medio. También, para este, selecciónelos a ambos y boom. Ya estaba alineado, como se puede ver. Creo que usé algo así como clientes surfieron. No uso un cuadro de texto por ahora, alinearlo apropiadamente así y ahora hago una copia de éste. Pero primero vamos a agruparlo así, Comando G, y luego haga clic en todo el grupo y duplicarlo y hacerlo alineado a la derecha de nuestro tablero R. No vemos donde termina. ¿ Acaba por aquí? Yo no lo creo. Vuelve a hacer click en tu pizarra R, enciende la rejilla y como puedes ver, este no es el final de nuestra 1140. Ahora, solo ven y haz clic y cambia el número aquí por cheques hechos o algo así. Es así como creé esta parte por aquí. Parte bastante fácil, pero un fondo oscuro. Simplemente rompe el sitio web de una manera agradable. Este episodio fue bastante fácil. Pasemos al siguiente episodio donde vamos a construir la sección testimonial. Esto es un poco complicado porque necesitamos una forma personalizada con una sombra y también usamos una herramienta de portador de repetición por aquí. Espero verte en el siguiente video. 20. Sección testimonial con la herramienta de bolígrafo: Hola y bienvenidos de nuevo. En este episodio, vamos a crear una sección testimonial D. Creo que esta es una sección realmente bonita. Tiene el mismo estilo de sombra que el logo por aquí. Sólo empecemos. Primero vamos a crear un título. Agarra este y agarra éste, viejo, viejo y Turnos para luego liberarlos y este título es de este color. Voy a hacer el tablero un poco más grande haciendo clic en común en los fondos y luego arrastrándolo hacia abajo. Ahora vamos a crear nuestra primera sección testimonial. Algo que hay que entender es que no se puede agregar sombras a un grupo. El modo fácil en que pensarías que crearíamos una forma como esa es crear un rectángulo como este. Entonces crea otro rectángulo como este. Después gira ese rectángulo 45 grados a algo como esto y luego colócalo uno encima del otro, selecciona ambos, desselecciona un borde y agruparlos. Como se puede ver, realmente no se puede agregar una sombra. Esta no es una solución para esta parte. Lo que quieres hacer es que quieras usar los pénsilos. En primer lugar, solo crea un rectángulo como este y asegúrate de que tenga el ancho de la sección del logotipo por aquí para que podamos usar el mismo tipo de espaciado, así que eso fue 360. Ahora lo que quieres hacer es agregar algunos puntos de anclaje. Si haces doble clic en ángulo directo, puedes ver que podemos seleccionar los puntos de anclaje y la misma manera que creamos esa forma de onda personalizada, ahora podemos agregar más puntos de anclaje a esto. Para crear una forma como esta, necesitamos tres puntos de anclaje más. Porque tenemos que empezar, necesitamos un punto descendente y necesitamos otro nombramiento. Ahora si haces clic en este y rastreas a éste en línea recta, intenta hacerlo recto, algo así. Ahora vuelves atrás, haces clic fuera de él. Desrevisas la frontera. Ahora puedes agregar una sombra a la forma. Eso es lo que quieres hacer. Haga clic en sombra y disminuya un poco la capacidad y que sea un poco más agradable. Como pueden ver, ahora hemos discutido alguna forma. Antes de empezar a duplicar, terminemos primero este. Necesitamos una foto de perfil y un título. Agarra el círculo o la herramienta Eclipse y mantén presionada la tecla Mayús y luego haz un círculo para tu foto. Sí, cuota de prensa y alighn correctamente. A lo mejor esto es un poco demasiado grande, así que voy a hacer un poco más pequeño. Ahora vamos a crear un título. Este es el nombre de la persona, selecciónela y luego a la izquierda alinearla y hacer que la versión tazones, haga una copia de la misma, haga esa versión T pequeña y ese será el título de la versión. Yo quiero hacer este título, quiero hacer que ese pull de nacimiento alinee esto un poco a la izquierda, algo así. Haga clic en su imagen y desmarque el borde. Ahora hemos creado nuestra primera forma. Todavía no vamos a arrastrar nuestras imágenes porque necesitamos una cosa más y ese es el texto dentro de aquí. Lo que quiero que hagan es copiar uno de nuestros textos principales por aquí. Simplemente arrastra este como puede ver, boom, así. A veces no hicimos la forma. Se quiere cambiar el tamaño de fuente 1 punto más pequeño, porque a veces se ve un poco grande porque está dentro de una forma. Por ahora lo voy a poner a los 15. También asegúrate de tener suficiente espacio en blanco en el lado izquierdo y en el lado derecho. A lo mejor eso significa que tu caja necesita ser un poco más grande. No te limites a arrastrarlo así porque entonces estás, una forma en la parte inferior cambiará. Después debes hacer doble clic en tu capa Shape, seleccionar ambos puntos de anclaje y luego usar tus teclas de flecha para mover éste hacia arriba. Después vuelve a tu textual y alineó este en el medio hasta que se vea bonito. Creo que éste se ve bastante guay. Ahora voy a seleccionar todo eso e iniciar la herramienta de cuadrícula repetida y luego duplicarla a la derecha hasta que coincida con este lado de nuestra grilla, así. El espacio entre los elementos ahora es diferente debido a la sombra aditiva. No te preocupes por eso, solo asegúrate de que no va a ir por este lado aquí. El único lugar donde estará fuera de nuestros 1,140, nuestro tablero es para estas imágenes, pero esto es solo una parte creativa de la página web. Eso está bien para esa parte. Vamos a usar el mismo truco que para la sección de clientes por aquí, vamos a importar nuestras imágenes. Si vuelves a tu buscador y vas a la carpeta de testimonios. He preparado tres imágenes de apenas mils por aquí. Si los arrastras al círculo, exceda entonces automáticamente los llenará y los enmascarará dentro de ese círculo apagemos la cuadrícula por ahora y miremos esto. Se ve absolutamente hermoso. Sí, eso fue todo por esta parte. Ahora vamos a crear las dos últimas barras de la página web que será el pie de página, que vamos a repetir y todos los sitios web. Y, esta parte, que tiene una imagen encima de un botón de imagen y divisor en forma de D. Espero verte en el siguiente video. 21. Llamar a la acción con degradados: Oye, y bienvenido de nuevo. En este video, vamos a crear esta sección descendente. No va a ser uno realmente duro, así que vamos a empezar. Entonces lo primero es lo primero, vamos a arrastrar nuestro tablero de arte un poco más grande así, y necesitamos el mismo estilo de fondo que hemos usado en el encabezado. Entonces voy a desplazarme por mi encabezado, y luego bloquearlo así, y luego copiarlo, y luego volverlo a bloquear, y luego bajar y pegar eso. Primero necesito escribir imagen, así que vuelve a nuestra sección de fotos, y luego arrastra en la imagen correcta. He usado esta imagen, y voy a simplemente reemplazarla así. Por cierto, si quieres mover imagen dentro de tu máscara, puedes hacer doble clic en ella, y luego puedes mover la imagen dentro de la máscara. Entonces ahora esto es bueno por ahora. También necesitamos el divisor de forma, pero ya lo hemos creado, así que solo vamos a copiar el que hemos creado por aquí. Está por aquí, así que necesitamos desbloquear eso otra vez, y luego hacer una copia como esta, y luego ir a la superior cerrarla otra vez. Después ve al abajo, muévelo en la parte superior con comando shift right bracket, o simplemente ve al panel de capas, y luego muévelo a la parte superior, arrástrelo hacia arriba y luego gírelo. Entonces si solo vas con el ratón hacia un lado por aquí, puedes rotarlo así, y luego si mantienes el turno, por ejemplo, hazlo recto o simplemente vuelve a hacer un plano. O puedes simplemente por supuesto, también teclear más de 180 para voltearlo. Pero por ahora, sólo voy a crear la forma así. Asegúrate de que esté por debajo de tu sección testimonial. Entonces voy a usar comando y corchetes izquierdos para asegurarme de que esté debajo de esta sección. Ahora para esta imagen, eso es un grupo, muévete eso hacia arriba, y ahora está encima de nuestra capa de forma. Entonces también voy a bajar eso. Como puedes ver en este momento, esto se ve bastante guay. En mi diseño final, tenemos un título y un botón, y ya hemos creado estos elementos, por lo que sólo vamos a arrastrar uno de éste, así, uno del texto principal y un botón. Entonces eso es todo lo que necesito por ahora. Voy a hacer esos dos textos a blanco. Esos textos deben estar alineados en medio, centro. Haz lo mismo para este, alinearlo en un medio, centralo. He usado un texto diferente algo así se ve bien. Mantenga alt para hacerlo un poco más pequeño. Mueve este hacia arriba, también para el botón, mueve eso en el medio. Si desea cambiar el comando text hold, haga clic en él y, a continuación, ajuste el texto. Ahora si tu botón es demasiado ancho, comando haga clic en el fondo del botón, luego mantenga presionado alt nuevamente, y luego hazlo un poco más pequeño. Sé que uso muchos atajos, pero los atajos te hacen la vida mucho más fácil si te acostumbras. Entonces sé que a veces puede ser un poco frustrante, pero solo sigue usando esos atajos. Realmente hace las cosas fáciles. Ahora, mueve todos estos un poco hacia arriba, así que mantén el turno, y luego muévalos un poco hacia arriba. Necesitamos mucho más espacio en la parte inferior aquí, así que agarra nuestra capa, y ahora, quiero hacer la foto un poco más grande. Como puedes ver, ya que es una máscara, escala automáticamente. Por lo que no vamos a tener un fondo que no esté lleno de la imagen. Entonces creo que esto es lo que quiero por ahora. Vuelve a tu buscador y vamos a insertar nuestros dos artículos de cartera. Sí, solo selecciona dos de ellos que quieras Creo que he usado estos dos. Sí. Así que asegúrate de arrastrarlos fuera de tu tablero de arte porque si los arrastras hasta aquí, lo va a reemplazar como dije antes. Entonces, lo que quieres hacer es salir de tu tablero de arte, arrástralos hasta aquí, y luego asegúrate de colocarlos encima de tu tablero de arte así. Entonces asegúrate de que tu cuadrícula esté encendida porque no hay necesidad de volver a crear para el sitio. Seleccionarlos a ambos, hacerlos mucho más grandes así. Si quieres más espaciado en el medio, crea más espaciado como este puede ser algo así como 50. A continuación, seleccione ambos y asegúrese de que estén dentro de la cuadrícula. Ahora, si quieres cortarlas, también necesitas usar una máscara. En exceder la máscara funciona así. Si creas un rectángulo nuevo, puedes usar tu forma rectangular, a lo que sea, como máscara. Entonces lo que puedes hacer ahora es crear una forma como esta, que cortará los diseños como este, desmarque el borde y lo haga un color raro porque no vamos a ver eso. Ahora selecciona ambos elementos de tu cartera, y una nueva máscara, y luego presiona comando shift M, o simplemente haz clic con el botón derecho y luego haz clic en máscara. No, ni siquiera está aquí, ¿está en alguna parte? Máscara con forma, como se puede ver, comando shift M. Así se crea una máscara, y luego se enmascarará dentro de ese rectángulo. Ahora en mi diseño final, como puedes ver, también hay una sombra dentro de aquí, y esa sombra está dentro de la máscara. Entonces lo que quieres hacer ahora es crear esa sombra. Para crear una sombra, también necesitas un rectángulo. Entonces vamos a crear una sombra fuera de nuestra pizarra por ahora. Hagámoslo algo así. Apague el borde, vaya a su relleno, vaya a gradientes lineales. Ahora, hazlo de negro a negro. Pero la sección superior, por supuesto necesita ser baja transparencia, porque entonces crea una sombra. Entonces también ve a este color y haz ese negro. Como puedes ver en este momento, tenemos una opacidad negra 100 por ciento a una opacidad negra cero por ciento. Esta es en realidad la herramienta de gradiente, pero también la puedes usar para sombras. Asegúrate de que esto esté encima de tus imágenes, y como puedes ver, esto es demasiado intenso. Podrías simplemente dejarlo así pero si querías tenerlo dentro de tu máscara, solo vas a presionar el comando x, luego haz doble clic en tu imagen así, y luego presiona el comando V, y luego también será dentro de tu máscara. Porque todavía estamos, como puedes ver, dentro de la máscara por aquí y a veces también querrás eso, así que por eso lo estoy explicando. Es demasiado intenso, así que quizá lo hagan 40 por ciento de opacidad, algo así. Ahora crea un poco de profundidad dentro de esta sección. Entonces, ¿nos olvidamos de algo? No lo creo. A lo mejor la opacidad del fondo es un poco diferente aquí, porque la imagen es diferente, tal vez la puse a los 20, como puedes ver, tal vez también he cambiado la forma para que sea un poco menos intensa. Por lo que también puedes hacer eso si quieres cambiar los puntos de anclaje, arrastra todos los elementos y hazlo encajar de la forma que quieras. Entonces ahora terminamos con la página principal, y lo último que tenemos que hacer es crear el pie de página. Pero vamos a ver lo que hemos creado hasta ahora. Entonces voy a dar click en mi tablero de arte, y voy a dar click en play. Si hasta ahora has creado la página, deberías estar realmente orgulloso, porque este ítem, ya puedes usar este ítem en tu portafolio. Te sugiero que cambies el estilo por supuesto, y las imágenes porque esto es solo mi cara y mis logotipos, pero si puedes crear una playa como esta, solo puedes mostrar negocios como “Oye, mira esto, puedo crear una nueva página de inicio para ti”. Entonces si solo cambias los elementos y los botones en el texto, ya puedes crear una página de inicio bastante decente. Entonces esto es bastante bonito. Entonces espero que también te haya gustado este video, y luego en el siguiente video, crearemos el pie de página, que vas a duplicar en todas las páginas. 22. El pie como símbolo reutilizable: Bienvenido de nuevo. En este video, vamos a crear el pie de página, como puedes ver aquí mismo. Tiene un contorno verde. Esto se debe a que es un componente. Esta es una de las categorías de activos que tienes por aquí. Lo que es bueno de un componente es que puedes usar este ítem en diferentes páginas. Como pueden ver aquí mismo, esto también tiene un contorno verde, y si cambio algo en el componente principal por aquí, también cambiará en todos los demás. Por ejemplo, si arrastro este logotipo hacia abajo, así, vas a ver que va a cambiar en todas las páginas. No hice esto para el Menú, porque en el menú quiero cambiar esta línea para mostrarle al visitante en qué página es, eso no es realmente un componente. Al igual que en este archivo, lo he convertido en un componente, pero realmente no lo necesito, porque en la página de Portfolio como puedes ver no es un componente porque es diferente. Si un elemento es el mismo en todas las páginas, desea utilizar este componente, como puede ver aquí mismo. Eso es lo que vamos a crear ahora mismo. Haga nuestro tablero un poco más largo, consiga nuestro rectángulo para hacer un rectángulo grande, desmarque el borde, dale un color de fondo, levante esto y luego alinéelo. No voy a volver a crear esta celda, sólo voy a copiar eso desde el Menú. Basta con copiar todo el menú, bajar y bloquear este, y luego presionar V y ya está casi un pie de página. Haga clic en este y luego desagruparlo, haga clic derecho y luego desagruparlo. Se pueden cambiar las células individuales a una línea más ordenada. Quiero que un logo esté en el medio. En la mayoría de los pies por el logo está la izquierda y solo hay algunos artículos aquí a la derecha. Pero para este pie de página, solo quiero mantenerlo realmente simple. Yo sólo lo tengo así. Tengo un artículo por aquí, artículo por aquí, y un artículo por aquí. Simplemente cambio el texto a algo así. No es el pie de página perfecto, porque la alineación es un poco incómoda porque algunas palabras son más largas que otras palabras. Realmente no me encanta este pie de página, solo hagámoslo un poco diferente ahora, solo cambiemos el estilo y solo pongamos el logo de la izquierda aquí. Será un poco diferente al sitio web real que creé. Seleccionémoslos todos, pongámoslo así, y ahora tenemos que convertirlo en un componente. Nuevamente, desbloquearlo y necesitamos seleccionarlo todo e ir a Componentes y presionar el Plus. Ahora creará el contorno verde, para que sepas que es un componente y este es el componente maestro porque puedes ver que por aquí tiene este triángulo de Saturno por aquí. Si creamos otra página en el futuro, solo podemos arrastrar este componente al que necesitamos renombrar, lo contrario no sabemos qué es esto. Podríamos simplemente dirigir este componente como este boom, y tal vez a otra página, boom. Si cambiamos el primero, también cambiará otros dos como puedes ver. Esta es la parte componente también una característica muy agradable en Adobe XD. En el próximo episodio, vamos a crear otra página que es la página Acerca va a ser realmente fácil. Creo que podemos crear esta página en un solo episodio, en unos minutos. Eso debería ser muy divertido. Espero verte en el próximo episodio. 23. La página del portafolio: Muy bien, bienvenido de nuevo. En este episodio vamos a crear la página Portfolio, como puedes ver en el archivo de diseño final por aquí. Es una página bastante fácil, así que vamos a empezar. Voy a volver a mi expediente y voy a hacer un duplicado de mi tablero principal de arte. Vamos a poner esto también un poco abajo. Voy a dar click en los tres puntos. Voy a sostener Alt y Shift, y voy a hacer un duplicado de mi tablero principal de arte, y eso es todo. Ahora, voy a eliminar todo lo que está en esta página, mientras que al menos casi todo así, borrado. Este estaba bloqueado, así que vamos a desbloquearlo, hacer clic derecho en desbloquear y luego también eliminarlo. Vamos a acercarnos aquí y este es sólo el fondo, así que necesitamos todos esos iconos. Tenemos que mantener pulsada la tecla Mayús y luego hacer clic en los Iconos y el Fondo, y ahora eso se ha ido también. El encabezado de esta página es un poco más corto, por lo que también necesitamos desbloquear este, mover esto un poco hacia arriba, algo así, eso debería ser bueno. También vamos a cambiar el texto. He usado los 36 de aquí. Yo lo he hecho blanco, lo hice alineado en el centro, y en el centro lo alineé a todo el tablero de arte. Como puedes ver eso fue bastante rápido. Elimina todo esto porque no necesitamos eso y también vamos a cambiar el menú porque ahora estamos en la página de Portafolio. Ahora voy a presionar Comando y voy a sostener esta línea, luego voy a sostener Shift. Suelta los Comandos y solo sostén los Turnos para moverlo en la horizontal y luego lo voy a arrastrar y hacerlo más largo. Ahora, no utilices Shift o Command, solo arrástralo. Ahora tenemos un pequeño indicio de que estamos en la página de Portafolio. Muy bien, ¿qué necesitamos en esta página? Necesitamos una imagen, necesitamos un título, un texto, y un enlace. Veamos qué tan rápido podemos crear esto. Muy bien, volvamos a nuestro expediente. Ahora, ve a tu Finder, ve a través de los archivos de sitios web y luego Artículos de Portafolio y aquí están tus cuatro artículos. Vamos a arrastrar y nuestra primera imagen, asegúrate de no arrastrarla sobre ésta sólo en el fondo así. Esto es bueno. Es un poco demasiado pequeño. Mis exportaciones no son perfectas, pero eso no es un gran tema por ahora. Necesitamos un título que sea 24. Voy a volver a mi Guía de estilo. Yo voy a escoger este, y yo voy a escoger éste. Sostengo Shift y luego los selecciono a ambos. Presiono Copiar o vengo a ver. Vuelvo a mi tablero de arte. Doy click en el tablero de arte y luego hago clic derecho Pegar, y ahora tenemos un título y tenemos una descripción. El título de un proyecto, solo quiero que sea una línea. Entonces quiero un poco de espaciado. Digamos que 20 píxeles quizá hagan esto tres líneas, y ahora queremos un enlace. Cómo vamos a crear un enlace es haciendo un duplicado, así que estoy reteniendo Alt en los textos. Voy a hacer doble clic y cambiar este texto para descubrir los proyectos. Simplemente lo hago un punto X porque no necesitamos todo este cuadro de texto. Voy a hacerlo morado, y ahora voy a dar clic en esta herramienta por aquí y doble crear un subrayado sobre textos. Esto hará que parezca un eslabón. Ahora quiero alinearlo, así que me aseguraré de que también esté a 20 píxeles de este fondo y como dije antes, asegúrate de que tus cajas estén recortadas al fondo de los textos, y ahora esto se ve genial. Pero ahora el dimensionamiento no es bueno, por lo que necesitamos cambiar algunas cosas. En primer lugar, la imagen necesita ser mucho más grande. Digamos que nuestra imagen, queremos que sea tan grande como esta. Pero antes vamos a arrastrar los textos y también hacerlo blanco y usar la Repetir Grid para, ahora primero vamos a comprobar si este es en realidad el ancho que quiero. Voy a hacer un duplicado de éste. Hold Alt y Shift, y ahora ¿qué hay? Solo hay 21 píxeles en el medio. Creo que eso es un poco demasiado menos, así que voy a hacer este un poco más pequeño, así que sosténgalo de este lado, algo así. Hacer un duplicado de nuevo, y luego en el medio está 55. Eso es mucho mejor. Por supuesto puedes jugar con estos ajustes, pero esto es lo suficientemente bueno por ahora. Ahora voy a arrastrar todos mis textos y simplemente arrastrarlos, y eso es algo bonito de la herramienta de texto. En cambio puedes simplemente arrastrarlos y el texto será más largo. Elimina esto por ahora. Está bien, así que lo último que hice es añadir un poco de sombra como puedes ver, es muy suave. Es la misma sombra que uso para los logotipos, así que son sólo tres, seis, y luego la opacidad es 16. Recuerda que tres, seis y 16. Vamos a volver a nuestro expediente. Haga clic en nuestro ítem, haga clic en Sombra tres, seis, y luego 16. Está bien, no lo hace, lo recordaste. Adobe XD recordó la configuración. Ahora lo que podemos hacer es seleccionar todas las capas y ahora dar click en la cuadrícula de repetición. Ahora necesitamos la cuadrícula en el sitio para ver lo grande que será el espacio entre esos dos elementos. Tenemos que alinearlo con el costado. Yo sólo lo estoy arrastrando. Voy a asegurarme de que esta línea golpee la línea azul así. Ahora efecto desesperado y también lo extenderé hasta el fondo. Solo asegúrate de tener cuatro artículos por ahora. También voy a dar clic dentro de ella y luego arrastrar este, hacerlo mucho más grande. Por ahora voy a ponerlo a 80 porque creo que eso se ve bien. Voy a apagar la cuadrícula y voy a importar algunas imágenes. Voy a volver a mi Finder, seleccionar todos mis artículos de Portfolio, y ahora arrástrelos de esta manera. Ahora se puede ver que ya casi terminamos con esta página, eso es super bonito. Ahora lo único que necesitamos, creo que es un Pie de página. Como expliqué en uno de los episodios anteriores, ahora puedes simplemente arrastrar en el componente desde aquí, boom. Simplemente colóquelo así, asegúrate de que haya un margen saludable debajo de él. Voy a escoger 100 pixeles, y solo vendré y pincharé en el Fondo y luego arrastraré éste un poco más corto y aseguraré que se ajuste al fondo. Ahora como puedes ver en pocos minutos, hemos diseñado esta página, se ve muy bien y esto también es realmente fácil de convertir en una página responsive. En el próximo episodio estaremos construyendo la página sobre, que es un poco más complicada. Yo lo llamé servicios, eso no es bueno. Esta es la página sobre. Pero en la página sobre hay pestañas, como puedes ver por aquí, hay una galería de imágenes y hay esta sección de preguntas frecuentes. Te veré en el próximo episodio. 24. Acerca de la página parte 1: un comienzo rápido: Empecemos a construir la página Acerca, esto se ve bastante creativo. A medida que acabo de empezar, vamos a tratar de hacerlo lo más rápido posible e intentar subir un poco a la velocidad, porque este también es un curso para que tu flujo de trabajo sea un poco más agradable. Las secciones superiores aquí arriba son bastante fáciles, esto se hará bastante rápido, y luego vamos a pasar a esta sección que es un poco complicada. Esta es fácil y ésta también es un poco complicada, pero no va a ser tan difícil, veamos lo rápido que podemos construir esta página. Lo que voy a hacer es que voy a hacer un duplicado de la página del portafolio, voy a dar click en el hacia arriba, voy a sostener Alt y Shift y luego hacer un duplicado como este, voy a eliminar todo el contenido en el interior. En primer lugar, voy a venir y hacer clic y hacerlo mucho más largo por ahora, arrastra el pie de página hacia abajo. Ahora lo primero que tenemos que hacer es crear las tres columnas que necesitamos para esto nuestro Acerca, quiero mostrarte un pequeño truco sobre cómo puedes hacer eso. Vamos a agarrar tu rectángulo por ahora, y voy a crear un rectángulo como este. Ahora voy a crear otro rectángulo sosteniendo Alt, esto es perfecto. Ya son 50 pixeles de diferencia, eso fue sólo suerte para mí. Ahora también tenemos 50 píxeles de diferencia, quieres tener un poco de espacio en blanco entre esos bloques, porque vamos a usar este espacio en blanco en toda la página. Vamos a ver si estamos en la cuadrícula, esto es perfecto, esto solo fue suerte, por ahora vamos a crear unas cuantas líneas de ayuda o reglas, como se llama, si mueves el ratón hacia un lado de la tapa, obtendrás este efecto flotante, si luego haces clic y arrastras, puedes poner una línea en tu upboard que no sea parte de tu diseño, pero te ayudará a alinear ciertas cosas, voy a poner una línea por aquí. Ahora puedo eliminar todos esos bloques así, y tendremos unas pocas líneas que nos ayudarán a alinear nuestros elementos. Volvamos a mi diseño final, primero veamos qué tenemos aquí. Este es un título de 36, 16 y 822, lo que vamos a hacer es que vamos a arrastrar algunos títulos desde aquí. Esto es 24, verás, cometí un error por aquí, esto debería ser 24. También vamos a usar este, y vamos a usar éste, también vamos a usar el audaz y vamos a usar para texto, voy a copiar todo eso, volver a mi archivo, y vamos a solo pon primero el texto aquí, copia y simplemente pegarlo, borra este, ahora solo creemos primero las columnas. Alinear cada texto a esas columnas, como se puede ver por aquí, veamos el diseño final, necesito un título audaz por aquí y un 36 aquí para todos los títulos. En primer lugar, hay versión más pequeña y luego hay una versión más grande, vamos a agarrar la versión más pequeña así. Esta será sólo una línea de texto, voy a hacer que sea un punto textos, voy a hacer eso morado. Ahora este solo será un título grande como este, también voy a hacer eso en el punto X porque como puedes ver, solo hay una línea de texto porque voy a hacer más fácil arrastrar y alinear, voy a dar esos 10 píxeles de espacio en blanco entre esos dos rubros. Ahora como se puede ver, el diseño final, también tenemos sólo una línea de texto por aquí, voy a convertir esta también en un texto, En textos de un punto como este. También dan que 10 píxeles de espacio entre tal vez un poco más, tal vez algo así como 15. Lo que voy a hacer ahora lo voy a arrastrar hasta aquí, asegurarme de que esté alineado a la parte superior y hacer una copia de esto. Ahora tenemos los fundamentos para toda esta página y esto hará que sea fácil construir una página. Lo que vamos a hacer ahora es que vamos a mirar nuestro diseño. Como puedes ver, este encabezado es realmente grande así que lo que quiero hacer es primero arrastrar este hacia abajo. A lo mejor hacer algo como esto, arrastrémosle un poco más hacia abajo, solo prepararé primero el fondo, voy a desbloquear la capa de fondo, y también la voy a desagrupar porque hay dos capas dentro de ella, presiono “Comentar Alt G” o simplemente haga clic derecho y desagrupar. Ahora voy a ir a mi buscador, insertar la foto que necesitamos así y la voy a hacer mucho más oscura disminuyendo la opacidad, la voy a poner en 20 por ciento, voy a presionar dos o tal vez incluso una así el texto será realmente visible. Ahora selecciona ambas capas de fondo, las vuelve a agrupar, y luego haz clic con el botón derecho y bloquearlas, y de esta manera podemos moverlas. Además, yo también voy a hacer eso por este. Ahora veamos qué tan rápido podemos hacer esto. Agarra todos tus títulos, haz clic en todos y haz un duplicado, ahora haz este, hazlos blancos. En mi diseño final, incluso hay un texto introductorio, como podemos ver aquí mismo, lo siento, estos textos no necesitan ser blancos tiene que ser morado así porque eso se ve realmente bonito en este fondo oscuro, tenemos un pequeño texto introductorio, como se puede ver aquí mismo. Lo que voy a hacer es que voy a arrastrar este un poco hacia abajo y luego arrastrar uno de esos, hacer una copia de ella, hacerlo más pequeño así y lo hago más largo. Ahora necesitamos más espaciado, así que solo lo pongo así, eso se ve bien, vamos a ver qué hemos creado hasta ahora, haga clic en upboard y haga clic en play y esto se ve absolutamente hermoso. Vamos a insertar la imagen por ahora y luego vamos a pasar a las otras secciones, volver a tu buscador. la foto es de lo que necesitamos sacarla fuera de tu upboard para asegurarnos y luego arrastrarla dentro de tu upboard y escalarla, como puedes ver, no he exportado las imágenes lo suficientemente grandes, pero siguen siendo lo suficientemente afiladas. Creo que, bueno, no es perfecto, pero siempre debes usar imágenes nítidas, por supuesto, no demasiado nítidas porque de lo contrario tus sitios web serán lentos, pero esta imagen se superpone como puedes ver aquí mismo. Déjame ver, también hay una sombra agradable muy suave, también vamos a crear eso. Haga clic en la sombra, vamos a poner esto en el 30 y luego en el 60. Ahora tenemos esta sombra muy suave y agradable, tal vez disminuya un poco esta, y veamos qué hemos creado hasta ahora, vuelve a pinchar en tu upboard y luego pulsa play. Absolutamente hermoso, me gusta este resultado, sigamos ahora con esta parte en el siguiente video. 25. Acerca de la página parte 2: pesas + galería: Bienvenido de nuevo. En este video, vamos a crear la función DEP que puedes ver por aquí. Esta es una de las características que a menudo se utiliza en grandes sitios web, para por ejemplo mostrar un proceso donde hay múltiples pasos y no quieres que la página sea demasiado larga. Ocultas información entre en esos pasos. Es realmente fácil. Es sólo un puñado de textos y un esbozo. Solo creemos como por ahora. Voy a volver a mi película. Voy a asegurarme de que el color aquí sea bueno. Voy a ponerme eso en morado. ¿ De qué color usé por aquí? Creo que usé este color. Sí. Yo no uso estos bloques. Aquí no usamos un título. Solo utilizamos un cuadro de texto blanco como éste. Alinearlo a la parte superior. Asegúrate de que esté alineado en la parte superior de una línea de textos. Eso se ve bien. A lo mejor poner un poco Enter para que se vea un poco más bonito. Ahora solo mueve este hacia arriba así, y primero creemos el contorno. Lo que voy a hacer es que voy a agarrar la herramienta Línea como puedes ver por aquí. Simplemente voy a crear un contorno muy rudo. Ahora realmente necesitas usar el Turno. Entonces si sostenéis Shift y podéis ver que otra línea permanecerá recta y eso es lo que queréis. Realmente no importa si no es perfecto la primera vez. Primero suelta el mouse y luego suelta el Shift. No te preocupes por el color aquí. Ahora no empieces en este punto porque entonces vas a arrastrar la primera línea. Ahora tenemos que empezar en otro punto y retroceder así. No te preocupes por las líneas por ahora. Yo solo quiero mostrarte la forma básica. Crea una línea como esta. También crearé una línea como esta. Asegúrate de usar las líneas azules para ayudarte así. Pero sé que lo voy a hacer un poco más grande para el texto. Voy a acabar así. Ahora presiona V. Ahora vamos a alinear toda la caja para que se ajuste a nuestro diseño. En primer lugar, lo que voy a hacer es arrastrarlo todo, moverlo a la izquierda y hacerlo un poco más grande. Como podemos ver en este momento, va a estropear nuestro diseño. Pero eso no es un gran negocio porque necesitamos cambiar las líneas a mano. Así que asegúrate de que esté de este lado. Asegúrate de que en realidad sea lo suficientemente grande. Entonces voy a agarrar una de mis capas de texto y moverla por dentro y alinear esto, tal vez hacer esto cuatro líneas como esta y ver si hay suficiente espacio ancho a la izquierda, y en la parte superior y en la parte inferior. A lo mejor quiero un poco más de espacio en la parte inferior. Por lo que voy a seleccionar todo, desseleccionar los textos y mantendré pulsada Mayús y luego dar clic en el texto. Voy a hacerlo un poco más grande para darle un poco más de espacio amplio. Ahora la línea azul en realidad está en nuestro camino, así que voy a borrar eso por ahora. Así que solo arrástrelo y muévelo hacia un costado y luego se ha ido. También voy a apagar la grilla, como pueden ver. Para que en realidad podamos ver lo que estamos haciendo. Ahora haz click en tu texto y solo alinearlos. No olvides mantener presionado Shift para que tus líneas sean rectas. Tan solo asegúrate de que todas las líneas estén conectadas. Nuevamente, selecciónelo todo, mantenga presionado Mayús , desseleccione el texto y ahora hágalo púrpura o el color real que desee. Creo que he usado morado. No, usé morado claro por aquí, el morado normal, y el morado oscuro. Haz de éste el morado claro. Queremos arrastrar un título. Solo arrastremos este. Haga este paso número uno, por ejemplo, el diseño. Ahora haz una copia de éste. Cambia el texto, hazlo un poco más oscuro. Esta es también una de las cosas que es realmente importante en el diseño web, es que usas tus colores para hacer mejor la experiencia. En este caso, si yo también hiciera este morado, la única indicación de que estamos en este escalón sería esta línea y eso es suficiente. Pero si se puede agregar otra capa de profundidad a eso, ahora se puede ver que ésta está resaltada. Entonces aunque alguien no tenga una buena pantalla y no tenga estas líneas, se puede ver que ésta está resaltada porque es más ligera. Entonces eso es lo que sólo quería mostrarte. Creo que esta caja es un poco demasiado pequeña, así que voy a ajustarla y hacerlo un poco más grande. Voy a hacer otros dos títulos. Algo así. Eliminemos estas líneas por ahora. Como se puede ver aquí mismo, en comparación con mi resultado final, se ve similar. Puedes cambiarlo un poco más por supuesto para que quepa un poco más. Pero me gusta este diseño, es sencillo y funciona. En este episodio también quiero crear esta parte. Va a ser realmente fácil, pero porque estas son solo unas cuantas imágenes y es el mismo estilo que hemos usado antes. A ver. Voy a agarrar este. Hacer un duplicado de esto. Ahora asegúrate de tener el mismo espacio de aquí a aquí, luego de aquí a aquí. Esto es 100. Ahora quieres asegurarte de que tienes 100 píxeles al final de esta línea. Como se puede ver, esta línea no está perfectamente alineada, pero 990.9 es lo suficientemente buena. Ahora ve a tu Finder, agarra el software que uso. Agarra todos ellos y simplemente colóquelos dentro de tu app-board. Voy a usar dos filas, tres columnas cada una. Alinearlos para que se vea bien en el ojo. Ahora solo agruparlos y colocarlos dentro de su tablero de aplicaciones. Ahora solo puedes cambiar el espaciado para que se vea un poco mejor. Vamos a ver lo que hemos creado hasta ahora. Voy a dar click plus. Esto se ve realmente bonito y el contraste se ve bien. Tenemos que dar un paso a la característica por aquí y tenemos una pequeña galería de fotos de unos cuantos logotipos. Eso se ve bastante bonito. En el último episodio de esta página, vamos a crear esta sección. No va a ser muy difícil, pero vamos a usar la herramienta Forma para estos rectángulos. 26. Acerca de la página 3: sección de FAQ: Bienvenido de nuevo. En este video, vamos a crear esta sección de preguntas frecuentes que parece que esta parte se abre haciendo clic en ángulo directo. Lo siento. El triángulo por aquí. Empecemos con este diseño. En primer lugar, vamos a duplicarlo el título, por supuesto, y asegurarnos de que tenga el mismo espaciado. Elimine esta línea por ahora. Cuál es este diseño, en realidad, es sólo un título, que es sólo un semi perno 16 puntos. Entonces es este pequeño triángulo y en línea. Ya hemos creado esta línea, así que solo podemos dirigir esta línea desde aquí y simplemente colocarla aquí. Para la Capa de texto, quiero agarrar un cuadro de texto como este, hacerlo solo una línea y luego hacerlo 16 en pernos. Utilizo dos colores para el activo. He usado el morado claro y para el no activo, he usado el morado oscuro, que es el mismo estilo que hemos usado aquí. Asegúrate de tener el mismo estilo en tu sitio web, en tus diferentes páginas. Porque entonces simplemente se ve consistente, lo cual es importante en el diseño. Como pueden ver, hasta he usado una versión más oscura por aquí. Eso no es perfectamente consistente con esto. Ahora, nos vamos a apegar a este color por aquí. Ahora, lo que quieres hacer es acercar y crear y hacer click en la herramienta de triángulo y solo vamos a crear un pequeño rectángulo. Sostén Shift para hacer un triángulo perfecto. Ahora, desmarque la frontera, que oscurezca. Ahora bien, si no se hace clic en la pregunta, tiene que apuntar a la derecha. Simplemente presione “V” y luego vaya a la derecha hasta que vea la rotación, mantenga presionada la tecla Mayús y luego gírela y alinéela. Un poco demasiado grande. Hagámoslo un poco más pequeño, alinémoslo otra vez y ahí vamos. Agarremos todo esto. Hacer un grupo como podemos duplicar fácilmente como mantener Alt y Shift y hacer dos duplicados de él así. Dale un poco de espacio porque también necesitamos una pregunta que esté abierta. Hacer otro duplicado desagrupar este. Haga clic derecho, desagrupe, ponga éste al fondo. Tendremos un poco de espacio para nuestros textos. Creo que necesitamos más espacio. Dejemos que sólo aumente este espacio por aquí. Simplemente agarraré uno de tu cuadro de texto así. Sostén Alt y haz que se ajuste al diseño. Ahora bien, si hacemos de esto uno ligero, se puede ver que el contraste, no es realmente agradable. En realidad prefiero el diseño que he usado por aquí. Yo sólo voy a agarrar esto, esto, y este título. Estoy sosteniendo Comando y Turno y voy a hacer de esto el color oscuro. Este, sí, es éste, el 6A6680. También voy a hacer eso por estos títulos porque creo que eso se ve un poco mejor. Ahora, incluso hay una diferencia mayor entre el estado activo y los estados no activos. Sí, esto se ve un poco mejor. Ahora, sólo necesitamos un breve texto introductorio como este. Seguro que es una línea en la parte superior del título más pequeño. Ahora, agarra todo esto, agrupéalo, muévelo hacia arriba y lo único que tenemos que hacer es cambiar el rectángulo. Perdón, el triángulo por aquí y gíralo para que parezca que se abre. Ahora, lo último que necesitamos es el Pie de Página. Agarra tus componentes, arrastrando tu Pie de página. Ya he tenido un Pie de Página. Apenas ahora disminuyamos nuestro tablero y ahora, terminamos. Echemos un vistazo a nuestros resultados. Vamos a dar click en nuestro tablero, click en “Jugar”, y estoy realmente contento con los resultados. Espero que tu diseño también se vea bastante bonito. Pero esto es un sólido Acerca de la página. Guardemos nuestro archivo por ahora. Entonces vamos a ir a la siguiente página, que va a ser una página súper fácil. Vamos a construir esto en un episodio. Va a ser la página Acerca con nuestros iconos de redes sociales personalizados los cuales se ven afectados y súper afilados. 27. Página de contacto con íconos vectoriales: Bienvenido de nuevo. En este video vamos a crear la página de contacto. Ahora que vas a hacer, si tienes tu diseño por aquí, ¿ vas a hacer un duplicado de esta página o de esta página? Esto es también en lo que pienso antes de empezar a duplicar. Tienes que mirar la página y se parece más a esta página o se parece más a esta página? En este caso, realmente no importa porque la sección superior se parece más a esta página y la sección abajo se parece más a esta página. Pero yo sólo quería darte esa propina. Simplemente no dupliques tu última página y luego empieza a ajustarla. A lo mejor hay otra página que ya se parece, al menos un poco y luego no tienes que cambiar tanto. Por ahora sólo voy a agarrar esta página así, eliminar el interior de la misma. También voy a hacer un duplicado de esta parte, así que cópiala, haz click en la Mesa Nueva y pega. Entonces como puedes ver por aquí, tenemos esta parte inferior, que se parece a esta parte superior, pero luego con diferentes colores. Entonces voy a agarrar esta parte manteniendo pulsado Shift, mantén presionado Comandos, pulsa Copiar, ve a nuestra nueva Mesa de trabajo y pegarla, mantén pulsada Mayús y moverla hacia abajo, y luego cambia el color por aquí así. Ahora vamos a cambiar de nuevo la imagen. Desbloquearlo, Desagruparlo, y luego ve a tu Finder, ve a fotos y arrastra la nueva foto así. Voy a hacer este un poco más grande para darle un poco más de variedad. Ahora lo único que necesitamos para este diseño es un enorme Google Map. Por ahora solo voy a usar una captura de pantalla. Si quieres que el Mapa de Google se implemente en tu diseño, debería ir a Google Maps, y luego solo hago una captura de pantalla del lugar real. Pero no quieres que esto sea parte de tu diseño. Digamos que estás viviendo por aquí. Simplemente escribe tu ubicación luego haz clic en esta distancia, y ahora puedes hacer una gran captura de pantalla. Si lo deseas puedes hacer una captura de pantalla de toda la página. Pero para tu diseño creo que se ve un poco más limpio si no incluyes todos esos botones, pero puedes por supuesto, crear una captura de pantalla de esta parte y esta parte también. Por cierto, ¿te mostré cómo crear una captura de pantalla? Esto es diferente para Windows de lo que es en Mac. Pero en Mac, es Comando, Control, Turno, 4. No es un atajo fácil, pero es súper bonito porque entonces puedes crear una captura de pantalla como esta. Entonces si sostienes espacio, incluso puedes mover esta caja así. Yo uso esto todo el tiempo. Es tan super agradable. En Windows solo puedes usar el botón Imprimir pantalla, pero creo que en Windows 10, hay una nueva opción para esto donde también puedes simplemente crear una captura de pantalla de una parte de una página. Ahora voy a dar clic, y ahora está guardado en mi portapapeles. Ahora puedo entrar a Adobe XD y solo puedo hacer clic en una pasta o comando-v y luego simplemente disminuir el mapa por aquí y hacer que se ajuste a tu Mesa de trabajo así. Voy a añadir una sombra otra vez, ya conoces los números 30, 60 y tal vez disminuir un poco la opacidad. Ahora mueve toda esta caja hacia arriba, también va a poner eso a 100 píxeles de espacio en blanco. Ahora lo último que tenemos que hacer es insertar el texto. Como se puede ver aquí, tengo dos colores dentro de una capa de texto. Cómo puedes hacer eso es bastante fácil, si solo escribes el texto por ejemplo algo como esto, entonces solo puedes seleccionar el texto y luego presionar un color. Esto no es posible en la mayoría de las herramientas, porque en otras herramientas ambas seleccionas todo el cuadro de texto pero en XD, solo puedes hacerlo así. Es bastante fácil. Ahora solo insertemos nuestros iconos de redes sociales, que por cierto son vectoriales. Ahora vamos a la carpeta, Iconos sociales, SVG, puedes escoger algunos iconos sociales de aquí. Voy a colocar YouTube, Instagram, y LinkedIn, por ejemplo. Simplemente arrástralos fuera de tu Mesa de Trabajo así. Ya hemos jugado con los iconos SVG en la página de inicio, por supuesto, así que ya sabes cómo funciona esto. Lo vas a insertar, hacerlo más pequeño manteniendo pulsado Shift y hacerlos aún más pequeños. Aleja el zoom para ver si no es demasiado grande. A mí me gusta hacer los iconos realmente pequeños porque creo que eso se ve realmente bonito. Ahora déles un poco de espaciado, selecciónelos todos, alinéelos así, y luego déles un color, algo así que se vea bien. Es incluso demasiado grande para mi gusto. Voy a hacerlos aún más pequeños. Creo que esto se ve bastante decente. Ahora sólo tenemos que arrastrar éste hacia arriba y cerrarlo disminuyendo el tamaño de la Mesa de Trabajo. Sólo veamos qué es lo que hemos creado. Voy a dar click en play. Esto se ve bastante bien. A lo mejor el título necesita estar un poco arriba. Tenemos este gran Google Map con sombra suave súper agradable, y tenemos nuestros iconos y nuestros textos. Se ve realmente bien. Voy a dar clic a esto de distancia. Voy a dar click en guardar. Ahora ya has visto que la primera página tardó mucho tiempo, pero las otras páginas fueron creadas bastante rápido, así que asegúrate de poner mucho esfuerzo en tu página de inicio porque si tu página de inicio es buena y has prestado atención a tu texto y a tus botones, a tus colores, las otras páginas solo serán realmente fáciles de crear. Ahora vamos a entrar en otras cosas adelantadas. Por ejemplo, no hemos utilizado el efecto de desenfoque de fondo, como se puede ver aquí mismo en este diseño. Este es también un efecto popular para hacer que algunas cosas salgan un poco más. Eso es lo que quiero enseñarte en el próximo episodio y además crear un diseño como este, que tiene un corte con una máscara, un tipo diferente de estilo de botón y también aquí este color de desenfoque de fondo. Eso es lo que quiero hacer en los próximos episodios. Si conoces estas técnicas, estás seguro de que puedes crear casi cualquier diseño que quieras dentro de Adobe XD. Espero verte en el próximo episodio. 28. Un sitio web de viaje con desenfoque de fondo: Bienvenido de nuevo. En este video vamos a crear este diseño que puedes ver por aquí. Esto es un poco diferente al proyecto en el que hemos estado trabajando hasta ahora. Pero quiero mostrarte algunos efectos que no formaban parte de este diseño, pero que puedes usar para hacer más interesante tu diseño. Por ejemplo, este efecto de desenfoque de fondo que puedes ver aquí mismo. Este es un efecto muy moderno, puedes hacer uno ligero como este, o puedes crear uno más oscuro como puedes ver por aquí. O como pueden ver aquí, esto es lo que estaremos haciendo en el próximo video. Este efecto es realmente bonito para hacer que tus artículos salgan un poco más, porque sin este fondo, simplemente se desvanecerán en la imagen. Esta es una gran manera de separar los artículos del fondo. Sólo empecemos. Lo que quiero que hagas es acudir a tu buscador y asegurarte de que tengas instalada la fuente Abuget. Hay dos carpetas sobre un aquí y ahora nos vamos a centrar en la página de viajes. Vamos a empezar, vamos a ir a nuestro expediente de ejercicios, y vamos a hacer un duplicado de nuestra página. Eliminemos estos pies de página por ahora. Vamos a hacer un duplicado y íbamos a eliminar todo lo que está en la página. Vamos a crear un poco de distancia aquí. Elimina todo lo que hay en la página, así. No necesitamos que la página sea tan larga. ¿Sabes qué? Vamos a hacerlo tan alto como el puerto de vista. Vamos a copiar este número y pegarlo aquí sobre la altura. De esta manera, tenemos una página más pequeña. No voy a entrar en cada pequeño detalle cómo crear esta página porque ya sabes crear un menú como es, así que saltaré ciertas cosas. La sombra por ejemplo, podrías simplemente copiar esta sombra desde el fondo de nuestro diseño por aquí, lo que ya hemos hecho, porque ya hemos creado esa sombra. También ya sabes insertar los iconos así, pero hay algunos otros iconos que he usado en este diseño. Si quieres recrear este diseño y tal vez ponerlo en tu portafolio, eso es posible, porque he incluido los iconos de viaje que he usado. Aquí están los archivos SVG, aquí está el cóctel, la cama, y la nieve. Déjame crear esta página realmente rapido. Ya casi termino con el diseño de página como puedes ver aquí mismo. Es llegar ahí, acabo de insertar el menú desde mi propia página web, realmente no importa. Pero hay una cosa que aún no te he mostrado y es cómo crear un icono de hamburguesa como este. un ícono como este se le llama la hamburguesa porque tiene tres capas, y este menú se usa muchas veces en dispositivos móviles para abrir un menú y se ve realmente limpio. Esta página web de nuevo, no es realmente práctico, pero es solo para ejercer nuestra habilidad de diseño. Vamos a crear este ícono de hamburguesa en nuestro archivo muy rápido. Lo que voy a hacer es acercar, agarrar tu rectángulo y crear un rectángulo diminuto como este. Después, alrededor de tus esquinas, asegúrate de que no sea demasiado grande, o tal vez esto sea un poco demasiado grande. Hazlo un poco más pequeño, solo toma tu herramienta de retícula de repetición y asegúrate de tener tres de esas pequeñas cosas de hamburguesas. Ahí tienes tu ícono de hamburguesa. A lo mejor es un poco demasiado falso, solo juega un poco con él hasta que estés satisfecho. Ahora ya he preparado todos los elementos y ahora vamos a crear el efecto de desenfoque de fondo. En realidad no es tan difícil, solo agarra tu rectángulo, crea un rectángulo grande como este, y ponlo en el fondo, primero hagámoslo otro color como este para que podamos ver lo que estamos haciendo, presione Comando y corchetes izquierdos para llevarlo al fondo. Como puedes ver, tal vez necesito un poco más de espaciado entre las columnas. Démosle un poco de espacio ancho como este, y hagámoslo negro por ahora y apaguemos la frontera. Lo que puedes hacer en este momento es activar el desenfoque de fondo. Si haces esto, creará el desenfoque de fondo predeterminado, que es bastante pesado, si puedes ver. puedes jugar con esta configuración. Lo que hice en mi diseño es disminuir el desenfoque de fondo. Si lo pones en cero, solo puedes mirar a través y es solo una capa blanca con opacidad, pero si aumentas tu desenfoque, aún puedes ver un poco el fondo. Entonces también puedes jugar con la iluminación, y por supuesto, con la transparencia de toda la capa. Esto depende por supuesto, de tu diseño e incluso depende del fondo real. Por ahora voy a aumentar un poco el desenfoque con estos pocos, un poco más abajo, darles un poco más de espaciado y duplicar esos bloques así, y usar otro para el último. Nuevamente, este no es un diseño perfecto y no he medido todos los elementos aquí, pero es solo para mostrarte cómo funciona el efecto. Como puedes ver, mi diseño final, se ve un poco más bonito. Hay algunas esquinas redondeadas en los bordes, también te mostraré cómo hacer eso. Si haces click en un rectángulo como este, tienes las esquinas redondeadas por aquí. Ya hablamos de estos en la sección de botones, pero también se puede arrancar una esquina en, por ejemplo, sólo el lado izquierdo arriba. Si ahora solo presiono ocho, vas a ver que sólo consigo una esquina de este lado y no de todos los demás lados. De esta forma se puede crear un rectángulo muy bonito con esquinas redondeadas. También puedes seleccionarlos a ambos y luego hacerlo así. Ahí vas. Este es el efecto y ahora también quiero mostrarles la versión oscura, voy a duplicar mi diseño, y luego dar clic en el primero, mantenga pulsada la tecla Mayús, mantenga pulsada la tecla Mayús, y haga clic en los otros dos. Ahora juguemos con la iluminación por aquí. Como puedes ver, también puedes disminuir la ligereza. Entonces en algún momento se vuelve más oscuro que el fondo real. Si lo pones en un número más, se volverá más ligero, y este es el efecto que puedes ver en el diseño moderno en estos días. No veo la versión más oscura muchas veces, pero esto también es bastante bonito. Por supuesto, esto depende de tus antecedentes, necesitas jugar con los ajustes para que se vea bien, pero esto no se ve tan mal. Vamos a probarlo con unos pocos antecedentes diferentes. Voy a desbloquear mis fondos y vamos a ver cómo funciona eso. Vuelve a tu buscador, y por ejemplo, toma otra imagen y ponla en el fondo así. Como puedes ver, en este fondo, la versión oscura se ve muy bonita. Esto tampoco se ve tan mal, pero me gusta mucho más la versión oscura aquí. Probemos con un fondo más claro como este. Como se puede ver aquí mismo, esto es un poco demasiado ligero. En este fondo la versión oscura también funciona un poco mejor. Puedes probar con los antecedentes que he incluido aquí, “Oh, me gusta mucho este, este es el realmente limpio”. Ese fue el efecto de desenfoque de fondo, espero que te haya gustado esto, este es un efecto muy moderno. En el próximo episodio vamos a crear este diseño, que es un poco más complicado, tiene una máscara y tiene este slider, efecto slider vertical, y un botón extraño. Espero verte en el siguiente video. 29. Un sitio web de tienda de libros con máscaras con máscaras: Bienvenido de nuevo. En este video, vamos a crear este hermoso diseño. Nuestro desenfoque de fondo está aquí otra vez y tenemos una máscara, tenemos un botón raro, así que solo empecemos con este. De nuevo, no te voy a mostrar cómo insertar un fondo y cómo hacer un menú porque ya lo sabes. Dame un minuto para recrear este diseño. Ya casi termino de recrear esta página. esta página hay algunas cosas diferentes a las del Explore Indonesia. En primer lugar, el desenfoque de fondo es mucho más intenso y también hay un desenfoque de fondo en la esquina que es solo uno pequeño con un ícono de búsqueda. Cómo hice eso es que acabo de copiar el rectángulo con el desenfoque en él, eliminé todo esto, lo hice solo un rectángulo afilado. Lo puse en una esquina por aquí y ahora esto se ve mucho más oscuro que este rectángulo y eso es por el fondo. Pero solo por tu diseño, entonces solo puedes aumentar la ligereza para que parezca que coincide con el fondo real. Esto es una pesadilla para los desarrolladores, pero esto es solo para mostrarte cómo hacer visualmente que sea atractivo tal vez para tu portafolio. Pero si estás trabajando con desarrolladores, simplemente no pongas valores diferentes en todos tus elementos. De lo contrario, no van a estar muy contentos. Las líneas de aquí se acaban de crear con la herramienta de línea. Es blanco y luego se pone un 20 por ciento de opacidad así de esta manera, se obtienen esas lindas líneas que se pueden ver por aquí. También pondré uno a la izquierda y ahora vamos a crear los efectos de máscara. Se puede ver un 02 por aquí que está cortado. Lo que vamos a hacer es que vamos a duplicar nuestro gran título, que es por cierto, el Grendel Font, que también puedes encontrar en las descargas. Voy a crear un 02 grande, voy a hacer que sea un texto puntual, hacerlo más grande, y luego lo voy a poner en la línea. Solo agreguemos otra línea de ayuda por aquí. Eso se ve bien, y ahora quiero cortar a los dos en algún lugar por aquí. Lo que voy a hacer es agarrar un nuevo rectángulo y luego voy a crear uno y superponerlo en los dos, borrar el borde y escoger un color diferente muy raro porque no vamos a ver esa máscara. Cualquier máscara funciona así. Necesitas un elemento para estar encima y luego si seleccionas ambos con turno y luego presionas “Máscara”, siempre uso el comando “Shift M”, pero tal vez también lo puedas hacer desde aquí. Creo que puedes hacerlo desde aquí, máscara con forma. Aquí utilizas la forma para crear una máscara y eso significa que solo veremos lo que hay dentro de esta forma roja. Si hago esto ahora mismo, se puede ver que tenemos este efecto y ahora podemos aplicar la opacidad por aquí. Si quieres cambiar el texto, no puedes hacerlo haciendo doble clic. Es necesario hacer clic en la capa de texto real. Esta es la máscara, aún puedes hacer clic en ella y cambiarla si quieres, y esta es la capa de texto. Si quería que la capa de texto fuera de un color diferente, necesito hacerlo aquí mismo. En mi diseño, lo puse en, no sé, 40 por ciento de opacidad por ejemplo, y como puedes ver en este momento, hemos creado esta bonita máscara. Elimina esta regla de ayuda por ahora y esto se ve bastante limpio. Creo que podría hacer en mi diseño real es aún más grande así que voy a aumentar el tamaño como puedes ver. Asegúrate de que esté dentro de tu máscara y si no está dentro de tu máscara, puedes cambiarla así. Eso se ve bastante bonito y ahora vamos a crear el botón que puedes ver por aquí con una pequeña flecha y algunas esquinas diagonales. Eso tampoco es realmente difícil de hacer. Vamos a crear un botón muy rápido. Agarra tu herramienta de rectángulo, crea un botón, elige un color que coincida con tu diseño. Esto se ve bien por ahora. Elimina el borde, pon algo de texto dentro de tu capa. Creé una flecha usando la herramienta de línea así, hacer una línea blanca, y luego agarrar la herramienta de triángulo y hacer un pequeño triángulo como este, desmarcar el borde y rotarlo. Asegúrate de que no sea demasiado grande. Eso se ve bastante guay. Ahora lo que puedes hacer, si haces doble clic en el rectángulo, puedes cambiar el punto de anclaje. De la misma manera que cambiamos el efecto de onda en nuestro sitio web, puedes agarrar esta esquina y esta esquina al mismo tiempo manteniendo pulsado “Shift” y luego click, y ahora solo puedes cambiar la posición de esos puntos de anclaje. De esta manera podrás crear un botón que se vea un poco más creativo. Si agrupas esos tres elementos como este, haces click en el texto y también haces click en el “Botón”, y haces click en éste, ahora está alineado en el medio. Nuevamente, no se ve exactamente igual, pero esta es la técnica que utilicé. Creo que en mi diseño aquí también hay mucho espacio entre las letras como puedes ver. También voy a hacer eso muy rápido por ahora. Aumenta la visión de espaciado de la fuente si realmente quieres que coincida con el diseño. Creo que mi fondo es un poco más oscuro en mi diseño final. Cambiemos el texto por ahora, compre ahora. Eso se ve bastante guay. El último que quiero hacer para esta página es crear este efecto que puedes ver aquí mismo. Cómo se hace eso es mediante el uso de la máscara y el uso de dos capas encima de la otra. Vamos a crear esto realmente rápido. Lo que voy a hacer es acercarme y agarrar el círculo, hacer un pequeño círculo así, duplicarlo. Después para el superior, muévelo un poco más hacia arriba y luego haz una copia de ella sosteniendo “Alt”, hazlo más grande sosteniendo “Alt” y “Shift”, luego ponte el borde y llénalo. Ahora, ponte esto en los blancos, hazlo mucho más grande, y ahora puedes ver que mis puntos son demasiado grandes. Necesito seleccionarlo todo, hagámoslo un poco más pequeño. Como puedes ver aquí mismo, hay un contorno blanco encima y luego hay una versión más oscura debajo de él. Lo que hice es hacer un duplicado de éste por lo que el blanco necesita estar encima. Para asegurarse de que está arriba, basta con hacer click en traerlo al frente. Esto se quedará el blanco. Para esto queremos versiones grises así que voy a poner eso en 50 por ciento de opacidad. Pero ahora si superpongo este, no vamos a ver el anillo de fondo, así que hay dos formas en que podemos hacer esto. Podemos crear una máscara en esta que se vea así o podemos crear una máscara en ésta y solaparla para entonces parece que la blanca está arriba pero en realidad, esta está arriba. Eso es lo que voy a hacer porque eso es un poco más fácil. Agarra tu rectángulo por ahora, crea un rectángulo y asegúrate de que esté en la posición correcta, luego haz clic en ambos y haz clic en “Objeto” y luego en “Máscara”. Ahora el gris está arriba, voy a mover el blanco debajo de él, ahora presiona “Command” y el corchete izquierdo para traerlo a la espalda. Ahora está por debajo de ella pero no podemos ver ésta porque hemos utilizado la opacidad, razón por la cual. No podemos usar la opacidad en este caso. Tenemos que aumentar la opacidad y cambiar el color a algo que se parezca un poco más al fondo, hacer que eso sea un poco más claro. En realidad lo puedes ver, y ahora si te alejas, puedes ver que esto se ve bastante genial. Lo único que es diferente aquí es que hay mucho más margen entre todos los puntos y los puntos de aquí abajo tienen una opacidad, algo así. Es así como se crea ese efecto, se ve realmente bonito, esto se puede usar para un deslizador que reemplazará a la imagen en el fondo. Este diseño funciona también bastante bien con diferentes fondos. Por ejemplo, tomemos otro fondo y lo pongamos aquí. Como puedes ver, se ve bastante bien. A lo mejor esto es un poco demasiado intenso así que disminuye la opacidad así, ponlo en 50 o en 60 y ahora tienes tu diseño. lo único que me olvidé más el ícono de búsqueda por aquí, que también he incluido. De nuevo, si quieres usar este artículo en tu portafolio, no me importa, está bien. Ahí está el icono de búsqueda. Eso se ve bastante bien. Espero que también te haya gustado este episodio. Esta fue otra buena técnica, espero verte en el próximo episodio porque vamos a crear algunos otros efectos cool. 30. Diseño móvil responso: parte 1: Bienvenido de nuevo. En este episodio vamos a hacer algo realmente divertido. Vamos a crear un diseño móvil receptivo. Esta nuestra pizarra ha estado vacía desde hace bastante tiempo. Yo quería llenar este diseño con el contenido en esta página va a ser un realmente fácil porque ya preparamos algunos estilos para nuestros títulos. El sitio web no es tan difícil de hacer responsive porque no tiene muchas columnas difíciles. Entonces esto son sólo dos columnas. Aquí hay tres columnas, tres, tres, dos, cuatro, y sólo una grande. Entonces si quieres asegurarte de que tu diseño móvil va a ser fácil, entonces no va a ser difícil si tienes una página que se ve así. Lo que quiero hacer en este momento es que quiero ampliar la página móvil porque probablemente va a ser más larga que ésta. Ahora necesitamos desbloquear algunas cosas para copiarlo. Lo primero que quiero hacer es desbloquear el fondo por ahora, y sólo voy a copiarlo así. Haga clic en nuestro fondo móvil y luego pegarlo. Entonces solo colóquelo dentro de nuestro tablero, tal vez hazlo un poco más pequeño así. Ahora también para nuestro menú, queremos usar un ícono de hamburguesa como te he mostrado en un episodio anterior. Yo sólo voy a copiar los logotipos. Haga doble clic en su logotipo, vaya al móvil y luego pegue, y asegúrese de tener sus rejillas configuradas con 30 píxeles desde los lados. A veces también uso 20. Pero 30 píxeles se ven un poco más bonitos porque cuanto más espacio en blanco tengas, más bonito se ve, pero no siempre es práctico. Para mis sitios web reales, cuando construí los inversores de mi sitio web, uso 20 píxeles en los lados. Entonces, solo pongámoslo en 20 por ahora. ¿Qué estoy haciendo? Voy a agarrar el ícono de la hamburguesa que he creado en otro episodio que es realmente bonito icono. Voy a copiar eso, ir a mi diseño móvil y pegarlo por aquí. Boom, lo tengo por aquí. Eso se ve bastante droga, y no está perfectamente alineado porque todavía tengo las rejillas repetidas. Realmente no lo necesito aquí, así que voy a desagrupar las cuadrículas repetidas. Podría simplemente hacer un grupo fuera de él y alinearme a la cuadrícula. Ahora insertemos nuestros títulos. Como nos hemos preparado aquí, el gran título va a ser éste. Yo sólo voy a copiarlo todo, y voy a hacer un duplicado y pegarlo por aquí, ponerlo así. Yo sólo voy a dar click en el título. Ya hemos preparado esto. Ahora sólo vamos al título móvil. Simplemente lo haré blanco. Ahora son 46 y este fue 54. Ahora lo único que debes hacer es asegurarte de que tu cuadro de texto no extienda la cuadrícula así. Tan solo asegúrate de que haya suficiente espacio para tus textos. Esto es tal vez un poco demasiado en mi actual sitio web. No hay muchos textos en el gran título. Pero puedes ver por aquí, diseñé y construí sitios web que no es un texto muy largo. Si utilizas una fuente grande como esta, asegúrate de que tu título no sea demasiado largo. Ahora también sólo voy a usar este. Como se puede ver, son sólo tres líneas. Eso es bueno para una vista móvil también. Solo copiemos este título y usemos un texto real. Eso se ve bastante bonito. Voy a volver a registrar el fondo, colocarlo un poco arriba. También voy a copiar la ola que está bloqueada. Voy a desbloquear de nuevo con el comentario L, y luego dar clic en mi móvil, o tablero y pegarlo. Asegúrate de que aún puedas ver la ola, tal vez hacerlo un poco más intensa en el móvil. Por lo que en realidad se puede ver una parte de la ola. No lo hagas demasiado intenso. De lo contrario se va a quedar barato. Entonces algo así que debería estar bien. Ahora el fondo, también queremos tener el mismo fondo de relleno que tenemos en este. Para el relleno, solo vamos a escoger el fondo F5, F5, F7. Ahora eso se ve mucho mejor. Veamos qué tan rápido podemos crear este diseño móvil. Para esta caja lo que voy a hacer, es que voy a agarrar la caja así, y asegurarme de que esté en la derecha nuestra pizarra. Asegúrate de que todavía podamos ver un poco de la ola porque eso estaría bien. Sólo voy a agarrar mis dos primeros iconos así, copiarlo, ir a mi tabla de aire, y luego pegarlo. Creo que algo así que debería estar bien. Por supuesto, en un teléfono móvil es difícil tener cuatro columnas. En ocasiones solo tienes que romper un poco tu diseño para que se ajuste a los teléfonos móviles, algo así que es lo suficientemente bueno. Agruparlo y ahora es sólo un grupo. Ahora para esta parte, tal vez no quiero usar cuatro imágenes aquí porque eso tal vez sea un poco demasiado. Lo que voy a hacer es que voy a agarrar todo esto primero, voy a mover eso a mi diseño móvil así. El segundo título, necesitamos el segundo título móvil así. Hazlo un poco más pequeño. Asegúrate de que se ajuste a la rejilla. Todas tus capas de texto, y alinearlas correctamente. Ahora cuatro imágenes, tal vez seamos un poco demasiado. Por supuesto que puedes hacer algo como esto. Agruparlo, cópielo , pegarlo aquí, y solo haz una imagen grande si te gusta eso. En realidad, eso se ve mucho mejor. Porque en mi página web, he escogido dos imágenes, y las he puesto encima una de la otra, pero creo que esto se ve bastante bien en realidad. Pero lo que hice en mi página web, acabo de escoger dos imágenes. Por ejemplo, estos dos. Por lo que tengo comentarios clicados y copio a estas imágenes y las pegué por aquí. Se pueden ver en tamaño completo. Creo que los alinearé en el medio, algo así. De nuevo, tal vez no quieras mostrar todo en un diseño móvil. A veces solo necesitas saltarte y eliminar algunas partes. En los sitios web reales, eso es a menudo lo que sucede porque en un teléfono móvil de lo contrario se volvería tan enorme. Haz algo como esta o la otra solución que diseñé. Por ahora voy a usar esa solución porque me gusta mucho. Ahora para esta parte, esto es realmente agradable con la plancha de repetición porque ahora se puede ver lo agradable que es la plancha de repetición. En primer lugar voy a copiar mi título. Asegúrate de copiar tu título, darle un poco de espaciado, y asegúrate de que se ajuste, es uno realmente largo. No sé cuánto texto es, quizá dos líneas, eso debería ser bueno. Ahora si copiamos la plancha de repeticiones y vamos a nuestro móvil nuestra pizarra y la pegamos, sólo podemos poner una caja aquí. En primer lugar, necesitamos disminuir el tamaño de cada rectángulo. Hagámoslo primero, disminuyámoslo , mantenga el turno. Ahora va a ser realmente agradable. Porque ahora mismo si disminuimos el lado de la cuadrícula de repetición, va a recordar todas las imágenes que están en el interior y mostrará las mismas imágenes. Por lo que no tenías que reorganizar las imágenes así. El único que necesitas reorganizar es el margen entre los rectángulos reales. Porque para tu sección de clientes, no sé si ya quieres saltarte unos cuantos clientes en móvil. Entonces por eso lo he diseñado así. Está bien, esa parte se ve bastante bonita. Asegúrate de que haya suficiente espacio en blanco entre tus columnas. Nuevamente por tu título escoge el móvil. Nuevamente, ahora lo estoy haciendo bastante rápido porque no quiero pasar mucho tiempo midiendo todo. Pero en un proyecto real, realmente mediré cada espaciado entre todos los títulos para asegurarme de que sea muy consistente en todo el sitio web porque eso es importante. Por lo que acabemos de terminar este diseño móvil en el siguiente video. 31. Diseño móvil responso: parte 2: De acuerdo, bienvenido de nuevo. Vamos a terminar esta página en un diseño móvil así que asegúrate de copiar tu capa de fondo así. Esta parte va a ser realmente rápido bloquearlo y bloquearlo para web. Agarra tu título así, haz una copia. Asegúrate de que sea el tamaño correcto así. Hazlo ancho. Alinee sus textos, cambie el tamaño de sus cuadros de texto, y ahora agarra uno de estos, cópielos así. Haga clic en el borde y asegúrese de disminuir el tamaño de esa columna interna real así. Ahora si quieres asegurarte de que tienes exactamente las mismas medidas en esta columna, lo que tienes que hacer es copiar esta y luego necesitas cambiar el texto. En ocasiones hago eso porque quiero asegurarme de que el tamaño de las cajas sea el mismo. Ahora cambia el tamaño de tu fondo y ahora estamos terminados para esta parte. Para la sección testimonial, te mostraré cómo hacer esta parte porque ya conoces los títulos. Si agarras uno de esos testimonios va a ser demasiado grande así que asegúrate la parte izquierda esté alineada en tu cuadrícula y luego disminuya el tamaño de la capa de fondo. Asegúrate de no hacer clic en todo el asunto, pero vienes y pinchas solo en la capa de fondo, disminuya esto, y luego también vengas y pincha en tu capa de texto y además le das un poco de espacio amplio. De esta manera, se ve casi igual y ahora puedes usar tu plancha de repetición y tener los otros comentarios dentro de aquí. Ahora para la última parte ¿cómo debes resolver esta parte por aquí? En mi página web, acabo de saltarme toda esta parte. Todo mi sitio web móvil simplemente se ve sin esto porque realmente no sabía cómo resolverlo. Por supuesto, puedes hacer una realmente pequeña o solo mostrar una de esas imágenes, pero te mostraré cómo se ve en mi página web. Lo que hice es agarrar la ola y agarré el fondo lo copié y lo pegué. Copié todas las capas de texto así, lo pegué, lo ajusté al tamaño del móvil, tal vez cambié un poco la onda y esto es en realidad todo lo que hice por la sección abajo. No quieres hacerlo demasiado difícil para ti a veces. Ahora para el pie de página, porque este es un componente, necesitamos cambiar el componente para el pie de página. Lo que quiero que hagas es hacer una copia de los componentes, clic derecho y luego desagrupar los componentes. Este sigue siendo nuestro principal componente que podemos ver por aquí. Pero ahora necesitamos hacer un componente para nuestro pie de página móvil. Simplemente vamos a cambiar este pie de página, agruparlo muy rápido. Entra dentro de tu tablero de arte, desagruparlo de nuevo, y luego asegúrate de que se ajuste a tu diseño móvil. Para pies de página lo que siempre quieres hacer es alinear a la izquierda tus elementos, asegúrate de que estén todos dentro de tu pie de página. No siempre está alineado a la izquierda, pero para la mayoría de los pies está alineado a la izquierda porque tienes muchos textos. Este es un pie de página realmente simple. A lo mejor también puedes hacer un diseño de centro para este pie de página. Pero en la mayoría de los pies solo quieres un pie de página alineado a la izquierda. Esto se ve lo suficientemente bien. Así es como quieres hacerlo para grandes webs. Pero por ahora, solo voy a usar el diseño del centro porque eso se ve un poco más bonito para este sitio web. Ahora agarra todo, ve a los componentes, presiona el plus, y luego renombralo a pie de página m porque ese es el pie de página para nuestro móvil. Ahora solo podemos insertar los componentes del pie de página desde el móvil en todas las páginas. Ahora lo último que tenemos que hacer es disminuir el tamaño del tablero de arte y click en nuestro tablero de arte y dar click en jugar y veamos qué hemos creado hasta ahora. El menú móvil se ve un poco demasiado grande para mi gusto pero como puedes ver, esto se ve bastante bonito. Todo se ve optimizado para móviles. Necesito trabajar, tengo el título por aquí, necesito trabajar en los márgenes pero puedes ver lo rápido que es crear un diseño móvil si lo has preparado todo para escritorio. Digamos que ahora has terminado con tu diseño y quieres mostrar tu diseño a otras personas. Eso es lo que quiero mostrar en los próximos videos porque necesitas saber algunas cosas para compartir tu diseño, para hacer un prototipo y enviarlo a tu cliente, o tal vez incluso subirlo en tu propio portafolio. Te veo en el siguiente video. 32. Exportación de la placa y y los elementos del elemento de trabajo y: Hola y bienvenidos de nuevo. En este episodio, te voy a mostrar cómo puedes exportar tus diseños. Entonces tal vez quieras compartir tus diseños con tu cliente o quieres subirlo a otra herramienta de prototipado o quieres hacer una exportación para poner estos diseños en tu cartera. La forma más fácil de hacer esto es simplemente seleccionando sus tableros de arte y luego exportándolo. También puede utilizar la marca para la función de exportación. Pero realmente no uso eso, porque muchas veces estás trabajando en una página y necesitas enviar esa página a un cliente o quieres exportar tres o cuatro pantallas y aunque quieras exportar 10 pantallas, no es realmente difícil de hacer clic en ellos, así que realmente no uso la marca para la función de exportación. Simplemente hago clic en los elementos que quiero y los exporto. Eso es lo que te quiero mostrar y si de verdad quieres un video on mark para exportación, entonces dímelo, pero eso solo es el caso si estás trabajando en archivos realmente grandes. Creo que la mayoría de las personas que ven este curso no tendrán proyectos enormes aún. Que sea simplemente mejor hacer clic en las cosas que quieres un exportarlo, es mucho más fácil. Lo que debes saber si quieres exportar cosas es que también se exportarán los nombres de tus tableros de arte y las capas. Esto es bastante bonito porque a veces se tiene una situación como esta, donde se quiere exportar esas cuatro imágenes por separado. Cómo haces eso es seleccionando todos así, por lo que comentas click en el primero porque esto está dentro de un grupo, comentas turnos click en el segundo. Ahora, tienes cuatro elementos seleccionados, incluyendo la sombra y para mantener todo organizado, puedes ir a tu panel de capas y aquí puedes ver la nomenclatura. Esto ya tiene buen nombre, así que si voy a exportar estos a JPEG o PNG, vas a ver estos nombres. Probemos esto por ahora. Voy a ir al archivo y hago clic en exportar y luego dar clic en seleccionado, porque he seleccionado esas cuatro imágenes. Voy a hacer una carpeta nueva y llamar a eso exporta por ahora, así como pruebo. Por lo que aquí tienes algunas opciones para exportar tus diseños. Ahora mismo, estoy exportando imágenes que tienen sombras y eso significa transparencia. Por eso necesitamos PNG, porque PNG es el único formato de píxel que puede manejar la transparencia con JPEG obtendrás un fondo blanco. Si utilizas transparencia o estás explotando icono por ejemplo y quieres exportarlos a píxeles, necesitarás PNG, lo contrario obtendrás un fondo blanco. Vamos a escoger PNG por ahora y luego tienes algunas opciones aquí mismo. La mayoría de las veces, solo uso el diseño, que es solo 1x o Web y que es 1x y 2x y esto significa lo grande que va a ser la imagen dentro de su nuestro tablero, esta imagen puede ser es de 300 por 400 píxeles de ancho y si usted selecciona esta opción entonces exportará una imagen que tiene 300 y 400 píxeles de ancho, pero también una versión que es de 600 por 800. Esto puede ser agradable si has importado imágenes grandes reales y quieres mantener la resolución, o simplemente quieres saber qué tan nítida va a ser tu exportación. Solo tienes que hacer clic en este y ahora va a crear ocho exportaciones porque hemos seleccionado cuatro imágenes. Vamos a hacer clic en exportar por ahora, como realmente rápido, vaya a su buscador, vaya a las exportaciones y como puede ver, tiene los mismos nombres de capa y un 2x versiones tienen este @2x al final. Si abres esto, puedes ver que hay mucho espacio en blanco, pero eso es para la sombra y estas imágenes no son nítidas en absoluto porque he importado en imágenes nítidas y ahora lo estamos exportando de nuevo. Esto no es realmente afilado, pero como puedes ver, la versión normal es menos nítida que la versión 2x y esta es una cantidad horrible, pero solo quiero mostrarte cómo funciona esta característica. Esta es la versión normal y esta es la versión más nítida. Hagamos eso para los tableros de arte ahora también, así que cambiemos el nombre de estos tableros de arte a Home final v1 y luego Home final Mobile v1. Entonces haz click en el primer tablero de arte, la cuadrícula no importa que aún esté encendida y no exportará la cuadrícula y también cambiará click en el tablero de arte de tu escritorio. Ahora ve al archivo de nuevo, ve a exportar selecciónelo y ahora también queremos probar el 1x y 2x y ahora voy a escoger JPEG porque un beneficio con JPEG es que puedes aplicar una compresión sobre tus imágenes. Por ejemplo, puedes ponerlo a 60 por ciento de calidad, seguirá siendo súper afilado. Pero si estás compartiendo artículos con tus clientes, no quieres enviar JPEG que sean como 10 megabytes. Se quiere agregarle un poco de compresión. Te mostraré si lo pones como a 60 por ciento de capacidad, seguirá siendo súper afilado y vamos a ver cosa 1x y 2x. Vamos a dar click en exportar y luego vamos a ir al buscador. Como se puede ver ahora, las imágenes han sido exportadas. Hay una versión móvil casera que es de 260 kilobytes. El 2x versión es casi 700. Vamos a abrir la versión uno por ahora y voy a acercar y ver si sigue siendo lo suficientemente afilada. Como puedes ver, esto sigue siendo bastante afilado para una compresión del 60 por ciento al 1x no es súper afilado. Solo pinchemos en el 2x por ahora. A menudo envío la versión 2x a mi cliente. Como puedes ver para un teléfono móvil, esto es lo suficientemente afilado como para compartirlo con tus clientes o incluso para poner en tu cartera. Comprobemos también la versión 2x de la página de inicio. Acerquémonos un poco y como puedes ver, esto es bastante nítido para una imagen que tiene solo 1.5 MB y casi 10,000 píxeles de altura. Por lo que la descompresión en Xd es bastante buena. Lo último que quiero mostrarles es cómo exportar icono vectorial. Por ejemplo, hemos diseñado un botón. Por ejemplo, hemos diseñado este botón o esta pequeña flecha. Si queremos exportar la flecha, tenemos un problema porque esta es una línea y por alguna razón si la exporta, no delinea las líneas. Necesitas usar un rectángulo si quieres crear un icono vectorial. Eso no es realmente agradable y tal vez lo estoy haciendo mal, pero así es como lo hago. Esos son dos elementos separados, por lo que para exportarlos como un solo icono, es necesario desplazar haga clic en ellos, seleccionarlos ambos y luego agruparlos, y simplemente llamar a esta flecha larga afilada. Por ejemplo, he seleccionado el grupo. Esto es importante para seleccionar un grupo y ahora ir al archivo y exportar. Porque si seleccionas ambas capas como esta y vas a exportar archivos seleccionados, exportará la línea por separado y el triángulo. Es por eso que necesitas hacer click en el Grupo y luego ir al archivo, ir a exportar, y luego seleccionarlo y ahora necesitas usar SVG. SVG es el formato que se utiliza en sitios web y también puedes importar eso dentro de Adobe XD, como ya has visto antes con nuestros iconos sociales. Este es un formato realmente agradable para exportar iconos vectoriales. Ahora, si escoges el SVG porque este es un icono vectorial y lo exportas, ahora tienes un archivo vectorial que puedes usar en cualquier otro archivo Adobe XD que quieras. Como puedes ver aquí mismo, si lo escalas, todavía se ve bastante bien y es nítida ilimitada. Mi consejo sería si diseñas iconos hacer con un Illustrator, porque Adobe XD no es una herramienta perfecta para diseñar tus iconos. Pero a veces se puede diseñar un pequeño ícono como este con un rectángulo y un triángulo y reutilizar eso en otros proyectos. Eso fue todo lo que quería mostrar para la función de exportación. Te veré en el siguiente video. 33. El menú Sticky en base: Bienvenido de nuevo. En este episodio, vamos a crear el efecto de cabecera pegajoso. En todos los diseños que hemos creado en este curso, hemos utilizado el efecto de cabecera transparente. Esto se ve muy moderno, pero necesitas una bonita imagen de fondo. Para muchos proyectos, este es un look que es demasiado moderno y los clientes buscan más algo como esto, solo un encabezado muy limpio y sencillo en este sitio web. No se ve tan bonito porque el fondo de aquí no es blanco. Pero en la mayoría de los sitios web, vas a tener un encabezado que se ve así o un menú con fondo. Tienes un logotipo negro o un logotipo más oscuro, y tienes elementos de menú casi negros. Es así como la mayoría de tus menús se van a ver en la página web que vas a diseñar. Lo que puedes hacer con esto es que puedes entrar a la herramienta de prototipado porque te encontrarás con situaciones en las que necesitas presentar tu sitio web a un cliente y cómo se verá cuando te desplazas. Porque en un sitio web como este, si haces clic en un tablero de arte real, haces clic en jugar y te desplazas, entonces el menú simplemente se mantendrá en la parte superior. Con muchos sitios web, el menú se pegará a la parte superior y eso es lo que puedes hacer. Estamos en el modo prototipado, pero esto es muy difícil de hacer con el encabezado transparente porque entonces estará encima de los otros elementos o debajo de él, realmente no funciona. Lo que debes hacer es crear un menú que se vea así si quieres hacer estos efectos. Ahora, vamos a entrar en el modo de prototipado. El modo prototipado es donde se puede crear un prototipo falso, y luego se puede obtener una experiencia para cómo se verá el producto real, el producto final cuando esté codificado. Lo que puedes hacer ahora, nada cambia, pero puedes vincular ciertos elementos entre sí. El único que quiero hacer en este episodio es mostrarte la posición fija al efecto de desplazamiento. Esto no es posible en la función de diseño. Por lo tanto, no busques esta opción cuando estés en el modo de diseño. Necesitas es cambiar al modo de prototipado y luego hacer clic en éste, una posición fija al desplazarse. Fijo significa que permanecerá en esa posición. Ahora, si hacemos click en el nombre del tablero de arte y hacemos click en play, y empezaremos a desplazarnos. Empezarás a ver que nuestro menú se mantendrá en su lugar, pero ahora puedes ver que está por debajo de la mayoría de los ítems, y eso no es lo que queremos, claro. Entonces necesitamos hacer clic en nuestro fondo y llevarlo al frente, o simplemente presionar el comando shift y el corchete derecho. Ahora, si volvemos a hacer clic en jugar, se puede ver que el menú se mantendrá en la cima en toda la página web. Incluso puedes añadir una sombra si quieres. Un poco de sombra por aquí, porque muchas veces tendrás un fondo blanco por aquí, te voy a mostrar. Si tu fondo de tu sitio web es blanco, así. Digamos que esto también es blanco. Tienes un sitio web que se ve así porque la mayoría de los sitios web tienen un fondo blanco y haces el efecto de desplazamiento y también tienes un encabezado blanco. No se ve tan perfecto. Para que puedas hacer dos cosas. Puedes usar unas líneas sutiles muy pequeñas, algo así. Simplemente escoge la herramienta de línea, crea una línea que llene toda la pantalla de izquierda a derecha, y simplemente colócala en la parte inferior de tu menú y asegúrate de que esté dentro del grupo. Ahora, comando x para asegurarte de que lo tienes. Después entra al grupo, para que puedas hacer doble clic. Se puede ver que ahora estoy dentro del grupo. El encabezado en realidad se llama grupo 305. Vamos a llamarlo menú por ahora. Entonces vemos lo que estamos haciendo. Entra dentro del grupo, ahora estamos dentro de esa carpeta y luego presiona comando v. Luego coloca tu línea así y luego pon eso en una opacidad más baja, por ejemplo, algo así. Entonces si hacemos click en play, verás que hay una pequeña diferencia entre esa sección. Pero creo que esto ya es demasiado intenso, así que pongámoslo en 15 por ciento por ahora. Haga clic en play, y esto ya se ve un poco más bonito. Lo que también puedes hacer es usar una sombra. Digamos que no te gustan estos efectos de línea. Lo que podrías hacer es venir y dar click en tu fondo. Por lo que en el rectángulo de fondo blanco, luego agrega una sombra muy pequeña. A lo mejor esto ya es demasiado intenso. Probemos esto por ahora. Sí. Bueno, esto es un poco demasiado intenso, así que entonces ya sabes cómo funciona. Se puede disminuir la intensidad de la sombra y luego hacer clic en reproducir. Eso también creará unos efectos agradables para tu menú. Ahora, en el próximo episodio, quiero mostrarles cómo en realidad pueden enlazar estas páginas hacia arriba. Si haces click en esos ítems, irás realmente a esas páginas. Entonces realmente empieza a parecer un sitio web real. 34. Crear un prototipo para web y móvil: Bienvenido de nuevo en este video vamos a enlazar todas las páginas juntas. Estamos aquí en el modo de diseño. Cambié todos los encabezados y me aseguré de que el subrayado esté en la buena página. Esta es la página del portafolio, sobre la página, y la página de contacto. Lo que quieres hacer es ir a tu modo de prototipado, haz clic en esto de distancia porque no necesitamos eso ahora mismo, acercar y luego empezar a acercar tu menú. Se pueden hacer dos cosas. Puede hacer doble clic en el elemento real que desea que se vincule y luego simplemente haga clic y arrastre a la mesa de trabajo real que desea vincular. Entonces tienes algunos ajustes por aquí. Quieres tocarlo porque si haces clic en él eso significa que toco, va a ser una transición a otra pantalla. Incluso puedes conservar la posición de desplazamiento porque a veces pasarás de una sección por aquí a otra página y también quieres mantenerte en la misma altura. Por ejemplo, si crea un botón, y si hace clic en ese botón entonces el color del botón cambia. Entonces no quieres ir a otra página entera, quieres quedarte en esa posición. En realidad estás cambiando de pantallas, pero necesitas hacer que se sienta como si no estuvieras cambiando de pantallas. Es por eso que utilizarías esta función. Vamos a ir a esa página. No he nombrado correctamente a mis páginas. El efecto disolver significa que va a desvanecerse y tu configuración de desvanecido está por aquí, así que relájate y tomará 0.3 segundos. Solo probemos esto por ahora. Vamos a ir a final, dar click en play. Si hacemos click en portafolio, vamos a ver qué pasa, esto fue un fade que no podemos volver atrás porque también necesitamos enlazar desde la página del portafolio a su página de inicio. También hay en transición en la pestaña disolver. Veamos qué hemos creado hasta ahora. Click play portfolio, home. Eso es lindo. Esto funciona y ambos se desplazan. Necesitas conectar también esas otras páginas. A veces se convierte en un desastre porque necesitas alejarte y conectar todas las páginas y va a ser realmente pequeño, lo contrario quiero mostrarte un truco. Qué haría si vas a enlazar todas las páginas juntas, nombre tus artículos. Por ejemplo, final v2-home. He nombrado todas mis páginas a final v2. Si por ejemplo voy a la página sobre, y hago clic en este ítem, puedo elegir mis mesas de trabajo desde aquí y luego puedo ir a, esto tiene que ser final V2 sobre, y luego se va a crear automáticamente ese enlace para no tienes que meterte con el arrastre. Pero por ahora no quiero disolver efecto porque en un sitio web las páginas no se disuelven solo hacen clic y es solo instantáneo. Si solo haces clic en ninguno, y también vamos a hacer eso para estas animaciones por aquí. Haga clic en estos dos y póngalos en nuestra página de inicio aquí. Así que vuelve a tu página de portafolio, también haz clic en esta, ponlas en ninguna. Veamos qué hemos creado hasta el momento en que voy a dar click en mi página de inicio, dar click en play. Es así como debería funcionar sin una animación de desvanecido porque la mayoría de los sitios web no se desvanecen. El sobre de la página, de nuevo también funciona. Todo lo que necesitas hacer es simplemente vincular todas estas páginas de menú entre sí. Haga clic en él, elija su mesa de trabajo que desee, v2 y recordará los mismos ajustes. Portafolio, dar click en él, dar click en portafolio, contactar. Esta es una forma realmente fácil de enlazar tu sitio web así. Se ve bastante realista. Si estás presentando a un cliente, les digas que esto es real porque todo esto es falso. Por supuesto, no se puede exportar esto a HTML. Bueno, al menos aún no. A lo mejor eso irá en el futuro que puedas exportar ciertos elementos a elementos reales del sitio web pero por ahora, esto es solo para tu presentación. Si has enlazado todos tus elementos, tendrás muchos de esos elementos enlazados como yo estoy creando ya en este momento. He terminado todos los artículos vinculados. No importa donde esté en la página, solo puedo hacer clic en todas estas páginas. Esto es bastante genial para tu presentación. Hay una bonita característica más que quiero mostrarte que puedes usar para presentar tu trabajo en el siguiente video. 35. Hacer un video y enlace compartible: Muy bien chicos, casi estamos haces.Dos cosas que quiero mostrarles, a presentación de trabajo, primero es la función móvil en Adobe XD. Puedes descargar la App Adobe XD en tu smartphone. Si enchufas tu cable USB a tu teléfono, puedes hacer clic en este ícono de aquí, conectar dispositivos iOS o Android a XD vía USB para previsualizar tus diseños o prototipo en tiempo real.Esto es realmente bonito porque a veces cuando están diseñando en una pantalla, las cosas en la pantalla se ven lo suficientemente bien. Pero en realidad, lo has diseñado demasiado pequeño o el botón es demasiado pequeño para tus dedos o la distancia es demasiado grande o demasiado pequeña, ese es un consejo que te quiero dar, pero puedes descargar el Adobe XD desde la app en el Play Store y conecta tu teléfono vía USB. Simplemente pruébalo si estás diseñando y comprueba si tu diseño se ve bien en tu propio teléfono móvil. A lo mejor prueba algunos teléfonos diferentes. Eso es sólo algo que yo también quería mostrarte. El último rasgo que quiero mostrarles para compartir su diseño es el Video Feature todo mi prototipo aquí mismo. Si quiero mostrar a mi cliente cómo funciona Website? ¿ Cómo se ve cuando me desplace a la página? ¿ Cómo se ve cuando hago clic en esas páginas? Entonces si estás dentro del modo play, que acabamos de preparar con todos los elementos vinculados. Tienes este botón por aquí, y no voy a hacer clic en él ahora porque ya estoy grabando mi pantalla y creo que me voy a estrellar mi computadora si hago clic en eso porque no sé si mi computadora pueda manejar dos grabaciones a la vez, pero eso es porque estoy grabando este curso. Esa es una característica que puedes grabar solo esta parte de tu pantalla. Puedes desplazarte al sitio web, click en diferentes cosas que hayas conectado a través la herramienta de prototipado y luego simplemente enviar un MP4. Creo que exporta un MP4 a tu cliente y envía el video. Transferimos o subimos un video en YouTube. También puedes compartir el diseño de tu cliente con bastante facilidad. Se puede comprar software de grabación que estoy usando para realizar este curso. Utilizo Screen flow para grabar este curso. También puedo grabar mi audio con una entrada de micrófono porque eso es lo que estoy haciendo en este momento para grabar este curso. Para las personas que no tienen micrófono o no los leen, quieren hablar dentro del micrófono y la función blade, entonces este botón es perfecto para compartir tus diseños y las interacciones reales con tus clientes. Había dos características que yo también quería mostrarles. 36. ¿Felicidades y quieres más?: Muy bien chicos, felicidades, terminaron con el curso. Este es un logro increíble porque la mayoría de la gente no llega al final del curso. Esto realmente demuestra que realmente quieres aprender y de verdad te lo agradezco. Por eso quiero agradecerles en este video. Entonces, ¿ahora qué? A lo mejor quieres más. Si has visto algo en línea que quieras que te explique y se suma a este curso, solo por favor avísame. Envíame un DM en Instagram. Mi nombre es Rinodeboer o simplemente dejar un comentario aquí abajo. También quiero saber qué puedo mejorar en este curso porque solo puedo crear nuevos episodios y mejorar el show central. Si puedes dejar una reseña para este curso que será realmente útil y eso me permitirá mejorar el curso. Tienes acceso a este curso ahora mismo. Si añado nuevos episodios y entonces verás esos nuevos episodios si los subo. Nuevamente, felicitaciones. Lo que también es una posibilidad es que quieras que haga otro curso, tal vez sobre algunos temas más profundos como la teoría del diseño, ese es un curso que quiero crear. O tal vez algunas otras herramientas pueden estar creando iconos en Illustrator por ejemplo. Sólo por favor avísame y entonces espero verte por internet. Nuevamente puedes seguirme en Instagram en rinodeboer, o puedes seguir los enlaces de [inaudible] en YouTube o en Instagram. Pondré esos enlaces abajo. Entonces quiero agradecerle de nuevo por tomar este curso. Muy bien chicos, espero que los vea en algún lugar de Internet. Gracias.