Metode apa yang dapat saya gunakan untuk menciptakan keseimbangan dan konsistensi antara sekelompok logo yang berbeda?

Tantangan rutin yang saya hadapi adalah menyeimbangkan dua (atau lebih) logo. Apakah mereka harus setara atau harus diberi prioritas. Namun beberapa logo mungkin kotak, yang lain persegi panjang, lingkaran, dll ...

Sebagai contoh cepat, saya mengambil foto resolusi tinggi yang bagus dari Unsplash dan berpura-pura itu akan menjadi iklan yang perlu menunjukkan beberapa logo merek sepatu di atasnya. Dalam hal ini saya menggunakan Adidas dan Saucony.

Ini tentu saja tidak seimbang walaupun tingginya sama:

Demikian juga ini tidak seimbang meskipun lebarnya sama:

Jadi pertanyaannya adalah kapan mereka seimbang, apakah keseimbangan ini:

Mungkin sedikit lebih penyesuaian, apakah keseimbangan ini:

Dan dalam contoh-contoh ini saya hanya bekerja dengan dua Logo Hitam. Faktor dalam warna dan itu bisa menjadi lebih sulit untuk diseimbangkan. Masalah lainnya adalah ketika ada teks kecil sebagai bagian dari logo.

Jadi pertanyaannya adalah, selain mengestimasi / eye-balling itu, tips, metode atau bahkan alat apa yang ada untuk menyeimbangkan logo berukuran berbeda?

Denominator Umum Terendah vs. Pendekatan Faktor Umum Tertinggi ^™

1. Tentukan berapa banyak ruang yang tersedia yang Anda miliki dengan membuat, menempatkan, dan menyeimbangkan elemen kosong dalam desain Anda.

   

   _{Saya memilih untuk menggunakan Rasio Emas untuk yang di atas (100px x 161px) karena lebih baik bekerja dengan persegi panjang horizontal, daripada dengan kuadrat sempurna berdasarkan sebagian besar logo yang lebih lebar daripada tingginya, dan rasio emas sama baiknya sebuah angka sama seperti ketika saya tidak memiliki alasan yang baik untuk itu. Bekerja dengan banyak logo yang sangat lebar seperti yang tipografi, saya mungkin akan pergi dengan kanvas yang lebih luas.}

2. Siapkan kanvas dengan ukuran yang sama dengan "ruang yang tersedia" yang Anda tentukan sebelumnya.

   

   _{Saya biasanya memilih untuk menambahkan beberapa ruang / perdarahan / padding di kiri dan kanan dan membuat panduan untuk menjaga logo jauh dari tepi absolut, tetapi itu bukan keharusan.}

3. Temukan logo terluas Anda dan letakkan di kanvas, sebelum penskalaan agar sesuai dengan tepi panduan horizontal (atau kanvas jika tidak ada panduan).

   

4. Temukan logo tertinggi Anda dan letakkan di kanvas yang sama. Ubah skala hingga teks utama di dalamnya berukuran kira-kira sama dengan teks utama di logo yang ditempatkan lainnya.

   

5. Letakkan di atas kanvas yang terpisah, pusatkan secara vertikal dan horizontal, lalu letakkan pemandu horizontal di atas dan di bawahnya.

   

6. Skala semua logo lain agar sesuai dengan batas-batas ini.

Sekarang metode ini tidak dijamin untuk bekerja dengan setiap logo, ada terlalu banyak variasi untuk alur kerja tunggal untuk mencakup semuanya. Namun, menyesuaikan kanvas asli (ruang yang tersedia) berdasarkan bentuk rata-rata dari logo yang khusus Anda kerjakan dapat menghasilkan hasil yang lebih baik.

Perlu diingat, hal terbaik yang dapat Anda lakukan adalah:

Seimbangkan lebar atau tinggi, jumlah spasi putih, dan ukuran font untuk teks di seluruh grup logo.

Menetapkan standar, meskipun bersifat arbitrer, dapat membantu menciptakan konsistensi yang lebih kuat. Batas - batas tak kasat mata yang konsisten ini secara tidak sadar diperhatikan, tetapi masih diperhatikan.

Saya menggunakan panduan untuk menghasilkan logo Nike dan Adidas untuk duduk bersama yang lain. Lihat jsFiddle langsung juga:

Saya harus akui, setelah saya mengukur keempatnya, saya memilih untuk mengubah logo Saucony secara manual menjadi lebih kecil karena sedikit lebih besar daripada yang lain. Metode ini berguna untuk membuat garis dasar secara keseluruhan, dan kemudian setelah Anda memiliki semua logo pada ukuran yang kira-kira sama, Anda dapat memilih beberapa yang membutuhkan penyesuaian manual dan menyelesaikannya dengan mata di akhir.

Saya pikir dalam contoh khusus Anda harus skala kedua logo baik untuk satu referensi yang merupakan teks ... karena ketika datang dengan menyelaraskan dua logo yang memiliki teks, Anda harus mempertimbangkan proporsi teks terlebih dahulu. dan dalam contoh Anda dua font logo terlihat serupa.

1. menyelaraskan teks ke baris dasar yang sama
2. skala kedua teks dalam logo memiliki ketinggian yang sama.

Anda akan mencapai saldo yang Anda cari karena logo adidas lebih ke arah atas sementara logo lainnya turun. seperti yang ditunjukkan di bawah ini

Bagi Anda yang ingin melakukan ini secara otomatis dengan CMS atau Javascript, ada rumus pendek yang saya buat yang dapat mencakup hampir semua ukuran logo dan membuatnya konsisten secara visual.

Ini dia dalam 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);

  };

}());

Kemudian Anda dapat mem-gridnya dan melakukan apa pun yang Anda suka dengan CSS.

Berikut adalah Codepen untuk bermain-main dengan: https://codepen.io/danpaquette/pen/jXpbQK

Dan menulis lebih rinci tentang apa yang dilakukannya: https://danpaquette.net/read/automatically-resizing-a-list-of-icons-or-logos-so-theyre-visually-proportional//

Saya bekerja di organisasi nirlaba dan harus sering melakukan ini ketika menyertakan organisasi sponsor dalam selebaran dan undangan. Apa yang biasanya saya lakukan adalah mulai dengan ukuran logo sehingga ukuran jenisnya sama, dan kemudian men-tweak secara individual berdasarkan ukuran keseluruhan dari logo secara proporsional satu sama lain.

Saya juga harus sering melakukan ini dan sangat sulit untuk menjaga agar cetakan yang dicetak tidak terlihat seperti mobil balap NASCAR.

Proses saya adalah saya mulai dengan membuat benda-benda dengan ukuran yang sama dan kemudian men-tweak dengan mata (kadang-kadang menggunakan "mata lembut" - defocusing sehingga Anda hanya melihat "gumpalan") sehingga mereka seimbang secara visual.

Menurut saya pilihan kedua adalah yang paling menarik. Namun, saya akan sedikit meningkatkan atau sedikit memodifikasi prasasti kedua dari saucony. Bukankah lebih baik menulis semuanya dalam satu baris?