Cada imagen, cada lienzo, cada cuadro tiene una forma. Y a menudo esa forma es un rectángulo. Aún más común es un rectángulo de una proporción particular basada en el medio.
Desde cámaras a la televisión, a películas, a pantallas de computadora, cada medio tiene una forma casi distinta en sí mismo. Esto puede ser un desafío para los diseñadores, especialmente cuando tiene que recortar y convertir contenido e información para adaptarse a una variedad de medios. Debido a todas estas formas diferentes, entender las relaciones de aspecto puede ayudarlo a mover fácilmente imágenes y diseños de un medio a otro.
Relación de aspecto definida
Simplemente, una relación de aspecto es la relación proporcional entre el ancho y la altura de un rectángulo. Cuando se trabaja con relaciones de aspecto en la mayoría de los proyectos de diseño moderno, una relación de aspecto tendrá una orientación horizontal, porque la mayoría de las pantallas son más anchas que altas. (Y diseñamos en pantallas y, a menudo, para pantallas). Pero no todas las relaciones de aspecto deben tener un ancho mayor que la altura.
Una relación de aspecto se define en una relación matemática, con dos números separados por dos puntos.
- ancho: altura
- Entonces, 4 pulgadas de ancho por 3 pulgadas de alto es 4: 3
Sin embargo, la relación de aspecto no es simplemente una medida del ancho y la altura. Se reduce a la proporción utilizable más pequeña (utilizando conceptos matemáticos de la escuela primaria). Por lo tanto, para un rectángulo de 12 pulgadas de ancho por 9 pulgadas de alto, la relación de aspecto también es 4: 3 (una relación de aspecto común en la fotografía).
Relación de aspecto y fotos
Uno de los lugares donde puede ser más fácil ver y explicar las relaciones de aspecto es en fotografía. Incluso la cámara de su iPhone le permite seleccionar una relación de aspecto específica antes de tomar una foto, y luego puede cambiar la relación de aspecto en el recorte.
Las relaciones de aspecto en la fotografía a menudo están vinculadas a cómo se usará una foto. La relación de aspecto está determinada por las restricciones del medio. Publicar fotos en Instagram, por ejemplo, solo permite imágenes con una proporción de 1: 1 (cuadrado).
Tradicionalmente, las fotografías se tomaban comúnmente con una relación de aspecto de 3: 2 porque las impresiones se hacían en tamaños de 3 pulgadas por 2 pulgadas, 6 pulgadas por 4 pulgadas y así sucesivamente. Tradicionalmente, esta fórmula común dio como resultado sensores de cámara y prácticas de impresión para fotos que se combinan, lo que hace que sea muy fácil para la persona promedio tomar e imprimir imágenes.
Eso es un poco más complicado en estos días con más opciones para la manipulación digital. Pero el concepto aún funciona y todavía hay un puñado de tamaños que se utilizan más comúnmente. Fuera de los fotógrafos profesionales, diseñadores y artistas, pocas personas recortan una foto a otra cosa que no sea una de las relaciones de aspecto comunes.
Pero, ¿por qué recortar fuera de una proporción común? Para crear un interés visual dramático. Considera una imagen panorámica por un momento. ¿Tiene un sentido de drama y emoción a? Normal? la forma no lo hace. Usar una forma estándar implica armonía y equilibrio, mientras que una forma no estándar puede ser dramática y emocionante.
Relación de aspecto y video
Las relaciones de aspecto en el video son muy parecidas a la fotografía fija. La forma es bastante diferente para las pantallas de video modernas, mientras que las imágenes históricamente inmóviles y en movimiento se basaron en relaciones de aspecto similares.
Las pantallas de video se dividen en dos categorías bastante distintas en términos de relación de aspecto: pantallas de cine o películas y pantallas de televisión o computadora de escritorio. Las formas de estas pantallas están comenzando a acercarse a la misma relación de aspecto con más pantallas en el hogar que entran en la categoría de pantalla panorámica, pero todavía hay una diferencia significativa entre las dos, por lo que el buzón se usa comúnmente entre los formatos.
- Las pantallas de cine suelen ser 1.85: 1 o 1.43: 1 (IMAX)
- Las pantallas de televisión suelen ser 4: 3 o 1.33: 1 (formato más antiguo) o la proporción de pantalla panorámica más común más reciente de 16: 9 o 1.77: 1.
En términos de la web, el diseño de video para el tamaño de la pantalla varía ampliamente, pero con frecuencia se usa el formato 16: 9. Otra opción común para los diseñadores web, a menos que utilicen un video de pantalla completa, es establecer el valor predeterminado de video en la relación 16: 9 porque es el estándar utilizado para la mayoría de los reproductores y aplicaciones basados en la web, incluido YouTube.
El uso de una relación de aspecto común facilita el movimiento de un elemento de un lugar a otro y entre proyectos. Un video recortado a la proporción de 16: 9, por ejemplo, se reproducirá sin problemas en una pantalla de televisión, pantalla de computadora (de escritorio o móvil) y en un reproductor de video en línea. Esto le ahorra tiempo porque no tendrá que volver a editar o recortar el video para diferentes formatos o dispositivos, o preocuparse por partes del área de la imagen que no se verán debido a las diferencias en el tamaño de la pantalla.
Relación de aspecto y diseño responsivo
Las relaciones de aspecto también entran en juego cuando se piensa en un diseño responsivo para sitios web. Esto es especialmente cierto si desea que las imágenes y el video mantengan una forma específica en múltiples dispositivos.
Mantener una relación de aspecto específica para las imágenes en el CSS garantiza que el significado de su contenido no cambie debido a una imagen recortada. (Piense en qué tan diferente se siente una foto si la imagen completa es de dos personas que se abrazan y que en la versión recortada usted ve solo una persona y parte de los brazos de la otra. Las fotos tienen significados muy diferentes).
Al trabajar en sitios web receptivos, tiene que tomar algunas decisiones sobre las imágenes, la relación de aspecto y cómo desea que aparezcan las cosas en varias pantallas. Los diseñadores pueden cambiar el tamaño de cada imagen a mano para diferentes dispositivos o usar un poco de codificación para hacer el truco. Craig Buckler tiene un excelente tutorial sobre cómo hacer esto exactamente en Cómo mantener relaciones de aspecto de la imagen en Diseño web responsivo.
Esta es una matemática extra que también puede entrar en juego. Es probable que deba pensar en las relaciones de aspecto en términos de porcentajes. Aquí hay algunas conversiones comunes:
- 4:3 = 75%
- 3:2 = 66.66%
- 16:9 = 56.25%
- 8:5 = 62.5%
Haciendo la vida fácil
Entonces, ¿por qué todo esto importa? ¿Por qué no podemos simplemente recortar imágenes como nos gusta y seguir adelante con nuestras vidas? Puedes hacerlo, pero entender las relaciones de aspecto hará que tu vida sea más fácil.
Piense en cuántos proyectos incluyen múltiples diseños en varios lienzos: diseño de tarjetas de presentación, diseño de tarjetas postales, diseño de sitios web, diseño de carteles, publicidad en video. Si está trabajando dentro de una relación de aspecto común o diseñando elementos utilizando esa escala, mezclar y combinar piezas es fácil y no tiene que reinventar el diseño para cada nuevo elemento.
Piensa en el tiempo que puedes ahorrar.
¿Otro ahorrador de tiempo? Prueba esta calculadora de relación de aspecto. Es especialmente útil si no te sientes bien haciendo cálculos tú mismo.
Relaciones de aspecto comunes
Si bien los estándares de relación de aspecto tienden a cambiar con el tiempo, solo mire la forma dramáticamente diferente de las pantallas de TV de la década de 1950 y de hoy, puede planificar algunas de las formas y tamaños más comunes.
- 4: 3 (1.33: 1) - Televisor antiguo y formato de pantalla de computadora (1024? 768 píxeles)
- 3: 2 (1.5: 1) - Formato común de impresión de fotos, también se utiliza para tarjetas postales, tarjetas de visita y correos estándar
- 1: 1 - Estándar de imagen cuadrada (común en redes sociales y diseño de sitios web)
- 16: 9 (1.77: 1): estándar de video HD, el estándar de la pantalla de la computadora se acerca pero es impreciso (1366? 768 píxeles)
- 5: 3 (1.66: 1) - Estándar europeo de pantalla ancha
- 1.618: 1 - Proporción de oro
Conclusión
Comprender las relaciones de aspecto puede ahorrarle tiempo y volver a trabajar como diseñador. Tenga en cuenta que todas las aplicaciones comunes de conocer una pieza, una obra o un proyecto tienen la misma proporción que otra cosa. También puede ayudarlo a comprender dónde recortar y qué partes de una imagen o proyecto tendrá que soltar o recortar según el medio.
Si bien puede parecer una gran cantidad de cálculos y cálculos al inicio, es probable que muchos de los proyectos en los que trabaja utilicen relaciones de aspecto comunes. Utilice la lista de verificación anterior para ver qué partes y diseños completos puede mezclar y combinar.