Adobe XD para principiantes: aprender diseño web | Sam Harrison | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Adobe XD para principiantes: aprender diseño web

teacher avatar Sam Harrison, Webflow Developer, YouTuber, Teacher

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      1:12

    • 2.

      Cómo aprender aspectos esenciales

      0:53

    • 3.

      Tablas de arte

      4:40

    • 4.

      Disposición de cuadrícula

      4:44

    • 5.

      Forma parte 1

      10:30

    • 6.

      Forma parte 2

      7:14

    • 7.

      TEXTO

      4:14

    • 8.

      Imágenes

      5:44

    • 9.

      Vídeo y lote

      4:52

    • 10.

      Atajos de teclado

      4:17

    • 11.

      Controlar y bloquear

      5:28

    • 12.

      Selección y agrupación

      2:50

    • 13.

      Elementos de esconder

      1:08

    • 14.

      Cómo combinar formas

      4:59

    • 15.

      Repetición

      7:49

    • 16.

      Transformas 3D

      3:15

    • 17.

      Capas

      3:26

    • 18.

      Activos y componentes

      7:48

    • 19.

      Prototipo

      5:26

    • 20.

      Compartir proyectos

      5:16

    • 21.

      introducción al proyecto de clase

      1:09

    • 22.

      Descripción del proyecto de clase

      3:56

    • 23.

      Navar

      11:11

    • 24.

      Sección de héroes

      7:05

    • 25.

      Sección de acción

      5:58

    • 26.

      Qué hacemos

      11:18

    • 27.

      Sección de estadísticas

      8:49

    • 28.

      Sección deslizante

      6:17

    • 29.

      Cómo salvar el futuro

      5:29

    • 30.

      Sección de CTA y pie de página

      8:13

    • 31.

      Prueba mis cursos de flujo web

      1:22

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

282

Estudiantes

--

Proyectos

Acerca de esta clase

Adobe XD: aprender diseño web para principiantes

 

¡Hola a todos!

Mi nombre es Sam Harrison y soy un diseñador web y desarrollador de Webflow en el Reino Unido.

En este curso entro a cómo usar Adobe XD con el propósito de diseñar sitios web. En este curso vamos a ver todos los aspectos esenciales de XD y aprendemos cómo crear una página de destino basada en un kit de interfaz de usuario gratuito.

Una vez que hayas tomado este curso no dude en seguirme en YouTube o tomar mis otros cursos en Skillshare como mis dos cursos de Webflow donde puedes aprender cómo desarrollar sitios web profesionalmente.

¡Gracias por tomar el curso!

Conoce a tu profesor(a)

Teacher Profile Image

Sam Harrison

Webflow Developer, YouTuber, Teacher

Profesor(a)

Hi Everyone,

I'm a multiple business owner (entrepreneur feels too pretentious) based in the UK and I currently run a digital agency along with a consulting/teaching business.

