Jerarquía y espaciamiento visual en el diseño web | Gil Huybrecht | Skillshare
Menú
Buscar

Velocidad de reproducción


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

Jerarquía y espaciamiento visual en el diseño web

teacher avatar Gil Huybrecht, Ui & UX designer, Branding

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:08

    • 2.

      ¿Por qué es importante de la jerarquía visual?

      1:18

    • 3.

      Diferentes formas de contraste visual

      2:19

    • 4.

      Mi principio de agrupación

      2:58

    • 5.

      Espacio y equilibrio

      2:10

    • 6.

      Ejercicio: verte o sujeto

      0:53

    • 7.

      Ejercicio: esquemas de alambre

      4:13

    • 8.

      Ejercicio: hacer el diseño

      50:00

    • 9.

      Proyecto de clase

      0:57

    • 10.

      Round

      0:46

    • 11.

      Lección de extra: hacer un giro de dribbble

      3:19

  • --
  • 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.

10.428

Estudiantes

141

Proyectos

Acerca de esta clase

Primero de todo gracias por ver la clase y espero que aprenderé algo sobre el diseño de web. Mi nombre es Gil y la interfaz de usuarios y diseñador de experiencia de la que de la uso.

Esta clase trata de la jerarquía visual en el diseño y el espaciado. Aprenderé de diferentes formas de jerarquía visual, y cómo utilizar buen espacio para crear un estilo de diseño minimo de diseño de web.

En primer de todo, haré una pequeña parte de la teoría pero de lo que pasaremos a un ejercicio en donde te explicaré cómo puedes usar esa teoría en tu trabajo. Esta clase es para diseñadores principiantes e intermedios de que ya tienen los fundamentos de fotos.

Al final de esta clase tendrás una buena comprensión de lo que es la jerarquía visuales y el espacio y podrás utilizarlo en tu trabajo para de crear un estilo minimalis ¡Comencemos!

Conoce a tu profesor(a)

Teacher Profile Image

Gil Huybrecht

Ui & UX designer, Branding

Profesor(a)

Hi everyone, my name is Gil Huybrecht. I'm a UI/UX designer & skateboarder from belgium. I have several years of experience designing websites and brands for various clients. Have a great day and let's make something awesome together!

Ver perfil completo

