Tipografía y ritmo vertical para diseñadores de UI y desarrolladores web

1. Qué cubriremos en este curso: Veamos qué vamos a estar cubriendo en este curso, y diseñando en este curso, y desarrollando en este curso. Estos no son tiros de Dribbble, estos son ejercicios reales de este curso, así que vamos a verlos. Este es uno de ellos. Otra. Ocultemos las rejillas. Hay otro, y otro, otro, otro, otro, otro, y también éste. Pocos anuncios más, estaremos diseñando así, y hay un tema más para este anuncio, se puede ver por aquí. Pero cómo vamos a lograr esto, vamos a aprender el uso efectivo de las cuadrículas tipográficas utilizando el espacio en blanco. Dominaremos las habilidades de tiempo y espacio para los diseñadores, y en realidad se llama espacio en blanco. Esto es todo para diseñadores. También aprenderemos cómo hacer coincidir diferentes fuentes, cómo emparejarlas, cómo seleccionar fuentes efectivas, cómo transmitir tu mensaje usando tipografía. Cómo utilizar de manera efectiva las rejillas para diseñar diferentes diseños y un montón de cosas geniales. Incluso para desarrolladores, tengo un montón de cosas interesantes como esta unidad VW, puedes ver por aquí cómo se expande y contrae con el diseño web responsive, y discutiremos mucha tipografía de diseño web responsive o se llama básicamente topografía receptiva. Se puede ver por aquí en acción, grande, mediano. Se puede ver cómo se está desplazando el tamaño de la fuente. Para pequeños, se puede ver el tamaño del encabezado que acaba de cambiar. Después discutiremos cómo usar habilidades tipográficas personalizadas en Bootstrap. También en Bootstrap, cómo vamos a utilizar la habilidad tipográfica personalizada con una publicación de blog como esta. Esto también se llama ritmo vertical. También hemos implementado el ritmo vertical en este ejercicio. Por lo que para aprender todo sobre estas técnicas y estándares de tipografía en CSS y HTML, realmente vas a disfrutar de este curso. Hay cosas más emocionantes en este curso como las pantallas móviles y sus tamaños de fuente y PT, SP, DPI, DIP, todas las resoluciones de pantalla diferentes desorden y cómo vamos a diseñar con este lío. Por lo que estos son pocos dispositivos IOS, todos diferentes dispositivos que tienen la misma publicación de blog diseñada para ellos. Este es uno de los ejercicios. Además, vamos a buscar la habilidad tipográfica de Google Android y cómo utilizarla de manera efectiva. Además, te compartiré un secreto cómo conectar tu pantalla o cómo ver este diseño en tus pantallas móviles para que puedas elegir y seleccionar fácilmente fuentes, y diseño, y colores, y todo lo demás. Entonces ver es creer. Si puedes ver tu diseño directamente en una pantalla móvil, puedes diseñar mucho mejor. De acuerdo, ahora la pregunta es, ¿quién debería tomar este curso? No recomiendo diseñadores o diseñadores muy novatos que acaban de empezar a usar Photoshop para tomar este curso. Este es un curso de dificultad de nivel medio, por lo que todos los diseñadores que ya conocen un poco de Photoshop y saben usarlo, conocen los atajos, deberían tomar este curso. Además, todos los desarrolladores que conocen conceptos básicos de HTML y CSS son bienvenidos. Si acabas de empezar a aprender CSS y HTML, creo que este curso no es para ti. Es posible que no entiendas pocas cosas. Además, necesito que descargues e instales la última versión de Photoshop CC. Cualquier diseñador que piense que a su diseño le falta algo o algo extraño, entonces realmente debería tomar este curso para mejorar tu diseño. Estoy seguro de que este curso va a mejorar mucho tus diseños incluso al nivel Dribbble o a los diseñadores de nivel Behance. Entonces vamos a cavar y empezar, y te veo en el curso. 2. Introducción a la tipografía: Ya sea que estemos diseñando para una aplicación móvil o cualquier sitio web o diseño web o incluso publicidad, 95 por ciento de cada diseño es básicamente Tipo, que es texto. Para usar ese texto a tu favor, necesitas ser un muy buen diseñador y debes ser muy bueno en Tipografía. Todos los buenos diseñadores poseen la habilidad. El texto es parte importante de cualquier tipo de medio, ya sean anuncios, televisión, sitios web, blogs , libros, títulos de películas, apps, todo, siempre hay mucho texto que necesitas ver o consumir. ¿ Qué es la tipografía? Si puedes usar este texto, o escrito correctamente, puede actuar como una espada samurai con filo de duelo, o tal vez más que una espada samurai, para cada diseñador. ¿ Cuál es el propósito de la tipografía? Siempre que diseñas algo o estás diseñando un anuncio o aplicación o cualquier cosa, estás haciendo dos cosas con tu tipo. Número 1, es necesario organizarlo de manera efectiva para su legibilidad y legibilidad. Si tu usuario no puede leerlo, no tiene sentido diseñar dicho anuncio o aplicación móvil. El segundo es, necesitas comunicar tu estado de ánimo, tu mensaje al lector o al espectador. Estos son los dos propósitos básicos de usar la tipografía en tus diseños. Ahora, tipografía para Aplicaciones Web y Móviles, estaremos cubriendo muchas cosas en este curso. Entonces solo algunos conceptos básicos que la gente solo escanea sitios web y blogs. Realmente no lo leen a menos que sea muy importante. El segundo es que estaremos respondiendo mucha pregunta respecto a la topografía de sitios web, como qué fuente vamos a usar, si uso esta fuente para sitio web de negocios o blog o una aplicación web. Para aplicaciones móviles, estaremos cubriendo cómo usar la tipografía en pantallas pequeñas porque es muy complicado usar la tipografía en pantallas pequeñas y hay diferentes iOS y Android, diferentes especificaciones de fuentes y tamaños que tienen Apple y Android especificado. Siempre que diseñes algo, debes hacerte preguntas, qué fuente se cargará más rápido, o debería usar cinco fuentes o tres fuentes o 10 fuentes para mi sitio web? En ocasiones nosotros los diseñadores hacemos algo como esto; “Proxima Nova está en tendencia en estos días. Chicos, debería usarlo en todas partes”. Entonces, sea cual sea la aplicación o página web de tu diseño, solo pones tu fuente Proxima Nova ahí dentro. Eso es muy extraño. Cada sitio web tiene sus propias especificaciones, tipo de negocio y todo, por lo que esto no es sabio. Estaremos cubriendo mucho en este curso, no te preocupes. A ver qué tenemos a continuación. Ahora bien, si eres un diseñador o desarrollador novato, podrías estar pensando cómo combinar diferentes formas, qué fuente es adecuada para sitios web divertidos, para sitios web de negocios o un blog de moda. También muchos desarrolladores que he visto solo usan Open Sans porque es el único que puedo combinar fácilmente. No hagas tales decisiones ni estas decisiones de diseño. Estos realmente pueden meterte en problemas si sigues diseñando usando la misma fuente para como 10 sitios web. Te estaré guiando a través de muchos ejemplos, incluso con Bootstrap para mostrarte cómo podemos usar diferentes técnicas tipográficas incluso para desarrolladores y diseñadores por igual. Entonces empecemos en el curso y pasemos a la siguiente lección. 3. Acerca de las familias de fontos y fuentes: Todo diseñador debe estar familiarizado con algunos de los términos tipográficos como fuente, familias de fuentes, y qué son el estilo de fuente. Veamos qué es básicamente una fuente. La fuente es básicamente un conjunto de caracteres de estilo y tamaño específicos. En realidad, en los viejos tiempos, el tamaño era relevante para la fuente o tipo estilo o tipo cara. actualidad, una fuente está disponible en diferentes tamaños, por lo que puedes usar cualquier tamaño como 72 puntos, 12 puntos, 100 píxeles o lo que quieras el tamaño, porque es digital, no necesitas hacer un bloque de pieza metálica de carácter de fuente. En los viejos tiempos, las fuentes y los personajes se hacían con bloques metálicos específicos. Veamos algunos de los ejemplos de fuentes. Aquí estoy mostrando dos fuentes diferentes, una es la familia Amsi Pro y la segunda es la fuente Crique Grotesk. Estos son diferentes tamaños, podemos usar cualquier talla, no hay límite a las tallas. Podemos usar de un punto a ilimitado, tamaño no es relevante en estos días con fuentes. Ahora bien, ¿qué es un estilo de fuente? O podemos llamarlo font-face también. Para un uso moderno, solo tienes que tener en cuenta que es estilo de fuente. Estilo específico de una fuente, lo adivinaste bien. Ahora los ejemplos son Negrita, Cursiva, Regular, Medium display, Condensado, Negro, Semi Bold, Negra Negrita y el Extrabold. estos días hay muchos estilos diferentes de fuentes. Aquí hay algunos ejemplos de estilos de fuente, estoy usando Amsi Pro Ultra Style, que es ultra negrita, en este momento. Aquí hay un estilo más, que es Amsi Pro Light tamaño 48 puntos, y tenemos Proxima Nova Condensed, los personajes están condensados o prensados juntos, y luego tenemos Proxima Nova Extrabold. Estos son estilos diferentes, como este es de estilo condensado, este es Extrabold, este es pro, ultra pro, y este es de estilo ligero. Ahora, ¿qué son las familias de fuentes? Por lo que familia de fuentes significa que debe haber una gran familia de la misma fuente, por lo que básicamente son diferentes estilos de fuente que están diseñados en una misma geometría, forma o estilo. Por ejemplo, Helvetica es una familia muy grande, se ha condensado a estilos y tiene muchos estilos audaces que muchos estilos redondeados. Helvetica tiene más de 30 o 44 fuentes diferentes en una sola familia, es una familia muy grande. También puedes encontrar diferentes fuentes de Google de gran familia de este sitio Te voy a mostrar en este momento. Este es el sitio mejor fuentes de Google, y se puede ver aquí tenemos esta familia Raleway, y se puede ver tenemos 1, 2, 3, 4, 5, 6, 10, 15, 16, 17, 18, diferentes estilos de una sola fuente. Esta es básicamente una familia muy grande, muchos estilos se pueden ver por aquí, esta Source Sans Pro también es una familia muy grande, Roboto, también una familia muy grande. También si puedes ver que tenemos a Roboto condensado, si tenemos por aquí puedes ver este Roboto Mono, esto también pertenece a esta familia Roboto. Tiene un estilo diferente, pero en realidad son la misma familia, son primos. Entonces tenemos Source Code Pro, que también está relacionado con la Source Sans Pro, y tenemos este Roboto Condensed, también está relacionado con la familia Roboto. Se trata de diferentes fuentes de Google que tienen familias muy grandes. Mira y ve por aquí Exo, Exo 2 y Kanit, también tienen familias muy grandes, muchos estilos diferentes. La ventaja de una familia grande es que puedes usar una sola familia y puedes tener muchos estilos diferentes para elegir cuando estás diseñando. Todo esto se trata de fuentes, tamaño de fuente y familias de fuentes. Pasemos a la siguiente lección. 4. Terminos de anatomía de tipografía: Ahora, en esta lección vamos a aprender algunos de los términos de tipografía y un poco de sobre la anatomía de tipo. Por lo que estos son muy cruciales porque fácilmente podemos emparejar fuerza aprendiendo estos términos tipográficos. Entonces empecemos. En primer lugar, vamos a aprender sobre línea base, línea media, y tap-line. Cap-line significa línea mayúscula, por lo que es la línea, línea imaginaria sentada en la parte superior de la letra mayúscula. Entonces tenemos línea base, lo cual es muy importante. Base-line es la línea en la que todas nuestras cartas se sientan en ella. El mean-line está básicamente en la parte superior de nuestras letras pequeñas o podemos decir x-height. Esta es básicamente la altura de nuestras letras pequeñas. Entonces esto es básicamente línea media. El más importante es esta línea de base. Así que asegúrate de saber cuál es esta línea de base. Algo más que algunas de estas letras van por encima de esta línea mayúscula y algunas como estas y, p y otras, van más allá de esta línea de base. Entonces solo ten en cuenta. Aprendamos sobre la altura x y la altura mayúscula de cualquier fuente. Entonces básicamente, la altura de la letra pequeña x es básicamente la altura x de cualquier fuente o de cualquier tipo. El alto de la letra mayúscula es básicamente la altura mayúscula. Ahora, x-height es muy importante y la relación entre x-height y mayúscula también es factor muy importante en la legibilidad de la fuente. Entonces ahora si tenemos buena altura x, puede ser más fácil de leer en dispositivos pequeños o pequeños folletos o algo así. Por lo que si estás diseñando para aplicaciones móviles, debes considerar una fuente con mayor altura x. También las fuentes eficientes como Helvetica y pocas otras, tienen altura x desde 67 por ciento hasta 69 por ciento de altura mayúscula. Por lo que son casi 65-70 por ciento de la altura de una letra mayúscula. Por lo que este también es otro factor también, este es un factor entre diferentes clasificaciones de fuentes. Los tipos de fuentes más antiguos, las familias de fuentes antiguas, o las fuentes antiguas como Garamond, tienen baja altura x. Ahora, aprendamos sobre los ascendentes y los descendientes. Los ascendentes básicamente son la porción de letra que se extiende por encima la línea media o se puede ver por aquí la parte superior de la d. Entonces tenemos descender, que básicamente se extiende hacia abajo desde la línea base. Entonces todo lo que cae desde la línea base es básicamente descendiente. Contador es otro factor muy grande en el reconocimiento o legibilidad de cualquier fuente o tipo. Por lo que hay dos tipos de mostrador, abierto y cerrado. Contador abierto es básicamente la porción abierta de letra divertida como esta. No está totalmente cerrado por todos lados. El espacio entre esta letra e es básicamente el mostrador abierto y después tenemos contador cerrado. Contador cerrado es básicamente el espacio encerrado en cualquier letra como esta o y la parte superior de esta e ¿Por qué estamos aprendiendo de esto? Porque pueden ayudar con la legibilidad si tenemos contadores muy grandes, esa fuente o ese tipo o estilo es muy legible. Ahora este es también otro factor a letras a este x-height. Por lo que estos dos juegan un papel muy importante en la legibilidad o contador de fuentes y x-height. Aprendamos algunos otros términos tipográficos, para que podamos identificar fácilmente cualquier tipo. Entonces aquí vamos tenemos este pico, que es un poco puntiaguda final cualquier letra mayúscula o letra pequeña. Se encuentran normalmente al inicio y al final de la letra. Entonces tenemos este trazo. Se puede ver la parte superior de esta letra p, hay dos trazos variables. Uno es muy delgado al inicio y en el medio es muy grueso. Entonces básicamente esto se llama la diferencia de trazo parecen tomar y es parte muy importante en identificar diferentes clases de fuentes. Entonces tenemos el bucle inferior, que es básicamente la parte inferior de g Se puede ver por aquí. También diferentes clases de fuentes. Tienen diferente este estilo de bucle. Entonces tenemos oído. Oreja es básicamente esta perilla de estilo oreja puntiaguda saliendo de esto de g letra. Este también es un factor muy importante. Es diferente en diferentes fuentes. Entonces tenemos este ápice. Apex es básicamente la parte superior de cualquier letra donde tenemos este remanente estilo pluma de algo como vecino de intestino por aquí o algo así. Entonces tenemos cola. Esta es básicamente la porción inferior de la letra y. entonces tenemos esta terminal que también es como cola, pero no se está extendiendo en la parte inferior. Básicamente se extiende en el lado izquierdo o derecho de una letra como esta a. Entonces tenemos serif. Serif es básicamente cualquier línea o cualquier cosa que sea básicamente separar los tipos de fuente, como tenemos estas fuentes serif, tienen estas losas al final de sus letras así. Se puede ver por aquí y. Así también al fondo de la letra y. Entonces esto es básicamente serif, y todo esto se trata de diferentes términos tipográficos. Espero que haya disfrutado de su conferencia. Pasemos a la siguiente lección. 5. Humanist antiguo: En esta lección, vamos a ver diferente clasificación de tipos para poder utilizarlos de manera efectiva. Antes de entrar en ver diferentes clases de tipos, vamos a aprender sobre el estrés diagonal. Se puede ver en la parte inferior de aquí, el O, he mostrado un estrés diagonal. Se puede ver este O tiene tasas variables de trazos, así que aquí en los lados es un poco grueso, y donde he puesto el estrés diagonal, es básicamente el trazo más delgado. Donde el trazo es más delgado, solo dibujas la línea de la más delgada a la más delgada y muestra el estrés diagonales. Este es uno de los factores en la identificación de diferentes fuentes. Ahora el primero son humanistas. Humanista, como su nombre sugiere, es básicamente como los humanos escriben con la pluma en los viejos tiempos. Se pueden ver los trazos y el estilo de escritura se parece a la escritura humana con un bolígrafo. Ahora, tiene dos factores básicos para identificarlo, uno es esta barra transversal muy inclinada de e Se puede ver que es como ángulo de 30 o 40 grados, y se puede ver aquí en la letra Oso cómo está escrito. En segundo lugar, se pueden ver las serifs en la parte inferior de este n lo he señalado. Se puede ver que las serifs son un poco curvadas como un pie humano, por lo que este es otro factor. Por lo que se trata de tres factores. Tiene un muy buen estrés diagonal, muy inclinado, y luego tenemos barra transversal inclinada y luego tenemos serifs estilo pie. Ahora te he mostrado estilo viejo o garalde. Se trata de dos clases diferentes, estilo antiguo y transitorio. El estilo viejo era un poco viejo y la transición se construyó sobre, o se puede decir, versión improvisada de este viejo estilo. Ahora, el viejo estilo tiene muy pocos factores para identificarlo, uno es este estrés diagonal, tiene un buen estrés diagonal, menos que los humanistas, pero tiene un buen estrés diagonal. Entonces la parte superior de estos se pueden ver estos ascendentes y descendientes, tienen este extremo serif de pendiente, y luego tenemos este W, es propiedad muy única de este viejo estilo o garamond garalde. Se puede ver por aquí los W tienen versión cruzada, por lo que se superponen, es como dos V, V letras se superponen entre sí. Se puede ver he destacado esta e. Dentro de la e, es básicamente contador, por lo que tienen muy menos espacio de contador. Se puede ver aquí tenemos dentro de la letra e, luego tienen en la parte superior de la T, se puede ver que los picos son algo inclinados, y luego si miramos los serifs, se puede ver al final de la letra h no son totalmente rectos, son un poco curvilíneos. Todo esto se trata de estilo antiguo, factores principales son este W y el pico, y estos tops inclinados de letra d y un poco de este estrés diagonal en todo lo que puedes ver por aquí. También puedes ver que la letra R tiene un trazo de espeleología al final, y si miras la transición, hay muchas diferencias con esto. Se puede ver en la parte superior de la d, el serif es un poco muy puntiagudo, entonces el estrés diagonal es casi recto. Se puede ver el estrés diagonal es casi recto, y también se puede ver dentro de esta letra e, el contador es un poco más ancho o un poco más grande que el viejo estilo, entonces tenemos este W. W no se superpone, es un poco diferentes, y luego también los picos de esta letra T, también están apuntando hacia abajo un poco estructural. Se puede decir un poco estructural. Además, hay una diferencia más de la que me olvidé. Si ves la diferencia de trazo en el estilo antiguo, diferencia de trazo es que si ves esta letra h, puedes ver aquí al final de la h, tenemos un poco de contraste de trazo menos. El grueso y el delgado están muy cerca uno del otro, pero en la transición, puede ver que los trazos son mucho, delgado es muy delgado y el grueso es un poco más grueso. Esta es también una diferencia entre el estilo antiguo y el estilo de transición. Estos son algunos ejemplos de estilo antiguo. Se trata de la fuente adobe devanagari, y se puede ver por aquí cómo se ha dispuesto esta fuente, es una versión cursiva de la fuente. Todavía se puede ver que T es un poco inclinada, y en esta fuente se puede ver tal vez es una versión diferente, por lo que en diferentes fuentes no se pueden encontrar algunas características. Al igual que aquí tenemos W. W es igual que la fuente transicional, por lo que a veces estos diseñadores de tifus, mezclan diferentes propiedades de dos fuentes. Entonces tenemos este Minion, Pro, también es fuente de estilo antiguo. Se puede ver por aquí todavía la W es diferente, pero otras propiedades como este final de este r y las zorra top y top serifs, son casi como el viejo estilo. 6. Sans Serif y guión: Ahora hablemos de fuentes modernas. Estos se llaman básicamente Bodoni, y su principal característica es el ancho del trazo. La diferencia de trazo es demasiado, muy delgada a muy gruesa. Entonces la otra es que estas serifs son como losas, tiras muy delgadas, como sea que yo lo llame. Esta es la propiedad principal de este Bodoni. También, el estrés, se puede ver en el o, es muy recto, de 90 grados. Ahora la losa serif o también se llama losa egipcia. puede adivinar que tienen serifs al igual que losas gruesas, y por eso se llaman serifs de losas. Aquí está la tipografía más común que utilizamos, que es sans-serif. Los sans-Serif no tienen serifs, ni losas, ni ningún final al final. Están muy limpias y muy modernas. Todo esto se trata de este sans-serif. Tienen muchas otras clases de sans-serifs. Diferentes diseñadores de tipografía, mezclan las cualidades del toque viejo o a veces humanista en la fuente sans-serif. Ahora lo siguiente es guión o escritura a mano. Son diferentes tipos de las fuentes de guión o escritura a mano, pero voy a combinarlas todas en una sola. Es posible que hayas visto este script o fuentes de escritura a mano. No se usan mucho en la web porque no creo que si escribes un párrafo en guión o fuente manuscrita, y se pueda leer fácilmente. Ahora te dije en la diapositiva anterior que los sans-serif tienen algunas otras alteraciones, como ésta es sans-serif humanista. Ahora habrías adivinado que comparte las características de este tipo humanista que discutimos al inicio de esta conferencia. Sans-serif humanista, se puede ver, el top es Gill Sans. Tienen este final a la a, y luego tienen un poco de diferencia de trazo. Además, si nos fijamos en este Open Sans y las calumnias en el mostrador en la a no son muy geométricas. Son un poco inclinados. Si miras la g, también es un poco como fuente humanista. Ya puedes ver, soy Open Sans-Serif y también soy Humanista Sans-Serif, y me veo muy bien. Si miras el g, es el factor común en todos los Sans-Serif Humanista. Son un poco como humanistas o de estilo antiguo. También, este otro ejemplo es esta fuente Calibri, Open Sans, Gill Sans. Son tipo de Humanista Sans-Serif. Es por eso que ves Open Sans es muy popular en estos días. Otra variación de los sans-serif es Geometric Sans-Serifs, y se construyen sobre alguna geometría muy específica, como triángulos, rectángulos, o tal vez círculos muy específicos . Se basan en la geometría. Se puede ver aquí tenemos la primera fuente, un primer ejemplo es Futura. Se pueden ver los os y las es, son casi un círculo perfecto. Aquí puedes ver. Ahora si miras esta fuente Proxima Nova, es muy popular. También es geométrico. Si miras sus o y es, son casi el círculo perfecto. Museo Sans también es geométrico. Donde está la palabra geométrica, se puede ver cómo se construyen. La letra c también está construida sobre círculo perfecto. Después hay otra fuente al final, Texta. También es un Sans-Serif Geométrico. Podrían parecerse a Humanista o pueden tener alguna naturaleza curvilística, pero deben construirse sobre formas geométricas específicas. Puede que no sean solo círculos o cuadrados, tal vez alguna forma deforme de cuadrado o algo así. Esto redondea a nuestro Sans-Serif Geométrico y a todas las diferentes clases. No voy a entrar en demasiado detalle de mostrar 16 o 17 clases de fuentes diferentes. Creo que estos son lo suficientemente buenos para empezar. Te compartiré algunos de los recursos si quieres seguir adelante más que estos, como un grotesco y otro sans-serif. En la siguiente lección, te voy a dar un ejercicio para ver cuánto puedes reconocer una fuente. Podría estar dándote Geométrico, Humanista, y otras fuentes. Esto serán muestras, y vamos a ver qué tan bien lo haces en reconocer diferentes clases de tipo. Pasemos a la siguiente lección. 7. Acerca de la longitud de línea: Uno de los mayores factores sobre legibilidad es la longitud de línea, realmente afecta tu legibilidad. Ahora surge la pregunta, ¿cuánta longitud debe tener una línea en un párrafo para una lectura óptima? Ahora, algunos dicen que son 65, 70 caracteres por línea y 40 caracteres por línea, algo así. He visto muchos artículos y libros diferentes, y el rango es de 45 a casi 85 caracteres por línea. Ellos son óptimos. Ahora bien, ¿por qué esta óptima longitud de línea? El problema es que si tienes líneas demasiado largas, entonces el usuario o lector necesita mover la cabeza de izquierda a derecha para leer esa línea. Ahora si tienes una línea muy corta, entonces tienen que saltar de arriba a abajo, línea a línea una y otra vez. Esto va a producir fatiga en tu usuario, incluso sus ojos o cabeza o tal vez algunos de sus músculos. Desde mi experiencia si traducimos personajes a palabras, entonces casi 10-17 palabras por línea es óptima. Podrían ser 19 o 20 dependiendo de la longitud de la palabra, pero es casi el promedio. Ahora, otro factor es el tamaño de fuente. Si tienes una buena longitud de línea y cambias la fuente a la fuente más pequeña, entonces tienes muchas palabras en el mismo espacio y necesitas cambiar de nuevo la longitud de la línea. Ahora bien, si intentas cambiar a fuente pequeña, entonces la longitud de la línea es muy grande y necesitas leer las largas líneas. Este es otro factor así que elige sabiamente tu tamaño de fuente, para que la longitud de línea sea óptima. Ahora, ¿qué pasa con los móviles y los sitios web? Los móviles tienen pantallas pequeñas, así que creo que generalmente el texto debería ser un poco más grande, el texto corporal debería ser más grande. Ahora, normalmente en móviles el texto corporal o los párrafos son básicamente 120 por ciento del tamaño de los párrafos en nuestros sitios web de escritorio. Si estás desarrollando un sitio web y mostrando diferentes vistas de ese sitio web en móvil, en escritorio y tablet, entonces debes encargarte de estos. También en los teléfonos móviles las líneas serán menos largas porque tenemos menos espacio. Parte del principio de longitud de línea no se aplican ahí. Además, es necesario desplazar el tamaño de la cabecera y la altura de la línea también. Todos estos factores que necesitas para cubrir para los móviles. En el escritorio, si eres desarrollador, necesitas usar consultas de medios para ajustar el tamaño para obtener la longitud de línea óptima y legibilidad. Todo esto se trata de la longitud óptima de línea y cómo la vamos a utilizar en móviles y diseño de escritorio, si estás diseñando para móviles o de escritorio. Vamos a cavar profundamente en todas estas cosas en tamaños móviles y de escritorio en las dos últimas secciones de nuestro curso. Pasemos a la siguiente lección. 8. Alineación de texto: Discutamos sobre la alineación de texto. Ahora, muchos diseñadores dicen: “Está bien, sé text-align, qué es la alineación de texto, sé”, pero hay usos específicos para cada uno de ellos. Si puedes usarlos correctamente, realmente puedes mejorar tu diseño y legibilidad. Veamos diferentes ejemplos y diferentes usos de text-align. Ahora, la primera es la alineación izquierda muy común y la alineación izquierda no se usa para idiomas de derecha a izquierda. Estamos hablando de inglés y otros idiomas que son de izquierda, derecha. Ahora bien, la alineación a la izquierda se usa básicamente para artículos, párrafos, libros, encabezamientos, y muchas otras cosas. Por lo que en su mayoría, es la alineación utilizada más común. Asegúrate de que no sea para idiomas de derecha a izquierda. De derecha a izquierda son básicamente opuestos a esto. Para la alineación izquierda, será la alineación derecha. Siguiente es alinear a la derecha y alinear a la derecha texto se utiliza para una cantidad normalmente pequeña de texto. Si lo estás usando en un párrafo, entonces realmente estás arruinando a tu usuario y a tu lector. Así que asegúrate de que estás usando alineación derecha para líneas muy pequeñas o muy pocas palabras. Ahora, aquí tenemos el factor es básicamente de derecha a izquierda idiomas. Para los idiomas de derecha a izquierda, alinear a la derecha es la mejor opción. Ahora, llegando al centro alinear. El alineamiento central solo debe utilizarse para líneas importantes y no aplicarse a párrafos. He visto a algunos diseñadores usando centro alinearse a cuatro o cinco líneas. Creo que no es muy sabio. Entonces tal vez encabezados y eslogan de algún producto puedan estar alineados al centro o tal vez una línea más, pero no por encima de tres, supongo. Entonces aquí tenemos factor de legibilidad. Nuestros ojos saltaron de una a la siguiente línea, y normalmente están prediciendo que deben ser saltados al mismo lugar. Ahora, en el centro alinean, saltan de un lugar a otro, por lo que no es una línea recta. Alinear justificado es básicamente cuando tus lados izquierdo y derecho son casi iguales. No hay espacios en el lado derecho. El alineamiento tan justificado se utiliza normalmente en libros, y revistas, y periódicos. No les recomiendo usar para sitios web o blogs. Es difícil controlarlos. Es posible que tengas que cambiar tu texto, o texto principal, o editar tu texto de copia para justificar realmente alinear tus párrafos. Permítanme mostrarles algunos de los ejemplos de alineación izquierda y derecha. Se puede ver en el lado derecho, te he mostrado alinear a la derecha, uso adecuado de alinear a la derecha. Estoy mostrando sólo tres líneas, y tal vez veas esto alineado a la derecha en muchas tarjetas de visita. Ahora recuerdas por qué el correo electrónico, número de teléfono está casi alineado a la derecha en muchas tarjetas de visita, porque es muy menos texto y se puede ver alinearlo bien no daña la legibilidad. Ahora, a la izquierda hay un párrafo, por lo que deben estar alineados a la izquierda. Es así como usamos el alineamiento izquierdo y derecho. Este es el uso adecuado de los textos alineados a la izquierda y a la derecha. Aquí tenemos el ejemplo de justifique alinear y centrar alinear. Se puede ver en el lado izquierdo, justificar alinear, tenemos diferentes espacios o ríos corriendo por dentro. Algunas palabras están más espaciadas a la siguiente. Algunos tienen menos espacio entre ellos. Por lo que estos se llaman básicamente ríos. Esto es cuando intentas justificar alinear tu texto. Así que asegúrate de que no haya ríos demasiado anchos o ríos muy prominentes dentro de tu texto. Ahora, llegando al centro alinear. Ahora, centro alinea lo usas en muy pocas líneas de texto o tal vez poesía, como he usado aquí. No sé cómo escribí esto, pero así es como deberíamos usar center align, muy pocas líneas, y tal vez poesía o algo así. A lo mejor alguna cita de dos líneas. Entonces no más de dos o tres líneas, supongo. 9. Altura de línea (liderando): En esta lección, voy a hablar de line-height y también se le llamó liderar. En los últimos tiempos, solían poner bloques de plomo fundidos entre dos líneas diferentes para separarlos. eso se le llamó líder. ¿ En qué básicamente está liderando? Es la distancia de una línea base a la siguiente línea base. Al igual que tenemos dos o tres líneas de texto entonces la distancia de una línea base a la siguiente línea base es básicamente la altura de la línea. Ahora bien, ¿cuánta altura de línea debemos tener? Varía de 120 por ciento a 60 por ciento para el texto corporal. El texto corporal es básicamente los párrafos y texto donde tenemos muchos textos. Tenemos que leerlo. Ahora, para los encabezamientos, no debe fijarlo más del 120 por ciento en rúbricas. Texto muy grande, normalmente, la altura de la línea es casi del 100 por ciento al, o a veces tal vez del 90 por ciento al 120 por ciento. Para el texto corporal, varía de 120 por ciento a 160 por ciento, y para los encabezamientos, es un poco menor que nuestra altura de línea normal. Aquí hay algunos ejemplos de la altura de línea del texto del cuerpo. El texto corporal es básicamente párrafo, así que no te preocupes si no sabes qué es el texto corporal. Se trata de un montón de textos que está destinado a ser leídos. Del lado izquierdo, tenemos altura de línea 133 por ciento, o también lo llamamos 1.33 por ciento. Treinta y ocho pixel es el tamaño de nuestros textos. Básicamente, lo que hacemos aquí es, multiplicamos 38 píxeles por 1.33, y lo que obtenemos es, básicamente nuestra altura de línea. Podrían ser 42 píxeles, 46 píxeles, o lo que sea. Del lado derecho, tenemos una altura de línea un poco más grande que es de 1.45 por ciento. Se puede ver cómo afecta la legibilidad. También si tienes una altura de línea muy ajustada, puedes ver la parte inferior de las colas superiores, y colas de diferentes personajes, y la parte inferior de diferentes personajes va a tocar la parte superior de la siguiente línea. Este es un problema de legibilidad muy importante. Trata de ajustar la altura de la línea donde creas que es más fácil de leer. Ahora, aquí hay algún ejemplo para el texto de encabezamiento. Se puede ver a la izquierda, lo he establecido en 110 por ciento, y el tamaño de nuestro texto es de 60 píxeles de encabezado. A la izquierda se puede ver que es lo suficientemente bueno. Pero si ves en el lado derecho, he aumentado más el tamaño del texto. Es de 72 píxeles de rumbo, y lo he fijado en 1.05 por ciento. ¿ Cómo lo vamos a calcular? Setenta y dos se multiplican por 1.05, y está cerca de casi 75-76 píxeles. Además, puedes ajustarlo a 100 píxeles. Si tienes 72 píxeles, también puedes establecer la altura de la línea, 72 píxeles para encabezados más grandes. Permítanme mostrarles cómo podemos establecer la altura de línea en Photoshop para encabezamientos y textos de párrafo. Cómo podemos controlarlo. Tengo este texto por aquí. Este es un encabezado, y se puede ver, voy a seleccionar este texto, y voy a conseguir este panel de personajes. Ya tengo este panel A personaje por aquí. Se puede ver aquí tenemos 72 puntos que es nuestro tamaño de texto, y este es el control donde tenemos que controlar la linea-altura. También puedo ajustarlo a 72 píxeles. Se puede ver que se ve bien. Incluso yo puedo ir por debajo de esto, 70 puntos también se ve bien. Pero si voy a 65, parece un poco problemático, o tal vez demasiado cercano a. Se puede ver por aquí, el i de la época está tocando el g. supongo que 70 pixel como el último que podemos ir y 72 pixel es, creo, óptimo, o tal vez 75 como lo teníamos antes. Esto siempre se establece la altura de línea. Veamos algún otro ejemplo que te mostré con el párrafo. Aquí teníamos el párrafo. Voy a seleccionar este párrafo y, puedes ver en este momento es tamaño de texto de 38 puntos, font-size, y la altura de línea es de 55 puntos. Si trato de aumentarlo a 60, puede ver, todavía se ve bien pero si vamos más allá de 60, como 72, se puede ver nuestro es no puede saltar tan lejos, debajo está un poco demasiado distancia. Si sigues aumentando este 90 o 100, puedes ver que no parece un párrafo sino líneas separadas. Este es un tema muy grande en legibilidad y legibilidad, debes mantenerlos a la distancia óptima. Voy a ponerlo en 50. Veamos cómo se ve. Todavía está un poco cerca para mí, supongo que 55 fue mejor. Ahora aquí está. Todo esto se trata de cómo podemos establecer la altura de línea en Photoshop y qué altura de línea deberíamos estar usando para el texto de cuerpo y qué altura de línea se debe usar para encabezar a continuación. Incluso en HTML, puede configurarlo en propiedad line-height con propiedad line-height. Uno es 100 por ciento, 1.2 es 120 por ciento, y lo mismo que esto. Todo esto se trata de line-height, pasemos a la siguiente lección. 10. Espaciado de letras (en el kerning: Podrías haber escuchado a diferentes diseñadores decir, vale, estas, fallas o este tipo kerning está un poco apagado, o estas dos palabras necesitan ser kerned. Entonces básicamente, kerning es el espacio entre dos letras individuales de cualquier tipo, o cualquier fuente, o cualquier palabra. Entonces puedes ver por aquí el espacio entre o y t, básicamente es el kerning. Si miramos esta palabra, he aumentado el kerning, así que básicamente, tienen un espacio un poco más grande entre las dos letras, o incluso todas las letras. Básicamente, lo que significa es que a veces algunas de las letras, si se puede ver aquí en la palabra topografía, algunas letras como g y r están un poco más cerca unas de otras que pocas letras como p y o y otras letras. Entonces esto básicamente se llama Kerning. Veamos cómo este kerning va a afectar nuestra tipografía. Entonces lo que significa es que si tratamos de tener buen espacio entre nuestras diferentes letras, entonces es más aireado, apertura, moderno, elegante, con estilo relacionado con la tecnología. Si tenemos menos espaciado entre letras, entonces su estado de ánimo es hacia la intimidad, y podrías haber visto usar las letras muy cercanas entre sí en diferentes logotipos. Básicamente, menos espaciado entre letras se utiliza principalmente en logotipos porque realmente crea un problema en legibilidad y legibilidad. Permítanme mostrarles algunos de los ejemplos de espaciado de letras o kerning. Te voy a mostrar el mal ejemplo y el fijo. Aquí hemos escrito la FedEx en dos formas diferentes. En la izquierda, se puede ver que los e y x están muy cerca uno del otro. No he cambiado ningún espaciado entre letras. Es el valor predeterminado de la fuente. En la parte inferior, se puede ver que he ajustado el espacio entre e y x, por lo que kerning es básicamente el espacio entre dos letras separadas. Yo he arreglado el kerning entre E y X. En el lado derecho, se puede ver la E, D , y E, parecen que tienen más espacio. Entonces en el fondo, lo he arreglado. He reducido el kerning entre estas tres letras y está mirando más parejo a nuestros ojos. Entonces así es como usamos kerning. En su mayoría, se utiliza en logotipos. Has visto logotipos de FedEx, básicamente es kerning muy apretado, mayoría de las letras tocándose entre sí. Es así como hicieron el logotipo de FedEx. Pero así es como arreglamos kerning y cuáles son los malos y buenos ejemplos de kerning. Déjame mostrarte cómo vas a acceder a este kerning en photoshop. En Photoshop, si no ves este panel A personaje por aquí, puedes ir a la ventana y dar click en este personaje por aquí, y esto aparecerá por aquí. Se puede ver aquí, tenemos este V/A y hay un poco de brecha de corte entre dos letras. Este es básicamente el kerning. Podemos tener dos opciones como la óptica. Se puede ver que este interlineado entre letras se ha desplazado. Por lo que la óptica está básicamente relacionada con tus ojos, lo que tus ojos ven, y la métrica es básicamente kerning de máquina, por lo que esto es basado en software. Entonces tenemos cero y otras opciones no están disponibles para esta falla. Estas son dos opciones ahora mismo. Si desea cambiar el espaciado entre letras específicas, entonces seleccione esta letra y utilice este control en su lugar, como éste. Ahora bien, si lo incremento al 200 por ciento, se puede ver que se ha incrementado el espaciado entre a y c. Es así como uso este panel Carácter para aumentar el kerning. Selecciona una letra, y puedes usar este control de seguimiento, pero lo uso para letras simples como esa. Todo esto se trata de cómo usar kerning en Photoshop. 11. Ejercicio de diseño para aplicar lo que hemos aprendido hasta ahora: Hola a todos. En esta lección, vamos a diseñar esta página de blog de aspecto impresionante. Ahora hemos aprendido altura de línea, espaciado de letras, kerning, rastreo, todo. Entonces vamos a aplicar eso en este diseño y empecemos. Voy a usar la fuente de Google para este ejercicio, que es Source Sans Pro, esta es fuente única de Google y del lado derecho, estoy usando imagen de un sitio libre puede ser Pixabay o algo así. Puedes usar cualquier imagen por aquí. Te compartiré los enlaces en la sección de recursos así que asegúrate de usar los enlaces para obtener esta fuente, Source Sans Pro. Empecemos y voy a abrir un nuevo archivo y el ancho debe ser 1400 por 1800 píxeles, resolución de 72 píxeles transparente. No Colorear Gestionar este Documento. Da click en “Ok” y aquí tenemos nuestro lienzo vacío. Voy a presionar “Alt+Eliminar” para llenarlo. Vamos a usar el color blanco como fondo. Selecciona “Blanco” por aquí, luego otra vez, pulsa “Alt+Delete” y aquí tenemos nuestra opción Eliminar en tu Mac. Ahora tenemos nuestro lienzo vacío. Ahora podemos empezar a diseñar, pero antes que nada, vamos a conseguir una grilla por aquí para diseñar nuestras cosas. Acerca de la grilla, lo voy a explicar en la siguiente sección así que no te preocupes por ello en este momento. Sólo haz lo que estoy haciendo ahora mismo. Vaya a Ver y Nueva presentación de la guía y en las columnas use preestablecido personalizado. En las columnas, también puedes usar este 8 Columna y canaleta ancho 20 o si quieres más que eso, puedes usar 30 así y hacer clic en “Ok”. Ahora nuestro lienzo está listo. Empecemos y estoy usando el sitio web de Real Lorem Ipsum para conseguir el texto por aquí, así que voy a usar Chrome para conseguir eso. Estos son los dos recursos que estoy usando para este ejercicio. Este es el sitio web de Real Ipsum y me gusta mucho cómo tienen texto real por aquí con los encabezados, todo lo demás y estamos usando la fuente Source Sans Pro Google. Si quieres abrirlo en fuentes de Google, puedes hacer clic aquí e ir a esta página y seleccionar cualquier fuente por aquí, como negrita, semi-negrita, o tal vez seleccionarlas todas y descargarlas desde este botón. Da click aquí, puedes ver aquí dice, Archivo Zip. Descarga el archivo zip e instálalo en tu PC o Mac. Estos son los dos recursos que estamos utilizando. Este es el que vamos a usar para el encabezado, copiar este texto de encabezado, y lo vamos a pegar en nuestro Photoshop. Vamos a seleccionar este uno Fuente Sans Pro fuente regular, tamaño, voy a seleccionar 64 puntos o 64 píxeles y voy a seleccionar por aquí, Control V. Tengo el texto por aquí. Usemos este color negro grisáceo por aquí. Vamos a usar Source Sans Pro regular, pero necesitamos una negrita por aquí. Esta es una línea muy larga. Hagamos clic derecho en él, convertíamos al texto de párrafo, y arrastremos éste hasta aquí, así. Ahora tenemos un problema de line-height por lo que vamos a usar este line-height o leading 64 y creo que 72 será más que suficiente ya que se dirige. Estaremos usando cerca de 64 o es 66. Hagamos que el área limitadora del párrafo sea un poco más grande así. Nuestro rumbo está todo listo. A continuación, vamos a copiar este jueves, julio algo como esto, esta fecha. Si quieres esto hace nueve minutos, puedes copiarlo. Simplemente no me gusta este, así que voy a usar éste. Simplemente pégalo por aquí. Ahora vamos a usar texto de 18 puntos y debe ser regular. Ahora mismo regular y necesitamos cambiar su color a algún color grisáceo, algo así, gris parduzco. Es 808080. Porque éste no es muy importante, vamos a hacer algo como esto. Entonces necesitamos copiar todo este texto, tres párrafos, copiar y tenemos que pegarlo aquí. Nuestra herramienta de texto ya está seleccionada por lo que vamos a arrastrarla así en esta área como esta y Control V. Ahora tenemos un tema de linea-altura por aquí así que en este momento tenemos 18. ¿ Por qué no usar 18 multiplicado por 1.5, 27. A lo mejor necesitamos un poco de texto más grande, lo que estaremos usando 21 multiplicado por 1.5, 32. Treinta y dos puntos en la altura de línea y 21 puntos para el tamaño del texto así. Ya se ve bien. Selecciona este, top one, necesitamos que sea un poco más grande por lo que vamos a usar 24 puntos y con respecto a 24 puntos, estamos usando 1.5. Su altura de línea debe ser de 36 puntos. Es así como voy a calcular todo. Estoy usando line-height 1.5, y estoy usando este tamaño de deck para ser 21, este es 24, y este es 18, y este es 64. Alinémoslos todos a la izquierda. Selecciona todos estos por Control-clic en ellos o Shift. Haga clic en el último y el primero y luego presione “V” y alinee a la izquierda así. Todos están alineados a la izquierda y se ven bien. Hagamos que esta fecha sea un poco más aburrida como esta, este color grisáceo. Puedes usar cualquier color, tal vez puedas usar algo como esto por aquí B6B6B6 y este es el color que tengo. Ahora nuestro texto está todo configurado. puede ver cómo lo estoy colocando, estoy usando 1, 2, 3, 4 columnas, esta zona de límite para este texto, y vamos a utilizar esta área para la imagen. Dibujemos la línea naranja por aquí, solo selecciona la herramienta de rectángulo y vamos a arrastrar una línea naranja de 15 píxeles por aquí. Es blanco en este momento por lo que vamos a hacer doble clic en él y seleccionar el color naranja. Este es f7a94a. Ahora, todo esto está listo. Hagámoslo un poco más grande desde este lado extendido afuera. Ahora ocultemos la línea de cuadrícula, Control colon, y nuestra cuadrícula está oculta. Seleccionemos este. Ya se ve muy bonito y fresco así que arrastremos la imagen por aquí. Voy a usar la misma imagen así que no necesito encontrarla una y otra vez. Aquí tenemos Ventana, Arreglar, Azulejo Todo Verticalmente, y este es nuestro diseño original. Voy a usar este, arrastrarlo hasta aquí, y cerrar éste. Ahora tenemos una imagen muy grande, por lo que necesitamos atarla en una caja. Ocultemos esta imagen primero. Crea un rectángulo por aquí, habilita tus guías, Control colon, y voy a usar esta área para la imagen. Este es mi rectángulo. Simplemente mueve el rectángulo debajo de esta imagen y vamos a crear una máscara. Voy a dar click entre esta imagen y este rectángulo y aquí tenemos nuestra máscara. Este rectángulo básicamente está actuando como una máscara. También podemos reducir el tamaño de este rectángulo si queremos. A lo mejor necesitamos moverlos a los dos hacia el lado derecho. Simplemente ingresa 1, 2, 3 píxeles, así 30 píxeles. Yo me he movido un poco más a la derecha. Nuestro diseño casi se ve genial y completo. Añadamos una variedad y vamos a usar Italic para el estado y así es como configuramos nuestro diseño. Es realmente genial lucir ya, muy bonito y creo que no muchos diseñadores pueden diseñar así. Esto es muy sencillo. He utilizado todas las técnicas que hemos aprendido en las lecciones anteriores. Mejoraremos este diseño al final de la siguiente sección. Mantente atentos y espera más ejercicios. Antes de entonces, sólo cuídate y adiós. Pasemos a la siguiente lección. 12. Uso de Hyphen, de Hyphen, y emdash de emd: hoy, vamos a aprender sobre guiones y guiones. Hay dos guiones, em y en guiones y guiones. Ahora vamos a aprender todo sobre ellos. En primer lugar, vamos a hablar de guión. guión es el más corto y está ubicado en tu teclado a la izquierda del signo más. Ahora, guión se usa de tres maneras. Número uno, se utiliza cuando una palabra se divide al final de una línea de texto, como se puede ver aquí en la palabra poco realista al final. También se utiliza para combinar dos palabras juntas para crear palabras compuestas como puedes ver aquí, amantes de la diversión. Hay un guión entre diversión y amor. También, se utiliza con dos números de palabras como 20-42. Estas son todas las formas en que podemos usar guiones. Ahora vamos a hablar de en dash. En dash es el segundo más largo en longitud y se utiliza para mostrar espacio de tiempo o rango numérico. Se pueden ver los ejemplos como 9:00 AM- 5:00 PM, julio-septiembre, las vacaciones son del 5-9 de junio. Es así como usaremos en dash. Ahora, em dash. Em dash es el más largo en longitud de los tres guiones, y se utiliza para mostrar un descanso en el pensamiento. Al igual que se puede ver por aquí en los ejemplos por la carretera y por carretera sinuosa, lo fue. Hay una pausa en el pensamiento y así es como lo separaron. También, se puede ver en el siguiente ejemplo, reunimos nuestros suministros. Se hace una pausa, las ocho camionetas y comenzaron despacio. Es así como usamos em dash. Ahora voy a resumir esta conferencia sobre guión en y em dash solo para asegurarme de que recuerdes. Ten en cuenta que em para mega. Em dash es el más largo y en dash es el segundo más largo, y guión es el más corto. Además, ten en cuenta que es necesario utilizarlos donde se utilicen adecuadamente y se requieran. No los uses en cualquier lugar que quieras. Incluso muchos tipógrafos o incluso en diferentes sitios web, he visto a mucha gente cometiendo los mismos errores una y otra vez. Todo esto se trata de guiones y guiones. Pasemos a la siguiente lección. 13. Usar marcas de cita de Usar correctamente: hoy vamos a hablar de comillas. Ahora, mucha gente que he visto no sabe el uso adecuado de las comillas. Ahora, vamos a ver en esta conferencia, cómo usar comillas correctamente como un pro. Ahora, lo primero que debes saber es que todas las fuentes, no admiten comillas rizadas. En el primer ejemplo, se puede ver que estas marcas no son rizadas en absoluto. En el segundo son puramente rizados, y en el tercero son un poco como comillas rizadas estilo máquina de escribir. Asegúrese de que está utilizando una fuente que admita comillas rizadas, y las comillas rizadas se utilizan básicamente en una buena tipografía. Aquí puedes ver he mostrado pocos ejemplos. “ Hola ahí”, dijo. Aquí se utilizan correctamente las comillas rizadas. He visto a muchos diseñadores y desarrolladores que desconocen el uso adecuado de las comillas, y los tipos de comillas. Existen dos tipos de comillas. Una son comillas rectas, y otra son comillas rizadas. Ahora, las comillas rectas se usan normalmente para pies y pulgadas, y también se llaman pies y pulgada marca o marca de segundo y minuto. Estas son básicamente rectas, y las comillas rizadas se usan básicamente cuando se está mostrando que alguien está hablando. Este es el uso adecuado. Se puede ver en el primer ejemplo, estoy usando comillas rizadas abriendo y cerrando al final y inicio. Seis pies se muestra con sólo una comillas rectas, y pulgadas se muestra con dos comillas que son rectas. Los otros dos son los usos equivocados de las comillas. Ahora, en la pantalla te voy a mostrar las teclas de acceso directo para mostrar estas o usar estas comillas en Photoshop, o cualquier otro programa, programa de edición de Word, abrir cotización única, Alt más 0145. Tenemos que presionar eso mientras presionamos la tecla Alt. Para usuarios de Mac, Opción más corchete derecho. También la cotización simple de cierre, Alt más 0146, y para Mac, Option plus Shift más corchete derecho. Ahora, para las comillas de apertura doble, necesitas usar Alt más 0147 en Windows, y en Mac, necesitas usar Opción más corchete izquierdo. Para cerrar comillas dobles, necesitas usar Alt más 0148, y en Mac necesitas usar Option plus Shift más corchete izquierdo. Todo esto se trata de usar las comillas correctamente y cuándo usar cuál, recta o la rizada. Si tiene alguna pregunta, pregúntame. Pasemos a la siguiente lección. 14. Roles de tipos: Ahora bien, ¿cuáles son los roles de las diferentes tipografías? En realidad, dentro de una sola familia, podría haber visto algunas fuentes con nombres como display, subhead, regular, cursiva, algo así. En realidad, esta pantalla, subcabecera, y básicamente son los roles de esa fuente o tipo de letra. Lo que básicamente es el tipo de visualización, el tipo de visualización se hace solo para encabezados o texto muy grande. El tipo de texto es para párrafos de texto de cuerpo regular o mucho texto donde necesitas leerlo mucho. Ahora, también hay pocos otros roles de tipografías como subtítulos. Si hemos visto alguna imagen en Internet, se puede ver que hay una leyenda grisácea en la parte inferior. Eso es básicamente a veces alguna familia de fuentes tiene tipografía de subtítulos en ella, por lo que necesitas usar ese título porque básicamente está diseñado para ese propósito. Las fuentes de visualización están diseñadas para encabezados, por lo que no se pueden utilizar para fuentes de cuerpo o un párrafo muy grande o grande. Subpartida significa subpartida. Display significa que normalmente se puede utilizar para encabezados. Todo esto se trata de los roles de las tipografías. Utilizar siempre el rol y definirlos adecuadamente. Si está utilizando una fuente para el tipo de visualización, no la use para el tipo de texto. Veamos algunos de los ejemplos. Ahora, puedes ver aquí he usado básicamente un tipo de display de buena manera y de mala manera. En el lado derecho, se puede ver que he usado una tipografía, que está destinada a ser para tipos de visualización en el párrafo. Se puede ver que todo es gorras, y creo que no se puede leer muy fácilmente. Fue básicamente diseñado para el tipo de visualización o básicamente encabezamientos. En el lado izquierdo, se puede ver que lo he usado correctamente, y lo estoy usando básicamente para encabezamientos. Podrían conocer la fuente nueva de Bieber y/o de Bieber, básicamente es fuente muy alta, igual que la que estoy usando en este momento. Esto está básicamente diseñado para tipos de visualización. En ocasiones si estás comprando alguna fuente o viéndola en línea, posible que necesites leer parte del texto debajo de ella. Si dice que es para visualización o es un tipo de visualización, entonces usuario para encabezados. En todo tu diseño, úsalo solo para encabezados, no lo utilices para texto de párrafo. Definirla roles. Esta tipografía va a ser mi tipografía de encabezado o tipo de display, y usarla para visualización. Este es otro ejemplo de usos erróneos de tipos de letra. Se puede ver a la izquierda estoy usando una fuente transicional, y es tipo de visualización como encabezado, y en el lado derecho, lo estoy usando como párrafo, lo cual está mal. No utilices un tipo de visualización de ninguna fuente como párrafo. Intenta usarlo solo para encabezamientos o tal vez subtítulos, no para el texto del párrafo. A continuación te presentamos algunos ejemplos más de roles de tipos de letra. Estoy usando aquí fuente PT Sans Google en el lado derecho y en el lado izquierdo es Chapel pro font. No sé que sea gratis o lo he comprado, algún momento no me acuerdo. En el lado derecho se puede ver el PT Sans de Google vienen en muchos sabores como subtítulos, regulares, y audaces o algo así. Estoy usando los tres para estilo de leyenda. En la parte inferior y en el medio estoy usando regular y en la parte superior estoy usando negrita. Del lado izquierdo, es la misma historia. Estoy usando el tipo de visualización como mi encabezado, regular como mi párrafo, y el título como el título en la parte inferior. Todo esto se trata de roles de tipos de letra. Defina el papel de su tipografía cuando esté diseñando algo y úselo en su diseño. Mantenlo consistente y tu diseño se verá genial e impresionante. Pasemos a la siguiente lección. 15. Escalas tipográficos: He visto muchos diseñadores que nunca han usado jerarquía tipográfica o escala. Ahora, esto sucede con muchos diseñadores novatos o diseñadores que aprenden de diferentes tutoriales o algo así. Por lo que la jerarquía tipográfica básicamente proviene de la jerarquía visual donde tenemos concepto de like, cosas importantes obtienen tamaños más grandes. Por lo que si tienes encabezados o subtítulos o títulos, serán más grandes que los textos normales o de párrafo. Por lo tanto, ten en cuenta que el tamaño diferirá con la importancia. Veamos cómo vamos a crear una escala. Llegando al paso que cómo crear una jerarquía o escala tipográfica. Entonces, en primer lugar, lo que vamos a hacer es que vamos a seleccionar un tamaño base. Por ejemplo, consideras como 16 píxeles deberían ser mi tamaño base o tamaño de párrafo o la base de mi jerarquía tipográfica. Entonces vas a seleccionar una relación de escala o cuánto vas a escalarla. Al igual que en cada paso, lo vas a escalar en 1.5 o 1.25, o la relación dorada, que se llama 1.618. Entonces en la parte inferior, te estoy dando un ejemplo sencillo de cómo calcularlo. Por ejemplo, mi tamaño base es de 18 píxeles. Por lo que el siguiente paso de escala será de 18 píxeles multiplicados por 1.5 que será de 27 puntos o 27 píxeles de tamaño de fuente. Por lo tanto, ten en cuenta que así es como vamos a calcular escala. Entonces este es el primer paso. Si quieres el segundo paso, entonces vas a multiplicar 27 por 1.5 para conseguir el siguiente paso. Entonces déjame mostrarte un ejemplo. Ahora aquí tenemos ejemplo de jerarquía. En el lado derecho, les estoy mostrando que tenemos una relación de escala de 1.44, y se puede ver usando esta relación, tenemos rumbo en 54 píxeles y luego la subpartida es de 37 píxeles. encabezamiento cuatro es de 26 píxeles y el encabezamiento cuatro es de 18 píxeles y el texto pequeño es de 13 píxeles. Se puede ver en el tiempo de la izquierda usando esta escala para el tagline, estoy usando el tamaño de encabezado tres que era 26 píxeles para el encabezado 54 y para el texto del cuerpo, estoy usando 18 píxeles. Entonces este es básicamente el concepto de cómo vamos a armonizar básicamente cada paso. Esto se calcula por lo que se verá bien. Si solo seleccionas valores aleatorios, no van a encajar. 16. Herramientas en línea para escamas tipográficos: Ahora les voy a mostrar algunas de las herramientas en línea para crear esta jerarquía automáticamente o obtener los valores. Incluso si eres desarrollador o diseñador , te ayudará mucho. Veamos cuáles son esas gemas ocultas. El primer sitio que te voy a mostrar es este modularscale.com. Se puede ver aquí tenemos, a la izquierda, es base y luego la relación. Se puede establecer la relación a partir de esto. Esta es la tercera mayor y estas se basan en, creo que la música. Podría estar usando esta proporción dorada. Puedes usar este o puedes establecer tu personalizado. Puedo establecer como 1.35, algo así o tal vez 1.4, que es par número. Para los diseñadores, podrían confundirse cuáles son estos valores em. Básicamente, se trata de una medición relativa. Por lo que 1em es igual a básicamente 16 píxeles. Puedes multiplicar todos estos valores por 16 píxeles, como 7.53 multiplicar por 16 para obtener tu valor de píxel. El otro método es que por aquí, 18 píxeles. Se puede ver junto con este em, te está mostrando con el tamaño base de 16 que el valor de píxel es básicamente éste. Ahora, 18 pixel, luego 25 pixels, 35 con esta relación. Si cambio la relación, se puede ver que esto va a aumentar. Voy a usar 54. Algo así. A lo mejor 618. Esta es la proporción dorada; 18, 29, 47, 76, 123, etcétera, etcétera. El beneficio de este sitio es que también podemos ir en los tamaños más pequeños. Después de 18 píxeles, tenemos 11 píxeles. Normalmente me gusta que esté más cerca de este 1.33 o algo así. Te da mucha buena gama como 18, luego 24, 32, 42, 56, algo así. También en los tamaños pequeños, no es muy pequeño. Tengo 14 pixeles por aquí. Ahora es así como vamos a utilizar esta báscula modular. Entonces hay otro que es éste. También es muy cool y puedes agarrar fácilmente el CSS. Genera automáticamente. Para los desarrolladores, es una herramienta muy bonita. Puede generar fácilmente las mediciones relativas y todo para ti. Nuevamente, el tamaño base es de 16 píxeles igual a 1em. Te está mostrando. Entonces puedes usar estos. Creo que este me gusta. Entonces también puedes ver una vista muy bonita de cómo se verá. Aquí está el rubro y luego tenemos los párrafos y el rubro 1, 2, 3, 4, supongo. Aquí tenemos el texto pequeño o tal vez el pie de foto. Esta es otra herramienta. Esta es herramienta muy cool. Se puede ver aquí tenemos los valores en em. Si lo deseas en píxeles, lo multiplica fácilmente por 16 píxeles. Voy a ponerlo en 18 píxeles ahora mismo. Se ha desplazado de nuevo con 18 píxeles. Ahora mi texto es un poco más grande. El último instrumento, que también es muy bonito y tiene otro factor que es esta altura de línea. Si estás usando esta escala como estoy usando 1.33, aquí hay otro factor que controlar, que es la altura de línea. Se puede ver que muestra cómo se verá esta altura de línea. Yo lo he puesto en 1.45. Vamos a previsualizarlo. Muy bonito. Cierra la vista previa. Hay algunas cosas buenas al respecto y algunos contras sobre este sitio o esta herramienta. Puede crear el código en valores de píxeles. Se puede ver por aquí tamaño de fuente, altura de línea, todo. En la unidad RAM, que está destinada a desarrolladores. Entonces si eres diseñador, no te preocupes por ello. Simplemente usa este valor de píxel por aquí y estarás bien para ir. Aquí tenemos textos corporales, que es el párrafo 18 pixel, luego el encabezamiento 1 es de 42 pixels. Si eres desarrollador, puedes copiar fácilmente todo este código por aquí y usarlo en tu desarrollo. Aquí está el HTML que han utilizado, aquí está el CSS. Estas son todas las herramientas que quería mostrarles chicos sobre cómo usar escalas de cuadrícula o escala tipográfica de buena manera y para mejorar sus diseños. Espero que hayan aprendido algunas buenas lecciones en esta conferencia. Pasemos a la siguiente lección. 17. How niveles de Hierarchy de Hierarchy tipográficos yo?: Ya hemos aprendido acerca de la jerarquía tipográfica y de qué se trata. Ahora, necesitamos saber cuántos niveles jerárquicos necesito? A lo mejor depende de tu proyecto, pero normalmente 4-6 niveles son más que suficientes. Ahora, ¿qué significa 4-6 niveles? Te voy a mostrar en los próximos minutos. Ahora bien, podría haber visto esos encabezamientos pequeños como el rubro 5 o el rubro 6. Si eres desarrollador, podrías entender lo que estoy diciendo en este momento. Entonces si eres diseñador, no te preocupes. Te voy a mostrar en unos segundos. Rara vez se utilizan encabezamientos pequeños, como el rubro número 5 o el rubro 6. Algunas personas podrían estar de acuerdo o algunos podrían no estar de acuerdo conmigo, pero creo que seis niveles de jerarquía son más que suficientes. Ahora, en primer lugar, podríamos necesitar encabezamientos, que son el rubro 1, 2, 3, 4. Por lo que cuatro niveles para partidas o cuatro tamaños diferentes para diferentes partidas, como rubro 1 y luego subpartida y subsubsubsubpartida, algo así. Entonces necesitamos un tamaño para el texto corporal, que podría ser de 18 píxeles, 20, o 16 píxeles. Entonces necesitamos un pequeño texto. En ocasiones necesitamos escribir un texto muy pequeño, como subtítulos o texto muy grisáceo, en algún lugar como podrías haber visto algunas fechas escritas en números muy pequeños o en tamaño muy pequeño. Entonces desde mi punto de vista, seis niveles de jerarquía son más que suficientes, si estás diseñando para móvil y web. No estoy hablando de libros. Libro o revistas podrían necesitar más de estos niveles. Veamos cómo he usado cinco niveles de jerarquía, o puedes decir cinco tamaños diferentes de la relación de escala en mi jerarquía y cómo lo he implementado. Podría haber visto esto antes. Este es el mismo ejercicio. Se puede ver a la derecha estoy usando cinco tamaños diferentes; 54, 37, 26, 18 y 13. Ahora del lado izquierdo estoy usando un tagline y un encabezado y un texto de párrafo. Por lo que se puede ver para el encabezamiento 4 y el texto del cuerpo, el tamaño es el mismo, solo el encabezado es un poco audaz. El encabezado está en negrita y el texto del cuerpo es un tipo de letra regular. Entonces estoy usando 26 pixel, que está encabezando tamaño 3 para mi tagline. Entonces si estás diseñando, eres el diseñador o un diseñador web o diseñador de aplicaciones móviles, debes tener esto en consideración. Para que puedas usar los mismos cinco niveles en tus taglines, encabezados, texto corporal, listas, o algo así. Entonces esto se trata de niveles de jerarquía, o cuántos niveles realmente necesitamos en nuestro diseño web o móvil. Espero que hayan disfrutado de esta conferencia. Pasemos a la siguiente conferencia. 18. Ritmo verticales: Ahora, hablemos de lo que es el ritmo vertical o la cuadrícula basal. Algunos de ustedes podrían estar usando la línea base, pero sé que la mayoría de los diseñadores incluso que están usando Photoshop de los últimos años, no saben qué es un ritmo vertical o una cuadrícula basal. Básicamente, vamos a crear armonía en diferentes elementos de diseño mediante el uso de un espaciado vertical uniforme. Esto es básicamente para diseñar nuestro texto. Incluso puedes aplicarlo en diferentes elementos de diseño como botones, gráficos, y pocas otras cosas. Básicamente crea una armonía vertical entre nuestros elementos de diseño y nuestro tipo. Ahora, cómo calcular el tamaño de la cuadrícula basal. Básicamente, el tamaño de la cuadrícula basal se basa en su tamaño de fuente base multiplicado por su altura de línea. Entonces si tengo un tamaño de fuente base como 18 pixels y mi altura de línea es 1.5, obtendrás 27 pixeles de tamaño de cuadrícula basal. Ahora bien, esto es básicamente el tamaño de la cuadrícula basal. También puedes usar múltiplos de tu tamaño de fuente base, como si tuvieras cuadrículas basales de 27 píxeles, también puedes usar nueve píxeles o tal vez 18 píxeles. A veces es posible que necesites usar nueve o tal vez múltiplo de 27. Esta cuadrícula basal es básicamente la unidad de armonía. Por lo que si quieres usarlo, puedes usarlo en todos tus elementos de diseño. Al igual que si quieres dimensionar un botón, lo que puedes tamaño como 27 multiplicar por 2, es 54, supongo. Ahora, puedes usar la altura de 54 píxeles para tus botones. Lo mismo se aplica al ancho. Esto es básicamente ritmo vertical, por lo que se aplicará más a la altura de los elementos que al ancho de los ítems. Es así como lo aplicas a tu diseño, tu tipo, y a todo. Permítanme mostrarles el ejemplo de cuadrícula basal de 26 pixels. En el lado izquierdo, estoy usando una palabra sin ritmo vertical. Simplemente estoy espaciando con mi instinto. Se puede ver en el lado izquierdo, no están alineados verticalmente muy bien. También el párrafo está un poco desalineado. Entonces del lado derecho se puede ver que estoy usando la cuadrícula de línea base y estoy alineando verticalmente todo de acuerdo a mi ritmo vertical y línea de base. Se puede ver el subepígrafe Roboto Condensado 26 píxeles del lado derecho está alineado en el medio, en medio de las dos líneas de base. Además, nuestro encabezamiento principal está alineado entre tres unidades basales, y nuestro párrafo también está sentado dentro de cada línea base y en medio de ella. También puedes alinearlo con la parte inferior de tu texto. Por lo que puedes simplemente en lugar de alinear párrafos en medio de estas líneas de base, puedes ponerlos o puedes hacerlos sentar en la parte inferior de tu línea base de fuerza. Empareja la línea base de fuerza con la cuadrícula de línea y eso también puede ayudarte a alinear todo perfectamente. En esta sección, te voy a mostrar cómo puedes usar los múltiplos de cuadrícula de línea base, márgenes delanteros, espaciado, y/u otros elementos de diseño. Como ya les he dicho antes en la diapositiva anterior, se puede ver a la izquierda estoy usando el 26 pixel como mi línea base, por lo que 13 pixel también es una unidad de esta línea base un múltiplo de esta línea base luego 52,78,104, y 130. Cómo obtuve esto, 26 multiplicado por 2 es 52, y luego multiplicar por 3, 78, multiplicar por 4,104. Del lado derecho, se puede ver que estoy usando estos mismos múltiplos para espaciar dos secciones. El párrafo superior y encabezamiento y nueva sección en la parte inferior se puede ver Yo soy ellos con 104 píxeles, que también es un múltiplo de 26 píxeles. Esto es básicamente cómo crear armonía y ritmo vertical en tus diseños. Esto realmente mejorará tu diseño al siguiente nivel. Si estás usando una muy buena habilidad tipográfica junto con esta cuadrícula basal, entonces incluso solo el tipo de tu diseño, solo el tipo, encabezado y textos pueden realmente impactar al usuario, así que úsalos sabiamente y pasemos a la siguiente lección. 19. Ritmo vertical de Photoshop: Ahora, déjame mostrarte algunas de las formas en que podemos crear este ritmo vertical en Photoshop. Voy a abrir un archivo nuevo y lo voy a dimensionar 1400 por 972 píxeles. No maneje el color este documento. Aquí tenemos el lienzo vacío. Voy a presionar “Alt Delete” para llenarlo con un color de primer plano. Ahora, voy a usar escala modular base de 18 píxeles. Este, estoy usando este sitio base de 18 píxeles y 1.5 es mi relación. Básicamente mi línea de base es de 27 píxeles. Te voy a mostrar cómo dibujar esas líneas de 27 píxeles para que puedas utilizarlas fácilmente en tus diseños. Lo que voy a hacer es que te voy a mostrar cómo hacerlo en Photoshop. En primer lugar, vamos a usar algún texto por aquí. A lo mejor voy a elegir este color grisáceo. Voy a usar un párrafo por aquí. El tamaño debe ser de 18 píxeles. Nuestra nota del sitio de 18 puntos es de 18 puntos. Voy a ir a teclear y pegar a Lorem Ipsum por aquí. El alto de línea que voy a utilizar es de 1.5. Entonces voy a decir 27 pixeles por aquí. Ten esto en cuenta, vas a usar la altura de línea misma que una línea de base. Por lo que 27 pixel es básicamente tu altura de línea para fuente de 18 puntos. Ahora bien, este es nuestro texto de párrafo. Perdón, debería estar usando una fuente normal en lugar de media. Esta es mi fuente base, tipo base, y voy a usar un encabezado. Veamos cuál es el tamaño del encabezado, 41 píxeles. Voy a usar ahora mismo, 41 pixeles. Voy a dar click una vez por aquí, 41 puntos por aquí. Voy a usar cara audaz por aquí. Te voy a mostrar que este va a ser nuestro rumbo. Usemos algunos subtítulos por aquí. Usemos medio para eso. Es un subtítulo. Aquí está el subtítulo. Este es solo un texto ficticio, así que no te preocupes por ello. Voy a cambiar su color a un color un poco grisáceo ahora mismo, así, solo para conseguir algo de variedad. Veamos qué cae el siguiente tamaño, 27. Voy a usar 27 para este, así. En este momento, no estoy usando ninguna cuadrícula para alinear todos estos. Por lo que ahora vamos a usar una grilla. Empecemos. Vamos a crear un nuevo archivo con el ancho de 100 píxeles y nuestro tamaño de cuadrícula era de 27. Así que establece la altura de ese documento en 27 píxeles, presiona Ok. A continuación, en este menú Formas, seleccione esta herramienta de línea. Acercar un poco, controlar más y arrastrar un píxel. Asegúrate de que en la parte superior sea una línea de punto. Entonces estoy usando esta línea de un punto y arrástrela en la parte inferior. También podemos usar un color negro un poco más oscuro. Ahora, controla A marchando S, selecciona todo. Vamos a usar patrón definido. Aquí lo nombramos cuadrícula de línea base de 27 píxeles. Presionar Ok. Pasar a este documento. Selecciona esta capa, y voy a presionar e ir a estilos de capa. Entonces vamos a usar esta superposición de patrones. Vamos a utilizar este último, que fue nuestro patrón basal. Ahora bien, este es nuestro patrón basal. Se puede ver que nuestro texto no está alineado. Hay dos formas en que podemos alinearlo así, sentarnos en la parte inferior de la línea base. Así es como lo hago normalmente, así. El subtítulo debería estar por aquí, así. Es así como vamos a alinear todo. Si quieres, puedes ir, por ejemplo, si quiero que el subepígrafe esté más cerca de éste, cuánto me puedo mover por aquí, ¿sabes? ¿ Te acuerdas? Puedo mover nueve píxeles abajo. Entonces ahora mismo voy a mover 1, 2, 3, 4, 5, 6, 7, 8, 9. Todavía está en proporción porque nueve es también el múltiplo de 27 y 18. Entonces así se verá nuestro texto en una línea base, y usando una cuadrícula de línea base. Una cosa más es normalmente, algunos diseñadores también lo usan así en la web, lo usan en el medio así, y también lo alinean así. subtítulo debería estar por aquí, así. Entonces este es otro arreglo. Yo estoy alineando todo en el medio. Este es otro arreglo que es recomendado por muchos desarrolladores web. Entonces ahora mismo vamos a usar este, sigue éste. A mí me parece más profesional. Ahora bien, si tratamos de ocultar esta superposición de patrón, puedes ver que nuestro texto está perfectamente dispuesto. Aquí está el siguiente reto para ustedes chicos. Crea algo como esto. Utilizar una báscula modular. Creas una jerarquía tipográfica y usas eso y alinearla con el ritmo vertical y me lo muestras. Pasemos a la siguiente lección. 20. Ejercicio de diseño para ritmo verticales: En esta lección, vamos a mejorar la última lección que hicimos la nuestra en la sección uno. Esta es la lección que hicimos en la sección uno. Ahora lo que vamos a hacer es que vamos a aplicar las habilidades que hemos aprendido, habilidades tipográficas que aplicaremos en eso. Entonces aplicaremos rejilla de base a este diseño y altura de línea y todo. Empecemos. Este es nuestro artículo de blog de la lección anterior, así que vamos a guardarlo como otro archivo. A lo mejor arreglado o algo así. Ahora primero que nada, vamos a utilizar este sitio que es gridlover.net y nuestro tamaño de fuente base es de 20 pixels, altura de línea, voy a usar 1.6, factor de escala es 1.3. Factores de escala básicamente significa cuánto la diferencia de una partida a la otra. Nuestra diferencia de escala de tamaño de fuente. Esta es la relación. Estoy usando una relación muy baja. No mezcles esta altura de línea con el factor de escala. El factor de escala es diferente, la altura de línea es diferente. Por lo que 20 multiplicado por 1.6 es 32, lo que nuestra altura de línea será de 32. En primer lugar aplicemos la altura de línea a esta página o a este diseño. Lo que voy a hacer es que voy a duplicar este fondo. En primer lugar vamos a aplicar rápidamente el patrón. En las lecciones anteriores, les he dicho cómo crear este patrón, así que no quiero repetirlo de nuevo. Ya he creado un patrón para este 32 pixeles. Yo lo voy a aplicar a este documento. Se puede ver este documento no encaja bien en la parte superior e inferior. Lo que vamos a hacer es editar el tamaño de la imagen. Veamos, divide 800 por 32 y es 25, lo que es casi perfecto. Empecemos. Vamos a cambiar un poco el fondo. Zoom, 1, 2, 3, 4, 5, 6, 7, 8. Esto se ve perfecto. Ahora está ajustando nuestro patrón de superposición de 32 píxeles es apropiado. Si no recuerdas cómo crear esto, mira la sección uno, he creado esto para ti. Ahora ante todo, ahora vamos a cambiar los ajustes y tamaños para nuestro texto y todo. Este es nuestro texto. En primer lugar vamos a usar 20 píxeles porque 20 píxeles es nuestro tamaño basal. Vayamos a 20 píxeles y la altura de línea fue de 1.6, por lo que es igual a 32 puntos. Pasemos eso a 32 puntos. Vamos a mover nuestro texto de acuerdo a las líneas de base por aquí, cuadrícula por aquí. Así es como se ve. Vamos a mover el jueves. El tamaño del jueves es de 18. Ahora aquí tenemos el problema. Necesitamos otra escala que muestre nuestro pequeño texto también. Vamos a utilizar escala modular y 20 píxeles y 1.3. Esto ya es que he guardado, así que ingresa 20 pixels, proporción 1.3. Voy a ver el tamaño más pequeño que este 20 pixels, son 15. Si lo deseas, puedes usar 15 por aquí así, 15 puntos y moverlo por encima y por debajo de este rubro. Ahora bien, ¿por qué uso este? Porque este nivel de cuadrícula no me muestra el tamaño del texto pequeño. Si vas a este código, no puedes ver ningún texto pequeño por aquí. título cinco es de 20 píxeles y ningún tamaño está por debajo de 20 píxeles. Necesitamos un tamaño que esté por debajo de 20 píxeles, así que lo cambio a esta escala modular. Ahora si ves nuestros tamaños de fuente son 20, 26, 34, y 44. Lo mismo está por aquí. Se puede ver el encabezamiento uno es de 44 píxeles. Se puede ver por aquí tamaño de fuente 44 píxeles, después tenemos 34, luego tenemos 26, y 20. escala es la misma, solo que aquí no tenemos el cálculo de tamaño pequeño. Nuestro siguiente paso será dimensionar perfectamente este rubro. Vamos a usar tal vez 57 o 44. Puedes decidir lo que quieras usar. Voy a ir con este 44 pixels. Ahora voy a seleccionar este encabezado y vamos a ponerlo en 44 píxeles. Así es como se ve ahora mismo. Vamos a agregarle algunos textos más para que quepa en dos líneas. No queremos dejar una segunda una o dos letras al final. No es una muy buena práctica de tipografía. El tamaño es 44. Ahora también voy a establecer la altura de la línea en 44 porque quiero sólo una igual a la altura de la línea, otra para los encabezamientos. Si recuerdas mi último tutorial o lección, tal vez recuerdes que la altura de línea para el rumbo es de casi 100 por ciento o 110 por ciento, por lo que está más cerca del 100 por ciento. Se puede ver que estoy usando estas tres líneas por aquí para equilibrar este rubro. Ya puedes ver que estoy usando estas tres líneas, así que alinémoslo un poco más a la baja. Tengamos el tamaño de este igual a 20 píxeles, por lo que es fácilmente legible. No estamos buscando demasiada variedad. Necesitamos que el usuario lo lea y todo está configurado en este momento. Supongo que solo vamos a cambiar el tamaño de éste. La altura es de 15, por lo que la hacemos igual a ocho, lo cual también está relacionado con nuestro tamaño basal y simplemente lo colocamos en medio de la C así. Una cosa más. En la lección anterior, aplicamos esta línea de rejilla, así que asegúrate de que tus elementos estén alineados con esta línea de rejilla. Si no recuerdas cómo crear esta línea de cuadrícula, ve a Ver, Nueva disposición de la guía, y luego usa ocho columnas, canalón de 30 píxeles y todo lo demás. Simplemente déjalo márgenes. Si no quieres margen, solo déjalos así y pulsa Ok. Generarás algo parecido a mí. Ocho columnas, canalón de 30 píxeles, y hasta ahora creo que quizá no sepas qué es la canaleta porque estará en la siguiente lección. Entonces no te preocupes por ello. Sólo tienes que mantener los ajustes así. Habilité mi cuadrícula con estas columnas de control para ver dónde están alineadas mis cosas. Esta barra naranja está alineada con precisión. Todo lo demás se ve genial. Este es nuestro primer hito. Ocultemos la superposición de patrones y veamos cómo se ve nuestro documento. Se ve realmente bonito. El espaciado entre elementos es genial, todo se ve bien. Hemos aplicado escala tipográfica y línea de base para realzar nuestros diseños. Ahora el segundo paso. Segundo paso es que si ves de cerca entre estos dos párrafos y los párrafos inferiores, creo que es un espacio un poco más grande entre todos estos párrafos. ¿ Por qué no acercarlas? Vamos a Control J en este texto. Este es nuestro texto antiguo, así que voy a duplicar esta capa. Lo que vamos a hacer es que vamos a quitar un espacio o regresar aquí. Presioné Entrar o regresar por aquí. Ahora están alineados. Ahora selecciona la primera línea y ve cuál es la altura de la línea es 32. Necesitamos algo entre 48 o 64. El siguiente paso es de 64, pero dividiremos nuestra línea de base a la mitad, por lo que la mitad de la línea base es de 16 puntos. Estoy sumando 32 más 16, así que son 48. Voy a cambiar esto a 48 en lugar de 64, que fue el ajuste anterior. También este al 48. Te mostraré la diferencia una vez terminada. Permítanme habilitar la superposición de patrones para nuestra cuadrícula de línea base. Esta es nuestra cuadrícula de referencia. Se puede ver por aquí que nuestra línea de base se está bajando de ritmo como en la música, pero en cuanto pasa al siguiente punto vuelve a estar dentro del patrón. Se vuelve a alinear a nuestra cuadrícula de línea base. ¿ Por qué? Porque nuestra escala de base que es de 48 puntos es básicamente, ¿qué es? Básicamente es 1.5 veces nuestro tamaño basal, por lo que 32. Vamos a contarles el secreto por aquí, 32 multiplicado por 1.5, 48. Siempre que intentes salir de ritmo solo tienes que ir algo como esto, multiplicarlo con 1.5 o 1.25, 32 multiplicarse por 1.25, algo así. 1.25 y 40, también podría ir bien, pero creo que 1.5 es lo suficientemente bueno. Es así como utilizamos nuestra cuadrícula basal y este es el texto anterior. Este es anterior y éste está un poco desplazado hacia arriba. Por aquí se puede ver un poco menos brecha entre párrafos y se ve muy bonito. Estos son los secretos de altura y escalas de línea, escalas tipográficas, cuadrícula basal. También si cuentas las palabras en esta línea, creo que están más cerca de algo así como quizás 70 caracteres. Creo que está más cerca de 70 u 80 tal vez. Es creo que la longitud de línea óptima. No quiero perder su tiempo contando aquí. Es así como aplicamos nuestra altura de línea con dos métodos diferentes. Uno está usando la altura de línea perfecta, que es de 32 píxeles o 32 puntos. Después nos fuimos un poco desfasados al multiplicar nuestra altura de línea a 1.5 desplazando dos párrafos más cerca uno del otro. Estas son dos técnicas que hicimos. Espero que les haya gustado este ejercicio, descarguen sus archivos de los recursos, y nos vemos pronto con más en este tipo de ejercicios. Este es otro reto para ti, intenta replicar lo que hice aquí. Veamos con qué se te ocurre y esperamos ver tus diseños muy pronto. Pasemos a la siguiente lección. 21. Introducción a la cuadrícula modular: En esta lección, vamos a aprender sobre la cuadrícula modular, y veremos cómo usarlo, cuáles son las diferentes partes de la misma, y cómo usar módulos, márgenes, dispersiones y líneas de cuadrícula para crear diseños de aspecto impresionante. Nuestro primer paso es que ya sabemos de las líneas de base. Esta es nuestra línea de base de 30 píxeles. Lo que hice es que creé este documento con el tamaño, que es múltiplo de 30 píxeles. La altura es 810, por lo que la altura es básicamente múltiple de mi línea de base de 30 píxeles. Se puede ver en el panel de capas, he creado una capa que se llama línea base de 30 píxeles. Entonces como te he mostrado en lecciones anteriores, creé un patrón con línea de base de 30 píxeles, y lo aplicé a una capa. Desde aquí, se puede ver que ya conocíamos esta materia de línea base, este es el primer paso. El segundo paso es que vamos a dividir este diseño en porciones horizontales y verticales. Entonces aquí vienen las canaletas. Cómo creé estas canaletas, se puede ver por aquí, esta es básicamente mi grilla. Si enciendo mi columna de líneas de cuadrícula controlada en Photoshop. cuadrículas son básicamente espacios entre diferentes columnas. Se puede ver por aquí la porción blanca es la columna y la gris es la canaleta. Entonces canaleta es básicamente márgenes internos entre diferentes columnas, esto es solo para espaciar diferentes elementos entre sí para que no se toquen las orejas o la nariz del otro, etc. Así que si estoy diseñando algo y coloqué algo por aquí así, lo siguiente es que voy a colocar otra aquí así. Este es básicamente el margen entre ellos. Realmente crea una elegancia en tu diseño si sigues esto. Si eres desarrollador web, ya sabías acerca de 12 líneas de cuadrícula de columnas o 60 columnas. También se basan en esto. Incluso Bootstrap utiliza canalón de 30 píxeles. Por lo que esta canaleta en Bootstrap es igual a 30 píxeles. Cómo creé estas canaletas en Photoshop, acabo de ir a este nuevo diseño de guía y tengo 30 pixeles canalones y ocho columnas. momento, he dividido este diseño en ocho columnas. Puedes usar 12, 16, lo que quieras. Además, la tercera parte que estoy usando en mi diseño, que es muy importante, es que dejes algún margen alrededor de tu diseño. Entonces déjame solo primero despejar el margen, mostrarte el margen. Entonces esta porción amarilla es básicamente mi margen. Entonces si lo ves por aquí en línea de cuadrícula, puedes ver que tengo 90 pixel top margin, left 30, 90 in bottom, y right at 30. Aquí está el secreto: Por qué estoy dejando márgenes de 30 píxeles y 90 píxeles, el secreto es nuestra línea de base. Nuestra línea de base es de 30 píxeles, así que he establecido todo alrededor de ese número; 30 píxeles, luego 90 píxeles, múltiplo de nuestra línea de base. Entonces así es como lo he configurado todo. Tenemos configurada nuestra cuadrícula de línea base, ésta es, y luego tenemos canaletas, luego tenemos márgenes, y luego el siguiente paso. Entonces el siguiente paso es que tenemos el espacio dentro de esta área, lo hemos dividido en columnas horizontales y columnas verticales, ocho columnas, pero ahora vamos a crear otra cosa que se llama módulos. Vamos a subdividir esto en diferentes cajas o módulos separados. Se puede ver por aquí que este es un módulo, este es un módulo, y éste es otro, o también podemos usar módulos como este; como tenemos 1, 2, 3, 4, algo así, pero la altura que estaremos usando será igual a este módulo. Entonces, en realidad lo que hicimos es que estamos dividiendo todo el diseño en diferentes porciones las cuales se calculan matemáticamente por lo que aporta armonía y elegancia al ojo de tu usuario. Entonces, por ejemplo, si estoy usando estos dos para mi imagen así, entonces voy a usar, por ejemplo, primero cuatro módulos como ese o tal vez esta porción para mi texto. Para un Lorem Ipsum menos espaciado por aquí así, vamos a cambiar el tamaño, tal vez 72 es bueno. Cambiemos esta altura de línea a 72 y aumentemos el tamaño a 100, tal vez así. La altura de la línea debe ser de 90, y usemos 10 por aquí así. Aún así, creo que estamos teniendo algún problema con la altura de línea. Este se ve bien, solo crea un diseño simple como este. Entonces esta era nuestra imagen, ocultemos esta. ¿ Dónde está la imagen? Está bien, éste. Bloqueemos estas capas que son nuestra línea de base y todo, vamos a encerrarlas. Canaleta, lo voy a bloquear, márgenes, voy a bloquear este para que no los seleccionemos por error. Este fue un poco espantoso así que lo voy a convertir a este color y vamos a quitar su frontera. ¿ Dónde están las propiedades? Aquí tenemos las propiedades de forma, no necesitamos fronteras. Hemos creado un diseño sencillo. Solo ocultemos estos márgenes y todo para que veas cómo lo estamos haciendo con la palabra diseño. Ocultemos esto y todo. Para que veas cómo estamos usando márgenes y todo para diseñar nuestras cosas y todo. Vamos a crear otra capa de texto por aquí. Ahora, voy a usar toda esta área o tal vez toda esta área para crear texto por aquí. Espaciemos Lorem Ipsum, y esta vez vamos a usar un tamaño muy pequeño, como tal vez 24 píxeles. Usemos la altura de 30 píxeles así, vamos a usar cero o tal vez menos que cero, menos 10 así, y casi estamos ahí con nuestros márgenes así. Cambiemos el color a algún negro o algo grisáceo así, ocultemos nuestros márgenes, canaleta, y todo lo demás para ver cómo se ve. Así es como se ve nuestro diseño en estos momentos. Hay una cosa más que podemos hacer, podemos usar los márgenes un poco más por aquí para que no parezca que esté tocando del lado derecho. Entonces tal vez podamos reducir su tamaño a como 30 píxeles. Con 30 píxeles, vamos a crear un poco más de margen por aquí. En el lado derecho, he creado una caja de 30 píxeles por aquí. Entonces esto son 30 pixeles, entonces lo voy a duplicar con mi tecla alt. Esto es de nuevo 30 píxeles, por lo que ahora tenemos 90 píxeles de margen por aquí. Entonces vamos a dimensionar de nuevo este párrafo a este margen de 90 píxeles como este, y vamos a ocultar estos márgenes y todo lo demás. Se puede ver cómo hemos creado el layout así, se ha visto este tipo de diseños en revistas. Aunque podamos hacerlo un poco más audaz, algo así, tal vez un poco menos espacio entre letras, menos espacio entre 72 como este. Podrías haber visto este tipo de diseños en revistas para que sepas que los diseñadores de revistas, son muy buenos para crear estos diseños o estos cuadrícula modular. Ten en cuenta cómo usar esta cuadrícula. Estos son los fundamentos. Tenemos canaletas que se encuentran entre nuestras diferentes columnas. Se puede ver mi contenido no está dentro de ninguna canaleta. Yo los anduvo como aquí, vamos a tocarlo a la izquierda de nuestra canaleta así, y se puede ver incluso mi contenido no está tocando ningún margen, está lejos del margen. Hay dos cosas que debes tener en cuenta al diseñar. Una es que usan rejilla modular, y en el siguiente ejercicio vamos a crear muchos temas diferentes como se puede ver por aquí, éste, éste, y éste usando nuestra cuadrícula modular. Ahora, ya has aprendido todo sobre las rejillas modulares, así que pasemos a la siguiente lección. 22. Preparar cuadrícula para el ejercicio de diseño de blog: En esta serie de ejercicios, vamos a diseñar algo similar a esto. Déjame esconderme a los detalles por aquí para que veas cómo va a ser. Este es un ejemplo. Intercambio muchos diseños y diseños diferentes por el mismo contenido. Este es nuestro contenido. Este es un arreglo, este es el segundo. Se puede ver cómo está afectando nuestro diseño. Este es el tercero. Usaremos módulos, márgenes, línea de base, todo en este ejercicio, incluso ritmo vertical. Este es el último. Hay muchas cosas que necesitas configurar primero. En este ejercicio, les voy a decir cómo configurar esta línea de base, este tamaño de dispersión, estos márgenes, y cómo crear estos módulos. Este es nuestro documento. Veamos primero qué otros recursos vamos a utilizar para este documento. El primer paso que vamos a dar es que vamos a elegir nuestras fuentes de Google. Las dos fuentes que estoy tratando de seleccionar aquí es Lato y Source Sans Pro. Si recuerdas mis últimos ejercicios, ya sabes que una fuente va a ser para encabezamientos y otra va a ser para texto corporal. Estoy usando Source Sans Pro para encabezados y Lato para mi texto. Estas son dos fuentes. Si quieres descargarlos, puedes descargarlos desde aquí, este ícono de aquí e instalarlos en tu PC o Mac y usarlos. Entonces vamos a usar Gridlover o Escala Modular, lo que quieras usar. Vamos a utilizar un factor de escala 1.3, altura de línea 1.5, y el tamaño de fuente base es de 20 píxeles. La altura de la línea sólida será igual a 20 multiplicada por 1.5, 30 píxeles. Treinta píxeles, altura de línea, tamaño de fuente serán de 20 píxeles, factor de escala será de 1.3, por lo que nuestro encabezamiento 1 será de 44 píxeles. Se puede ver por aquí, tamaño de fuente 44 pixels. Si cambias a escala modular, puedes obtener los valores más fácilmente porque solo tiene ratios y tamaño base. Tenemos 44 por aquí. También puedes usar este 57 si quieres, pero 44, 34, 20, luego 15. Esta es nuestra báscula si quieres usar mesa por aquí, puedes cambiar a esta tabla para ver todos los tamaños. Hemos seleccionado nuestra escala, escala tipográfica, nuestras fuentes, y sus roles, qué fuente va a jugar qué papel. Estos son los pasos que hemos cubierto. Entonces vamos a utilizar los datos de este sitio, el contenido de este sitio, ReaLipsum. Para imágenes, puedes descargar imágenes de este picjumbo.com o Pixabay o cualquier otro buen sitio web. Me gusta mucho este sitio web. Si vas a Categorías, puedes cambiar a Personas, Naturaleza, Amor, cualquier categoría o la que prefieras, puedes ir a Arquitectura. Son imágenes muy bonitas, se puede ver por aquí. Puedes seleccionar cualquiera de ellas, ir a la página siguiente. Para imágenes, utiliza este picjumbo.com, categoría, personas o cualquier categoría que te guste, ReaLipSum para texto. Hemos seleccionado nuestras fuentes y filas de fuentes y nuestra escala modular y nuestro tamaño de cuadrícula, que es el grado basal, que es de 30 píxeles, y el tamaño de fuente base de 20 píxeles. Ahora, nuestro primer paso será, vamos a crear algo como esto. Empecemos y abramos un nuevo archivo. Lo que vamos a hacer es que vamos a ajustar el ancho a 1400 y la altura va a ser de 810 píxeles. ¿ Por qué? Porque 810 es fácilmente divisible por nuestra línea de base, que es de 30 píxeles. Si intentas dividir 810 dividido por 30, será un valor entero el cual es 27. Ochocientos diez y prensa Ok. Este es nuestro tamaño de documentos. Ahora pongamos algo de grilla por aquí. En primer lugar lo que vamos a hacer es que vamos a crear un nuevo diseño de guía. No vamos a usar 12 columnas, vamos a usar ocho columnas. Si quieres crear filas, depende de ti. Puedes crear filas o puedes crear ocho filas. Creo que aquí tenemos ocho filas, 1, 2, 3, 4, 5, 6, 7, 8. Esto básicamente es crear nuestros módulos. Ahora lo voy a ocultar. tamaño de la canaleta va a ser de 30 píxeles. Cada columna tiene un espacio entre el cual es de 30 píxeles. Esta es nuestra canaleta. Ahora para los márgenes, el margen superior es de 90 que es igual a nuestras tres alturas basales. Esto va a ser 30, fondo va a ser 90 otra vez, y la derecha va a ser 30. No hay reglas duras y rápidas, si quieres poner más margen, como 120 o tal vez a la derecha e izquierda quieres tener 45 o 60, depende de ti. Asegúrate de que esté sincronizado con tu altura basal, que es de 30 píxeles. Ahora es así como he creado mi cuadrícula. Presionar Ok. Esta es mi rejilla y canaletas y márgenes en la parte superior y la inferior y en la derecha y la izquierda por aquí. Esto es sólo un inicio de mi documento. Ahora lo que vamos a hacer es que vamos a crear algunos módulos. Cómo vamos a crear algunos módulos. Pero el primer paso es, necesitamos una cuadrícula basal. Vamos a crear una cuadrícula de línea base que será de 30 píxeles. Por lo que peso 100 pixels, altura 30 pixels. Vamos a acercar el 1,200 por ciento y utilizar esta herramienta de línea, presione “Shift” y cree una línea por aquí, cambie el color a un poco de gris. Una línea de píxel, asegúrate de que sea una línea de píxel. Ver en la parte superior de aquí donde está la altura un píxel. Asegúrate de que la altura sea de un píxel porque creará problema si tienes una línea de dos píxeles. Controla A y define patrón línea base de 30 píxeles. Lo que vamos a hacer es crear una nueva capa para nuestra cuadrícula de línea base. Controla A o Alt + eliminar para rellenar esta capa con color gris. Vamos a Pattern Overlay esta capa la cual va a ser nuestros 30 píxeles así. Nuestra grilla está un poco apagada. Vamos a ajustarlo. No te preocupes, asegúrate de que esto se escale al 100 por ciento Snap to origin, y creo que ya está arreglado. Presione Ok, y Control D. Esta es nuestra cuadrícula de línea base, está configurada. Ahora vamos a crear algunos módulos en este documento. Lo que vamos a hacer es, vamos a crear 1, 2, 3, que va a ser de 90 píxeles de altura. Que sea 90 pixels. Este va a ser un color un poco diferente como este, o tal vez éste. Este es nuestro único módulo, o básicamente una fila. Básicamente, filas y columnas, se mezclan para crear este estilo de cuadrícula modular. Voy a agrupar esto y controlar G. Básicamente los vamos a alinear así unos con otros. Voy a hacerlo rápidamente. Omita este paso para que entienda lo que estamos haciendo por aquí. Aquí tenemos todos los módulos. Ahora podemos usar algo como esto. Podemos usar tres como este, tres módulos por aquí en quizá cuatro columnas y tres filas por aquí. Es así como vamos a usar. Básicamente, hemos creado pocos bloques legales por aquí. Agrupémoslos por completo. Controla G y haz que su opacidad sea 50 por ciento. Podemos ver nuestra línea de rejilla, nuestros módulos son filas. Esta es nuestra grilla. Nuestro documento está listo. Ya sabes que la parte superior o la izquierda y la derecha, es básicamente el margen. Hemos creado cuadrícula de línea base de 30 píxeles con módulos, diferentes porciones son filas y columnas. Esta es básicamente cuadrícula modular y la vamos a utilizar para crear tres diseños diferentes en la siguiente lección. Es así como preparé mi diseño y también debes seguir estos pasos cuando estás diseñando y diseñando tus sitios web o tipografía en aplicaciones móviles. Pasemos a la siguiente lección donde vamos a crear tres diseños diferentes a partir de estos módulos. Pasemos a la siguiente lección. 23. Diseño de primer diseño de blog: Ahora, primero, vamos a crear este layout, así que en la parte superior vamos a fijar nuestro rumbo, a la izquierda, nuestra fecha de este artículo, y en el lado derecho, 147 likes. A la izquierda, vamos a usar Lato, una versión en cursiva inclinada, estilo cursiva de Lato para tener algún texto de cita o cita por aquí, texto citado. Esto es, vamos a usar 1, 2, 3, 4 bloques, cuatro columnas para diseñar el primer párrafo introductorio, y para el siguiente texto vamos a utilizar estos tres bloques. Tres y bloques, o tres filas y columnas para este, este módulo para esta imagen. Básicamente lo que estamos tratando de hacer es que estamos equilibrando este diseño. Discutamos algo de la balanza por aquí. Al igual que puedes ver este color azul, normalmente el color recibe más atención y es más pesado. Es así como estamos equilibrando con esta imagen y este color por aquí. Este espacio vacío básicamente se equilibra con todo este texto de aquí. En el medio tenemos texto, a la izquierda tenemos, de nuevo, color para equilibrar el peso general del diseño. Es igual que estás balanceando o pesando cosas en tus dos manos o tal vez como balanceas en el balancín. Aquí tenemos un objeto pequeño más pesado, y aquí tenemos un objeto grande menos pesado, como una bolsa de globos de aire o algo así. Aquí tenemos dos piedras. Es así como trato de equilibrar mi diseño. Este es un consejo muy, se puede decir, básico que muchos diseñadores tal vez no sepan. Es así como estamos equilibrando nuestro diseño, esta es la técnica básica entre detrás de este diseño. Empecemos. En primer lugar, vamos a utilizar la escala, si recuerdas, el tamaño del encabezado era de 44 píxeles, y el tamaño del texto era de 20 píxeles. Ahora mismo voy a usar estas dos tallas. Estoy ignorando a todos los demás. Hagamos que nuestros módulos sean más aburridos o más en segundo plano, que podamos ver cómo vamos a diseñar cosas diferentes. En primer lugar, voy a utilizar estas tres líneas para crear mis encabezados, tal vez todo este bloque, y voy a utilizar de nuevo Real Ipsum. Veamos dónde está. Aquí está el Real Ipsum. Copiemos todo esto y peguémoslo aquí así. El tamaño del texto estoy usando 44 puntos y Source Sans Pro bold. Si quieres ir con negro, puedes ir con negro también, así. Tan solo para llenar el espacio, no te preocupes por qué texto estoy usando. Voy a fijar su altura de línea en 44, así. Si queremos ir por encima de 44, podemos ir como 50, así. Tan solo asegúrate de que esté entre estas tres líneas así. También es conmovedor, se puede ver esta columna por aquí. Esta es la canaleta, no estamos dentro de la canaleta, estamos dentro de estas 1, 2, 3, 4 columnas. Así es como estoy usando esto, si quieres ampliar esto, tal vez puedas usar cinco así. No se expandió mucho, porque es un encabezamiento, por lo que necesitamos menos espacio entre las letras. Ahora vamos a usar algún texto por aquí, tal vez podamos dejar esta fila, esta fila por aquí, e iniciar nuestro texto y usar estas tal vez cuatro columnas en este módulo, y vamos a pegarlo sobre algo como esto. Este es nuestro párrafo de inicio o párrafo de introducción. Voy a usar 20 píxeles por aquí. Podemos usar un poco más de altura de línea, tal vez el 45, algo así, y vamos a usar regular, y esto va a ser Lato, no Source Sans Pro. Lato no hairline, pero vamos a usar regular. Ahora puedes ver puedo establecer este bloque de texto en la parte superior de este módulo, o tal vez en la parte inferior, depende de ti. Ahora si lo configuramos así, puede ser así, o tal vez al fondo. Creo que voy a ponerlo a la cima. Vamos a crear otro bloque de texto como este, el mismo, Control J. Voy a copiar éste, y vamos a hacer doble clic en éste y ajustar el ancho y la altura de estas tres columnas, y vamos a usa esto o tal vez puedas ir más allá de esto porque es una página web continua. Voy a usar 30 pixel line-height, y vamos a usar estos dos párrafos. Primero copie este, péguelo por aquí. Creo que es un párrafo muy largo. A lo mejor necesitamos bajarlo un poco, o tal vez en la línea así. No importa mientras estás diseñando, si quieres establecer tus textos en la línea base, puedes hacerlo realidad, pero cuando estás codificando, creo que no es posible fácilmente, así que tal vez podamos establecer así, y también este lo voy a usar así. Vamos a ocultarlo, no se ve muy bien, tal vez vamos a usar algunos ajustes diferentes. Este es Lato 20 y tal vez también podamos usar la misma altura de línea por aquí, o tal vez cambiar el color a algún color más oscuro como este. Haz que este párrafo introductorio se vea bonito. Si quieres separarte con dos líneas, está bien, pero creo que dos líneas entre este introductorio y este párrafo son demasiado. Dejémoslo ahora mismo, pongamos la imagen y otros textos por aquí. Vamos a poner algo de texto por aquí. En primer lugar vamos a poner por aquí. Vamos a copiarlo desde aquí. Viernes 30 de septiembre de 2010, lo voy a pegar por aquí, y vamos a cambiar el color a este color gris, tal vez un color gris un poco más oscuro como éste. El siguiente paso fue, supongo 15. Si quieres dimensionarlo hasta 15, puedes dimensionarlo hasta 15. Ahora mismo lo que estoy tratando de hacer es que estoy usando estas dos columnas y centrando este texto por aquí. Ahora esta fecha se ha establecido todo, así que vamos a usar este 147 likes por aquí, así que 147 enter y Likes. Hagámoslo de cerca, y voy a usar la línea central para esto porque es una pieza de texto muy pequeña, se puede leer fácilmente con alineación central. Reducir es a auto, y voy a usar 34 píxeles por aquí. El tipo de letra será Source Sans Pro. Si quieres ir a este “Light”, puedes ir a este Light one y simplemente seleccionar éste, usa el Color, tal vez éste. Yo lo voy a centrar en esta columna, así. Si quieres ir con Bold, supongo que podemos usar Bold o tal vez Semi bold. “ Semi negrita” se ve bien. Hemos establecido nuestros 147 likes, nuestra fecha y nuestro encabezamiento, y nuestro texto. Pongamos algo más de texto por aquí porque se ve muy raro. A lo mejor podemos “Copiar” una línea desde aquí y “Pegar” por aquí así. Elimina parte del texto para que se vea bien así. Usemos algo de color aburrido para este porque se ve igual. Estoy usando color para esta variación. A lo mejor “50 por ciento” y voy a ir hacia el poco de color gris. “ Gris oscuro” así. Se ve genial ahora. Podemos agregar alguna imagen por aquí y en el lado izquierdo vamos a añadir alguna cotización. Terminará la primera iteración de diseño. Vamos a obtener la imagen. Tengo mucha colección de imágenes. Usemos cualquiera de ellos desde aquí, en lugar de descargar y perder el tiempo. A lo mejor usar a este chico de aquí con un balón de fútbol. Voy a “Arrastrarlo” por aquí y “Tamaño” así. Voy a usar estos tres módulos por aquí. Yo lo he pegado por aquí así. Si quieres que esta imagen esté exactamente en este módulo, entonces vamos a recortar esto dentro de esta caja por aquí. Crea un cuadro de contorno de caja y vamos a “Clip” esta imagen, pulsa “Alt” y “Clip” ella. Es así como vamos a recortar esta imagen así. Vamos a “Ocultar” nuestros módulos y todo para ver cómo va a quedar esto. Así es como se ve en este momento. aspecto genial, los espacios son geniales y todo se ve bien. Añadamos alguna cotización por aquí. Voy a volver a usar mi grilla y “Arrástrela” de aquí así. Voy a usar estas tres filas para esta cita, y voy a usar algún texto por aquí puede ser así. Esta es la cotización. “ Copiar” y “Pegar” por aquí. Es muy pequeño. A lo mejor necesitamos un poco más de texto. Haz algo como esto. Es una cita larga, estoy cambiando el texto para equilibrar este diseño así que no te preocupes ahora mismo por ello. Dejemos “Eliminar” las comillas, porque no las vamos a necesitar. A lo mejor necesitamos apretar un poco porque voy a usar alguna barra azul por aquí. Usemos estas tres filas para esta y voy a usar barra azul por aquí así. Diez píxeles. Voy a “Cambiar” el color a este Azul más claro. La mayoría de estos colores son planos, así que no te preocupes si no entiendes qué colores estoy usando. Se puede ver que estoy usando muy pocos colores. En su mayoría grises y negros y azules. Nada más. Es así como voy a presentar esta cotización. Si recuerdas, tenemos titular en cursiva. A lo mejor podemos usar titular Italic o tal vez Light Italic. Creo que “Light Italic” se ve genial. Es un poco difícil de leer así que tal vez “Regular Italic” sea bueno. A lo mejor podemos cambiar el Color a este azul o este blanco, o tal vez este color gris. Yo “Módulos Dobles” y estas líneas y se puede ver cómo se ve esto. Una vez que hayas configurado tus elementos de diseño intenta ocultar todo lo demás para ver cómo se ve o qué resultado se está consiguiendo para que puedas Cambiar el “Color” de por aquí. Simplemente lo cambié a este color “grisáceo”. Creo que esto es genial. A lo mejor use el mismo “Gray” aquí como éste. Ahora puedes ver así es como usamos módulos y cuadrícula de línea base para diseñar nuestro diseño. Vamos a crear más diseños a partir del mismo diseño reordenando nuestros módulos o reordenando nuestros elementos de diseño. Este es el primer elemento. Se puede ver por aquí cómo he usado todos estos módulos si doy vuelta a la grilla así. Este es el final del primer ejercicio y se puede ver lo bien que se ve. Si quieres cambiar algunas cosas como mover esta imagen un poco por debajo porque nuestro texto no está alineado con esta imagen. Estos son pocos ajustes. Se puede ir con ese fin. Seleccionas esta imagen y este Rectángulo y muévelo un poco hacia abajo así y reduce un poco tu tamaño de rectángulo para que esta imagen se vea casi paralela a tu párrafo. Ocultar estas líneas y todos los módulos. Esto es casi perfecto. Este es el primer diseño. Vamos a crear algunos diseños más en la siguiente lección. Mantente atentos y estaré haciendo muchos de estos ejercicios. No te preocupes, obtendrás de aquí un montón de cosas grandiosas. Basta con quitar esta cotización. Me irrita así. Mantente atentos y pasemos a la siguiente lección. 24. Diseñar segundo diseño para el blog: Ahora en esta lección, vamos a crear este layout usando sólo este gris y este color rojo como nuestro color resaltado y también, creo que vamos a reemplazar la imagen y esta cita se coloca entre sí. Empecemos y veamos con qué vamos a llegar. Esta es la última parte donde salimos. Lo que vamos a hacer es primero, vamos a crear otro grupo. Este es nuestro diseño segundo, por lo que fue primero diseño. Ahora lo que vamos a hacer es que vamos a cambiar algunas cosas por aquí. Primero es que voy a usar no todas las gorras, pero voy a usar, domingo, ¿te gusta eso, y seleccionar este th, e ir a este panel de texto y usar este subíndice o superíndice, se llame . También vamos a cambiar el tamaño a 20 píxeles como este. También vamos a usar cursiva por aquí. Esto va a ser mucho turno en corrector, y pocas cosas. Ahora no vamos a destacar este. Vamos a usar un color grisáceo para este 147 y usar, me gusta, el mismo color como este. Supongo que es lo mismo, no. Lo que vamos a hacer es que vamos a usar 44 píxeles para este top, usa negrita. Lo que estamos tratando de hacer es que estamos tratando de igualar el ancho de éste y con el segundo. Se puede utilizar este valor de seguimiento. Podemos fijar 30, 50, 150. Creo que 150 un poco más. Entonces 100 se ve bien, 147 likes. Si quieres cambiar el ancho de los gustos, puedes usar cero aquí así. Esto está todo listo. A lo mejor podemos reducir la altura de la línea. Este es el 30 y podemos cambiarlo a 45. Creo que no se ve muy bien, tal vez podamos usar 30 en su lugar. También cambia este color a este. Por lo que se ven igual sin embargo. Ahora el siguiente paso es, vamos a sustituir esta imagen por otra imagen de una mujer o niña sonriente. Voy a seleccionar esta imagen y vamos a mover la imagen y el contenedor por aquí así. Enciendamos nuestra grilla. Ahora mismo estoy ignorando mis márgenes y voy a establecer el tamaño de esto a todos estos tres módulos por aquí o filas, creo que cuatro filas. Veamos cuántos son estos; uno, dos, tres, cuatro, cinco, seis, seis filas, estoy estableciendo el tamaño y todo por aquí. Vamos a moverlo un poco hacia abajo, igual a este texto de aquí. Esta es nuestra cotización, así que vamos a mover todo esto por aquí. Ahora para la cotización, vamos a utilizar esta área, estas dos columnas y estas tres filas. Así es como arreglo todo por aquí. Copiemos esta imagen. Este, arrástrelo hasta aquí, y cópielo así. Vamos a arrastrarlo por aquí, quitarlo, y seleccionar éste. Está aquí, muévelo a la izquierda. En algún momento no puedes ver la imagen cuando la pegas porque está fuera del contenedor, has recortado en ella. Voy a presionar “Shift and Alt” para cambiar el tamaño de esta imagen así. Ocultemos la grilla, es casi perfecta, pero aquí estábamos usando otra cosa. Entonces cambiemos el estilo. Usa algunas comillas por aquí. Es así como vamos a usar algunas comillas con cursiva, y vamos a usar un tamaño más grande, que era el tamaño 74 píxeles. Entonces voy a usar 74 píxeles. Agrega las comillas así. Vamos a rotarlo. Presioné “Shift” para rotarlo en algún ángulo específico. Pongámoslo aquí así. Hagámoslo un poco más cerca el uno del otro, así. Ahora bien, ¿queda algo más por aquí? Entonces tal vez podamos cambiar este texto a cursiva. Sólo un cambio de estilo, tal vez. También podemos ampliarlo un poco, 15, se ve bien. Ahora bien, ¿hay algo más que necesitemos cambiar? Añadamos algunos detalles más. Había una línea después de este texto por aquí. Vamos a crear una línea, línea delgada, Herramienta de línea. Voy a destacar esta zona, esta es nuestra línea. Debería ser de este color tal vez. Vamos a moverlo a la izquierda y que sea de dos píxeles de altura, así. También vamos a utilizar algún otro color, resaltar este texto. Vamos a usar este color para resaltar esta área solo para equilibrarla. También vamos a usar un color opaco para esta zona. A lo mejor este 7a7d80. También voy a usar dos párrafos separados por aquí porque se ve muy extraño. Vamos a crear dos párrafos dando algo de espacio por aquí, así, presioné “1" entrar por aquí y ahora tenemos dos párrafos. También si quieres ser más específico, puedes usar algo como esto, pero creo que esto también es bueno. Ahora, podemos hacer algo más aquí y usar 20 por aquí así. También en este texto, usa 15 o tal vez 20 así. Elimina una línea para que tengamos buen equilibrio de nuestro diseño. A lo mejor podemos usar algún color por aquí para representar a nuestro enlace así. Se ve genial y creo que esto resume nuestra segunda iteración sobre este diseño. También supongo que hay una línea por aquí. Creo que nos olvidamos por aquí. Pongamos un bloque de línea por aquí así. Usémoslo así, dentro de nuestra grilla. Esto se ve muy bien y creo que esto resume el segundo diseño. Esta es la iteración que se me ocurrió. Creo que esto es todo y debemos pasar a la siguiente lección. 25. Refinar el diseño de diseño de 2 diseños: Ahora, permítanme mostrarles que hice pocos apenas ajustes a este diseño al final porque no me sentía bien con esta área por aquí. Entonces lo que hice es mover esto un poco por debajo, y mover esta línea en esta línea de base. Para que esta línea, la colocó en nuestra línea de base. Además, se puede ver por aquí, utilicé estas comillas entre estas dos líneas de base, y también la moví un poco dentro de esta canaleta. Si quieres moverlo más, puedes moverlo demasiado como aquí, así. Creo que tenemos que cambiar este texto por aquí. Vamos a usar Source Sans Pro Regular para esto, y vamos a usar la cursiva básicamente. Estos son pocos ajustes o cambios que he hecho a este diseño porque no me sentía muy bien con esta área. Además, si quieres cambiar de nuevo a regular, puedes volver a regular, y tal vez podamos usar más espacio entre diferentes letras y tener algo similar a esto. También si quieres, puedes cambiar su color y hacerlo un poco más oscuro como hicimos en nuestro primer ejercicio. Veamos y escondamos nuestros módulos y todo. A ver cómo se va a ver. Se ve más equilibrado ahora porque he movido esta porción, esta comilla un poco por debajo porque necesitamos una buena cantidad de espacio entre estos dos párrafos y esta porción. Es casi perfecto. Creo que esta línea está recibiendo demasiada atención, así que si quieres, puedes cambiar su color a tal vez este rojo o algo gris, creo, eso también se ve bien. A lo mejor este, y cambiar el color de las comillas a rojo solo para llamar la atención. Creo que esto se ve mejor, y es bueno y mejor en lugar del diseño antes. Además, creo que se ve muy aburrido, así que voy a usar un poco de color gris oscuro para mostrar esta fecha. Ahora, por qué he usado un color un poco más oscuro porque la legibilidad es nuestra primera prioridad. Entonces usa un color gris un poco más oscuro. Es así como ajusté el último diseño y cambié y cambié algunas cosas. Asegúrate siempre de que el diseño sea algo progresivo. Si diseñas algo una vez, necesitas abrirlo y refinarlo una y otra vez, hasta que encuentres el equilibrio perfecto, y colores perfectos, y el sentido perfecto. Todo esto se trata de cómo he refinado la segunda parte. Pasemos a la tercera parte. 26. Última diseño para el diseño de blog: Ahora, en esta tercera lección, vamos a crear ésta y también ésta. Estos no son diferentes de la segunda parte, se puede ver esto es un poco diferente, este estilo de marcador superior. Además, he usado sólo dos bloques para esta imagen, no toda la zona por aquí, todo lo demás es casi igual. Cambié los colores de rojo a azul por aquí y luego también vamos a crear este layout. Aquí, tenemos cosas diferentes por aquí, las voy a explicar, como si tuviéramos este color amarillento y este color morado por aquí. Empecemos y creemos estos dos diseños en esta parte de diseño C. Aquí es donde nos fuimos, así que vamos a mantener todo igual. Aquí, tenemos la imagen, y voy a agarrar alguna otra imagen, puede ser ésta. Creo que teníamos éste, arrástrelo por aquí y lo vamos a usar por aquí así. Además, puedes usar toda esta zona así para la imagen, este también es otro diseño. Ahora mismo, voy a usar esta imagen y recortarla dentro de esa cuadra. Ahora, lo que vamos a hacer es que vamos a resaltar nuestros módulos. Aquí, tenemos nuestros módulos y lo voy a usar y dimensionar a esta zona y vamos a dejar toda esta zona por aquí. Sólo para asegurarnos de que vamos a dimensionar a esta chica para que podamos ver su cabello y pocas otras cosas como su ropa, tal vez así. Se ve mejor ahora. Podemos esconder algunas otras cosas, creo que esto me parece extraño. A lo mejor voy a usar algo de color azul de su camisa, este color azul morado y hacerlo un poco más saturado así. Para los enlaces, y voy a usar el mismo gris. ¿ Cuál es el color de este texto? Es 7a7d80. Ahora, tenemos conjunto de nuestros colores por aquí, también podemos probar colores de su camisa. A lo mejor otra vez, usa este color, 147 me gusta, tal vez podamos usar este color por aquí, tal vez su color de pelo o este color morado. Creo que es muy oscuro, así que tal vez muy afilado, así que déjalo así. Vamos a esconder nuestros módulos. Así es como acabo de cambiar este diseño. A lo mejor necesitamos cambiar este también. Puedo usar un color muy oscuro por aquí para llamar la atención sobre este color agudo por aquí, para llamar la atención sobre el título. Voy a usar mi herramienta de lápiz para agregar algún punto de anclaje por aquí. “ Presionar A” y cambiar este punto de anclaje. ¿ Qué está pasando? Se estira la herramienta de selección. Esto es extraño. Creo que debería usar la herramienta A y luego Pluma para agregar algún punto de anclaje por aquí. Al igual que esto. Vamos a acercar y hacer clic en ella con esta herramienta de punto de conversión una vez para que sea borde afilado, no el redondeado. Esta es nuestra forma principal, así que he cambiado esta forma y todo lo demás. Se ve bien. A lo mejor necesito usar a Lato por aquí. Lato Bold. A ver cómo se ve. Se ve bien. Es así como lo he cambiado todo por aquí. Este es otro diseño. Copiémoslo y guardémoslo como diseño 3.1. Ahora, vamos a seguir adelante y vamos a crear diseño 3.2. Guardémoslo primero con el otro nombre, 3.2. Ahora, lo que hicimos aquí es que vamos a ampliar esta zona. Eliminemos a esta chica de aquí. Amplía este rectángulo al tamaño completo así. De acuerdo, así que consigue algo de color por aquí, tal vez este, de cualquier color que te guste. Debe ser un color un poco más nítido. ¿ Dónde está nuestra cita? Fecha, aquí está, traerlo en la parte superior de esta capa, cambiar el color a blanco y hemos hecho casi todo el trabajo por aquí. ¿ Agregamos algo por aquí? No. Entonces vamos a quitarlo. Simplemente está creando más matiz. Queremos sensación más abierta y vacía. Esta es nuestra fecha y vamos a destacar nuestra grilla. Vamos a crear otro rectángulo por aquí usando esta área y moverlo por debajo de este 147 me gusta, cambiemos el color a éste, o tal vez éste, y cambiemos su color de este a tal vez este negro o tal vez blanco. Ocultemos esto y puedes ver que nuestro diseño es casi perfecto, así que cambiemos los colores a esto. Nuestro nuevo color, color destacado. A lo mejor podemos usar este color grisáceo. Esto se ve muy bien y si quieres usar morado por aquí, puedes usar morado, azul, o morado o este morado. Esto se ve genial, morado y este color cremoso, se ven geniales. Si de verdad quieres, puedes usar este encabezado y moverlo por aquí. También creará otro encabezado de diseño por aquí en esta área, y fechas y me gusta por aquí y tal vez mover el texto de arriba. Hay muchas variaciones que puedes hacer con estos diseños. Contamos con esta red y módulos configurados. Basta con cambiar las partes legales y equilibrar el diseño. Puedes usarlos con el texto en negrita y tal vez colores. Es así como usamos colores y texto en negrita y diseño y cuadrícula modular para crear diferentes diseños. Esto resume mi último ejercicio, lo voy a guardar, ya está guardado. Te di reto que crea algún layout como este. Este es el último. Usa algunas imágenes de este picjumbo.com, usa un texto de Real Ipsum, Google Fonts, selecciona las dos Fuentes de Google que más te gusten. Usa alguna escala modular, usa tu propio factor de escala, pero manténgalo consistente en tus diseños y crea algo impresionante y muéstramelo. Puedes publicarlo en las respuestas de preguntas. Dame el enlace y te compartiré mis ideas sobre cómo mejorarlo o cómo cambiarlo o algo así. Veo que hay algo así mucho, así que no te importa. Estaré creando más ejercicios. Pero esto resume este ejercicio de diseño modular. Este es el último. Creo que podrías haber conseguido muchas buenas habilidades para espaciar elementos y cómo usar esta topografía de manera efectiva con esta altura basal y armonía vertical y cómo usar filas y columnas y rejillas modulares. Pasemos a la siguiente lección. 27. How seleccionar?: Cuando se trata de seleccionar fuentes, la pregunta más difícil, la primera es ¿cuántas fuentes seleccionar? He visto a muchos diseñadores y desarrolladores novatos, cometen muchos errores. Incluso he visto pocos sitios web y les he hecho ajustes, donde los codificadores han seleccionado tal vez cinco o seis fuentes diferentes de Google, y cuando se trata de cargar, realmente puede impactar o ralentizar tu sitio web. Por lo que siempre ten en cuenta que no debes seleccionar demasiadas fuentes. Sólo debes ir con máximo de dos o tres, si realmente sabes combinarlos. Sigo insistiendo en sólo seleccionar dos fuentes. Son casi suficientes para toda tu página web. Además, asegúrate de no seleccionar demasiados estilos a partir de fuentes individuales. De nuevo, va a impactar tu tiempo de carga y tamaño de página. Ahora, mantén en jaque el tamaño de fuente, cuánto tamaño de carga en kilobytes, te mostraré solo en unos momentos en Google Fonts. Ahora, el segundo paso es, una vez que haya seleccionado las fuentes, haya seleccionado una o dos fuentes, asignarles roles. Ya hemos hablado de roles. Elija una fuente para los encabezados, y los subtítulos, y/o los taglines, y todo y una fuente para el texto del cuerpo, porque la fuente del texto cuerpo se va a leer mucho y debe ser fácilmente legible y visible. Así que asegúrate de que tu fuente corporal sea legible y que su nivel de legibilidad sea bueno. A continuación se muestra un ejemplo de elegir fuentes para visualización y cuerpo. Se puede ver aquí estoy eligiendo una fuente para su visualización. Ahora, en el lado izquierdo, puede ver que he usado una fuente muy alta, una fuente todo mayúsculas, como Bebas Neue Font y se puede ver que texto o copia corporal es legible y muy simple Font Sensory. Ahora hay un truco más para ello. Si está seleccionando fuente para su encabezado o texto de visualización, lo llamaremos encabezado en términos más simples, así que solo mantenga en encabezamiento. Entonces uno para rumbo, otro para cuerpo. Ahora, cuando intentas seleccionar la fuente para tu encabezado, puedes ser un poco creativo porque el encabezado va a ser un poco más grande que el texto del cuerpo. Entonces aunque sea fuente muy garabateada, o muy alta, o algo así, se pueden leer fácilmente por su tamaño, pero sobre la fuente del cuerpo, debe ser legible, su x- altura debe ser buena, y se puede leer fácilmente en gran cantidad, por ejemplo, un párrafo grande, trate de ver si se va a leer fácilmente o no. Por lo que estas son algunas consideraciones que debes tener en cuenta. Déjame mostrarte Google Fonts y cómo vamos a interpretar nuestra velocidad de carga. Entonces solo ten en cuenta que cuando estés seleccionando, por ejemplo, si selecciono esta fuente como esta, una familia seleccionada y la siguiente, seleccionemos esta Source Sans Pro con esta. Por lo que voy a seleccionar Source Sans Pro y por encima de uno. Se han seleccionado dos familias, por lo que se puede ver que su tiempo de carga es rápido por aquí en la cima. Ahora bien, si trato de personalizarlo y trato de seleccionar unos unos más, donde es como, quiero negrita, se puede ver el tiempo de carga es moderado. Además, si voy a esta Fuente Secular, sólo tiene un rostro, por lo que sólo tiene un estilo, que es regular 400, que es su peso. A lo mejor podemos llegar a esta cursiva regular, creo que sí. El tiempo de carga es moderado. Ahora, puedes descargarlo desde aquí así e instalarlo en tu PC o Mac para usarlos en tus diseños. Puedes usar este tipo de letra sky. No lo he usado antes. Si quieres probarlo, puedes probarlo. Esta es una cosa que debes tener en cuenta al seleccionar tu fuente. Si estás seleccionando demasiadas fuentes, si voy a esto como más de tres o cuatro, cinco, seis estilos, puedes ver que va a ser lento, así que asegúrate de que tu tiempo de carga sea rápido o moderado. No vayas más de tres estilos. Creo que dos estilos, como la cursiva regular y regular son buenos para nuestro texto corporal y éste es bueno para nuestros encabezados. Por lo que todo esto se trata de cómo seleccionar fuentes. Pasemos a la siguiente lección. 28. Moods/Voices de Typefaces: En esta conferencia, vamos a entrenar tu sentimiento de tripa sobre las fuentes y la topografía, qué está diciendo la fuente, qué está escuchando tu tripa, y tu sentimiento acerca de esta fuente, vamos a aumentar esa escala y te diré tú cómo acostumbrarte a ella. Por lo que cada tipografía tiene diferentes voces o estados de ánimo. Si estás diseñando para algún producto tal vez portuario u orgánico, seleccionarás tipografía particular cual está llevando a cabo el estado de ánimo de esa marca o algo así. Entonces primero, necesitas encontrar el estado de ánimo si el estado de ánimo de esta fuente está relacionado con tu proyecto, ¿es bueno para tu sitio de negocios o tu revista de moda o es elegante? ¿ Es divertido? ¿ Es bueno para leer? Por lo que se trata de situaciones diferentes en las que se necesita ver qué estado de ánimo tienen las diferentes tipografías. Ahora, te voy a mostrar diferentes estados de ánimo, he seleccionado aleatoriamente pocas fuentes de mi colección y te voy a mostrar cómo acostumbrarte a ellas o puedes decir, entrenar tu ojo para los estados de ánimo de las tipografías. Entonces, empecemos. El primero es el tema divertido. Ahora, puedes ver todas estas fuentes que he seleccionado, algunas son chapoteo divertido para tus hijos, comer sano, divertirte con aceite de oliva. No son demasiado atrevidos, por lo que no tienen bordes muy afilados ni algo así. Entonces este es un tema un poco divertido, un poco relajado. Top one es una fuente Sans Serif y la segunda es una fuente poco Slab Serif, pero su esquina es un poco redondeada. Entonces en la parte inferior, tenemos de nuevo fuente Sans Serif y sus esquinas también son redondas. Incluso se puede ver en el borde de la escuela, de vuelta a la escuela, palabra escuela, tiene un toque muy curvilíneo al final. Necesitas ver pocas cosas, necesitas escribirlo en algún color que sea divertido, así que este es primer paso e intento, pruebo diferentes fuentes, si te gusta una, entonces pasa a la siguiente. No creo que esté coincidiendo con mi tema, así que entonces pasa al siguiente. No hay diseñadores de tipografía, tal vez haya pocos expertos que sean muy expertos en este ejercicio de emparejamiento de tipografía. Pero para mí, normalmente trato de seguir iterando diferentes fuentes hasta que encuentre la que se ve perfecta para mi tema. Siguiente es el tema del amor. Ya puedes ver he seleccionado algunas fuentes diferentes por aquí, pocas son fuentes muy curvas y scripty, fuentes manuscritas, y una es Slab Serif y la superior es una fuente un poco transitoria que tienen un estilo muy distinto. Entonces todo esto depende de tu situación. Si estás escribiendo para alguna ceremonia matrimonial o algo así, podrías ir por fuente de guión, tal vez igual que yo tengo en John y Jenna se van a casar. Si estás en un tema de amor feliz, podrías ir a la última opción que es que todo se puede lograr con amor, por lo que también le está mostrando alguna esperanza. Por lo que estos son temas diferentes. Si ves el tema de sensación más dulce que tengo, el amor es la sensación más dulce que estoy usando, color azul cian o verdoso y se puede ver incluso es una fuente Slab Serif muy delgada pero se ve muy bonita. El top es algún tema como perder el amor o tal vez tenerlo para siempre o algo así que está relacionado con el tiempo o algo así. Entonces lo he usado, un tema donde se quitan algunas de las porciones de mis fuentes, por lo que esto quizá esté relacionado con el tiempo. Al igual que tenemos recuerdos de amor o algo así. Entonces esto viene con la práctica, necesitas iterar muchas fuentes, escribir la línea, quieres el tema, por ejemplo, tengo este amor es la sensación más dulce de mi corazón. Entonces esta es la línea temática Escribe la línea temática y luego sigue iterando diferentes fuentes uno por uno, hasta el momento en que encuentres la mejor. Aquí está el tema de la salud, primero es dulces, puede ver que seleccionado a los niños y caramelos, es fuente muy diferente, tienen grandes losas, toque muy divertido. Entonces, tenemos magdalenas son la sensación más dulce para los niños. Se puede ver esta es la misma fuente que usé en el último ejercicio que fue tema de amor. Ahora, aquí tenemos de nuevo poco a dulce, así que es poco a dulzura, así podemos usarlo con magdalenas también, después tenemos frutas y verduras son más saludables que la comida chatarra. Ahora bien, frutas y verduras, esta es una fuente muy amplia. Tiene algo de integridad o puedes decir algo de peso al mostrarte que esta cosa es buena. Entonces es descenso, puedo decir o muy redondeado donde tengo algunas formas muy regulares que está relacionado con, puede decir fuente geométrica Sans Serif, geometría perfecta, y se ve bien en este tema. Después tenemos todos los caramelos naturales, orgánicos, libres de OGM para niños sanos. A pesar de que tiene rincones muy atrevidos, como se puede decir que k y h y todo. Pero los ángulos son muy diferentes. Por lo que parece una fuente estilo niño, por lo que realmente puede funcionar bien para orgánica natural y algo así. Después tenemos tónico de salud puro, orgánico, libre de OGM 500 ml, se puede ver en la parte inferior. Además, ten en cuenta que estoy usando colores con mezcla con mi tema. Por lo que el pop up mejor que solo simple color gris o negro. Aquí tenemos nuevamente tema orgánico pero es diferente, tal vez sea un tónico para adultos o algo así, así que he usado una fuente. Nuevamente, tiene formas muy redondeadas, es Sans Serif y se ve bien con este tema. A continuación tenemos tecnología tema drone rover versión este 2.5 genial para adolescentes, se puede ver la diferencia entre x-height y capital altura es genial, por lo que se ve bien para sitios web de tecnología, tal vez tecnicos modernos, algo así. Para niños o tal vez adolescentes, entonces tenemos otra, como la tecnología moderna es peligrosa para los niños, me dice. Este es solo nuestro divertido rumbo. Por lo que también se trata de algunas formas geométricas Sans Serif con formas muy redondeadas, no rondas perfectas, sino formas redondeadas de tipo ovalado. Entonces tenemos en la parte inferior, somos estudio de diseño más innovador en Nueva York. Este es un poco serio y geométrico Sans Serif y está relacionado con estudio de diseño, así que tal vez queremos decir algo de seriedad con nuestra innovación laboral, algo así, así que uso esta fuente tal vez, podrías elegir otra fuente, por lo que esto depende de cada diseñador y de su gusto pero esto es solo para entrenar tus ojos. Ahora, tenemos tema de negocios. El negocio está relacionado con la seriedad o tal vez el poder o algo así, por lo que estas fuentes, incluso se ven muy similares entre sí, son Sans Serif. Tienen tema muy serio, no están mostrando mucha redondez, se puede ver por aquí los bordes son totalmente planos. He visto muchos nuevos diseñadores que están usando tipos de fuentes muy modernos con temas de negocios, así que esto es solo tu juicio, esto es solo para entrenar tu ojo si quieres. Ve con algún tipo de fuente moderno, puedes ir con ella, eso no es un problema. Este es el tema de la moda, algunas fuentes o tipos de letra de aspecto elegante aquí, algunas son muy delgadas y aburridas al igual que modelos, supermodelos. A pesar de que en lo personal no me gustan los modelos muy delgados, se ven como palos y tal vez ropa colgada de los palos, así que esa es mi propia opinión, no lo tomes como algo personal. Ahora, el segundo es un poco clásico, tal vez relojes de muñeca, así que estoy usando alguna fuente humanista, se puede ver la e en los relojes y la última, puede ver e es muy inclinada, tiene una pendiente muy inclinada. Entonces es básicamente una fuente humanista y está relacionada con el tipo antiguo clásico, así que hemos utilizado esta. Entonces, tenemos fuente muy geométrica en la parte inferior, que es el diseño de moda no se trata solo de ropa, se trata de ti. Está relacionado con alguna geometría, es muy geométrica, muy delgada y delgada, los puntos son lo que se puede ver, puntos en los ojos son verticales y al igual que los rectángulos delgados. Entonces así es como elijo diferentes fuentes para diferentes temas. Veamos algunos ejemplos más para tema de moda, puedes volver a ver, estoy usando fuentes modernas de Bodoni, tal vez lo hayas visto en muchos sitios web. fuentes Bodoni son fuentes modernas como esta, los diseñadores de moda en estos días son idiotas. No son idiotas, es justo lo que pienso a veces. súper modelos son muy delgados al igual que las escobas, sí, eso es cierto. Vivaldi 2.0, lo último en relojes de muñeca clásicos a la venta. Por lo que trato de usar diferentes fuentes esta vez, la mayoría son Bodoni, tienen alteración muy gruesa y delgada de trazos. Entonces así es como usamos las fuentes Bodoni en temas de moda. Ahora, tenemos tema deportivo. Por lo que puedes ver aquí tengo cuatro líneas temáticas diferentes. ¿ Se puede correr como un guepardo? Es muy delgado, inclinado para correr como un guepardo, así que me está mostrando velocidad cuando es cursiva. Entonces tenemos 69 flexiones para adelgazar hoy tu vientre, por lo que es ejercicio muy duro, flexiones. Creo que no puedo ir más de 10 en mi estado actual. Ahora, así que estoy usando una fuente texturizada muy dura o muy dura en esta. Entonces tenemos, si un elefante se puede adelgazar, tú también. Ahora, puedes ver cómo he usado [inaudible] en esta línea para mostrar mi tema, es un tema divertido pero puedes ver si un elefante es audaz y luego delgado es un poco más delgado. Entonces así es como usé diferentes pesos para transmitir mi mensaje. Entonces, tenemos Fantasy Football está aquí. Este es un anuncio. Por lo que es en letras negritas muy gruesas. Vi esta fuente usada en el anuncio de Yahoo en yahoo.com, así que acabo de probar esta por aquí. 29. Efecto de color en el estilo de tipografía (voz): Ahora siguiente parada es efecto de color en las tipográficas. Ahora, puedes ver en la lección anterior, te he mostrado diferentes modos de tipografia. Por lo que el color tiene un efecto de creación en el modo tipografia. Si estás usando un color que es muy diferente a tu tema, realmente puede cambiar o alterar su estado de ánimo o voz. Ya puedes ver, ¿puedes correr como un guepardo? Estoy usando colores guepardo y un poco de color marrón que está relacionado con el suelo, tal vez arena, o algo así. Entonces se puede ver en la siguiente línea, 69 flexiones, estoy usando color grisáceo negro, que está relacionado con la dureza o algo similar. Entonces en la línea del elefante, estoy usando el color, que está relacionado con el elefante y delgado es los principales puntos focales, así que estoy usando el color rojo que se puede conseguir delgado. La fantasía está relacionada con el color morado, es magia, es espiritual. O algo así, así que estoy usando el color morado para el fútbol de fantasía está aquí. Entonces, cuando estés diseñando o eligiendo tipografia, asegúrate de elegir el color adecuado para el equipo adecuado, y no te metas demasiado en estos colores. Si ya está utilizando un solo color para sus encabezados, úselos en su tipo de letra para los encabezados. Si tienes otro color para tu texto corporal, usa eso en tus textos corporales. Entonces, no arregles tu mente, intenta seleccionar dos colores diferentes, tal vez podrías tener un color diferente para tu subpartida o lema, y un color diferente para tu encabezado, así que algo así. Permítanme mostrarles algunos ejemplos de mi trabajo donde he usado este color. Se puede ver por aquí sabor mentol. Estoy usando color mentol para este y puedes ver aquí tenemos tres sabores tradicionales de tabaco donde estoy usando color marrón para este sabor a tabaco. También puedes ver estas cajas también son del mismo color que estoy usando por aquí. Se puede ver aquí tengo encabezamiento, luego un subencabezamiento, luego estos son encabezados de sección, y tenemos dos características como esta en este producto. Por lo que este es un ejemplo de usar colores con tu tipo de letra. A ver si puedo encontrar otro, otro ejemplo aquí. Aquí tenemos otro ejemplo, puedes ver estoy usando tres colores por aquí para diferentes iconos de la izquierda, en el medio, y el lado derecho. Estoy usando el mismo color para cada paso, como para este, nuestro paso número 1, 2, 3. Es así como estoy usando dos colores. Entonces de nuevo, estoy usando por aquí dos colores para mostrar algún interés como, déjanos ayudarte a adquirir, y entonces el número por llamar es de diferente color solo para enfatizarlo. Ahora puedes ver aquí estoy usando de nuevo dos colores, uno es para rumbo y segundo es un color un poco grisáceo porque no quiero que sea muy prominente. Nuevamente, aquí estoy usando la calificación A+ con Better Business Bureau en rojo porque quería resaltarlo o hacerlo más potente, tal vez lucir más potente. Entonces así es como estoy usando diferentes colores en diferentes tipos de letra. Entonces todo esto se trata de cómo usar colores para diferentes tipos de letra. Entonces pasemos a la siguiente lección. 30. Introducción a la combinación de fuentes: Aquí te presentamos una breve introducción sobre los emparejamientos de fuentes, así que solo para despejar tu mente de algunas suposiciones o algunas reflexiones sobre cómo emparejar fuentes. Primero y ante todo regla, no hay reglas duras para emparejar fuentes, por lo que necesitas entrenar tus ojos y agallas para eso. Trata de desarrollar tu tripa sintiendo que, de acuerdo, estas dos combinaciones se ven horribles hombre, es feo o algo así. Estas dos fuentes se ven muy bien juntas. Es así como entrenas tu sentimiento de ojo o tripa, pero viene con el tiempo. Sigues viendo diferentes combinaciones una y otra vez de diferentes diseñadores, y luego tu ojo y tripas se entrenarán automáticamente. Hay algunas reglas básicas. El primero es evitar demasiada similitud entre fuentes. Si hay fuentes que son igualmente redondas, y la altura X es la misma, y las curvas son las mismas, entonces serán idénticas para instalar [inaudibles] dichas fuentes. Entonces la segunda regla es buscar contraste. Incluso en la naturaleza, se puede ver el contraste está en todas partes, incluso en plantas, flores, colores, todo. Por lo que dos fuentes diferentes que son muy diferentes entre sí, como Serif y Sans Serif, o Slab serif y sans serif, funcionan muy bien entre sí. Ahora, la tercera regla es buscar características similares. Es necesario buscar geometría de esa fuente, redondez, contadores abiertos o contadores cerrados. Ya sea que los contadores tengan espacio muy grande o que tengan muy menos espacio. Entonces también busca la altura X. Si comparten la misma altura X, podrían ponerse bien juntos. Vamos a ver todas estas reglas a detalle en la siguiente lección, así que no te preocupes por ello. Aquí te presentamos algunos puntos importantes que debes tener en cuenta al intentar emparejar fuentes. El primero es la legibilidad. Es muy importante. Si estás eligiendo texto para tu cuerpo, entonces la legibilidad es nuestra primera prioridad. El segundo es fuente de visualización o fuente de encabezado. Aquí puedes ser un poco creativo, puedes seleccionar cualquier fuente, tal vez muy ancha, muy gruesa, muy garabateada, o algo así. Ahora, el tercero es voz de tipografía. Vas a aparecer ambas fuentes o seleccionar ambas fuentes, teniendo en cuenta tu tema o propósito de tu diseño. Si se trata de un diseño orgánico o algo relacionado con la naturaleza, entonces debes tener en cuenta que ambos pares de fuentes deben reflejar eso. Hay última cosa que necesito aclarar, que son algunas fuentes, simplemente almacenaron coincidencia en absoluto. Entonces si estás sintiendo que estas fuentes no son coincidentes, entonces no intentes igualarlas. Algunas fuentes realmente se repelen entre sí. El último es que sigan combinando diferentes fuentes juntas. Aprenderás con experimentación. Nadie te dice este truco. Es el mejor para aprender emparejamiento tipográfico. Abre tus fuentes, selecciona una para el texto principal y, a continuación, itera para el encabezado de tu tema. Sigue iterando hasta el momento en que encuentres la mejor. Entonces así es como entrenas tu tripa y entrenas tu ojo para combinar diferentes fuentes. Esta es una pequeña introducción sobre los emparejamientos de fuentes, así que empecemos y veamos y sumérjase profundamente en las próximas lecciones de cómo emparejar fuentes. 31. Combinación de altura: Echemos un vistazo a otra técnica de emparejamiento o emparejamiento de tipografía, que se llama coincidencia de altura x. Ya sabes de x-height. Si puedes hacer coincidir la letra pequeña x-height de dos fuentes, es probable que vayan muy bien juntas. Te voy a mostrar algunos partidos de fuentes que se me ocurrió sólo para entrenar tus ojos. No es magia vudú ni algo así. Es sólo un trabajo duro. Necesitas hacer coincidir una x con otra x de otra fuente. Así que sigue iterando y seleccionando diferentes fuentes hasta el momento en que obtienes la altura x casi exactamente igualada. Por lo que puedes combinar fácilmente esas fuentes. Este es el primero. Estas son las fuentes del lado derecho, Andron y Chaparral Pro Regular. Esta es la primera combinación. Estoy pujando Fuente Old Style o fuente estilo Garamond con Slab Serif. En la parte superior izquierda, se puede ver que ambas x están en la parte superior, tienen la misma altura. Sólo difieren en el trazo y en las terminaciones Serif. Entonces los finales Serif, uno es de estilo Slab Serif, uno es de estilo antiguo. Tiene un poco de losas con curvas en la parte superior. Se puede ver en la parte inferior izquierda, he emparejado estos. Uno se utiliza para el rumbo. El otro es para texto corporal y se ven bien juntos. No siempre parece que son realmente perfectos o se ven muy bien juntos. A veces podrían parecer normales juntos. Podrían sorprenderte eso, “Eso es impresionante. Se ven geniales”. Pero a veces cuando estás cotejando x-height de dos fuentes, a veces coinciden muy perfectamente. Echemos un vistazo a otro ejemplo aquí. De nuevo, tengo la misma altura x. Uno es de estilo antiguo con Slab Serif y grosor de estilo antiguo. puede ver que tiene una alternancia muy gruesa y delgada. En este ejemplo, estoy usando Chaparral Pro con fuente Garamond y puedes ver que se ven muy bien juntos. Si quieres variar, puedes seguir adelante y elegir otros estilos como yo he usado en este Capítulo 25 por aquí a la izquierda en el encabezamiento. He usado cursiva por aquí. Entonces así es como se puede introducir una tercera fuente. Usa otro estilo de la misma fuente. Si ha seleccionado Chaparral Pro como su rubro, puede utilizar la cursiva Chaparral Pro como su sublínea o subpartida, o fecha, o mostrando el número de capítulo, o algo así. Entonces este es un truco muy básico. Aquí hay otro, transitorio con estilo antiguo. Ellos, de nuevo, comparten la misma x-altura y se puede ver una es este Plantagenet Cherokee. Otro es MM Times, que me parece un poco de fuente transicional. Aquí estoy usando uno transitorio como mi encabezamiento y el otro como mi texto corporal. Aquí hay otro par. Estoy usando MM times bold como mi encabezado y Inconsolata Medium, que es un poco de fuentes monoespaciales al igual que las máquinas de escribir en la parte inferior. Se ven muy bien juntos. Comparten la misma altura x. Uno es transitorio, uno es Sans-Serif, o se puede decir gran parte de una fuente de máquina de escribir monoespacial en lugar de Sans-Serif. Entonces veamos otro ejemplo. Aquí tenemos un partido muy grande. No lo sé, tal vez te sientas de otra manera. Me estoy sintiendo así. Esto es de la misma fuente o misma familia mecanógrafa, Droid Sans y Droid Serif. Nuevamente, la altura x es la misma. Apenas su audaz es diferente. Uno es Slab Serif o uno es Sans-Serif y se ven muy bien juntos. Estoy usando un estilo cursiva para la variación. Aprenderás más sobre variación en el siguiente apartado. Ahora este es el último ejemplo. Obtuve este ejemplo de buscar en Google y me pareció muy útil. Una es Georgia y otra es Proxima Nova. De verdad se ven muy bien el uno con el otro, ¿y por qué? Porque su altura x coincide perfectamente. Por lo que se puede ver ni siquiera un solo píxel está arriba o abajo. Son partido perfecto el uno del otro. Por lo que estoy usando Georgia como mi encabezamiento y Proxima Nova como mi texto corporal. Entonces todo esto se trata de emparejar fuentes con x-height similares. Necesitas encontrarlos. No vendrán a tu puerta. Necesitas encontrarlos. Probé diferentes combinaciones de fuentes. En tu tiempo libre, intenta usar esta técnica e intenta emparejar algunas fuentes. Entonces todo esto se trata de esta técnica de emparejamiento de altura x. Entonces pasemos a la siguiente lección. 32. Combina con contraste: Ahora hablemos de otra técnica que se llama contraste en el emparejamiento de fuentes. Hace unos años, yo era apenas un novato y principiante en el emparejamiento de tipografía. Todavía me considero solo un principiante como ustedes chicos. ¿ Cuál es el contraste en el emparejamiento de fuentes? El contraste es básicamente de muchos tipos. Podría ser un contraste en el grosor de dos fuentes, tal vez grosor de trazo, una es muy delgada y la otra es muy gruesa. También puede ser una diferencia en el estilo, tal vez porque uno es muy redondo y uno es muy audaz y bullicioso y sólido, no es muy redondo. No arregles tu mente que solo es contraste entre tal vez x-height o algo así, podría ser contraste en cualquier característica de dos fuentes. Ahora, puedes ver aquí he emparejado tres fuentes; Gadugi Regular, Cocolaborate-Regular, Aleo Regular, y te he mostrado las x-alturas de todas estas tres. Se puede ver que uno es un poco más pequeño y los otros dos están casi emparejados. He visto pocos ejemplos en Internet, he buscado en Google alrededor de pocos ejemplos de donde los diseñadores han coincidido tres fuentes. Ahora, lo más común y el secreto más común que diría que encontré es que la mayor parte del tiempo, el 90 por ciento del tiempo, los dos tipos de letra, como aquí tenemos dos tipos de letra que comparten la misma altura x, así que uno es diferente. La mayoría de las veces, los otros dos comparten la misma altura x. Entonces esa es la clave para su emparejamiento de tres fuentes diferentes juntas. Por lo que esto también podría ayudarnos en el uso del contraste en nuestro emparejamiento de fuentes. Aquí tenemos tres fuentes, y dos tienen la altura x similar. Además, uno es un poco más delgado, los dos tienen más grosor. Si tiene una fuente más gruesa, podría usarla solo para encabezados. Esto es de sentido común. Si quieres ir con algunos detalles más como este Internet/Market/ Latest Posts subsección o tagline o algo así, puedes usar otro. Para el texto del cuerpo, elige el que tiene buena altura x y es fácil de leer o algo así. Entonces así es como vamos a usar el contraste en el emparejamiento de fuentes. Aquí tenemos otro ejemplo. Aquí, de nuevo, tenemos tres fuentes; Garamond, Franklin Gothic, y básicamente Franklin Gothic Medium; estos son dos estilos de la misma fuente. Por eso te estoy mostrando sólo dos x-height porque estos Franklin Gothic tienen la misma altura x. Entonces aquí, lo que hice es que estoy usando a Garamond como mi rumbo. Garamond es un poco más audaz que otras fuentes Franklin Gothic, así que lo he usado para mi encabezamiento. Entonces en el subtexto, Internet/Market/Latest Post, estoy usando Franklin Gothic Medium, supongo, y para el texto corporal, estoy usando Franklin Gothic. Entonces así es como combiné todas estas fuentes y se ven realmente impresionantes. Aquí hay otro ejemplo en el que he emparejado Garamond, Halifax Light, y Georgia tres fuentes diferentes, y es difícil emparejar tres fuentes diferentes. Ahora, la fuente secreta que ya te dije es que dos fuentes con x-height similares y una es diferente a estas dos. Por lo que uno tiene una altura x más pequeña, otros dos comparten la misma altura x. Con respecto al contraste, tienen muchas características similares, pero su grosor y trazo es diferente. Por lo que Halifax Light se usa como lema y Garamond se usa como encabezado, y Georgia se usa para texto corporal. Aquí hay otro ejemplo de contraste. Aquí estoy usando Garamond, Garamond Italic, y Georgia. Entonces básicamente dos fuentes, Garamond y Georgia. puede ver que tienen contraste por aquí, si se mira a la X por aquí a la izquierda. Tienen contraste en x-height. Por lo que mucho contraste en x-height, aunque sus características son muy mismas, una es Old Style, otra es Transicional, y aún así se ven geniales. Hacen un tema de un poema o tal vez una historia de suspense o algo así. Entonces este es un muy buen ejemplo de contraste usando sólo nuestra altura x y un poco de contraste entre Old Style y Transition. Aquí hay otro ejemplo que coincide con dos fuentes. De nuevo, tenemos fuentes Transicionales entre sí. Simplemente tienen una diferencia de trazo y estilo un poco. Una de ellas, creo, es antigua fuente de estilo Garamond. Por lo que no tienen demasiado contraste, pero aun así pueden hacer un buen par. Plantagenet Cherokee, una fuente es, y la otra es MMTimes. Desde mi perspectiva, mis sentimientos de tripa es que no es un partido muy grande porque solo hay contraste entre el grosor del trazo. De lo contrario, su altura x es similar. Por lo que no nos están dando un taco de que son un partido perfecto. Aquí hay otro ejemplo. Aquí, tenemos un buen contraste entre las x-height, aunque las características son las mismas. Ambas parecen fuentes geométricas. Una es monospace Inconsolata Medium, que es fuente monosespacial y otra es Montserrat Regular, y ésta realmente crea par de fuentes de aspecto muy admirable. Entonces este es otro ejemplo. Aquí, he usado x-height como mi contraste y también un poco de grosor de trazo. Aquí hay otro ejemplo de contraste con el uso dos fuentes de la misma familia que es Droid Sans y Serif. A pesar de que comparten la misma altura x, su diferencia de trazo y también sus losas y Sans y Serif es básicamente el contraste. Muchas veces, Serifs y Sans Serifs, hacen una pareja realmente impresionante. Este es el último ejemplo que les voy a mostrar chicos. Entonces no te aburras con mi aburrida voz. Sé que odias mucho mi voz. Este es Ubuntu y Proxima Nova. Se puede ver que Ubuntu es muy grueso y una curva de bits en sus piernas de X. Se puede ver también la altura x de ambos es un poco diferente, pero se ven muy bien juntos. Pueden hacer un equipo muy bueno, relacionado con la salud o tal vez relacionado con la tecnología. Este es el último en contraste, en ejemplo de emparejamiento de fuentes. Creo que podrías haber ganado un buen conocimiento y tal vez un buen sentimiento de esta sesión. Entonces pasemos a la siguiente lección. 33. Combinar tipos de características de características similares: En esta lección, vamos a aprender otro truco muy básico para hacer coincidir la fuente, que es hacer coincidir las características de dos fuentes diferentes. ¿ Qué significa características? Permítanme explicarlo con algunos ejemplos. Porque esta técnica sólo se puede aprender mostrándote algunos ejemplos. De lo contrario no es fácil aprender. Aquí tengo, este es un blog stored.org. Encontré este ejemplo de este sitio web. Esto es tip.io. Se puede ver aquí tenemos una fuente en el encabezamiento. Se acaba de conducir letra dos encabezamientos. Entonces tenemos copia de fuente, aquí la tenemos. Si miras de cerca, incluso pensarás que esta fuente tiene un trazo muy grueso. Pero si nos fijamos en las características como la E, la pendiente de E, y la X, cómo se escribe. También el yo, todo lo que coinciden mucho con esa fuente de abajo. El tipo de letra por aquí puedes ver si siquiera miras la letra Q. Si voy por debajo un poco aquí, se puede ver al final, se puede ver que Q, puede ver que la Q es casi similar a ésta, sólo la diferencia de un poco de trazo y estilo, la forma y la colocación, todo es casi lo mismo. También, si miras A, esto es A, y aquí tenemos A otra vez, la inclinación de esta área de contador de A es casi la misma. Por lo que tienen las mismas características. Se puede ver por aquí. Si podemos acercar un poco más, tal vez podamos ver eso fácilmente. Se puede ver la similitud entre A's, también la T, el final de esta T. Se puede ver por aquí. Esto es casi lo mismo que éste. También tiene el mismo final. Estas son pocas características que estarás buscando. Han emparejado estas fuentes con características similares. A pesar de que sigo creyendo que debes entrenar tus tripas u ojos para que coincidan con las fuentes. Estas características se pueden sentir. No se pueden ver así y analizarlos matemáticamente. Veamos otro ejemplo. Aquí tenemos otro ejemplo. Esta es una fuente. Es muy audaz. Creo que es circular, nombre de la fuente es circular. Entonces tenemos aquí otra fuente en el párrafo que es texto frito. Ahora llegando a las similitudes, vamos a acercar. Si ves ambas fuentes, algunas de las curvas, tienen así, es casi lo mismo. Entonces tenemos T. Se puede ver la parte superior de la T, cómo se está reuniendo por aquí en esta zona. Es casi lo mismo con este T. Estas son pocas características que son similares en estas dos fuentes. Parece muy cercano el uno del otro con respecto a algunas de las curvas y algunas características. Este es otro ejemplo entonces tenemos, veamos, pocos ejemplos más. Ahora, si miras los especímenes de Google Fonts donde Google Fonts comparten algún emparejamiento de fuentes, vamos al nuevo emparejamiento de Google. Creo que es mejor. A lo mejor podemos mirarlo aquí también, así que no es un problema. Ahora si miras este primer emparejamiento, sugirieron Open Sans y Roboto, puedes ver que hay mucha similitud entre estos dos. Ambos son Sans Serif, se puede ver los A's en el párrafo, y son casi lo mismo Robot es un poco delgado o los O, O's de Robot son un poco, puede ver que tiene menos contador y un poco vertical en lugar de este abierto abierto de Sans, tenemos más contadores en las O's. Todavía se ven muy similares, aunque creo que comparten demasiada similitud, pero aún así la han mostrado como pareja. Entonces me gusta este Open Sans y Source Sans Pro, también comparten muchas similitudes como las curvas que puedes ver N y A's an N y también las O's. Son muy similares. Desde mi punto de vista, hacen un par muy bueno. Última parada es que este sitio web, es typeconnection.com y traté de emparejar dos fuentes con personalidades similares. Una fuente es este Adobe Garamond Pro, y la segunda es Chaparral Pro. También muestra algunos de los físicos de como una zanja, ribete, sólido, duradero, ágil con formas definidas. No sabemos tanto al respecto. No soy eso de un experto. Pero lo que quiero mostrarles chicos es este gráfico coincidente de aquí. Es muy interactivo y muy agradable. Ahora mismo he hecho clic en este Garamond Pro y se puede ver esta destacada es fuente Adobe Garamond Pro. Se puede ver el foso al fondo, muy ligero, eso es básicamente Chaparral Pro. Se puede ver que los contadores son casi los mismos y así los laboratorios son serifs comparten la misma longitud. A pesar de que estos Adobe Garamond Pro tienen losas redondeadas, lo siento, serifs tienen extremos redondeados, no son afilados ni atrevidos. Pero la forma o los ángulos son casi iguales. Se puede ver la L por aquí, casi va en el mismo ángulo y dirección. También se puede ver por aquí muestra serifs de cabeza en forma de cuña. Tienen forma de cuña para ambas fuentes. Después tenemos contadores pequeños. Entonces tenemos rezago barrido. No sé qué es, pero lo han mostrado por aquí. Ahora, travesaño horizontal. Tenemos travesaño horizontal muy recto. Entonces tenemos transiciones suaves a serifs de pie. Transición suave significa que hay un ángulo muy suave para el tallo a este serif pie. Esto es lo que están mostrando. Ahora cambia a este Chaparral Pro. Ahora, Chaparral Pro está al frente, que está un poco oscuro. Se puede ver que las terminaciones son un poco gruesas y slabish. Pero aún así es muy similar a Adobe Garamond Pro o a algunas características, las acciones en las mismas características. Como puedes ver, O tiene pequeños contadores. Ambos tienen contadores pequeños de lo que tienen ligera modulación. Creo que esto es lo que están tratando de decir del ángulo. Entonces serifs cabeza en forma de cuña. Esto es lo mismo, luego sin corchetes serifs de losa, es diferente de la otra fuente. Tiene losas en lugar de esta serifs curvy por aquí como este Adobe Garamond Pro. Pero este es un sitio muy bonito si quieres intentar conectar diferentes fuentes con similitudes, debes echar un vistazo a este sitio. Compartiré todos los enlaces de estos sitios en los recursos. Puedes probarlos, jugar este juego. Es muy bonito y muy fresco. Mejorará tu ojo para emparejar fuentes. Además, quiero mostrarles un ejemplo más. Bebas Neue y Din Web Condensada. El primero cuando miro ambas fuentes es que son altas. Este es un poco alto. También esta es fuente muy alta. A pesar de que es grueso pero se ve un poco delgado y alto. El construido es alto, la altura X es buena. Por eso se ven muy similares porque esto también es grueso y alto. Esto también es grueso y alto. Esta es la única similitud que puedo ver porque en este momento la Bebas Neue Font está en todas las mayúsculas y creo que está disponible sólo en todas las gorras. Estos son algunos ejemplos que quería compartir con ustedes chicos, Adobe Garamond Pro, Chaparral Pro, y pocos otros. Puedes buscar en los sitios web, este typ.io, y buscar similitudes solo para entrenar tu ojo y seguir mejorando tus habilidades tipográficas. Pasemos a la siguiente lección. 34. Evitar demasiada similitud: En esta lección, vamos a hablar de demasiada similitud. Por lo que en la lección anterior, hablamos de tratar de encontrar características similares entre diferentes fuentes para combinarlas. Pero en esta lección vamos a ver, si intentas encontrar demasiada similitud, dañará tu contraste y tu diseño, fácilmente puede arruinar tu diseño. Así que ten en cuenta que demasiada similitud puede matar fácilmente el aspecto de contraste de nuestra técnica de emparejamiento hacia delante y realmente puede impactar tu diseño, así que trata de evitar demasiada similitud. Aquí te estoy mostrando dos fuentes, Noto Sans y Open Sans. Si bien estaba diseñando para alguna aplicación web para médicos, supongo, se me ocurrió esta combinación. Traté de usar Noto Sans y Open Sans entre sí en esa aplicación y para mi sorpresa, no había ningún contraste. Yo sólo estaba confundido por qué está sucediendo una y otra vez. Debería usar alguna otra fuente, no están coincidentes muy bien. Se puede ver en la parte superior que x-height es similar, incluso el ancho del trazo es similar, tienen un trazo casi similar. En la parte inferior puedes ver estoy mostrando letras diferentes, crecer foax, no significa nada solo para mostrarte las curvas y ángulos y contadores, ¿cuánto grandes son los contadores? ¿ Cuál es la forma del mostrador? Se puede ver dentro de las letras O, ambas fuentes tienen casi 99 por ciento de similitud. Incluso si miras A las curvas son iguales, incluso los contadores son casi iguales, W es igual, única diferencia es esta letra G, supongo que una es Humanista Sans-Serif y hay un poco geométrica. El problema que quiero mostrarte aquí es demasiada similitud, así que trata de evitar demasiada similitud. Aquí hay otro par que encontré que es Eufemia Regular y Open Sans. Creo que no son demasiado similares, pero aun así comparten mucha misma personalidad. Si nos fijamos en la Eufemia Regular, creo que tiene una naturaleza un poco más curvilínea y termina y se puede ver una cola después de Una carta por aquí. Además, F es un poco diferente pero la estructura básica de la letra es casi la misma. Este es otro ejemplo, trate de evitar este tipo de combinaciones. Es mejor que escribas algo así como dos líneas en dos fuentes diferentes e intentes ver si se asemejan o no. Ahora aquí hay otra combinación que encontré. Busqué mucho y traté de mezclar muchas fuentes luego llegué a estas dos combinaciones muy similares. Entonces si miras Droid Sans y Source Sans Pro. Hay muchas similitudes entre estas dos fuentes. Si miras la G y la oreja de G, la letra R, es casi lo mismo, W es casi lo mismo, uno es más ancho, uno es un poco menos ancho, F es casi lo mismo y luego las curvas en la A, el contador dentro de la letra A, cierre contador, esto es lo mismo, y la X es casi la misma. X-height es un poco diferente entre estas dos fuentes, pero aún así comparten muchas similitudes. Entonces todo esto se trata de evitar demasiada similitud, si tu intestino siente que estas fuentes no tienen diferencia porque tus ojos y cerebro están más entrenados para mirar las diferencias y similitudes. Si encuentras alguna similitud o encuentras que hay demasiada similitud entre dos fuentes, intenta evitarlas. Ahora, pasemos a la siguiente lección. 35. Convierte fuentes de la misma diseño o familia: En primer lugar vamos a despegar muy lento. Por lo que veremos las técnicas que están relacionadas con la fácil combinación de diferentes fuentes. Entonces cómo podemos emparejar fuentes muy fácilmente. Ahora la primera regla es, si las fuentes pertenecen a una familia muy grande o a un mismo diseñador, entonces encajarán muy bien. Ahora, ¿por qué es eso? Porque mismo diseñador o misma familia significa mayormente la geometría similar. Entonces las formas y ángulos, la mayoría de ellos compartirán sus rasgos. Ahora hay familias que se llaman súper familias como tenemos a Roboto por aquí. Déjame mostrarte en Google Fonts. Si miras a Roboto, ¿dónde está Roboto? Aquí. Uno es Roboto por aquí. Cuenta con 10 o 15 tamaños diferentes. Después Roboto Mono. Esta es una familia muy grande, por lo que tiene diferentes variaciones como Roboto Mono. Ahí hay uno más, Roboto Condensed. Por lo que todos estos se pueden mezclar muy fácilmente porque están construidos y diseñados por un mismo diseñador. En realidad es básicamente muy grande familia de fuentes Jimbo mega. Por lo que misma familia podría ser una familia muy grande o podría ser una mezcla de sans-serif o serif del mismo tipo. Droid Sans, tal vez conozcas al Droid Sans y Droid Serif. También se trata de dos parejas de familias y básicamente son iguales. Entonces Roboto y Lato son grandes familias solteras. Entonces ten en cuenta que si una fuente tiene una familia muy grande y tiene estilos de, por ejemplo, déjame mostrarte. Al igual que este Kanit. Por lo que tiene muchas variaciones, muchos estilos diferentes, muchos espesores. Por lo que el grosor del trazo; 100, 200, 300 diferentes. También este Exo, Exo 2, tiene mucha variación. Con estas fuentes, podemos crear muchas variaciones. Entonces el primer paso es que encuentres una familia que tenga muchos estilos. Por lo que puedes usar solo una familia y usar diferentes formas y estilos para crear variación y contraste en tu texto. Entonces esto es lo primero. Entonces la segunda es que seleccionas fuentes del mismo diseñador. Permítanme mostrarles ejemplo. Aquí te estoy mostrando ejemplo de Justin Gravante Sitio del Día. Es de enero y está usando fuentes FF Mark, Freight Display, y Freight Text. Ahora Los textos de Display y Freight están básicamente diseñados por la misma fundición de fuentes, que es GarageFonts. Se puede ver por aquí mis fuentes por aquí, Freight Text, GarageFonts. El diseñador es básicamente este Joshua Darden para ambas fuentes. Este es el mismo diseñador. Si haces clic en el “Perfil” de este Joshua Darden, puedes ver que tiene muchas fuentes de diseño diferentes como Freight Text Pro, Freight Display Pro, Freight Sans. Por lo que todas estas fuentes, se pueden mezclar fácilmente porque creo que casi están compartiendo la misma geometría, porque están diseñadas por el mismo diseñador. También su nombre es igual, Freight Sans, Freight Sans. Entonces así es como emparejamos diferentes fuentes del mismo diseñador. Entonces tenemos algunos ejemplos más de estos Textos de Flete y Display de Flete. Se puede ver por aquí, han utilizado cuatro fuentes diferentes en este diseño. Se puede ver por aquí. Es un uso muy maravilloso de las fuentes. Creo que podría ser muy experto en tipografía. Entonces tenemos otro lado. Se trata de UrbanStems. También está usando solo Display de Carga y Freight Sans. Se ven muy bien juntos. Uno es sans serif y otro es fuente serif. Entonces aquí, este es un sitio web del Viaducto Rail Park y también aparece en Typewolf. Aquí de nuevo, estamos usando Display de Carga y Freight Sans. No nosotros, sino este diseñador. Se ven geniales juntos. También es uno está un poco relacionado con la familia sans serif y uno es para serif. Por lo que son diseñados por el mismo diseñador. Esto es básicamente, quiero mostrarte aquí. Es así como se usan fuentes de la misma familia grande o del mismo diseñador. Usa este sitio, mejores fuentes de Google. Te compartiré este recurso. Así que asegúrate de mantenerlo y buscar diferentes formas que tengan familias grandes. Entonces todo esto se trata de la primera regla, que es cómo vamos a combinar fácilmente fuentes de la misma familia o del mismo diseñador. Entonces pasemos a la siguiente lección. 36. Herramientas en línea para emparejar fuentes: En esta conferencia, voy a compartir con ustedes algunos de los mejores sitios web que realmente mejorarán sus técnicas de emparejamiento de fuentes, y su guardia de emparejamiento de fuentes, y sus ojos de emparejamiento de fuentes, y su emparejamiento de fuentes, No sé, tal vez cerebro, algo así. No sé que lo tengas o no. Ahora, este primero es tipo de conexión. Este es un juego muy grande para escribir emparejamiento. Se pueden seleccionar diferentes fuentes, como tenemos estas fuentes antiguas, Garamond Pro, fuentes ITC Century, Univers, muy estructurales, muchas fuentes de estilo sans serif. Entonces tenemos algunas fuentes de estilo serif de losa, y esta es una fuente muy diferente. Si seleccionas alguno de ellos como si selecciono éste, entonces te da cuatro opciones. Busca lo similar, quieres usar la misma similitud en dos fuentes o quieres obtener el contraste, explorar el pasado, o quieres ir con los datos históricos de esta fuente como la fuente que estaba en 1800 y que fue en 1900 o algo así. Además, puedes confiar en la familia. Ya sea que quieras seleccionar de la misma familia como este Adobe Garamond Pro. Estas son pocas opciones. Si haces click en esto como “Abrace the Other”, entonces te da opciones para seleccionar tres más. Se puede seleccionar cualquiera de estos tres. Por ejemplo, si selecciono éste, veamos cómo van a emparejarse entre sí. Muestra cabeza sobre corazón. De verdad coinciden, vamos a enviarlos en una cita. A lo mejor no porque se parecen demasiado, ambos son serif de estilo viejo que siguen siendo patatas fritas de pequeño tamaño. Es así como te entrena con el emparejamiento de tipos. Vuelve atrás y trata de combinarlos de nuevo como por aquí. Este es un juego muy cool, puedes jugarlo una y otra vez y entrenar tu ojo. Por ejemplo, si seleccionas esta y voy a abrazar la otra, es muy redondeada, así que podríamos ir con Futura que es fuente muy afilada, afilada. Vamos a enviarlos en una cita, a ver cómo sucede. Sí. Han hecho un partido muy exitoso. Veamos qué tan bien se puede hacer por aquí. Entonces tenemos pocos lados más. Este es muy bueno, Tipo Genius. Seleccionas una fuente como esta, y la vista coincide, y te mostrará muchos partidos diferentes como Adelle, FF Dagny Pro. Esta es una coincidencia que encontró para esta fuente. Puedes seleccionar otros como tal vez Bebas Neue y ver partidos y encontrarás mucho como 1, 2, 3, 4, y 5 combinaciones diferentes. Esto es muy bueno, otra herramienta para tal vez entrenar tu ojo o encontrar rápidamente un par de fuentes. Entonces tenemos este sitio web, fontpair.co. Puedes buscar por aquí o puedes seleccionar fuentes por aquí. También puedes ir con san serif, combinación san serif, o cursiva con san serif, o serif y sans serif, algo así. Uno es para encabezamiento, el segundo es para cuerpo de texto. Normalmente te está mostrando, mayoría de las veces, Google Fonts. Estas son todas las Fuentes de Google. También te mostrará dónde descargar estas fuentes. Entonces tenemos pocos otros sitios web para inspiración de tipo. Este es create typewolf.com, y te mostrará todo ese nuevo crear diseños y maestros de tipografía y sus obras maestras y junto con sus fuentes. Se puede ver en la parte inferior, tienen tres fuentes utilizadas en este sitio web. Si haces click en él, puedes ver los detalles por aquí, así. En la parte inferior, y en la parte superior, si hace clic en estas fuentes, puede ir a los detalles de esta fuente y donde se ha utilizado. Además, puedes descargar esta fuente o tal vez la compres. Después hay un typ.io más, te muestra inspiraciones de diferentes fuentes, también las fuentes utilizadas por aquí. También las etiquetas lo que significa que a qué categoría pertenece. Entonces el enlace del sitio, si quieres ir por aquí, puedes comprobarte a ti mismo. Estas son pocas herramientas que podría encontrar más y voy a incluir un PDF o tal vez otro archivo en los recursos para descargarlo y verlo por ti mismo. Sigue practicando y mejorando tus habilidades de emparejamiento de fuentes. Te daré muchos retos en las próximas lecciones, así que veamos cómo puedes mejorar y cuánto ya has mejorado. Pasemos a la siguiente lección. 37. Preperations de ejercicios de diseño de Dribbble: En este ejercicio, vamos a crear algo similar a éste. En primer lugar, les voy a mostrar los recursos que vamos a utilizar y las fuentes que vamos a utilizar. Déjame mostrarte los recursos. Para la imagen de fondo, he usado este pixabay.com. Se puede ver por aquí tableta iPad. Puedes buscar por aquí, tablet iPad y creo que aparecerá esta imagen. Para las fuentes, estoy usando tres fuentes. Una es Bitter by Google fonts, ésta. Puedes buscar por aquí. Entonces, tenemos la fuente Aller, que es una fuente gratuita de Font Ardilla. Me gusta mucho esta fuente. Entonces, estamos usando fuente Aleo sólo para el logotipo. Por lo que no se va a utilizar en el diseño, sólo para el logotipo. Entonces para la escala de módulo, en realidad, no usé ninguna escala de módulo. Acabo de usar 42, 16, y 18 píxeles, tres valores. Pero en realidad, encontré una escala que está relacionada con esta relación, base de 16 píxeles y proporción de 1.15, y se pueden obtener los mismos valores que he usado 16, 18, y 42 o 43. Por lo que puedes usar esta báscula. Al final, vamos a utilizar este archivo maqueta de mano Galaxy, archivo libre de graphicburger.com, y lo vamos a utilizar en nuestro diseño. Puedes usar cualquiera de esto, ya que no tenemos ninguna app móvil en este momento, así que vamos a usar la misma vista previa por aquí. Empecemos. En primer lugar, sólo vamos a montar nuestro lienzo. Adelante, nuevo expediente. Voy a seleccionar 1,920 por 1,080 full HD. No maneje a color este documento, píxeles cuadrados, y vamos a hacer clic en “Aceptar”, así. Entonces, vamos a arrastrar sobre esta imagen hacia nuestro Photoshop así, y solo tratamos de expandirla para que cubra todo el lienzo así. Entonces en el medio, vamos a crear un rectángulo. Haga clic aquí una vez, y el ancho del rectángulo debe ser de 1,360 por 784. Por lo que 784 es básicamente divisible por 16 píxeles, así que estoy considerando este tamaño en altura. Vamos a crear esto. Ocultemos su frontera. Selecciona un color de estilo grisáceo por aquí, y lo vamos a mover en el medio, así. Ahora, el primer paso es que vamos a crear algunas guías, columnas, y algunas canaletas y todas las cosas alrededor de esta capa. El mejor modo en esta situación es que voy a utilizar un plug-in llamado como GuideGuide. En primer lugar, voy a hacer una selección, control click alrededor de esta capa, y nuestro margen es 0, 0, y 0, 12 columnas. Número de filas, lo voy a dividir en cuatro secciones. Aquí tenemos 1, 2, 3, y 4, por lo que cuatro secciones. Entonces, no tenemos ancho y aquí está nuestra canaleta tamaño 20 y vamos a añadir las guías así. Ahora bien, si no tienes este plug-in, no te preocupes, necesitas crear, primero, el tamaño del documento. En esta instancia, vas a crear 1,360 y 784. Simplemente crea primero este documento y construye algunas guías a su alrededor, así, New Guide Layout, 12 columnas, 20, y deja los márgenes alrededor de él así. Presiona “OK”. Entonces si no tienes este plug-in, tu primer paso será éste. Entonces primero, necesitas crear este documento, luego ir a este tamaño de lienzo y ampliar el tamaño de tu lienzo a 1,920 por 1,080. Presiona “OK”. Ahora puedes ver que tu lienzo se ha ampliado y tus guías tienen por ahí. Para que puedas usar estas guías así. Pero ahora mismo, estoy usando este plug-in. Entonces solo para facilitar los pasos, estoy usando este método. Hagamos un poco más de color blanco, color gris blanquecino. Ahora se ha creado nuestra red modular. Tenemos muchas columnas y cuatro filas. Vamos a utilizar todas estas filas para crear nuestro diseño. En la siguiente lección, vamos a diseñar sobre este lienzo. Entonces pasemos a la siguiente lección. 38. Diseño de encabezados de héroes parte 1: Ahora, empecemos a crear primero su logotipo, vamos a seleccionar Text Tool o teclear T en el teclado para seleccionar esta herramienta. Vamos a seleccionar fuente Aleo. Creo que fue audaz, y el tamaño debe ser de 36 puntos, y el color será éste, creo aaafb2, presiona “OK”. Haga clic en cualquier lugar y escriba F-A-S-T. Rápido es básicamente el nombre de la firma, acabamos de imaginarlo. Había algo por debajo de ella, una línea naranja solo para enfatizar que es un logotipo. Es un logo ficticio, así que no te preocupes si te preocupas demasiado de que por qué y de dónde ha venido este logo. Solo tienes que arrastrar una línea debajo de ella. Basta con quitar este trazo y utilizar este color naranja. Este color naranja que usamos por aquí, es un poco de naranja plana pero un poco afilado así. Ahora mismo, no te preocupes por las colocaciones. Simplemente crea un grupo por aquí llamado Logo para que todo esté organizado. Este es nuestro contenedor principal, así que lo nombra Contenedor. Este es nuestro trasfondo, así que hazlo Antecedentes. Utilice siempre convención de nomenclatura que sea significable y fácil de entender. De lo contrario, creará un lío muy grande al final. Ahora para esta navegación superior vamos a usar la fuente, que es Aller. Entonces básicamente estamos usando dos fuentes; Aller y Bitter. Voy a usar Aller regular y el tamaño de fuente será de 18 puntos, cambiarlo a 18 y el color será un poco más de color grisáceo oscuro, tal vez éste, creo que no fue éste, fue éste, 333683, pulsa “OK”. El primero fue Sobre nosotros. Por qué no puedo ver porque tengo puedo moverlo hacia arriba, Sobre nosotros. Después tuvimos Casos de Estudios, Recientes y Contacto. Te aconsejo que utilices otra copia. Estudios de casos, ahora todos estos han sido creados. Vamos a mover el último que es Contacto hasta el final donde lo necesitemos. Resalta tus filas y columnas haciendo clic en “Controlar punto y coma”, selecciona todas estas y vamos a alinearlas así. Esto es básicamente distribuirlo horizontalmente. A veces todavía no lo distribuye horizontalmente muy bien. Se puede ver Sobre nosotros, se ha movido por aquí. Necesito que esté por aquí, y luego de nuevo, lo voy a seleccionar así. Necesito Estudios de Casos para estar por aquí. Vamos a arreglarlo otra vez. No te preocupes si Recent está por aquí, así que vamos a mantenerlo así. Ahora, vamos a crear estas tres barras por aquí. Para eso, vamos a utilizar esta herramienta rectangular, que es nuestro rectángulo. También puedes usar este rectángulo redondeado si quieres. Creo que he usado rectángulo redondeado puede ser así. Tiene algún color grisáceo así. Por aquí, vamos a seleccionar el color, tal vez éste, tal vez de color grisáceo más claro. Duplicarlo, uno, dos. Así. Agruparlos y tenemos nuestra navegación por aquí. Si quieres subirla, puedes moverla arriba por aquí. Basta con mantener la distancia, que va a ser 1, 2, 1, 2, 3, 4. También podemos agregar algunos más, tal vez seis más, 1, 2, 3, 4, 5, 6. La distancia total desde arriba es de 30 píxeles. No estoy en este momento, considerando mi línea de base, así que ahora mismo estoy libre de mi línea de base. A veces cuando estás diseñando, no necesitas pensar demasiado en la línea base cuando no tienes párrafos muy largos o textos muy largos para editar o necesitas diseñar para blogs o algo así. Ahora mismo estoy diseñando para el encabezado. Por lo que solo estoy usando mis bloques de legos para arreglar todo. Cuatro filas o cuatro secciones, horizontal y verticalmente, tengo 12 columnas. Démosle el nombre Menú o Nav, navegación. Vamos a subirlo, alinearnos con esto. Por qué estoy usando grupos porque puedo alinearlos fácilmente entre sí. Este se ha alineado con esto fácilmente. Además, puedes hacer doble clic en él y puedes cambiar el color de todo el grupo simultáneamente. Color Overlay, y vamos a usar alguna superposición de color por aquí así, esto se ve genial en lugar de color grisáceo demasiado oscuro. También, a esto se le llama menú de hamburguesas. Nuestra barra de pestañas está casi lista. Alineemos los logotipos también con estos. A lo mejor necesito tener 1, 2, 3, 1, 2, 3, 4, 5, 6. Supongo que 16 multiplicado por 2 es igual a 32. Entonces movámoslo cuatro píxeles por aquí, 1, 2, 3, 1, 2. Por lo que 32 pixeles, lo he movido desde arriba. Vamos a moverles dos píxeles abajo, uno y dos. Un gran diseño es básicamente muy calculado. Entonces, no pienses que necesitas ser muy creativo para diseñar esto. Creo que hay que ser muy analítico para diseñar esto. Ocultemos esto y veamos cuáles son las distancias entre nuestros elementos. Sigo pensando que hay mucha más distancia entre About y Recent. Usemos nuestra sensación de intestino interior para alinear estos. Yo lo voy a mover por aquí y mover el Recent por allá. Vamos a moverlo así. Vamos a mover el Contenido dos veces por aquí. Ahora, se ve perfecto. Se puede ver cómo usé mi sentido interno, o sentimiento de tripa para alinear estos. No siempre confíes en estas rejillas. momento estoy usando esta área para la navegación, 1, 2, 3, 4, 5, 6 columnas, y dos columnas para este logotipo. Así es como estoy alineando todo. Ahora, necesito el texto por aquí, que va a ser en Bitter. Voy a usar todo este bloque, 1, 2, 3, 4 columnas. Paguemos algunos textos por aquí, que fue éste, veamos cómo Woo-Commerce y todo. Estoy usando Bitter por aquí, y el tamaño de la fuente es 43, como mencioné anteriormente en nuestra habilidad tipográfica. Vamos a copiarlo. Voy a usar el Bloc de notas para pegarlo porque va a pegar todo el estilo. Quiero que me veas mientras peinas este texto. Vamos a pegarlo por aquí. Esta es capa falsa, ésta era real. Este es nuestro texto. Lo que vamos a hacer es que vamos a seleccionar a Bitter aquí. Este será Bitter Bold. No sé, ¿fue audaz o lo que sea? A ver. No, no fue audaz, era regular. Ahora 43 y yo seleccionamos la altura de línea para ser 60. Se puede ver por aquí. Ahora el espacio se ve un poco menos por aquí. No sé por qué no está encajando aquí. Ampliemos esto al siguiente. Entonces 1, 2, 3, 4, 5 columnas, ahora mismo estamos usando por aquí. Ahora voy a seleccionar esto y voy a usar algún color más oscuro por aquí. Creo que fue éste. ¿ Se está poniendo por debajo de alguna capa? Creo que fue dentro de este grupo y había aplicado la superposición de color en esta navegación. Por lo que lo he sacado. Voy a usar un poco de color gris azulado aburrido por aquí. Creo que esto se ve genial. Seré un poco menos. Esto se ve muy bien, ahora voy a usar esto. Selecciona esto primero y voy a utilizar este color azul grisáceo opaco. Esta zona está lista. Ahora vamos a crear nuestro botón por aquí. Entonces para el botón voy a usar rectángulo redondeado, y vamos a usar algún tamaño. Usemos 240 por 36. Probemos este, y nuestro radio será de 30. Usemos 30 por aquí, y 30 por aquí, y 30 por aquí, y 30 por aquí. Por lo que es muy delgado. Vamos a crear un poco más de altura, un botón un poco más grande. A lo mejor podemos usar 16 multiplicar por 3 es 48, supongo. Sí. Creo que 48 está más cerca. Veamos cuál era el tamaño que usé por aquí. Control D, y la altura fue de 60 píxeles. Entonces creo que 64 estarán en nuestro rango para nuestra altura basal o todo. Vamos a usarla por aquí. Entonces voy a usar 64 pixeles. Vamos a colorearlo otra cosa ahora mismo. Ahora tenemos algún problema con la redondez. Lo he desplazado a 32 pixeles. Ahora es perfectamente redondo. Hemos creado nuestro botón. Vamos a moverlo un poco abajo, tal vez en esta área, o tal vez si necesitamos espaciarlo, podemos usar 1, 2, 3, y 1, 2. Por lo que a 32 pixeles de esta zona. Veamos cuánto de ella fue de esta zona. Creo que fue en medio de estos dos, arriba y abajo. A lo mejor deberías necesitar usar tu intestino interior por aquí, así que no te preocupes. Además, creo que se puede ver por aquí lo he arreglado en dos columnas. Por lo que ahora mismo se extiende de esta columna. Nosotros lo vamos a contratar desde aquí. Lo vamos a arreglar en dos columnas, así. Vamos a moverlo un poco más por debajo de 10 píxeles y uno, dos. Está en este momento a 48 píxeles de la parte superior. Entonces vamos a usar Aler por aquí, así 16 puntos de píxel, Más información. Se ve realmente genial. Cambiemos su color a blanco, así. ¿ Qué está pasando conmigo? Para el ícono de aquí, el icono de flecha, he usado este plug-in llamado Font Awesome PS. Voy a buscar por aquí flecha, y me va a mostrar todas las flechas dentro de esta Font Awesome. Esta es la flecha que he usado porque en última instancia se la voy a dar a los codificadores. Por lo que esta será una gran ayuda si pueden usar esta flecha por aquí. Vamos a mover esta flecha. Coloca una flecha muy pequeña, así que no te confundas dónde está mi flecha o ha sido secuestrada en alguna parte. Usemos el blanco ahora mismo y movamos el tamaño hacia arriba. Voy a acercar y Control T, y vamos a presionar “Shift” y “Alt Shift Option”, y vamos a aumentar así el tamaño. Creo que el tamaño es casi perfecto. Ahora hemos creado nuestro botón. Pongamos el texto por aquí. En este momento no te preocupes por este color de botón. Vamos a dar algunos toques finales al final. Entonces este es el texto. Creo que debería haberlo copiado antes de comenzar este curso; en algún lugar así, en algún lugar aquí. Esto es un poco inconveniente para ti, pero creo que deberías soportarlo conmigo. Ahora puedes ver por aquí, esta es la zona que estoy usando. Ahora en cuanto esta zona termine por aquí, esta cuadra, voy a poner mi texto por aquí. Voy a poner texto aquí como ese Control V. Estas son dos capas, vamos a colorearlo con este gris ahora mismo. Creo que tienen mucha separación debido a esta altura de línea. Por lo que he fijado la altura de línea a 24, y creo que necesitamos que éste sea un poco más grisáceo así. Por lo que he usado este color de botón. Si estás diseñando, es mejor y sabio que primero uses colores grises. Así que intenta usar tonos de grises en todo tu diseño en lugar de usar cualquier color. Después, al final, usa uno o dos colores para resaltar todo. Este es otro gran consejo para empezar y crear un diseño muy grande. Pasemos a la siguiente lección donde estaremos dando algunos toques finales a este diseño. 39. Diseño de encabezados de héroes parte 2: De acuerdo, ahora esta es la última sesión. Vamos a traer primero nuestra pantalla de teléfono móvil por aquí. Vayamos a la pantalla móvil que hemos descargado. Vamos a extraerlo por aquí. Vamos a usar este primero. Este es el primero. Lo que voy a hacer es simplemente ocultar este fondo. Puedes traer todo como esto, Control G y agrupar esto, Ventana Organizar e ir a Azulejos Verticalmente y moverlo por aquí así. Vamos a cerrar este 1.psd. Arreglemos las ventanas de vuelta. Consolidar Todo To Pestañas así. Ahora bien, esto es muy grande. Vamos a mantenerlo móvil, alejar, Control T, Vale, y vamos a moverlo así. Presiona “Enter”. Ahora, voy a disculparme. Ahora voy a seleccionar este grupo. Vamos a usar nuestras teclas de turno y flecha para moverlo así. Ahora, lo que voy a usar es que voy a usar 1, 2, 3, 4, 5 columnas para este teléfono. Ahora mismo, estoy usando casi seis, así que no te preocupes. Ya casi va a estar aquí. Creo que el tamaño es casi perfecto. Así. Ahora, se puede ver que he extendido un poco la mano al fondo y se puede ver que la mano está saliendo. Lo que vamos a hacer es, vamos a convertirlo en objeto inteligente, moverlo hacia abajo al contenedor. Este fondo blanco es específicamente el contenedor y clip así. Esta mano ha sido arreglada. Vamos a escondernos [inaudible]. Todo se ve bien ahora mismo. Hay pocas cosas como necesitamos arreglar la zona por aquí. Lo que voy a hacer es que vamos a seleccionar este botón, Aprender más fondo de botón, Aprender más fondo de botón, ir a Estilos de capa de degradado Superposición. Voy a usar esta naranja para no multiplicarse pero normal. Esto va a ser de naranja a amarillo. No debe ser radial, debe ser lineal. Voy a usar 180 de la izquierda, el ángulo es de la izquierda, por lo que este color viene de izquierda. Puedes usar este método a lo que quieras. Ahora mismo lo estoy usando así. Si quieres arreglar los colores, puedes seguir adelante y usar más saturación por aquí como 95 tal vez. También para este color tal vez, es muy ligero, hagámoslo un poco aburrido. A lo mejor 95 y saturación 100. No, creo que está muy cerca de este color, así que voy a usar algún otro color tal vez en el área amarilla así. Un poco más amarillo. De acuerdo, ahora se ve genial. Básicamente, estoy combinando amarillo con naranja. Están muy cerca en el espectro, por lo que se ven realmente bonitos y vibrantes. Así es básicamente como creé esto. Usemos 1, 1, 2, 3, 4, 5, 6 y 1, 2, 1, 2, 3, 4. He usado 24 por aquí, así que vamos a crear 24 por aquí también. Entonces 1, 2, 1, 2, 3, 4. Por lo que 24 de ambos lados. Si lo deseas, puedes usar tu propia imaginación y tu propia sensación de tripa para alinear estos. Si trato de moverlo por aquí tal vez 1, 2, 3, 4 pixels, se ve bien. Además, esta flecha, si quieres desplazarla hacia arriba, o tal vez a la izquierda, tal vez a la derecha. Se ve más mejor ahora. Si quieres conseguir algo de sombra alrededor de este botón, selecciona este y voy a usar alguna sombra difusa por aquí, así que así. Lo que estoy usando es que estoy usando 20 por ciento de opacidad para la sombra y vamos a crear la sombra un poco más cerca. La distancia es de tres píxeles. Puedes usar nueve o lo que sea si quieres desplazar esa distancia en la parte inferior así. Creo que quizá seis sean lo suficientemente buenas o tal vez ocho, es el medio de tu altura basal, así que 16. Ahora, se ve genial. Si quieres cambiar el color más sutil, puedes ir así. Sombra muy sutil, muy ligera, sombra muy difusa. Presiona “Ok”. Creo que hemos terminado este ejercicio. Aún así, si sientes que esta zona tiene menos espacio que esta, puedes bajar un poco este botón. Vamos a crear estas alineaciones. Vamos a usar nuestro sentimiento de intestino interior para cambiar esto. Voy a usar por aquí, 1, 2, 3, 4, 1, 2, 3, 4, 5, 6, 7, 8. Está casi alineado con esta zona o este fondo de teléfono móvil por aquí. También, podemos desplazar esta flecha y este botón. Agrupémoslos a botón. Vamos a moverlo al fondo, o un poco hacia abajo, 10 píxeles hacia abajo. Entonces esto es mejor ahora. Se puede ver por aquí, aún así si se siente, se puede mover el botón hacia abajo así, creo que fue mejor por aquí. Tal vez 1, 2, 3, 4, píxeles hacia abajo. Abre tu imaginación, no arregles tu pensamiento de que vamos a usar la línea base, y no va a estar en la línea de base. Simplemente usa tu imaginación. Tan solo asegúrate de que esto va a ser en toda esta zona, y también puedes jugar con la altura de la línea si quieres. Si lo deseas, puedes jugar con la luz de altura de línea 64 o tal vez 68, algo parecido a esto. Puedes usar más espacio por aquí y puedes mandar el botón un poco más abajo así. Esta es una manera. Otra cosa es, se puede ver por aquí que nuestra alineación visual está un poco apagada. ¿ Por qué? Porque estos tienen bordes y esto es redondo. Si lo miras, puedes ver que se ve un poco dentro de esta zona, por lo que no se ven alineados con esta línea. Cómo puedes corregir esto, puedes desplazar este párrafo y esto por aquí. Creo que es un poco más. Voy a usar 64, y también puedo desplazarlo ocho píxeles hacia abajo. Lo he desplazado ocho píxeles hacia abajo, solo es de mi agrado. Quiero crear más espacio por aquí, así que lo estoy moviendo hacia abajo. Además, si quieres seleccionar este teléfono móvil y y vamos a bajarlo un poco más así. A lo mejor mover el Samsung dentro. Vamos a moverlo un poco arriba y un poco a la izquierda. En ocasiones necesitas esconder tus calificaciones y guías para ver qué viene el diseño y mover las cosas libremente. Ahora, para arreglar estos dos temas, tenemos nuestras estas dos áreas de texto, los vamos a enviar por aquí así. Eran 10 pixeles, así que vamos a retroceder 1, 2, 3, 4, 5. Creo que cinco píxeles, o tal vez cuatro píxeles serán más que suficientes para que se muestren en tu alineación visual. Esto se llama básicamente alineación visual, aunque están matemáticamente alineados, pero visualmente a nuestros ojos, no se ven muy alineados. Además, creo que he usado una fuente un poco regular por aquí, así que vamos a cambiarla a regular. Si quieres usar negrita, es tu elección. Creo que este es un gran ejercicio. He compartido muchos de mis consejos de diseño muy especiales o consejos secretos contigo, como cómo diseño, cómo esconder notas. A veces necesitas ver tu diseño desde lejos. Aleja el zoom y vea cómo se ve. Se puede que este texto se vea demasiado aparte. A lo mejor necesito cambiar su altura de línea a 60. Ahora es mejor. A lo mejor puedo moverlo hacia abajo. Ahora mismo, puedes ver que hay mucha distancia entre este botón naranja y este texto. Puedo moverlo aquí abajo o tal vez pueda mover un poco el botón hacia arriba. Estas son todas tus opciones. Así. Creo que ahora se ve mejor. Esto parece un bloque, éste es continuo. Esto está separado. Es así como creamos diseños que están más cerca del nivel de regate. Sigue practicando, no pierdas el foco. Creo que esta tiene un poco borrosa porque usé esta otra técnica. Creo que la próxima vez si quieres moverlo por aquí, puedes ver que está más claro por aquí. No uses esto arrastre las capas enteras, pero copia y pega por aquí. Déjame mostrarte. Creo que es mejor si te muestro así. Ocultar esto, Control A, Control Mayús C o Copiar Combinar básicamente. Este es nuestro diseño ahora mismo, y vamos a pegarlo por aquí. Sostén F5, conviértalo a objeto inteligente. Ocultemos el primero, que es borroso. Vamos a moverlo por aquí. Tu diseño debe ser perfecto, por lo que necesitas moverlo así. Eso es cambiarlo con el contenedor. Además, ya ves que lo estoy alineando con esta zona casi en el medio. Veamos dónde está nuestra mano ahora mismo. Vamos a moverlo un poco al fondo así. Ahora bien, creo que está perfectamente equilibrado. Si quieres agregarle algo o tratar de crear algo similar a él, puedes ver ahora no está borroso de las zonas por aquí. Es así como se crea un diseño muy fresco, un diseño más cercano al diseño de nivel de regate. Ahora para esta selección de cuatro, este es el tema principal por aquí. Ahora puedes ver he seleccionado esta fuente beta, que es un poco, puede ver con curvas y tener muy losas. Muestra forma sólida. Tenemos una forma muy sólida y muy innovadora como tenemos unas muy buenas curvas, superficies curvadas. Se ve muy moderno, sólido y muy ajustable y tal vez flexible empresa. Por eso he usado este, traté de usar Aleo, creo que antes de A-L-E-O supongo, sí. También traté de usar Aleo por aquí. Si quieres cambiar, puedes ver cómo todo el mensaje acaba de cambiar hacia arriba. Ya puedes ver ahora no se ve empresa muy sólida o audaz. Si intentas usar regular, puedes ver por aquí el efecto. Si vuelvo a saltar a la fuente que seleccioné, la beta que puedes ver tiene más peso y más valor. Es así como seleccioné beta en lugar de Aleo para este ejercicio. También se puede ver esta fuente Aleo tiene superficie muy redondeada, es esquinas bien redondeadas, y es muy legible. Probé esta fuente y creo que se ve perfecta. Vamos a mover este reciente un poco por aquí así. Veo el espacio un poco apagado entre estos dos elementos. Guardémoslo ejercicio último 1. Creo que has disfrutado de esta lección. Voy a crear muchos ejercicios de este tipo. Mantente atento y sigue viendo las actualizaciones. Te enviaré las actualizaciones, así que ten cuidado con ellas. Pasemos a la siguiente lección. 40. Diseño de encabezados de héroes con doscientos de temas: Ahora, en esta lección vamos a diseñar algo similar a éste. Es muy elegante y muy potente buscando sitio web de negocios o sitio web de negocio a negocio con muchas soluciones brindadas a otras empresas. Entonces a partir de la última lección, vamos a convertir nuestro último ejercicio en éste. En primer lugar, déjame mostrarte cuáles son las fuentes y colores que estoy usando. Se puede ver que el color dominante es rojo por aquí, y el fondo es un poco texturizado, esta arquitectura. Ahora puedes ver todo el tema se ha cambiado simplemente cambiando el fondo y pocos colores y pocas fuentes. Entonces así es como vamos a crear y utilizar nuestro pensamiento de diseño o combinaciones de tipografía y para convertir un diseño en otro tema totalmente diferente. Cálculos, altura y anchura, todo es igual, solo que he cambiado a través de fuentes, que básicamente es topografía y pocas imágenes por aquí lo que refleja esta organización. Entonces así es como conviertes un tema a otro. Déjame mostrarte algunas de las fuentes y recursos que estoy usando en esta lección. Ahora la fuente que estoy usando para el logo es este ARCHIVO TIPOFACE. De verdad me encanta. Es muy audaz, muy grueso, y muy tecno-lado o tal vez se pueda decir basado en tecnología, muy redondeado y recto. Entonces tenemos este Clear Sans. Es moderno Sans Serif, supongo, y tiene algunas curvas en ella. Estoy usando Clear Sans para texto más pequeño. Entonces esta es una fuente premium que estoy usando, que es Amsi Pro. Yo lo compré, creo que hace un año en ese momento se puso marcha y creo que lo conseguí por tal vez 26 o 30 dólares. Ahora mismo es por $300. Entonces te voy a dar otra alternativa para ésta si no tienes ésta. Aquí una alternativa para este Amsi Pro. Si no tienes esta Amsi Pro, puedes usar esta fuente de Google que es Muli. Se puede utilizar la versión ligera o la versión extra ligera de la misma para el texto. Entonces les voy a mostrar el documento que vamos a diseñar. Entonces aquí está nuestro Amsi Pro, y aquí está Muli. Por lo que les estoy mostrando los dos ejemplos. No notarás gran parte de la diferencia. Entonces lo que hice es en realidad seleccioné esta fuente, parte del texto por aquí y usé lo más nuevo de Photoshop que es esta fuente de coincidencia. Cuando coincido con esta fuente, encontré a Muli por aquí. Por lo que estuvo muy cerca. Creo que tomará algún tiempo hacer coincidir las fuentes. Entonces dale algo de tiempo y si tienes una fuente similar o la mía, puedes seguir adelante. Se puede ver aquí son pocas las fuentes que ha emparejado. Además, fui a las fuentes de Google para ver por mis ojos qué fuente va a ayudar, y fue este Muli. Por lo que puedes usar a Muli por aquí. Es muy elegante, muy único. Por lo que puedes usar Muli en lugar de Amsi Pro. Entonces en este ejemplo voy a usar Amsi pro. Tiene algunas curvas y curvas redondeadas muy bonitas a su alrededor, alrededor del texto. Entonces realmente me encanta esto. Entonces para esta área, estamos usando Clear Sans, esto también es Clear Sans, esto también es Clear Sans. Para este logo, estamos usando archivo y pocos colores por aquí, ya los he ensamblado. Entonces, empecemos y veamos qué se nos ocurre en esta sesión de diseño. 41. Diseño de encabezados de héroes con segunda temas parte 1: Ahora, en esta lección, vamos a crear algo similar a esto. Vamos a partir de nuestro diseño previo. Este es un tema totalmente diferente, es muy elegante como de negocios, o tema premium de negocios. Este es un tema un poco enérgico y creativo, por lo que hay pocas diferencias como el texto, los colores, y las fuentes. Las curvas de las fuentes, he seleccionado fuentes muy diferentes. En esta situación por aquí se puede ver que son muy rectos, se puede ver en algún momento audaz, y un poco serio, como fuentes basadas en tecnología muy serias. Empecemos, y cambiemos este tema por éste. En primer lugar, vamos a cambiar el fondo, tenemos este fondo de imagen. Tengo este trasfondo de algún lugar que no recuerdo. Aquí están mis antecedentes. Fue de unos sitios web gratuitos. Voy a arrastrarlo y dejarlo caer en mi Photoshop por aquí así. Está casi perfectamente en forma y voy a simplemente moverlo así. Turno y Alt, para hacerlo en el centro así. Puedes conseguir algunas cosas puntiagudas todas aquí si quieres. El segundo que vamos a hacer es que vamos a añadir algo de opacidad a este contenedor. Estoy usando el 90 por ciento de este contenedor. Acerquemos y hagamos algunos otros cambios como cambiar estas fuentes por aquí. En primer lugar vamos a cambiar este logotipo y cambiar la fuente de este logotipo que era Archivo. Archivo Regular es la fuente y el tamaño es 36. Voy a cambiarlo a Userable. Esto va a ser en el rojo, así que voy a cambiarlo a este color rojo que es de color rojo aburrido ae5240. Se puede conseguir un poco más nítido, así. Puede ser aumentar un poco la saturación. Estoy usando este color, luego quita esta línea naranja de aquí. Entonces lo segundo es que vamos a cambiar las fuentes de todos estos textos por aquí, este texto links o navegación. Voy a seleccionar personaje y voy a cambiar todos los enlaces a la vez. El tipo de letra que vamos a utilizar es Clear Sans Regular. Van a ser 18 píxeles, no te olvides de esta altura de línea, y luego vamos a cambiar pocos texto por aquí, pocos botones, y pocas otras cosas por aquí, también esta imagen. El ajuste final de afinación se hará en el siguiente paso o en la siguiente lección, así que no te preocupes por ello en este momento. La distancia y todo lo que vamos a ajustarlos en la siguiente lección. El texto que vamos a pegar aquí va a ser el texto que ya he escrito para ese ejercicio. Voy a copiar eso, proporcionamos soluciones poderosas, copiamos y lo voy a pegar por aquí. Control+V o Comando+V, haga doble clic para resaltar y lo voy a cambiar a Amsi Pro Light, y el tamaño de fuente era 36, y la altura de línea es 48. Así. Ahora vamos a ir a este botón, quitar el gradiente, así que tenemos esto. Después ve a estas propiedades, y vamos a usar cuatro píxeles para la redondez. Bueno para ir, con buen aspecto. Conoce más, la fuente es Aler, así que la voy a cambiar a Clear Sans, que es nuestra fuente para texto corporal. Entonces para esta zona, también vamos a cambiar la fuente a Clear Sans Regular, y vamos a cambiar el texto también. Vamos al texto o contenido por aquí, y vamos a copiar esto, y lo vamos a pegar por aquí en el Photoshop. Pégalo así. Entonces vamos a subrayar esto porque es un vínculo, este es otro paso. Va a ser un enlace, voy a usar azul opaco, color grisáceo. Estamos usando básicamente colores aburridos por aquí, esto es 376899. También lo vamos a subrayar. Estoy usando este textil para subrayarlo. También puedes usar el subrayado poniendo una línea debajo de ella y creo que es más efectivo ahora mismo puedes ver que es una línea un poco borrosa por Photoshop. El mejor camino es que utilices una herramienta de línea por aquí y dibujas una línea manualmente así. Ahora mismo su tamaño es de 10 píxeles, así que voy a cambiar su altura a un píxel. Vamos a quitar el subrayado de este texto, se puede ver por aquí. Ahora cambia el color a esto, y puedes ver que se ve más vivo y más preciso. Voy a seleccionar esto, moverlo un poco así, se puede ver que se ve más nítido, y también se puede cambiar el color de éste. Este texto a esto, también para esto creo que algo mal. Ahora ya terminamos con la mayoría de los cambios. Vamos a cambiar la imagen por aquí si quieres cambiar la imagen, o puedes poner algo por aquí como tal vez ahora mismo voy a copiar esta zona por aquí y la voy a copiar, copiar fusionado, y lo voy a pegar por aquí. Solo para conseguirte una demostración, es otra app que diseñé. No estoy realmente orgulloso de ello, pero fue una línea de trabajo muy extraña. Es así como hemos cambiado la imagen por aquí. En realidad esta imagen realmente importa. Sea lo que sea que estés diseñando, el tema que estás diseñando, esta imagen debe tener algunos colores o esquema de colores similares a este tema. Si estoy diseñando en blues y rojos, puedes ver esto es nuestro blues y rojos. Esto realmente coincide con esto. Esta es la razón principal por la que estamos usando todo por aquí. Se puede ver este es el ejercicio que estamos diseñando, creo que debería cerrar este. Para evitar errores, he cerrado esa. Estamos trabajando en esta área. En la siguiente lección, vamos a afinar y cambiar todo el espaciado alrededor, y les voy a mostrar cómo voy a usar esta cuadrícula para espaciar estas tres áreas. Estos tres son muy importantes. También vamos a utilizar algún espaciado alrededor de esta y esta zona. Entonces pasemos a la siguiente lección. 42. Diseño de encabezados de héroes con segunda temas parte 2: Ahora, en esta lección vamos a afinar este diseño. Ajusta algunos problemas de espaciado y espacios en blanco que es, se puede decir, una parte muy importante de tu diseño. Básicamente, tu diseño va a mejorar y conseguir más atención o más forma y forma con estos temas de espacios en blanco. Lo que voy a hacer es en primer lugar, esta área o este texto, nuestro titular principal, lo vamos a desplazar a esta línea de flujo superior. Estos básicamente se llaman líneas de flujo. Estas líneas. Se trata básicamente de módulos o áreas espaciales. Se puede ver por aquí, estos son pocos módulos. Esta es una. Ahora, lo que voy a hacer es alinearlo en la parte superior a lo largo de esta línea. Ahora, para este, este botón, lo voy a alinear en medio de este módulo. Esta zona de aquí, voy a conseguir la mitad de ella. Esto es realmente útil. ¿ Por qué? Porque se puede ver que esto está tomando todo este espacio y esto está tomando todo este espacio. Ahora, de nuevo, voy a repetir esta zona, este mismo patrón, y lo que voy a hacer es que voy a alinear esto junto con esta, otra vez, línea de flujo. Es así como alineé perfectamente mis textos para un mejor espaciado. Aquí, tenemos espacio así. Si podemos intentar mejorarlo, tal vez podamos mejorarlo con algo más de altura de línea, tal vez 52, algo así. O tal vez podamos aumentar esto a 38, algo así. Ocultemos las líneas de flujo y nuestras guías y veamos cómo se ve. A lo mejor este debería ser 36. Treinta y ocho se veía bien. Pasémoslo al 54, habilitemos las líneas y se ven bien. Las distancias entre estos dos se ven geniales. Aunque quieras usar 48, aún así se verá genial. Toda la distancia será armoniosa. Es así como traté esta zona. Ahora para esta zona, se puede ver por aquí, necesitamos tener el mismo espacio por aquí. Habilicemos nuestras guías y eliminemos esta guía por aquí. Además, voy a mover esta guía en la parte superior así, y una guía, voy a colocar por aquí. Ahora, vamos a seleccionar este contenedor, Control y click o Comando click en esto, y vamos a utilizar Griddify para conseguir algún espaciado de 42 alrededor en la parte superior, así, y también desde aquí así. Creo que 42 se ve demasiado, tal vez. Sólo intentémoslo. Ahora, lo que vamos a hacer es que vamos a alinear nuestra navegación con estas líneas por aquí, así. Entonces 42 es el espacio que estoy usando en la parte superior y en la parte inferior, así, luciendo bien. Además, voy a hacer lo mismo para este utilizable. Yo lo voy a alinear en la cruz de esto. Ahora, se puede ver cómo se ve realmente genial, puede ver el espacio alrededor de esta zona. Es muy manejable, muy agradable. Este es el beneficio de vivir márgenes alrededor de su diseño. Ahora, todo parece bueno. Hay un poco de pequeño problema que es, se puede ver, esta mano es un poco transparente en el fondo y también en este fondo de arquitectura detrás. Ahora, lo que está pasando aquí es que este teléfono está recortado dentro de este contenedor y el contenedor es básicamente opacidad del 90 por ciento. Es un poco transparente, 10 por ciento de transparencia. Está tomando las propiedades de este contenedor. Lo que vamos a hacer es que vamos a deshacer así esto, y vamos a usar una máscara. Comando haga clic en este contenedor, luego vaya al teléfono, y haga clic en este. Por lo que estamos hechos, hemos completado este diseño. Si tiene alguna pregunta, pregúntame. Si quieres más ejercicios o algo que tengas en mente, puedes mandarme un mensaje. Si algo se ve bien, realmente intentaré actualizar este curso. Voy a añadir un ejercicio más a este curso y luego me voy a parar porque casi he transmitido muchos consejos de diseño y técnicas relacionadas con el espaciado y el uso de la red. Si tiene alguna pregunta más, pregúntame. Hazme saber. Si estás enfrentando algún problema, puedes seguir adelante y preguntarme en cualquier momento. Si es necesario, puedes configurar una videollamada conmigo. Uno de los estudiantes ya hizo eso. Entonces pasemos a la siguiente lección. 43. Exericse de diseño de anuncios de redes en redes sociales → Preperations: En este ejercicio, vamos a diseñar algo similar a esto. Puede llamarlo un anuncio de redes sociales o un anuncio de descuento o un anuncio impreso. Puedes diseñarlo incluso en Illustrator o Photoshop o cualquier herramienta que te guste, pero la base de este diseño seguirá siendo la misma. Lo que voy a hacer es que estoy usando un patrón de uno al fondo. Entonces tengo este fondo de superposición encima de este patrón. Es un poco transparente. Después tenemos texto en tres fuentes diferentes y pocos colores como este, naranja pálido y este color amarillo. En primer lugar, les voy a mostrar todos los recursos que he utilizado en esta conferencia. Veamos los recursos y donde puedes conseguir todas estas fuentes porque he mezclado tres fuentes por aquí. Uno es un poco se puede decir muy ancho y muy alto como éste. Se trata de Aileron, y por lo tanto un poco, se puede decir fuente script-ish, y luego tenemos esta fuente redondeada, muy audaz Signika. Déjame mostrarte todos estos recursos. En primer lugar, vamos a ver qué otras fuentes estoy usando. Esta es las fuentes de Google Signika Negativa. Este es el top que estoy usando. Se puede ver por aquí, es naturaleza muy curvilínea y muy juguetona. Entonces tenemos esta fuente Antre, que es de algún tipo, Taner Ardali, Estambul, Turquía y realmente conecta con la siguiente letra muy bien. Se puede ver por aquí. Este es otro. Entonces la tercera fuente que estamos usando es por TipoType Aileron, y es una fuente gratuita, puedes descargar desde aquí, escribe 'cero' por aquí y Añadir al carrito y puedes descargar toda su grandeza. Se trata de tres fuentes. Después pasar a los otros elementos. He usado esta cosa del tipo chapoteo dulcemente por aquí, este arte floral o como se le pueda llamar. Entonces está este fondo por aquí, este patrón. Los descargué gratis y te voy a mostrar un sitio donde puedes descargar todas estas cosas de forma gratuita. Es básicamente este sitio. Creative Market siempre te muestra seis descargas gratuitas cada semana y te da estos fondos gratis, impresionantes y de gran aspecto, iconos, pinceles en algún momento, fuentes. Este es el paquete de esta semana. Descargué estas semanas atrás como esta, este Ditsy Floral Digital Pattern por, no sé, por JSquarePresents, y luego descargado éste. Los tengo gratis así que no te recomiendo que los compres, pero puedes suscribirte o crear una cuenta en este sitio y puedes obtener descargas gratuitas cada semana. A lo mejor puedes encontrar este tipo de cosas en línea en Google mediante la búsqueda. A lo mejor los puedes encontrar gratis, pero yo uso estos dos elementos. Ditsy Floral Digital Patrón y elementos de diseño Flor dibujada a mano. Empecemos. Pasemos a la siguiente lección donde vamos a empezar esta lección y diseño. Pasemos a la siguiente lección. 44. Diseño de anuncios de redes parte 1: En la última lección, miramos los recursos de este ejercicio de diseño. Empecemos. Voy a abrir un nuevo archivo y el tamaño será de 1,400 ancho y 900 píxeles de altura. Presiona “OK” y este es nuestro tablero de arte. Para convertir esta capa a fondo, solo nombra fondo y vamos a ir a capa, nueva, y fondo de capa. Podemos alinear las cosas con esto porque está bloqueado. Ahora, vamos a crear caja interior en esto porque teníamos esta y esta capa amarilla y luego tenemos el texto dentro. Tenemos en realidad uno y dos rectángulos en este fondo. Vamos a crear otro rectángulo. Haga clic en la herramienta de rectángulo mientras presiona “U” en su teclado y presiona una vez así y el tamaño debe ser 1,200 por 725. Puedes ajustarte de lado si quieres, pero he calculado todos estos tamaños antes para que podamos configurar rápidamente. Alinearlos en el medio y ahora necesitamos el tercero. El tercer rectángulo estará dentro de este rectángulo el cual será nuestro principal camino de trazo amarillo. En realidad será de 900 por 500 píxeles. Esta ha sido creada pero no se pueden ver las capas porque es algún otro color en este momento. Lo vamos a alinear en medio de este rectángulo. Démosles un nombre en consecuencia. Esta es nuestra espalda transparente. Será un poco transparente, entonces éste es nuestro principal borde amarillo. Es así como vamos a diseñar esta zona, en realidad lo que teníamos es que teníamos este rectángulo como nuestro amarillo, tenía un trazo amarillo. Vamos a establecer el trazo amarillo ir a capa, efectos de capa, y vamos a ir a trazo, y el color es F-F-E-E-9-9, presione “OK”. El tamaño del trazo es de seis. Yo lo estoy poniendo en el exterior y eso es todo lo que puedes hacer clic en “OK” entonces puedes ir a llenar, presionar cero, y aquí tenemos nuestro rectángulo amarillo. Ahora, para el patrón en el fondo podemos crear, qué es eso, una nueva capa por aquí, llénala con lo que quieras. Control + Alt eliminar para llenarlo, así. Yo lo llené con este color. Ahora lo que vamos a hacer es que vamos a crear un patrón a partir de este archivo. Voy a dejarlo caer en Photoshop así, solo ignora los colores y vamos a crear un patrón. Control A, selecciona todo esto, y ve a editar, define patrón y este es nuestro patrón, vamos a cerrarlo, y en esta capa 1, que era nuestra capa de fondo, solo una capa. Vamos a usar esta capa para nuestro patrón, entonces capa de patrón. Vamos a colorearlo otra cosa para que no se sienta muy raro. A lo mejor éste, por lo que se siente diferente al otro. No te preocupes por el color porque nuestro patrón se va a superponer en este diseño. Ve al final y verás este patrón. Vamos a escalarlo de nuevo al 100 por ciento. La opacidad debe estar llena y se ve muy grande. A lo mejor podemos chasquear a una región. Podemos reducir su tamaño a 50 por ciento o 25 por ciento, 25 por ciento se ve genial. Presiona “OK” y tenemos nuestro patrón. Cambiemos el color de éste a este tono tierra. Este es un poco del tono de la tierra, se puede ver por aquí. A lo mejor este color o éste. Se trata de una mezcla de rojo y grasa. Para conformar este tono tierra, puedes usar este. Creo que éste está más cerca. Ahora, vamos a hacerlo un poco transparente cambiando esta opacidad al 90 por ciento. Podrás ver nuestros antecedentes ya están terminados. Vamos a crear un patrón por aquí. El tamaño del patrón será de 500 por 110 píxeles, también va a ser un rectángulo por aquí así. Vamos a moverlo por encima de esta ventana, y vamos a colorearlo con algo de color naranja, tal vez éste, un naranja más afilado o esta naranja. Cualquiera que sea el color que te guste, creo que aquí no se ve muy bien. A lo mejor necesitamos un color un poco más nítido. Algo por aquí así. Alejemos el zoom y veamos cómo se ve ahora mismo. Creo que este color naranja se ve algo un poco extraño. Éste se ve mejor. Voy a usar un color un poco más nítido por aquí. También este color me parece un poco extraño. No sé por qué pero le falta algo. Ahora, se ve genial. No te preocupes por los detalles finales, podemos afinarlo al final. Podemos cambiar de color por una hora así que no quiero que pierdas el tiempo aquí. 45. Diseño de anuncios de redes parte 2: En primer lugar, vamos a crear nuestro rubro, que será en Signika negativo. Seleccione la fuente. Ya has instalado la fuente, busca por aquí Signika. Hay dos fuentes, Signika regular y Signika negativa. Voy a usar Signika negativo negrita, y el tamaño será de 170 puntos. Esta regla no es dura y rápida, no te preocupes donde se me ocurrió este tamaño, en realidad. Acabo de experimentar y descubrí que este es el mejor tamaño que coincide con la siguiente línea, déjame mostrarte 35 por ciento de OFF. Ahora, en este ejercicio, no voy a contratar este tamaño. No lo voy a mover un poco más pequeño. Vamos a moverlo en el medio. Vamos a crear otra capa y vamos a utilizar la fuente Andre regular. Vamos a utilizar la línea sorpresa de verano y el tamaño debe ser de 83 puntos. Ahora, se puede ver que es casi del mismo tamaño que la parte superior. Se puede ver que los bordes están un poco fuera, está sucediendo por este rastreo, supongo. Vamos a ponerlo a cero. Ahora, en realidad se cumplen la siguiente carta. Esto es bueno, hasta ahora, tan bueno, vamos a crear otra capa. Este va a ser el texto APUESTA. ¿ Cuál era el texto? DURAS Caduca 31 de julio. Nosotros vamos a escribir por aquí, APUESTA. El tercer tipo de letra que utilizamos fue Aileron Regular y vamos a reducir su tamaño a 50 puntos. puede ver por aquí es casi el tamaño de ajuste por aquí, realidad es igual al tamaño por encima de la sorpresa de verano. Ahora, la siguiente línea que era código de cupan de verano, algunos dice código de cupón. Yo digo código coupan, así que no te preocupes por ello. Verano16. Será amplio y deberíamos moverlo por encima de este botón. Voy a usar una versión más ligera de esta fuente ahora mismo. Esto debe ser todo gorras, así que vamos a usar este. Vamos a moverlo en esto, voy a alinearlo en el medio. Puedes usar estos. He creado teclas de acceso directo personalizadas las cuales expliqué en mi otro curso, donde creé muchos atajos de teclado personalizados para Photoshop. Hay una cosa más, necesitamos que sea superíndice. ¿ Lo llamamos superíndice? Sí, superíndice. Ahora, sólo para asegurarnos de que se va a alinear con todos los top, vamos a aumentar su seguimiento, es casi igual a la parte superior. Sorpresa veraniega. ¿ Por qué tenemos hasta sorpresas de verano por aquí? Alinémoslos y usemos este espaciado vertical. Todavía está un poco apagado, así que vamos a mover todo en el medio así. Depende de ti, puedes dejar este mensaje más cerca de éste, o puedes separarlos con el mismo espacio. Depende de ti lo que quieras. También puedes crear algo como esto, como si tuviera dos mensajes principales de promoción en la parte superior y luego la acción en la parte inferior. Por lo que he separado ambos en dos áreas diferentes. También si quieres redondear este rectángulo, puedes ir a este panel de propiedades y obtener algo de redondez. A lo mejor está más cerca de este equipo. En realidad es sorpresa de verano, o se puede decir venta de verano. Voy a añadir una cosa más. Voy a añadir algo de sombra de gota a este patrón. Va a estar más cerca de este patrón. De esta manera, se puede ver por aquí, un poco de sombra saliendo y se puede aumentar la opacidad de esta sombra. A lo mejor esto es lo suficientemente bueno. Casi hemos terminado este ejercicio. Si quieres que algo cambie en esto, lo siento, tengo la ortografía equivocada del verano. Ahora, es una sorpresa veraniega y tal vez necesitamos cambiar el tamaño a 81 puntos, ajustarnos de acuerdo a tus necesidades. Un pequeño detalle más. Dejé lo del swoosh. Este es el que usé. Es el clip art. Te mostré los recursos antes así que lo voy a arrastrar en Photoshop así. Vamos a reducir su tamaño. Gírala así. Estoy presionando shift por lo que está girando con los ángulos que he especificado en Photoshop. Si no lo sabes, entonces debes ir a estas preferencias y debes establecer los tamaños por aquí. Tenemos por aquí, no recuerdo ahora mismo pero creo que está en esta configuración. Los puedes encontrar por aquí. Mi Photoshop se está desacelerando. Se ve muy grande, así que voy a apretar un poco más. Esto se ve casi perfecto. Vamos a darle superposición de color porque no queremos un swoosh negro por aquí. Superposición de color, tal vez puedas usar este. Depende de ti. Puedes usar blanco o gris o lo que quieras. Asegúrese de que la opacidad del color sea del 100 por ciento. Este es un Control J, y lo voy a mover por aquí. Voy a Control T o Command T en tu Mac. Entonces reemplaza, cada vez que diga control, lo reemplazas con comando flip horizontal y presiona Ok, y hazlo un poco más cerca de éste. Ahora una cosa, asegúrate de que este espacio desde esta línea, este borde a este, este espacio sea igual al espacio por aquí. Esta es una cosa que necesitas para asegurarte. Ahora, puedes ver que casi hemos completado nuestro ejercicio. A lo mejor necesitamos un botón un poco más grande porque me parece un poco más pequeño. Además, si quieres, puedes hacerlos más cercanos o tal vez más espaciosos, depende de ti así. Entonces tal vez hacerlo más espacioso. Además, creo que el botón me está viendo un poco más pequeño así que voy a aumentar su tamaño. Creo que es demasiado. A lo mejor la altura va a ser de 120 píxeles, es bueno. Ahora, a lo mejor necesito moverlo. Estos son sólo los detalles finales. Puedes usarlas cuando quieras, o probarlas y simplemente bloquearlas. Voy a seleccionar este, moverlo un poco arriba, o tal vez más cerca de esto. Por lo que tiene sentido. También voy a mover a estos dos un poco más arriba así. Entonces vamos a crear un grupo de todos estos elementos superiores. Muévelos un poco arriba. Creo que aquí tenemos el equilibrio perfecto. Ahora bien, si quieres agregar algo más a este diseño, eres libre de ir. Esto es solo un ejercicio para crear algo similar a, podrías haber visto muchos anuncios en redes sociales como estos, para que sepas crearlos. Ahora puedes ver, veo que hay menos espacio por aquí que este por aquí. Por lo que se puede ver aquí es equilibrado. Tenemos más espacio por aquí. Yo agregué esto intencionalmente, así que lo vamos a sumar por aquí. Entonces hazlo un poco más grande así. Por lo que se puede ver es un poco de espacio más equilibrado. Necesitamos tal vez más incremento de tamaño así. Entonces así es como usamos nuestro propio juicio y habilidades intestinas para alinear las cosas y diseñar las cosas. Entonces tal vez necesitamos un color naranja más nítido como este. Esto es mejor, supongo. Este es mejor. Además, necesitamos más tonos tierra, así que tal vez necesitamos movernos un poco. A lo mejor por aquí, éste se ve bien. Por lo que esto viene con la práctica. El sentido del color no es fácil de desarrollar. Además, estas habilidades de emparejamiento de tipografía no son más fáciles de desarrollar. Se puede ver que todas estas fuentes se ven bien juntas. Este es un poco serio, o se puede decir un poco legible, más legible porque quería que el usuario leyera esto exactamente lo que es. Esto es muy grande, por lo que puedo ponerme creativo con estas áreas. Por lo que la sorpresa del verano ya que se utiliza en una fuente muy grande. Por lo que es bueno ir con la fuente de guión, tan fácil de leer. Asegúrate de no tener demasiados rastreos en la carta. Por lo que siempre debe llenar un script en lugar de alguna fuente de script rota. Por lo que ahora, tenemos este área de contenido interior. Entonces hagámoslos todos juntos. También éste, mueva éste por aquí. Entonces, agrupémoslos juntos. De nuevo, estoy presionando Shift. Por lo que este es nuestro principal contenido de diseño. Siempre hago esto porque necesitamos mover esto y alinearlo. Entonces no sé qué está pasando, por qué no está alineándose con nuestros antecedentes. Entonces vamos a subirlo. Por lo que tenemos una capa bloqueada dentro de ésta. Entonces solo desbloquea esto y lo vamos a mover. Ahora, es casi perfecto, por lo que está muy cerca de este diseño. Creo que por aquí tenía más color peachy. ¿ Cuál es el color, qué es este color? B10. Por lo que es más en la sombra naranjada y está en mezcla de naranja grisácea. Para que se pueda ver por aquí, aquí tenemos deslizador de color. Entonces aquí tenemos un poco de color más oscuro. Creo que no siempre es perfecto, digamos que copiar todo desde el mismo diseño. Por lo que trato de crear algo diferente cada vez. Entonces esto se ve un poco más. A lo mejor necesito un color un poco más claro como este. Por lo que hemos creado este ejercicio. Vamos a crear una nueva alternancia o nueva variación para ésta, que fue, supongo esta. Entonces lo haremos en la siguiente lección. Estaremos usando este Sian, color muy Sian afilado. Entonces lo haremos en la siguiente lección. Así que mantente atentos para este tipo de ejercicios y sigue coleccionando diferentes fuentes, intenta combinarlas y crea algunos diseños utilizando esta técnica de patrón de fondo. Entonces solo agrega algo de contexto en tu diseño. Entonces esto parece un patrón de ropa o tu camisa o camisa de mujer, algo así. Entonces pasemos a la siguiente lección. Una cosa más, no te olvides de descargar los archivos de ejercicio, archivos PSD, archivos originales que voy a incluir. Por lo que también, incluiré todos los enlaces a todos estos recursos de diseño como todas estas fuentes que he usado. Entonces pasemos a la siguiente variación en la siguiente lección. 46. Toques de publicidad de redes de redes sociales: Hola chicos. Este es el mismo diseño que hicimos en la última lección. Acabo de hacer algunos de los ajustes finos. Supongo que debería compartirlas contigo. Lo primero es que moví todos estos elementos en el centro. Reduzco el tamaño de este texto de 50 puntos a 45, solo un poco más grande que este botón. Si quieres alinearlo con el botón, creo que está bien, pero me siento mejor como ahí. También seguir este trasfondo, fue algo más cercano a esta zona. Grisáceo y naranja. Lo moví en una porción un poco más superior donde es de color más durazno. Algo más cercano a esto, o tal vez éste. Entonces lo tercero que hice es editar algún efecto, se puede ver aquí es naranja y aquí es un color durazno rojizo. Son como esquema de color durazno por completo. Colores rojizos y anaranjados, si alguna vez viste un durazno, todos estos colores son del durazno, supongo amarillo, este color y este color de botón. Lo que hice es agregar una sombra interior con este color, e55f50. Lo que hice es simplemente mover el deslizador un poco hacia abajo y esto es todo lo que hice. Utilizo la configuración distancia 81 porque necesito una zona muy buena cubierta por aquí. También puedes hacerlo con superposición de gradiente. Hay muchas cosas que puedes hacer para aplicar el mismo estilo. El tamaño es de 128. Esto es lo que hice. Además, cambié el tamaño de éste, creo que un poco 81 puntos. Lo trasladé de 83 a 81 puntos. Eso es todo lo que creo que hice. Creo que se ve perfecto. Te mostré esto porque creo que el diseño es cosa progresiva. Intentas y tratas de mejorarlo una y otra vez. Si estás diseñando algo y no se ve muy bien, levántate de tu asiento y tal vez vuelve más tarde después de 30 minutos y vuelve a empezar tu diseño. Añadí algunas cosas por aquí. Voy a compartir este PSD contigo, no olvides descargar este PSD. Todo esto se trata de este diseño, en la siguiente lección vamos a diseñar la versión alternativa de ésta. Simplemente vamos a cambiar algunos colores. Eso es todo, todo el diseño seguirá siendo el mismo. Pasemos a la siguiente lección. 47. Ejercicio de diseño jugoso: Preperations: En esta serie de lecciones, vamos a crear este impresionante encabezado de receta de comida fresca y jugosa y saludable. Haré muchas variaciones, así que déjame mostrarte las variaciones. Se puede ver que éste es el que te mostré. Entonces tenemos esto con el Botón Oval y diferente fuente por aquí. Entonces tenemos la tercera que es con otra fuente como esta compartida por Venessa Malik o algo así. Estas son básicamente cuatro fuentes diferentes combinadas juntas y todavía no estoy seguro de la cuarta, pero estoy mucho- como esta combinación, estas tres combinaciones. Uno es muy gordo y se puede decir tipo exprimido, esquina redondeada y fuente juguetona y divertida, de aspecto divertido, esta. Esto se ve bien para este tema, que es fresco y jugoso. Entonces recuerda el ejercicio del que te hablé, tengo unos ejercicios previos donde tuvimos esta selección temática de fuentes. Esta selección de fuentes se basa en este tema. Entonces tenemos comidas saludables, así que es sólo para ser más abiertos y autoritativos que estas sean comidas realmente saludables. Entonces tenemos esta fuente de script usada por aquí para Browse Recepie. A lo mejor es por intimidad o tal vez cercanía con tu cliente o algo así. Por lo que básicamente se ve muy bien con estas tres combinaciones. Te voy a mostrar en esta lección que, ¿dónde los recursos que obtuve para este ejercicio? Todas estas son fuentes gratuitas, les voy a mostrar estas tres. De acuerdo, una fuente es este Blenda Script. He usado esta fuente, esta es una fuente gratuita y se puede ver por aquí, licencia; Libre para uso personal y comercial. Se puede descargar esta fuente e instalarla. Entonces tenemos esta fuente Damion, por lo que también descarga e instala esta. Voy a compartir los enlaces para estos recursos, así que descárguelos. Esta es Gilroy, Es una fuente premium, pero tienen dos fuentes gratuitas junto con ella. Si navegas hacia abajo, puedes ver este es cero, Gilroy Light y había uno más, Gilroy Extra Bold, esto también es cero. Entonces descarga ambas fuentes o puedes ir a Font Ardilla y descargar estas Gilroy. También tiene estas mismas dos fuentes. Entonces tenemos esta imagen. Lo conseguí de picjumbo.com y este es el link, naranjas frescas en el mercado de pequeños agricultores. Creo que una fuente más fue esta Doce Free Font y descargué de este freedesignresources.net. Por lo que puedes ver por aquí personal y comercial, es gratuito y diseñado por Kenny LKC. Por lo tanto, descargue todos estos recursos antes de iniciar este ejercicio. Vamos a salir adelante y cavar en el diseño de este ejercicio de aspecto impresionante. 48. Ejercicio de diseño de tipografía parte 1: Ahora empecemos y creemos este ejercicio de aspecto impresionante, fresco y jugoso. Vamos a empezar con un nuevo archivo. El tamaño será de 1920 por 1080, y el contenido de fondo, no colores administrar este documento, haga clic en “Aceptar”. En primer lugar, vamos a arrastrar nuestra imagen por aquí, así que vamos a arrastrar la imagen. Vamos a arrastrar la imagen al Photoshop y vamos a dejarla caer. Se convertirá en un objeto inteligente y lo vamos a escalar así. No lo escale demasiado, ya está en las fronteras. Vamos a presionar Enter, y esta es nuestra mesa de trabajo o fondo principal que ya está lista. Selecciona esta capa y la vamos a convertir en capa de fondo. Este es un bicho con este Photoshop aquí, por lo que se ha desvanecido mis antecedentes. Esta es básicamente la mesa de trabajo. Borré la mesa de trabajo seleccionándola, y mi fondo está de vuelta. Ahora le vamos a tirar algunas fuentes, y antes que nada, vamos a seleccionar esta fuente Docena, que era nuestra fuente principal. El tamaño será de 96 puntos. Estoy usando casi esta escala, así que el tamaño será esta, fresca y jugosa. Control A, Control Alt H, para centralizarlo. Estos son mis atajos personalizados. Si no sabes cómo crearlos debes mirar mi otro curso, diseño de UI en Photoshop. Este se crea, ahora a continuación vamos a crear este rectángulo redondeado o tal vez este rectángulo. Crearlo así. Simplemente usa el ancho de tu cabeza para las proporciones, así. Vamos a colorearlo de blanco, y vamos a mover esta fresca y jugosa hacia arriba. En primer lugar vamos a cambiar el radio de esquina. Acude a este panel de propiedades para este rectángulo, y esta esquina será de 60, y desbloquearlos. Vamos a elegir diferentes configuraciones para ellos, así, 60, 60, 0, y 0. Ahora déjame solo colorearlo algo más para que sepas que está por ahí. Ahora lo que vamos a hacer es que vamos a colocar primero esto dentro de este rectángulo, así. Se ve un poco arriba, así que usa tu centro visual. Se cuenta con dos centros en un rediseño. Uno se calcula por máquina y otro se calcula por tus ojos. Ahora mismo lo estoy moviendo hacia abajo. Mis ojos piensan que está en el centro. Ahora está casi en el centro. Eso es casi perfecto. Ahora lo que vamos a hacer es que vamos a Control haga clic en esto para seleccionar esta selección de capas, esta fuente. Entonces vamos a seleccionar este rectángulo, el rectángulo de abajo, e invertir la selección, Control Shift I, y luego dar clic en esta máscara. Se puede ver por aquí, se ha creado una máscara. Esta es esta capa la cual nuestra para selección es casi transparente. Si no entiendes, voy a repetir de nuevo este paso. El primer paso fue que vamos a seleccionar esta capa. Control haga clic en esto para seleccionar esta selección, luego invertir la selección, Control Shift I. Hemos seleccionado todo lo demás, esta área dentro de este texto. Selección inversa, luego haga clic en esta capa, y haga clic en ésta. Ahora puedes ocultar esta fuente y puedes ver que esta capa se ha vaciado. Una cosa más me olvidé, vamos a usar alguna rejilla modular por aquí. Vamos a dividir todo este trasfondo en siete divisiones. ¿ Por qué siete? Debido a que nuestro diseño es básicamente centralizado, todo está centralizado, por lo que básicamente estamos usando dos módulos en la parte superior para el espacio y dos en la parte inferior, y tres dentro de esta área. Tres módulos aquí hacia arriba, vamos a mostrarte para que puedas entenderlo mejor. Con Griddify lo voy a dividir así en esta dirección con esto. Voy a Control Colon a mostrar mi nota. Si no tienes Griddify puedes usar esta vista por aquí, y nueva disposición de la guía. Déjame mostrarte otro camino. Despejemos estas, claras pautas de Canvas, y vamos a crear un nuevo diseño de guía. En este ejemplo, no necesitamos columnas porque todo está centralizado. Lo que vamos a hacer es que vamos a necesitar filas, siete filas sin ninguna canaleta. Así. También si quieres quitar los márgenes, es mejor. Siete filas, puedes crear un diseño de guía así. Aquí tenemos este rectángulo casi terminado. Vamos a moverlo hacia abajo en estas naranjas así. Creo que es mejor. Ahora vamos a seleccionar segunda fuente la cual va a ser nuestro Gilroy. Se trata básicamente de una fuente geométrica. Voy a usar a Gilroy justo aquí, y vamos a escribir COMIDAS SALUDABLES en todas las gorras. Si recuerdas, usamos todas las gorras para los encabezados, así que lo vamos a usar, colorearlo a blanco. Tenemos que reducirlo un poco, tal vez 60. Muévete por aquí en medio, Control A. Hagámoslo en medio, así. Una cosa más, vamos a usar algún rastreo para abrirlo, así. Creo que 75 va a ser bueno, así. mí me parece un poco pequeño, a lo mejor creo que deberíamos usar 72. Setenta y dos es bueno, 72 y 96, estos son dos tamaños de fuente que estamos usando en este momento. Voy a moverlo un poco hacia abajo, así. Lo siguiente es que vamos a crear un botón por aquí. Para el botón, vamos a usar rectángulo redondeado, o tal vez sólo el rectángulo, rectángulo regular, y vamos a crear un botón como este. Ahora, solo olvídate del color ahora mismo vamos a usar trazo por aquí, trazo de cuatro píxeles. Debe ser blanco, y debe ser 100 por ciento opaco. Lo vamos a usar en el exterior. Ahora, una cosa vamos a usar este relleno a cero. Te voy a mostrar un truco más ahora mismo. Ahora vamos a añadir la tercera fuente para esta, que era Damion, supongo. Sí, es Damion. Este, regular de Damion, y vamos a escribir por aquí navegar receta. Acabo de añadir una S por aquí. Ahora, vamos a reducirlo a 36. No, creo que 36 es demasiado pequeño. 48, 48 es demasiado grande, entonces vamos a encontrar un terreno medio, tal vez 42. No te preocupes por la báscula. Ahora mismo, estamos usando nuestra propia imaginación o lo que sea que puedas ver. Ahora, casi tenemos nuestro botón por aquí. Ahora agrega algo de flecha a la baja. Una cosa más se puede ver, que nuestro texto no es visible. Ahora, es un simple truco. A medida que se llena nuestro fondo, hemos movido el relleno a cero por ciento, o estamos usando algún relleno por aquí. No se puede notar es este relleno ahora mismo, pero está ahí. Hemos oscurecido el fondo un poco por debajo este texto y se puede ver que se ve impresionante. Este es el truco que utilicé aquí. Puede que no lo note, pero se puede ver por aquí, cinco por ciento de llenado. En este momento, estoy usando 12 por ciento de llenado. Puedes configurarlo donde te guste, así que me gusta por aquí. Ahora vamos a añadir alguna flecha por aquí. Para eso, vamos a usar nuestra fuente impresionante. PS esta extensión. Si no sabes cómo instalarlo, debes ir y tal por ello, fuente impresionante extensión PS e instalarlo. He hablado de todas estas extensiones y extensiones secretas en mi otro curso, que es el diseño de UI para Photoshop. Entonces lo que vamos a hacer, es flecha, así que tal vez tengamos que apuntar. Éste, es lo que necesitamos. Vamos a dimensionarlo un poco. A lo mejor aquí, muévelo hacia abajo, Control A movimiento, lo en el centro. También necesitamos emparejar esto. Este es un botón. Entonces nombrelo botón. Vamos a usar la superposición de color para esta flecha, vamos a usar el color blanco. Voy a alinear todo en el mismo medio. Ahora puedes ver, ya hemos creado mucha bondad. Ahora, hay pocas cosas más que hice o puedes. No puedes ver ahora mismo, déjame mostrarte. Si miras estas comidas saludables, hay una sombra roja a su alrededor. Entonces en estas jugosas comidas, se puede ver que hay algo de sombra por aquí en estas zonas. Por lo que estos pequeños toques o detalles realmente impactan o crean un impacto muy grande en el usuario. Puede que no lo sientas muy instantáneamente, pero está ahí. Entonces para estas comidas, voy a usar alguna sombra de gota y el color va a ser este leído bf 4,000. También puedes probar el color desde aquí, por aquí, o tal vez por aquí, depende de ti. Al igual que esto. Se puede muestrear un color de la imagen así. Yo lo muestreé desde aquí ahora mismo. Ahora, así es como se puede usar 30 por ciento multiplicar, mantener la distancia misma dispersión al mínimo de dos y tres píxeles. No demasiado, pero depende de tu agrado. Si quieres aumentarlo, puedes aumentarlo. Entonces así es como hemos utilizado. Si quieres añadir otra sombra, vamos a añadir otra sombra. Ahora lo que vamos a hacer, es que vamos a añadir una sombra oscura por aquí y vamos a extenderla así. Al igual que esto. En realidad lo que estamos haciendo es, permítanme mostrarles el efecto. Si traté de ocultar esto, se puede ver el efecto yendo y volviendo. En realidad, lo estamos haciendo más visible por aquí. Entonces si agrego alguna sombra de gota o sombra de gota muy extendida a su alrededor, no vas a sentir que la sombra de gota está ahí, pero hará que tus textos parezcan más nítidos y fáciles de leer. Se puede ver si trato de aumentar la multiplicación de este efecto, se puede sentir así. También voy a aumentar un poco esto. Se ve realmente genial. Cuatro. Pasémoslo a lo normal en lugar de multiplicarnos. Presionar Ok. Ahora se ve genial y creo que casi lo hemos completado, sólo necesitamos uno más por aquí. Entonces en esta capa, esta es nuestra capa principal fresca y jugosa, fresca y jugosa capa y vamos a añadir otra sombra por aquí, soltar sombra así. No va a ser ésta, va a ser ésta roja. Ahora, lo que vamos a hacer, es que vamos a mantenerlo muy pequeño así. La distancia sería de uno o dos píxeles, algo más cercano a esto. Hazlo 35 píxeles, y hazlo dos y éste tres. Entonces así es como uso este efecto. A lo mejor puedes aligerar más este efecto, hacerlo más ligero así. 15, no, 15 es a la luz. 25 es bueno. Si quieres probar, puedes probar algo como esto. Se puede ver cómo se va este efecto. Por lo tanto, mantén este tamaño al mínimo. A lo mejor dos pixeles es bueno. También esta distancia, se puede ver cómo se está moviendo toda la zona arriba y abajo. También manténgalo demasiado mínimo, creo que dos píxeles son más que suficientes, no se puede ir más allá porque mostrará áreas más distorsionadas por aquí en la parte inferior. Entonces esto es bueno. Creo que casi hemos terminado nuestro ejercicio. En el próximo ejercicio, vamos a hacer algunas variaciones y también vamos a volver a adjuntarlo para los finos detalles. Entonces pasemos a la siguiente lección. 49. Ejercicio de diseño de tipografía parte 2: En esta conferencia, vamos a hacer algunos retoques finales cuales son realmente importantes para conseguir la forma real de tu diseño. Casi lo hemos completado todo, pero está mirando hacia fuera debido a algunos problemas. Voy a crear la cuadrícula, no sé por qué no está mostrando mi cuadrícula. ¿ Dónde está mi grilla? Perdón. Yo solo quiero mis líneas de cuadrícula por aquí. Ahora, se puede ver la distancia en la parte superior, este es un problema con muchos nuevos diseñadores, es más que la distancia en la parte inferior. Esto es lo que haciendo un poco nuestro diseño, se puede decir, “No en armonía”. Vamos a usar la cabeza en este juego. Ahora, esta flecha, la voy a mover hacia abajo por 1, 2, 3, 4, está bien, 24 píxeles. Vamos a hacer que este botón se quede aquí dondequiera que esté. Vamos a mover estas dos primeras capas en la parte superior un poco arriba así. A lo mejor así. Ahora, lo siguiente que vas a hacer es seguir escondiéndote y mostrando tus guías de líneas de cuadrícula y ver si ese diseño se ve equilibrado o no. Si quieres moverla hacia abajo o tal vez necesitas moverla hacia arriba, así es como funciona. Vas a moverlo arriba y abajo. También puedes hacer algo como esto. Tan solo ten la mitad de las letras en esto y el resto de las letras así. Puedes esconder esta sombra, sólo tienes que quedarte con la sombra roja. También a veces la gente colorea esto, algún otro color mitad, y el otro está coloreado en algún otro color. También puedes ver por aquí estamos teniendo algún problema como si tuviéramos algún otro elemento entrando dentro de esto. Lo que vamos a hacer es que vamos a duplicar nuestra capa, esta capa de fondo, y vamos a ajustarla. Vamos a subirlo. Tenemos algún problema por aquí porque la imagen original ya está perdida. Hagámoslo un poco más grande así, más cerca y más grande. Sube así, y tenemos nuestras naranjas frescas y jugosas de vuelta en el marco. Ahora, vamos a mover un poco estas comidas saludables por aquí, creo que se ve bien. A lo mejor creo que podemos mover este botón y esta flecha un poco arriba, tal vez 1, 2, 3, 4, 5, 6, 60 píxeles en la parte inferior. También debemos medir este también. Entonces 1,2, 1,2,3,4, tenemos 24 y 60 píxeles por aquí. Aún así, creo que está buscando algo que falta. Entonces voy a retroceder un poco así, y de nuevo vamos a moverlo más arriba, un poco más arriba. Sí, creo que ahora se ve mejor. Si quieres hacerlo más delgado porque este botón está tomando más espacio. Entonces lo vamos a hacer un poco delgado. Ve a esta altura y hazlo 85 pixeles, algo así. Se ve mejor. Necesitamos más enfoque y más energía por aquí en esta área no en este botón, así que hazlo delgado. Además, voy a ver si este texto está alineado con este botón. Ahora bien, creo que casi hemos completado este ejercicio. A lo mejor necesitamos mover este fondo un poco arriba así. Hazlo más grande así. Creo que hemos hecho este ejercicio, casi hemos completado el efecto final. Además, si quieres hacerlo más grande, puedes hacerlo más grande así. Por lo que tiene más efecto como este. Otra cosa que puedes hacer puedes mover estas comidas saludables en la parte superior y puedes mover esta flecha un poco arriba así. A lo mejor podemos mover el botón, lo mejor tenemos 1 y 1, 2 así. Si intentas aumentar el tamaño de este bloque, va a aumentar de tamaño proporcionalmente, así que no te preocupes por ello. Ahora, voy a volver a mi configuración anterior. No quiero que se vea demasiado grande. Creo que deberíamos mover el tamaño de éste un poco bajo. Ahora, se ve más equilibrado. Las comidas saludables son un poco más pequeñas, son 60 píxeles, esto es 96, y esto es, creo 42. Hagámoslo 40, 42 se ve un poco más grande para mi gusto. [ inaudible] y me voy a mover un poco hacia abajo. Simplemente centrándolo visualmente. Ahora, este es nuestro ejercicio final. Estos son realmente importantes, estos toques finales. Ahora por el botón, voy a cambiar el botón, y vamos a usar el otro botón aquí, como lo hicimos antes, y ese fue nuestro botón Eclipse, 190 por 190, y lo voy a colocar sobre aquí. Ahora, vamos a usar la fuente Blenda Script en esto, así que voy a seleccionar guión blenda. Ahora, lo voy a centralizar, por aquí así, y además voy a hacer el tamaño un poco más pequeño, 32 píxeles, escondiendo el botón en la parte inferior. También creo que se ve muy pequeño, así que hazlo un poco más grande. Bloqueemos a tamaño y aumentemos su altura a 200 píxeles así. También vamos a necesitar esta flecha angle-abajo, así que voy a usar esta flecha por aquí, y vamos a moverla hacia arriba este eclipse. Esta es nuestra flecha. Puedes usar una flecha, puedes duplicarla, depende de ti. Ahora viniendo a este script de navegación tenemos mucho seguimiento por aquí, así que mantengámoslos cerca porque es una fuente de script. En las fuentes de script, siempre asegúrate de no usar demasiado seguimiento, va a separar su efecto así. Se ven bien cuando están muy cerca así. Por lo tanto, siempre asegúrese de que esté establecido en 0 en las fuentes de script. Si quieres hacerlo más grande como 36, vale 36 se ve mejor. Déjame mostrarte un truco más por aquí. Si vas a este S, y puedes ver tenemos algunas características más disponibles aquí. Estas se denominan ligaduras o más características en fuente de tipo abierto. Si cambio a este estilo alterno, puedes ver cómo ha sucedido este swash debajo mis recetas S. También puedes darle este mismo efecto a esta E, si seleccionas esto, puedes ver por aquí. Es así como podemos usar efectos alternativos y caracteres alternativos para un mismo tipo de letra. Esta característica no está disponible en todas las tipografías o fuentes, está disponible en algunas de ellas. Por lo que siempre busca estas opciones por aquí. Si uno está habilitado, entonces puedes usarlo. Voy a revertir ahora mismo. A lo mejor me queda esto, no me gusta en tamaño muy pequeño, así que si tienes una fuente de tamaño muy grande puedes usar estos efectos alternativos. En el tamaño pequeño, no recomiendo usar estos swashes de terminaciones florales. Entonces este es nuestro próximo. Podemos duplicar esta flecha y moverla hacia abajo y reducir su opacidad al 50 por ciento o tal vez al 30 por ciento, lo que quieras y como quieras. Creo que una flecha es más que suficiente por aquí, así que usa eso así. Ahora, por qué este color se ve muy bien en esto porque lo he muestreado desde aquí. Por lo que puedes probar el color a partir de aquí. A lo mejor esta canasta de aquí. Entonces así es como creé la segunda alternancia para este diseño, y creo que esto va a terminar mi trabajo aquí. No recomiendo que vamos a agregar otra fuente por aquí. Si de verdad quieres otra fuente, he usado esta. Este es mi estudiante Saqib Ameen. Entonces receta por Saqib Ameen y fuente Estoy usando realmente. Una fuente geométrica y esta también es geométrica, por lo que dos fuentes geométricas una de guión y una de un poco redondeada y divertida. Puedes agregar una fuente geométrica por aquí si quieres, y lo vas a agregar en el último módulo por aquí en esta área. Mantenme actualizado sobre este diseño. Voy a compartir este PSD contigo. Entonces lo voy a guardar en jugosa parte 2 y dime si puedes crear algo como esto. Esto también es un ejercicio, intenta crear algo como esto. También puedes cambiar el título por aquí, como tal vez jugosa licuadora, o algo así. Espero que hayas disfrutado de esta lección, y si te enfrentas a algún problema, o no conoces las teclas de acceso directo, deberías ponerte en contacto conmigo o tomar mi otro curso que es diseño de UI en Photoshop. Cuídate, y pasemos a la siguiente lección. 50. Introducción a los tamaños de la referencia en dispositivos de: En primer lugar hay que entender cuáles son estos tamaños de puntos porque todos los tamaños para el diseño de iPhone están en puntos. Por lo que necesitas entender dos conceptos aquí. Uno es puntos y uno es este 1x, 2x, y 3x, por lo que se llama básicamente densidad de píxeles. Ahora, el iPhone original cuando llegó, tenía pantalla pequeña y la densidad de píxeles era de 1x, lo que significa que si las especificaciones del iPhone son de 320 por 480, significa que lo mismo debe estar en los píxeles. Si ves a continuación, se traduce en píxeles. Entonces 1x significa que es lo mismo, y ¿cuáles son los puntos? Los puntos son básicamente unidades de medición relativas para Android. Tienen diferentes DPs y SPs y para iPhone son puntos. Este es el tamaño de la pantalla, 320 es el ancho, 480 es la altura. Ahora, si vienes al iPhone, que es el iPhone 5, puedes ver 320 ancho es igual y el 568 es la altura. Ahora bien, si ves tamaños reales de píxel, su tamaño real de píxel es el doble de sus puntos. Por lo que 320 multiplicarse por 2 es igual a 640, 568 multiplicado por 2 es igual a 1,136. Ahora un punto es básicamente igual a dos píxeles. Aquí teníamos en el iPhone original, un punto es igual a un píxel, ahora tenemos un punto igual a dos píxeles. Esto continúa hasta llegar a este iPhone 6 plus, que tienen 414 puntos. Por lo que 414 multiplicado por 3, lo que es 3x. Cada punto contiene 3 píxeles, por lo que cada punto es igual a 3 píxeles, por lo que es de 1242 píxeles real, y es muestreado hacia abajo por dispositivo iPhone 6 a 87 por ciento para estar en 1080 por 1920 tamaño de alta definición. Ten en cuenta toda esta relación que tenemos puntos, que en realidad son iPhones propios de unidades de medida relativas. Entonces todo estará en puntos, incluso tu tamaño de texto, que estaremos discutiendo en la próxima conferencia será en puntos. Si estás diseñando para como este tamaño, 320 por 480 en Photoshop, no tienes que cambiar ninguno de tu tamaño de fuente. Debes usar el mismo tamaño de fuente y será de 320 por 480 porque tus píxeles y puntos coinciden. Entonces si intentas diseñar para iPhone 5, entonces tus puntos serán diferentes. También en esto, porque nuestros píxeles, ahora los píxeles tienen una relación diferente en esta pantalla. Aquí hemos duplicado los píxeles, aquí hemos triplicado los píxeles en la misma pantalla. Por lo que antes de diseñar cualquier app para iPhone o cualquier cosa, debes entender toda esta relación entre puntos y píxeles. Aquí hay otra muy buena explicación del tamaño de pantalla por este chico Kyle. Lo encontré en línea. Kyle Larson. Se puede ver aquí es el tamaño real de la pantalla, 5.5 pulgadas, entonces tenemos el tamaño de la pantalla en puntos, multiplican por 3x, y los píxeles renderizados deben ser 1,242 por 2,208 píxeles. Después se muestrea hacia abajo por píxeles físicos, que es píxel del dispositivo, en el dispositivo se van a mostrar 1080 para 1920. Es así como todos estos puntos y puntos se convierten en píxeles reales. Estos son los píxeles que vamos a diseñar para 1,242 por 2,208. Aquí hay una comparación relativa en Photoshop, así que voy a compartir este archivo PSD contigo, así que no te preocupes por ello. Se trata de cuatro mesas de trabajo diferentes. Si no sabes de mesas de trabajo, deberías ver mi otro curso sobre diseño de UI para principiantes. Este es el iPhone original, esto son 320 píxeles. Entonces, justo ahora mismo estoy calculando el ancho. No estoy mostrando ninguna altura. Por lo que 320 píxeles en el iPhone original es de 320 puntos. Entonces este es el tamaño de pantalla. Entonces en el iPhone 5, tenemos 2x, por lo que es casi un doble. Entonces 320 puntos, pero el tamaño de pantalla en nuestro documento de Photoshop es de 640 píxeles de ancho. Entonces tenemos 375 puntos y 750 píxeles de ancho, es un doble. Entonces en el iPhone 6 Plus, este es el iPhone 6 Plus, así que tenemos 1,242 píxeles, que es de menor muestra a 1,080 píxeles. tamaño real del punto es de 414 puntos. Déjame mostrarte un ejemplo en Photoshop sobre cómo vamos a escalar todas estas cosas, todas estas pantallas. En primer lugar vamos a abrir la primera pantalla, iPhone original. El estándar es diseñar usando esta pantalla. Por lo que es 1x. Por lo que siempre diseña en 1x en lugar de 2x o 3x. Entonces voy a dar click aquí. Este es nuestro tablero de arte. Entonces voy a usar Display Compact Display Sensitive, semi-negrita, 32 puntos dice mi rumbo. Este es mi rumbo. Pongamos un texto ficticio por aquí. Pongamos el texto ficticio. Voy a poner 16 puntos por aquí y voy a usar tipo, pegar Lorem Ipsum. Ajustemos su altura de línea a 24. Cambiemos el color para que no se vea tan diferente de nuestro rubro. Ahora hemos montado esta mesa de trabajo, que es nuestro iPhone original. Ahora, cómo vamos a diseñar nuestra segunda pantalla o tercera pantalla, así que ve a este tamaño de imagen. Puedes duplicarlo fácilmente 640 y asegurarte de que todo esté seleccionado así. Esto está en candado. Por lo que estos dos están bloqueados. Se van a aumentar el uno con el otro. La resolución será de 72 píxeles, el mismo remuestreo más click “Ok”. Ahora, esta es nuestra pantalla del iPhone 5, por lo que es 2x. Lo multiplicé a 2x. Puedes ver aquí 640 x 960. Nuestra altura real es diferente, pero no te preocupes por ello en este momento. Ahora, vamos a revisar los tamaños de fuente. Tengo doble clic en esta fuente, es de 32 puntos. Puedes ver Photoshop ha duplicado automáticamente mi tamaño de fuente. Antes eran 16 puntos para mi texto, ahora son 32 puntos. Asegúrese de que así es como está sucediendo el escalado. Si vuelvo al tamaño original y voy a la tercera 3x, y así lo que necesito aquí es 3x significa 320 por, fue algo así como 1,080 tal vez. Eran 1,242. Entonces voy a usar 1,242 y presionar “Ok”. Esta es mi pantalla iPhone 6 plus. Veamos cómo han sido las tallas. Por lo que puedes ver mi tamaño de partida se ha incrementado a 124 puntos y mi tamaño de cubierta es 62. Creo que debería ser 64 en realidad. Ahora el problema está entre esta multiplicación de estos cuatro tamaños. Lo que está pasando aquí es que Photoshop está tratando de multiplicar y ajustar nuestros tamaños de fuente. Asegúrate de que tus tamaños de fuente sean múltiplos de dos. Si se multiplican por tres o algo así como dos o tres, debe haber todo un valor. Ahora, 16 deben ser 3 multiplicados por 3, 16 treses son 48. Supongo que es del tamaño correcto. Entonces para el rubro, debe ser 32 multiplicado por 3 es 96, lo que debe ser 96. Este es nuestro rubro y debe ser de 96 puntos. Algo así. No, no sé por qué Photoshop lo ha escalado de manera diferente, pero hay otra forma de escalar esto. Voy a volver a cambiar todo a mi talla original, que es ésta. Ahora he descargado algunas acciones las cuales están relacionadas con el escalado por acciones de escala B Django. Se puede ver por aquí. Si no sabes instalar las acciones, deberías ver mi otro curso donde he discutido todos los conceptos básicos de Photoshop. Ahora, vamos a escalarlo al 300 por ciento. Yo estoy seleccionando esto y reproducirlo. Es así como se ha escalado al 300 por ciento. Ahora puedes ver los tamaños son perfectos, así que prefiero que uses estas acciones. Incluiré el enlace para escalar hacia arriba o bajar la escala. Entonces vamos a reducirlo así. Ahora, todo esto se trata de puntos y píxeles y cómo vamos a usar diferentes tamaños de tipos y cómo cambian de un tamaño a otro. Es así como estamos multiplicando nuestro tamaño cuando estamos diseñando en qué resolución? Setenta y dos píxeles por pulgada. Hay otra forma que voy a estar discutiendo en las próximas lecciones que cómo ajustar diferentes tamaños de fuente. Estaremos usando 144 y 216 píxeles de resolución por pulgada por aquí. Para esta lección, solo quería que comprendieran cómo funcionan estos píxeles y puntos entre sí y cómo vamos a escalar nuestro diseño 1x, que era, este era diseño real que estaba en 320 x 480. Lo aumentamos en 200 por ciento y 300 por ciento e intentamos usar estas acciones B Django. Estas son realmente grandes acciones. Todo esto se trata de escalar, y tipo de punto, y píxeles y puntos físicos, y renderizar a 2x o 3x Retina o 3x Retina, sea lo que sea. Pasemos a la siguiente lección. 51. Especificaciones de tipografía de IOS: En esta lección, vamos a ver las pautas de interfaz humana de Apple, y estas se denominan Guías de Interfaz Humana de iOS. Vamos a ver sección de tipografía. Puedes leer todo al respecto aquí. Si quieres descargar, puedes ir a Recursos y descargar las fuentes para las personas que están usando Mac, creo que podrían haber instalado ya estas fuentes de San Francisco, por lo que básicamente hay dos fuentes. Una es la UI Text de San Francisco y la pantalla de UI de San Francisco. Display es para encabezados y UI Text es para párrafos y texto de tamaño pequeño. Su especificación es si tienes 19 puntos son más pequeños de lo que deberías usar texto de la interfaz de usuario de San Francisco y si tenemos 20 puntos o más grandes de lo que deberíamos usar fuente de visualización porque están hechos para tamaños de texto más grandes. A continuación te presentamos algunos puntos más sobre las Directrices de iOS. Enfatizar información importante. Ya sabemos usar font-weight, tamaño, y color. Entonces si es posible, usa una sola fuente porque mezclar demasiadas fuentes puede ser un poco descuidado, también puede ralentizar tu aplicación o algo así, así que esta es la sugerencia. Si posiblemente puedes usar esta fuente de San Francisco deberías usarla porque es fuente System. Se cargará fácilmente en tu app. Para los usuarios de Windows debes descargar tu fuente de San Francisco desde aquí. Este es el repositorio GIT. También puedes Google sobre ello luego descargar fuente San Francisco para Windows. Seguramente encontrarás muchos enlaces solo descárgalo e instálalo en tu PC. Aquí hay algunas especificaciones si está utilizando la pantalla de interfaz de usuario de San Francisco, que es para encabezados, aquí hay una línea que es el tamaño de fuente en 2x, 144 P PI. Básicamente está diciendo que a las 2 x, en las pantallas retina para iPhone 55 S, 6, no 6 plus. Estos son tamaños para agregar 2x pantallas Creo que discutimos todo esto en la lección anterior. Estos son los tamaños de fuente en puntos. Esto es seguimiento. El seguimiento es básicamente cuánto espaciado entre letras tenemos en nuestro texto o párrafo. Esto lo ajustaremos usando el seguimiento de photo-shops y estos son algunos tamaños de fuente para nuestros encabezados. Ahora llegando a este texto de la UI de San Francisco, hay muchos tamaños diferentes en puntos. De nuevo, tenemos mucho seguimiento. Se puede ver que cuando el tamaño es muy bajo, seguimiento es muy alto porque el texto muy pequeño no es legible si las letras están muy juntas. A continuación, vamos a diseñar algo como esto para iPhone original tamaño 1 X, 2 X y 3 X. iPhone, iPhone viejo iPhone regional, iPhone 4, supongo, iPhone 5,6 y iPhone 6 Plus. Pasemos a la siguiente lección. 52. Diseño de pantallas de IOS de resolución con Photoshop: Vamos a crear una tabla de arte con todos estos tamaños diferentes. Vamos a crear un nuevo archivo con este tablero de arte. Vamos a utilizar nuestra talla es de 320 por 480. Presiona “Ok”. Ahora vamos a añadir otra pantalla por aquí. Se trata de iPhone cuatro o iPhones antiguos. Entonces vamos a hacer clic en este icono más y vamos a seleccionar el iPhone cinco por aquí y hacer clic en los de aquí. Esta va a ser la pantalla del iPhone 5s. Entonces vamos a sumar otra por aquí. Vamos a crear otro por aquí. Voy a dar click en el iPhone 6 y dar click aquí una vez. Entonces voy a crear otro por aquí, que es el iPhone 6 Plus. Se seleccionó el último. Voy a dar clic en este y voy a presionar o resaltar así. Ahora alejar el zoom y puedes ver estas son todas las pantallas. Vamos a alinearlos. Esta es una línea a ésta seclect ésta. Yo estoy controlando moviendo estos para alinearlos. Entonces, para que todos nuestros tableros de arte estén listos, así que empecemos. Primero voy a empezar con nuestra pantalla más pequeña, que es 1x. Voy a usar mi texto de la UI de San Francisco. Primero voy a dibujar algunos márgenes a su alrededor. Ahora voy a usar photoshops, default, GridLayout y vamos a quitar las columnas. Vamos a usar algunos márgenes en la parte superior, 20, 20, 20 y 20. Este es nuestro marco. Nosotros vamos a diseñar en ella. He escondido todos los demás tableros de arte para que fácilmente podamos diseñar en él. Voy a seleccionar el texto por aquí. Voy a dar clic y arrastrar así. Este es nuestro rubro principal. Nuestro rubro debe ser de 32 píxeles o 32 puntos. Voy a establecer el tamaño de 32 puntos a partir de aquí, aquí tenemos un tamaño de punto diferente es de 32 y 12 puntos de seguimiento. Aquí tengo, vamos a acercar a un 100 por ciento. Ahora nuestro documento está listo, hemos establecido los márgenes a su alrededor. Vamos a utilizar la herramienta de texto y dibujar alguna línea por aquí para conseguir nuestro rumbo. Vamos a usar 32 puntos con la pantalla de la UI de San Francisco. Vamos a usar semi negrita. Voy a escribir por aquí esto, mi gran y largo, largo rumbo, y es sólo por diversión. Voy a cambiar la altura de la línea a 1.5. Creo que si el seguimiento fue 12, supongo que el seguimiento fue de 12 puntos. El seguimiento se establece en 12, y voy a establecer esto en 36 píxeles como altura de mi línea, así que este es mi rumbo. Cambiemos el color a este color azul. Ahora vamos a añadir algo más de texto por aquí. Voy a seleccionar este Lorem Ipsum, Lorem Ipsum. Vamos a utilizar 14 puntos con altura de línea de 21 puntos, y es menos 11 en lineamientos de interfaz humana de San Francisco IS. Vamos a ponerlo a tal vez necesitemos un poco de color opaco, algo así. Ahora vamos a acercar un poco más para que podamos ver el espaciado. un texto más el cual se publica el 6 de mayo de 2016. Voy a seleccionar este t y h, y voy a usar este comando para hacerlo superíndice o subíndice. No sé qué decía esto. Se superíndice. Ahora vamos a cambiar el color para este rubro. Esta fecha. Han cambiado el color a un gris un poco aburrido. Alinémoslo a esta línea, así. Modo, ahora vamos a usar 12 puntos por aquí para la fecha y voy a ver cuáles son las especificaciones para el seguimiento para 12. Aquí vamos a usar zeroover, así. Veamos cómo es éste. Creo que por 14 puntos, es menos 11, por lo que debe ser menos 11. Todo está configurado así que vamos a copiar estos a nuestros otros tableros de arte. Ahora vamos a usar todos estos ajustes y todo este texto, y vamos a duplicarlo a nuestros otros tableros de arte, así que vamos a alejarnos. Voy a arrastrar mi este tablero de arte por aquí, alinearlos con estos. Ahora voy a seleccionar todo el texto, eliminar esta capa vacía, también, ésta en un grupo. Sólo le nombra texto, y voy a usar Alt y arrastrarlo al siguiente. Ocultemos otros, todos los demás tableros de arte así. Basta con acercar este 100 por ciento. Ahora si te acuerdas, estamos en este momento en el iPhone 5. iPhone 5, ahora lo que vamos a hacer es que vamos a dimensionar estos textos y vamos a “controlar T”. Nosotros también vamos a cambiar el ancho de esto. Hagámoslo por ciento y lo vamos a cambiar a 200 por ciento. Es así como vamos a encajar todo por aquí. Así, y si quieres establecer los márgenes, puedes establecer los márgenes generales. Ahora si revisas los tamaños de toda la fuerza, puedes ver que está perfectamente doblado. El 64 puntos y todo lo demás es igual. Si quieres, porque tenemos más altura, puedes arrastrar esto así, y podemos tener más textos por aquí. Es así como vamos a utilizar otras pantallas con esto, por lo que hemos completado dos pantallas. No estoy usando ningún margen, puedes usar los márgenes, puedes usar los márgenes en cada una de estas pantallas. A lo mejor duplicar los márgenes o aumentarlos en 10 píxeles, lo que más te guste. Ahora pasemos al siguiente, que es el iPhone 6. Ahora vamos a volver a copiar esto y vamos a arrastrarlo aquí en nuestra pantalla del iPhone 6. Se puede ver el tamaño de nuestro texto debe ser el mismo. Simplemente tenemos un poco más de tamaño de pantalla en píxeles o tamaño de pantalla física. Simplemente vamos a aumentar nuestros tamaños, tamaños párrafo en el ancho y también en la altura. También podemos ir al encabezamiento y podemos arrastrarlo y hacerlo igual a nuestro párrafo. Ahora tenemos más espacio por aquí para que podamos subirlo. Ahora puedes ver cómo esto va a cambiar en diferentes pantallas porque nuestros tamaños de pantalla y dimensiones de pantalla, tenemos más espacio en algunas pantallas y algunas en algún esquema tenemos menos espacio. Mantengamos todo igual. Trata de copiar todas las distancias entre diferentes elementos igual. Si quieres aplicar ritmo vertical, vas a aplicar porque si trato de aplicar verticalmente entonces no, creo que esta conferencia tendrá 30 minutos de duración. No quiero que sea tan largo. Aquí tenemos la última pantalla, que es el iPhone 6 plus. Ahora voy a volver a seleccionar esto y voy a presionar “Alt” y arrastrarlo aquí así. Ahora, este es nuestro iPhone 6 Plus. Voy a renombrar este tablero de arte. Ahora aquí se pueden ver estos rubros y todo se ve un poco más pequeño, por lo que vamos a incrementarlo al 150 por ciento. ¿ Por qué 150 por ciento? Porque éste es 200 y éste es 300 por ciento. Vamos a incrementarlo para multiplicarse al 150 por ciento, así que cambie el ancho a 150. Espera un minuto. En primer lugar, asegúrate de tener “control T” y presiona este candado porque queremos que todo se incremente en proporción. Hagámoslo 150 por ciento. Es así como nuestro texto va a caber en la pantalla, pantalla iPhone 6 Plus. Ahora, puedes ajustar todo en consecuencia, si quieres ajustar el encabezado y el espaciado, puedes ajustarlo así. Todas nuestras pantallas están listas en este momento se puede ver cómo utilicé todas estas técnicas para copiar todo. Hicimos un simple cálculo de multiplicar nuestras dimensiones y resoluciones de píxeles de iPhone. Se nos ha ocurrido todo este diseño. Por una hora siguiente. Todo fue igual para 2x. Se multiplicó por dos, aumentamos el tamaño entonces esto también es 2x, por lo que no hay diferencia de tamaño. Esto es 3x. Multiplicamos este 2x con 1.5 para obtener este tamaño 3x. También puedes copiar este texto y arrastrarlo hasta aquí y multiplicarlo con 300 por ciento desplazarlo al 300 por ciento. Te dará el mismo efecto. Ahora si compruebas el tamaño de la fuente. Este debe de ser 96. Este debería de ser 64. Este debe de ser 32. Si vamos a seleccionar este, éste es el 32. él es cómo usamos los tamaños de texto porque un desarrollador de aplicaciones para iOS, va a necesitar las distancias y tamaños de texto en puntos. Le vas a dar algo como esto. Altura de línea, esto puntos y tamaño de fuente, fuente. Has usado este color, has usado este. espaciamiento entre elementos es así. Es así como vas a diseñar dispositivos iOS y usar la tipografía en dispositivos iOS. Todo esto se trata de esta práctica de iOS en esta lección, hemos creado cuatro pantallas diferentes iPhone 6 plus iPhone 5 y iPhone cuatro. Ahí hay un reto que quiero que hagas diseñar algo parecido a éste. Trató de diseñar, crear cuatro tableros de arte como este. Trata de replicar tu diseño en todos ellos. Muéstrame a mí. Puedes publicarlo en las preguntas. Haz una pregunta, muéstrame tu trabajo y trataré de mejorarlo. Si quieres aplicar el ritmo vertical, vas a aplicar el ritmo vertical, puedes establecer la línea base y todo. Incluso si quieres diseñar solo una pantalla, entonces puedes seleccionar solo una pantalla y diseñarla correctamente. Solo quería asegurarme de que entiendas que si tienes que diseñar app para iOS en diferentes tamaños, cómo vas a manejarla. Esto es lo más difícil en, mientras estás diseñando tu app para iOS o aplicación para Android o algo similar a esto. Pasemos a la siguiente lección. 53. Pregunta de estudiantes sobre resoluciones: de hoy, uno de mis alumnos me preguntó sobre la solución de iOS y fue una pregunta realmente buena. Nunca pensé en ello que esto va a estar viniendo de uno de mis alumnos. Déjame mostrarte la pregunta. Preguntó eso por qué estás diseñando a una x, que es de 32 píxeles en un iOS con las cuatro especificaciones a 2x. Básicamente estoy usando 32 puntos aquí y él está preguntando eso por qué estoy usando 32 puntos en lugar de 16 puntos en 1x. Entonces para despejar todo este problema o concepto, creo que los diseñadores deberíamos experimentar primero. Siempre aprendemos con experimentación. Lo que voy a hacer es mostrarles en Photoshop que cómo vamos a abordar esto y cómo entender todo este lío. Empecemos. Voy a abrir un nuevo archivo de Photoshop. Archivo y Nuevo. Lo que vamos a hacer esta vez es que vamos a seleccionar mesa de trabajo desde aquí y vamos a seleccionar el iPhone 6 o tal vez el iPhone 5, que son básicamente dispositivos de alta resolución o 2x. Ahora, lo que voy a hacer en lugar de usar la solución de 72 puntos, que es nuestro estándar, voy a usar 144. Básicamente lo que hice es cambiar este 144 a 2x. Ahora mi documento ya es retina. Es 2x, así que voy a presionar “Ok”. Esta es nuestra mesa de trabajo. Ahora, para que se resuelva este problema, voy a seleccionar mi tamaño de cabecera a 32. Se puede ver por aquí esta es una de la escala de los dispositivos iOS. ¿ Cuál es tu juego? Tomemos algo como éste y lo voy a alinear en el medio. Vamos a cambiarlo a tamaño de punto, convertirlo a tamaño de punto para alinearlo mejor porque es una sola línea. Ahora se puede ver que es de 32 puntos a 2x pantallas. Si vas a imagen, tamaño de imagen, puedes ver, solo ignora estas pulgadas. Nuestra resolución es básicamente de 144 píxeles por pulgada. Ahora, lo que vamos a hacer es desmarcar esta remuestra y vamos a volver a básicamente nuestra solución 1x que es de 72 píxeles por pulgada. Esto es solo para despejar tu mente de que cómo vamos usando nuestro tamaño de punto. Básicamente, nuestros desarrolladores deberían estar usando este tamaño de fuente iOS de 32 puntos. Pero si bien estamos diseñando solo por simplicidad, normalmente usamos 72 documentos de píxeles de resolución en todas nuestras diferentes pantallas. Solo presiona “Ok”. Si ahora seleccionas tu fuente, puedes ver que está desplazada a 64 puntos. ¿Por qué es eso? Porque volvimos de 2x a 1x resolución. Ahora tenemos menos píxeles por pulgada, eso nuestro tamaño de fuente se acaba de expandir y porque en las pantallas más grandes, esto se va a contratar. En una pantalla más grande, este 64 será de 32 puntos. ¿ Por qué? Porque tenemos más píxeles que mostrar por pulgada. Por lo que se presionan más píxeles unos contra otros en menos espacio en las pantallas de retina. Esto va a ser, se puede decir comprimido a 32 puntos. Es por eso que en 72 píxeles, el tamaño completo se agranda. Se puede ver por aquí así es como se ha ampliado esto. A veces cuando diseñas, como él preguntó eso por qué usé 32 puntos en esta pantalla porque si trato de usar, puedes ver 64 por aquí, usemos 64, este es mi rumbo, solo cabeza es suficiente. Creo que aquí no podemos arreglarlo. Si tratamos de usar algo como esto y luego cambiamos nuestro tamaño de imagen a 144. Cambiemos los valores de píxeles a donde está el píxel. Yo lo voy a remuestrear. Tengamos los píxeles. Creo que fueron 750, alrededor de 750 o 760 algo así. Veamos el tamaño de nuestro iPhone 5 porque no los recuerdo. 640 por 1136. Voy a cambiar el ancho por aquí a 640. Vamos a tener remuestres por aquí, 144 y píxeles. Ya está desplazado a 640, así que acabo de cambiar la resolución y se puede ver que es 640. Si quieres cambiar la altura, puedes cambiar la altura usando 1140 por aquí, así. Creo que deberías quedarte así, 144. Estamos cambiando hacia arriba en nuestra resolución así que presiona “Ok”. Ahora se puede ver esto ya se ha desplazado a 64. No cambia de tamaño. Esto es muy extraño. Siempre intenta usar el tamaño de fuente es decir, se puede decir realista, y creo que 64 es demasiado grande por aquí. A lo mejor necesitamos 32 puntos. Este es, creo, un buen tamaño de partida. Probemos 32 con nuestra pantalla 1x así. Este es mi tamaño de partida. Voy a usar 32 puntos. Dejémoslo así ahora mismo. No te preocupes por ello. En el tamaño de la imagen, voy a cambiar hasta 144. Veamos qué va a hacer. Nuevamente son 32 puntos. Básicamente lo que significa es que a 1x, si estás usando 32 puntos , van a ser 32 puntos. Si cambias el tamaño de tu imagen a 2x. En este ejemplo, como pueden ver, cambié hasta 144 resolución en la que están las especificaciones de iOS y nuestro tamaño de fuente desplazado fue el mismo. Este es el verdadero problema, el estudiante que se llama Antonella, no sé que sea un él o ella, pero Antonella me preguntó eso, ¿por qué estoy usando 32 puntos en una pantalla 1x? Esta es la respuesta. Repitámoslo otra vez. Voy a usar 320, 480, 72 píxeles. Esta es la pantalla 1x iPhone 4. Presiona “Ok”, y voy a usar 32 puntos por aquí para mi tamaño de pantalla y hola Antonella. ¿ Cuál era su nombre? Antonella. Usemos auto por aquí. Ahora puedes ver que estamos usando estos ajustes, 320, 480, resolución de 72 píxeles, y estoy usando 32 puntos. Ahora vamos a cambiar hasta 144 resolución y presionar “Ok”, básicamente es pantalla Retina a 2x. Presiona bien y si seleccionas este tamaño, puedes ver que sigue siendo 32 puntos porque cambiamos nuestra resolución. Es así como vamos a decirle a nuestros desarrolladores que estamos usando 32 puntos para el tamaño. En mi ejemplo anterior, no cambiaba tamaños como este, estábamos usando solo 72 píxeles de resolución. Estábamos usando como 32 por aquí. Permítanme mostrarles este ejemplo. Esto es rumbo. Si tratamos de crear una nueva mesa de trabajo por aquí, si vamos a esta mesa de trabajo y tratamos de crear una nueva por aquí con este tamaño, esto es básicamente tamaño iPhone 6, y creo que es una mediana. Vamos a borrarlo, iPhone 5. Vamos a crear este iPhone 5 por aquí y presione este plus y haga clic en éste por aquí. Este es el iPhone 5 y es una pantalla de preparación. Si tratamos de arrastrarlo por aquí, se puede ver que es básicamente 32 puntos. Lo que vamos a hacer es que lo vamos a multiplicar con 2 y van a ser 64. Este es básicamente el tamaño real. Si lo movemos de nuevo aquí en esta mesa de trabajo , deberían ser 32 puntos. Aquí está la regla de que si estás diseñando con los 72 píxeles por pulgada, necesitas multiplicar tu tamaño de fuente en pantallas más grandes como retina y pantalla 3x, que es iPhone 6 plus. En 1x, estarás usando este tamaño de punto. Sea lo que sea que uses en tu pantalla 1x, mientras diseñas con esta resolución de 72 píxeles, este será tu tamaño real, vas a decirle a tus desarrolladores que estamos usando 32 puntos, pantalla, tamaño de encabezado, y por la facilidad de trabajo estábamos diseñando a 72 píxeles por pulgada, lo que no necesitamos desplazar píxeles a todas partes ni resolución. Todos están en la misma resolución. Este tamaño de fuente estaba en realidad encendido, este era para 144 así que lo multiplicamos por dos porque estamos diseñando a 72, que es la mitad de esta revolución. Nuestras especificaciones estaban en 144, pero estamos a la mitad, así que lo hemos multiplicado con dos para llegar por igual a nuestras especificaciones. Creo que esto tiene tu mente clara sobre esta resolución y este desorden de pantallas. Creo que eso es todo. Si alguien más tiene algún problema como este, estoy dispuesto a crear una nueva conferencia o video para eso. No trates de calificar mal mi curso como dos o tres estrellas. En primer lugar, hacer preguntas. He visto a muchos estudiantes que hacen preguntas, tienen muchas grandes mejoras en sus diseños, y a los estudiantes que no hacen preguntas y a veces leen mal, y luego les mandé un mensaje que cuál era la razón y sorprendentemente , dicen: “Tuvimos este problema”. Yo digo: “¿Por qué no me preguntaste primero este problema antes de valorar mal mi curso y darme un infarto?” Antes de valorar mal mi curso o de frustrarme, primero debes hacerme preguntas. Siempre trato de responder lo antes posible, y si es necesario, voy a crear un nuevo video para ti. Entonces cuídate y pasemos a la siguiente lección. 54. Espezar tu Photsshop a Iphone: En esta lección, te voy a mostrar cómo conectar tu Photoshop con tu dispositivo iOS para ver esta pizarra de arte en tu iPhone. En primer lugar vas a ir a esta edición y conexiones remotas. Lo que estamos liderando es este nombre de servicio del servidor. Se parte por escrito así como servidor de Photoshop y hacer alguna contraseña por aquí. Debe tener seis caracteres de longitud. No lo hagas muy complejo, solo uno simple. Entonces vas a necesitar esta dirección IP. Copia esto o ten esto en tu mente que vas a necesitar esta contraseña y esta dirección IP y el nombre del servicio. Empecemos. Ahora voy a cambiar a la pantalla de mi iPhone. La app que estoy usando en este momento es ésta. Se trata de iTunes Store, Apple Store, Ps play para Photoshop. Te voy a mostrar esta app, y también te voy a mostrar este dispositivo de Photoshop probada aplicación de vista previa. Estas son dos apps que puedes usar para conectar tu dispositivo iOS con tu Photoshop y ver tus diseños. Cambiemos a la pantalla del iPhone. Esta es mi pantalla de iPhone, y como puedes ver en la tercera fila, tengo esta app Ps play. puede dar click en él y se puede ver que ya se ha conectado. Entonces voy a volver atrás y mostrarte cómo vas a conectarlo con tu iPhone. Está mostrando conexiones descubiertas y algunas conexiones guardadas. Entonces lo más probable es que te vayas con esto descubierto, se va a conectar con él. Se requerirá la dirección IP o la contraseña, pero es necesario copiarla y pegarla por aquí. Voy a añadir nuevo. Por alguna razón en mi computadora, no me está mostrando. No me está dejando conectarme a este servidor iPhone con nuevas conexiones, tal vez sea mi firewall. Entonces si tienes este tipo de problemas 79.1, y aquí vas a ingresar tu contraseña, la mía era microsoft. Cuando hayas ingresado toda esta información, pulsa Ok y se conectará a tu pantalla. Ahora mismo ya tengo una conexión, así que voy a usar esta. puede ver que se está actualizando y mostrándome la pantalla. Si tocas una vez puedes ver que todas estas funciones se han ido. Se puede tomar una captura de pantalla, expandirla y también hay alguna esta opción de 101, una por una relación, creo que ratio pantalla. También puedes actualizarlo si quieres. No uso esta app para tomar capturas de pantalla ni hacer otras cosas. Simplemente lo uso para, se puede decir ver mi diseño por aquí y para ver cuántos espacios necesito, o tal vez necesito mover algún elemento por aquí o por allá. Así es como uso esta app. Déjame mostrarte otra app, que va a ser nuestra app de Photoshop, Adobe Photoshop, que es esta última sobre vista previa. Es necesario iniciar sesión en el servidor de Photoshop, que es básicamente Photoshop CC. Se puede ver que ya está conectado. Me está mostrando el tablero de arte uno. Por lo que está mostrando el nombre del tablero de arte dos. Es así como se conecta esta app. Normalmente solo necesitas iniciar sesión en tu cuenta de Adobe, tu cuenta de Adobe CC, y se conectará a tu servidor de Photoshop. No recuerdo cómo lo conecté y no me está mostrando ninguna opción. Se puede ver por aquí. Simplemente me está dando este tablero de arte de iPhone cinco y documento Lienzo, este. Estos son dos métodos que vas a conectar tu iPhone con tu Photoshop. Asegúrate de que tu Wi-Fi esté funcionando porque usa la conexión Wi-Fi para conectarte a este servidor. Por lo que esto resume esta conferencia sobre cómo puedes conectar tus dispositivos con tus iPhones o dispositivos Android. De alguna manera en mis teléfonos Android debido a la configuración de mi firewall, creo que no me está dejando conectarme al servidor de Photoshop. Entonces solo me quedé con esta opción para mostrarte en los dispositivos iOS. Entonces creo que va a hacer el truco. Entonces si tienes algún problema o te encuentras con algún problema, solo avísame y asegúrate de no tener ningún firewall. Es así como usas diferentes apps para conectarte a tu iPhone y mostrar esas pantallas. Esto termina con estas conferencias, y pasemos a la siguiente conferencia. 55. Tipografía de Android: Ahora estás diseñando para el sistema Android. Por lo que hay dos cosas que debes entender. Qué es DPI y qué es SP que es la unidad de escalado de cuatro tamaños para sistemas Android, que se llama los píxeles independientes de escala o píxeles escalables como éste se puede ver por aquí. Ahora bien, si vas a este material, estilos tipográficos de Google.com, puedes ver que han presentado todo y no de una manera como lo hace Apple, pero creo que es mejor que ellos porque está mostrando muchas opciones diferentes para display 4,3 ,2,1. Aquí tienen algunos tipos de escala por aquí. Aquí se puede ver la escala tipográfica 12, 14 ,16 ,20 y 34. Para que puedas usar todos estos, creo que tienen dos o algunas veces huecos de cuatro. Aquí tienen pocos ejemplos como titular display 2, 3, 4, subtítulo , cuerpo 2, cuerpo 1, botón de subtítulo. Están usando 12sp para esto. También están mencionando todos los tamaños por aquí, 112sp, 56, 45. Esta es una escala muy agradable. Tiene mucho, se puede decir variaciones ilimitadas. Aquí hay pocas pantallas que te están mostrando por ejemplo, cómo vamos a utilizar todos los tamaños interpretados en nuestro Photoshop mientras diseñamos para Android. Ahora, hay dos cosas. Una es, ¿qué es el DPI? DPI es básicamente las resoluciones de diferentes tamaños de pantallas que son compatibles con Google. Estos son LDPI bajo, DPI, DPI medio, alto, extra alto, extra alto, extra alto, extra extra extra alto DPI extra alto. A diferencia de Apple, tienen muchas resoluciones, 1.5x, 2.0x, 3x, 4x, tamaño original y 0.75x lo cual está muy bien. Ahora cómo se calculan estos, si puedes ir a esta pequeña herramienta, puedes ver por aquí, es calculadora muy sencilla para calcular diferentes tamaños y escalas. Ahora si cambias a este MDPI y pones una pulgada por aquí, básicamente es una pulgada en la pantalla y contiene 160 píxeles, que es igual a este MDPI que también es de 160. Por lo que en DPI medio, su resolución de pantalla y sus tamaños de píxeles se emparejan. Por lo que estaremos diseñando usando este tamaño de pantalla MDPI. No te preocupes por este 160 ahora mismo. De acuerdo, ahora los píxeles independientes de escala también son 160 por lo que nuestras todas las unidades en este tamaño de pantalla serán iguales a los valores reales. También se puede ver densidad pixel independiente también son 160. Todo lo demás es 160, 160 y 160. Ahora, si vas a este HDPI, puedes ver ahora el tamaño de pantalla dentro de esta pulgada es de 240 píxeles. Entonces solo trata de entender este concepto en una pulgada de una pantalla ahora tenemos empaquetados 240 píxeles. Entonces todas las demás cosas han cambiado, pero los píxeles independientes escalables son los mismos y los píxeles independientes de densidad son los mismos porque son independientes de los valores de píxel. Entonces para evitar confusiones, vamos a diseñar para este MDPI y podemos extraer nuestros recursos y todo. Podemos decirle a nuestros codificadores que este es el tamaño que he usado, no necesitamos calcular nada. Ahora por cuatro tamaños, estamos usando este SP. Por lo que nuestros codificadores o desarrolladores de Android, estarán necesitando la escala de cuatro o cuatro escalas tipográficas en estos tamaños. 56. Desanimación para varios tamaños de pantalla de Android: Diseñemos una pantalla simple, tal vez algo muy sencillo. Ahora vamos a empezar con un archivo de 320 por 480 de altura. Puedes aumentar la altura, tal vez 600, y presionar “Ok”. Deja la resolución en 72 porque nuestros píxeles independientes de la escala van a ser del mismo tamaño. Este es el tamaño que vamos a desarrollar, que es MDPI. También puedes cambiarlo a 40 si quieres, pero 320 por 600 me parece bien. Presiona “Ok”, no colores el mío este documento, y este es nuestro tamaño. Vamos a acercar un poco. Ahora, para el rubro, vamos a utilizar la fuente de Google, que es Roboto. Usemos este Roboto audaz tal vez, y 56 punto. Creo que tienen 56 ahí dentro. Voy a usar 56 por aquí. Este es un rumbo muy grande para nosotros y vamos a usar 56, mismo. Dejémoslo así a Auto, o tal vez podamos usar 56 por aquí, 56. No han especificado ningún rastreo, así que vamos a usar nuestros propios ojos y sensación de tripa. Básicamente tripa sintiéndose o tal vez podamos usar cero por aquí, tal vez han desarrollado una fuente como esa. Esto es rumbo y luego vamos a ir al subrubro. subrubro debe ser algo 24 titular, 24 sp, por lo que este va a ser 24. El cálculo es muy fácil así. Vamos a subir esto. Vamos a usar no Bold pero tal vez Light fuente para esta. Ahora tal vez vamos a usar así este color gris. Acerquémoslo a esto. Aleja el zoom para ver cómo se va a quedar. We_can _do _it, este es nuestro gran rumbo y también podemos decir Sí, solo para asegurarnos de que se vea bien. Este es nuestro gran encabezado y luego vamos a pegar algo de texto aquí así. Vamos a utilizar tipo Lorem Ipsum. El tamaño que vamos a usar es que vamos a 40 sp, por lo que 14 sp es para cuerpo 14 puntos. Usemos 18 puntos para el líder, así. mejor, supongo que quizá más de 18 es bueno, 20 es bueno. Hemos establecido nuestro líder todo en este tamaño de pantalla. Para este MDPI, son cuatro MDPI. Todos los tamaños son iguales. A lo mejor podemos reducir este 56 a 45 porque 56 se ve demasiado grande. Este es 56, volvamos a moverlo de nuevo a 45. Sí, creo que es mejor, 45 y 45. Mantenlo simple así, tal vez el rojo sea bueno. Vamos a moverlo un poco más abajo así. Mueve el texto más en la parte inferior así. Cambiemos el color para este por este color negruzco oscuro. Este es nuestro tablero de arte. Vamos a mover el rumbo en la parte superior, tal vez así. Se ve bien. Ahora hemos movido nuestro rubro, subpartida, y todo de acuerdo a la escala de esta escala tipográfica por diseño de materiales, Google Material Design. Creo que eso es todo. Si quieres diseñar para una pantalla más grande, creo que debes ajustar tus tamaños de fuente y multiplicarlos con las resoluciones respectivas. A ver si tienen algunas tallas por aquí. Se trata de HDPI que es 800 por 480, así que diseñemos para este. O tal vez podamos aumentar nuestro tamaño de imagen a ese 150. Creo que son 150. Va a ser 150 por 150, y así es como hemos ido al otro tamaño de pantalla. Ahora si vas a esto, puedes ver los píxeles. El alto es de 900, y el ancho es de 480. Es muy fácil cambiar de una a otra. Si quieres ir al siguiente, también puedes ir a este 720. Cambia 720 en el ancho por aquí, así, y puedes ver así es como nos estamos desplazando hacia las siguientes pantallas XXHDPI, 960 por 1600. Básicamente es el ancho, no te preocupes por la altura. Vamos a cambiar a 960. Ahora puedes ver que todos nuestros tamaños de texto también están aumentando con él. No debemos preocuparnos porque tenemos dimensionamiento de puntos en nuestra configuración de Photoshop. Cómo puedes configurarlo, puedes ir a esta Preferencias, y ir a Unidades y reglas, y establecer tu Tipo en Puntos. Es una buena práctica configurarlo en Type to Points por tu culpa cuando estás diseñando para pantallas móviles. Es así como hemos cambiado a diferentes tamaños de pantalla y esto es del 100 por ciento. Se puede ver cómo se ve muy bonito. Es fuente Roboto. Puedes usar otras variaciones de Roboto si quieres, pero ahora mismo estoy pegándome solo con una fuente Roboto. Todo esto se trata de DPI y sps, píxeles escalables, y diferentes tamaños. Deberías darle a tus desarrolladores estos tamaños. Ahora mismo lo tenemos, supongo que éste está bien. Creo que debería volver a mi formato original. Da un paso atrás, retrocede, retrocede. No está funcionando así. A lo mejor deberíamos volver a cambiar el tamaño de la imagen a 320, y así es como básicamente se presenta nuestro tamaño real del texto. Veamos cuál fue eso. Son 14 puntos, después 24 puntos o básicamente 45 puntos. Vamos a decirles que se usan 45, 24, y 14 sp. Todo esto se trata de la tipografía en tus Aplicaciones Android y teléfonos móviles. Te he dicho cómo hacer eso también en Photoshop, y cómo atender a diferentes tamaños de pantalla. Esto es todo. Si se me ocurre algo más o necesitas mi ayuda, siempre hazme preguntas. Creo que ahora deberíamos pasar a la siguiente conferencia. 57. Para desarrolladores → usar Google Fonts: La primera y más importante opción para cada desarrollador es usar Google Fonts. Incluso a los diseñadores les encanta usarlos porque pueden hospedarse fácilmente y pueden ser más fáciles de usar para los diseñadores y para los desarrolladores. Solo necesitas incrustarlos con una sola línea de código y ya estás listo para ir en este momento hay 804 para familias que son totalmente gratuitas y alojadas para ti. Hosted significa que están en otro servidor en los servidores de Google. Además, el problema con estas Fuentes de Google es la calidad de la fuente. A veces ese Kerning está apagado, a veces problemas antialiasing. Anti-aliasing significa que los bordes podrían estar dentados y no son lisos. Esto sucede con muchas fuentes de Google. En ocasiones la mayoría de ellos son de buena calidad, pero algunos de ellos, tienen bordes dentados. Son pocas las cosas buenas de Google Fonts. Pasemos a Google Fonts, ahora, hay una cosa más, puedes seleccionar fácilmente una familia y si vas a personalizarla, solo necesitas incrustar esta línea de código y estás listo para ir a usar esta familia. Este es el código también te muestra el tiempo de carga, que es rápido, si intentas personalizarlo, solo tiene uno [inaudible] en este momento. Probemos otro, así, uno con esto, vamos a seleccionar algunos más. Se puede ver que muestra cuál es el tiempo de carga será. Incluso si eres diseñador, debes elegir tus fuentes fácilmente desde este Google New Fonts Preview. Una cosa más es que si intentas seleccionar este ejemplar de vista, realmente puedes ver muchas cosas grandiosas por aquí, como todos los diferentes estilos, por lo que diferentes estilos por aquí entonces tenemos rodamiento, lo cual es muy bonito. Por qué molestarse en pasar horas, tratar de igualar diferentes fuentes. ¿ Por qué no deberíamos usar solo formularios integrados o ya emparejados, elegir uno que te guste por aquí o que esté realmente más cerca de tus proyectos. Intenta usar este también te está mostrando uso cuánto se usa en diferentes países o áreas diferentes, y este es el número de sitios web que está sirviendo. Es una gran herramienta para empezar, copiar una línea de código, conseguir baring desde aquí. Hay muchas cosas buenas al respecto. Pero aun así puedes ver, si ves algunas de las fuentes, podrían tener, algunos de los bordes dentados como puedes ver por aquí, esto no es muy suave en mi pantalla. También se puede ver u escuchar Merriweather Sans, se puede ver entre A y M oscurecimiento está un poco apagado. Entonces estas son pocas cosas, y aún así creo que es una muy buena opción para empezar con Google Fonts porque a los desarrolladores les va a encantar, porque es muy fácil para ellos usarlo. Solo tienes que copiar una línea de código y están listos para salir, si eres desarrollador, debes comunicarte con tu diseñador, si eres diseñador, debes comunicarte con tu desarrollador para empezar y saber qué son las posibilidades. Pasemos a la siguiente lección. 58. Para desarrolladores → usar fuentes Premium: Ahora hablemos de fuentes premium y ¿por qué deberíamos comprar estas fuentes premium y cuáles son las gemas escondidas en ellas? Ahora, lo primero es de gran calidad, ¿de acuerdo? Son realmente geniales. Tienen gran kerning. Están diseñados por grandes tipógrafos y empresas tipográficas, fundiciones tipo. Kerning es genial, y tienen muchos vínculos y pocas opciones extra. El antialiasing es bueno. No tienen bordes dentados, sus fuentes web son geniales. Ahora el borde más grande que tienes es look personalizado, ¿de acuerdo? Ahora tienes una marca, tienes un equipo en tu mente así que si usas una fuente premium, va a dar mucho impacto en tus espectadores y usuarios, ¿de acuerdo? Elige sabiamente, puedes comprar fuentes premium y puedes usarlas en tu branding, en tus sitios web, en tus aplicaciones móviles en todas partes. Los clientes van a reconocer instantáneamente su firma o empresa o producto desde su tipo, ¿de acuerdo? Ahora hay algunos contras asociados a esto. El problema que tenemos es que son caros. Algunas fuentes si trataste de comprarlas, son 700 dólares toda la familia por lo que es muy costoso. Incluso, me gustan pocos teléfonos que son cuatro o 500 dólares y a veces pienso que alguien debería darme esas fuentes porque no puedo comprarlas. De acuerdo, entonces la otra cosa es que podrían no estar alojados de forma gratuita, ¿de acuerdo? Si compras un tipo de letra de este sitio, myfonts.com, este es mi sitio favorito. Se puede ver por aquí, estoy logueado. He comprado muchas fuentes desde aquí, muchas familias se pueden ver por aquí. Ahora el beneficio de este tipo de sitios es que puedes encontrar o igualar a tu equipo exactamente lo que buscas. Se puede ver por aquí diferentes letras, hay formas, ¿de acuerdo? Ahí usos que puedes ver por aquí. Britannica, luego cuentacuentos, ¿de acuerdo? Hay millones de temas. Podrás buscar grandes artistas, puedes buscar ofertas especiales. Podrás comprarlos con algún descuento. Además, puedes buscar algunas fuentes gratuitas si quieres. De verdad te sugiero que debas suscribirte en este sitio web y te enviarán algunas fuentes gratuitas. Si quieres buscar algunas fuentes gratis puedes tal por aquí y añadirlas a tu carrito y utilizarlas en la web o en tus diseños. Es así como tengo mucha colección de fuentes premium gratuitas. De todos modos, este es el sitio que realmente me encanta. También hay muchas ideas de diseño. Si miras estas tipografías y su presentación, también hay muchas ideas, así que compra algunas buenas fuentes de aquí y cómpralas sabiamente. A lo mejor necesitas solo uno o dos o tres estilos no toda la familia de fuentes. Así es como empiezas a utilizar fuentes premium. Ahí hay otro que es Typekit, que está relacionado con esta licencia de photo-shop. También puedes comprar Typekit, es sitio web basado en suscripciones con muchas fuentes. No sé que sea typekit.com o lo que sea, pero creo que es de la compañía de Adobe y ahí está. Creo que estoy desconectado de ella, supongo. De todos modos, ahora estoy conectado. De acuerdo, ahora puedes ver por aquí hay muchas clasificaciones puedes seleccionar a cualquiera por aquí y como mono escrito a mano, losas raspadas decorativas si esto es muy bueno y puedes agregarlas. Puedes usar estas fuentes en tu barra web, aplicaciones móviles o incluso en tus diseños dentro de Photoshop. Tengo en este momento, supongo algunas 276 fuentes y si operas a otro plan, podrías estar teniendo muchas más opciones. Esta es otra forma. Estas fuentes están alojadas en Adobe Typekit por lo que también funcionan como Google, supongo. Es así como hay diferentes opciones para usar fuentes premium. Podría haber más sitios web como este. Tenemos este Adobe Typekit. Aquí es donde compras diferentes fuentes y fuentes web. De acuerdo, entonces puedes ver por aquí fuentes web, aunque vayas a alguna fuente como esta. Se pueden ver sus fuentes web de inmediato. Si haces click por aquí, puedes ver, si haces click por aquí, puedes ver cómo se va a quedar esta fuente en la web, aquí está y puedes ver por aquí. Si quieres comprar, puedes ver en las opciones de compra. Contamos con fuentes de escritorio y web, por lo que siempre debes hacer clic en fuente web si lo vas a usar en la web, si lo vas a usar en app o publicación como libro o algo así, entonces necesitas comprar más licencias. Todo esto se trata de fuentes premium y sus diferentes métodos de compra basados en suscripción o necesitas comprar toda la fuente sus licencias por lo que podría haber conseguido una buena comprensión y pasemos a la siguiente lección. 59. Para desarrolladores → tamaño de fuentes de CSS: Cuando se trata de dimensionar fuentes web unidades CSS, en realidad hay dos categorías. Una es unidades absolutas como píxeles que solíamos usarlos mucho en el pasado, tal vez hace cuatro o cinco años. Ahora, hay otra categoría que es relativa. En cuanto esto es sensible y adaptable, Diseño Web se está volviendo popular y es ahora mismo en estos días. Es realmente esencial desarrollar sitios web que tengan unidades mayores de píxeles relativos. Tenemos; em, rem vw y%. Pixel se usa muy menos en estos días. A lo mejor en el cuerpo o algo así en la fuente base, tal vez necesitemos usar esto. De lo contrario, hay muy menos uso para los valores de píxel, Ahora, primero vamos a ver que em y% son ambos relativos a los padres. En realidad son similares entre sí. Si tienen div padre y luego otro div padre, entonces puede crear algunos problemas. Te lo explicaré en un video de ejercicio de codificación, así que no te preocupes si no entiendes en este momento. vw significa ancho de ventana gráfica por lo que es relativo a la ventana gráfica, que es la ventana del navegador que nuestro usuario tiene abierta. Es muy sensible si intentas apretar el tamaño de tu ventana gráfica o de tu navegador, tu encabezado o fuente también se exprimirá. Desplazará su tamaño por lo que es relativo a la ventana gráfica. Veremos su ejemplo con el código. Yo sólo voy a darles una breve visión general. Ahora, el último es rem. Rem es relativo al tamaño de fuente del cuerpo base. Si has establecido el tamaño de fuente de tu cuerpo en 18 píxeles, entonces un rem será igual a 18 pixel. No depende de ningún padre Div ni nada. Entonces en todo tu sitio web, todo tu Blog de WordPress. Si estás usando rem como tamaño de fuente, siempre buscará el tamaño de la fuente del cuerpo y hará su cálculo de acuerdo a él. Dos rem serán de 36 píxeles. Esta es muy buena característica si quieres mantener la consistencia. Vamos a cavar en las secciones de codificación. Pasemos a las próximas lecciones de codificación. 60. Para desarrolladores → de la tamaño de fuentes: En primer lugar, vamos a ver las unidades em, entonces cómo vamos a precisar. A ver, aquí tienes un documento de ejemplo que he creado para ti. En ambos lados, estamos usando unidades em pero en diferentes situaciones y diferentes padres. Veamos cómo esto puede estropearse, tal problema como tenemos en el lado izquierdo. Del lado derecho, tenemos el uso adecuado. Vamos a meternos en la codificación. No hay nada de fantasía. Veamos qué tenemos en nuestro documento HTML. He importado esto normalizar para normalizar.min.css. Si no sabes qué es normalizar, es básicamente para eliminar todos los estilos de navegador y otros problemas, problemas desajuste que tenemos. Se va a restablecer tus estilos. Entonces tenemos esta API de Google. Básicamente estamos importando este em. Hemos importado esta fuente Source Sans Pro, y después tenemos una hoja de estilo vinculada a ella. Eso es todo. Este es mi rumbo para el encabezado, no tiene nada que ver con el ejemplo. El código de min está por aquí. Se trata de un contenedor encabezamiento 1, 2, 3, etiquetas de cuerpo, span. Entonces tenemos texto pequeño, pequeño, y luego tenemos otro contenedor que está al lado derecho por aquí. Este es otro contenedor. Izquierda está el contenedor. Tenemos dos contenedores, derecha e izquierda en el lado izquierdo y derecho. Ahora, lo que está pasando aquí es que si miras este contenedor, vamos al CSS style.css. Aquí, tengo todas las tallas especificadas. Ahora, en mi elemento HTML, estoy diciendo para tamaño 18 pixel, así que altura de línea 1.5. Cuando quieras configurar tu fuente base, usa siempre HTML o tus etiquetas de cuerpo. También puedes usar init, pero prefiero usarlo por aquí. Se puede utilizar en ambos. Se puede utilizar este tamaño de fuente. Estamos configurando nuestro tamaño de fuente base. La línea de base es 27 en este momento. Si multiplicas 18 por 1.5, es 27. Ahora, puedes ver por aquí nuestro tamaño de párrafo es de 0.9 em. Si calculamos 18 píxeles multiplicados por 0.9, 16.2 píxeles, la altura de la línea es 1.25. Igual que los otros cálculos como tres em, 18 píxeles multiplicados por 3, y así sucesivamente y así sucesivamente. Lo que estamos haciendo es multiplicar nuestra fuente base con nuestro valor em en cada elemento. Si tenemos elemento de párrafo, estamos multiplicando su valor con el HTML. Nuestro em funciona de alguna manera, como tenemos esta unidad em. Se busca al padre inmediato. Si el párrafo está dentro de este cuerpo y etiqueta HTML, no hay otro div, entonces será de 18 pixel. En este caso, si miras nuestro código de contenedor, vamos a mostrarte lo que tienen mis contenedores. Si miras este contenedor de la izquierda, éste es el de la izquierda. Vamos a sumar por aquí. Ahora, se puede ver contenedor izquierdo tiene algún tamaño para tamaño que es de dos em. Pero este del lado derecho, este contenedor no tiene especificación de tamaño de fuente. Lo que pasará aquí es que todos los elementos dentro este div se calcularán con fuente base HTML de 18 píxeles. Esto va a pasar por aquí. En este contenedor, cada encabezado, cada elemento de párrafo, todo lo que vemos, se puede ver en el lado derecho, se calcula en el nivel de nuestro elemento HTML tamaño de fuente base. Si haces clic en él e inspeccionas elemento, también puedes hacerlo en Chrome. Si vamos a este modelo de caja calculada, entonces esta calculada, se puede ver el tamaño de fuente es de 16.2 píxeles. Por lo que 18 se multiplican por 0.9, es el tamaño de fuente correcto. Pero si miramos el párrafo dentro de este contenedor, que es el izquierdo, es 32.4. ¿ Cómo es que se ha calculado este 32.4 pixel? Veamos cómo se ha calculado esto. Todo lo que es un poco diferente está en este contenedor. Tenemos dos em. Este contenedor tenía un padre que era HTML. Nuestro tamaño de fuente base fue de 18 píxeles multiplicados por 2, es igual a 36 píxeles. Ahora, en esta situación, nuestro padre tiene el tamaño de fuente base ha cambiado. Por lo que todo lo que está dentro de este contenedor usará este 36 píxeles como fuente base, porque ahora su contenedor tiene diferente fuente base. Estoy usando la tecla de acceso directo para mi texto sublime. Por lo que 18 multiplicado por 36 pixel es nuestra fuente base para este contenedor elementos secundarios. Básicamente, elementos infantiles significan que todo en este contenedor es su hijo. Aquí, podemos ver si nos fijamos en esto, por qué esto se ha calculado como 32.4, porque nuestro tamaño de párrafo era de 0.9. Si multiplicamos 36 píxeles multiplicados por 0.9 , serán 32.4 píxeles. Es así como se ha calculado nuestro párrafo. Es así como se calcula nuestro tamaño de párrafo y también todos nuestros tamaños de encabezamiento. Tres em en esta situación ahora significa que tenemos 36 píxeles multiplicados por 3, es igual a 108, 108 píxeles es nuestro rubro 1 en esta situación. Veamos si este encabezamiento 1 es de 108 píxeles o no. Vamos a inspeccionarlo y se puede ver por aquí. Tamaño de fuente, 108 píxeles, también la altura de línea es de 108 píxeles. Así funciona em. Aquí, sólo tenemos un padre, que es HTML. Este contenedor, no tiene especificación de fuente. En este caso, tenemos contenedor dentro este elemento HTML y tenemos dos niveles de este cálculo. Em es básicamente relativo a su padre inmediato. Su padre inmediato fue este contenedor. Teníamos esta fuente tamaño dos em, por lo que ahora cambió su tamaño de fuente base. Si quieres usarlo, úsalo con cuidado y asegúrate de que estás usando buenos cálculos relativos. Todo esto se trata de unidades em. Pasemos al siguiente. 61. Para desarrolladores con la canaliza de fuentes: Hablemos de Rem Unit o especificación de tamaño de fuente CSS. Este es mi favorito, es relativo al cuerpo. Veamos cómo va a funcionar. Estoy configurando mi tamaño de fuente base en HTML en lugar de cuerpo. Sesenta y dos puntos cinco por ciento significa 10 píxeles que es 16 píxeles se multiplican por 0.625 que es igual a 10 píxeles así es como va a ser igual a 10 píxeles. Esto a veces es diseñador hacen diseñadores o trimestres usan esta técnica, es muy antigua una para hacer tus cálculos más fáciles, pero la recomendada es de cuatro talla 100 por ciento, así que usa siempre esta. Yo estoy usando sólo para este ejercicio sólo para explicarte pocos conceptos. Ahora rem siempre va a buscar este HTML o dentro de esta etiqueta body, cualquiera que sea la fuente base. Si no tenemos HTML se verá en etiqueta body. Se buscará este tamaño que es de 10 píxeles, y todo su cálculo se basará en esto, por lo que 10 píxeles. Nuestro párrafo por aquí es de 1.6 rem el cual es 10 multiplicado por 1.616 píxeles. Entonces nuestro span tamaños 2.4 rem que será igual a 24 pixels, ¿por qué? Es más fácil de calcular porque tenemos puesta por aquí. Entonces dentro del h_2, son 36 pixeles, esto es 24, 2016, 14 pixeles así sucesivamente y así sucesivamente. Ahora dentro del contenedor, si intentas especificar algún tamaño de fuente como estoy especificando en este momento, 24 píxeles. Veamos si va a buscar esta talla como nuestra talla base o va a buscar esta talla. Ahora mismo lo he abierto en Chrome solo para darte un poco de sabor de los niveles de Chrome. Ahora puedes ver que es un efectivo y nuestro tamaño de fuente lo es, éste va a ser, vamos a ver cuál es el tamaño de fuente computado. A ver. La altura de la línea es de 48 píxeles. Entonces está nuestro tamaño de fuente, será en el f, c, d, e, f. Aquí tenemos. Tamaño de fuente 48 pixels. Fue un poco difícil encontrar este valor en Chrome porque tiene muchos otros valores como flex, otro lo oculto. Esto es difícil encontrarlo, pero aquí tenemos un tamaño de fuente de 48 píxeles. Precisamos 4.8 rem. Lo que significa que está calculando de acuerdo a este valor. No está buscando este valor o ni siquiera considerarlo. Siempre debemos asegurarnos de que esto vaya a funcionar con el elemento fuente base. Será consistente siempre. Si quiero cambiar todas las tallas, solo voy a cambiar tu aquí. Un cambio controla todo lo demás. Esto es lo que me encanta, refrescar. Esto es realmente mágico y me encanta esta característica que puedes controlar todos los tamaños de fuente relativos a un elemento que es este HTML, o si tienes cuerpo, así es como usamos esta unidad de tamaño HTML CSS Rem, y usamos HTML como nuestro tamaño base y cambiar todos los valores de acuerdo a él. Normalmente trato de usar rem en mis proyectos si tengo una página de aterrizaje trato de usar rem porque entonces sé que todos mis tamaños de fuente son relativos a este. Si quiero cambiar, puedo cambiar por aquí y todo se cambiará en todas las páginas o en todo el tema. Asegúrate de hacer estos ejercicios y descarga los archivos de muestra. Voy a subir todos estos archivos, para que puedas revisarlos. Pasemos a la siguiente lección. 62. Para desarrolladores → tamaño de fuentes en: En esta lección, vamos a ver porcentaje de uso de unidades en especificaciones de tamaño de fuente CSS. Si estás usando porcentaje, también es similar a emular, así que es por eso que discutí emular antes. Ahora, aquí en mi cuerpo, que es mi tamaño de fuente base principal. aquí estoy especificando el tamaño de fuente base igual al 100 por ciento, lo que significa 16 píxeles. Para casi todos los valores predeterminados del navegador, 100 por ciento es el valor de 16 píxeles. También se considera estándar, así que asegúrate de especificar el tamaño de fuente 100 por ciento en tu elemento corporal o en tu elemento HTML. Ahora, tenemos contenedores de izquierda y derecha. En el contenedor izquierdo, se puede ver estoy especificando tamaño de fuente 140 por ciento. En el contenedor correcto no hay fuente, por lo que todo dentro de este contenedor se calculará sobre la base de este cuerpo porque éste es su padre. No hay especificación del tamaño de fuente en los otros padres como éste, pero éste tiene una especificación de tamaño de fuente del 140 por ciento. Por lo que todo dentro de este contenedor izquierdo será tratado de la misma manera que calculamos M. Déjame mostrarles un ejemplo por aquí. Este es el uso de la unidad porcentual, y se puede ver en el contenedor izquierdo todo es más grande, y en el contenedor derecho todo es del tamaño correcto. ¿ Por qué estamos teniendo este problema? También es el mismo problema con la unidad M que el padre inmediato de esta dejó cuartos, este, H1, H2, y H3, tienen su tamaño de padre establecido en 140 por ciento. Significa que el tamaño de los padres es de 16 multiplicado por 1.4, que es de 140 por ciento. Por lo que 22.4 es su tamaño base. Ahora aquí tenemos 22.4 pixels como nuestro tamaño base. Si tenemos 22.4, entonces el tamaño de fuente 100 por ciento será 22.4. Se puede ver por aquí, si vamos a este párrafo y hacemos clic derecho e inspeccionamos elemento, será igual a 22.4 porque ahora mismo se calcula de acuerdo a su padre que es este contenedor izquierdo, éste sobre aquí. Ahora, esto también es lo mismo que M, así que no les voy a mostrar una conferencia muy detallada sobre esta. Se puede ver por aquí, para las otras tallas estoy usando rem, así que vamos a quitarlo ahora mismo para evitar confusiones. Por lo que rubro 1, 2, 3. Ahora puedes ver aquí en mi rubro 3, estoy usando valor absoluto 36 pixels. Veamos en ambos ejemplos, lado derecho y el lado izquierdo se puede ver el nivel de encabezado 3 es fijo, por lo que es de 36 píxeles, pero todo lo demás está en unidad relativa, que es porcentaje. Por lo que tienen diferentes tamaños en ambos contenedores. Ahora puedes ver por aquí estoy usando 400 por ciento, 350 por ciento, y así sucesivamente, y así sucesivamente. Para pequeños, estoy usando 90 por ciento. Está bien. Hay otro uso de este porcentaje que estaré discutiendo en las conferencias posteriores cuando veamos la tipografía receptiva, así que pasemos a la siguiente lección. 63. Para desarrolladores → unidad de fuentes de vw: Aquí hay un poco de introducción a esta impresionante unidad VW y realmente me encanta cómo se expande y contrae en sitios web receptivos. Aquí hay tres encabezamientos y luego tenemos un párrafo por aquí y se puede ver párrafo es muy grande. Permítanme explicar por qué es muy grande. Ahora si pasamos a este contenedor, lo siento, estilo CSS. Entonces, ¿qué está pasando por aquí? Lo primero es el tamaño de fuente HTML un 100 por ciento, también este ancho de contenedor es de 80 por ciento y el tamaño de fuente en este contenedor padre también es de 24. Por lo que se puede ver por aquí esta unidad VW, es relativa al tamaño de esta ventana del navegador. Por lo que no tiene efecto de este 100 por ciento o de este tamaño de fuente 24 pixels. Entonces lo que está pasando es que he establecido para un tamaño de fuente de párrafo a 4.5 vw. Se puede experimentar con él. Por lo que se puede ver que es muy grande. Este tamaño de párrafo también los encabezamientos son muy grandes. Los tamaños de encabezamiento también están en vw 15 ancho de ventana gráfica y luego tenemos line-height, otras cosas, márgenes y configurar todo. También, encabezamiento dos, encabezamiento tres y texto pequeño está en RAM o puedes ver si trato de usar este vw, entonces tal vez podamos usar 2.5 vw por aquí, así. Veamos cómo se va a quedar como nuestro pequeño texto. Entonces, el texto pequeño es así. Ahora para los encabezamientos, es muy bueno, pero para el texto de párrafo no es realmente agradable. Entonces, pasemos a nuestra opinión receptiva. Ahora, puedes ver a medida que amplío y contraigo mi tamaño de ventana gráfica, puedes ver por aquí en los 623 pixeles superiores, puedes ver por aquí en los 623 pixeles superiores,presiono “Control+Shift +M” en mi Firefox. Si estás usando Chrome, creo que puedes “Shift” y presionar “F12" y seleccionar este dispositivo Toggle. También es “Control”, “Turno, M”. lo puedas ver en diferentes tamaños como este, así, y así. Por lo que ahora mismo estoy usando este navegador Firefox. Ahora puedes ver nuestro tamaño de encabezado es relativo al ancho de nuestra ventana gráfica y es realmente sensible en cuanto lo contratamos. Pasemos a este ancho de 320 píxeles, que es el iPhone cinco o cuatro, supongo. De acuerdo, así es como se va a ver nuestro texto. Pero se puede ver el pequeño texto realmente está sufriendo. Es muy pequeño y el tamaño de encabezado es bueno en dispositivos pequeños, pero es muy grande, lo siento, el texto de párrafo es muy grande en pantallas grandes. Por lo que esta no es una muy buena práctica. Entonces cuando estés usando este VW trata de usarlo solo en los encabezamientos, como Rumbo 123, no en los encabezados pequeños porque se van a poner muy pequeños. Por lo que las rúbricas muy grandes pueden obtener un buen beneficio firme. Si estás usando un párrafo, creo que deberías usar valor RAM o algo más cercano a esto, como 1.2 RAM por aquí. Por lo que se va a quedar bien también para el texto pequeño. Vamos a usar RAM por aquí. Entonces voy a usar una RAM por aquí para el texto pequeño. Ahí hay tres Facetas. Entonces así es como podemos usar esta unidad VW y tratar de evitar las cosas que mencioné aquí. No lo utilices en texto de párrafo. De acuerdo Así que pasemos a la siguiente lección. 64. Para desarrolladores → cómo funciona el ritmo vertical en CSS: Ahora estás familiarizado con el espaciado vertical o el ritmo vertical, pero cómo estos cálculos van a funcionar realmente en CSS. Para controlar tu espaciado vertical en CSS de diferentes elementos tipográficos o incluso tus otros elementos gráficos, imágenes o botones o algo así, necesitas usar márgenes, relleno y altura de línea. Ahora ten en cuenta que todas estas cosas serán relativas a nuestra altura basal. Si tienes una línea de base de como 27 píxeles, tus márgenes y paddings y alturas de línea serán múltiplos de 27 píxeles o tal vez la mitad de esta altura basal. Ahora cómo se calcula esto es que necesitamos una altura total que debe ser un múltiplo de nuestra línea de base. Aquí puedes ver que el margen superior es de 27 píxeles ya que mi línea base es de 27 píxeles. margen inferior también es igual a la línea base, y la altura de línea también es igual a la línea de base. La altura total será de 81 píxeles. Si es una sola línea, nuestra línea de texto será igual a 81 píxeles de altura. Es así como se va a calcular la altura en nuestro navegador. Puede ser múltiple de esta altura de línea base, o debe ser múltiple de altura de línea base o igual a la altura de línea base que también puede funcionar. Aquí hay otro ejemplo. En algún momento puedes usar la mitad de tu altura basal. Si estás usando la mitad de tu altura basal, no te recomiendo usar estos valores de 13.5 píxeles o medios píxeles. Se puede utilizar en su lugar 13 píxeles y 14 píxeles. El alto total volverá a ser de 54 píxeles. Cincuenta y cuatro es también un múltiplo de línea base, por lo que no nos vamos a preocupar por ello. Se va a encajar muy bien en nuestro ritmo vertical. Asegúrate de no usar estos valores de 0.5 o 0.5 medio píxel, puedes usar 14 píxeles y 13 píxeles. Una cosa más. En ocasiones, si estás tratando lograr tal vez algún lema o algunos titulares, algo así y no quieres usar el mismo tamaño de fuente que ya has usado en tu factor de escala, quieres desviarte de aquí cómo vas a espacio vertical ese elemento. Por ejemplo, cambio la altura de la línea. No me gusta la altura de línea de mi línea de etiqueta. Se puede decir muy espacioso. A lo mejor tomando demasiado espacio. Voy a ponerlo en 32 pixeles. He cambiado la altura de la línea y realmente necesito la altura total que debe ser igual al múltiplo de la línea base. Lo que voy a hacer es 54 menos 32, y me quedan 22 píxeles. Los dividí en margen superior y margin-inferior, que es de 11 píxeles, 11 píxeles. El total vuelve a ser de 54 píxeles. Logramos de nuevo la palabra igual ritmo. Aquí un ejemplo de espaciado vertical, cómo vamos a utilizar esta técnica. Si puedes ver mi rumbo, estoy usando margen top y margin-bottom para el encabezado y la altura de línea. Agrega todos estos tres y el bloque total es donde todo es gris. Este es ese espacio que va a tomar. Entonces tenemos nuestro texto de párrafo. Se puede ver todo de color rojo, por lo que una altura de línea es igual a 27 píxeles. Van a ser 27 pixeles por cada línea. El margen inferior, solo estoy usando margen inferior por aquí. Algunos expertos sugieren que solo debes usar margen inferior para todos tus elementos para lograr espaciado vertical. En esta situación, estoy usando solo margin-bottom y no estoy usando margen superior porque el margen superior es básicamente que estoy obteniendo de mi rubro. rumbo ya tiene mucho relleno o margen en la parte inferior, así que no necesito más espacio por aquí. Es así como usamos diferentes cálculos. Permítanme mostrarles un ejemplo. Aquí está Bootstrap Custom Escala Tipográfica. Este es el último ejercicio que vamos a hacer con Bootstrap. Si bien es muy, muy difícil lograrlos verticalmente en Bootstrap porque hay demasiados elementos para encadenar el relleno y todo. Bootstrap realmente chupa a escalas tipográficas o ritmo tipográfico. Aquí tengo este rubro en la parte superior. Se está dirigiendo uno. Si hago clic con el botón derecho e inspecciono elemento, se puede ver el espaciado alrededor de él. Su altura total es de 135, que también es un múltiplo de 27 pixeles. En este momento mi línea de base de escala tipográfica es de 27 píxeles. Se puede ver que tengo relleno superior que es de 27 pixeles, y luego tengo relleno inferior, que también es de 27 pixeles. Es así como he usado el relleno superior e inferior en este rubro uno. Mi altura de línea es igual a 81 píxeles. Esta es básicamente la altura. Si ves por aquí estilos calculados, puedes ver que el tamaño de fuente es 61 y la altura de línea es 81. Se puede ver por aquí. Entonces no tenemos margen superior e inferior. Tenemos relleno margen inferior y superior, que es igual a 27 píxeles, que es mi línea base. Ahora, como se puede ver en la parte inferior todos estos elementos, nuestros párrafos encabezados 3, este es el encabezamiento 2, todos están perfectamente alineados con nuestro ritmo vertical o línea base. Se puede ver incluso la imagen que he usado, la altura de la imagen que he establecido a la línea base múltiplo 1,2,3,4,5,6,7,8,9, 27 multiplicado por nueve no sé qué es, pero es igual a ésta. Ahora, así es como he usado mis márgenes y todo lo demás. Permítanme mostrarles otro ejemplo que es un ejemplo fuera de lo normal. Se trata de 32 píxeles, texto de altura de línea 32 píxeles. Veamos cómo se presenta esto. El tamaño de fuente es de 32 píxeles, la altura de línea es de 32 píxeles, el margen inferior es de 27 píxeles. Se puede ver la parte inferior del relleno y la parte superior del relleno es de 11 píxeles. Se puede ver por aquí 11 pixeles. Es así como he utilizado mis propios ajustes personalizados para lograr el ritmo vertical, se puede decir en el mismo contexto. Por lo que 11 y 11 y 32 es igual a 54. Básicamente 54 es nuevamente el múltiplo de nuestra línea de base, que es de 27 píxeles. Permítanme mostrarles otro ejemplo donde he eliminado, éste. Esto también es 54, pero aquí lo que estoy haciendo es no estoy usando ningún relleno, ningún margen ni nada, solo la altura de línea para lograrlo. Ahora bien, ¿por qué he usado line-height? Porque no quería acercarme demasiado a este párrafo. Utilizo la altura de línea para lograr este ritmo o este espaciado, espaciado vertical. Es así como utilizas tus márgenes, relleno y altura de línea para lograr ritmo vertical y espaciado vertical. Es así como usamos CSS para lograr ritmo vertical o espaciado vertical. Pasemos a la siguiente lección. 65. para desarrolladores de: En esta lección vamos a crear algo como esto. Vamos a crear ritmo vertical usando esta herramienta Grade-Level y fan [inaudible] esta basehold.it. Entonces empecemos y vamos a crear algo como esto. Voy a usar Sublime Text. Puedes usar cualquier dato de codificación que tengas, incluso puedes usar bloc de notas. Voy a usar rápidamente Doc, que es un atajo para documento HTML y lo voy a guardar, usar Control S, así que lo voy a usar y guardarlo en escritorio ahora mismo solo con fines de práctica. Este es nuestro HTML de ritmo vertical. Tan pronto como use HTML, se puede ver por aquí. Ahora voy a quitar este bootstrap no necesitamos bootstrap ahora mismo. Lo que vamos a usar es que vamos a usar hoja de estilo y pocas otras cosas como link rel. Vamos a utilizar hoja de estilo para normalizar propósito. Entonces vamos a utilizar CDNJS normalizar. A ver qué se va a llegar con este. Voy a normalizar mi CSS, copiar e ir a este. Aquí tenemos nuestro CSS normalizar y necesitamos algún texto de muestra. Voy a abrir mi barra de herramientas secreta, y voy a usar este HTML Ipsum para conseguir algún código por aquí. Entonces lo que necesitamos es quizá necesitamos algunos encabezamientos. ¿ Dónde están los encabezamientos? Aquí no tenemos encabezamientos. Este es uno un poco dorado. Es encabezamientos y todo lo demás. Yo lo voy a quitar por aquí y pegarlo así. A lo mejor necesitamos más párrafos por aquí así, y tal vez encabezar el nivel tres. A lo mejor podemos usar un contenedor. Estoy usando MX. Entonces es por eso que está consiguiendo todo en atajo y estoy llenando todo lo demás. Entonces si conoces CSS, obtendrás la idea. Lo que estoy tratando de hacer es que solo estoy llenando esto y estoy usando esto normalizar y voy a enlazar y luego también enlazar otra hoja de estilo. Voy a usarlo como, style.css. Voy a crear otro archivo en realidad es el primero. Entonces este es el archivo CSS que he creado por aquí. Ahora vamos a usar algo de aquí, Grade-Level. Entonces esta es mi configuración El tamaño 4 es igual a 18 píxeles, altura de línea 1.5, factor de escala 1.44, y estoy usando valores de píxel. También puedes usar REM o M. Entonces lo que vamos a hacer es que vamos a copiar todo desde aquí, 1.44 sí. Esto funciona mejor en Chrome. Algunas funciones no funcionan en Firefox. No sé por qué razón. Entonces voy a usar REM y voy a copiar todo y Copiarlo y Pegar en mi CSS. Veamos cómo se va a ver en nuestro navegador. Así es como están funcionando mis encabezamientos ahora mismo y todo. Veamos si se ha aplicado o no. Apliquemos el ritmo vertical usando nuestro basehold.it, y nuestro ritmo vertical es de 27. Voy a usar a 27 por aquí así. Así es nuestro ritmo tipográfico actual. Por lo que se ve bonito. A lo mejor necesito más espacio alrededor de este HTML Encabezado 1. Se puede ver cómo todo esto se ve realmente bonito en esta configuración. Entonces vamos a ver, tal vez el rumbo 1 necesita un poco más de twicking. A lo mejor puedo agregar un margen inferior de 1.6, un recorte como este. Se ve mejor ahora. Entonces también podemos usar algo para los párrafos. Con el tamaño para los párrafos, creo que está tomando el tamaño del cuerpo. Ahora para el tamaño de fuente en el cuerpo, voy a arreglarlo a 18 píxeles. La altura de línea será de acuerdo a este tamaño de fuente. Podemos dejarlo así o también podemos usar 27 píxeles por aquí y dejar que todo descanse así. Es así como usamos el nivel de grado para obtener nuestro espaciado vertical y alineación y todo. Esta es tu próxima misión, que es que me vas a crear algo como ésta. Asegúrate de que esté alineado verticalmente a tu línea de base. Puedes usar nivel de grado y crear algo similar a éste. También se puede ver por aquí en la parte superior estoy usando este encabezado, que es la altura de mis tres líneas de base. Por lo que es de casi 81 píxeles. Si quieres similar, por aquí, puedes usar cabecera y puedes usar esa cosa por aquí. Lo que uso es que solo hay tres cosas que he usado. Una es que normalize.css solo para mantener frescas tus hojas de estilo de configuración, así embord eso en la parte superior, entonces estamos usando nuestra hoja de estilo personalizada, que es ésta donde acabamos de copiar y pegar, nuestro código RAM de nivel de grado. Entonces este es el código que generó y lo usamos por aquí. Después usamos basehold.it para mostrarnos 27 pixeles de línea base, y esto es todo lo que necesitamos para usar, un ritmo vertical de aspecto agradable. No voy a entrar en importar diferente fuerza de Google. Si quieres algo de fuerza puedes importar eso. Es así como usamos la alineación vertical en nuestro código, y para lograr la alineación vertical en HTML y CSS. Tu próximo reto es crear algo similar a éste o a éste puedes usar texto ficticio o lo que sea, solo muéstrame tus habilidades y estaré esperando. Entonces pasemos a la siguiente lección. 66. para desarrolladores→ Bootstrap de escala de escala personalizada: hoy vamos a aprender a usar la escala tipográfica personalizada Bootstrap, para así cómo editar la fuente base y otras cosas para Bootstrap. Ahora una cosa debes saber que Bootstrap realmente apesta a ritmo vertical porque hay demasiados elementos, y remaches, y todo. No se puede cambiar todo por aquí. También es responsive, por lo que va a atender a diferentes pantallas y diferentes tamaños por lo que debes usar escala tipográfica predeterminada que ya tiene Bootstrap. Lo que hice, acabo de descargar Bootstrap y empezar Bootstrap. Ahora mismo es la versión 3.3.6. Ahora si quieres descargar la fuente, puedes descargar la fuente en Sass o Less. Yo uso Menos. Sass y Less, si no lo sabes, básicamente son precompresores CSS. Si no los conoces ya, debes empezar a aprender alguno de ellos, Sass o Less. Sass es un poco más popular y Less es un poco menos, pero también son casi iguales. Ahora puedes hacer click aquí y descargar la fuente. Puedes usar ambos. Si quieres Menos, puedes descargar Menos o este. Descargué éste, y lo extraje por aquí. El folder que realmente necesito es este Menos. Esta es la carpeta que necesito. Acabo de copiar esta carpeta y la incluí en esta entrada de blog o documento de escala tipográfica. Ambos están usando todos estos archivos Less. Déjame mostrarte cómo funciona todo esto. Ahora aquí tenemos nuestro archivo HTML, y puedes ver aquí tengo enlace rel="stylesheet/menos,” así que estoy usando “less.js”. Se puede ver en la parte inferior o aquí tipo de script, JavaScript y CDN. Este es el “less.js” que necesitas incluir para dejar que el último script o código lo compile a CSS. Si no sabes de Less, sólo tienes que ir a este “less.js” y leer al respecto. Es muy fácil, como se puede ver por aquí. No es difícil de usar. Solo necesitas incluir una línea de código en tu front-end y, y puedes cambiar la hoja de estilo rel a esta hoja de estilo/menos en lugar de CSS, y comienzas a usar Less files. Aquí tengo este archivo menos/bootstrap, importado por aquí. Creo que lo importé dos veces, así que vamos a quitar este. Abrámoslo en el navegador, y veamos que todo está funcionando bien. Tenemos esta Epígrafe nivel 1, 2, 3, 4, 5, y esta fuente de párrafo, y esta. Veamos cómo he usado este tamaño personalizado para mis fuentes. Lo primero es que ya conocemos este gridlover.net, y estoy usando de nuevo el mismo ajuste, 18, altura de línea 1.5, factor de escala 1.44. Ahora lo que necesitamos de aquí son estos valores em de estas fuentes. Gire esto a em, y los vamos a utilizar en Bootstrap. Entonces abramos los archivos Bootstrap. Básicamente el archivo principal que necesitas incluir por aquí desde esta carpeta Less es este archivo bootstrap.less. Tiene todas las diferentes importaciones de archivos, y los archivos que vamos a cambiar son estos “variables.menos”, y otro, si realmente necesitas meterte con ello, es este “tipo.less”. Te recomiendo que no te metas este “tipo.menos”. Tiene otros ajustes. Simplemente vamos a esta “variables.menos”, y vamos a esta sección donde tenemos tipografía, fuente, line-height, y color. Ahora por la familia tipográfica Sans Serif. Si quieres alguna otra fuente, como quería tener Source Sans Pro, cambié a Source Sans Pro, y también importé esta Source Sans Pro en mis documentos HTML para que podamos usarla por aquí. Entonces familia de fuentes Serif es éste, familia de fuentes mono-espacio. Ahora fuente familia base es básicamente nuestra familia de fuentes Sans Serif, por lo que nuestra fuente base es básicamente esta, Source Sans Pro. Están reemplazando valores por estas variables. No es muy difícil de entender. Ahora el tamaño de la fuente base era de 18 píxeles, como vemos por aquí. Es de 18 pixel. Yo lo puse a 18 pixel. Se trata de diferentes funciones, ceil y piso, para redondear estos valores. Puedes usar cualquiera de ellos. Uno redondea hasta el dígito siguiente, y uno al anterior. Puedes comprobarlo si quieres cambiarlo. Ahora cómo viene este valor, esta es básicamente mi escala. 1.44 es mi escala. También puedes usar este Modularscale para obtener todos estos valores, así que voy a usar este. Déjame mostrarte cómo utilizar este, 18 pixels y nuestra relación es de 1.44. Esta es nuestra primera fuente, que es de 18 píxeles, luego 1.44, luego 2.074, luego 2.968, luego 4.3. En el mismo sentido, si vamos a esto, tiene diferentes cálculos, tamaño de fuente 3 em, 2.05, o algo así. Entonces lo que vamos a hacer es que vamos a copiar estos valores y pegarlos donde los necesitemos. Al igual que 4.3 va a ser nuestro, por ejemplo, el tamaño de la rúbrica 1. Entonces lo que vamos a hacer es el tamaño de la rúbrica 1 es 4.3, entonces tenemos 2.986. Voy a saltar rápidamente todo para que puedas usar el tamaño que quieras. Estoy usando el Título 5, que es del mismo tamaño a 18 píxeles. rubro 6 es un poco más pequeño. Creo que ambos deberíamos tener el mismo tamaño para este. rubro 6 es un poco más pequeño, tal vez podamos usar un tamaño pequeño para éste, que es 0.694 por aquí, pero vamos a usar un tamaño más pequeño que es 694 por aquí. Es 694. Después tenemos 2.074, y luego tenemos 1.44. Tengo que cambiar muchas pantallas, 1.44. Entonces tenemos 1 em, éste, y luego éste. Estamos todos fijados para los rubros. Altura de línea. Se puede cambiar la altura de línea, si lo desea. Yo lo he puesto en 1.25 porque, si recuerdas, los encabezamientos necesitan menos altura de línea. Por lo que estamos estableciendo menos altura de línea para los encabezamientos. También puedes usar 1 o tal vez 1.1, algo así. Guardémoslo y veamos cómo va a quedar nuestra publicación. Este es nuestro conjunto de básculas tipográficas en Bootstrap. Esta es la, básicamente, escala personalizada para Bootstrap, ritmo vertical, por lo que no vamos a meternos con el ritmo vertical personalizado de Bootstrap. Si realmente quieres, adelante y límpialo. Déjame mostrarte un ejemplo. Es necesario cambiar el archivo “type.less”, básicamente. Por lo que aquí tenemos un rumbo para familia con line-altura y todo listo para todos los encabezamientos. Lo que vamos a hacer es que vamos a cambiar los márgenes, arriba, abajo, y todo para cada rubro, incluso párrafo y todo. Déjame mostrarte el archivo de ejemplo. Lo incluiré en este post. Esta conferencia ejerce fuentes, echa un vistazo a ellas. Déjame mostrarte dónde está. Esto también es un ejercicio para ustedes, chicos, así que sólo lo hice un poco difícil. Esta es la entrada que te mostré post de blog con Bootstrap usando escala y tamaños tipográficos personalizados, y estoy usando 27 píxeles como mi línea de base. Cómo lo hice, déjame mostrarte las variables en ese archivo de tipo. Déjame mostrarte cómo es. Ahora puedes ver por aquí, he cambiado line-alturas y todo por h2. Es diferente. Se puede ver margen superior, inferior, relleno, 0, pero la altura de línea es la altura de línea multiplicada por 2. Entonces tenemos Rumbo 3, todo es 0, line-height por dos. Entonces tenemos prueba de Rumbo 3, que es el titular superior por aquí, este. Tiene [inaudibles] ellos off beat, por lo que es padding-top 11, luego padding-bottom 11, line-height 32 por lo que todos estos igual a 54, tamaño de fuente 32, y familia de fuentes también es personalizada. Estos son los ajustes personalizados de los ajustes predeterminados de Bootstrap, así que no te preocupes por ellos. Entonces así es como lo he puesto todo por aquí. Necesitas ajustar cada encabezado márgenes superior, inferior y todo, y la altura de línea para usar realmente el ritmo vertical en Bootstrap. Entonces no aconsejo esto porque esto sólo va a establecer el texto. Pero, ¿qué pasa con los botones, ventanas modales, otros controles? Van a sufrir de este ajuste, así que te sugiero que solo te quedes con la configuración predeterminada de Photoshop y solo cambies las variables. Simplemente juega con ellos. Entonces lo que hoy aprendimos es que usamos nuestra escala Modular para obtener estos valores y usarlos en nuestro Título 1, 2, 3 y 4, o también puedes usar estos valores también si quieres, si te gustan. Entonces así es como usamos escala tipográfica personalizada en Bootstrap. Esto termina mi conferencia. También quiero que juegues con él, intentes descargarlo, y cambies algunos ajustes, y veas cómo se ven estos. También intenta cambiar esta familia de fuentes y jugar con ella. Por lo que este es el final de este apartado. Trataré de incluir cualquier cosa nueva que se me ocurra como cambiar fuentes o escala tipográfica para dispositivos móviles y dispositivos de tamaño mediano como iPads y otros dispositivos de tamaño mediano. Pasemos a la siguiente conferencia. 67. Para desarrolladores con código de Typescale: Hola a todos. Te hablé de una herramienta que es tipescale.com. hoy probé su CSS, éste y falló miserablemente. Entonces no intentes usar es CSS o valores de aquí en tu escala. El mejor herramienta es de nuevo este gridlover.net. Entonces usa este código desde aquí. Ahora uso este código y déjame mostrarte cómo salieron mis cosas. Déjame mostrarte el ejemplo en la demo. De acuerdo, ahora la altura de la línea, no lo han mostrado, pero lo calculé, son 29 píxeles. Se puede ver que nuestros encabezamientos se están alineando muy bien en las tres alturas basales. Pero el problema es con nuestros párrafos, no se están alineando. Ahora hay otro problema que es con nuestro rubro nivel 2 y 3. Entonces si usas el rumbo 2 y luego el 3, hay mucha brecha. Debido a que este código está usando el mismo margen superior se puede ver por aquí, margen top es 1.4144, encabezamiento 1, 2, 3, y 4. Por lo que todos estos rubros tienen un margen superior que es mucho, por lo que van a estar demasiado separados el uno del otro. No creo que debas usar este. Puedes usar valores a partir de aquí en tu escala. Entonces si estás usando algo así como 1.44, para que puedas ver que el valor más bajo o el valor de texto pequeño es 0.694, puedes usar eso, pero no te recomiendo usar o agarrar su CSS. Para mí genera algunos problemas. No se está alineando con precisión. No sé para qué lo usó el fabricante de herramientas o codificador o tal vez para qué tenía en mente. Pero para mí no se está alineando. Por lo que este es otro consejo para no usar código de escala de tipo y usar nivel de cuadrícula. Supongo que deberíamos pasar a la siguiente lección. 68. Para desarrolladores con Introducción a la tipografía Responsive: Hablemos de tipografía receptiva para aquellos que son codificadores y diseñadores front-end o codificadores saben que este es un problema muy grande. Hay dos maneras en que podría haber muchos plugins disponibles de jQuery o algo así, pero normalmente uso estas dos soluciones. La topografía sensible significa que sus tamaños de fuente deben ajustarse de acuerdo al tamaño de la pantalla. Si tienes un tamaño de fuente muy grande como 80 píxeles o 61 píxeles o tal vez una fuente de 70 píxeles en una pantalla grande. ¿ Crees que en un dispositivo pequeño como tal vez 480 píxeles de ancho es de buen tamaño o relevante? No, porque tu tamaño de fuente será demasiado grande para esa pantalla pequeña, tal vez toda la pantalla se llenará con solo tu encabezado. ¿ De verdad quieres eso? No, está bien. Vamos a ver cuáles son las soluciones para ese problema. La primera solución de la que voy a hablar es usar el valor porcentual de tamaño de fuente HTML. Lo que hacemos aquí es que arreglamos el tamaño de fuente nuestro tamaño de fuente base y altura de línea en elemento HTML. HTML básicamente es el elemento superior. Se va a controlar todo el tamaño de cada fuente o cada texto de tu página. Para pantallas pequeñas o tal vez medianas se establece el tamaño de fuente en algún porcentaje para que sea relevante para su pantalla de escritorio. Si tienes una fuente como de 18 píxeles en tu pantalla de escritorio o grande para pantallas grandes para pantallas pequeñas las configuras en 80 por ciento. Se puede ajustar en pantallas medianas al 90 por ciento. Es una solución un poco barata para éste porque nuestros remeros, márgenes y todo lo demás serán igual podría generar algún problema, pero es una buena solución. Reducir el tamaño de fuente al 80 por ciento desde el tamaño base. Si tu encabezado es como 60 píxeles podría llegar a ser 50 píxeles o tal vez menos que eso en pantallas pequeñas. Esto es de una manera. Te mostraré ejemplos de codificación de ejemplos para ambas soluciones. Esta es la primera solución. Echemos un vistazo a la segunda solución. Segunda solución es más avanzada o se puede decir que es más eficiente que la anterior. Aquí utilizamos dos escalas de tipo separadas para nuestras diferentes pantallas. Para mi pantalla móvil o pantallas pequeñas, podría estar usando la escala de tipo que escala menos cuando se actualice de 18 píxeles a algún otro tamaño de encabezado. Para pantalla de escritorio podría tener una escala muy abrupta que escala con mucho cambio de un tamaño de fuente a otro. Permítanme mostrarles un ejemplo con el uso del sitio web a escala modular. Aquí tenemos el sitio web de escala modular. Voy a usar 18 pixel y mi base. Mi primera relación será de 1.5 o puedes tener 1.44 el cual estuvimos utilizando en nuestros ejercicios anteriores. Lo que puedes hacer es usar el segundo como 1.2 a algo así. Se puede ver talla B y talla A estos son dos tamaños diferentes. En pantallas móviles nuestro primer tamaño de fuente será de 18 pixel luego será de 22 pixels luego será de 27 pixels aproximadamente, luego será de 32 pixels o 33 pixels. O si quieres adelantarte más a esto puedes ir a 40 píxeles. Pero se puede ver nuestra relación superior que era azul uno sobre aquí.Se puede ver 18 pixel es nuestra base que está en negro y la siguiente parada es de 26 píxeles, luego de 37 píxeles, después de 54 píxeles o tal vez como los 77 píxeles. Tenemos un rango de cambio muy grande en una relación y en la otra que vamos a establecer para nuestros dispositivos móviles o pequeños vamos a utilizar menor o menor proporción. Otro consejo es que he visto en diferentes sitios web o expertos dicen que si tu ratio es 1.5 intenta obtener la otra relación que es como con la diferencia de 0.25. Esto básicamente no va a cambiar abruptamente problema de escalado, por lo que básicamente es un cambio paso a paso, un paso va a ser 0.25. Básicamente estamos aumentando o disminuyendo la relación con 0.25 que es la mitad de 5.5. Si tengo como 1.44, podría ir a algo así como 1.2 a algo como esto. Parece más racional y así es como hay dos escalas modulares para diferentes pantallas. Puedes tener una tercera pero creo que para tablets y pantallas grandes una relación es suficiente y una es buena para tus pantallas móviles y más pequeñas. Estas son las soluciones que utilizamos para la topografía responsiva. Es posible que encuentres muchas herramientas de JavaScript o tal vez plug-ins. Voy a compartir un documento de recursos que contiene todos los enlaces o tal vez los plugins de JavaScript que encontré sobre este tema, pero en este momento estoy más preocupado por las soluciones CSS en lugar de incluir otro archivo extra de JavaScript. Todo esto se trata de una topografía receptiva. En las próximas dos lecciones vamos a ver los ejemplos para ambos. Vamos a usar estas escalas, así que empecemos y pasemos a la siguiente lección. 69. Para desarrolladores→ diferentes escamas para múltiples tamaños de pantalla: En esta lección, vamos a utilizar la segunda técnica secreta ninja para nuestro dimensionamiento de fuentes, para el diseño web responsive. Lo que es en realidad es que vamos a simplemente cambiar el factor de escala porque nuestro tamaño de fuente se ve muy grande en pantallas pequeñas. Anteriormente, estábamos usando 1.44 como nuestro factor de escala, ahora vamos a usar 1.22. Lo que vamos a hacer es, sólo vamos a copiar todo desde aquí. Cambiémoslo a pixel y luego REM, solo para ver que los tamaños se han actualizado. Voy a copiar de aquí a arriba, CTRL+C, y lo que voy a hacer es, voy a ir a mi pantalla pequeña, que es ésta, entonces media solo pantalla, esta es pequeña pantalla, voy a quitar este porcentaje HTML sistema de control, y lo vamos a pegar por aquí. Vamos a reemplazar esto por nuestros 18 píxeles. Para la altura de línea utilizamos 27 pixeles, lo siento, eran 27. No puedo ver mi teclado desde la parte posterior de mi micrófono, está justo delante de mi cara. HTML. Esto es realmente malo. El primer paso es, siempre trato de usar mi tamaño de fuente al elemento HTML. Es mejor para mí y a veces creo que es recomendado por la mayoría de los usuarios expertos. Si eres más experto que yo, puedes escribir al respecto en la pregunta o cualquier cosa que puedas sugerir al respecto. Ahora, lo que vamos a hacer es, veamos cómo se va a ver en nuestra pequeña pantalla. Primero lo que vamos a hacer es quitar este tamaño de fuente HTML y cambiar en nuestras pantallas medianas, porque no lo necesitamos. Veamos cómo se ven nuestras fuentes y tamaños. Cambia con este grande, bien , medio, es lo mismo, no necesitamos nada para cambiar. Vayamos a esto. Aquí tenemos el pequeño. Se puede ver que el tamaño se desplaza dramáticamente, pero nuestras alturas de línea se ven algo extraño. Además, hay mucha distancia entre estos dos párrafos. Nuestro rumbo dos es bueno, rumbo tres también es bueno, pero el rumbo uno tiene un poco de problema. Arreglemos eso. Vamos al encabezamiento uno en nuestra consulta de medios, así que este es nuestro inicio de consulta de medios, y este es nuestro encabezamiento uno. El tamaño de fuente es éste, la altura de línea está un poco por encima del tamaño de fuente así que creo que debería ser similar. A lo mejor puedes usar algo como esto, solo la altura de línea uno. Guardémoslo y lo refresquemos. Se ve mejor ahora, pero ahora tenemos otro tema que es, este párrafo se acercó demasiado a este rubro uno. Alejémoslo de la dirección uno. Nosotros vamos a usar este. Vamos a copiar y pegar margen, abajo, y arriba son los mismos. Ahora mismo, no te preocupes por vertical con ellos, solo vamos a ir con nuestro sentimiento de tripa, así que no te preocupes por ello ahora mismo. Se ve mejor. 70. Para desarrolladores con la unidad de CSS para tipografía responsivo: En esta lección sobre tipografía responsive, vamos a ver el primer ejemplo que vimos en nuestra conferencia anterior, el cambio de valor porcentual para que el elemento HTML controle el tamaño de fuente. Ahora este es el archivo que estábamos usando en nuestros ejemplos anteriores. Déjame mostrarte cuáles son los ajustes que tenemos. Tamaño de fuente que es de 18 píxeles, gridlover.net. Estamos utilizando estos ajustes, altura de línea, ,1.5, y el factor de escala es de 1.44. Lo que hice es copiar este código REM de aquí al archivo CSS. Este es el mismo archivo CSS. Son pocas las cosas que hice con él. Una, es que importé normalizar, siempre intenta importar esta normalizar para restablecer tus estilos CSS o estilos predeterminados desde tu navegador y todo lo demás. Entonces esto es un imperdible, siempre incluye esto en tus proyectos. El segundo es este metaviewport. Deberías tener éste para tus pantallas o dispositivos móviles, dispositivos pequeños. Esta es nuestra hoja de estilo y así es como se ve en este momento. Déjame mostrarte este. Abrámoslo en el navegador. Aquí tenemos, se puede ver en el lado derecho está mostrando pantalla grande. Cómo lo hice, usé cuerpo:after tag. Si no estás familiarizado con estas pseudo etiquetas o pseudo elementos de HTML, debes estudiar sobre ellas. Escriba en el sitio web de Google o W3C para conocer de ellos. Esto básicamente es agregar un botón después de mis etiquetas de cuerpo. Entonces así es como se está mostrando por aquí. posición es fija y text-align center. Básicamente, estoy mostrando un botón después del cuerpo. Entonces a medida que empezaron mis elementos corporales, éste sigue mostrando después de eso. Entonces estos son todos los ajustes. Este es el color de fondo. ¿ Por qué lo estoy usando? Porque, déjame mostrarte, si cambio a mi vista responsive, puedes ver como la pantalla va demasiado pequeña, cambia el texto y el color para pequeño. Lo usé para el propósito de pruebas de nuestra topografía responsiva. Esto es de pantalla media y esto es grande. Aquí tenemos así. Se puede ver pequeño, mediano, y luego grande. Hagámoslo un poco más grande. Ahora, esto es una cosa, ¿cómo lo he logrado rápido? Declaré este cuerpo en mi simple CSS normal. Después fui a esta consulta de medios en media solo pantalla ancho máximo 600 píxeles. En este punto, cualquier pantalla que sea de 600 píxeles o menos de 600 píxeles, estoy agregando un contenido de pequeño a este cuerpo: después de etiqueta y color de fondo es éste. Este es un poco verdoso. Este es un fragmento muy pequeño que elegí de un chico en línea. No estoy seguro de recordar cuál era su nombre, pero es herramienta muy útil cuando tienes que probar tus consultas de medios. Esto está todo listo. En este momento, nuestro tamaño de fuente no cambia. Si vas a pantalla mediana o pequeña, puedes ver si voy a este tamaño de pantalla pequeño, que es como 360, algo así, no está cambiando en absoluto. Entonces el encabezado es que se puede ver una letra, lo siento , una palabra por línea, me parece muy extraño. Supongo que no debería estar así. Ahora, lo que vamos a hacer es, déjame ver si el archivo correcto está abierto en el navegador. Sí, es el mismo. Ahora lo que vamos a hacer es que vamos a usar otra escala, lo siento, un porcentaje para nuestros documentos HTML. Lo que hice es, copié todo este código. Volvamos a copiarlo solo para asegurarnos de que lo recojas todo. Entonces “Copia” esto y lo voy a pegar en mi style.css así. Simplemente borra todo lo demás que tenía antes. No este cuerpo: after tag y Control V. Esto es lo que estoy usando. Tan solo refresca el archivo, y puedes ver estos son los ajustes que estaba usando. Puedes ver aquí tengo algunos problemas con el margen inferior en este rubro 1, vamos a ignorarlo ahora mismo. Ahora el primer cambio que vamos a hacer es, vamos a redactar nuestro modelo HTML porque necesitamos controlar los elementos. Entonces HTML, y vamos a usar el tamaño de fuente y la altura de línea en este. Voy a usar en lugar de 1.25 REM, voy a usar 18 píxeles. Esta es nuestra fuente base, y la altura de línea va a ser de 27 píxeles. Entonces el primer paso es, voy a quitar este tamaño de fuente de mi cuerpo a este elemento HTML, y hemos guardado esto vamos a actualizarlo. Nada va a cambiar. Cambiemos este margen inferior igual a este margen superior para el encabezamiento uno se ve muy diferente desde mi perspectiva. Ahora es mejor. También se puede ver en esta zona por aquí, esta etiqueta de rúbrica 2, tiene mucha altura de línea, que es ésta. Hagamos que la altura de línea sea igual a esto, igual a este tamaño de fuente, que es de dos puntos algo así. Ahora es mejor. Estos son los pocos ajustes que hice. Utilicé mi sensación interior o como lo llames, para asegurarme de que todo se vea bien. Ahora si pasamos a la pequeña, y mediana, y luego grande, está mostrando fuente muy grande en la pantalla pequeña, supongo. Veamos cuál es el tamaño de esta fuente. Creo que serán 61 pixeles antes de que vayamos a calcularlo. Sí, son 61, 60.75, que son 61 pixeles. Entonces vamos a ignorarlo ahora mismo. Ahora vamos a utilizar nuestro porcentaje HTML para controlar el tamaño en los tamaños de pantalla. Entonces vamos a copiar este código y vamos a ir a esta pantalla solo de medios. Yo lo voy a pegar dentro de esto, porque éste está relacionado con- vamos a moverlo por aquí. Yo lo voy a pegar por aquí así. Ahora, para las pantallas pequeñas, vamos a cambiar nuestro tamaño de fuente al 80 por ciento o tal vez al 85, 80 por ciento. Vamos a ponerlo en 80 por ciento. Para nuestras pantallas medianas, vamos a usar medio del sistema, vamos a usar 90 por ciento. Veamos cómo se ve o se siente esto. Sí. Ahora en la pequeña pantalla se puede ver tenemos al menos dos palabras sobre nosotros, una sola línea y se ve mejor que antes. Antes era solo palabra sola en una línea, y estaba ocupando mucha pantalla en el medio, se puede ver el tamaño va a cambiar hacia arriba. Se puede ver cómo está cambiando el tamaño en los diferentes tamaños de pantalla. El problema con esta técnica es que puedes ver que el tamaño de fuente del párrafo también cambia, y se ve un poco más pequeño en tu pequeña pantalla. Entonces si quieres ajustar eso, puedes ajustar el tamaño de fuente de tu párrafo por aquí así. Tamaño de fuente, 120 por ciento. Aumenta el tamaño porque tu HTML ya lo está disminuyendo. Vamos a copiar, lo siento. Tenemos que pegarlo aquí, así. Entonces veamos cómo se va a ver. Ahora es mejor. Se puede ver por aquí, en la pantalla media, se ve mejor. En la pantalla pequeña, de nuevo, nuestro tamaño de párrafo es mejor que antes. Esta es una solución rápida para tu tipografía receptiva, y si no sabes acerca de las consultas de medios, lees sobre ellas o aprendes sobre ellas. No es muy difícil. Veamos cuál es el efecto de esto. Entonces así es como usamos valores porcentuales para nuestro HTML, lo siento, tamaño de fuente HTML y diferentes elementos como he usado en párrafo. También puedes apuntar tus etiquetas de encabezado como H1, H2, H3, H4 y dimensionarlas usando valores porcentuales. Creo que es una técnica muy ordenada. Pero el problema es que con estos márgenes, van a lucir igual en todas las pantallas como se puede ver por aquí. Entonces si quieres ajustarlos, necesitamos la segunda técnica. Voy a incluir todos estos archivos en los recursos, así que asegúrate de que los descargues y ve el código tú mismo. Si te metes en algún problema, si no entiendes nada, solo haz preguntas. No te molestes por ello. Voy a contestar alguna de tus preguntas más tontas. Entonces no te resistas, no te preocupes, solo pregunta. Entonces pasemos a la segunda técnica, que es que vamos a utilizar dos escalas tipográficas diferentes para diferentes pantallas. Pasemos a la siguiente lección. 71. QA de estudiantes: En esta lección voy a hablar de Escalas Modulares, y voy a hablar de escalas específicamente modulares para web, móviles, y tabletas. Una de mis alumnas, se llama Sandra, y creo que está teniendo un problema para entender cómo puede usar una báscula modular diferente para un móvil y para tablet, porque en tabletas y móviles, no se puede usar un tamaño muy grande como escritorios. Te voy a mostrar usando escala modular dot com, cómo podemos elegir diferentes escalas, o tal vez podamos tener múltiples escalas, para poder utilizarlas en cualquier dispositivo; tal vez dispositivos más pequeños, diferente escala y luego tabletas, diferente escala, y para escritorios vamos a utilizar una escala diferente. Empecemos. Ahora, como se puede ver en esta escala modular dot com, mi base está establecida en 16 píxeles y la relación es 1.5, por lo que este es el valor predeterminado. Ahora, te recomiendo que no elijas a una proporción mucho mayor porque puedes ver por aquí, tienes estos 81 píxeles, así que tal vez podamos usar es de tamaño muy grande. Entonces tenemos este 54, luego 36, 24, 16 es nuestro tamaño base. Ahora si vamos a este tamaño pequeño, son casi inutilizables, por lo que no podemos usar estos 11 píxeles o 10 píxeles, porque es realmente pequeño. Ahora bien, ¿cómo resolver este problema? Ahora bien, si vas a esta relación, vamos a usar o añadir otra relación por aquí, entonces lo que vamos a hacer es, vamos a usar, solo quita esto; y vamos a usar, anota estos tamaños por aquí, 81, 54, 36, 24 y 16. Ahora, lo que vamos a hacer, es que vamos a dividir este cinco por la mitad, así que vamos a usar la mitad, que va a ser 0.25. Ahora, tenemos un conjunto separado de tamaños, que es de 61 y 49, 39 píxeles, 31 píxeles, 25, 20, 16, y ahí tenemos otro tamaño que es de 13 píxeles o 13 puntos. Este es un tamaño un poco bonito, ahora tenemos una escala muy grande, teníamos cuatro tamaños de la escala anterior, donde estábamos usando relación 1.5, así que uno, dos tres, cuatro, cinco, así que 16 es común, entonces Voy a usar estos tres, 54, 36, y 24. Entonces también podemos usar 0.25 y también podemos usar esto, 49, 39. Por ejemplo, si estás usando algún móvil, quieres tamaño móvil para tu rumbo uno, lo que el encabezado más grande, puedes usar este. Porque si usas este o tal vez 54 píxeles, será demasiado grande, así que aquí vamos. Tenemos muchas opciones de tamaños diferentes todas aquí así, y si quieres más, también puedes ir a 1.75 y tendrás diferentes tallas como 49, 28. Se puede ver este es un nuevo tamaño, 28, también, se puede ver este 85 o 86. Estos son los métodos que utilizo para obtener escala con mucho tamaño diferente. Si voy a este add, ahora puedes ver he agregado dos pantallas por aquí, he usado este plus, así que tengo dos escalas diferentes, 1.5 con esta, y si voy a ésta, puedo utilizar 1.25. Ahora, están de lado a lado, ahora se puede ver por aquí, si voy a esta mesa, se puede ver que tenemos un montón de tamaños que son realmente utilizables, y se puede ver este 61, 48, uno, dos, tres, cuatro, cinco, seis, y siete; Siete tamaños por aquí, uno , dos, tres, tamaños por aquí, así que siete y tres, tenemos mucha flexibilidad desde 16 píxeles, luego tenemos 20, 24 o 25, entonces puedes usar 31, 36, 54, 40 píxeles y 49 píxeles, entonces podemos usar 61, y luego podemos usar 81. Se puede ver aquí tenemos otra escala, entonces también se puede agregar una más, que va a ser 1.25, y se puede ver por aquí, tenemos unos tamaños más, así que 1.75, ahora se puede ver tenemos 28, que es un nuevo tamaño, 49. Ya tenemos 49, se puede ver por aquí. Si aumenta o disminuye sus valores en este rango, como pasos de usted puede decir cantidades iguales como si tenemos, por ejemplo, 1.8 como proporción. Por ejemplo, este, este es 1.8, así que voy a desplazar este a 1.6, y éste a 1.4. Se puede ver cómo estoy usando todo esto, así que es 22 luego tenemos 26, luego tuvimos 29, tres tamaños diferentes. 32, 41 y 52. De esta manera puedes tener múltiples escalas modulares, una amplia gama de diferentes tamaños y puedes utilizarlas de la forma que quieras, puedes utilizarlas en móviles. Puedes seleccionar para tres o cuatro tamaños para móviles, y puedes seleccionar solo dos o tres para escritorio, lo que así es como puedes aplicar esta báscula modular y ampliarla para cualquier aplicación. Todo esto se trata de básculas modulares y cómo puedes ampliarlo para móviles, tablets y smartphones. Creo que eso es todo, y si aún no hace tu confusión o te quita tus confusiones, puedes hacerme preguntas en cualquier momento. Nos vemos pronto en otra lección. Cuídate y adiós.