Какие методы я могу использовать для создания баланса и согласованности между группой различных логотипов?

Подход с наименьшим общим знаменателем и подход с наивысшим общим фактором ^™

1. Определите, сколько свободного места у вас есть, создавая, размещая и балансируя пустые элементы в вашем дизайне.

   

   _{Я решил использовать золотое сечение для вышеуказанного (100px x 161px), потому что лучше работать с горизонтальным прямоугольником, чем с идеальным квадратом, основанным на том, что большинство логотипов шире, чем в высоту, и золотое сечение так же хорошо номер как любой, когда у меня нет для этого веских причин. Работая с кучей особенно широких логотипов, таких как типографские, я бы, вероятно, выбрал более широкий холст.}

2. Настройте холст того же размера, что и «доступное пространство», которое вы определили ранее.

   

   _{Обычно я добавляю пробелы/обрезы/отступы слева и справа и создаю направляющие, чтобы логотипы не касались абсолютного края, но это не обязательно.}

3. Найдите свой самый широкий логотип и поместите его на холст, прежде чем масштабировать его, чтобы он соответствовал краям горизонтальных направляющих (или холста, если направляющих нет).

   

4. Найдите свой самый высокий логотип и поместите его на тот же холст. Масштабируйте его до тех пор, пока основной текст в нем не станет примерно того же размера, что и основной текст в другом размещенном логотипе.

   

5. Поместите его на отдельный холст, отцентрируйте по вертикали и горизонтали, а затем разместите над ним и под ним горизонтальные направляющие.

   

6. Масштабируйте все остальные логотипы, чтобы они соответствовали этим границам.

Нет гарантии, что этот метод будет работать с каждым логотипом, просто существует слишком много вариаций для одного рабочего процесса, чтобы охватить все. Однако настройка исходного холста (доступного пространства) на основе средней формы логотипов, с которыми вы конкретно работаете, может дать лучшие результаты.

Просто имейте в виду, лучшее, что вы можете сделать, это:

Сбалансируйте ширину или высоту, количество пробелов и размеры шрифта для текста в группе логотипов.

Установление стандартов, даже если они произвольны, может помочь добиться большей согласованности. Эти постоянные невидимые границы подсознательно замечаются, но все же замечаются.

Я использовал направляющие для создания логотипов Nike и Adidas, чтобы они располагались рядом с другими. Смотрите также живой jsFiddle :

Должен признаться, после того, как я подобрал все четыре размера, я решил вручную изменить логотип Saucony на прикосновение меньше, потому что он был немного больше, чем остальные. Этот метод полезен для создания общего базового плана, а затем, когда все логотипы будут примерно одинакового размера, вы можете выбрать те немногие, которые требуют ручной настройки, и закончить их на глаз в конце.

Я думаю, что в этом конкретном примере вы должны масштабировать два логотипа до одной ссылки, которая является текстом ... потому что, когда речь идет о выравнивании двух логотипов с текстами, вы должны сначала учитывать пропорции текста. и в вашем примере два шрифта логотипов выглядят одинаково.

1. выровнять текст по той же базовой линии
2. масштабируйте два текста в логотипах, чтобы они имели одинаковую высоту.

вы достигнете баланса, который вы ищете, поскольку логотип adidas больше направлен вверх, а другой логотип идет вниз. как показано ниже

Для тех из вас, кто хочет сделать это автоматически с помощью CMS или Javascript, я придумал короткую формулу, которая может принимать логотипы практически всех размеров и делать их визуально согласованными.

Вот это в 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);

  };

}());

Затем вы можете создать сетку и делать с ними все, что захотите, с помощью CSS.

Вот Codepen, с которым можно поиграть: https://codepen.io/danpaquette/pen/jXpbQK .

И более подробный отчет о том, что он делает: https://danpaquette.net/read/automatically-resizing-a-list-of-icons-or-logos-so-theyre-visually-proportional/

Я работаю в некоммерческой организации, и мне часто приходится это делать, когда я указываю спонсорские организации в листовках и приглашениях. Что я обычно делаю, так это начинаю с размера логотипов, чтобы размеры шрифта были одинаковыми, а затем настраиваю индивидуально на основе общего размера логотипов пропорционально друг другу.

Мне также приходилось делать это часто, и становится очень трудно сделать так, чтобы печатная часть не выглядела как гоночный автомобиль NASCAR.

Мой процесс заключается в том, что я начинаю с того, что делаю вещи одинакового размера, а затем настраиваю их на глаз (иногда используя «мягкие глаза» — расфокусировку, чтобы вы видели только «капли»), чтобы они были визуально сбалансированы.

На мой взгляд, второй вариант был наиболее привлекательным. Однако я бы немного увеличил или немного изменил вторую надпись saucony. Не лучше ли написать все в одну строку?