Level: Intermediate

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 primera cuota de habilidad de la historia. Cierra en primer lugar, grandes cosas para revisar la clase. Espero que hayas aprendido algo hoy. Mi nombre es Shell, y soy diseñador y monopatín de Bélgica. Vivo junto a mi novia son dos perros y también tenemos dos conejitos. Mi trabajo se centra principalmente en un estilo limpio y minimalista para el diseño Web. Y eso es lo que te voy a enseñar hoy. Esta clase se trata de la jerarquía visual y el espaciado en el diseño. Voy a hablar de por qué las jerarquías visuales importan las diferentes formas en que definimos los contrastes visuales y cómo usar la base de los srenos para llegar a un estilo minimalista fuera del diseño Web. En primer lugar, vamos a pequeñas partes de la teoría. Pero luego pasaremos a un divertido ejercicio donde te explicaré cómo puedes usar una teoría en tu propio trabajo. Esta clase es para diseñadores principiantes e intermedios que ya tienen los fundamentos de photoshopped down. Pero claro, todos se van a unir a mí al final de esta clase. Tendrás una buena comprensión de la ira visual contra base, y podrás usarlo en tu propio trabajo para llegar a un estilo mínimo para el diseño . Entonces, empecemos 2. ¿Por qué es importante de la jerarquía visual?: Oigan, chicos. Y gracias por inscribirse en la clase. Entonces, como dije en la intro, vamos a empezar con alguna teoría en esto. Primero escucha, vamos a hablar de la importancia fuera de la jerarquía visual. Entonces, primer lugar, los blancos, importancia de la jerarquía visual. Bueno, jerarquía visual es importante para guiar a un usuario a una página web, por ejemplo, mediante el uso de títulos, subtítulos, párrafos, etcétera. Puedes hacer que sea mucho más fácil para un usuario despellejar a través de una página. Tienes que pensar en qué información es la más importante para un usuario y poner eso en para en el título, por ejemplo, como la leyenda en las golosinas. Si le das a la gente un bloqueo masivo de textos, lo más posible es que 99 de cada 100 no se moleste en leerlo. Pero, ¿por qué es eso? Bueno, eso se debe a que la mayoría de los humanos son pensadores visuales y, sin duda un procesadores. Aquí puedes ver un ejemplo que hice para dejar el punto más claro a la izquierda. Tenemos un texto de bloque regular, y a la derecha, tenemos el mismo texto. Pero éste está dividido en párrafos y títulos. El de izquierda me parece un dolor empezar a leerme, pero el de la derecha se ve mucho más invitante a leer Y por último pero no menos importante para esta lección. ¿ Cómo definimos o establecemos una jerarquía visual mientras hacemos eso mediante el uso del contraste visual , pero más sobre eso en la siguiente lección. 3. Diferentes formas de contraste visual: Entonces, como dije en la lección anterior, establecemos la jerarquía visual mediante el uso del contraste visual. En esta lección, voy a pasar por las cinco formas diferentes de contraste visual su tamaño, color, alineación, carácter y, carácter y, último pero no menos importante, animación. En primer lugar tienes talla. Esta es probablemente la forma más utilizada de contraste visual. Como ves, el que es más grande en tamaño llama la atención. Al igual que puedes ver en este ejemplo, se utiliza para el título, El título Gramps. Más de la atención del usuario porque es más grande en tamaño. El segundo camino del contraste visual. Erudito. Este también es uno muy popular. Como ves, el que tiene el auto más brillante llama la atención. Esto se puede usar, por ejemplo, en botones o acciones de cultura como se ve en este ejemplo, trabajo principalmente con para tonificar núcleos como azul claro, gris o blanco, y luego uso, como un color brillante para las acciones de cultura. De esa manera, el usuario puede entender fácilmente qué partes son clicables y cuáles no. El siguiente es el alineamiento. Este no es tan usado tanto como los anteriores, pero puede ser bastante cool. Ves que el círculo medio no es la línea con los otros. Debido a esto, llama más la atención para morir. En este ejemplo, se ve que el uso de esta forma de contraste visual puede hacer una composición interesante y dibuja la mirada hacia abajo al texto. El 4to 1 es carácter. Esto puede ser un montón de cosas. Ya ves. Elegí por la redondez de la forma para que llamara más la atención. Pero también puede ser como textura, sombras y otros efectos que la diferencian del resto. En este ejemplo, se ve que el rectángulo blanco con sombra llama más la atención por su carácter . El último es la animación. Este puede ser uno muy poderoso. Si lo usas bien, puedes ver que el Círculo Medio llama la atención por su movimiento. En este ejemplo, no quería usar texto en imágenes, pero quería mantener la sensación vacacional. Por lo que primero mostré una imagen completa con la inferior y luego te revelo yo con animación, puedes llamar la atención sobre objetos, hacer las luces para cargar animaciones, y así es muy cool. Pero es fácil exagerar rápidamente, así que mantén asentada la animación 4. Mi principio de agrupación: en esta lección, voy a explicar cómo agrupo elementos y cómo arreglé esos grupos para conseguir una tubería mínima en tu diseño. Entonces, primer lugar, lo importante que hay que tener en la parte posterior de la cabeza es que hay que ver elementos como grupos. Pero esto se hará más claro hacia el final de esta Escuchar. lo que recibió un ejemplo sencillo que hice con a la imagen de la izquierda y a la derecha, tenemos sofocante y un párrafo. Entonces si echamos un vistazo a cómo agrupo estos temas, podemos ver que solía aquí rectángulos azules para mostrar la izquierda y la derecha de la composición. Las grandes líneas serían donde los británicos del lado izquierdo, sólo tenemos un elemento, así que eso es un simple en la imagen. Pero a la derecha, tenemos dos elementos. El título y párrafo. El lugar de onda esos objetos es el siguiente. Se mira el título y el párrafo en su conjunto, como si fueran un grupo. Entonces solo lo colocas en medio del rectángulo azul que está encima, como puedes ver aquí a la derecha. El texto está centrado horizontal y verticalmente, y eso es lo que le da la sensación equilibrada. Entonces ese fue un ejemplo bastante sencillo. Pero ahora echemos un vistazo a lo más complicado que veas en este ejemplo. Tenemos un montón de cosas pasando. Tenemos la imagen. Tenemos el título subtítulo Rectángulo de párrafo con algunas cosas de Aikens USB en él, pero vemos que el mismo principio se aplica aquí simplemente mucho más complicado. Empecemos con la parte superior izquierda. Se puede ver aquí que tenemos tres ítems Subtítulo de título y un párrafo En primer lugar espacié subtítulo titulado Hacia el otro. Esos dos juntos son un grupo ahora para mí. Entonces espacio ese grupo en su conjunto hacia el párrafo y los que atraviesan esas calles juntos nuevamente ex grupo fuera de los suyos, que podemos utilizar para espacio para la composición más adelante. A continuación, hagamos ángulo directo en la parte inferior con los iconos aquí que tenemos dirigiendo sobre, vamos a trabajar y ahí hay cuatro elementos, así que dividimos el rectángulo en cuatro piezas iguales. Esos son los cuatro rectángulos azules que ves. Esos son ahora los lugares donde van a ir los iconos. Entonces para los Aikens, los crecí cada vez junto con la palabra debajo de ella. Esos son los rectángulos rosados que ves, y ahora solo es cuestión de colocarlos en medio de los cuatro rectángulos azules. Entonces eso es para el rectángulo y finalmente a la derecha. Tenemos sólo una imagen, como en el ejemplo anterior. Por lo que ahora tenemos tres grupos principales con los que trabajar con tenemos que imagen a la derecha. Tenemos el rectángulo, y tenemos el grupo con título de subtítulo y párrafo. Por lo que ahora es más fácil el espacio del dedo del pie. Estos tres grupos hacia sí mismos, entre sí, en lugar de tener todos esos elementos separados al espacio, me di cuenta, pueden sonar complicados por ahora, pero cuando empiezas a usar este principio, vendrá todo lo médicamente con el tiempo. Cuando estás diseñando 5. Espacio y equilibrio: esta lección. Voy a hablar de cómo tu mejor lugar y espacio, los grupos de los que hablamos en la lección anterior. Utilizo el método de espaciado principalmente para libros de texto, pero puede aplicarse a cualquier cosa. De verdad. Entonces ahora vamos a cubrir cómo puedes colocar tus grupos de una manera equilibrada hacia el fondo o salir o cualquier espacio que tengas para trabajar. Entonces aquí vemos un ejemplo sencillo con sólo un título en un párrafo. Digamos que el rectángulo blanco con gota superficial es un espacio en el que tienes que trabajar. Bueno, aquí vemos cómo coloqué este libro de texto. Entonces en primer lugar, se ve de nuevo que veo esto como un párrafo de grupo Tailandia. Y al ver esto como un grupo, sólo tenemos un rectángulo imaginario para centrarnos en el fondo simplemente centrando el rectángulo imaginario vertical y horizontalmente. Conseguimos una sensación muy equilibrada, y eso es lo que vamos a buscar. Entonces cómo se aplica cuando estamos trabajando en un diseño. Bueno, recibió una simple división pocas con las que hice a la derecha de la imagen y a la izquierda, tenemos nuestro espacio para trabajar. Aquí se puede ver que el texto de la izquierda apenas está centrado. Al igual que en las diapositivas anteriores, acabo de ver nuevamente el título y párrafo como grupo. Y luego coloqué eso en el centro horizontal y vertical fuera del espacio en el que tenía trabajo del dedo del pie. Puedes utilizar esta técnica de colocar objetos y elementos casi en todas partes en solo cuestión de definir en qué espacios tienes que trabajar. Y por último pero no menos importante, quería decirles cómo defino el ancho de un bloque como se ve en las diapositivas. Para mí, una buena relación es del 60% para los objetos que estás colocando y del 40% de espacio ancho. Eso es 20% de cada lado, menos espacio en blanco que le das onsides. A la carta le va a tener una sensación de cría. Si le darías más, puede llegar a ser más mínimo y reproductivo. Pero hay que tener cuidado de que las frases sean de a menos de 5 a 8 palabras verticalmente. Se aplica lo mismo, pero depende del espacio en el que estés trabajando. Entonces eso es todo para la parte teórica. Ojalá no los aburriera demasiado, pero ahora vamos a ir a un ejercicio donde te explicaré cómo puedes usar todas estas cosas en tus diseños. 6. Ejercicio: verte o sujeto: Ahora vamos a empezar el ejercicio, y aquí es donde verás cómo podemos usar una teoría. Nos acabamos de ir y puedo usar eso en tu propio trabajo. Entonces, antes que nada, voy a explicar cómo hago un breve para mí mismo para este tipo de ejercicios. Entonces para las dimensiones, no voy a hacer una página completa. Voy a hacer ah, vista completa fuera de pantalla para un sitio web y para el para el tema. Voy a hacer algo que me interesa, y voy a trabajar con algo va a estar girando en torno a los lugares de trabajo escandinavos. Vamos a utilizar un flujo de trabajo sencillo para estos ejercicios. Entonces vamos a hacer primero vamos a hacer un marco de alambre para sacarnos una idea de la cabeza, y luego vamos a empezar con el diseño para este ejercicio. No voy a usar un genial, pero puedes usar uno si quieres. Entonces empecemos con un marco de alambre 7. Ejercicio: esquemas de alambre: Por lo que ahora vamos a empezar al simple marco de alambre. Um, ya me caí. Dejaron seis libros aquí en los que voy a trabajar. Y la razón por la que hacemos esto sólo para sacarnos desordenados de la cabeza mucho más rápido de lo que, como, podríamos hacerlo en photoshop o algo así. Entonces, um, tengo mis seis cajas aquí. Estas representan las páginas, y yo sólo voy a empezar a dibujar algunos d. Entonces, en realidad, lo primero que necesito pensar en esto con qué artículos y contenido voy a trabajar. Entonces voy a trabajar con un título y algún texto una imagen sobre estoy trabajando con el lugar de trabajo escandinavo . Entonces probablemente voy a hacer algo con, como, como, un producto destacado en una gran dirección de culto. Gran colección para que el usuario la vea para que pueda hacer clic a una página de detalles mucho más fácil, más fácil y el producto de la característica para que haya algunos metadatos donde el usuario pueda trabajar. Entonces voy a empezar con una simple división para ti, donde podría tener, como, como, la imagen de la derecha. Podríamos tener el local aquí y como un menú que puedo escuchar aquí dentro. Podríamos tener un texto destacado producto podría ser como en una tarjeta aquí con una superposición sobre la imagen o algo que quisiera, dijo Button. Están aquí otra, y esto es solo que tienen algunas ideas rápidas que son para que no tenga que ser logo perfecto . Podemos trabajar con algunas líneas diagonales para la imagen. Podría podría ir aquí. Ahora podemos trabajar aquí con un producto destacado y luego aquí podríamos tener, como el texto con el llamado a la acción. Estos libros podrían ser como un llamado a la acción, y aquí podríamos tener, como un split pocos como éste. Pero de otra manera, como así podría haber, como, como, el menú inferior aquí Aiken o un menú completo podría tener, como algunos el texto venir por aquí. Esta podría ser la imagen y sería genial tener un carrito con el producto destacado, como un exceso aquí y para la acción cultural. Podríamos tenerlo como aquí con un angosto o algo podría ser como aquí y totalmente a ti. Entonces aquí voy a tratar de trabajar con algo en tres filas así que dividirlo en tres filas . No, voy a tener la imagen en el menú medio de Loga. Aiken, algún texto, y luego podríamos dividir esto. Entonces tenemos un lindo aquí a la izquierda. Estos son los mismos. Y luego esta fiesta es a pedazos, y entonces esta parte podría ser, como el producto destacado aquí, ¿ verdad? Soy producto. Y aquí podríamos tener, como, la c t a. Así que eso es, um, Entonces podemos probar algunas otras cosas. Al igual que podríamos incluso trabajar con un círculo o algo así. Entonces, así de alrededor de las formas con la imagen yendo aquí, producto destacado podría ser como aquí en una cancha o algo así. Ahora, podríamos tener nuestro texto con un logotipo de llamada a la acción. Sólo menú puedo por aquí. O simplemente podemos cambiarlo. También tenemos siempre el texto de la izquierda, así que prueba uno diferente con la imagen de la derecha a la izquierda, quiero decir, lo siento. Y luego aquí hay algo de texto. El destacado podría ser como producto de borde a borde. Ya sabes, podríamos tener, como, como, un llamado a la acción por aquí. Bajo y un menú, Aiken. Entonces cuando estoy viendo esto. El que más me llama el interés es éste y éste. Pero creo que voy a trabajar con este. Entonces ahora vamos ahora vamos a ir al ejercicio te explicaremos cómo podemos hacer este marco de alambre que hice en remolque el diseño. 8. Ejercicio: hacer el diseño: Entonces ahora vamos a empezar con el ejercicio. Acabo de abrir tienda de fotos. Vamos a hacer un nuevo documento. Voy a llamarlo espacios de trabajo escandinavos. Van a ser 1500 píxeles de ancho y unos 850 de alto. La resolución va a ser de 72 píxeles por pulgada y el color Moz va a ser rgb. Entonces solo presiona OK? Y ahora tenemos Ah, este lienzo en el que trabajar. Lo primero que voy a hacer es que voy a hacer un tablero de arte fuera de él para que puedas hacerlo haciendo click y aguantando aquí en la mudanza a y luego sacarás este pop. Simplemente puedes elegir por Ardmore Tool y luego empezamos aquí en la esquina de parada izquierda. Se puede hacer click y dirigir. Eres inteligente, surgirán guías, y luego solo puedes arrastrarlo a la esquina inferior derecha, y luego verás aquí en el panel de capas que no tenemos tablero de arte. Entonces voy a llamar a esto espacios de trabajo escandinavos. Entonces, ¿no es así? Aquí la capa blanca es solo un fondo, así que no tienes que preocuparte por eso. Entonces la razón por la que hice en tablero de arte de esto es Ah, eso va a ser fácil de duplicar. Los congoleños estaban trabajando. Entonces ahora lo que vamos a hacer es que vamos a alejarnos, y vamos a tratar de recrear nuestro marco de alambre que hicimos. Entonces el que elegí tenía una imagen en el medio. Entonces voy a pasar a la herramienta de rectángulo derecho a ti. Entonces solo voy a establecer aproximadamente un rectángulo aquí en el medio haciendo clic y arrastrando. Entonces eso es eso. Simplemente te voy a dar un color gris claro. Entonces sé que eso está ahí. Puedes ajustar el núcleo con solo hacer clic aquí en la terminal directamente. Gary, consigue un color, papá. El motivo por el que estoy poniendo el rectángulo ahí es porque va a ser el marcador de posición para la imagen. Entonces aquí a la derecha, vamos a tener dos cuadras, la para esto para la dirección de culto y la para el producto de características. Entonces solo me voy a llevar esto aquí con todo chieftain drag, así que hacemos un duplicado de ello lo va a hacer un poco más oscuro para poder ver la diferencia entre los dos y luego con bateo go go meses t para transformarse. Obtienes estos libros limitadores y puedes arrastrarlo aquí para hacerla más pequeña, solo lo vas a arrastrar aquí. Ves al tipo listo que significa que está en el medio. Por lo que sólo voy a hacer con la muerte y luego comando haciendo clic en este para asientos de selección automática comprobados. Pero cuando presioné comentarios , sigue. Entonces cada vez que presiono comando y hago clic en algún lugar seleccione esa capa. Entonces, por ejemplo, ahora esta seleccionada. Si mando click aquí, se selecciona el otro. Entonces voy a ir por aquí otra vez. Voy a hacer lo mismo que hice con distritación de seleccionados. Voy a presionar y cambiar y arrastrarlo hacia abajo. Pensé que golpea la esquina del otro y estoy veo que hay una línea de un píxel entre ellos, así que solo voy a golpear flecha arriba para moverla. Por lo que están el uno contra el otro. Voy a hacer eso un poco más oscuro, también. Entonces ven aquí, en realidad, lo que hicimos ahora si solo recreamos nuestro marco de alambre así que va a ser el espacio en el que voy a estar trabajando. Es otra. Tenemos este conjunto, nuestra esposa marco. Voy a ir a tratar de encontrar una buena imagen para poner aquí este rectángulo. Entonces voy a ir a Luke Room y voy a ir a intereses. El vestido es un buen lugar para buscar imágenes y para obtener algo de inspiración sobre imágenes y cosas. Entonces sólo voy a buscar aquí el espacio de trabajo escandinavo. Veamos qué imágenes van a aparecer. Entonces como que ya me gusta este diferente. Diferente está un poco ocupado aquí. Este es uno bonito. Entonces sólo ir del dedo del pie, click en él y luego un simple truco para que no tengas que guardar la imagen siempre es Sí , puedes simplemente hacer clic derecho sobre ella y una copia de imagen, y puedes ir a photoshop on. ¿ Tienes que seleccionar el rectángulo aquí donde vas a colocar tu imagen en el lugar para ello, y luego presionas cuota de dos meses para pegarlo, y así se convertirá en la capa encima de ella. Por lo que ahora vemos que las imágenes se sueltan del desde el positor. Entonces si quieres que la imagen solo aparezca en el rectángulo que tenemos aquí. Hay un simple tres crítico, una mezquita de recorte, y podemos crearla sosteniendo Ault y haciendo clic entre la capa de imagen y la capa marcador de posición. Entonces ves esta flecha. Entonces si hago clic, sólo se muestra en la capa que ha estado necesitándolo. Entonces aquí que el ángulo directo. Entonces si ves ahora, si hago clic en la imagen y la arrastraré para verla, solo que siempre se queda en el rectángulo. Entonces eso es bueno para no. Entonces tengo esta imagen aquí y tal vez podríamos probar algunas otras. Es realmente fácil para que puedas volver a los intereses, puedes desplazarte un poco hacia abajo, ver qué tipo de imágenes hay aquí. Ah, algo así como éste. Por lo que incluir sobre Pinterest es cuando encuentras una imagen que te guste, siempre puedes desplazarte hacia abajo y Pinterest te dará las imágenes sugeridas. Entonces aquí tenemos un montón de más imágenes. Las canciones son geniales como esta, pero ésta me gusta, creo que voy a ir con ésta. Entonces lo mismo, ¿verdad? Haga clic, copia, imagen, luego vea que estamos en el mismo lugar aquí en la capa. Llénalo. Entonces estamos aquí y solo puedo volver a entrar a V y verás que aquí aparece la imagen. Pero se ve de nuevo, está suelto del desde el positor. Por lo que podemos simplemente volver a presionar ault entre y hacer clic entre las dos capas. Y voy a guardar estas dos imágenes porque cuando haga clic en el ojo aquí en esta capa, me va a mostrar la imagen ha sido Come it. Por lo que más adelante cuando estamos un poco más allá en la composición, podemos ver la diferencia. Lo que los regalos de sentir con las diferentes imágenes. Entonces sólo voy a colocar. Sólo voy a volver a hacer clic en el I. Vemos la imagen. Voy a venir y dar click en él. Entonces lo tengo seleccionado que lo voy a arrastrar en su lugar. Entonces eso es todo. Ahora siente que tal vez es un lugar un poco demasiado estrecho, aunque eso hice Así voy a comando click en este en turno de comando Haga clic en el de abajo. Entonces veo aquí que tengo las dos capas seleccionadas. Simplemente voy a comprimir comando t de nuevo para transformar y sólo voy a hacerlos un poco más pequeños en con Tal vez como este centro numérico. Y entonces aquí tenemos que hacer más grande el positor. Por lo que puedo simplemente hacer clic aquí en el rectángulo otra vez o colocar sobre la misma cosa. Vamos, T arrástrala. Ahora podemos reemplazar. Podemos arrastrar un poco su imagen. Ahora veo que el rectángulo es demasiado blanco en el costado. Entonces de nuevo, seleccionas dirigir todo monte para transformar, y puedes traerlo de vuelta aquí. Por lo que presiona entrar imagen aquí, va a hacerla un poco más pequeña. Así que así, So Okay, me gusta eso. Entonces ahora que hemos hecho esto, sólo voy a nombrar mis capas. Por lo que este es un marcadores de posición que dos imágenes van a mandar dan dan clic en las otras dos. Entonces tenemos el truco, la tria en las tres capas. Los tenemos seleccionados, y voy a presionar comando g para hacer un grupo de ello. Por lo que aquí puedo nombrar la imagen de grupo enter. Y aquí tenemos, como, como, dos cuadras. Estos van a cambiar, probablemente. Entonces no les voy a dar nombres, el fondo y igual que un color blanco, pero sólo lo voy a borrar porque automáticamente es blanco. Entonces eso es todo. Entonces lo siguiente que voy a hacer es poner toda la información aquí que yo quiero poner en el en este diseño. Entonces antes que nada, así voy a Presti a sacar la tipografía. Entonces solo voy a hacer libros de texto aquí y recordar. Como dijimos en la teoría, yo quería estar, como, 60% en el que fuera del lugar tenemos que trabajar. Entonces aquí sería el rectángulo blanco que el espacio donde podemos trabajar Así que sólo voy a hacerlo más o menos como 60% va probablemente algo va a ser algo así. Simplemente lo voy a arrastrar hasta el medio y luego el título con el que voy a trabajar sólo van a ser espacios de trabajo escandinavos. Voy a hacer que salga de la línea aquí. Entonces eso sólo va a poner su El frente no es el que voy a usar, probablemente, probablemente, sino que acaba de establecer un defecto aquí para mí, y luego voy a volver a ir a Internet. Vas a hacer un nuevo top y voy a buscar base de Obras Escandinavas y luego involucra. Ver, vemos aquí que tenemos algunos artículos. Al igual que aquí, por ejemplo, éste. Ya ves, tenemos algo de texto aquí trabajo del dedo del pie con Sólo voy a ver aquí. Si puedo copiar y pegar algo de eso como estos 25 no necesitamos eso. Pero sólo voy a tomar, como, aquí, diseñado para ello en el espacio de restricciones. Algo hasta que vas a imprimir comando. A ver, sólo un par de veces para estar seguros. Y luego tocaremos comando para volver a la tienda de fotos. Entonces ahora otra vez, voy a hacer. Sólo voy a copiar estos libros de texto. Entonces eso es lo mismo con solo voy a Presti. Y luego puedo Puedes seleccionar el texto aquí en este cuadro. Voy a presionar el comando A para seleccionarlo todo. Voy a presionar el retroceso para eliminarlo y comando V para pegar el texto largo que tenemos. Y voy a cambiar el texto del cuerpo a ah, tiempo telefónico utilizado mayormente para texto corporal en fuente calaverada en spro. Se va a llevar el normal. Es un funk libre. Puedes descargarlo por teléfono. Ardilla creo que solo puedes googlearla. Lo encontrarás. Entonces eso es eso. Voy a lograrlo, como, 17 puntos, 17 puntos, y voy a ir por encima de este penalti el personaje y no tengo es que la altura de línea . Y ahora lo vemos establecido. Es demasiado grande. Entonces me voy a quedar aquí y voy a dar click y dirigir ya ves, en las frases que va a salir. Y ahora queremos algo bueno y codicioso. Entonces, así, esto sería para Jim juntos para mí. Alguien que lo haga un poco grande. Más grande. A ver que todos los textos pueden caber ahí dentro. Entonces lo arrastré hacia abajo. Entonces tenemos texto de retención aquí, así que eso está muerto. Y quizá vaya a darle un poquito. Nous, tal vez algo como tú no tienes que usarnos tanto de un texto como este. Pero podemos, por ejemplo, cortarlo aquí, así que tengo un poco menos de texto con el que trabajar. Recuerda, no es un trabajo de cliente. Simplemente diviértete y para probar algunas cosas nuevas. Entonces ahora tendremos leyendo esto. Por lo que da click aquí. Entonces ahora está de vuelta a esto. De acuerdo, eso es todo. Lo siguiente que quiero es Ah, Baja. Simplemente voy a dar clic aquí y escribir algo. Um, funciona base, por ejemplo, Voy a hacer esto como, uh, 20 puntos, por ejemplo, en esto, recuerda, sólo estamos configurando todo. Esto no es definitivo ni algo así, pero vamos a lograrlo. Vamos a cambiarlo. Teoh. Qué va a ser Vamos a ver qué, como cómo se va a sentir cuando tengamos todo el set de composición. Entonces vemos aquí. He presionado el espacio un par de veces que solo para hacer clic y dirigir un bolígrafo dentro de la imagen . Entonces ves el cursor cambiando a la mano cuando presiono el espacio, y luego puedes hacer clic y arrastrar por ahí. Es bastante fácil. Um, entonces lo siguiente que vamos a hacer es que vamos a crear un menú. Yo puedo Así que va a ir por aquí, probablemente. Entonces sólo voy a tomar la herramienta de línea y recibió set en tres píxeles. Voy a cambiarlo a, y me voy a desplazar todos para acercar así como esto. Y luego, como algo así, como 66 700% o algo así. Yo sólo voy a arrastrar una línea algo así. Al igual que 20 pixeles de ancho que, como dije antes de que direccionamos ángulos haga clic aquí en la terminal y se puede cambiar el color , así que voy a hacer que presione negro. OK, entonces queremos Tenemos ganas de tener, como, como, un menú de hamburguesas. Por lo que queremos tres de estas rayas para que solo podamos duplicar esta pulsando comandos. Y Jay, Entonces, así, ves aquí va a tener una copia. Entonces ahí está eso y luego lo haremos otra vez para que y seleccionemos este y presionaremos turno y un camino abajo, por lo que esto lo mueve 10 píxeles. Entonces si hacemos eso con el otro, entonces vamos a tener esto. Pero si te alejas, vamos a retroceder el dedo del pie 100% del tamaño real de la vista para ver cómo se ve cuando tenemos nuestro zoom alejado y una manera fácil de volver al 100% este comando turno uno tan así. Y entonces habremos suplicado esto. Entonces sólo voy a Bennett otra vez aquí mismo. Entonces si seleccionamos estas capas de árbol, esos son el menú que solo puedo presionar. Vamos, G. Haz un grupo de ello. Usted lo nombra. Menú. Yo puedo. Entonces lo que veo ahora es que es demasiado alto y que las líneas están demasiado, demasiado lejos el uno del otro, así que va a venir justo por aquí. Entonces quiero que estos estén un poco más cerca el uno del otro, así que voy a así, como este de aquí, voy a tomar mis flechas. Voy con el dedo del pie. 123 De acuerdo, se ve mejor, y luego seleccionaremos el son diente y 123 Así que eso empieza a lucir un poco mejor . Entonces voy a volver a hacer zoom todos para volver al menú, e iba a hacerlo un poco más dinámico. Entonces lo que voy a hacer es que voy a cambiar el ingenio para apagar las luces. Voy a hacer esto presionando a es el dedo del pie de selección directa. Esto es ah a donde se pueden seleccionar puntos de anclaje con. Entonces voy a presionar un ver aquí. No son las herramientas blancas. Voy a dar clic y arrastrar, y luego tenemos el dedo de selección directa. Voy a hacer clic en esto No seleccionaré estos dos puntos izquierdos, pero solo arrastrarlos sobre ellos y dentro con las teclas de flecha puede hacerlos un poco más cortos así . Y no hay reglas establecidas para esto es solo que se puede experimentar con esto. Puedes probar tantas cosas si quieres, pero sé como yo sé que quería ser un poco así. Entonces tenemos, como, como, tres ingenio diferentes ahora. Y yo sólo voy a ir a ver de nuevo cómo se ven en tamaño real. Voy a presionar comando turno uno otra vez. Suficiente con facilidad. mí me empieza a gustar esto, Pero tal vez están un poco demasiado alejados el uno del otro. Entonces voy a seleccionar otra vez la más baja, la del medio, y luego voy a presionar una tecla hacia arriba, y voy a tener que mover los 12 píxeles inferiores. Entonces ahora estamos llegando a algún lugar. De acuerdo, dejemos eso por ahora. Eso también lo hace. Ahora vamos a ver qué podemos hacer para el tamaño del pliegue. Ah, son, o los huérfanos en general. Entonces esta es una especie de mis formas de texto de cuerpo goto, pero como que me gusta así que creo que voy a mantener eso va a seleccionarlo todo. Y creo que tal vez sea un poco demasiado a blanco ahora. Los libros de texto. Entonces voy a seleccionar esto. Voy a tomar este punto de anclaje aquí del libro de texto. Voy a arrastrarlo un poco hacia abajo y un poco hacia la izquierda, así que me gusta la muerte. Y para este campo, que me gusta este teléfono funciona en casi todos los pesos y tamaños mayúsculas. En minúscula. Un frente multi funcional bastante bueno. Pero voy a ir con algo lindo. Tipo de ajuste aquí son un poco divertidos, supongo, en juicio por Duda. Entonces tenemos aquí Duda, y vamos a elegir por un peso pesado. Y la razón de eso es que quiero tener un buen Contras entre el texto de bala y el título para que el título realmente salga a la luz. Entonces ven aquí que el título que tiene especie de ajuste adecuado. Se puede tratar de hacer lo grande, más grande tal vez un poco más pequeño. Algo así y luego nos vamos Teoh, ve que el espacio entre los dos dedos como el título de escandinavo y espacio de trabajo. El espacio entre dos perra del dedo gordo del pie demasiado grande. Y luego, al sostener Ault y usar tus teclas de flecha, puedes cambiar la altura de la línea. Entonces si usas Ault, presionas alterna. Utilizas la prensa iraquí semillas UPI que se está haciendo más pequeño, el espacio. Eso también lo hizo. Ve cómo ese look ahí que se ve un seleccionado. Entonces voy a dar click aquí. Entonces eso ya empieza a parecerse a algo. A lo mejor el espacio aquí entre estos dos, ahora ha sido demasiado. Voy a mover un poco el texto de bala. Sí, así que me gustó ya es tal vez el todo. Como dije antes de la teoría, tenemos que ver esto como un grupo. Entonces si ves esto como un grupo, puedes simplemente usar un rectángulo simple para ponerlo en el medio. Casey así. Y si le damos un color, se puede ver el espacio entre él y luego todo directo para moverlo. Algo así no tiene que ser perfecto por ahora. Entonces ahora vendemos estos dos como si fueran por así decirlo un grupo, y podemos moverlos así ¿sería algo más parecido en medio? Entonces ahora voy a borrar distritación es otra vez porque no son parte del diseño. Pero ahora ya ves, está empezando a parecer algo. El motivo por el que puse aquí el logo en la parte superior porque Lois, siempre para mí la izquierda en la parte superior porque la gente siempre lee de izquierda a derecha. Y lo primero que quieres que la gente vea cuando vienen en un sitio web es lo más bajo de tu empresa. Entonces por eso lo puse por ahí, el local aquí, el menú que puedo por aquí porque no tenemos suficiente espacio para que un menú entero lo escriba . Y lo guardé aquí en el espacio en blanco y no aquí. Por ejemplo, en el dedo del pie derecho tener esta parte fuera del diseño siempre para texto. Y este podría ser variable porque las imágenes se llaman direcciones o algo así. Entonces ahora voy a seleccionar estos dos sobre capas de texto en un grupo ellos texto y este es un grupo para el logo y luego puedes si eliges, puedes elegir si quieres. Si quieres hacer esto o no, Pero puedes poner, como, como, menú glower Aiken juntos y llamarlo de cabeza, por ejemplo, para que lo siguiente en lo que vamos a trabajar sea ah, dirección de llamada. Entonces creo que quiero hacer aquí es que quiero usar uno de estos libros y darle un color. Por lo que aparece. Y la razón de eso es que quiero que ese sea el llamado a la acción. Al igual que si la gente hace clic ahí, van a una página de detalles o algo sobre los espacios de trabajo escandinavos. Entonces voy a empezar tomando este libro y dándote el frío. Voy a ir con pero todavía algo azul ahora mismo un poco, ¿ verdad? Algo así. Yo sólo voy a dar esto, como, como, este gran tenedor de lugar aquí. Voy a darle un fenómeno de núcleo blanco para que no me moleste tanto. Entonces ahora que tenemos muerte, tenemos aquí para la dirección de llamadas, y yo sólo voy a tomar como, un rectángulo para mostrarte el espacio y me voy de pie trabajando. Entonces quiero tener, como, un buen espacio aquí donde trabajaré con mi texto. Entonces, como, aquí tenemos, como, 60% a 40 por ciento, por ejemplo, como aquí. Entonces aquí, voy a tratar de hacer lo mismo. Entonces lo que voy a hacer es simplemente montarme como un área de título para como podrías llamarlo. Entonces eso va a ser algo así otra vez. No tiene por qué ser perfecto. Por ahora, sólo voy a hacer que éste sea un poco más oscuro. Entonces señalé que el área que voy a trabajar así que lo primero que vamos a hacer es que vamos a hacer aquí vamos a hacer los textos para la dirección de culto. Entonces solo voy a presionar d otra vez para que aparezca la tipografía y voy a dar clic aquí, y luego voy a escribir algo como echar un vistazo a los espacios de trabajo, por ejemplo. Entonces ya ves que de esta manera demasiado grande. Entonces voy a dar clic aquí en el tamaño del teléfono, y puedes simplemente desplazarte aquí dedo del pie más fácil si es como ves, solo estoy desplazando aquí y rápidamente puedes ver lo que se ve mejor. Realmente no tienes que dar en los valores o algo que simplemente pueda desplazarse aquí. Entonces voy a hacer algo como esto. A lo mejor también puedes usar las teclas de flecha. Entonces tal vez algo así como 28. 26. 27. Algo así como 28 por ejemplo. Presionemos entrar. Entonces ya no estamos cambiando los lados del teléfono. Y entonces de nuevo, se ve que las dos líneas están demasiado alejadas. Entonces voy a presionar de nuevo a Ault con y luego a ti otra vez, como puedes usar la tecla de flecha para cambiar las alturas de línea. Entonces voy a hacer eso. Entonces algo como esto se ve bien y sólo voy a mamar V tres v acusando atajos de visa . Dedo del pie Solo trae la mudanza a otra vez. Entonces, así. Entonces si soy un texto o amamantar y volver al dedo del pie mover Así de nuevo, comando click. Para estar seguros de que hemos seleccionado eso, sólo voy a arrastrarlo hacia abajo. Entonces lo primero que veo ahora que tal vez sea demasiado pequeño, Así que sólo voy a, uh, uh primer día otra vez, seleccionar todo el texto, hacerlo un grande, más grande, grande, más grande, un poco más grande. Entonces algo así. Pero ahora las líneas están demasiado cerca el uno del otro otra vez. Sostén Ault y con las teclas teclas de flecha para presionar un poco hacia abajo. Entonces van a ser así. Simplemente voy a seleccionar este rectángulo y dar click en I. Así que no lo veo. Los niños que se ven bastante bien pueden hacer algunos ajustes más tarde. Entonces lo segundo que quiero tener aquí algo Teoh, llegar a la vista. Encima de este bloque hay algo en todas las gorras, un poco más pequeño frente. Eso es esto, um, nuestros espacios de trabajo, por ejemplo. Realmente no importa lo que diga ahí mismo, pero algo pequeño y mayúsculas suelo uso Monserrat porque es que funciona muy bien para este tipo de texto fuera. Entonces solo me voy a llevar a Monserrat y voy a usar, um mayormente uso semi calvo y luego aliento año otra vez. Voy por aquí y lo vamos a hacer todo gorras, probablemente lo va a hacer redondo. Yo mayormente para mayúsculas. En este escenario, usé como 12 puntos o máximo 14 así que voy a ir con riqueza aquí. Entonces lo que siempre pienso que funciona bastante bien con texto pequeño en mayúscula, pequeño es ah, el espacio entre letras para que podamos hacer eso más grande. Por lo que sólo voy a ir aquí, click aquí y dirigir. Por lo que las cartas iban a salir un poco el uno del otro como 200 o algo así. Y veo que eso le da también se suma al minimalismo porque las letras son ahora, tienen más espacio para respirar. Entonces ella va a dar clic aquí y arrastrarlo hacia abajo para que pudiera ser como si esto pudiera venir como aquí. Y luego voy a volver a dar clic aquí en este rectángulo y dar clic en el I. Y vería que tal vez se está inclinando demasiado a la izquierda. Por lo que solo voy a dar clic en este y vamos en turno, haga clic en éste. Entonces ambos los tenemos seleccionados, y luego lo voy a mover un poco a la derecha, tal vez un poco hacia abajo. Entonces algo como esto. Entonces lo único que creo que eso puede agregar a esto es como una flecha aquí y una estrecha siempre indica que te vas fuera de la página, que va a haber una nueva carga de página. Entonces el usuario ve la flecha cualquiera creo que 95% de descuento la gente sabe que van a tener una nueva carga de página. Entonces solo voy a ir por aquí a mi herramienta de forma personalizada. Y tengo algunas formas personalizadas aquí, Loaded in. Ver aquí yo de flechas. Yo lo haré. Haré una nota con un enlace a través de estos archivos donde se pueden descargar estas flechas, y voy a ir por, como, como, un tipo de flecha realmente delgada aquí, apuntando a la derecha. Entonces solo voy a arrastrar aquí así, ¿eh? Cambia el color negro para que podamos verlo. Y luego voy a acercar por todos, asumiendo de nuevo, arrastrando hacia el medio, y luego vamos a volver a hacer clic en Tipo A para herramienta de selección directa porque quería ser un poco más largo, así que estoy sólo voy a seleccionar estos puntos de anclaje y luego qué turno y mi aero a la izquierda, puedo hacerlo más largo. Entonces sólo voy a intentar algo como este Opresivo V otra vez para traer la herramienta de movimiento. Vamos, cambia uno para volver al 100% para ti, y entonces yo sólo soy un sello. Tengo mi flecha seleccionada. Ir a nombrar es cada rápido real así, y luego voy a hacer clic y arrastrar y posicionarlo de la manera correcta. Entonces ahora voy a ver que está demasiado cerca del hasta el final de la composición. Entonces voy a hacer de nuevo estos textos, un poco más pequeño, algo así. Y simplemente no puedo acercarme un poco más. Algo así. De acuerdo, así que algo así. Ahora bien, si quieres probar otro curso, aquí es donde el copiado del tablero de arte es muy útil. Entonces podemos justo aquí dar click en el nombre del tablero de arte y solo irás por aquí para mover dedo del pie y presionas todo para desplazarlo y arrastrarlo hacia abajo. Por lo que solo haces un duplicado del tono. Entonces aquí podemos simplemente cambiar rápidamente de color y ver qué tipo de cosas funcionan. A lo mejor algo como siguen siendo o algo así. Hacer otro duplicado. Podríamos intentar como, um, algo verde. Haz otros duplicados y prueba algo. Algo así como amarillo claro, como tu Louise o algo así. Entonces mira aquí, tal vez un poco más bajo. Sí, tal vez algo así. A mí sí me gusta porque esto esto complementa más esa imagen porque la imagen tiene muchas apestas amarillentas de color marrón en ella. Entonces creo que éste va a funcionar de la mejor manera. Bueno, acabo de cerrar. Los otros tableros de arte escuchan hacer clic en el en las flechas para que no estemos confundidos con ello. Entonces voy a trabajar con esto. Entonces lo único que falta ahora de este layout o composición es ah, el producto destacado que quería ponerme aquí. Entonces tenemos una bonita base por aquí. Yo sólo voy a grande este por el título arrastrado. Yo sólo voy a teclear. Um, tal vez este va a ser mejor para el nombre del producto como tenemos aquí. Tenemos el texto pequeño arriba y tenemos el año de texto más grande abajo abajo. Entonces el yo va de arriba y automáticamente te dibuja hacia abajo porque este trocitos de Texas , tiene más contraste con el grande la gran ronda. Entonces voy a escribir aquí nombre del producto, y también va a ser un enlace. Entonces la flecha me da un ciego aquí, Mira, como este es el llamado secundario a la acción. Lo principal que queremos usarlo para hacer es hacer click en esta acción de cultura, y por eso tiene el fondo de color por lo que llama más la atención. Entonces solo voy a poner esto aquí abajo. Voy a tomar este texto Pequeño texto mayúscula, lo voy a poner aquí, y estoy en el medio. Simplemente voy a teclear características producto como la muerte. Entonces si tengo quiero colocar esto en el medio aquí. Entonces tengo ángulo distrital. Este es el soporte del lugar para el producto. Marcador de posición, probablemente. Y si tenemos esto seleccionado y seleccionamos el texto juntos, podemos usarlo alineado aquí para ponerlo en el medio. Entonces ahora esto está en medio. Esto también seleccionan esto junto con el Terryl va a hacer un grupo fuera de ella. Dirección fría, hermano. Y también puedes hacer esto con grupos. Entonces de nuevo, he seleccionado este grupo y voy a seleccionar el fondo a rectángulo va a ponerlo en el medio. Por lo que ahora disidente. Entonces lo único que falta aquí es algo así como una silla, algo así como aquí en la imagen. Entonces sólo voy a volver de nuevo dedo del pie a internet y voy a hacer un nuevo top. Yo sólo voy a escribir algo como silla firmada o algo así. Y luego voy a pasar a imágenes todas estas imágenes, algo así. Entonces yo sólo voy a tan también importante. Queríamos tener un amplio fondo para que no tengamos que hacer mucho trabajo sacándolo y haciendo sombras y todas esas cosas. Entonces yo sólo voy dedo del pie poner PNG detrás de él. Y tenemos, como, este tipo de imágenes. Entonces esta una especie de como yo sólo voy a probar una pareja, como, por ejemplo, esta igual, como con la imagen en ah, hace un par de momentos en un interesante y hacer click derecho copia imagen. Vuelve a la tienda de fotos. Vamos, Fi. Y te lo tenemos a ti y los ingresos. Tía Transformar podría hacerlo más pequeño de nuevo. lo hace. Entonces lo único que no me gusta aquí que no tiene, como, como,sombras o algo como estar ahí parado y no parece realista o algo así. Sólo para que sólo voy a borrar este, Voy a volver, y creo que estas sillas se llaman Eames algo, así que voy tiempo. Pero aquí, equipos Sí, éxito. Entonces sólo vamos a mirar todas estas imágenes si tenemos. Ah, bonita foto. Podemos trabajar con algo con algunas sombras sobre él. Uh, no. Es como si no fuera verdadera sombra y la búsqueda de imágenes. No es lo más fácil. En su mayoría me lleva alrededor, como, un par de horas para encontrar imágenes perfectas. Pero, um entonces tal vez algunas imágenes relacionadas nos podrían ayudar aquí. Algo así como la muerte. Necesitas algunas sombras. Entonces OK, chicos, he encontrado mi imagen. Es lo que quiero usar. Va a copiar de nuevo, Volver a la tienda de fotos y Basit aquí. Entonces vas a presionar, Vamos otra vez en la tele. Está muerto está abajo. Es aquí como si hubiera un amplio fondo en la imagen, pero en realidad no es un problema porque tenemos, como, fondo blanco aquí otra vez para que solo podamos jugar eso por aquí. Entonces ahora sabemos que este Texas lo envió ya para que podamos Puedes seleccionar la capa destacada producto y un seleccionar la imagen y luego alinearla aquí de nuevo. Middle Uops, incentivo, el equivocado. Entonces voy a volver a tomar la imagen y fondo, y así es todo. Ahora tenemos todo los centros. Va a dirigir un poco esto hacia abajo va a ser Esto va a subir. No me gusta bastante que se baja en la que así nota Churkin podemos escalarlo un poco más. Entonces es más como un yo capturado. Entonces sí me gusta algo como esto. Echa un vistazo a esto. Entonces ahora este tipo con el que estamos trabajando, um, um,lo único que pienso y tal vez mejoré esto es como si pudiéramos poner esto la dirección de culto , el bloque de color, podríamos darle la vuelta a la cima. Porque, como dije, gente lee en la mayoría de los países de izquierda a derecha y de arriba a abajo. Entonces lo primero que queremos que vean es como, esta dirección de llamada, porque queremos que hagan clic en ella. Entonces solo voy a alejarme un poco y hacer una copia de esto. Ellos sólo iban a voltear esos por lo que éste va a ser un grupo. Por lo que tenemos la capa de fondo, texto del producto destacado, la capa de la imagen, y ya hicimos un grupo para la llamada a la acción del producto. Torres, eso así voy a hacer un grupo de esto y esto va a ser y, uh, mostrar grupo emocionante. Eso es y este va a ser el subtítulo estos días en segundo plano. Va a ser un grupo, y va a ser la acción cultural o c t. Ocho. Entonces eso es eso. Y yo sólo iba a cambiarlos. Entonces el estado, el yo iba a ir a la cima. ¿ Qué lo va a arrastrar así? Yo sólo voy a ir y tomar el ojo para el otro grupo. Entonces supongo que estaba trabajando con. Así que sí la dirección de llamadas va a la cima y el producto de características va a bajar así . A ver en qué se ve. Sí tengo que decir que sí me gusta esto más desinflar. Entonces ahora tenemos todos los elementos en nuestro diseño que queríamos. Ahí tenemos el texto, tenemos la imagen. Tenemos el tipo de logo como, un menú que puedo en un llamado a la acción. Entonces voy a sólo una línea. Yo rasgo un poco más, quiero hacerlo un poco más pequeño, solo el árabe. Se lo puso de nuevo para que algo así. Entonces hago algo así. Al igual que aquí tenemos como los textos. El título, con el párrafo como grupo está en medio del libro blanco. Sólo un poquito más aquí. Si, como, se trata de un grupo con el producto destacado texto la imagen y la dirección de llamada para las características Productos como un grupo. Y es como en el centro va a tomar estos tres dedos destacados capas de texto de producto. Ver ta para el producto y la imagen. Muévete un poco hacia arriba. De acuerdo, así que eso es como en el medio. Y entonces tenemos aquí son obras base. Consulta la base de obras y la flecha para eso. Nuestra capa de texto de espacios de trabajo. Entonces ahora tenemos muertos. Podemos solo tú solo puedes pisar. Simplemente puedes usar tus teclas de flecha del dedo del pie, moverlo un poco y ver dónde se siente mejor que puedas. Puedes tomar el subtítulo y moverlo un poco hacia abajo o algo así. Pero entonces el espacio entre aquí tiene que ser el mismo, como prueba aquí. Soy yo personalmente creo que para abajo y arriba, tiene que ser lo mismo. Pero también a la izquierda y a la derecha y traté de igualar los márgenes izquierdo y derecho el de arriba y abajo. Entonces, como, si éste fuera aquí, entonces esto como grupo, yo subiría. Pero entonces también tengo que ajustar el tamaño del teléfono porque esto tiene que hacerse más pequeño también que no lo hagamos tan monstruo para deshacer eso. Entonces ese es el ahora. Lo único que creo que quiero agregar aquí es como un poco de diversión, como unas flechas como esta podrían ser como un deslizador, por ejemplo. Y creo que voy a hacer otra clase rai lo que voy a animar. Es como un deslizador en el corto. Entonces en la siguiente, la siguiente lección de esto de esta clase que verás para un proyecto de clase sería genial. Si ustedes pudieran hacer esto a, como átomos átomos tan tipo de elementos interactivos por como hacer una diapositiva o algo para la siguiente Escucha, voy a tratar de explicar cómo se puede hacer un deslizador. Ahora se hace animación con la actitud de tiro y hacer eso en principio, pero eso es para que el siguiente cierre. Entonces aquí, para el para él va a agregar algunas flechas. Entonces sólo voy, Voy a ir por aquí al taburete de labios y presionando shift y Ault, voy a arrastrar un círculo. Entonces así como esto, algo así. Está bien. Una V impresionante otra vez por la mudanza a Así que sólo tenemos. Entonces vamos aquí a la capa, puedes llamarla, pero a la izquierda. Y ahora vamos a añadir algo de estilo de capa dice, En realidad, uno sólo un trazo. Entonces lo primero que quiero hacer, pero no veo el círculo porque es ancho sobre ancho. Pero para vosotros chicos, si veis es como si lo veis así, por ejemplo, lo que queréis hacer es que queráis que Teoh apague el campo. Entonces vamos a hacer este 0% así y la diferencia entre opacidad y sentir es todo. Cuando se baja la opacidad ocho girnovers, opacidad para todo. También, aparece probado para la capa, pero también para los estilos de capa o cualquier cosa que se aplique a la capa para el relleno la misma. Sólo que sólo enciende la opacidad para el núcleo o algo así. Justo lo que hay dentro de la capa, pero no para los estilos de capa. Entonces si quieres ver nuestro trazo o lo único que queremos ver el trazo, entonces vamos a tener que apagar el campo. Nunca voy a hacer doble clic aquí en las capas, no en el nombre, porque entonces vas a ajustar el nombre nunca vas a ir aquí a acariciar. Y iban a hacer, como, como, un dos ideas de accidente cerebrovascular Bixel o fuera realmente no importa. Es un círculo. Y iban a elegir, como un gran color azulado mentiroso. Realmente no me gustan los grandes colores llanos. Sí me gustan o me gusta, en la zona azul, y sólo voy un poco a la derecha. Por lo que tienen algunos Tú en ella algunos azules. Entonces voy a presionar. Está bien. Aquí. Eso también lo hace. Sólo voy a acercarme. Yo sólo voy a asumir por todo el desplazamiento, Así que aquí tenemos nuestro círculo. Entonces ahora queremos una flecha ahí dentro. Entonces lo primero que voy a hacer es ir a la herramienta de forma personalizada. Entonces tenemos nuestra flecha de la última vez, pero tal vez estas son un poco demasiado grandes para esto, 9. Proyecto de clase: Entonces espero que aprendan algo del video anterior donde hicimos el diseño juntos. Ahora por el proyecto de clase. Yo quiero que ustedes hagan lo mismo. Busca algo que te interese y usa eso como tu tema. Podría ser como equipo de fútbol de persona famosa, un atleta. Ah ha Buf juego. Podría ser sobre cualquier cosa. De verdad. Entonces tú las mismas dimensiones que yo hice para llegar a un tipo similar de diseño. Haz primero tus marcos de alambre y piensa en qué información vas a trabajar. Piensa en lo que podría ser importante para el usuario. Usé el producto destacado como algo que podría ser importante para el usuario. Pero por ejemplo, si estás trabajando con un atleta, puedes trabajar con la edad y la nacionalidad o algo así. Entonces piensa en cómo puedes hacer que salga la información, publica tu proyecto aquí en la clase, y me aseguraré de revisarlos todos y darles algunos comentarios. Espero con ansias lo que tu chico se van a llegar y recordar, diviértete con ello. 10. Round: Entonces eso fue todo para la clase. Espero que ustedes aprendan algo sobre la jerarquía visual y el espaciamiento grande. Gracias por quedarse conmigo. Ten en cuenta que esta fue mi primera vez haciendo esto. Y sé que la cláusula está lejos de ser perfecta. Fue un proyecto divertido en el que trabajar. De verdad estoy deseando lo que ustedes chicos se van a encontrar en un proyecto de clase sobre DFO. O voy a hacer algunas cláusulas futuras sobre animación y algún otro tipo de temas. Entonces eso fue una especie de clase y gracias por seguir conmigo otra vez. Y también agregué un poco de aguinaldo. Escucha, sobre cómo preparo mi diseño para un show de dribble. Entonces nos vemos la próxima vez. 11. Lección de extra: hacer un giro de dribbble: Oigan, chicos. Y bienvenidos a la lección de bonificación. Entonces, en este Escuchar, voy a explicar cómo preparo tomas de regate con el diseño que acabamos de hacer. Entonces lo primero que vamos a hacer es tener nuestro diseño abierto aquí. Lo vamos a guardar como, ah j archivo pic. Entonces hay una manera fácil de hacer eso. Acabas de pasar por aquí al nombre de tu tablero de arte y haces click, verdad? Haz lo correcto. Haga clic y luego elija opción de exportación ya que vamos a hacer eso. Ahora, vamos a elegir para la fecha aquí atrás. Sólo vamos a hacer exportar todo aquí en mi habilidad. Sheriff Fuller, voy a llamar a este nueve y exportar. Entonces vamos a hacer un nuevo un nuevo, uh, uh, documento Va a ser ocho menos de 600. Habla ALS porque hay el tamaño para un tiro de regate. Voy a llamarlo regate, disparar y en prisión. Por lo que ahora tenemos nuestro nuevo archivo aquí en. Voy a pasar a mi diseño que acabo de salvarnos una imagen de J. Voy a arrastrarlo aquí. Entonces ahora vemos que está por aquí con caja delimitadora aquí. Simplemente lo voy a hacer un poco más pequeño, así y sólo voy a dar el minuto de los grandes terrenos. Arrastra un rectángulo allí para un color de fondo lo va a arrastrar por aquí. Voy a hacer de eso un color gris claro para que tengamos algún contraste entre el fondo y el dedo del diseño, algo así. Y luego para la sombra podríamos hacer como, una sombra de gota normal aquí así. Pero sí me gusta una sombra más interesante, y voy a crearla presionando Vamos, Jay, y duplica el diseño. Voy a hacer clic en el de abajo que voy a presionar comando t para transformar. Pero lo voy a hacer un poco Voy a hacer que vaya lados bájala un poco Este tal vez Diskin de abajo también. Entonces no tenemos una sombra arriba aquí y solo presiona enter y luego los diseñadores debajo de ella , esa es la que vamos a aplicar la sombra para hacer doble clic en la capa para los estilos de capa . Entonces voy a elegir gota sombra un buen año. El ángulo es de 90. Ahora sólo podemos jugar con, como, la distancia. Entonces la distancia que ves aquí podría ser algo así, y voy a encender el tamaño de la misma. Entonces me gusta como se ve esto, y luego podemos jugar con la opacidad. Entonces eso es tal vez dos caballos bajando un poco. Entonces va a ser algo como esto, y eso es todo, en realidad. Por lo que ahí tienes listo tu refugio regate. Entonces gracias de nuevo por quedarse conmigo. Y espero que ustedes hayan disfrutado del vaso.