Нюансы и секреты масштабирования в дизайне

При выставлении стоимости услуг на масштабирование (уменьшение) какого-либо дизайн-объекта мы часто получаем от клиента удивленный вопрос: «Там работы на пять минут, просто уменьшите картинку – и всё». Возможно, со стороны это выглядит именно так, но так ли это на самом деле? Давайте разберемся вместе.

Что такое масштабирование, и так ли это просто?

Википедия дает следующее определение масштабирования изображения: это изменение размера цифрового изображения с сохранением пропорций. Под масштабированием подразумевается как увеличение («апскейлинг» от англ. upscaling), так и уменьшение («даунскейлинг», англ. downscaling) разрешения изображения.

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

В нашем частном случае речь пойдет в основном о векторных изображениях. Начнем с самого простого примера – масштабирование логотипа. Допустим, вы используете логотип на обложке ежедневника, фирменной папки, плакате, баннере в интернете. Тут особых проблем у вас не возникнет. Но, предположим, дошло дело до изготовления визитки. Да, ими по-прежнему активно пользуются! При уменьшении размера логотипа нужен особый подход. Где-то нужно поменять композиционное расположение элементов, чтобы сохранить образ логотипа. Где-то исключить эмблему и оставить лишь графему, чтобы сохранить читаемость букв. В некоторых случаях требуется скорректировать толщины линий, расстояния между элементами и тому подобное. Поэтому по завершении разработки дизайна логотипа в нашем агентстве Muhina Branding&design мы предоставляем клиенту гайдлайн с базовыми правилами использования логотипа. Что такое гайдлайн и чем он отличается от брендбука мы писали тут.

Если провести аналогию, то гайдлайн – это подобие инструкции при покупке техники. Да, можно не читать инструкции и пользоваться устройством по наитию. Но если вникнуть в предлагаемые возможности техники, в итоге получится пользоваться её максимальным функционалом. Мы рекомендуем тщательно изучать гайдлайн, обращаться к нему при разработке и утверждении всех носителей фирменного стиля, ознакомить с ним вашего маркетолога и дизайнера и не отходить от прописанных в нем базовых правил, одним из которых является масштабирование. Этой теме в гайдлайнах Muhina Branding&Design посвящен целый раздел. В нем мы рассказываем, какого размера должен быть логотип, определяем его максимальную и минимальную величину, приводим примеры с иллюстрациями к каждой вариации его использования при разном масштабе и на разных поверхностях.

А теперь перейдём из мира реального в мир виртуальный. Где может быть использована фирменная айдентика компании?

На сайте.
На рекламных баннерах.
В электронных рассылках и письмах.
При создании аватара для социальных сетей.
При разработке фавикона.

Многие из вышеперечисленных носителей айдентики нуждаются в индивидуальном дизайне. Например, фавикон. Это не просто уменьшенная копия логотипа компании, а крошечное изображение логотипа размером 16х16 пикселей, где абсолютно нет места лишним деталям. Аватар в социальных сетях тоже часто нуждается в особом подходе, а не в прямом масштабировании основного логотипа.

Ну, а если речь идет о крупных растровых объектах – фотографиях или зd-визуализациях? Допустим, клиент заказал фотографии для интернет-магазина. Основная их задача – презентовать товар клиента потребителю в лучшем его виде, при этом изображения должны быстро загрузиться браузером. Значит, картинки будут небольшого размера и разрешения. А если заказчику требуется фотография с возможностью большого увеличения и детализации? Такое нужно обговаривать «на берегу»! Растровые изображения всегда проще уменьшить, чем увеличить – и это напрямую влияет на стоимость услуг ретуши и подготовки изображений к публикации в интернете.

На сайте.
В рекламных баннерах.
Электронных рассылках и письмах.
Аватаре в социальных сетях.
Фавиконе.

А если речь идет о растровых крупных объектах – фотографиях или зd-визуализациях? Допустим, клиент заказал фотографии для интернет-магазина. Основная их задача – презентовать товар клиента потребителю в лучшем его виде, при этом изображения должны быстро загрузиться браузером. Значит, картинки будут небольшого размера и разрешения. А если заказчику нужно, чтобы фотографию можно было увеличить, чтобы рассмотреть детально? Такое нужно обговаривать на берегу! Растровые изображения всегда проще уменьшить, чем увеличить, и это напрямую влияет на стоимость услуг ретуши и подготовки изображений к публикации в интернете.

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

Недавно мы рассказывали, как разрабатывали стикерпак для кофейного бренда Coffee Lebo. Его можно посмотреть тут и тут, но прежде дочитайте эту статью.

Мы впервые делали анимированный стикерпак, поэтому для нас некоторые вещи тоже стали открытием. И – да, для ставшего уже практически родным заказчика мы беремся даже за непривычные задачи. Мир меняется, мы меняемся вместе с ним, а с вами делимся знаниями. Мы не жадные.

Только команда агентства закончила второю часть работы над стикерпаками, как получила заказ на создание фирменных эмоджи для реакции на сообщения. И тут история повторяется. Сделать маленький эмоджи из стикера – это не просто уменьшить его в размере. Зачастую эмоджи и стикеры одного бренда имеют один стиль, но разный дизайн, так как разница в размере при отображении на экране смартфона между первоначальным объектом – стикером – и эмоджи очень большая. Стандартный стикер при отображении на мониторе имеет размер 512х512 пикселей, тогда как размер экранного отображения эмоджи – 100х100 пикселей. В эти сто пикселей нужно уместить изображение, передающее заданную эмоцию, используя лаконичные и выразительные графические приёмы. В дизайне же стикера мы можем играть, шутить, наполнять его эстетикой и дополнительными смыслами. Видите разницу? Разный функционал = разный дизайн.

Ну что, теперь слово «масштабирование» звучит для вас уже не так легковесно, как заявленное в начале «просто уменьшить», правда? Мы на собственном опыте понимаем, что сталкиваясь с такой задачей впервые, подчас недоумеваешь от незнания процессов работы над дизайном, поэтому всегда терпеливо объясняем такие моменты нашим клиентам. Надеемся, что эта статья поможет вам лучше понять «кухню» дизайна, более четко представлять суть работы дизайнера и получать лучший результат от совместных проектов. Со своей стороны заявляем, что с радостью поможем вам создать уникальный набор стикеров и эмоджи для вашего бренда.