¿Qué métodos puedo usar para crear equilibrio y coherencia entre un grupo de logotipos diferentes?

El Mínimo Común Denominador versus el Máximo Común Divisor Enfoque ^™

1. Defina cuánto espacio disponible tiene creando, colocando y equilibrando elementos vacíos dentro de su diseño.

   

   _{Elegí usar la proporción áurea para lo anterior (100 px x 161 px) porque es mejor trabajar con un rectángulo horizontal que con un cuadrado perfecto basado en que la mayoría de los logotipos son más anchos que altos, y la proporción áurea es tan buena un número como cualquiera cuando no tengo una buena razón para ello. Al trabajar con un montón de logotipos particularmente anchos, como los tipográficos, probablemente optaría por un lienzo más ancho.}

2. Configure un lienzo del mismo tamaño que el "espacio disponible" que definió anteriormente.

   

   _{Por lo general, elijo agregar algo de espacio / sangrado / relleno a la izquierda y a la derecha y crear guías para mantener los logotipos alejados del borde absoluto, pero no es una necesidad.}

3. Encuentre su logotipo más ancho y colóquelo en el lienzo, antes de escalarlo para que se ajuste a los bordes de las guías horizontales (o lienzo si no existen guías).

   

4. Encuentre su logotipo más alto y colóquelo en el mismo lienzo. Escálelo hasta que el texto principal en él sea aproximadamente del mismo tamaño que el texto principal en el otro logotipo colocado.

   

5. Colóquelo en un lienzo separado, céntrelo vertical y horizontalmente y luego coloque guías horizontales arriba y abajo.

   

6. Escale todos los demás logotipos para que se ajusten a estos límites.

Ahora bien, no se garantiza que este método funcione con todos los logotipos, simplemente hay demasiada variación para que un solo flujo de trabajo lo cubra todo. Sin embargo, ajustar el lienzo original (espacio disponible) en función de la forma promedio de los logotipos con los que está trabajando específicamente puede producir mejores resultados.

Solo ten en cuenta que lo mejor que puedes hacer es:

Equilibre el ancho o el alto, la cantidad de espacios en blanco y los tamaños de fuente para el texto en todo el grupo de logotipos.

Establecer estándares, incluso si son arbitrarios, puede ayudar a crear una mayor coherencia. Estos límites invisibles consistentes se notan inconscientemente, pero aún se notan.

Usé las guías para producir los logotipos de Nike y Adidas para colocarlos junto a los demás. Vea un jsFiddle en vivo también:

Tengo que confesar que, después de dimensionar los cuatro, opté por ajustar manualmente el logotipo de Saucony un poco más pequeño porque era un poco más grande que el resto. Este método es útil para crear una línea de base general, y luego, una vez que tenga todos los logotipos aproximadamente del mismo tamaño, puede seleccionar los pocos que necesitan ajustes manuales y terminarlos a ojo al final.

Creo que en ese ejemplo en particular deberías escalar los dos logotipos a una referencia que es el texto... porque cuando se trata de alinear dos logotipos que tienen textos, primero debes considerar las proporciones del texto. y en su ejemplo, las dos fuentes de los logotipos se ven similares.

1. alinear el texto a la misma línea base
2. escala los dos textos en logotipos para que tengan la misma altura.

logrará el equilibrio que busca, ya que el logotipo de adidas está más en la dirección superior mientras que el otro logotipo está hacia abajo. como se muestra a continuación

Para aquellos de ustedes que buscan hacer esto automáticamente con un CMS o Javascript, se me ocurrió una fórmula breve que puede admitir la mayoría de los tamaños de logotipo y hacerlos visualmente consistentes.

Aquí está en Javascript:

(function() {

  "use strict";

  window.onload = function() {

    var images = document.querySelectorAll(".media-images.media-images--config-dynamic .media-images__image");

    function adjustImageWidth(image) {
      var widthBase   = 50;
      var scaleFactor = 0.525;
      var imageRatio  = image.naturalWidth / image.naturalHeight;

      image.width = Math.pow(imageRatio, scaleFactor) * widthBase;
    }

    images.forEach(adjustImageWidth);

  };

}());

Luego puedes cuadricularlos y hacer lo que quieras con ellos con CSS.

Aquí hay un Codepen para jugar: https://codepen.io/danpaquette/pen/jXpbQK

Y una redacción más detallada sobre lo que está haciendo: https://danpaquette.net/read/automatically-resizing-a-list-of-icons-or-logos-so-theyre-visually-proportional/

Trabajo en una organización sin fines de lucro y tengo que hacer esto con frecuencia cuando incluyo organizaciones patrocinadoras en volantes e invitaciones. Lo que generalmente hago es comenzar por dimensionar los logotipos para que los tamaños de letra sean iguales y luego ajustarlos individualmente según el tamaño general de los logotipos en proporción entre sí.

También he tenido que hacer esto con frecuencia y se vuelve muy difícil evitar que la pieza impresa se vea como un auto de carreras de NASCAR.

Mi proceso es que empiezo haciendo las cosas del mismo tamaño y luego las modifico a ojo (a veces usando "ojos suaves" - desenfoque para que solo veas "manchas") para que estén visualmente equilibradas.

En mi opinión, la segunda opción era la más atractiva. Sin embargo, habría aumentado o modificado ligeramente la segunda inscripción de saucony. ¿No sería mejor escribir todo en una sola línea?