I love Webflow and currently have a beginners class on Skillshare for it.

 

 My YouTube channel:

 https://www.youtube.com/c/SamHarrisonco

Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: Hola a todos, y bienvenidos a mi nuevo curso de Skillshare para Adobe XD comienza. Por todo el mundo. Mi nombre es Sam Harrison y dirijo un negocio de diseño y desarrollo web con sede en el Reino Unido. Y en este curso quiero enseñarte a diseñar sitios web usando Adobe XD pronto los puntos clave que tocaremos a lo largo de este curso es cómo utilizar todas las diferentes herramientas de forma. Cómo utilizar un video importante y archivos Lottie. Cómo utilizar diversos métodos abreviados de teclado diferentes, la velocidad de su proceso de trabajo, y cómo simplemente obtener el mejor resultado día ABX para que su flujo de trabajo sea lo más fluido posible. Formas que al final de este curso, tendrás un buen conocimiento de cómo utilizar Adobe XD. Nuestro proyecto de clase es básicamente donde creamos una página de aterrizaje para que luego puedes empezar a construir sobre el conocimiento que has ganado para tu propio trabajo. Entonces si apenas estás empezando y quieres aprender a usar un programa específico de diseño web como Adobe XD. Este curso definitivamente te ayudará a empezar. Y como nivel de principiante, tipo de entrada a la herramienta y empezar a crear sitios web. De acuerdo, Entonces si eso te suena bien, empezaremos. 2. Aprende los fundamentos: De acuerdo, entonces para la primera parte de este curso, voy a estar llevándote a través de muchos aspectos diferentes del día, al día siguiente. Y básicamente soy lenguaje acostumbrarte a la interfaz y levadura para reacondicionar el maíz, cómo usarlos. Ahora hay un número justo de cosas diferentes que aprender sobre TDAH y no todo está codificado en este curso. Estoy especie de enfocar específicamente cosas que hacer con el diseño web y todas las cosas que creo que necesitarás aprender a usar XD y cómo empezar a crear sitios web mediante el uso de esta herramienta. Ahora vamos a cubrir todo en cuanto al diseño gráfico. ¿ Estamos usando formas y tipo de manipularlas alrededor? Pero este curso está específicamente dirigido a empezar a crear sitios web con XD. Entonces, para los primeros videos, vamos a empezar a usar tableros de arte, cómo manipular mesas de trabajo, cómo manipular diferentes formas, cómo importar imágenes, y cómo importar un video en Lottie archivos. De acuerdo, así que empecemos con el primer conjunto de videos. 3. Tableros de arte: De acuerdo, entonces una vez que te hayas inscrito e ingresado, te enfrentarás a esta pantalla de inicio. Entonces, en primer lugar, vamos a hablar de nuestros tableros y tamaños de pantalla y algunos fundamentos básicos de cómo utilizar maniobra ciertos elementos dentro de Adobe XD. Entonces, en primer lugar, se te van a ofrecer cuatro opciones diferentes para diferentes tamaños de pantalla. El primero es un montón de diferentes tamaños de teléfono y tableta. Por lo que vuelves a llamar popular. Encuentro tallas gigapixel, iPad. A partir de ahí, tenemos diferentes tamaños de escritorio. Entonces tienes HD, tienes 1366 por 76, ocho, 1280 por 100. Y de nuevo, para que pueda especie de elegir unos valores predeterminados predefinidos para diferentes tamaños de pantalla. Después obtuviste diferentes tipos de redes sociales de tamaño de pantalla también. Entonces si estás creando como una portada de Facebook, no tiene especie de preset o cada año a partir de ahora vamos a tener eso ahí también. Bueno, la sensibilidad va a ser un inconformismo y crear lo tuyo propio en crear tamaño personalizado. Pero lo que vamos hoy, ya que nos vamos a centrar en crear sitios web en este tutorial, vamos a dar clic en Web 1920 para 1080. Y esto nos va a dar nuestra mesa de trabajo. Entonces de nuevo, solo para reiterar, piensa en tu tablero de arte como tu lienzo en blanco para tus proyectos. Y esto es básicamente solo el Lienzo del que puedes estar trabajando. Por lo que un poblado con contenido. Y puedes arrastrar el lienzo por ahí con solo hacer clic en él. Tú mismo. Mantén presionada tu barra espaciadora y te dará el símbolo de la manecita donde, lo que significa que puedes moverla. Si tienes un trackpad, también puedes simplemente pellizcar y hacer zoom. Y hablando de zoom, si quieres acercar a un lugar determinado en el tablero de arte, puedes hacerlo manteniendo presionada tecla Control o Comando si estás en un Mac y se colocará si te desplazas sobre su rueda del ratón a dondequiera que resida actualmente su ratón. Entonces si voy a la parte superior derecha, mantén presionada Control o Comando, y luego acerco con mi rueda de desplazamiento. Desplazarás hasta ese punto donde está tu ratón. Entonces eso es algo muy útil que vas a estar usando bastante a lo largo de tu tiempo con XD. Entonces esos son un poco los fundamentos de lo que es un tablero de arte. Si quiere empezar a cambiar el tamaño. Entonces cambias de opinión. No quieres que sea 1920 por 1080, puedes cambiarlo. Simplemente puedes arrastrar esto como quieras cuando esté seleccionado. Obviamente, si estás creando un sitio web, vas a necesitar más propiedades inmobiliarias de pantalla innecesarias en lugar de crear una nueva mesa de trabajo para cada sección o tienes que hacer es solo arrastrar esto hacia abajo y bajará hasta ahora como quieras que se vaya. Es posible que veas que tenemos este tipo de línea punteada azul. No necesariamente necesitas jugar con esto. Esto básicamente es solo dejarte saber la altura de la ventanilla. Por lo que el viewport Heights, en este caso, extra 1920 por 1080. Por lo que básicamente piensa en esto como tu sección de héroes de la página web. Y todo lo que hay debajo de aquí está por debajo del pliegue en tu diseño. Por lo que la altura de la ventanilla es de 1080. Entonces eso es básicamente con lo que estamos trabajando. Pero de nuevo, puedes cambiar eso si lo quieres. Pero digamos también que quieres trabajar en múltiples proyectos todo de una sola vez. Esto también se puede hacer. Entonces digamos que quieres ver la lista de bolas que vienen con el día siguiente. Si haces click en la letra a en tu teclado, verás entonces en el lado derecho, ahora tenemos todas esas cosas que teníamos en las estrellas, las granjas de queso. Si quieres agregar otra mesa de trabajo, puedes muy simplemente dar click en una y luego la tendré justo al lado de la seguridad y otra, puedes volver a hacer el mismo tipo de cosas. Puedes asegurarte de que si presionas la letra a, te dará todas ellas aquí y solo puedes elegir tantas como quieras. Ahora también hay una opción si quiere crear tu propio tamaño, puedes hacerlo. Si mantienes presionada la letra a, verás que el cursor ha cambiado un poco. Si me suelto, si me vuelvo de familia cuando vea ahora atiende el puntero, si sostengo un, verás que el cursor ha cambiado y esto me permitirá dibujar mi propia mesa de trabajo al tamaño que yo quiera que sea. Por lo que de nuevo, son una especie de las principales pocas formas en las que se puede controlar nuestros tableros. De nuevo, puedes tener tantas como quieras. No estás limitado en absoluto, así que cuántos puedes tener. Y obviamente más adelante abajo de la línea, si estás creando un sitio web completo, quieres usar algún punto la opción prototipo, que te permite básicamente enlazar páginas juntas. Nuevamente, vamos a entrar en eso con más detalle un poco más adelante. Pero yo solo en primer lugar quería sólo darte una introducción básica a cómo funcionan nuestros cuerpos, cuáles son, y cómo puedes manipular las hojas por todas partes. De acuerdo, Entonces el siguiente video, qué vamos a hablar un poco sobre cómo usar rejillas y cómo trabajar dentro de un contenedor de ancho máximo, que va a ser muy útil para diseñar sitios web. 4. Disposición de cuadrícula: De acuerdo, Así que a continuación quiero hablar un poco sobre cómo usar la cuadrícula de diseño dentro de XD. Por lo que ya que estamos creando sitios web, mayoría de los sitios web tienden a tener un tamaño de contenedor. Entonces si solo tenemos un rápido vistazo a un sitio web ahora, mira el sitio web de Webflow. Ya puedes ver si me inclino mi caso, tengo el borde aquí de que todo el contenido que puedes ver está llegando a un ancho máximo. Ahora bien, este no es necesariamente el caso de cada proyecto en el que tendrás despierto. Pero es bastante común ver que la mayor parte de tu contenido va a tener un ancho máximo para que no sea especie de pegarse justo al borde de la pantalla. Y si estás creando sitios web usando XD, esto es algo que querrás probar y tipo de seguir. Y querías intentar conseguir que todos tus diseños funcionaran dentro de un cierto tamaño de contenedor. Porque hemos elegido 1920 por 1080, no querrías todo el contenido justo al borde de la pantalla. Entonces la forma de hacerlo es usando la opción de cuadrícula aquí abajo. En realidad tienes dos opciones diferentes para esto. Tienes lo que se llama la opción de capa. Y tenemos plazas también. Entonces plazas no vamos a cubrir demasiado en este curso. Entonces si de nuevo para usar cuadrados, es más probable que utilices esto para algo como crear iconos. Entonces puedes asegurarte de todos sean del mismo tipo de XYZ. Pero para este curso vamos a estar presumiblemente mirando la opción de capa donde tenemos columnas. Entonces si solo alejamos el zoom por un momento, ya verás ahora que hemos seleccionado esa opción por defecto. Tenemos 12 columnas y tenemos algunas define dimensionamiento para el ancho y el ancho de columna. Y tenemos este tipo de 12 columnas aquí que actualmente son como un color de cola. Puedes cambiar el color de estos simplemente gana tu seleccionador de color aquí. Puedes hacerlo del color que quieras. personal, prefiero tenerlo como especie de solo un gris blanco apagado. Obviamente, esto dependerá del tipo de esquema de color del sitio web que tengas y de lo que estés diseñando. Y, y que la idea de esto es que te permite alinear las cosas con ciertas columnas. Si tienes un diseño muy particular que tiene que ser completamente parejo en cierto respeto. Esto es algo que básicamente puedes usar como guía para ayudarte a hacer eso. Ahora, personalmente, no me encuentro a menudo usando esto tanto cuando se trata de tener 12 columnas. A mí personalmente durante la mayor parte del tiempo me gusta tenerlo para que pueda tener un conjunto contener un ancho como apenas estábamos discutiendo. Entonces en lugar de tener 12 columnas, por qué tiendo a gustarme hacer en lugar de 12, solo escribo una. Y eso me da sólo una gran especie de cuadrado gris. Y por el momento dice Ancho de Columna es de 1640, lo que queremos es 1200. Y eso nos va a dar un ancho máximo de 1200 píxeles de aquí a aquí, que va a hacer eco de algo similar a lo que tenemos en la página web de Webflow, tener el lienzo principal, que por supuesto es de ancho completo, ya que con fondo blanco, pero el contenido se fija dentro de este contenedor máximo. Y esa es la idea de lo que estamos haciendo en este momento. Por lo que se trata básicamente de un contenedor de ancho fijo de 1200. Y ahora puedes empezar a alinear las cosas a esto. Si fuera a arrastrar algunos de los OEM muy brevemente, vamos a llegar a esto en tan solo un momento. Pero si solo elimino eso y poco de inmediato el pelo que vas encontrar va a querer chasquear a eso, que ojalá puedas ver si vuelvo a hacer eso, si me acerco a él, lo se engancha automáticamente a un lado. Y eso será lo mismo para cualquier cosa que lo arrojes. Entonces es solo una forma realmente útil de tipo de guiar todo dentro de tu diseño. De acuerdo, así que esos son los diferentes tipos de capa que puedes tener. De nuevo, si cambias de opinión, siempre puedes volver atrás. Por lo que quieres volver a 12 columnas, puedes hacer eso. Y por supuesto tendrá esa configuración para ti. Pero otra vez, en lo personal, no me gusta tenerlo ya que uno es una especie de cosa personal. Ellos, te podría gustar tener múltiples columnas para alinear las cosas a mí personalmente la mayor parte del tiempo me encuentro solo usando una columna grande que me permite alinear mis legos a tu contenido a un ancho máximo. Entonces eso es lo básico de usar este cordero, y eso es lo que vamos a estar usando predominantemente a lo largo de este curso. Ahora, digamos que no quieres tener esto puesto todo el tiempo. Por lo que podrías estar un poco distrayendo. Simplemente puedes deshacerte de él. Y lo puedes hacer usando, simplemente haciendo clic en eso otra vez y se deshará de él. Pero a veces si tienes muchas cosas pasando y no puedes necesariamente con seleccionar la mesa de trabajo. Entonces lo que también puedes hacer es usar un atajo de teclado, que será control de turno y luego apóstrofe, y que lo traerá de vuelta para deshacerse de él, apóstrofo de control de turno de nuevo. Si estás en un Mac, será apóstrofo de Comando de Cambio, y eso hará el mismo tipo de cosas. Me aseguraré de tener una animación en pantalla para mostrarte todos los diferentes atajos de teclado ya que los uso a lo largo del curso. De acuerdo, así que eso es lo básico de usar la cuadrícula de diseño. De nuevo, ten una jugada con él tú mismo. Tú decides un poco por ti mismo lo que más te gusta. Y en la siguiente parte del curso, vamos a empezar a mirar todas las diferentes opciones de forma que tenemos dentro de XD. 5. Formas formales, parte 1: De acuerdo, así que ahora en la parte divertida, vamos a empezar a mirar todos los diferentes tipos de herramientas de forma que tenemos dentro de XD. Ahora voy a pasar por estos de uno a la vez y también te mostraré cómo puedes especie de formas de control Géminis. Entonces justo antes de que hagamos que son dueños de tan solo señalar que tenemos la herramienta Seleccionar. Por lo que la herramienta Seleccionar , de nuevo, como su nombre indica, te permite seleccionar cosas y esa es una especie de opción predeterminada que tienes al día siguiente. Ahora con bastante frecuencia, siempre que estés usando algún otro tipo de herramienta. Obviamente el caso, lo puedes ver aquí mismo, en realidad ha cambiado a como un crosshair. Digamos que ya no quieres esto y quieres volver a la herramienta de selección. Obviamente lo que tendrías hasta la fecha, volveré a ello aquí. O puedes ver una vez que he rondado sobre eso, dice Seleccionar y luego está la letra V entre paréntesis. Y eso básicamente significa es un atajo de teclado. Y en realidad tenemos atajos de teclado para todas estas diferentes opciones todo el camino hacia abajo. Entonces esto es algo a lo que quieres empezar por echar un vistazo y tipo de acostumbrarte, para hacerte la vida un poco más fácil mientras usas XD. Entonces creo que el selecto, tal vez de todos ellos es el que quieres estar usando un atajo de teclado para lo más, solo para salvarte de hacer algo y ponerte vieja forma de cabello y todo el camino de regreso. Ahora, de nuevo, no es un gran negocio. Pero sólo por la velocidad es mucho más fácil, sólo para dar click en la letra V y verás mi cursor cambió mi opinión es que si vuelvo a la 2-vía el pelo, mi caso es comúnmente a través de un si solo escribo en ese televisor, se deshace de él y automáticamente vuelve a la herramienta Selección. Entonces nos desharemos de eso por ahora, pero ahora solo pasaremos a la herramienta de rectángulo y la dibujaremos dentro de nuestros tableros de arte. O tienes el día en que estaba dibujando estos cerrados mantén pulsado el botón izquierdo del ratón. Y luego simplemente arrastrarás esto al tamaño que quieras que sea. Y obviamente como cabría esperar, entonces puedes manipular esto como quieras. Puedes cambiar la altura y el ancho como quieras. Ahora obviamente esto es una especie de mi especie de formación libre en el dimensionamiento de este rectángulo. Si nos deshacemos de él, de nuevo, asegúrate de que esté seleccionado. Esta vez. Si mantenemos pulsada Mayús y luego arrastramos, verás que creará un cuadrado perfecto. Entonces si quieres algo que quede perfectamente cuadrado, mantén presionada la tecla Shift y eso hará. Obviamente si después cambias de opinión, si luego haces click en la letra V para recuperar tu herramienta de selección, entonces puedes empezar a arrastrar esto como quieras k Así que ya estamos en esta primera aquí, Te voy a llevar a través de algunas opciones por aquí también. Y obviamente hay muchas de estas opciones de repentinamente ahora aparecieron, ¿no? Ella garantiza el trabajo a través de estos conforme vamos a lo largo del curso, va a ser más fácil demostrar todas las diferentes opciones sobre elementos particulares. Entonces si el rectángulo uno lo hará, creo que te voy a mostrar es el frontero-radio y también cómo usar el relleno y el borde. Entonces por defecto en XD, todo lo que tienes, todo lo que arrastras sobre el lienzo es gerundos en realidad tienen un borde que tal vez no necesariamente quieras. Entonces si no quieres que tenga frontera, puedes desmarcarla. Y obviamente en el momento el Color de Relleno y se puede decir, Hey, es blanco. Entonces lo que vamos a hacer es que sólo lo hagamos negro por ahora para que podamos decirlo. Y además, van a ser obviamente tiempos en los que no quieres tener un rectángulo o cuadrado en ángulo afilado perfecto. Lo que puedes hacer es, obviamente, afectar el radio fronterizo. Ahora de nuevo, hay algunas formas que podrías hacer es si hacemos zoom solo foramen, lo verás aquí justo debajo, tenemos esta opción. Y si hacemos clic en eso y luego lo arrastramos, verás que en realidad está curvando las esquinas. Por lo que al hacer esto, en realidad es posible hacer tipo de elipses y círculos con esta herramienta también. Pero si no quieres hacerlo de esa manera, lo que puedes hacer es ir a esta opción aquí y luego solo teclear tal vez 10. Y eso va a curvar f. Es esto sólo si tecleamos algo más extremo como un 100, ya verás es caótico por bastante. Por lo que tienes especie de microcontrolador el cabello, y también puedes controlarlo haciendo clic y arrastrando esta opción en particular allí también. Entonces esa es una forma en la que puedes crear la curvatura de las esquinas de un cuadrado o rectángulo. Algo más que vale la pena mencionar también. Si quieres hacer una esquina, tienes esta opción aquí. Por lo que también puedes aplicar un radio diferente a cada esquina. Entonces si quisiéramos decir una gorda, tal vez solo la parte superior izquierda y la inferior derecha, podríamos hacer eso. Entonces si queríamos tal vez un 100 para este, ya verás que solo es donar para la parte superior izquierda y también para que todos afecten a la parte inferior derecha también. Si vamos en este de aquí, teclea un 100, usted dice que sólo se ha afectado la parte superior izquierda y la inferior derecha. Y eso te permite de nuevo, más control sobre la curvatura de tus fronteras. De acuerdo, así que eso es más o menos para la herramienta de rectángulo. De nuevo, vamos a entrar en todos estos a medida que vamos. Entonces nos desharemos de eso por ahora. Y lo que haremos a continuación es pasar a la herramienta Elipse ambos círculos. Entonces se aplica el mismo tipo de cosas si apenas empiezo a arrastrar. Ya verás puedo controlar el tipo de forma es quiere ser, no tiene que ser un círculo perfecto. Puede, puede ser un mal como otra vez, se aplica el mismo tipo de cosas. Pero digamos una vez más, si quisiéramos tener un círculo perfecto, te asegurarías de que esté seleccionado. Y luego solo mantendrás presionada la tecla Shift y luego arrastrarás. Y no importa lo grande que lo hagamos, siempre sé un círculo perfecto. De acuerdo, entonces nuevamente, las mismas cosas aplican a la herramienta Elipse que con la herramienta de rectángulo, puedes tener un borde si quieres, ver de qué puedes cambiar el color de. No se puede tener frontera y también se puede hacer que diga que este va a ser un color de relleno diferente. Entonces veamos los diferentes colores de relleno ahora también. Por lo que actualmente es blanco, así que podemos decir, hagámoslo un color oscuro. Esto obviamente es sólo un color sólido por defecto. Y, pero ¿y si quisiéramos tener algún tipo de gradiente para esto? Por lo que sí tienes estas opciones también. Por lo que sólo tienes que seleccionar esta opción aquí. Luego obtenemos un desplegable que dice color sólido, gradiente lineal, gradiente radial, y gradientes angulares. Entonces, solo te llevemos a través de estas opciones. Por lo que un gradiente lineal te va a dar una opción tipo de extremo a extremo o el elemento que no tienes pantalla. Entonces si quieres cambiar los colores de cualquiera de los lados, en realidad puedes maniobrar paradero el gradiente es de hasta. No tenías que tenerlo bien así de fin a fin. Lo tienes como en el medio. En realidad también se pueden agregar gradientes en el medio. Si querías ver entonces consiguió tres colores diferentes. Entonces desmarcaré eso solo por ahora. Pero con el fin de cambiar el color para esto, si vamos al extremo izquierdo aquí, Vamos a tener que tal vez es como un azul oscuro. Entonces en el lado derecho puedes ver ahora qué podemos elegir un color diferente y lo tendremos como un color de cola. Entonces eso son gradientes lineales. Y de nuevo, puedes maniobrar esto como quieras. Puedes cambiarlos. Puedes hacer prácticamente cualquier cosa que quieras con eso. Pero digamos que una vez más, queremos cambiar el tipo de gradiente que tenemos y queremos un gradiente radial. Por lo que un gradiente radial es más o menos, como sugiere, una especie de irradia hacia afuera. Y de nuevo, puedes tener múltiples colores diferentes dentro también. Entonces digamos que queríamos tener tal vez un color más claro en el medio. Tendremos como un azul claro y en el exterior dondequiera que realmente se oscurezca para que puedas ver eso ahí. Y puedes afectar a qué posición tienes que puedes hacerla más ancha o más pequeña dependiendo del diseño que tendrías. UN UK. Por lo que de nuevo, puedes tener múltiples tipos diferentes. Se desea agregar uno en, se puede elegir paradero que aparece en la línea. Se puede, de nuevo, es algo obvio ya. Por lo que puedes elegir muchos tipos diferentes de gradiente como quieras. Entonces, solo deshagamos eso por ahora. De acuerdo, y el último va a ser un gradiente angular. Nuevamente, como su nombre indica, el tipo de crea una base de gradiente en un ángulo. Por lo que de nuevo, al igual que antes, puedes elegir todos los colores diferentes. Ese es un color muy diferente para ese, así que es más brillante. Entonces puedes tener otro ahí también. Entonces si quieres hacer este un poco diferente, puedes decir éste por ejemplo otra vez para ser es hacerlo amarillo. Entonces, de nuevo, eres toda clase de control diferente sobre cómo funcionan estos diferentes gradientes. Y hay todo tipo de infografías tipo cosas que puedes hacer con esto. Supongo que esa es la explicación básica de qué gradientes. Volveré a estos un poco a medida que vamos a lo largo del curso. Entonces por ahora lo que haremos es deshacernos de nuestra herramienta de elipse y echaremos un vistazo a nuestra herramienta de polígonos. Entonces esta es la última de las formas por ahora la vamos a cubrir. Después vamos a cubrir línea, pluma y textos en los próximos videos. Entonces para el polígono, por defecto, tenemos un triángulo. Ahora de nuevo, esto es una especie de mí como libre formando esto. Puedes crear cualquier tipo de forma arrastrándola a lo que quieras. Al igual que antes, si mantenemos pulsado Shift y luego arrastramos, creará un triángulo equilátero, lo que significa obviamente que todos los lados tienen la misma longitud. Ahora, de nuevo, si cambias de opinión, puedes. Obviamente entonces una vez que lo hayas hecho , hazlo más grande y más pequeño. Y no solo estás atascado con un triángulo también. Entonces verán aquí lo que tenemos es la cantidad de rincones que tenemos. El córnea es de tres columnas las cuales crearán un triángulo si queremos tenerlo. En cuanto al Tao del rectángulo mayor o rombo, podemos entonces despegar cualquier tipo de tamaño diferente que quieras, hexágonos, octágonos, lo que quieras. Y eso crea todo tipo de formas diferentes, como te imaginarías. El mismo tipo de cosas aquí con el tablero de un radio de esquina, debo decir. Esto fue una especie de básicamente suavizar las esquinas del objeto en particular que tienes. Entonces si volvemos a tal vez cinco solo por ahora, y vamos a alejar sólo un toque. Si entonces selecciono un radio de borde para esto o algo así como 20, verás que es solo para suavizar un poco los bordes en la forma. Entonces también tienes esta relación de calado dos. Entonces si volvemos a tal vez algo así como cuatro, y luego le aplicamos una relación estelar a esto. Será algo así como 50. Ya verás lo que se hace es esencialmente creado una estrella cuatro patas. Y se puede cambiar esta relación. Es si quieres que sea por lo que es más extremo. Y de nuevo, se puede tener hasta el 100 por ciento para que se vuelva a hacer más grande. Entonces otra vez, ten un poco de juego con él tú mismo y veamos qué se te ocurre. Y esto funcionará, por supuesto, para cualquier tipo de forma que tengas. Entonces si volvemos a quizá 10 lados, se puede ver que eso ha cambiado un poco. Hágalo especie de entre menos porcentaje que tenga, más extremas son una especie de las hojas integrales se ponen esencialmente como si lo hiciera aún más masa del 25 por ciento. Ves ahí tenemos este tipo de forma. Entonces de nuevo, te da mucho y mucho control a para todo el diferente tipo de forma que puedes crear con esta herramienta. Entonces es muy, muy maleable y se crean muchas cosas interesantes con él. De acuerdo, Entonces eso creo que por ahora va a cubrir más o menos todas las diferentes formas que vamos a usar para esta primera parte del video. El siguiente video que vamos a ver va a ser usando la herramienta de línea, la herramienta de lápiz, y también cómo obtener texto en la página. 6. Formas formales, parte 2: De acuerdo, Entonces las próximas cosas que vamos a ver va a ser la herramienta de línea. Después vamos a mirar al temido Pentel y luego la opción de herramienta de texto también. Pero empecemos con la línea recta. Por lo que la herramienta de línea y tal vez a menudo se utiliza tanto como tal vez la herramienta de lápiz porque con el lápiz tienes una especie de flexibilidad de centro comercial en lo que puedes hacer con ella. Esto es literalmente sólo para dibujar líneas rectas o ni siquiera líneas rectas, sólo líneas en general. Entonces si querías entonces realmente dibujar una línea puede afectarla como quieres. Se puede mover alrededor de cualquier tipo de ángulo. Si entonces comienzas a dibujar otra línea y luego intentas conectarla en algún grado lo hará. Pero si hacemos zoom, verás que en realidad no está perfectamente alineado. Si quieres este tipo de cosas, queremos especie de puntos de anclaje el uno al otro. Por lo que quieres una línea para unirse a otra. La mejor opción para usar es la herramienta de bolígrafo, a la que llegaremos en tan solo un momento. Entonces realmente quieres pensar en la herramienta de línea para realmente sólo dibujar líneas rectas. No necesariamente se conectan con otro. Si quieres crear tipo de y sí, ciertos tipos de iconos o tal vez, tal vez a través del tipo de cosas que tal vez quieras probarlo con la herramienta de lápiz. Eso se puede hacer y se puede ver que las líneas nos están avisando cuando algo está alineado correctamente. Si tan sólo muevo éste también. Ya ves ahora todas estas líneas en realidad se alinean correctamente entre sí. Y así es básicamente como usas esa herramienta. Entonces de nuevo, no tiene opción de llenado para esto porque es solo una línea recta. Por supuesto, puedes cambiar el color de las diferentes líneas que tienes. Un rey aumenta el tamaño de la frontera. Esto se aplica por cierto a cada artículo de aquí también. Por lo que todas estas opciones tienen un boarders, obtendrás lleno las otras formas así como por hacer diez de la Omeka mucho más gruesas. Entonces puedes tener un guión también. Entonces si tecleamos el número cinco, volveremos a obtener una pérdida de líneas discontinuas. El vacío podemos aumentar así como hacerlo 10. Lo hará más espaciado. Entonces de nuevo, todas estas opciones, hey, en realidad sí las tienes también para elipse rectángulo, y para polígono también. Entonces esa es una visión general básica de la herramienta de línea. A continuación, tenemos la herramienta Pluma. La herramienta Pluma. Ahora si estás familiarizado con el uso Photoshop o estás familiarizado con Illustrator, estarás bastante familiarizado con cómo funciona esto. El lápiz en XD funciona de una manera bastante similar. Ahora, la herramienta Pluma podría ser un curso todo por su cuenta porque es muy complicado. Se puede complicar mucho, particularmente si te estás metiendo en diseño gráfico y estás creando muchos tipos de formas diferentes. Este curso no se trata realmente de eso. Por lo que voy a darte sólo una especie de resumen básico de lo que la herramienta Pluma puede ser útil. Piensa en el lápiz realmente como una forma de unir varias líneas diferentes entre sí que están perfectamente conectadas. Entonces en mi ejemplo anterior, habrías visto que cuando conecté o trato de conectar las líneas juntas, en realidad se unieron perfectamente. Pero si acercamos aquí, verás que estos realmente están perfectamente alineados como una especie de extraña brecha ahí. Por lo que todo esto se une. Y si quieres crear y un relleno para esto, puedes diferir la forma. Entonces por el momento sólo tenemos un borde que está creando esa forma. De nuevo, puedes cambiar todo esto por lo que quieras que sea. Si quieres deshacerte de la frontera, puedes hacer no la tengo sólo como relleno. Eso también se puede hacer. Entonces esa es la mejor manera en que puedo describir cómo funciona la herramienta de lápiz para una especie de unión de líneas. Para que puedas imaginar todas las diferentes formas un poco locas que puedes crear con esta, ella creó la forma y vuelves a tu herramienta de selección. Puedes manipularlo como quieras. Algo que aún no he mencionado es la herramienta de rotación. Por lo que verás a medida que pasamos el cursor, obtenemos un icono que cambia a rotación. Entonces si vuelvo un poco atrás, ya ves como me muevo hacia afuera, cambia a ese símbolo de ahí. Ahora si hago clic y arrastro y roto, girará el elemento alrededor. Por supuesto, esto también se aplica a todas las demás formas que tenemos también. Por lo que la herramienta de rotación, obtendrás una opción para eso para elipse de rectángulo, y para polígono también. Entonces esa es la visión básica de cómo crear diferentes formas con esto. Ahora donde se pone más interesante es si empezamos a crear curvas. Entonces si solo sigues haciendo clic y luego deteniéndote en ciertos puntos, creará líneas rectas. Pero ahora, esta vez si hago clic, si mantengo pulsado, muévelo. Pero esta vez si sostengo y arrastre, va a subir una curva o una curva Bezier. Ahora de nuevo, esto se puede complicar mucho. Y el, básicamente pensar en esto como una forma de curvas de líneas es la mejor manera que puedo describirlo. Y te puedes imaginar todos los diferentes colores, formas que puedes hacer con esto. Y cómo manipulas este tipo de barras aquí manipulará la intensidad de la curva que tienes. Y como pueden ver, esto es sólo crear una curva en el lado izquierdo aquí. Si seguimos adelante, hago clic en otro lugar. Se puede decir que todavía se va a curva al siguiente lugar así como encontrado para unir los opsins en mi cabello. Podemos hacer eso. Y entonces esa curva se alineará con esa caja de ahí. Si salgo de esa herramienta ahora y vuelves a hacer clic, va a volver a entrar en líneas rectas. Y así es básicamente como funciona eso. Ahora de nuevo, esto puede ser muy complicado. No voy a entrar en demasiada profundidad para esto, pero hagámoslo una vez más sólo para mostrárselo. Entonces si te aguantas, dormimos a lápiz. Y luego si haces clic y luego vas a otro punto, y luego mantienes pulsado. Y luego drag se va a crear una curva es la mejor manera que puedo describirla. Entonces si luego soltamos y luego vamos a nuestro primero aquí y luego nos sumamos a eso. Ok, podemos hacer eso haciendo clic de nuevo. Y después hemos creado una curva. Soy crea este tipo de forma curvada. Y si venimos de oficina y solo volvemos a nuestra herramienta de selección, ya verás si hacemos zoom, todos estos puntos están perfectamente unidos. No hay una especie de brecha incómoda. Para que puedas imaginar todos los diferentes tipos de formas que puedes crear con esto. Si quieres meterte más en el diseño gráfico. Si yo, si te interesa que yo cree otro curso sobre eso, házmelo saber. Nuevamente, este curso trata de que la interfaz de usuario se mueva como diseño gráfico. Pero esa es una visión muy, muy básica de cómo funciona la herramienta de lápiz y te permite crear formas que de otra manera no podrías crear con solo la herramienta de una sola línea. De acuerdo, otra cosa antes de que empecemos a reunirnos en otra cosa. Y digamos que has cambiado opinión y esta forma no es del todo lo que quieres que sea. Y de hecho, sólo le daremos un relleno. Digamos que realmente quieres cambiar esto. Si haces doble clic en él, en realidad puedes crear un punto diferente. Ya puedes ver si me cierro sobre él, obtenemos un círculo que aparece. Y si volvemos a hacer eso, y si hago clic y luego arrastra, ya puedes ver que puedo volver a ello. Un autor. Bueno, ya lo he hecho. Entonces si saco esto un poco, así que está bien. Lección Yo quiero hacer lo mismo aquí. Si hago clic y lo arrastro, entonces puedo manipularlo una vez más y luego crear un tipo diferente de forma, incluso cuando ella terminó la forma original por lo que hiciste. Entonces ojalá eso tenga algún tipo de sentido. Esto es sólo una breve descripción general de cómo se puede utilizar la herramienta de lápiz para crear todo tipo de formas diferentes. 7. Texto: De acuerdo, Entonces a continuación tenemos nuestra herramienta de texto. Entonces si seleccionamos esto y luego solo hacemos clic en el lienzo UNC, obtenemos un cursor, que punto podemos empezar a escribir lo que queramos. Y ya verás si solo sostengo esto abajo. Si sigo escribiendo es por lo general solo seguir yendo y yendo y yendo. Por lo que no hay ningún tipo de ancho definido en este momento y simplemente seguirá escribiendo tanto como querías decir. Ahora obviamente esto no es particularmente útil. Vas a querer contenerlo un poco algún grado cada vez que estés escribiendo texto en la página. Entonces hay algunas formas en las que se puede hacer esto. En primer lugar, solo te mostraré cómo puedes alterar lo que ya has hecho. Digamos que querías lo que acabo de hacer ahora mismo, pero no lo querías todo el camino al otro lado. Hay algunas formas en que puedes manipular esto. Y la principal aquí es tener altura automática. Entonces si hace clic en esta opción aquí, ahora obtenemos una opción para básicamente arrastrar esta caja alrededor, sin embargo queremos esto, y ahora verás el cambio de cursor al final. Si empiezo a arrastrar hacia adentro, verás que ahora está escalando automáticamente de tal manera donde el texto ahora está cayendo a continuación. Entonces si has hecho de la manera que lo hice donde apenas a través de texto on y quieres cambiar el ancho de la misma. se puede hacer. También puedes tenerlo de tal manera donde haya un tamaño fijo para así estados nunca pasarán un cierto punto. De nuevo, el tipo similar de cosas. Entonces oye, entonces tienes la opción de un poco más abajo y nunca pasaré un cierto punto. De acuerdo, Entonces si solo ponemos esto de nuevo al ancho automático por un momento y en realidad nos desharemos de esto. Si lo intentamos de nuevo, asegúrate de volver a enviar texto a todos los seleccionados, solo puedes hacer clic en la letra T también. Si luego haces clic y arrastras, en realidad puedes crear un área al que llegaremos a ese texto no irá más allá. Ahora si empezamos a escribir, verás cuando llegue al borde de esta caja, también empezará a caer abajo. Entonces otra vez, ambas cosas que te acabo de mostrar hacen el mismo tipo de cosas. Por lo que solo depende si sabes de antemano cómo quieres que se dimensione tu texto. Entonces esa es la forma básica de eso. Entonces si solo escribo algo sobre ellos, especie de tonterías, acabamos de poner, este es un curso AB XD para principiantes. Todas las opciones de textos que esperarías ver con cualquier tipo de programa o esto, o aquí está obviamente entonces pueden cambiar los diferentes tipos de diversión que tenemos aquí. En realidad puedes subir a tus infantes también. Pero tenemos de nuevo, acceso a un bebé fondos y todo tipo de cosas diferentes que puedes tener una S Si solo intentamos algo diferente que somos algo que ver con color de relleno. De nuevo, me habría visto esperar ver como tipo de cosas. Eso se puede cambiar. También le puede dar una frontera. Se puede cambiar la opacidad del texto en sí o la alineación. Esperarías verlo aquí para que no puedas enviarlo a la derecha. Y otra vez, ciertamente también aumentar y qué tiene usted. También tenemos espaciado de celosía. Contamos con altura de línea, tenemos altura de párrafo también. De acuerdo, entonces solo hay otra cosa que quiero hablar cuando se trata de texto y cómo se puede manipular. En ocasiones querrás poder ajustar cómo se ve realmente el texto en la página. A lo mejor quieres ajustar caracteres individuales y no puedes hacerlo por defecto. Entonces por eso, esto es un, esto en realidad es texto. Técnicamente no es un archivo vectorial hasta el momento, pero hay una forma en que se puede hacer tanto. Por lo que de la forma en que lo harías, asegúrate de que tu texto esté seleccionado. Es tu objeto. Y vas a camino. A continuación, puede convertir el camino. También hay un atajo de teclado para esto también. Y ahora, si acercamos y acercamos, en realidad podemos seleccionar rutas individuales de cada una de estas letras. Entonces si queremos cambiar algo sobre cómo se ve algo, podemos hacerlo y podemos manipularlo de la misma manera, hacer que manipules cualquiera de las formas que tenemos. Entonces ahora esto es esencialmente una especie de archivo vectorial que ahora puedes cambiarlo y manipularlo como quieras. Entonces si estás diseñando un Lego, digamos que estás usando XD, puedes tipo de fuente base de usuario y luego puedes cambiarlo como quieras para asegurarte de que llueva. Y de nuevo, hay todo tipo de aplicaciones para las que puedes usar esto. Cualquier cosa. Básicamente necesitas simplemente cambiar algo cada vez tan ligeramente con el texto. Esta es la forma en que lo harías. 8. Imágenes: De acuerdo, Entonces a continuación vamos a hablar de cómo manipular y cómo importar imágenes. Por lo que obviamente no puedes estar usando imágenes bastante a lo largo de tu tiempo diseñando sitios con XD. Entonces vamos con Así las dos opciones principales en cuanto a importar una imagen. En primer lugar, lo más importante a aprender es un atajo de teclado, que es Shift Control y la letra i o Shift Command. O si estás en un Mac, si lo hiciste, se abrirá tu panel donde podrás elegir obviamente de todas las diferentes carpetas que tienes. Después de que quisieras aplicarlo una pulgada, haz click en una, y luego haz click en Importar. Si fueras a dar click en todos ellos e importar todo el lote, también puedes hacer eso. Y XD importará automáticamente todas las cosas que acaba de seleccionarlo. Y luego puedes usar eso como quieras. Puedes arrastrarlos hacia un lado. Si piensas, de nuevo para una especie de usarlos todos individualmente un poco más tarde, puedes hacer eso, pero vamos sólo eso por ahora. Entonces esa es una forma de hacerlo. La otra forma de importar una imagen ya es tener una carpeta abierta donde simplemente puedes arrastrar las imágenes como quieras. Obviamente puedes arrastrar y seleccionar tantos y arrastrarlos de esta manera también. Entonces eso es de nuevo ojalá que formas bastante obvias de importar imágenes simplemente deshaga eso por ahora. Entonces estamos de vuelta al cuadrado uno. Entonces ahí estamos. Y luego, como te imaginas, todas las cosas que puedes hacer con algunas de las herramientas de forma también se pueden hacer con imágenes así como si quieres cuidar las fronteras. Puedes hacer eso simplemente arrastrando. También puedes alterarlo en términos de cono individual es para, si quieres, solo quieres tener una curva en una esquina. Podrías hacer eso también. En cuanto a cosas como llenar el color tranquilo en esto, simplemente se convertirá en un color completamente sólido. Entonces la película realmente es solo la imagen en sí. Economía hizo eso. Se pueden tener fronteras. Entonces si quieres tener un borde grande y grueso sobre ti caramelo, nuevo, todos los mismos controles de las otras formas también. Por lo que todo lo que acabamos de hacer hasta ahora también está disponible para las imágenes I, k. Y en cuanto a drop shadow, de nuevo, todas las mismas cosas están disponibles que puedas tener sombras de gota para controlar el cantidad de desenfoque que tienes y todo el resto de la misma. Por lo que todo eso está disponible. De acuerdo, así que eso es un poco obvio poder fuera del camino. Entonces ahora hablemos de cómo realmente tipo de usar estas cosas de una forma más obvia para diseñar sitios web. Tan a menudo, para lo que vas a estar usando imágenes es una especie de imágenes de fondo y solo imágenes de instalación de imágenes de fondo y solo imágenes de instalación con unos bloques Info dentro, dentro de tu diseño. El primero que te mostraremos cómo hacer es crear una imagen de cabello con la sección de Harry lo siento con la imagen. Ahora si solo sacamos esto hasta los bordes de aquí, ya ves que se engancha. Pero aquí es donde nuestro tipo de debajo del punto de pliegue está aquí. De hecho, si solo pongo esto un poco más bajo, ya ves aquí, esta sería nuestra sección de pelo de un sitio web. Y bastante comúnmente se tiene una imagen como ocupando el ancho completo de eso. Pero si hacemos eso, verás con esta imagen en particular es en realidad, en realidad no va a cinco correctamente. Va a estar por debajo del redil, que en realidad no queremos hoy. Y lo que podías hacer, supongo que entonces tipo de ponerlo en la caja sobre ella, el COVID arriba. Pero esa no es la forma más efectiva. El mejor modo de hacerlo es mediante el uso de una forma. En primer lugar, entonces lo que vamos a hacer es que vamos a utilizar nuestra herramienta de forma, herramienta de rectángulo. Y vamos a dibujar un rectángulo justo hasta un punto donde está por debajo del pliegue, a la derecha, para afirmar un punto de ruptura. Y entonces vamos a hacer se arroja imagen dentro de esta plaza. Entonces eso es lo que vamos a hacer ahora decir que voy a abrir mi ventana aquí. Yo sólo voy a recoger una imagen. Voy a dejarlo caer por dentro y verás que se ha escalado automáticamente a esa forma. Y esto funcionaría para cualquier otra forma que tengas también. Entonces si hago doble clic en la imagen, puede ver en realidad sigue siendo un tipo de arriba y abajo. Entonces, en realidad no es un ajuste perfecto, pero en realidad estamos recortando automáticamente una parte de esa imagen. Entonces esto es un poco perfecto si estás diseñando algo así como una imagen de encabezado. Y si quiere maniobrar alrededor, puedes hacerlo simplemente haciendo doble clic. Y luego cada vez que sueltes y cliqueas, entonces seguirá siendo pesado lo dejó. Digamos que quieres extender esta imagen bastante más. Y solo quieres tener tal vez especie de la esquina inferior de la imagen es lo suficientemente grande y te permite hacerlo. Tú también puedes hacer eso. Y cuando hago clic lejos de él, lo ves ahora desaparece. Entonces así es como comenzarías a usar imágenes para diseñar tipo de secciones de héroes o sitio web. Y vamos a volver a esto un poco más tarde en el curso también. Entonces esa es una especie de la forma más obvia de hacerlo. Voy a borrar eso por un momento y ya verás una vez que lo haga, también borró la forma al mismo tiempo. Entonces básicamente Masa los dos juntos. Entonces solo te voy a mostrar un ejemplo más. Por lo que sí mencioné se puede hacer con cualquiera de la forma también. Si tan solo dibujamos un círculo quizás, y sólo vamos a sacar este tipo de a un lado aquí. Y entonces una vez más, lo que vamos a hacer es simplemente lanzar una imagen dentro esa forma y se ajustará automáticamente a la imagen a la forma que has dibujado. Y si quieres entonces moverlo, podemos hacer. Y obviamente, no es solo la herramienta Elipse también es para la herramienta poligonal también. Entonces así es básicamente como haces eso. Y eso es todo tipo de cosas obviamente podrías hacer con esta herramienta súper, súper útil para tener. De acuerdo, Entonces esa es una breve visión general de cómo importar imágenes a tu diseño. De nuevo, si solo quieres importar una carga de imágenes y tener más en el lateral listo para que lo uses. se puede hacer. Vamos a volver a manipular imágenes mucho más a lo largo del curso. Vaya en lugar de más detalles y cómo se puede usar tipo de cuadrículas repetidas que comenzaron a llegar en un momento donde se puede copiar y pegar elementos con bastante facilidad. Pero en el siguiente video vamos a hablar de cómo importar videos y archivos Lottie. 9. Video y lottie: De acuerdo, Entonces a continuación vamos a hablar un poco sobre cómo importar videos en archivos Lottie dentro de Adobe XD. Por lo que estoy grabando este curso a finales de 2021. Y esto en realidad es una cosa bastante nueva que acabamos de presentar. Entonces solo te voy a mostrar cómo puedes hacer esto. Un muy sencillo similar a cómo importarías una imagen. O tenemos que hacer esencialmente es drag on o simplemente shift Control y Alt o Shift Command I. Y luego sólo video. O simplemente podemos arrastrarlo como mencioné. Y ahora lo estamos, tenemos un video. Ahora no se juega hasta que realmente previsualice el lienzo en sí. Y hay algunas configuraciones que puedes tener para cómo realmente actúa también. Por lo que puedes ver aquí tenemos un nuevo tipo de opción de configuración aquí donde dice Play on tap, que es lo que está actualmente encendido, la reproducción mensual o no de Platón , o después puedes editar aspectos de cómo se reproduce. Esto tiene más que ver con la parte de escribir post. Bolus tiene tu propio juego automático porque las posibilidades son si vas a estar usando un video, las posibilidades son bastante altas va a ser algún tipo de video de fondo con más frecuencia que no. Entonces ahora, si previsualizamos esto, verás como hacemos eso, entonces inmediatamente empieza a jugar la vista previa de mamá. Entonces así es básicamente como el video de Mackenzie. Y obviamente puedes redimensionar como quieras. Todos somos el mismo tipo de controles que tienes con cualquier otra cosa. Ahí están algunas de las cosas que no tienes automáticamente, como las sombras caídas no te tendrán. Eres un poco más limitado cuando se trata de eso. Entonces al igual que ir a las imágenes, en realidad se puede especie de mascota a una forma también. Entonces, sólo vamos a mostrarte eso. Si simplemente dibujamos un triángulo, tal vez entonces simplemente arrojaremos nuestro video al triángulo. Haga doble clic y luego obtendrás una opción para ver cómo se juega. Por lo que vuelven a jugar automáticamente. Yo puedo salir de eso y entonces ojalá podamos extender eso al tamaño que queramos. Y luego si previsualizamos, verás que se jugará automáticamente dentro esa forma que la hemos enmascarado para decir muerto simple, esto es exactamente el mismo tipo de cosas que haces con las imágenes. Otra vez. Entonces eso es para video. Y de nuevo, probablemente haya algunas cosas más que puedas hacer con él. Pero de nuevo, quería mostrarles los fundamentos de cómo funciona esto. Podrás gestionar todos los diferentes tipos de videos que tengas en el panel de la izquierda, vamos a entrar en los activos de documentos en tan solo un momento. Pero sólo digamos que latae archivos. Por lo que los archivos latae si no estás al tanto de ellos, o básicamente después de sus archivos After Effects que se han convertido a calor y en sitios web es muy, muy popular en Webflow y cosas como el elemento o el momento. El motivo del ser es mucho menor tamaño de archivo y algo así como un video o GEF. Entonces hay, hay flores son bastante grandes. Y obviamente, cuanto mayor sea el tamaño del archivo para un sitio web, más lento se cargará el sitio web. Por lo que cuanto menor sea el tamaño del archivo, mejor y estos tamaño de archivo de un muy pequeño, razón por la cual son muy, muy populares. Por lo que quiero solo descargar uno solo para mostrarte cómo funciona esto. Nuevamente, súper simple. Muchos de estos son gratuitos. Entonces si quieres echar un vistazo a todas las diferentes que tienes aquí. Si vas a Lottie files.com, entonces puedes suavemente a través de una carga de diferentes animaciones gratuitas que la gente tiene unas cuantas para usar como quieras. También tienen un mercado también donde se puede especie de compra quizás más avanzadas o ciertas animaciones en un tema específico. Entonces vamos a descargar este, creo. Y todo lo que tenemos hoy, en realidad puedes descargar estos en unos formatos diferentes. En realidad los puedes tener como regalo para o en un video. Si descargamos esta topología es archivo adyacente bloqueado, verás que hace eso. Y entonces todo lo que hacer es simplemente arrastrarlo a nuestro Lienzo, suéltalo. Y al igual que un video, tienes unas cuantas opciones diferentes y cómo reproducirá una jugada en tap o puedes tenerla reproduciendo automáticamente. Entonces creo que lo que probablemente haremos es que se juegue automáticamente. Y así vamos a poner esto en alguna parte. Entonces de nuevo, en realidad hay que previsualizarlo. En realidad es ver la animación funcionando. Y entonces lo que haremos es elegir jugar automáticamente. Y además no queríamos que solo se detuviera después, después de jugar una vez. Por lo que esto pone en el pelo en el lado izquierdo, y esto también es cierto para el video debió haber dicho esto va a bucle la reproducción. Entonces ahora cuando tengamos una vista previa de esto, jugará continuamente horas extras, que es probablemente lo que tendrías si utilizas esto en un sitio web. Entonces ahí vamos. Entonces sí, Nuevamente, así es básicamente como vas a usar los archivos Lottie y los archivos de video. Simplemente te da un poco más tipo de libertad de diseño. Y eso te permitirá ver cómo puede parecer un sitio web o una aplicación puede verse como un producto más terminado, por lo que eso está actualizado. Ese es el punto completo. En ocasiones tendrás que haber esperado hasta el proceso de desarrollo para ver cómo se ve realmente. Ahora puedes tener un montón de archivos y videos es algo realmente genial. Entonces esa es la visión general básica de cómo puedes usar videos y archivos Lottie en tus diseños. 10. Atajos de teclado: En este video sobre SOC, atajos de teclado muy comunes que vas a querer aprender. Te voy a proporcionar en los materiales del curso una lista completa de atajos de teclado disponibles frase, pueden echar un vistazo a tu ocio. Hay bastante. Entonces quería, sin embargo, quería simplemente entrar en por qué uso bastante y sólo tipo de los, los fundamentos absolutos de usar atajos para ciertas cosas. De acuerdo, Entonces la más obvia es copiar. Entonces digamos que sólo queremos tener esta plaza. Voy a copiarlo en otro lugar. Simplemente puedes ir y controlar C y controlar V. Y automáticamente te dará otra versión de lo que acabas de hacer. Entonces esa es una forma de copiar. Otra forma es si ligeramente elemento mantienes presionada Alt y luego puedes moverlo a medida que sostienes este o, como lo sostienes abajo, voy a crear un duplicado de lo que ya tienes, el SR. Entonces otra forma de hacer eso. Otra cosa sobre cuando mantienes presionada Alt como una especie de otra cosa bastante útil si estás seleccionando un elemento y solo lo tienes presionado, pero estoy arrastrando. Te muestra la distancia de un elemento a otro. Por lo que puedes ver aquí, te está mostrando la distancia de este punto a la parte superior, a cada lado, a la parte inferior. Entonces si no arrastras es otra forma de usar ese control donde te puedo decir, especie de darte una idea de espaciado. Entonces es muy, muy útil hacer eso. Es así como puedes usar atajos de teclado para duplicar elementos. Otro teclado, Shoko, claro, digamos que queremos deshacernos de todo lo que hemos hecho. Just Control y Z, deshacer todo lo que acabamos de hacer. De acuerdo, Así que al igual que lo haces por cualquier otro útil para ti cuando estás usando un PC o Mac. De acuerdo, entonces el tipo de los obvios de ahí, vamos a estar obviamente pasando por muchos de estos diferentes símbolos aquí. Nuestro intento y en realidad no usar estos dos modos sólo para que puedas ver mejor lo que está pasando. Pero cada uno de estos sí tiene su propio atajo de teclado, como he mencionado anteriormente. Pero se quiere acostumbrarse particularmente a usar la herramienta de selección en el VA. Porque lo que sea que estés haciendo actualmente a la vez, si miras el caso de ahora presiona la letra V y volvemos a la selección. Entonces eso se va a utilizar bastante a lo largo del curso. No voy a volver constantemente a este a los setos, un socialmente justo diría para siempre comer, quiero hacer eso usando teclado para manipular elementos. De nuevo, probablemente ya hemos tocado esto un poco. Pero si mantienes presionada Shift en cualquier elemento que tengas o cualquier forma que tengas, se creará. Simplemente voy a una especie de escala exactamente como es sin agregar ningún tipo de ciencia a ninguno de los dos lados. Si lo sueltas, puedes dimensionarlo como quieras. Si quieres alargar. Pero arriba y abajo. Y si mantienes presionada Alt, mientras haces eso, verás es moverlo y escalarlo, pero solo de esta manera y de esa manera. Entonces arriba y abajo, si lo hizo al revés también, sostén nuevamente Alt, sólo crecerá a ambos lados así también. Son cosas bastante comunes que vas a estar usando. Cosas como Bring to Front es otro atajo de teclado muy común. Entonces si solo le damos a esto un color de relleno para que veas mejor lo que estamos haciendo. Y sólo dibujaremos otra cosa también. Y vamos a conseguir un relleno y rápido ya tengo película como ceniza fina ahora le daremos un color de relleno diferente de lo contrario y nos pondremos confuso. Entonces digamos que obviamente queremos conseguir esta caja detrás de esa caja, solo puedes hacer clic con el botón derecho en ella, enviar de nuevo, o puedes usar un atajo de teclado para también. Entonces ellos son los que vas a estar usando. Bastante un poco. Bloque es decir, echa un vistazo a través de la tecla, la lista de atajos de teclado que le proporcionas una lámina y realmente quieres comer todo lo que puedas, solo inténtalo y úsalos. Por lo que llega a un escenario donde es casi de segunda naturaleza. Y después de haber estado usando esto por un tiempo, se convertirá en segunda naturaleza, particularmente cosas como herramienta de selección de baterías seleccionando la letra V. Ese tipo de cosas obvias, obviamente haciendo Control a, Control V va a ser muy obvio para ti. Funciona. Probablemente estás acostumbrado a usar cosas. Pero de nuevo, ten un pergamino y encuentren cosas que te gusten usar. Y hará que tu vida sea mucho más rápida al usar este programa. 11. Controlar y bloquear: De acuerdo, Así que a continuación, cómo controlar y manipular elementos dentro de XD. Entonces les voy a mostrar esto de una especie de manera más utilizable. Entonces vamos a crear un Menú Básico de Nav apenas muy rápido, menos jirafa, el rectángulo. E imagina que esto no es suficiente dinero o deshazte de la frontera y le daremos un color. Entonces hagamos tal vez azul oscuro. Entonces ahí vamos. Tenemos el funcionamiento del menú nav ahora en un menú de la app en el sitio web, obviamente tendrás generalmente una pierna en el lado izquierdo. Después tienes los elementos del menú de navegación ya sea en el central a la, a la derecha. Así que vamos a hacer eso ahora. Entonces si queremos empezar a construir cosas encima de esto, a veces no quieres mover accidentalmente esto, lo cual se hace muy fácilmente, cual se hace muy fácilmente, sobre todo si estás tratando de cambiar el tamaño de los elementos o tratando de seleccionar otros ítems, se puede ser una pinturas. En realidad quieres bloquear esto en posición. En realidad solo te mostraré esto cómo puede ser un problema. Simplemente voy a crear un logotipo muy, muy básico. Entonces vamos a hacer que este círculo sea rojo sólo para mostrarte. Está bien. Entonces tendremos esto sobre el lado izquierdo y luego crearemos algunos como artículos de navegación por aquí. Entonces si nos metemos en la herramienta Texto aquí y empezamos a escribir, tal vez tengamos amor a casa. Y vamos a hacer clic fuera de eso y luego tipo de solo duplicaremos esto unas cuantas veces. Entonces si sí toqué eso, ahora, solo haré esto fenomenal de forma libre muy prolijamente. Pero digamos que queremos una especie de reajuste lo que tenemos aquí. Entonces el espaciado es solo sobre derechos o lo conseguí hace apenas un momento. Hagámoslo otra vez. De acuerdo, Entonces se puede ver ese espacio uniformemente. Pero, ¿y si queremos ajustarlos? Si quiero especie de seleccionar todos estos juntos, verás como intento y hago eso, solo mueve la barra de navegación porque no está bloqueada en posición. Entonces si quieres probar y seleccionar todos estos que están debajo de esta barra de navegación. No se puede hacer eso sin afectar a esta barra de navegación. Entonces lo que puedes hacer para evitar este problema es bloquearlo en su lugar. Por lo que dos maneras puedes hacer eso. Puede hacer clic con el botón derecho del ratón en el elemento que desea bloquear. Ver una opción para un que tiene lote. Por lo que puedes simplemente hacer clic en eso alternativamente, siempre muestra que eres un atajo de teclado, que es lo que quieres intentar y acostumbrarte a usar todo lo que puedas solo por velocidad. Por lo que controlas un l o Command y S en un Mac. Entonces si hacemos eso, ya ves ahora tenemos este símbolo de candado en la parte superior izquierda. Y esto significa que no importa lo que hagamos, importa lo que intentemos y haga clic en esto, no se moverá importa qué, aunque intentemos eliminarlo, fue más tarde se bloquea en su lugar. No lo moverá todo. Para desbloquearlos, solo puedes hacer clic en el ícono en sí o puedes volver a golpear Control y L y desbloquearlo por ti. Entonces así es básicamente como funciona eso. Y de nuevo, Control y S, o Command y L. Intenta usar atajos de teclado tanto como puedas. Simplemente te ahorra mucho tiempo. Entonces ahora como en su lugar sin embargo, esto significa ahora cuando intento arrastrar y hacer clic, puedo seleccionar fácilmente mis artículos de navegación y no hace ninguna diferencia. Entonces puedo redimensionar estos sin embargo quiero hacer lo que quiera con ellos. Puedo hacerlo libremente sin afectar ningún otro elemento en el propio menú real. Entonces eso es una especie de caso de uso obvio para este tipo de cosas. Encontrarás que esto es muy, muy común. Y a medida que empiezas a usar el día x, encontrarás que este tipo de sucede un poco justo y solo te meterás en el hábito de desechar las cosas mientras tratas de construir encima de ello. Entonces ese es un caso de uso muy, muy común. Digamos que nos deshagamos de todo esto por ahora. Y qué en realidad si me quedo con las formas, vamos a usar eso sólo para demostrar algo más. Simplemente estoy desbloqueando eso. En realidad voy a reprometer esto sólo por un momento. Entonces ahora tenemos dos formas. Entonces si arrastro esto sobre la parte superior de mi rectángulo, verás que automáticamente se ha ido por encima de la parte superior. Ahora bien, no significa necesariamente que quieras tener siempre un pedido. En ocasiones es posible que quieras tener este círculo debajo del rectángulo. Entonces, ¿cómo las haces? Un par de formas en las que puedes hacer, una vez más es dar click en el ítem que quieres manipular. Puedes hacer clic con el botón derecho. Y ven aquí tenemos algunas opciones. Tenemos llevar al frente, adelantar, enviar hacia atrás, o enviarlo al banco. Traer al Frente es traerlo derecho al frente y enviar de vuelta es mandar de frente a atrás ya que será obvio. Llevar adelante y atrás significa que lo hará, se moverá dentro del panel de capas en el que tenemos heno al que no hemos entrado. Sí, llegaremos a esto en el próximo video. Pero básicamente, también se puede manipular esto por aquí. Simplemente te mostraré muy rápido. Entonces si sí arrastramos esto arriba, ya ves ahora es zona afectada aquí. Por lo que puedes afectar así también. O también puedes hacer clic derecho y luego solo tienes que hacer clic en la opción que quieras. O simplemente puedes usar el teclado Shoko que aparece ahí también. Por lo que hay dos formas diferentes en que puedes manipular estos artículos. Entonces esto va a ser súper, súper común y vas a querer manipular bastante estos artículos. Siempre que estés diseñando sitios web, esto es algo que vas a usar mucho. Por lo que vale la pena recordar los atajos de teclado para esto. O si solo prefieres arrastrar estas cosas por ahí, puedes hacerlo también. Por supuesto, esto también varía para el texto. Si tuviéramos textos aquí, puedes manipular eso como quisieras. Entonces, esperemos, eso tiene sentido. Por lo que caes de nuevo cuando empezamos diseñar nuestro proyecto de clase un poco más tarde, vamos a hacer uso de todas estas diferentes técnicas a medida que avanzamos. De acuerdo, entonces esa es una visión general básica de cómo puedes acercar o alejar los elementos de la pantalla, y cómo puedes reordenarlos en su posición en el eje. Y también cómo puedes bloquear los artículos en su lugar para que luego puedas construir cosas encima de él. 12. Seleccionar y Grouping: De acuerdo, entonces ahora hablemos de cómo seleccionar y agrupar diversos artículos diferentes en tu lienzo. Entonces de nuevo, esto va a ser súper común. Mucho tiempo, vas a querer seleccionar varios artículos juntos. Entonces digamos que queremos que estos dos artículos se muevan al mismo tiempo y mantengan la misma distancia que tienen actualmente. Entonces si fuéramos a hacer eso, si solo hacemos clic y arrastramos y seleccionamos ambos elementos juntos, si ahora intento mover esto, los moverá a ambos al mismo tiempo. En el momento en que haga clic y trate de hacerlo de nuevo, será especie de propio grupo los ítems. Entonces esa es una forma rápida de reunir ítems, pero no quieres que siempre esté en el mismo grupo. Pero va a haber un montón de veces cuando quieras, tal vez digamos, tal vez crear algún tipo de tarjeta de algún tipo. Puede que siempre se quiera tenerlo elementos agrupados y se convierten en algo propio. Eso también se puede hacer. Entonces, en lugar de simplemente seleccionar, sólo reunirse, si se quiere, y comportarse siempre y reaccionar juntos. Eso se puede hacer porque de nuevo, el momento, hago clic apagado, va a detener eso. Entonces una vez más, selecciónelos a ambos juntos, haga clic derecho y luego verá que dice: Hey, grupo, que también es un atajo de teclado, que es Control y J, nuevo, este es un atajo de teclado. Quieres recordar todo lo que puedas. va a ahorrar mucho tiempo, pero si hacemos eso, verás que ahora está agrupado. Y aunque haga clic fuera de él y vuelva a él, ahora me dejará conocer estos artículos y siempre se van a agrupar. Entonces si querías deshacer el agarre o tienes que hacer es hacer clic derecho y luego seguir y sobre la uva. Si comienzas a hacer clic fuera, ahora puedes desplazarte por diferentes elementos de forma individual una vez más. Entonces así es como agruparías artículos juntos. Y de nuevo, no hay ningún tipo de límite en cuántos de estos se puede hacer. Se puede agregar texto. Trabajaron con texto, funciona con todo. Entonces así es como agrupa los artículos juntos. De nuevo, esto es algo que vas a estar usando las cotizaciones anteriores. Y ya verás si lo mantenemos aquí en nuestro panel Capas. Por el momento, estos dos elementos tienen su propia cosa individual pasando En el minuto que seleccionamos ambos juntos y luego hacemos clic en GREP, dices que crea una carpeta para estos ítems. Si ahora hacemos doble clic en eso, verás que tenemos dentro de esa carpeta misma. Entonces si esto fue una especie de elemento, vas a usar mucho a lo largo de tu página web. Entonces puedes simplemente darle un nombre a eso y llamarlo como quieras. Nuevamente, vamos a volver a este panel de Elementos y solo un poquito solo para mostrarte un poco con más detalle dónde puedes lidiar con ello. Otra vez. Pero esa es la visión general básica de cómo puedes agrupar elementos juntos. Y luego cada vez que los mueves con un ratón, siempre los mueve juntos al mismo tiempo. Además, vale la pena mencionar es que quieres escalar estos ítems grupo monofilético, puedes hacer eso también. Si eso siempre es un grupo, sólo moverá el elemento en el que va a hacer clic. Si mantienes pulsado Shift, hará que ambos crezcan al mismo tipo de nivel. Entonces así es básicamente como grep los artículos y cómo manipula los elementos agrupados juntos. 13. Oculta elementos: Entonces justo antes de seguir adelante, quiero mostrarles una cosa más a la hora de manipular diferentes artículos. Lo que también a veces queremos hacer es ocultar artículos. Así que supongamos por un minuto que queremos, hemos diseñado algunas cosas de tal manera en que tenemos algo que es una especie de intersección estos dos artículos. Pero lo que sea que queramos editar es tal vez debajo de ahí para que pudiera hacer es desagruparlos, salir del camino, pero una mejor manera y puede que simplemente sea demasiado alto el elemento solo temporalmente. Entonces por qué puedes hacer es hacer clic derecho en él y luego solo tienes que hacer clic en ocultar o puedes usar el atajo de teclado. Y me desharé de él sólo por ahora. Y luego tienes el control total del elemento también por debajo. Y si quieres mostrarlo, solo puedes controlar Z. O puedes ver en tu panel de capas aquí, verás la elipse 1 actualmente es toalla en blanco y tiene este tipo de globo ocular con una cruz tres, lo que significa que está oculto. Entonces lo que puedes hacer es simplemente hacer click en eso y lo traerá de vuelta a donde era un bastón. Digamos que eso es un resumen básico de cómo agrupar elementos y cómo manipularlos juntos, y también cómo ocultar elementos temporalmente y luego traerlos de vuelta. Uno que ella quería. 14. Combinar formas: De acuerdo, Así que a continuación vamos a hablar de cómo tipo de combinar un intersectar diferentes artículos juntos. Entonces esto es quizás más común si estás usando formas un poco como este. A lo mejor creaste algún tipo de gráfico. Esto es algo que tal vez usarías para eso específicamente. Por lo que esto no está tanto relacionado con la creación de un sitio web per se. Más tal vez que ver con bomba de diseño gráfico simplemente te mostrará de todos modos porque obviamente saldrá. Mostraré lados de diseño. Así que comencemos un poco dando estos dos artículos juntos en este tipo de imponente, digamos, primero que nada voy a solapar este círculo por aquí así. Asegúrate de que sea agradable y parejo. Y voy a agrupar estos dos artículos juntos. Simplemente voy a seleccionarlos así. Y entonces ahora ves una vez que hayamos hecho esto, ahora tenemos este panel por aquí. Entonces vamos a volver a Repetir Grid en tan solo un momento. Pero ahora tenemos estas diferentes opciones que tenemos ADD, tenemos un restar, también tenemos intersectar, y también tenemos una superposición de exclusión. Entonces eso podría significar que nada es una recompensa. Entonces creo que la mejor manera de solo mostrarte esto es solo mostrarte. Lo que haremos inicialmente es dar click en Agregar. Y lo que ves que pasa aquí es básicamente que acabas agregar la forma que estaba encima a la forma que está aquí. Y también cambia de color. Entonces si quieres simplemente simplemente agregar lo que tengas a otro ítem, de manera muy sencilla, así es como harías eso y automáticamente tomará el mismo color del objeto de abajo si invertimos esto ligeramente. Entonces estábamos diciendo antes, si queremos tener el círculo algo más profundo en el eje, podemos hacerlo como si solo hiciéramos clic derecho y nos vayamos. A lo mejor sólo mandar hacia atrás y hacer el mismo tipo de cosas. Ahora verás que pasa algo diferente. Ahora tenemos, el artículo ha acuñado, se ve igual, pero se toma en las propiedades del elemento bonito más alejado en el punto de acceso. Por lo que ojalá eso tenga algún sentido. Y obviamente puedes crear todo tipo de formas diferentes haciendo eso es agregando elementos juntos. El siguiente se va a restar. Ahora éste es muy, muy útil, particularmente unido para crear formas únicas. Entonces ahora lo que vamos a hacer, de nuevo, asegúrate de que ambos seleccionados luego darán clic en restar. Y se puede ver que ahora estaba ahí como un círculo ahora ha sido básicamente mordido fuera del artículo que estaba debajo de ahí. Entonces esto otra vez, la única forma en que tal vez puedas hacer esto sin usar esta herramienta, pero para tal vez poner un círculo que también fuera blanco con un fondo blanco, podrías hacerlo de esa manera. Pero de esta manera, esto en realidad es S3. Entonces si conozco la forma debajo de ella, solo para mostrarte, y le daré un color de fondo. Ya ves, si trato de mover esto sobre él, dices que es completamente transparente. Ahora no hay nada en este espacio. Entonces eso es restar un elemento a otro. Y vamos a invertir eso una vez más. Entonces si ahora vamos a tener esto manda atrás y volveremos a hacer el mismo tipo de cosas. Daremos click en restar, y ahora se resta el otro elemento a los elementos NUS. Perdón, esto es importante cuando se trata de lo que un artículo es más alto en el punto del eje. Por lo que la primera vez alrededor fue el, el rectángulo. Esta vez es un círculo. Entonces así es básicamente como usas la resta. De nuevo, no voy a entrar en crear un montón de formas diferentes para esto. Solo te estoy mostrando los conceptos básicos de cómo funciona esto. Por lo que una vez más, para asegurarme de que he seleccionado y ahora tenemos la herramienta de intersección. Y si hacemos click en eso, ya verás ahora solo tenemos esa parte ahí. Por lo que se intersecta ambos artículos juntos. Son una especie de punto de contacto. Y luego si solo vuelvo a hacer clic en eso y verás cómo funciona eso. Entonces otra vez, no el más utilizable para este en particular, pero muy útil si estás tratando combinar ciertos elementos juntos en una forma particular. Y el último que tenemos va a ser excluir solapamiento. Y se puede ver ahora un tipo de cosa similar a restar esta parte donde se cruza ahora es completamente transparente. Entonces sólo para probarlo un poco, así que si pongo algo debajo de eso una vez más, si solo dibujo un círculo, le daré un color de relleno. Si muevo este artículo, verás que se mostrará. Si en realidad sólo voy a hacer esto. Voy a llevar esto al frente. Y ya verás ahora mientras lo repaso, debajo de verdad se mostrará a través porque esto está completamente claro ahora. Y así es básicamente como utilizarías estas herramientas. Entonces esa es la herramienta de superposición de exclusión. Ahora de nuevo, este no es un curso de diseño gráfico, así que no voy a garantizar todos los casos de uso posibles para ello, pero ojalá pueda ver qué tan útil podría ser esto si estás tratando de crear formas muy específicas que tal vez no sean posibles tan fácilmente usando solo las herramientas de forma por su cuenta. Entonces esa es una visión básica de cómo usar este tipo de herramientas de intersección y cómo restar y agregar diferentes formas juntas para hacer diferentes formas. 15. cuadrícula de repetición: De acuerdo, Así que siguiente Oprah y sólo usar formas aleatorias corriendo hacia adentro para crear algo que se parezca más a una vaina o a un sitio web. Entonces ahora vamos a estar viendo esta opción aquí, que es Repetir Grid. Entonces lo que vamos a hacer es crear una sección de tarjetas o un artículo de tarjeta. Y luego vamos a usar la cuadrícula de repetición para repetir el ítem en lugar de simplemente duplicar el final. Por lo que podríamos simplemente duplicarlo manteniendo presionada Alt y luego arrastrando. Pero también puedes usar la cuadrícula de repetición, que hace la vida mucho más fácil y solo hace que sea más fácil para una especie de espaciar las cosas más fácil. Entonces, empecemos por tener un ángulo recto. Y acabaremos de caer libre, libre en esto por el momento ya que algo así me parece bien o conseguir es algo así como en medio de la pantalla. Simplemente redondearemos los bordes un poquito solo por el frontón puro de la misma. Nos desharemos de la frontera y le daremos un tal vez un gris ligeramente claro. Y entonces creo que vamos a hacer desde ahí es pamps solo cerrará esto en su lugar. Ahora empezaremos a construir cosas encima. Entonces, de nuevo, esto ahora está completamente en su lugar. No se moverá. Puedo empezar a construir cosas encima sobre él no tipo de interactuar con los otros artículos que me pongo hasta que lo permita. Entonces lo que vamos a hacer es tirar una imagen ahora. Entonces vamos a cambiar el control I. Sólo vamos a elegir una imagen aleatoria, que es ésta de aquí, sólo va a cambiar el tamaño un poco, sólo para que tipo de encaje dentro de nuestra sección de códigos y vamos a simplemente acercar siempre tan ligeramente también. Entonces sí, para que podamos ver mejor lo que estamos haciendo. Entonces vamos a ver hasta dónde está eso. Entonces eso son 13 píxeles en la parte superior, y actualmente son 15, lo siento, 16 de lado. Por lo que necesitamos solo ponerle un poco más y ponernos más centrales. Por lo que eso saldría ahora no tiene que ser pixel perfecto sólo por el momento. Y solo quizá consigamos un título y cabello también. Entonces haz click en el icono de la Línea de Texto, podríamos haber hecho clic en la letra T también. Y nos aseguraremos de que puedan ver aquí es haciéndome saber por esta línea que se alinea correctamente a este borde. Entonces vamos a hacer eso. Y sólo llamaremos a esta fotografía. Y sólo vamos a alejarnos por un momento. Está bien, eso está todo bien. Volveremos a mi herramienta de selección. En realidad, antes de hacerlo eso hará que este título sea un poco más pequeño. Hagamos algo así como 30 probablemente sería acerca de lo correcto. Lo haremos un poco más audaz también sólo porque ¿por qué no? De acuerdo, así que también vamos a poner un párrafo aquí también. Entonces de nuevo, nos aseguraremos de que todo esto esté alineado correctamente. Entonces solo vamos a sacar esto aquí y nos pondremos, este es un hechizo de ícono de párrafo de su cosa. Y lo haremos mucho más pequeño por supuesto. Entonces en lugar de audaz tendrá eso como regular y lo haremos algo así como 18. Está bien. Y luego a partir de ahí solo agregaremos una cosa más. Acabamos de inventar esto un poco así que es un poco lo siento, un poco más cerca del título. De acuerdo, eso está bien por ahora. Solo agreguemos un botón también. Por lo que solo usaremos nuestra herramienta de rectángulo. Y vamos a tener esto hacia abajo. Y verás que la línea ha aparecido una vez más, sólo para hacerme saber que ahora esto se está alineando correctamente al borde de la imagen. Y entonces sólo sacaremos esto. Algo así. No tendremos frontera. Y de qué color debemos solo tener un perro. Eso está bien. Y tal vez apenas un poco más alto. Y entonces realmente bloqueará ese vínculo en su lugar. El motivo de estar abierto para ahora poner algo de texto sobre la parte superior del mismo. Entonces sólo para que pueda maniobrar más fácil, lo mejor es hacerlo de esa manera. Y luego simplemente agregamos, tal vez sí aprenderíamos más. Y también asegúrate de que realmente lo podamos ver también. Entonces en lugar de estar oscuro o tenerlo como luz, y lo haremos mucho más pequeño. Entonces hagamos algo así como 16 píxeles, tal vez más pequeños que eso. Ok, y luego nos metemos en el sensor. De acuerdo, así que creamos una especie de sección de cartas muy básica. Ahora de nuevo, nuestro tipo de fondos todos encerrados juntos. Lo que podríamos hacer porque queremos tenerlo se llama sección todo como una cosa. Si empezamos a mover esto, ya verás ahora es un poco más que mover partes aleatorias del mismo alrededor y no al mismo tiempo. Así que sólo asegúrate de que he desbloqueado. Y entonces lo que podemos hacer ahora es seleccionar todo y asegurarnos de que todo esté seleccionado juntos. Y luego si haces click en Control G o Comando G, Esto ahora es un ítems agrupados o todos estos ítems por completo. Y se puede ver en mi panel de capas aquí, todos estos están dentro de su propia carpeta, que comúnmente se llama Grupo 1. Obviamente querer hacer es renombrar esa sección meramente de tarjeta. Pero de nuevo, lo que tocaremos más en eso, llegamos a nuestro panel Capas un poco más adelante. Entonces, ¿cómo duplicamos esto? Lo que obviamente querrías hoy más que tipo de lector. Y esto otra vez, es básicamente copiar lo que tienes aquí. Y tal vez simplemente cambie el texto y cambie la imagen. Entonces, ¿y si quisiéramos duplicar esto? No querrías hacerlo. Por lo general, la sección de tarjetas viene por lo menos, generalmente vienen en tres con mayor frecuencia. Entonces lo que querrías hacer tal vez es duplicar este único resumen del mismo. Entonces la forma en que podrías hacer eso es manteniendo presionada Alt y luego vuelve a seleccionar el ítem y luego soltarlo, y tendrá un duplicado de lo que tienes que entonces puedes mover esto, tienes que querer. Esa es una forma perfectamente razonable de hacerlo. Entonces podrías volver a hacer eso con este. Y luego para los tres, lo que podrías hacer es quizá agruparlos a todos si quisieras. Para que pudiéramos crear todo el asunto. O alternativamente, podrías usar algo llamado Repetir Grid. Entonces volvamos sólo por un momento. Asegúrate de que todavía seleccionamos. Y ya ves, esta opción ahora tiene tipo de sugerido para esta cosa exacta acabo de facturar que es especie de mostrarte una sección de tarjetas aquí. Y en realidad vamos a hacer exactamente lo que está diciendo. Entonces si hacemos clic en Repetir cuadrícula, ya ves ahora tenemos algún nuevo tipo de iconos han aparecido. Y si ahora arrastramos esto, verás que va a crear automáticamente duplicados de lo que tenemos. Y en realidad seguirá yendo y yendo e yendo hasta donde hagas eso. Entonces, aunque tengas diferentes artículos en él, lo repetiremos un poco y luego comenzaremos desde el principio. Pero de nuevo, puedes hacerlo tanto a un lado como a abajo también. Entonces si tienes algún tipo de grilla sí, repitiendo, puedes usar esta herramienta y es super CB. Entonces, y la razón principal por la que esto es algo más útil que decir, um, solo por duplicar, puedes alterar el espaciado mucho más fácil usando la cuadrícula. Si lo hicieras duplicando los individuales, no es tan fácil. tanto que el uso de la cuadrícula, puedes conseguir estos espaciados exactamente como quieres decir esto es algo realmente útil cuando se trata de diseño web, porque la mayoría de los sitios web algún punto van a tener algunos tipo de sección de tarjeta. Es extremadamente común. Y esta es una forma realmente útil de conseguir el espaciado entre todo exactamente igual,en todo exactamente igual, lugar de tener que aplicar manualmente el espaciado a cada uno. Esto lo hace automáticamente, por lo que sobrepasa, pacífico. Y entonces digamos que llegaste a él lugar si quieres solo UN grupo que puedes hacer, tu propio grupo, y luego te pones, y obviamente hay un atajo de teclado para eso también. Nuevamente, justo nuestra feria que vuelva a la página de opciones de teclado Shoko que he incluido en los materiales del curso. De nuevo, di que ojalá tenga sentido cómo se hace esto. Obviamente si fuiste a empezar a cambiar diferente artículo G caramelo. Entonces si quieres reemplazar esa energía podría hacer clic con el botón derecho y hacer clic en Reemplazar imagen y luego solo puedes elegir la que quieras. Y entonces esa es una forma mucho más rápida de hacerlo en lugar de simplemente tener que crear uno y luego crear otro guerrero. Lo que quieres hacer es simplemente duplicarlos EVA, y la mejor y más fácil forma de controlar el espaciado también es mediante el uso de la cuadrícula de repetición. 16. Transformaciones en 3D: De acuerdo, Entonces en este video se habla de transformaciones en transformaciones 3D. Entonces un par de cosas antes de meternos en las cosas 3D, Hay un par de cosas que creo que quiero solo mencionar una vez más, puede que haya mencionado, mencionado esto brevemente antes, pero en realidad se pueden rotar elementos no hay artículos también. Entonces, solo asegurémonos de que todo esto esté seleccionado. Y de manera muy sencilla, si pasas por encima de la esquina, oye, no puedes simplemente rotar elementos o elementos como quieras. Y de nuevo, esto es súper fácil y diré que esto dependerá del tipo de diseño que tengas. Si quieres hacer este tipo de cosas o no. Si quieres tipo de chasquear en grados, puedes galopar en especie de bloques de 15 si miras a este de aquí, así que solo son 60, el siguiente será 75 y así sucesivamente. Y es solo que esto solo un poco solo te ayuda a obtener un ángulo que es un poco utilizable. Entonces eso es una especie de solo elementos giratorios o artículos. Se puede hacer esto por cualquier cosa con el día siguiente, claro. Y también tipo de invertir imágenes a. Todavía no lo hemos mencionado. Entonces digamos que tienes una imagen y que quieres un poco invertir, digamos que el tipo está por el lado izquierdo, puedes hacer eso. Entonces tienes estas dos opciones aquí. Entonces si hacemos click en este de aquí, dirá voltear horizontal y me voy invertir para que los chicos pasen al lado izquierdo. Podrías hacer si todo el elemento, si quisieras. Obviamente, ya que tenemos textos que se verán muy extraños, pero podrías hacerlo también puedes hacerlo verticalmente también. Para que solo se lo dijera al revés. Por lo que algunas transformaciones muy básicas ahí. Pero ahora vamos a ver la transformación 3D. Entonces lo que vamos a hacer es darle a esta tarjeta en particular un poco más de vida a ella. Y si estás creando un sitio web donde quieres tener especie de efectos 3D. Así es tal vez como lo harías. Por lo que nos aseguraremos de que esté seleccionado. Y luego haremos clic en este icono aquí para transformación 3D o es control y cola comando nc si estás en un Mac. Y ahora tenemos este nuevo icono como emparejamiento, lo que nos permitirá controlar esto en el eje x e y. Entonces si controlas ya sea a la izquierda o a la derecha va a moverlo para que siempre esté acercando el borde a la pantalla. Entonces lo está acercando. En el eje X o Y. Se puede hacer esto para izquierda y derecha. Se puede hacer abierto también, o por supuesto, una mezcla de los dos. Y esto básicamente te está dando una especie de efecto 3D, que de nuevo ves en muchos sitios web diferentes. Y es un efecto realmente bonito que es muy, muy utilizable. Y también tienes el beneficio de alejarte más o más cerca de la pantalla en el punto de acceso. Entonces de nuevo, dependiendo lo que tengas como parte de tu diseño, esto luego se puede combinar con todos ellos. Podrías hacerlo por cada palabra juntos si quisieras. Digamos que lo recuperamos como era antes de que empezara a meterme. Si salgo de esto, solo recuerda si quiero hacerlo todo al mismo tiempo que puedes hacer es si seleccionas todos estos juntos, Intenta eso de nuevo. Haga clic en la transformación 3D, y ahora si se lo hicimos a uno, lo hará. Absolutamente todos ellos, que es probablemente si estás usando esto para una sección col, es probablemente la forma en que lo harías de todos modos. Entonces eso ojalá tenga sentido. Y de nuevo, no tenías que usarlo solo para causa solo las imágenes que puedes hacer si un texto también. Entonces todo eso es súper, súper útil y es una forma realmente bonita de darle algún tipo de vida a tus diseños. Entonces esa es una visión general básica de cómo puedes usar la transformación 3D dentro de tus diseños. 17. Capas: De acuerdo, así que ahora por fin empecemos a hablar de nuestro panel de capas. Para que puedas acceder al panel de capas con solo hacer clic aquí abajo en el icono Capas. O simplemente puedes usar un atajo de teclado, que es Control e y. y ahora lo sacaremos. Y el panel es básicamente solo una colección de todos los artículos que actualmente tienes en tu Canvas seleccionado. en realidad puedas renombrar estos lo que quieras. Por lo que solo puedes llamar a esa imagen. O de nuevo, podrías tener eso como tal vez aprender más textos. Dependen un poco de lo que quieras cosas geniales. Y es una buena idea, acostumbrarse un poco a nombrar cosas. Porque si quieres volver atrás o encontrar algo es cuando mucho más fácil si realmente te has ido y te has tomado el esfuerzo de llamar realmente a las cosas lo que significaban ser. Ahora en realidad todos he desagrupado estos artículos sólo por ahora, razón por la que tenemos tantos. Pero si solo tal vez agrupamos todos estos elementos juntos, así que haremos clic con el botón derecho y luego solo iremos en grupo. Si mantienes un ojo en este panel aquí, verás que ahora se convierte en una carpeta. Por lo que podrías simplemente cambiar el nombre de la carpeta como tarjeta. Y luego todas las cosas que hay dentro que estarán dentro de la carpeta de tarjetas. Por lo general, siempre que estés creando diseños, probablemente te encuentres teniendo bastantes carpetas diferentes. Generalmente no tienes todo desagrupado. Muy a menudo se tiene todo agrupado, a veces en forma de componente, que va a ser el siguiente video. Pero de nuevo, esto es solo una visión general básica de cómo puedes especie de uso y cómo referir nuevo a tu panel de capas. Entonces lo que también puedes hacer con este panel de capas es controlar el orden en el que aparecen las cosas. Entonces en realidad me voy a deshacer de dos de estos, sólo para que sólo digamos que tenemos uno y va a ser más fácil de seguir. Por lo que se puede ver que el elemento probablemente en la parte posterior o lo que debería ser la parte posterior es nuestro tipo de nuestro rectángulo principal. Entonces le enviaremos eso a la parte de atrás y lo enviaremos derecho a la parte de atrás en realidad. Pero digamos que queríamos tener eso frente a todo. De nuevo, probablemente no querrías hacer eso. Pero sólo para que te pueda mostrar, si mueves este rectángulo de la posición de Boston aquí e inmediatamente justo a la cima. Ya verás Ya está sobre Todo es tú ahora. Ya ves cualquier cosa que tengas aquí. Y si lo movemos hacia abajo uno a la vez, se puede ver que cada uno de estos ítems va a empezar a aparecer lentamente a medida que lo hacemos. Entonces ese es el rectángulo para el botón. Y luego decir otra vez, esto es básicamente una forma en que puedes controlar todos los diferentes elementos dentro de tu panel de capas. Obviamente, también puedes usar cosas como bolsas de centavo y hacia atrás o llevar al frente. Pero también puedes controlar el mismo tipo de cosas usando nuestro panel Capas. También tienes una opción para ocultar elementos aquí también. Para que puedas ver esta es la imagen que tenemos. Tienes la ley es que puedes bloquearla del panel también, por lo que no van a seguir adelante, lochia y apagado para que puedas esconderla también, cosa que sí mencionamos brevemente antes. También puedes marcar si Exportar también. Entonces esa es una visión general básica del panel de capas. Y de nuevo, quieres intentar nombrar cosas que tengan sentido. Entonces otra vez, en lugar de solo tener una, una carpeta que diga Grupo 5, solo quieres llamar a esto tal vez, tal vez bloque de cartas, algo así. Tan seguro que tiene sentido todo el cerebro. Para que sepas dónde encontrar ciertos elementos. Porque en realidad una vez que tengas una página web de plantilla diseñada va a ser mucho aquí. Y cuanto más puedas, más fácilmente podrás navegar por tu camino mejor. De acuerdo, Así como una visión general básica de cómo puedes usar tu panel de capas. 18. Recursos y componentes: De acuerdo, Entonces a continuación vamos a hablar de activos documentales. Entonces si se lo diste a tu pestaña de biblioteca aquí, y luego ella, probablemente te enfrentarás a estas páginas. Entonces bibliotecas, básicamente donde se puede usar múltiples elementos diferentes, especie de multiplataforma y proyectos cruzados. Entonces si quieres tener una tienda de diferentes tipos de iconos, tal vez tan diferentes. Por lo que las secciones están prefabricadas o kits de interfaz incluso puedes tener eso dentro de tu biblioteca que luego puedes reutilizar. Pero en este video, voy a hablar de activos documentales. Entonces aquí es donde tenemos refrigeradores, estilos de personajes, que básicamente es toda topografía, agregando componentes y comiendo cualquier campaña que hayas creado, que entraremos en tan solo un momento. Y luego videos de los que en realidad ya hablamos. Entonces, solo empecemos con los colores primero y en realidad solo hagamos más oscuro este fondo . Ahora por una razón particular. Pero cada vez que comienzas a hacer un sitio web, generalmente quieres tener un esquema de color en mente. Y digamos que quieres algo así como referirnos a eso y decir que lo que podríamos hacer es simplemente crear nuestra propia paleta de colores es o que tengan cajas de AFIB usarán Repetir Grid. Y sólo tendremos tal vez tres o cuatro de estos. Dependerá de cuántos colores estés usando para proyecto. Lo que podríamos hacer entonces es simplemente desagrupar esa cuadrícula y le daré a cada caja un color diferente. Por lo que tendrá de negro a estrellas y habrá leído también. De nuevo, solo estoy, solo estoy tirando de colores al azar es azul. Esta no es la mejor paleta de colores. Entonces digamos que esa es nuestra paleta de colores. Lo que podrías hacer es tener siempre estos colores disponibles y fácil acceso si destacamos aquí toda esta ley, entramos en colores y luego pinchamos en el icono más ahora se crea nuestra paleta de colores dentro de nuestro Documento Activos. Y significa que en realidad ahora podemos hacer clic en estos para afectar a diferentes elementos para decir, digamos, sólo hagamos nuestro rumbo aquí. En lugar de ser oscuro. Vamos a tenerlo. La luz hará el mismo párrafo. Entonces eso es ahora ambas luces también harán nuestro botón. Simplemente le daremos una frontera para que podamos decirlo en América, en realidad vamos a cambiar la forma en que se ve esto. Entonces digamos con un fondo en lugar de ser como un gris claro, que actualmente es. Si tenemos activos de documentos abiertos y llamo a un panel, ahora podemos cambiar esto a cualquier cosa que tengamos con bastante facilidad al solo seleccionar uno que tengamos aquí dentro. Entonces si quisiéramos tenerlo como agujero oscuro y que sea azul, podrías hacer eso. Entonces esa es solo una forma en que puedes usar diferentes colores. No tienes que hacerlo de esa manera. También se podría decir simplemente llamarlo como una muestra. Por lo que si te metes en el color de relleno, entonces puedes simplemente hacer clic en este botón aquí y luego añadirlo como swat y los tendrás disponibles con tu recolector de color también. Conseguirlo solo depende de qué manera quieras ir para hacer eso. Y no hay manera correcta o incorrecta. Es justo lo que quieras hoy. Pero es agradable tener todos tus colores disponibles para ordenar rápidamente diferentes artículos. Como si a partir de ahí tengamos estilos de carácter. Entonces si nosotros, si solo bloqueamos eso para Maman, Y entonces si seleccionamos y este boxeador se convierte en plus, verás que se dibuja automáticamente en granjas más eferentes que actualmente estamos usando dentro de este elemento actual. Y estos ahora están todos disponibles para usar si usamos, si empezamos a crear texto en otro lugar. Entonces digamos que lanzamos aquí una opción de texto. Y cuando digo que empezamos a escribir algo, y no necesariamente va a ser la fuente exacta que queremos. Entonces digamos, digamos por ejemplo, incumplidos con otra cosa, digamos algo como PET serif. Pero queríamos que fuera Proxima Nova, podríamos hacer eso. Y todo lo que tendríamos que hacer es dar click en el elemento de texto que tenemos, y luego dar click en Proxima Nova y automáticamente lo cambiará a lo que tengas. Ahora por defecto, esto va a una versión oscura. Por lo que obviamente podrías tener una versión oscura y la luz y que aparecerá en enero para la arcilla si estás creando como una guía de estilo antes de empezar, Eso es probablemente lo que haces. Probablemente tengas por las versiones de luz UV y oscuras por aquí, te tiene así que tus encabezados así como esa es probablemente la forma en que lo harías. almacenarías todos dentro de tus estilos de personaje. Tan solo para que cuando estés diseñando, podrás editar rápidamente ciertos elementos y tipo de click en la Fama exacta que quieras usar para cualquier palma en particular. Componentes. Ligeramente diferente. Entonces hablemos de quejosos o de campaña. Es básicamente una forma en que puedes reutilizar un artículo a lo largo de toda tu página web. Y básicamente puedes copiar una instancia de un Ariba. Por lo que esto es un poco similar a las retículas repetidas donde si tipo de también ganaste un OTC en todas ellas. Entonces lo que vamos a hacer con este seleccionado, vamos a hacer clic derecho y hacer clic en Hacer componentes. Por lo que también puedes hacer eso haciendo click en controlar k. Y ahora verás que tenemos este tipo de contorno verde. En la parte superior izquierda. Tenemos este tipo de greens con icono de diamante, lo que significa ahora que este es un componente, y dirás en nuestro panel está listado aquí, es comparar uno. Entonces simplemente le renombraremos el nombre. No se puede bloquear. Ahora, significa que si reutilizamos esto o lo duplicamos, cambie cualquier cosa en un maestro haciendo campaña en cada otro. Entonces simplemente lo duplicé haciendo clic abajo Alt u Option si estás en un Mac y como que lo dedicó de esa manera. También puedes simplemente arrastrarlo desde que estás comparando sección a la página y la tendrá ahí. Entonces mira si puedes notar la diferencia entre estos dos aquí. Entonces hay una diferencia clave, y básicamente es este ícono aquí. Por lo que sí tenemos este icono de diamante aquí. Podemos ver que no está lleno. Entonces este de aquí está lleno en el que básicamente te dice que son los componentes maestros. Eso significa cualquier cosa que cambies En esta afectará cualquier otra instancia de la misma en tu proyecto. Entonces solo para demostrar que si cambio el color de relleno en algo más entonces gris claro, verás que automáticamente lo cambió en cada otra instancia que tengamos. Entonces si tuviéramos múltiplos de estos cambiarán en cada uno de ellos. Y eso es lo mismo para cualquier elemento que tengas. Entonces eso es una especie de lo útil de los quejosos. Y esto es particularmente útil si estás creando sitios web porque generalmente estás usando colores globales, no tienes muchos colores aleatorios juntos. Generalmente, las cosas se están creando de la misma manera. Dondequiera que tú chico. Ahora bien, si quieres anularlo, puedes hacerlo siempre y cuando no estés editando al maestro de campaña, realidad no puedes cambiarlo. Entonces si fuera a cambiar éste, ejemplo, haciendo doble clic. Si lo cambio para decir tal vez un azul oscuro o azul claro, se puede ver que no está cambiando componente maestro porque ese es nuestro maestro comparando. Por lo que es una distinción importante si quieres cambiar todo en todas las diferentes instancias a lo largo de tu sitio, quieres afectar el componente maestro. Si quieres anularlo, puedes entonces simplemente seleccionar diferentes colores en el, duplicado, el que tienes. Entonces puedes cambiarlo, pero solo ten en cuenta que cualquier cosa que cambies en este, cambiaremos en todos ellos. Entonces esa es una visión básica de los componentes. Y supongo que el uso principal de las campañas será si tienes un like a navbar, obviamente tu barra de navegación y tu pie de página va a ser igual en cada página. Entonces ese es el tipo de cosas que quieres hacer como competidor y justo como ejemplo. De acuerdo, Entonces ojalá eso tenga sentido. Y en general para los kits de interfaz de usuario que también tienes, habrá componentes. Nuevamente, es simplemente super, es solo una forma súper útil de mantener todo igual y mantener tus colores globales. De acuerdo, Entonces estamos casi al punto que vamos a iniciar nuestro proyecto de clase donde realmente vamos a crear una página de aterrizaje. Pero justo antes de llegar a eso, tenemos un par de cosas más que cubrir, que sería cómo usar el prototipo y cómo usar también la opción de compartir. Entonces eso viene a continuación. 19. Prototipo: De acuerdo, Entonces a continuación vamos a hablar de nuestra pestaña de prototipos. Entonces para demostrar esto, en lugar de simplemente usar formas aleatorias, te voy a dar un vistazo a nuestro proyecto de clase. Por lo que este es básicamente un kit de interfaz de usuario gratuito que puedes descargar completamente de forma gratuita desde Adobe XD. También lo voy a proporcionar dentro de la descripción del curso también. Y te voy a mostrar cómo puedes hacer prototipos y cómo hacer que tu diseño sea interactivo. Entonces, ¿qué quiero decir con esto? Entonces si hacemos click en una morada y luego previsualizamos, simplemente saldrá como diseño por un momento. Si hacemos una vista previa de esto, puedes ver para este en particular, si hacemos clic en un botón o al menos damos la vuelta a los bosones, en realidad irá a esa página específica. Por lo que es casi como tener el sitio web creado en menor grado. Entonces si ahora mientras no me vinculé realmente a todo, así que no puedo volver al menú principal, pero lo que puedes hacer es básicamente enlazar salto sobre diferentes mesas de trabajo juntas mediante el uso del prototipo par opcional. Entonces si hacemos clic en eso ahora, realidad verás que en realidad sí tienen algunos ya establecidos. Tan abominable mostrarte cómo en realidad puedes hacer esto. Entonces esta es nuestra página de inicio que vamos a empezar a diseñar próximos videos. Y obviamente lo que querría hacer es asignar nuestro Menú Nav y tipo de vincularlos a una página específica. Por lo que el enlace About Us aquí obviamente querría ir a la balanza que paga las historias. Vamos a la página de las tiendas por aquí y así sucesivamente. Entonces básicamente no se puede hacer esto en realidad con el día siguiente. Puedes enlazar páginas web y tipo de dar a tus clientes una idea de cómo terminé sitio web podría realmente lucir y sentir al gris. Hay limitaciones en cuanto a cómo puedes tener animaciones. No es realmente posible, el mismo grado es usar algo así como reproductor web por ejemplo. Pero algún tipo de sensación básica de cómo sitio web vamos a tipo de aspecto y tipo de conexión juntos. Por lo que ahora hizo clic en él. Lo que voy a hacer es solo dar click en esta mano de icono de navegación, parece idea que se pueden ver todas estas líneas aleatorias apareciendo. Entonces esto podría parecer un poco opresivo al principio, pero en realidad es muy, muy simple. Entonces como mencioné antes, si solo hago zoom por un momento, este par de lingo obviamente va a la página Acerca de Nosotros. Y lo que han hecho aquí está ligado la cantidad fue tabulador allá. Y se puede ver que la línea azul va hasta la página Acerca de Nosotros. Eso es todo lo que está haciendo. Esa línea azul básicamente te está diciendo que cuando hagas click en ese enlace, te llevará a través de esta página. Y todas estas otras que tenemos aquí están enlazando dos páginas diferentes. Entonces la siguiente que creo fue lo que era, así que fueron nuestras historias dicen que uno se puede ver es saltar por encima éste de aquí y luego ir a la página de las tiendas. Entonces eso es básicamente lo que está pasando. Entonces un super simple, si hago clic en este botón que tengo aquí, por ejemplo, hago doble clic, entonces verás esta opción para empezar a arrastrar esto hacia fuera. Entonces voy a retroceder un poco y volver a hacer eso. Entonces voy a hacer click en eso y lo voy a arrastrar a una página de mi elección. Entonces digamos que queríamos ir a esta página aquí y luego dejarla caer. Ya verás que esa línea azul se vincula a esta página. Entonces si ahora previsualizo y hago clic y hago clic en este botón aquí, ya verás que va a hacer eso. Entonces lo destacaré y ahora se fue, realidad vamos a previsualizar la página. Y si bajamos a ese botón que vinculé , creo que fue éste. Ahora verás que va a esa página a la que la vinculé. Entonces es realmente así de simple. Y si bien parece un poco complicado, pero siempre yendo a todas partes, solo recuerda, todo lo que estás haciendo es vincular un cierto botón o una cierta sección a otra cosa dentro de una mesa de trabajo diferente. Es realmente así de simple. Entonces esto es super, súper fácil. Por lo que también sí obtienes una opción cómo actúa cuando vas a esa página también. Para que puedas tener diferentes opciones de gatillo. Se puede tener, mientras que una transición también. Para que puedas tener una especie de facilidad de entrada o facilidad de salida. Aquí hay un montón de opciones diferentes que puedes tener cualquier tipo de rebote también. Por lo que el más común probablemente sería una especie de facilidad de entrada y facilidad de salida. Y puedes elegir tu duración por cómo se ve. Y creo que ya tienen algunos de estos aquí puestos de todos modos. Entonces si sólo rezamos eso otra vez, sólo el Sheri sólo seleccionará éste. Y ya veremos cuando le hagamos click, se desvanece en el siguiente. Entonces eso es básicamente algo que ellos configuran para hacer eso, vale, Así que ojalá todo eso tenga sentido. De nuevo, lo principal a recordar es que todo lo que estás haciendo, aunque parezca un poco complicado cuando siempre has ido a todas partes, todo lo que realmente estás haciendo es vincularte de uno aeropuerto a otro. Y obviamente cuando hagas una vista previa por aquí, te dará una idea de qué mucho al hacer clic a través de una página diferente, también tienes diferentes opciones de cómo estas cosas realmente tipo de efecto. Entonces esta línea que teníamos saliendo seleccionada, se puede ver que tenemos una transición y se disolvió un poco en ella. También puedes tener su SlideUp. Entonces vamos a previsualizar eso ahora solo para mostrarte cómo funciona eso si vuelvo a hacer eso. Entonces este de aquí, ves nuestros deslizamientos hacia arriba. Elegimos un tipo diferente de animación para hacer eso. Entonces de nuevo, eso es algo así, no es tan importante realmente, pero solo te da algo de ruido afecta el tipo de cambio sobre las diferentes mesas de trabajo. De acuerdo, así que ojalá todo eso tenga sentido. Y en los próximos videos, vamos a estar iniciando un proyecto de clase muy pronto. Sólo hay una cosa más que quiero cubrir antes de que empecemos a hacer eso. Y ese es el botón Compartir que tenemos aquí donde puedes empezar a compartir tus diseños con tus clientes. 20. Share Projects en la que se comparta proyectos: De acuerdo, entonces cuando fui a la última parte antes de empezar a crear una de estas páginas. Entonces justo antes de que hagamos eso, solo quiero mostrarte cómo puedes compartir proyectos con tus clientes. Y esto es super, súper importante y es algo que uso todo el tiempo porque es la mejor manera de hacer esto si eres desarrollador de slash de diseñador. Y también desarrollas tus sitios web, tal vez en algo como Webflow. Tenerte creando tu sitio web está en un software de diseño como XD primero es súper importante y es simplemente mucho más fácil cambiar las cosas y obtener comentarios dentro del día siguiente. Entonces por eso tenemos esta opción Compartir por aquí. Entonces lo que puedes hacer, básicamente, puedes crear una URL para cualquiera de las diferentes opciones que tienes. Y puedes enviar esto a tus clientes y luego me puedes dar retroalimentación sobre el diseño que lo creas. Entonces solo para mostrarte cómo funciona eso, si tienes algunas opciones diferentes, tienes revisión de diseño, que es la que estarás usando casi todo el tiempo. También tienes una opción de desarrollo. Entonces si quieres dar a tus desarrolladores, desarrollador y quieres simplemente transportar algunos de los CSS a ellos. Eso se puede hacer. Ya sea que utilicen o no eso. No sé por experiencia que a menudo, pero sin eso ves ahí algo? Personalmente, hago todos mis sitios web en Webflow de todos modos, así que tipo de, realmente no necesito la opción. La opción de presentación es un poco como una versión a pantalla completa donde no hay tipo de opciones de retroalimentación de diseño y personalizar, puedes tipo de cliente, quieren que pongan monedas o no. Pero la principal que vas a estar usando es la revisión de diseño. Por lo que si hacemos click en eso, entonces puedes elegir quién tiene acceso a este enlace. Entonces si tiene a alguien con el enlace, pueden acceder a él. O también se puede especificar ciertamente ciertas personas invitadas. Entonces si tienes especie de C suite de PP1, manda esto a, tú, solo puedes enviarlo a unas cuantas personas selectas y solo ellas tendrán acceso a ella. Y entonces lo que vamos a hacer es simplemente mantenerlo cualquiera con el enlace. Y vamos a actualizar el enlace. Y luego una vez que eso haya terminado de cargarse, una vez que le demos click, nos va a llevar a través de una URL. Web. Los clientes pueden empezar a dejar comentarios. Diga que este es el enlace que ahora se está abriendo. Y verás básicamente permite retroalimentación. Entonces este es el super CB. Entonces, y siempre lo hago generalmente. Yo muy raramente solo empiezo a desarrollarme de inmediato, obteniendo retroalimentación sobre tu diseño. Y lo realmente genial de esto es esta opción, ya sea heno, que es colocar un alfiler para que puedan hacer comentarios, decir lo que quieran. No me gusta. Te pueden decir que no me gusta. O si les gusta, te pueden decir que sí. Pero también CP para que puedan hacer un comentario o también pueden colocar los alfileres. Yo sólo escribiría algo. Entonces si pongo si no puedo deletrear Así mis marcas delante de mi cara. Para que puedan escribir este comentario, que no es muy útil. Y luego también pueden colocar un alfiler para decirte lo que en realidad no les gusta. Entonces digamos esto, el texto y la persona no está del todo centralizado, que no lo es. Pueden colocarlo ahí, decir que no me gustó esto y someterlo. Y luego cuando entres en este documento, vas a ver lo que han dicho, que genial. Se libera para un ALS. Clientes. De inmediato te diré cuál es el problema. Si tienen uno, pueden les puedes pedir que lean o escriban tanto detalle como sea posible. No hagas que diga cosas como esta, cual no es útil, otra vez para explicar por qué no les gusta algo. Y por eso siempre le digo a mis clientes, sean brutales. Si no te gusta algo, dímelo exactamente. El problema es, dime cómo crees que se puede arreglar si tienes una idea en la cabeza. Y simplemente generalmente lo que no les guste, es realmente útil tener retroalimentación inmediata sobre cualquier cosa. Y puedes colocar tantos alfileres como quieras donde quieras. Escribe un comentario que se base en eso. Obviamente, si tienes mucha gente viendo esto, todos pueden agregar sus propios comentarios. Tendrás que desplazarte hacia atrás a través de toda una lista de comentarios en entrelazamiento llegar a través de Troy. Y por eso el incentivo para muchas personas, porque tienes cinco o seis personas todas dejando comentarios al mismo tiempo. No todos van a estar de acuerdo entre sí y puede ser una pesadilla. Por lo que intentaré y limitaré a tal vez una o dos personas para darte retroalimentación. Apenas las personas que realmente importan whi, mientras que los tomadores de decisiones, por eso en general trato de sumarme plenamente hacia todos modos. Digamos que eso es un resumen básico de cómo puedes compartir tu trabajo con tu cliente. De nuevo, creo que esta es quizás mi parte favorita de x día cuando se trata de, ya sabes, lo útil que es para mí y para mi negocio. De antemano, tenías que haber enviado al diseñador tampoco. Y tendrías que entonces simplemente charlar con ellos y que tratar de describirte algo. Y como no son diseñadores ni desarrolladores,no saben qué son las cosas siempre porque no saben qué son las cosas no necesariamente sabían esto es un nav bar o que siempre sé que esta es la acción de Harris. Por lo que esta opción para simplemente poner alfileres en las cosas. Y también se puede tipo de gente también. Para que puedas mencionar y pueblos, si tienes múltiples diseñadores, ellos pueden decir, te pueden ordenar de gestionarte en el comentario también. Pero esto es un CPC, estos se presentarán y esto será un salvavidas para hacer las cosas rápidamente cuando empieces presentar tu camino a tus clientes. 21. Introducción al proyecto de clase: De acuerdo, tan bien hecho por llegar tan lejos. Ojalá todo con COVID hasta este punto tipo de tenga sentido. Nuevamente, vuelve a ver estos videos tanto como necesites para un tipo de llegar a agarrar todo, detenerse y lugares. Asegúrate de practicar algunas de estas cosas de las que realmente estamos hablando en el curso. Porque este siguiente conjunto de videos es donde vamos a empezar a construir página de aterrizaje de un popular kit de interfaz de usuario y puedes descargar de forma gratuita dentro de Adobe XD. Entonces lo que vamos a hacer para este proyecto de clase es básicamente crear la versión de escritorio de un sitio web. Por lo que este kit de interfaz de usuario en realidad tiene todos los diferentes tamaños de pantalla ahí. Ah, se desarrolla. Pero lo que vas a estar creando es la vista de escritorio. Obviamente, si quieres entonces crear la tableta y la pequeña firma para ti también, puedes hacerlo. Y luego si quieres compartirlo con la clase en Skillshare, eso sería genial. Un poco muéstranos lo que has hecho. Alternativamente, si no quieres seguir con lo que vamos a hacer para la siguiente parte, entonces puedes empezar a crear tal vez tu propio tipo de diseño web. Y si te gustaría compartir eso con la clase para ahora ser también se genial. De acuerdo, Así que lo siguiente es en un proyecto de clase, y comenzaremos con el primer video donde damos una visión general de la página de aterrizaje que vamos a diseñar. 22. Descripción del proyecto de clase: De acuerdo, Así que ahora nos estamos acercando al punto en el que estamos listos para iniciar nuestro proyecto de clase, que es donde lo que vas a hacer es recrear la página principal de este kit de UI o puedes descargarlo completamente gratis dentro de XD. Ahora, también te voy a proporcionar una especie de mi versión de esto. En realidad tengo una especie de punto de partida para todos ustedes listos para ir, sólo hacer la vida un poco más fácil. Pero justo antes de que nos pongamos a hacerlas, sólo quiero mostrarles cómo esto ha sido una especie de acostado. Entonces de nuevo, todo esto es de nivel gratis al día siguiente, pero se puede ver que tenemos bastante pasando. Entonces lo que tenemos es una versión de escritorio, tenemos una versión de tablet, y también tenemos una versión móvil. Generalmente, si estás creando un sitio web o estás presentando esto a un cliente, ellos van a querer ver diferentes versiones. No siempre hago una versión de tablet si soy honesto, no siempre. El motivo de ser es que mucha de las veces lo que estás haciendo es derrumbar columnas. Entonces si te muestro la página de inicio en escritorio, puedes ver aquí. Ahora tenemos especie de cuatro columnas. Ahí hay tres columnas. En tablet es extremadamente probable que todo lo que quieres hacer es quizás tener el tipo de dos seguidos. Entonces tienes una especie de dos ahí hasta debajo. Esto probablemente bajaría a una edad. Si simplemente alejamos el zoom y echamos un vistazo a lo que han hecho, parece que eso es exactamente lo que han hecho. Entonces tienen una especie de dos columnas, ponen dos filas esta vez. Por lo que a veces no necesariamente vale la pena hacer tabletas también. Depende de ti si tienes un diseño muy inusual que va a ser la mitad del alterado. Específicamente por cada dispositivo que pueda haber haría esto, pero debo confesar, no siempre hago tablet personalmente, pero eso es sólo una cosa personal para mí. Entonces eso depende de ti. Pero definitivamente siempre hago una versión móvil. Entonces sólo para mostrarte un poco más de casas se habían dispuesto, obviamente, tienes todas las páginas diferentes aquí y debería haber etiquetado qué parte es cuál. Aquí tenemos el kit de UI, que básicamente es solo toda la tipografía se ha utilizado. Una suma de todos los IVs de diferentes tamaño también. Entonces esto es cp es ¿qué quieres? Ella como que consiguió tu diseño principal en su lugar y tú sabes y decidiste con qué estás trabajando. No necesariamente siempre empezarías así. Y esto es algo que haces una vez que un poco tienes tu diseño en su lugar. También tienen aquí una biblioteca de componentes también. Entonces esto es particularmente útil si, digamos, le presentas este trabajo a un cliente y se van un poco, bueno, no nos gusta esa parte de ahí. ¿ Podemos cambiar esto o esperar, oh, podemos poner esta parte de esta página por aquí? Tener una especie de biblioteca de componentes ordenada hace que ese proceso sea mucho más fácil. Por lo que esto es muy útil tener. Entonces echa un vistazo a esto tú mismo solo para ver cómo diseñar esto. Este es un muy, muy buen ejemplo y algo que vale la pena copiar en cuanto a cómo iniciarías un proceso de diseño tú mismo. Entonces esa es una visión básica de este proyecto y lo que vamos a hacer a continuación. Voy a estar recreando aquí esta página de inicio a fin. Te llevaré a través de cómo hacer eso. Vamos a resistir la tentación de usar cualquier componente. Entonces voy a hacer en la versión Yoga. Voy a eliminar todo esto, sólo voy a dejar aquí los activos. Algunos de los iconos. Y muchas veces lo que probablemente haremos es sólo por la velocidad copiará el texto sólo cuando Mesilla copiando un punto, voy a copiar secciones fuera de todo el punto de este curso diseñándose usted mismo. Pero creo que esta es una buena manera de empezar un, particularmente si eres principiante. De esta forma se puede sentir algo y se puede referir de nuevo al mirarlo uno al lado del otro. Entonces eso viene a continuación. Y luego una vez que lo hayamos hecho, lo que puedes hacer es decidir por tu cuenta recrear la página de inicio de la versión de tablet o en la versión móvil. Entonces una vez que hayas hecho eso, puedes compartir todo tu proyecto con una clase en Skillshare para que todos vean si hay algo que hubieras querido ABA tenga que ser realmente genial si lo hicieras. De acuerdo, entonces a continuación, vamos a empezar nuestro proyecto de clase, y vamos a empezar por crear nuestro Napa. 23. Navbar: Bienvenidos a la primera parte de nuestros proyectos de clase. Por lo que solo para reiterar, se garantiza que la primera parte de nuestro proyecto de clase sea creando o OS ambos creando la página de inicio de este kit de UI de XD. La versión que tengo para ti aquí es una versiones modificadas que me he deshecho de todos los componentes solo para quitar la tentación de engañar. Obviamente, todo el punto de esto es que vas a una especie de recrear esto sólo por una especie de mirar lo que se crian en Canadá en tu propia cosa. A lo largo de mí haciendo esto yo mismo, voy a escribir algunas de las cosas yo mismo, pero solo por velocidad, voy a copiar y pegar la capa de texto solo para que no te aburras viéndome teclear todo. Entonces los puntos de este curso es solo para mostrarte cómo estructurar las cosas, cómo usar todas las diferentes herramientas. Obviamente sólo escribir cosas no está particularmente interesado. Reloj de calentador para, durante 20 minutos. Entonces, vale, lo que tenemos que hacer antes que nada es empezar por crear nuestra barra de navegación. Por lo que ojalá tenga sentido lo que vas a utilizar nuestra herramienta de rectángulo para darnos la forma. Seguidamente garantizamos de enfermedad grave que ataca por el logo y por los enlaces de navegación. Ahora si se fueron a crear un botón también, lo primero que estábamos contando hoy, así que en realidad he preparado el lienzo apenas inicio es exactamente lo mismo que esto. También vamos a usar ese sistema de red también, sólo porque tiene sentido más que yo tratando de hacer algo inteligente o diferente. A veces solo uso un gran bloque de color. Si estás trabajando en un grado en particular como parecen ser. A lo mejor sólo para este curso, en realidad sólo lo mantendremos al mismo. Usted dice. No se pone confuso para ti. De acuerdo, así que empecemos. Primero lo primero, vamos a deshacernos de nuestras rejillas o apóstrofo de control de turnos. Y vamos a lanzar en nuestro primer rectángulo, que va a ser nuestro elemento navbar. Entonces dibujaré un rectángulo. Y en cuanto a la altura de esto, puedes copiar exactamente si quieres o puedes ser un poco tu inversión. Creo que me voy a apegar a ello con bastante rigor sólo para que se vea exactamente como debería. Se desharán de la frontera para este triángulo recto. Esa es una característica que espero que presenten donde no viene automáticamente con la pizarra porque eso es un dolor. Entonces en cuanto a las alturas, se puede ver aquí, el bosque tiene un 128, no está del todo ahí, así que solo son 95, así que solo copiaremos eso. Entonces es un 128 y automáticamente lo haré del mismo tamaño. Entonces a continuación, vamos a tener nuestro Lego en. Entonces otra vez, lo que harías si eres sionista por primera vez, va con tu opción de texto aquí y empieza a escribir si el Lego es solo por velocidad. En realidad voy a copiar lo que tenemos aquí. Digamos que nos desharemos de eso por un momento. Si solo lo estropeé, deshazte de eso. Entonces voy a copiar esto más. Entonces Comando C o Control C desde ventanas. Yo sólo voy a decir las de Windows sólo por espacio. Obviamente. Depende de lo que estés usando. Estoy usando PC para esto o Windows. Entonces pongamos esto en su lugar ahora. Entonces vamos a recuperar nuestra cuadrícula por un momento y se puede ver lo que están haciendo aquí, alineándola con el interior de esta columna de aquí. Entonces solo vamos a copiar lo que están haciendo. Entonces, asegurémonos de que tengamos lo mismo que ellos. Entonces por el momento está en el equivocado. Entonces vamos a traerlo por aquí. Y puedes ver que está encajando automáticamente en el lugar uno para acercar ligeramente. Aquí se puede ver aquí es donde también nuestros contenedores. Entonces si simplemente nos aseguramos de que se encaje en el medio, medida es la misma distancia que se puede ver allí. Eso es más o menos banco en. De acuerdo, Entonces dejaremos esta grilla en su lugar justo por el momento. De hecho voy a la primera antes de que cualquier otra cosa ahora es realmente bloquear nuestro elemento navbar en su lugar. Porque en un momento vamos a necesitar empezar a subirnos a nuestros enlaces de navegación y yo botón. Y si empezamos a tratar de sacar esos igual distancia, no queremos que esta barra de navegación se esté moviendo. Entonces lo que podemos hacer es o hacer clic derecho y clic en Bloquear o simplemente puedes usar el atajo de teclado, que es Control y L. Así que bloqueemos eso en su lugar. Y ahora cada vez que movemos algo alrededor, no estamos accidentalmente entrar en movimiento este elemento napa en cualquier lugar fuera una posición. Empecemos ahora a hacer eso. Porque creo que tenemos nuestros enlaces de navegación la misma distancia de nuestro botón que tenemos aquí. Si sostenemos Alt, verás que la distancia de esta persona es de 28. Y lo mismo es cierto también para nuestros enlaces de navegación también. Entonces solo para hacer la vida un poco más fácil, en realidad voy a hacer este botón en primer lugar. Y luego haremos los enlaces de navegación después porque este botón está forrando todos dicen hasta el final de esta pequeña columna de aquí. Entonces empecemos por hacer eso. Entonces para hacer este fondo, lo que vamos a hacer es realmente usaremos, en realidad seguimos usando una herramienta de rectángulo, pesar de que esto es un poco redondeado a los lados, básicamente vamos a redondear fuera de los bordes de nuestro rectángulo. Lo que digo, Hagamos eso. Digamos que realmente queremos que se alinee con este de aquí. Entonces empecemos por hacer eso. Entonces hicimos un bastante aproximadamente inicialmente. Y no queremos tener ningún tipo de frontera. Y lo que queremos hacer ahora, nuevo, realmente estoy presionando mucho V. Recuerda, siempre que quieras volver a tu herramienta de selección, solo tienes que dar click en la letra V y ahora deshazte de cualquier tipo de herramienta que estés usando. No teníamos esto con un color de fondo, así que queremos tenerlo como color verde, y también queremos darle un radio. Qué puedes hacer simplemente tirando así. De acuerdo, así que todo está bien como nuestro botón abajo y eso está bastante alineado. De la misma manera. Este lo es. ¿ Cuánto cuesta? Sí, vale, así que literalmente va de borde a borde en estas dos columnas de aquí, lo cual está totalmente bien. Entonces eso está todo bien. En realidad vamos a copiar y pegar este elemento de texto sólo por facilidad y velocidad. Entonces ahora vamos a hacer eso y vamos a pegar eso dentro. Y queremos conseguir esto más en el centro. Ahí vamos, muere ahora bastante spot on. Y también, lo que queremos hacer ahora es hacer de este Poston un componente. Porque vamos a estar usando eso un poco a lo largo este diseño diremos que aparecerá al menos un par de veces más aquí para el Read More, No tiene sentido recrear a una persona cada vez. También puede que solo tenga hecho el botón de un solo botón y luego tipo de simplemente cambiar el texto como en cuando lo necesite. Entonces hagámoslo. Entonces lo que haremos para hacer eso es que solo seleccionaremos ambos elementos juntos. Y si volvemos a hacer clic derecho, solo puedes usar atajos de teclado, pero solo para que lo veas más fácil, veces voy a usar el clic derecho. Entonces lo que podemos hacer ahora es hacer un componente que siempre va a ser el mismo. Y si quieres reutilizar esto y lo puedes hacer por supuesto, pero si él entonces el, entonces esto es básicamente tus componentes maestros. Entonces esto es lo que siempre será y si quieres cambiar uno, así que si digo que no lo conseguí todo, no he cambiado el texto en este. No va a afectar al maestro comparando sólo porque ese es el tipo del original. Entonces si quieres cambiar los botones más adelante, di cosas como Read More, que tienes aquí. Básicamente puedes usar lo mismo, pero luego debes a los que tienes. Entonces esa es la forma en que vamos a hacer eso. Entonces vamos a deshacernos de eso por ahora. De acuerdo, y eso es un poco esa primera parte hecha. A continuación, necesitamos poner nuestro texto encendido para el menú de navegación sobre enlaces de navegación. Yo, voy a copiar esto sólo por velocidad. Esto no está particularmente alineado más en absoluto. Por qué se ve un poco, pero lo vamos a alinear tal vez a este seto de columna interna es para ayudar con mi ACD. Entonces qué vamos a hacer entonces, y es sólo pegar eso aquí. Y de hecho, lo que haremos inicialmente es solo hablar de si usar o no tu grado salarial. Ahora bien, hay dos maneras en que podríamos acercarnos a esto. Podríamos usar Repetir Grids si hiciéramos eso y pinchamos sobre él, verás que ahora podemos especie de solo seccionar esto hacia fuera. Y entonces podemos usar el espaciado como dicen todos. El tema por supuesto es que cuando empecemos a cambiar el texto, va a alterar un poco eso. Entonces a pesar de que hemos utilizado el espaciado ahora es carnívoros QF y no va a encajar correctamente. Entonces hay un argumento para no hacer eso. Lo que podrías hacer de manera muy simple es simplemente pegar de nuevo tu texto. Y entonces solo puedes duplicar cada uno a la vez. Seguro. Están a la misma distancia cuando ella no quería. Entonces por eso creo que podemos entidad por ahora, pero se podría fácilmente facilitar la repetición grilla. Entonces el primero es bouncers. Después hemos preguntado historias en las noticias y eventos. En realidad, solo tecleemos eso como una canasta está bien. Y luego fueron nuestras historias. Hacer disculpas, seguir haciendo errores ortográficos. Tengo un micrófono masivo frente a mi cara. Puedo ver mi teclado. Y luego queriendo simplemente mover estos un poco. Y luego solo duplicaremos eso manteniendo presionada Alt y arrastrando. Y lo duplicaré. Y luego tenemos noticias y eventos. Noticias y eventos. Digamos, en realidad quiero conseguir siempre capitalizar también. Entonces, asegurémonos de que podemos hacer eso. Entonces en lugar de tenerlos todos minúsculas, así que vamos a tener tan capitalizados como eso. Y estos ya están bien. Entonces otra vez, podríamos haber usado la burbuja de rejilla de repetición, creo que voy a hacer es sólo borrar mi ojo. Y así lo voy a alinear con este de aquí creo. Y sólo tendremos a cada uno de ellos en una columna propia. Y se puede ver que estas líneas están apareciendo, lo que me permite saber que están perfectamente alineadas. Entonces otra vez, este, probablemente no lo vamos a hacer por columnas porque obviamente algunos de estos ítems son más largos que otros. Entonces lo que vamos a ahorrar sólo elige una cantidad. Entonces creo que lo que hicieron fue, creo que su diapositiva 28 píxeles en cuanto al espaciado. De acuerdo, Entonces en cuanto a alinear, menos solo por fallar, así que creo que fue algo así como 24 píxeles de borde a borde. Entonces si lo hacemos, podemos realmente deshacernos de la grilla por un momento. Y hagamos la distancia ahí. Por lo que escribió para medir la distancia. Puedes mantener pulsada la tecla Alt u Opción en un Mac. Y te dirá a qué distancia estás del objeto que está más cerca de él. Entonces eso es 25. Hagámoslo igual para todos ellos. Entonces eso es 25 también. Bueno, mi show encuadernado, así que también son 25 y ahí estamos. Entonces todo eso ahora está perfectamente alineado. Nuestra grilla. Entonces todos nosotros estamos ahora en medio. Si quieres chequear en el medio, si seleccionas todos los elementos juntos, es posible que quieras hacer esto como grupo. Si quisiéramos como grupo, podrías hacer clic derecho y luego simplemente dar click en grep. Y de esta manera, si quisieras asegurarte de que todo estaba en el centro, podrías hacer eso de una y de esta manera, ya sabes, de hecho, está perfectamente alineado de esa manera. Entonces, solo volvamos a mover esto otra vez. Asegúrate de que esté en el centro cuál es. Está bien, eso se ve bastante bien. De acuerdo, entonces vamos a deshacernos de nuestra grilla por un momento. Y ahora podemos ver que tenemos prácticamente exactamente lo mismo pasando aquí. Y eso es más o menos nuestro navbar hecho. Por lo que la próxima parada, vamos a ver adivinar nuestro tipo de sección de héroes salados y todos los activos para esto. Oh, llegué al lado izquierdo. Por lo que puedes literalmente simplemente arrastrar tu imagen e instalar haciéndola. De acuerdo, Entonces a continuación, tenemos nuestra sección de héroes. 24. Sección de héroe: De acuerdo, Así que a continuación tenemos nuestra sección de héroes hoy. Por lo que éste será relativamente fácil. Todo lo que necesitamos hacer es poner esta imagen en su lugar y en última instancia simplemente crear como una forma de rectángulo tanto para el tipo de cuadro de texto. Y también si este tipo de lógica no es realmente un botón, sólo una especie de cuadro subtotal. Otra vez. Entonces empecemos. Entonces antes que nada, arrastraremos esta imagen ahora es que estamos diciendo que esta imagen en particular en realidad ya ha llegado escala correctamente. Entonces en realidad no es ninguna, nada que tengamos que hacer a esto para que funcione. Esto se siente un poco fácil. Por lo que en general, tus imágenes no van a encajar perfectamente. Entonces lo que tendrías que hacer es arrastrarlos a una forma como lo hicimos antes en el curso. Yo como que los emparejé a una forma y luego como que los mueves por ahí como quieras. Se puede ver aquí esto ya está sucediendo y en realidad ya ha sido masa a una forma. Volveremos a hacer esto en tan solo un minuto. Podemos cambiar el tamaño de algo. Pero otra vez, reto, hazte consciente por eso esto le va tan bien. Ya se hizo. Los otros a los que vamos a venir no se habían hecho. Entonces vamos, vamos a llegar a eso. De acuerdo, Entonces esa parte es súper simple, ya estaba en ella perfectamente en su lugar. Y junto a planear lo que haremos. Lo que siempre me gusta es bloquear ese fondo en su lugar. Siempre que tengas una especie de fondo que no tienes cosas encima de su medallón solo para así, no puedes empezar accidentalmente moverlo porque si comienzas a mover las cosas, lo harás inevitablemente accidentalmente haga clic en él. Y así medios de comunicación, que por supuesto no quieres hacer. De acuerdo, entonces primero, creo que vamos a crear este tipo de texto y título de héroe. Entonces lo primero es lo primero, pongamos nuestra grilla y veremos cómo lo están haciendo. Entonces lo están alineando de nuevo con este de aquí. Y está pasando por una especie de dos bares ahí. Entonces haremos el mismo tipo de cosas, ¿verdad? Entonces saquemos nuestra herramienta de rectángulo y solo liberaremos la forma 246. Y luego algo así. De nuevo, no voy a copiar necesariamente exactamente. Nos acercaremos lo más que podamos con solo mirarlo. Si quieres ser súper exacto, el tamaño exacto que están haciendo, puedes decir, bueno, eso no es realmente por lo que estamos haciendo esto. Si lo estuviera haciendo solía ser para acostumbrarse a usar XD, pero si quieres llegar exactamente a la misma altura dulces, así 416 McCann, sólo por el infierno de ello. ¿ Por qué no? Hagamos eso. Está bien. Entonces con eso, no nos aseguraremos de que está como en el medio es ahora. Y hay dos líneas que me están diciendo eso. Entonces otra vez, una vez más, porque ahora vamos a empezar a poner las cosas encima de esto. En realidad voy a encerrar esto en su lugar también. Entonces eso será Control L o Comando L, o podrías simplemente hacer clic derecho y bloquearlo así también. Nuevamente, la razón del desperdicio es que vamos a poner cualquier cosa, pero cada vez que pones algo encima de algo, no quieres tener el peligro de mover cosas alrededor de zombies, así , porque eso es molesto. De acuerdo, entonces volvamos a ello. Correcto, así que asegúrate de que esté bloqueado. Y siempre sabes que es mucho al hacer que aparezca este símbolo. De acuerdo, entonces primero, vamos a poner nuestros textos. Entonces yo solo voy a copiar y pegar este tampoco. Empezaré a escribir algunos de estos en. Pero éste creo que se acabaría de poner como está. Y luego para esta pieza de texto también, creo que solo copiaremos y pegaremos ese en éste lo haremos de manera diferente. Entonces eso es pegar eso. Y de nuevo, asegúrate de qué tipo de Central. Está bien, así que está bien. Entonces con esta siguiente, en lugar de que yo sólo una especie de mecanografía y solo quería mostrarte lo que pasaría en la vida real si estuvieras haciendo esto. Por lo que pensamos que esto está particularmente alineado, cualquier cosa como tal. Entonces lo haremos un poco, al mirar, se deshará de capa ahora nuestra grilla. Y así empecemos a escribir. Entonces por defecto, si empiezo a escribir algo en este momento, es el tipo de fuente equivocado para ahí. Por lo que tenemos que asegurarnos de que podamos encontrar el correcto. Ahora, la forma en que han presentado esto, tal manera en que es relativamente fácil verte un G9 con esto, en realidad sí te muestra que la fuente a cierto grado también. Entonces puedes conseguir un poco un fracaso. Eventualmente use bastantes tamaños de fuente diferentes por ahí. Por lo que es un poco más complejo de lo que tal vez tus pocos diseños iniciales podrían ser Bothell. Yo como que hago esto sólo para mostrarte, sólo un poco ver a qué te podrías enfrentar si estás creando esto tú mismo. Obviamente, podrías hacer esto de tal manera que entenderías mejor. Pero sólo para que lo sepas, si la velocidad en realidad es ésta la que queremos. Entonces, primero que nada solo tecleemos esto. Entonces si vas a la herramienta Agregar texto y solo teclearemos aquí para que podamos decir por ahora, y lo haremos es hashtag y detener el cambio climático. Y lo que queremos hacer ahora es traerlo aquí. Y también queremos asegurarnos que sea esta fuente en particular. Y por la gente estamos usando nuestros estilos de personajes dentro de nuestros activos de documentos. Se cambia automáticamente por lo otra vez, CPU, así que está bien, y lo que haremos es usar esta opción aquí, que es el tamaño fijo. Y solo vamos a escalar un poco esto hacia atrás y luego arrastraremos esto hacia abajo. Y entonces tenemos más o menos lo mismo que ellos tienen. Por lo que sólo nos moveremos como siempre toco. Y lo haremos algo así me parece bien. A pesar de que en realidad está cubriendo la parte posterior de los sujetos tenía base baja. Entonces debo admitir para mí en realidad, si es posible, me gustaría tratar de conseguirlo para que el texto no sea cantidad de cabeza, que es el aire. Por lo que podría simplemente desbloquear esto y tengo un poco de juego alrededor y simplemente cambiar los esfuerzos son levemente, podría simplemente moverme donde sea pequeño poquito más. Sólo para que tengamos un poco más de espacio para jugar o puede mostrar es baja así también. Entonces solo voy a tocar alguna vez. Y sí, creo que acabamos de retroceder un poco más. De nuevo, sólo he cambiado ligeramente. De nuevo, es más o menos exactamente lo mismo que lo que han hecho. Pero de nuevo, solo te da un poco más de espacio para respirar. nuevo, esto va a servir contrato todos modos cuando vas a diferentes tamaños de pantalla, pero generalmente no quieres textos tipo oh, cabezas de gente demasiado si es posible. Está bien. Entonces eso es más o menos que poco no siempre tienen que hacer ahora es poner este poder aquí. Entonces vamos a crear una, otra forma de rectángulo aquí. Entonces, solo echemos un vistazo a la cuadrícula otra vez y veremos qué están aprendiendo. Se lleva al Señor, lo están alineando al borde de esta primera barra, pasando, a mitad de camino al siguiente. Entonces vamos a hacer algo similar creo. Entonces vamos a poner nuestra herramienta de rectángulo hacia arriba y empezamos desde ahí. Algo así. Yo creo. Asegúrate de que esté centrado. Y vamos a tener esto con nueve más amplios. Y tendremos el Color de Relleno y ese tipo de azul oscuro. Y luego sólo por velocidad, voy a simplemente copiar y pegar este elemento de texto en. Asegúrate de que esté seleccionado. Pega eso y asegúrate de que esté en el centro. Entonces es tipo de broches para deshacerte de mi grilla solo para que puedas ver eso mejor. Entonces otra vez, ves ese crosshair ahí. Entonces eso está un poco perfectamente alineado. Está bien. Tan honrado que ahora es más o menos nuestra sección de pelo completa. Y luego a continuación, vamos a ir a esta siguiente parte aquí, que es una especie de, supongo que llamarían a esto la sección de toma de acción. 25. Sección de acción en la sección de acción: De acuerdo, Entonces a continuación tenemos nuestro tipo de cosas Llamaremos a esto dice tomar acción sección. Por lo que esto debería ser relativamente fácil hoy en día. Todo lo que necesitamos para conseguir nuestra herramienta de rectángulo para dar un fondo verde. Y luego vamos a usar la cuadrícula de repetición para crear aquí el tipo de cuatro columnas. De acuerdo, así que empecemos. Y también vamos a reutilizar el botón que ya hemos creado para el cabello, que se llama el H0. Voy a simplemente, literalmente, cambiar el texto a ellos, ponlo ahí. Entonces lo que haremos inicialmente sin embargo, es empezar con una especie de fondo verde. De acuerdo, entonces primero lo primero, saquemos nuestra herramienta de rectángulo y salgamos. Y entonces sólo dibujaremos eso directamente debajo. Entonces algo así se ve bastante bien. Si quisiéramos conseguir el espaciado exactamente igual podemos hacer dice 261. De nuevo, no necesariamente hace el equipo de matemáticas, que solo hay 240, esto se debe a 61. Y entonces lo que haremos es en realidad que se ve un poco diferente. Para que yo creo que lo que está pasando aquí es que esto es una especie de ir por debajo de eso. Por lo que en realidad es probablemente mejor como lo teníamos antes. Entonces eso es sólo un T4 uno. Y eso se ve mejor, ¿verdad? Entonces eso está todo bien. Y luego vamos a dar eso se deshará de la frontera y vamos a conseguir que el color de relleno de verde. Y de nuevo, porque es un fondo y no queremos mover esto accidentalmente mientras estamos tratando de mover las cosas, vamos a encerrarlo en su lugar. Por lo que controlas una L para bloquear. Por lo que verás que volvieron a aparecer los símbolos de bloque. Si fue un Mac, será Comando. Y ahora eso está todo bien. Ahora, lo que hacemos entonces es una especie de crear uno de estos y luego usaremos la cuadrícula de repetición para básicamente hacer eso a lo largo de la fila. Entonces hagámoslo ahora. Y creo que sólo voy a pedir prestado ese ahí. Y vamos a pegar eso en su lugar. Y levantaremos nuestra grilla solo para ver dónde estamos. Por lo que necesitamos asegurarnos de que esto esté alineado incorrectamente. Entonces esto tiene que estar por aquí. Y vamos a hacer alrededor de la F y ahora tal vez. Y entonces necesitamos poner nuestros textos en su lugar. Entonces, oops, sólo voy a mover eso. Entonces otra vez, sólo tomaremos prestado este poste aquí. Y vamos a copiar y pegar eso en. Y sólo nos aseguraremos de que esto se alinee correctamente. Entonces cinco con relleno. Entonces eso está todo bien. Entonces lo que haremos ahora es seleccionar ambos elementos juntos. Nos desharemos de nuestra grilla. Otra vez. Si fuera a seleccionar esto o tratar de si no hubiera bloqueado esto en su lugar, cuando traté de arrastrar para hacer eso, habría movido el fondo. Entonces otra vez, esa es solo otra razón por la que quieres intentar bloquear por qué generalmente bloqueé fondos en su lugar. Lo que intento hacer, este tipo de cosas. Está bien. Di lo que haremos, asegúrate de que todo esté juntos. Puedes agruparlo si quieres. No tienes que dTTP arenilla. Por lo que tenemos que hacer es dar click en Repetir cuadrícula. Y ahora solo vamos a arrastrar esto para que tengamos para ti, vale, eso se ve bastante bien. Tenemos nuestra cuadrícula de vuelta sólo por un momento y nos aseguraremos de que todo esté alineado correctamente. Y creo que lo que han hecho, casi tienen que subir hasta el final de este tipo de segundo a último jefe. Y vamos a hacer el mismo tipo de cosas. Entonces vamos a aumentar el espaciado Sólidos para que podamos hacer eso dice algo así como justo este punto mi booleano decir algo así se ve prestado semestralmente. Entonces como es un poco en medio de esas bolas, tal vez esa sea la mejor manera de hacerlo. De acuerdo, Entonces eso se ve bastante bien. Y entonces lo que podemos hacer es ya sea en G3P, lo mantendré uva sub t. Y entonces sólo podemos entrar en todos los diferentes textos que tenemos. Digamos que éste va a ser voluntario. A continuación tenemos que compartir y donar. Entonces agreguemos eso y luego donemos para el último. De acuerdo, así que esa es más o menos la mayor parte de esa sección o no. De nuevo, super, super fácil. Usando la grilla de repetición si puedes imaginar cómo sería esto sin ella, ser verdadero dolor. Entonces, obviamente, tendrías que haber hecho una especie de y luego hacer otra. O puedes simplemente duplicarlo y decir que podríamos haber retenido a Alt y luego algo así de hacerlo. Esa es una forma en que pudimos haberlo hecho. Intenta alinearlo de esa manera. Pero de nuevo, Repetir Grid es tan rápido y fácil, sobre todo porque se puede mover un poco el relleno en el medio. Entonces por eso me gusta usar Repetir Grid tanto como pueda. De acuerdo, Así que un poco más que hacer. Por lo que necesitamos asegurarnos de tener este botón en su lugar también, que es más o menos smack bang en el centro. De acuerdo, Entonces en cuanto al fondo, lo que haremos es básicamente duplicaremos esto, pero ahora tenemos aquí y algo así lo ponemos aquí y cambiamos los datos de texto. Entonces si tuvieras un tipo de componente ya ordenado para esto, podrías entonces en realidad simplemente arrastrarlo desde una sección de componentes aquí. Yo estoy trayendo sólo porque esto está tan cerca, bien podemos hacerlo un poco y podemos mover esto en su lugar así que queríamos. Ahora obviamente por el momento, se puede ver aquí que un está cayendo debajo de nuestra sección. Lo que queremos, por supuesto, es tenerlo encima. Entonces lo que queremos hoy entonces es hacer clic derecho y luego sólo vamos a seguir Traer al frente, y ahí vamos. Por lo que sólo usaremos nuestras líneas aquí para asegurarnos de que todo esté un poco perfectamente centrado. Y eso me queda bastante bien. Brillante. De acuerdo, así que solo para Oficina de la OMS esté un poco centrada también, solo nos aseguraremos de que todo esto esté seleccionado y simplemente lo arrastraremos hasta que tengamos esas líneas nos están diciendo que es poco de todo las distancias son iguales. Y ahí estamos. Esa es más o menos nuestra sección de acción. No quiero más cosa hoy. Simplemente cambiaremos el texto. Digamos que cambiaremos esto para tomar medidas. Asegúrese de que los impuestos en el sentido que, y ahí vamos. Eso es casi todo eso ahora completamente hecho. De acuerdo, Entonces a continuación tenemos lo que hacemos sanción en lo que vamos a hacer aquí también es usuario un grado P para crear este tipo de sección de código que tenemos aquí. 26. Qué en la sección de lo que haremos: A continuación tenemos nuestra sección de qué hacemos. Y como se mencionó anteriormente, vamos a utilizar nuestra cuadrícula de repetición para crear esta sección de llamadas con tres columnas. Y obviamente lo que haremos es sólo una especie de pop en las imágenes que están separadas. Y también lo haré, usamos nuestro botón que tenemos en la parte superior aquí y solo cambiamos el área de texto para leer más. De nuevo, Géminis, si estás creando tu propio proyecto, probablemente solo crearías estos componentes que luego puedes arrastrar. Aquí sí tenemos todos los componentes, pero por ahora no estamos prestando demasiada atención por eso. Porque quiero que construyas todo esto a medida que avanzamos. Pero generalmente eso es lo que harías. O simplemente puedes mantener presionada Alt u Option y luego un poco def capaz y a través si quieres. Eso no funcionó. Esto es una especie de no agrupado todavía. De todos modos, así que empecemos. Por lo que integramos ahora nuestro tipo de sección ya que usaremos nuestra herramienta de rectángulo una vez más, me aseguraré de que se alinee con el aire. Y entonces nuestro anterior miró el espaciado de esto, eso hará 177. Y también nos desharemos de la frontera. Ups. Y le daremos un color azul. Ahora, hay una cosa que quiero mencionar en realidad. Entonces en esta versión particular de esto, no todo el espaciado es exactamente igual. Entonces esto es algo en lo que querrás pensar al hacer tu propio diseño. A particularmente cuando estás llegando a desarrollarte a, quieres pensar en una especie de relleno consistente para cada sección. Y con eso me refiero básicamente a cuánto espacio hay desde lo alto de esta acción hasta el inicio del primer elemento. Y lo mismo desde la parte inferior del último elemento hasta la parte inferior de la sección, generalmente quieres intentar ser lo más consistente que puedas a menos que sea una razón particular por la que estás teniendo una sección más corto que otro. Ya que estamos copiando esto, puede que no sea necesariamente absolutamente perfecto. Pero generalmente se quiere tratar de mantenerlo consistente y tipo de tenerlo. Por lo que también es lo mismo en todo el sitio web. Entonces no sé si éste está hecho, no del todo, pero eso es lo que vamos a intentar y hacer por el resto de las diferentes secciones que tenemos. De acuerdo, entonces primero lo primero, vamos a hacer nuestro botón. Entonces lo que podemos muy sencillamente días asegurarnos de que vayamos a este botón aquí, asegurarnos de que esté todo seleccionado juntos. Y si mantienes presionada Alt y luego arrastras, puedes crear otra instancia de ese hueso. Y sobre todo lo que queremos hacer es asegurarnos de que está entrando en el frenesí que se puede ver en este momento, porque ponemos este nuevo tipo de rectángulo para nuestra siguiente sección. Esto viene debajo de esto una vez más hago clic derecho o puedes usar un atajo de teclado. Yo estoy trayendo eso a los frentes y ahora en realidad lo puedes ver. No obstante, queremos que el fondo sea blanco y que el texto sea borroso. Entonces cambiemos ahora eso. Así que asegúrate de que el fondo seleccionado primero, tendremos ese blanco. Y entonces el texto sólo tendrá como nuestro círculo azul. Entonces eso está todo bien. Y en cuanto al espaciado, de nuevo, depende especie de. Es diferente de proyecto a proyecto. No hay clase de una cosa. Eso es correcto. Y así mirando este último D, algo así como 200, creo que para esta sección en particular que se vería, todos podemos alterar eso una vez que lo hayamos hecho para que podamos decidir cuál queremos que sea el patrón. Nuevamente, aunque estés desarrollando esto tú mismo, puedes especie de, cuando llegue al desarrollo real, Pablo II, puedes decidir por ti mismo qué quieres que sea. De acuerdo, a continuación vamos a sólo copiar y pegar este texto. Sólo tienen que ahorrar tiempo. Entonces cópielo y péguelo sobre. Y lo haremos de nuevo, intentaremos tener espaciado consistente desde los elementos t Así que probablemente tendremos esto es 40 desde el botón. De acuerdo, así que todo está bien, ¿verdad? Por lo que ahora necesitamos crear nuestra tarjeta aquí. Por lo que de nuevo, conoce estos I Rectángulo herramienta para tener que ejecutar los principales elementos llamados en su lugar. Y entonces también necesitas especie de apenas compensar ligeramente nuestras imágenes cada vez tan lentamente. Y usaremos la grilla para tratar de conseguirles muchas cosas también. ¿ De acuerdo? Y obviamente después de eso usaremos entonces nuestra opción Repetir cuadrícula. Entonces lo primero es lo primero, vamos a conseguir nuestra herramienta de rectángulo. Nos aseguraremos de que al menos esté aproximadamente alineado. Y luego crearemos nuestra tarjeta. Si quieres ser exactos con la versión que se hace, solo podemos tener una latencia local o el ancho de ese 320, para que podamos hacer lo mismo. De acuerdo, y entonces la altura probablemente sea un poco diferente. Entonces, ¿qué tenemos? Digamos que la altura es de cinco a ocho, así que eso es D, Eso es D lo mismo a k Ya que estamos haciendo 40, 40 es 80, ya que esta imagen va a estar ligeramente más arriba. Entonces, solo hagamos eso otra vez. De acuerdo, Así que primer polígono, también algo que siempre olvidé hoy, es que realmente quieres bloquear este fondo azul en su lugar para que te asegures de que esté seleccionado. Y luego Control y S o Comando. Y ahora, y luego ahora cuando mueva esto, no va a mover el fondo también. De acuerdo, Entonces la primera imagen que necesitamos es cómo las plantas, así que eso está bien eso, así que ahora pongamos eso en su lugar. Entonces vamos a subir nuestra grilla. Entonces ese es tu enfoque del teclado. Entonces lo que haremos aquí es que intentaremos igualarlo alto. Ya lo han hecho. De acuerdo, así se ve como estaban alineados con la sección col. Por lo que parece como si esto fuera una especie de ir a mitad de ese balón. Entonces haremos el mismo tipo de cosas entonces. Y eso en realidad es más o menos perfecto y decir, sí, eso está todo bien. Y obviamente cuando repetimos eso va a hacer lo mismo para cada uno de ellos. Necesitas asegurarte de que tus imágenes sean todas del mismo tamaño. Suerte lo tendría porque te he dado las imágenes tipo del lado correcto. Esto no sería un tema para mí. Pero nuevamente, solo ten en cuenta si estás creando tu propio proyecto, vas a tener que asegurarte de que todo sea del tamaño correcto quieres que sea todo. Puedes enmascarar la forma de la imagen y tipo de sí, puedes alterar cómo si quieres. De todos modos, di que todo está bien. Ahora sólo vamos a pop en nuestro texto. Entonces todos vamos a pedir prestado y pegarlo. Y se puede ver que estamos alineando el texto con el borde de esta imagen. Entonces eso es lo que haremos por este también. Científicos Putnam de nuevo en. Entonces hemos estado haciendo 40. Apegarse a eso. Y luego otra vez, tomaremos prestado este texto ficticio. Simplemente copia esto más. Tan solo consigue alinear esto. Por lo que parece correcto. Entonces lo haré. Entonces en cuanto al espaciado dentro de Nessus, algunas maneras podrías hacerlo. Parece que tienen un tanque un poco más bajo, lo cual mi dignificación haría personalmente, creo que lo que haría es tener el texto poco rebanada al título, entonces tal vez tener el barco y hacia abajo. Esa es una especie de aplicación personal es una especie de cosa de gusto personal realmente. Pero creo lo que voy a hacer, sí, creo que voy a hacer esto. Y luego el botón, vamos a reutilizar desde arriba aquí. Por lo que vamos a simplemente acercar nuestro botón de donación. Asegúrate de que esto vuelva a estar todo agrupado. Por el momento tengo esto como componente. Entonces solo voy a mantener presionada Alt y luego me voy a arrastrar y eso me va a dejar crear una copia del mismo. Obviamente, lo que vamos a hacer es cambiar esto ligeramente. Yo y ustedes pueden ver que en realidad viene por debajo de las sanciones. Entonces lo mismo otra vez. Tenemos que asegurarnos de que se lleve al frente para que realmente podamos verlo. Y luego lo vamos a reventar en el fondo aquí. De acuerdo, para que veas que tenemos un problema aquí con esta cajita no es del todo el final. Eso tiene que ver con la opción que tenemos aquí para el tamaño fijo. Entonces si solo lo volvemos a poner aquí, verás las cajas y descomentarás el borde. Y entonces ahora lo podemos alinear mucho más fácil. Entonces así es como vamos a hacer eso. Entonces Algo como esto. Quiero tratar de asegurarme de que el relleno de abajo sea el mismo que éste es de arriba. Y así vamos a asegurarnos de que eso esté seleccionado. Entonces eso es 40. Por lo que haremos lo mismo para el botón también. Por lo que nos aseguraremos de que esté a 40 píxeles de ahí. Por lo que sólo vamos a mover esto un poco hacia arriba. Un poco más minúsculo. Brillante. De acuerdo, así que eso está todo hecho. De acuerdo, Así que esa es más o menos nuestra primera tarjeta completada. Y entonces lo que haremos ahora curso es usar nuestra grilla de repetición para superarlo. Entonces, en realidad, lo siento, la imagen no es del todo subida. Esto tiene que ser ligeramente alto. Entonces volveremos a hacerlo, haremos lo mismo por eso, que es asegurarnos de que todo esto se alinee correctamente. Entonces eso está bien. Y ya que tenemos 40 como el espacio y como que vamos a hacer lo mismo para la imagen también. De acuerdo, entonces ahora todos estamos bien. Entonces lo que haremos ahora es asegurarnos de que todo esto esté seleccionado y luego haga clic en Repetir cuadrícula. Y entonces podemos simplemente arrastrar esto tres veces y luego ajustar el espaciado por mucho que necesitemos. Pondremos nuestra grilla de nuevo en su lugar. Acabo de decir que podemos alinear esto correctamente y se puede ver que no estamos muy lejos en realidad. Entonces todo lo que necesitamos hacer es simplemente arrastrar ese espaciado hasta que haga clic en su lugar allí. Y eso ahora es más o menos perfecto. Yo creo. Eso parece más o menos lo mismo que lo que tienen pasando. Está bien. Entonces ahí estamos. Eso es más o menos eso hecho. Vamos a deshacernos de mi grilla. Ahora solo reemplazaré estas imágenes por la correcta. Entonces si haces doble clic en él, lo siento si haces clic derecho sobre él e ir y reemplazar imagen. Y si tienes esas imágenes en papel de aluminio, así que mi cerca, puedes entonces simplemente llegar rápidamente a ellas. Entonces en este caso lo tendré en realidad , así que vamos a hacer eso. Y así tenemos lo que es eso y decimos que es éste yo creo. O eco-ciudad alternativa. Distraerlos de mi comportamiento también, usaría por un minuto otra vez para hacer de esta manera. Entonces me vuelven a correr, así que llamaremos Reemplazar Imagen. Y entonces tenemos éste aquí. ¿ De acuerdo? Entonces que luego sustituyen el texto ahora. Por lo que de hecho, ataques similares falta caja. Entonces como eso estaba realmente oculto, necesitamos simplemente leer solo esto es un poco en realidad. Y así vamos a asegurarnos de que tengamos esto. Entonces otra vez, esta es la belleza de repetir grilla porque ahora tenemos que alterar algo después del hecho. Porque tenemos una grilla de repetición, en realidad podemos ajustar el y cuando lo hacemos solo por cada uno. Entonces por eso es super, super, súper útil usar es coordinar lo que hicimos con respuesta. De acuerdo, así que eso está todo bien. Y obviamente si necesitamos ajustar este texto ficticio, este también será el mismo. Entonces podemos hacer lo mismo con eso y asegurarnos de que todo sea igual. Y también creo que lo que también haremos es tal vez solo moverlo hacia abajo un toque tal vez, o está bien? Ahora, en realidad, estoy contento con eso. Está bien. Entonces todo lo que tenemos que hacer ahora es simplemente pop en el texto correcto, lo cual haré fuera de cámara solo para ahorrar tiempo. Se puede ver casi han conseguido la cuarta manometría que ellos quieren. De acuerdo, así que ojalá todo eso tenga sentido. Obviamente lo que tendría que hacer ahora es conseguir la zona objetivo correcta. Simplemente cambia esto para leer más, que simplemente sería lo mismo que los otros también. Y entonces tenemos nuestra acción de causa bastante completada. Y luego a continuación vamos a meternos en nuestro tipo de, supongo, sección de tipo de hechos o sección de ADN, como lo llamaremos. 27. Sección de estadísticas: De acuerdo, Entonces a continuación tenemos nuestro tipo de sanción de prueba social o tipo de sección de estatus, así como usted lo llama. De acuerdo, lo siento otra vez, mismo tipo de cosas. De nuevo, ahora tenemos una imagen de fondo. Vamos a usar una grilla de repetición una vez más para hacer todo esto. Entonces esto va a decir muy largo. Es todo tipo de manera muy similar a la que hicimos con nuestra especie de sección de color. De acuerdo, así que empecemos. En primer lugar, necesitamos poner nuestra imagen en. Nuevamente, esto pasa a ser más o menos puntual en términos de dimensionamiento. Si no fuera obviamente, podríamos entonces realmente manipular esto, sin embargo tendríamos que hacerlo. Pero como sucede, Eso fue bastante bueno. Entonces en la próxima pareja creo que lo hacemos. Simplemente va a agregar texto en su lugar, Wang, y solo, solo copia y pega esto en su lugar. Asegúrate de que todo esté completamente alineado. Y también necesitamos poner nuestro botón en su lugar. Entonces sólo tomaremos prestado este. Yo soy pop esto debajo. Se puede ver la realidad en realidad no podemos ver nada porque eso es una especie de debajo es secciones. Hacemos clic derecho y luego solo llevamos al frente. Lo vamos a volver a ver. Y lo vamos a hacer ahora es sólo cambiar el texto para tomar medidas. Entonces lo haremos ahora. Entonces, toma medidas. Una vez más, sólo vamos a alterar la forma en que esto está mirando a los extremos del Boston un poco alargado por la opción que hemos seleccionado aquí. Entonces, en lugar del tamaño fijo, simplemente súbalo de nuevo al ancho automático. Y eso va a hacer que esto se ponga más en su lugar para que vayamos. Y algunos de nosotros tenemos, tenemos 40. Está bien, eso se ve bastante bien, ¿verdad? Entonces próxima apertura, así crear nuestro tipo de sección de stat como algunos de estos, algunos de los textos Aquí está repeticiones es que no voy a juguetear con textos que Alpha. Puedes hacerlo tú mismo si quieres. Pero al menos vamos a crear un poco este tipo de iconos sociales. hemos llevado a la mesa lateral izquierda tendrá que crear el círculo en el que me meto. Está bien, tan bien. Ahora asegurémonos de que nuestra imagen de fondo esté bloqueada para que podamos empezar a maniobrar las cosas alrededor. Probablemente comenzaría dibujando nuestro rectángulo. Y trataremos de asegurarnos de que también esté alineado a nuestra cuadrícula. Por lo que se puede ver este que tengo aquí está alineado a este tipo de segundo 1, segundo al último. Entonces eso es lo que haremos también. Empieza desde aquí. Y en cuanto a lo que abarca, abarcando seis jefe diferente el ensayo, Hagamos lo mismo. Está bien, y eso me parece bien. A lo mejor cuerda ligeramente alta. Bueno, a eso en tan solo un momento. Está bien. Entonces, empecemos. Entonces lo que vamos a hacer es que me prestada una jactancia que ya hemos creado y dicho Probablemente sólo nos llevaremos la que tenemos por aquí. Entonces si solo nos deshacemos de la cuadrícula iónica por ahora, solo duplicaremos eso. Una vez más. Asegúrate de que podemos llevarlo al frente que podamos verlo. Los sonidos ponen eso en su lugar. Simplemente sacaremos mi grilla para ver que hay alanine a cualquier cosa en particular que dicen, hagamos lo mismo. Y esto será ahora, ¿sabías? Entonces cambiemos eso a AK. Genial. Y digamos que un espacio sobre texto en realidad se lo envía porque nos hemos metido un poco con eso. Simplemente deshazte de nuestra grilla por solo un momento. Brillante. De acuerdo, así que todo está bien. Y ahora empecemos a poner nuestro texto en su lugar. Sólo voy a pedir prestado eso y pegar eso ahí dentro. Y tal vez voy a mostrar un par más de espaciado. De nuevo, sólo tomaré prestado este bloque de texto y pegaré eso ahí también. De acuerdo, Entonces en cuanto a conseguir esto tan espaciado correctamente, lo que podríamos hacer es bloquear esta sección en su lugar también para que podamos conseguir esto como queremos que se diga como para tener este tipo de en el medio . Sí, eso me parece bastante bien. A continuación, tenemos que empezar a crear nuestros iconos sociales. Por lo que sólo necesito hacer es crear un círculo y luego pop y nuestros iconos sociales en su lugar. Tan súper, súper simple. Entonces vamos a conseguir los ciclos del cielo en el nombre agarrarán los iconos sólo un momento. Simplemente obtiene nuestra herramienta de elipse. Y entonces lo que haremos es mantener pulsado Shift. Por lo que crea un círculo perfecto. Se ve equipo, que en realidad puedo decir algo así. Nos desharemos de la frontera. Tiene que ser de color verde. Y luego yo, los iconos sociales van a ser azules, creo que sí. Está bien. De acuerdo, Así que sólo agarraremos esos. Sólo yo, Ahí está EVA. Entonces la forma en que creo que voy a hacer esto, estos grupos que acabamos de escribir sólo por un momento. De acuerdo, entonces primero, ¿qué tenemos? Entonces tenemos Twitter en primer lugar. Entonces vamos a poner eso. Entonces si solo agarramos eso y lo tiramos adentro, eso se ve bastante bien. A lo mejor un poco más grande. Sí. Puedo decir si mantienes pulsado Shift. Y eso se ve bastante bien. De acuerdo, entonces a continuación, lo que haremos es simplemente un duplicado lo que ya tenemos aquí. Y entonces sólo vamos a pop en el icono de Facebook en su lugar. Y tal vez solo hagamos de esto un toque más grande también para dominar un poco los partidos es con el tamaño. Está bien, genial. Y entonces una cosa que haremos es agrupar ambos juntos así. Y entonces nos vamos a quedar incenteridos. Sí. Creo que esa luce puedo decir algo así se ve bastante bien. Está bien. Entonces estamos más o menos, más o menos ahí. Lo único que deberíamos haber hecho durado, en realidad, esta post-instalación, deberías salir por el camino porque además no queremos necesariamente duplicar un Boston por cada uno. Por lo que acabo de salir del camino por ahora. Y vamos a deshacernos de esas fronteras. Tampoco queremos eso. De acuerdo, entonces ahora lo he desbloqueado todo y lo que vamos a hacer es simplemente seleccionar todo juntos. Cuando voy a dar clic en Repetir cuadrícula, y luego podemos arrastrar esto hacia abajo. Entonces vamos a tener para estos para que lleguemos y cómo estos espacios bajan. De acuerdo, así que necesitamos ser un poco más, algo así. Prueba 35. Y entonces tal vez eso es un poco demasiado grande en realidad. Entonces tal vez podamos fácilmente solo yo este toque redondeado. Lo más importante es que lo logremos realmente centrar dentro de la sección que tenemos. Entonces, solo asegurémonos de que no lo haga. Entonces ahí vamos. Entonces eso está realmente centrado. Y sí, eso me parece bastante bien. Um, puede que sólo hayamos hecho esto un poco demasiado grande. Entonces si ese es el caso, lo que podemos hacer es pinchar sobre ellos mientras seguimos en la cuadrícula de repetición. Y luego si mantenemos presionada Alt u Option, si estás en un Mac, puedes ver como yo lo hago eso es mover el espaciado tanto por encima como por debajo del elemento mismo. Entonces si son un poco demasiado grandes, Esa es quizás la forma en que lo haces. Por lo que sólo los haremos un poco más pequeños quizás a algo así. Y entonces se puede decir que un poco lo hizo si todos ellos, en lugar de tener que sólo todos, todos individualmente y decir, vamos a volver atrás, asegurarnos de que todos son diapositivas juntos. Dicen, y vamos y luego nos aseguraremos de que esté centrado. Y eso servirá. De acuerdo, así que luce bastante bien. Y luego simplemente volvamos a reactivar este botón donde estaba. Vamos a recuperar nuestra grilla. Debería estar haciendo para asegurarme de que estos estén alineados de la misma manera. Creo que estamos bastante bien. Yo sólo estoy un poco más a un lado. Sí. Ah, está bien. Y entonces una vez más, esto pone en necesidad de volver al frente. Está bien. Está bien, eso yo, eso está bien. Brillante. Entonces estamos prácticamente terminados con esa sección. Ahora. Vamos a echar un vistazo rápido cómo vamos a, vamos a hacer está todo alineado correctamente? Esto no es exactamente lo mismo. Agrupemos estos juntos y solo movelos ligeramente hacia arriba. Voy a alinearlo a la parte superior de esta caja aquí así. De acuerdo, entonces tal vez sea un poco diferente a lo que han hecho, pero es más o menos del mismo tipo de cosas. Y no está bien alineado adecuadamente. Creo que sí. Sí, eso es genial. Está bien. Entonces eso es más o menos. Vamos a cambiar el lado tecnológico es el mismo. De acuerdo, entonces eso significa que casi terminamos con esa sección. Para que veas que somos más o menos iguales, tal vez como el espaciado para esta sección es un poco diferente. Pero esencialmente tenemos el mismo tipo de cosas pasando. De acuerdo, Así que ahora Paul está todo hecho. Y ahora a continuación, vamos a crear nuestra más mínima sección. 28. Sección de deslizador: De acuerdo, Así que vamos a llegar. Por lo que a continuación tenemos nuestra sección de deslizador. Por lo que de nuevo, esto será bastante sencillo para simplemente poner en juego una imagen. Y luego solo tendremos nuestra herramienta de rectángulo para crear este tipo de caja de cotización. Y luego le quitaremos a ableton una que hemos creado antes. Y después. Simplemente crearemos este tipo de indicadores de deslizador mediante el uso de la herramienta de elipse. De acuerdo, así que empecemos. Entonces, antes que nada, necesitamos crear nuestra sección, a pesar de que es un poco espacio en blanco, todavía voy a crear un rectángulo para esta sección de todos modos. Entonces intentemos mantener esto como prácticamente igual. En realidad voy a dejar la pizarra en esta ocasión. Y también lo voy a encerrarlo en su lugar. Y la razón es que es sólo para que podamos ver en qué forma nuestros límites sin embargo. De acuerdo, entonces ahora necesitamos poner nuestra imagen en su lugar. Entonces si solo alejamos el zoom y metemos esta imagen, también solo recuperaré nuestra cuadrícula solo por un momento para que podamos ver qué estamos haciendo. Y sin embargo, es bastante buen tamaño en el sensor. Y obviamente lo que tenemos que hacer ahora es asegurarnos de que obtenemos nuestra herramienta de rectángulo y solo una especie de solo solapar eso ligeramente en esta sección también. Después usaremos la herramienta Ellipse para que estos se hagan en tan solo un momento. De acuerdo, entonces hagamos este tipo de textos o bloque de citas. En primer lugar, volveremos a ese botón, todas las publicaciones al final. No puedo decirlo. Empecemos a dibujar que traerá de nuevo nuestra cuadrícula solo para que veas con qué estamos trabajando. Y bien, empecemos desde aquí, creo. Y se va a solapar como un únicamente sobre ese siguiente balón y algo así. Solo asegurémonos de que esté en el sensor. O sea, vamos a ver de qué tamaño tenemos para eso. 344. Lo suficientemente cerca. De acuerdo, di que está bien. Me desharé de mi grilla para tener esto sin frontera y tendremos un color de relleno de nuestro tipo de azul oscuro. No es tan bueno. Entonces sólo tomaremos prestado este elemento de texto aquí y lo copiaremos y pegaremos en. Entonces eso está todo bien. Y también sería lo mismo para éste también, solo para ahorrar tiempo. Entonces vamos a tener eso como 10. Genial. Por lo que casi ahí. Consigamos nuestro tipo de indicadores de deslizador, el cuello. Entonces de nuevo, puedes ver hex siempre y cuando tengas verde, eso significa que también han usado rejillas repetidas. Entonces vamos a hacer lo mismo, similar tipo de cosas como un vamos a hacer eso ahora. Entonces uno de ellos tiene un color de relleno, uno de ellos no. vamos a tener todos con, uh, con el color de relleno ASA primero que nada, y luego simplemente un poco de desagrupar la cuadrícula y luego hacer una con si eso tiene sentido, tendrá sentido como lo hacemos nosotros. Entonces ahora tengo la herramienta de elipse y vamos a mantener presionada Shift y luego arrastrarlo hacia fuera para que podamos hacer un círculo perfecto. Di algo así se ve bien. Y esto va a tener un, a tendrá una frontera, pero no tendrá color de relleno. El color del borde será azul. Y luego usaremos nuestra grilla de pico. Y acabaremos de arrastrar esto un par de veces más y lo haremos justo ahora sólo el espaciado tan árabe cerca algo así como 10, creo que tendrá, genial. Y entonces lo que haremos es desagrupar la cuadrícula. El motivo siendo yo 0, ahora quiero especie de seleccionar este por sí mismo para poder darle un color de relleno ahora, mientras que estos obviamente no lo hubiéramos hecho. Entonces ahora vamos a deshacernos de West saliendo color para ese. Y ahora se puede decir que fue una forma rápida de hacerlo, robinson de hacerlo uno por uno. Y espaciando sabio, ¿a qué distancia está eso de aquí? Entonces nuevamente, solo para reiterar, siempre que seleccione elemento, mantenga presionada la tecla Alt. Haciendo clic en arrastrar. También te dirá a qué distancia está un elemento del siguiente. Entonces eso es 56, así que eso no es nada específico. Entonces vamos a ver si podemos hacer algo realmente impulsar antes de hacer eso. Esto se ve un poco demasiado grande, así que hagámoslo un poco más pequeño. Entonces otra vez, ya no están en la grilla de repetición, sino cómo gluten juntos, voy a mantener pulsado Shift y luego especie de solo conocerlos en un poco así que nos hacemos un poco más pequeños. Y eso me parece bien. De acuerdo, Entonces, ¿a qué distancia está este elemento de la sección inferior? Echemos un vistazo. 25. En realidad se ve. Eso me parece pero sólo lo haremos un poco más lejos. Diga sólo un poco más de indicaciones. ¿ Qué hace 35? Sí, estoy contento con eso. Está bien. Entonces estamos muy, muy cerca. A continuación, sólo queremos pedir prestado. Esto, lo mete en mi VA, así que solo presionaremos a mantener presionada Alt y luego arrastraremos y luego solo tiraremos eso por aquí. Yo me aseguro de que se lleve al frente. Y sólo pondremos eso en su lugar. Entonces un lomos. Entonces tendremos 50, creo. Y luego dice leer más esta vez. Entonces vamos a cambiar los textos Eva, y luego nos aseguraremos de que esté correctamente alineado. De acuerdo, entonces ahora estamos Appleton para la parte superior de esta imagen, que sólo va a pedir prestado de la que hicimos que tengo aquí. Por lo que de nuevo, sólo mantenemos presionada Alt y sólo vamos a mover esto a su lugar. Diga, estoy bastante seguro de que se alinea con estos aparecen. No lo han hecho. Hacer ese mensaje no es necesariamente materia. Cuando redimensionemos se va a mover de todos modos, pero solo por ahora, alinémoslo con eso. De acuerdo, Um, ¿cuál era el texto para esa parte? Entonces historias y justo ahora me está mandando mensajes de texto, solo acercar. Entonces de nuevo, hacer zoom que puedes hacer si tienes un trackpad es obvio, vas a pellizcar y hacer zoom. Si tienes un teclado normal, solo tienes que mantener presionada Alt u Option y luego simplemente entrar con tu rueda de desplazamiento. Puedo decir que nos aseguremos de que sea el medio. Y ahí vamos. De acuerdo, ahora tenemos nuestra sanción de deslizador o completada. Ahora que lo hemos hecho, realidad podemos volver a hacer clic en él y simplemente podemos desbloquearlo por un momento. Y nos desharemos de nuestra frontera. Sólo porque a continuación lo que vamos a empezar a poner sobre un fondo azul para nuestra siguiente sección. 29. Salvar la sección futura: De acuerdo, así sucesivamente a la siguiente sección. Diga qué haría, en primer lugar es conseguir nuestra especie de sección de fondo azul entrando en la herramienta de rectángulo de IA. Y nos aseguraremos de que encontremos el filo de esta mano y luego empezaremos a dibujar eso. Y luego nos portón nos desharemos de la frontera y le daremos un color de relleno de azul oscuro. Entonces eso está todo bien. Y entonces una vez más, cerraremos eso en su lugar. Llamamos accidentalmente mover cualquier cosa. De acuerdo, entonces antes que nada, necesitamos poner en juego nuestro texto. Entonces voy a copiar y pegar esto cuando sea por velocidad y luego a este tipo en su lugar. Entonces volvamos solo por un momento para que podamos asegurarnos de que todo se alinee correctamente. A un chico. ¿ Verdad? De acuerdo, así que todo está bien. De acuerdo, entonces pongamos nuestra imagen en lugar sustantivos, que está muy ahí. Simplemente lo agarrará de una selección. Y entonces lo que nos puede mostrar es 0 correctamente alineado. Entonces ella tiene una gran espalda de vuelta para que la OMS fuera todo bueno. Y sólo haremos eso un poquito para que el arroz lo haga 50 de distancia. Yo puedo decir eso. Entonces encontraremos una bonita apertura para poner en marcha nuestro bosón y todos mis textos. Entonces voy a copiar y pegar esto. Yo sólo porque tiene sentido hacer eso. Voy a arrastrar esto un comportarse así. Y entonces sólo tendremos esto un poco por debajo. En realidad acabaremos de hacer nuestra inversión, así que sólo copiaremos esa también. Sólo tendremos que salir quizá traídos de nuevo al frente. Entonces si solo hacemos clic derecho en eso, Traer al frente. Por lo que todavía tenemos un ligero desplazamiento, por lo que no está del todo alineado a él, es sólo una especie de en el centro de la misma. Entonces volveremos a hacer lo mismo. Vamos a conseguir un gran banco y tenerlo en este de aquí. Y entonces haremos lo mismo por eso también. Está bien, genial. Y luego conseguiremos nuestro texto ficticio en el que nos deshacemos como grilla por un momento. Nos limitaremos a bar esto una vez más, esto por aquí. Entonces la forma en que tienen espacio esto fuera, vamos a copiar jugadas de hielo. No sé si lo hago de la misma manera yo mismo, pero tal vez o alargada sobre toda la caja en sí o tal vez tener todo tipo de lugar sónico juntos. Nuevamente, preferencia personal. Entonces sólo voy a hacer lo que han hecho sólo por, sólo por facilidad. Sólo voy a pedir prestado este botón aquí. Otra vez. Quiero que solo te asegures de que llevemos al frente para que podamos decirlo. ¿ Y qué hacen? Entonces si no están listos, lo consiguieron alinear de esa manera. Entonces lo voy a tener un poco de arcilla, así que tendremos es de 40. Por lo que todo tipo de partidos y ya se lee topo. Entonces eso está todo bien. Entonces lo que podemos hacer una enmienda para ahorrar tiempo, vamos a copiar todo esto juntos. Lo que tenemos aquí, lo estoy pegando aquí abajo, así que vamos a hacer eso. En primer lugar, digamos agrupemos todo esto juntos. Podrías convertirlo en un grupo si quisieras. Y entonces lo que haremos es mantener presionada a Alt y luego duplicaremos eso. Y sólo traeremos de esta manera. Preocúpate por espaciar en tan solo un momento. De acuerdo, obviamente necesito simplemente cambiar el texto en un momento. Y entonces tendremos nuestra última imagen restante para esta sección en su lugar, que es mu que abajo ahora. Y recuperemos nuestra cuadrícula para que podamos empezar a alinear las cosas correctamente. Así que sólo un poco copia lo que están haciendo aquí. Lo están alineando una vez más como el inicio de esto en uno de aquí. Y es como que acaba de llegar al borde de ahí. Entonces eso está bien. Hagamos el mismo tipo de cosas. De hecho, no estamos lejos de todos modos. Entonces, solo movámoslo un poco más adentro. Y tan bueno. Y luego para éste, éste todavía se va a alinear con éste de aquí. Entonces haremos el mismo tipo de cosas. Y echemos un vistazo al borde de esto. Sí, eso está bien. Está bien. Entonces nos vemos bastante bien. Entonces, por último, lo que necesitamos hacer entonces es simplemente asegurarnos de que hemos cambiado nuestro texto. Entonces lo haré fuera de pantalla solo para ahorrar tiempo. Entonces de nuevo, ojalá todo esto tenga sentido y esto sea relativamente fácil de seguir. Yo, sólo voy a mover esto un poco. Entonces donde tipo de no ser una brecha con estos dos satélites, solo basados en grupos juntos y moverlos un poco más cerca. Vamos a acercar y tocar solo para asegurarnos de que estén alineados correctamente. Está bien. Eso me parece bien. Y entonces pensaremos que va a hacer es entonces agruparemos todo. Me aseguraré de que todo esté perfectamente centrado. Simplemente vuelve a volver a ponerte. Asegúrate de que estamos en el borde ahí. Puedo decir que nos estamos viendo bastante bien. Eso en realidad no tardó demasiado. Genial. Por lo que actualizaré las etiquetas fuera de pantalla. Y luego a continuación tenemos una especie de I2 últimos pedacitos que hacer, que es nuestra sección de llamada a la acción y nuestro pie de página. Entonces este nosotros muy rápidamente de hecho, lo que probablemente haré es hacer ambas cosas juntas porque de esta manera es muy largo y así yo, vale, Así que sobre nuestra última parte de esta clase proyectos, nuestra llamada a la acción y nuestro pie de página. 30. Sección de CTA y pie de la página: De acuerdo, Así que a nuestra última parte de este proyecto de clase. Por lo que ojalá tengas que seguir el serif en ojalá todo esto tenga sentido. Ahora si lo han tenido despacio, fácil hasta ahora porque hemos tenido todos nuestros activos como que ya están en su lugar o del tamaño, pero sólo pensé que tenía sentido hacerlo de esta manera para algo que te acostumbraras a usarlo. Y así la emulación de algo más inicialmente, creo, es una buena forma de aprender. Por una cosa, solo por mencionar ahora, asegúrate de que estás arrastrando sobre el texto hacia abajo. Entonces todo el texto está en su lugar. En el video anterior, creo que no tenía todos los textos tipo de compartir completamente. Di si piensas un poco, Oh, es un poco una brecha extraña, solo asegúrate de que el cuadro de texto sea completamente largo, alargado para que realmente puedas ver todo. Entonces eso es quizás Y0 para ser extraño antes. De acuerdo, Así que aquí vamos. Tenemos que hacer nuestra sección de llamada a la acción y luego nuestro pie de página. Entonces haremos esto en realidad todo como un solo video sólo porque esto no te llevará mucho tiempo en absoluto. De acuerdo, entonces primero lo primero, vamos a conseguir nuestra herramienta de rectángulo y sacar nuestra sección de llamada a la acción. Deshazte de la frontera y tendremos este color verde relleno. Volverá a bloquearlo en su lugar, lo siento, después de mover accidentalmente cualquier cosa. Y lo que haremos es poner nuestros elementos de texto en primer lugar. Entonces copiaremos eso por aquí y nos aseguraremos de que todo esté centrado. Eso está todo bien. Y entonces en realidad estamos entrando en gradientes que podríamos simplemente copiar esto y realmente hacer algunas de las cosas que tenemos es solo vamos a hacer que este tipo de dirección tanto para tu dirección de correo electrónico NTC fallara. Entonces hagámoslo. Entonces, ¿cómo puedes hacer esto? Entonces me has hecho pensar, oh, tal vez solo podrías usar la herramienta de elipse. Yo soy un poco así. No, tú no haces eso. En realidad estás entrando de nuevo a tu herramienta de rectángulo y luego solo redondea los bordes, igual que lo haces con el Boston. Entonces hagámoslo ahora. Entonces vamos a sacar eso. Entonces algo así. mí me parece bien. Entonces sólo soy un poco más alto. Whoops, eso lo rota. Está bien. Eso se ve bien. No queremos la frontera, pero no tendremos radio para ello. Entonces podemos simplemente arrastrar esa entrada que y lo haré más o menos es super, super simple. De hecho voy a hacer que sea un poco más largo pensar. Y solo por velocidad, sólo voy a pedir prestado ese texto y meterlo en él. Entonces eso está centrado. Vamos a acercar y tocar. Y sí, algo así me queda bastante bien. De acuerdo, Entonces lo que necesitamos ahora es una versión oscura de este botón. Entonces lo que haremos es simplemente duplicaremos esto más. Lo llevaremos al frente. Una vez más. Nos aseguraremos de que esté alineado en la cuadrícula central hacia atrás también, solo para que podamos asegurarnos de que se alinee correctamente. Y éste, claro que queremos cambiar. Quieren es tener azul oscuro. Y entonces el texto en el centro va a ser blanco. Lora, asegúrate de que tu texto esté seleccionado, y luego elige una k Ahí estamos. Y entonces lo que haremos es asegurarnos de que se alinee correctamente a nuestra grilla. De acuerdo, así que luce bastante bien, Eso fue rápido. Entonces esa es esa parte ahora lo haremos a continuación. Ah, lo siento. Una cosa más necesitamos para asegurarnos de que nuestro texto en realidad no esté justificado, como dice el Verde, Mi show de que estamos haciendo eso. Ahí vamos. Por lo que sólo nos desharemos de mi grilla de ella y echaremos un vistazo rápido. Y sí, eso me parece bastante bien. Y vamos a asegurarnos de que esencialmente como alineándonos correctamente por lo que está a la misma distancia de distancia. Eso está todo bien. ¿Verdad? Entonces nuestra última parte de ellos, que va a ser nuestro pie de página. Entonces lo que voy a hacer de algunas maneras podrías hacer esto. Podrías literalmente escribir un cuadro de texto. Pero en realidad voy a hacer uno de estos. Y entonces una vez más, voy a usar la grilla de repetición solo para darnos lo mismo para cada uno. Entonces nos vemos bastante bien. Entonces, solo alejemos el zoom y veamos lo que hemos hecho hasta ahora. Entonces, de nuevo, somos prácticamente exactamente lo mismo que lo que han hecho. De nuevo, no te preocupes demasiado si no es exactamente el mismo espaciado, ¿qué tienes? Este curso es solo para acostumbrarte a usar XD y conseguir que cada uno se especie de cómo vas, cómo te acercarías. Por lo que la creación de ciertas sanciones. Entonces lo que sí necesitamos hacer es simplemente pedir prestado nuestro logotipo de un par, solo duplicará eso. Y lo bajaremos todo el camino y diremos Echemos un vistazo a eso. Entonces, en realidad no estamos centrando todo aquí. Entonces vamos a conseguir esto un poco más de altura. Di algo así como ganar sobre eso va a ser bueno. Y luego vamos a tener esta sección donde tenemos nuestras etiquetas. Yo sólo voy a pedir prestado esto y vamos a pegar esto en su lugar. Y este tipo retícula de nuevo en realidad sólo para que realmente podamos aprenderlo con algo. Y así lo tendremos alrededor. Entonces, tan bueno. De acuerdo, así que ahora solo necesitamos poner ala especie de nuestra línea en su lugar. Entonces hagámoslo ahora. Entonces de nuevo, podríamos usar la herramienta de lápiz, solo podríamos usar línea a donde las cosas, ya que estamos haciendo sólo literalmente una línea recta, sólo vamos a usar esto. Por lo tanto, mantengamos pulsado el turno para asegurarnos de que dibuja una línea completamente recta. Y tendremos a estos dos aquí. Y el tamaño, creo que lo tendremos algo como algo así como 399, definitivamente A3, otros también. Y eso parece igual, creo que es Toulon que tienen ahí tal vez un poco más grueso. Sea lo que sea, eso está todo bien. De acuerdo, así que todo está bien. Pero mi herramienta de selección, y veo que esto va a ser más que elegante azul, algo tiene sentido. Y luego voy a solo, solo estoy bar este texto y copiarlo y simplemente bajar la velocidad para verme escribiendo nuestros textos para siempre. De acuerdo, entonces nos estamos acercando mucho ahora y nos preguntamos hoy a partir de aquí es asegurarnos de que tenemos esta seleccionada. Y voy a usar nuestra grilla de repetición una vez más, voy a arrastrar hacia fuera, así que tenemos dos más. Y luego sólo voy a ajustar el espaciado. Rusia probablemente vuelva a ese espaciado en tan solo un momento. Por lo que tenemos que poner esta parte también. Por lo que solo haremos clic fuera por un momento. De acuerdo, así que voy a dar click en este de aquí. Yo sólo voy a desagrupar al quejoso para que cuando trate bar esto no me vaya a llevar todo. Entonces lo voy a duplicar manteniendo presionada Alt y luego arrastrando. Voy a dejarlo por aquí. ¿ De acuerdo? Entonces recuperaremos nuestra rejilla y nos aseguraremos de que los bordes estén alineados a este tipo de n uno justo aquí. Y nos aseguraremos de que también esté en el centro. Genial. Entonces eso es todo divertido. Y podría no estar T lejos en realidad está bien, así que necesitamos un poco más. Habrá menos incluso cuando se trate del ensayo de espaciado. Entonces algo así, creo que es lo que queremos. Berlín, creo que estamos ahí. Tan solo asegúrate de haber seleccionado el final. Sí, feliz con eso. Brillante. De acuerdo, entonces todo lo que tenemos que hacer ahora es asegurarnos de que todo el texto apropiado esté en su lugar, que por supuesto puedes rellenar si quieres. Y estamos esencialmente terminados. Ahora todo está prácticamente hecho. Entonces, solo alejemos el zoom y veamos qué tenemos. Entonces otra vez, tal vez hemos rectos un poco de su versión siempre tan levemente. Cuando se trata de los diferentes paddings y lo que tienes. Pero tenemos, en su mayor parte todavía construido la mayor parte de esto nosotros mismos con una especie de copiar y pegar ese texto sólo por velocidad. Pero de nuevo, todo el punto de este proyecto de clase es simplemente conseguir que empiece a acostumbrarse a usar XD. Por lo que siempre pienso que la mejor manera de empezar lente algo es sólo tratando de emular algo más. Así que ojalá hayas encontrado esto útil y ojalá te haya inspirado para empezar quizá a crear tus propios proyectos, que es lo que esperemos hagas para los próximos proyectos de clase, que ojalá compartirás en la sección del proyecto de la clase Skillshare. Pero ojalá todo eso te quede bien. Esperemos que disfrutes haciendo eso. Y te veré en el último video. 31. Intenta mis cursos de flujo web en Skillshare: De acuerdo, Entonces si has llegado a este video, significa que estás una vez más al final del curso. Ahora con tus nuevas habilidades encontradas con diseño web, puede que ahora estés pensando, bueno, ¿cómo realmente hago que se creen estos sitios web? Y como sucede, sí tengo otros dos cursos sobre Skillshare, que son sobre Webflow, una herramienta llamada Webflow, que básicamente es una herramienta de desarrollo web donde te permite crear sitio web es visualmente ahora Webflow es un poco diferente a algo que decir como Wix u otros constructores de arrastrar y soltar. Se pueden arrastrar y soltar elementos, pero es una herramienta profesional de desarrollo web y es lo más cercano a un anhelo al que se puede llegar sin la necesidad de saber realmente codificar. Entonces si creas un diseño que te guste, el look de, este curso te ha ayudado a hacer eso. Si ahora quieres empezar a desarrollar sitios web, ahora puedes combinar las dos habilidades juntas viendo mis cursos de adelantamiento en Webflow. Así que ve hacia allá y echa un vistazo y avísame qué piensas y dale una oportunidad, a ver si puedes conseguirlo desarrollado usando tus nuevas habilidades encontradas desde el diseño. Y entonces los cursos del sitio web podrán, te ayudarán a desarrollar los sitios web también. Si quieres, ve más por mí, tengo un canal de YouTube. Si solo escribes algún Harrison Webflow, más probable es que me encuentres ahí. Espero que te haya parecido útil este curso, y espero que te haya dado al menos un punto de partida para empezar a crear tus propios diseños. De acuerdo, gracias una vez más, tomando el curso, avísame y revisa lo que piensas de ello y te veré en el siguiente curso.