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 fue