Как сделать размеры логотипа

Обновлено: 06.07.2024

Чтобы изменить размеры логотипа на всех устройствах, перейдите в Внешний вид > Настроить > Блоки > Шапка и в полях “Максимальная ширина логотипа” и “Максимальная ширина логотипа” укажите нужные размеры логотипа.

Попробуйте изменить не только ширину логотипа, но и высоту.

Чтобы изменить размеры логотипа на мобильном, перейдите в Внешний вид > Настроить > Дополнительные стили и добавьте код

@media (max-width: 575px) .site-logotype img max-width: 265px;
max-height: 100px;
>
>

Вместо 265px и 100px укажите нужную ширину и высоту логотипа на мобильном.

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

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

Размер логотипа для соцсетей

Размер логотипа для сайта

После того, как вы получили готовый файл (желательно в формате PNG с прозрачным фоном), то наверняка захотите загрузить его на свой сайт.
Чаще всего размер логотипа не слишком большой — 250 пикселей в ширину и 100 в высоту, однако если вы желаете использовать другой размер — всё в ваших руках. Ниже мы расскажем вам, как изменить размер логотипа.
Вот несколько размеров логотипа для сайта:
Горизонтальная ориентация:
— 250 px x 150 px
— 350 px x 75 px
— 400 px x 100 px
Вертикальная или квадратная ориентация:
— 160 px x 160 px
Как создать логотип для сайта и загрузить его на сайт читайте в этой статье.

Размер фавикона для сайта:

Фавикон – это небольшая иконка, содержащая, как правило, логотип, первую букву бренда или характерное изображение, отражающее тип бизнеса или тематику сайта.
Размеры фавикона:
— 16 px x 16 px
— 32 px x 32 px
— 48 px x 48 px
Что такое фавикон, как создать и загрузить его на сайт, читайте в этой статье.

Размер логотипа для печати:

Разработка логотипа – это не такой лёгкий процесс, как может показаться на первый взгляд. Над некоторыми работают целые студии и команды профессиональных дизайнеров и маркетологов. Правда, даже самые лучшие дизайн студии используют для создания логотипов специализированные программы, которые имеются в открытом доступе. Одна из таких программ – Adobe Photoshop. Она идеально вам подойдёт в том случае, если требуется сделать простой логотип собственными силами. Вы, конечно же, может в нём сделать и более сложное лого, но для этого потребуется очень хорошо знать и уметь работать с программой.

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

Как создать логотип в Adobe Photoshop

Для создания логотипа мы бы больше рекомендовали использовать программу Adobe Illustrator. Она во многом похожа на Фотошоп, а также поставляется от одного разработчика, однако весь её функционал заточен именно на работу с векторной графикой – иллюстрации, логотипы и т.д.
Однако и в Фотошопе можно сделать полноценный логотип. Для удобства восприятия материала поделим весь процесс на этапы, для каждого из которых дадим подробную инструкцию. Правда, для того, чтобы создать лого по этим инструкциям вам всё равно потребуются хотя бы самые базовые навыки работы в программе, а также представления об её интерфейсе и функциях.

Этап 1: Настройка документа

Перед тем, как приступать к работе, нужно создать сам документ. Здесь нет каких-либо чётких требований, которые были бы стандартны для всех случаев. Вам может потребоваться документ со совсем другими параметрами, нежили те, которые рассматриваются в статье. Мы же создадим документ по максимально стандартным параметрам, что используются при создании логотипов:

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

Этап 2: Создание первичных форм

Для начала определитесь, как будет выглядеть ваш будущий логотип. Возможно, вам хватит только тех примитивных фигур, которые по умолчанию уже представлены в Фотошопе, а возможно, что вполне вероятно, эти фигуры придётся дополнительно редактировать. Итак, давайте рассмотрим весь процесс в деталях:

В панели инструментов Фотошопа выберите нужную вам фигуру – круг, прямоугольник, многоугольник и т.д.
Обратите внимание, что при выборе той или иной фигуры вы можете настраивать её определённые параметры. Настройка этих элементов расположена в верхней части рабочей области. Здесь, обычно, меняется цвет самой формы, настраивается обводка, устанавливаются какие-либо дополнительные значения, например, количество углов. В качестве примера мы выбрали прямоугольник.

Обратите внимание, что все созданные вами фигуры автоматически переносятся на новые слои, благодаря чему вы можете редактировать каждую из них в отдельности и в любой момент времени. Также с помощью слоёв можно перемещать её позицию относительно других объектов композиции. Однако, если вы используете старые версии Фотошопа, то рекомендуется для каждой отдельной фигуры создавать новый слой, чтобы вы могли быстро вернуться к её редактированию.

Обратите внимание, что вы можете задать абсолютно произвольный цвет заливки фигуры. Окончательный цвет будет подобран вами позже в зависимости от самой композиции.

Этап 3: Расстановка элементов

По сути самое сложное уже позади. Теперь вам осталось полученные формы размножить и разместить в нужном порядке, а также подкорректировать, если вам это будет необходимо. Изначально рассмотрим, как можно размножить получившиеся элементы:

Этап 4: Заливка фигур

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

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

Этап 5: Добавление текста

В большинстве логотипов добавляется текст, где пишется наименование компании и, не всегда, слоган фирмы. Текст добавляется и редактируется следующим образом:

Этап 6: Сохранение документа

Завершив работу над логотипом вам нужно его сохранить для дальнейшего использования. Это наиболее простой этап из всех рассмотренных в инструкции:

PSD – это формат самого Photoshop, в который программа предлагает сохранить файл по умолчанию. Рекомендуется обязательно иметь при себе файл логотипа с данным расширением. Дело в том, что в таком случае вы сможете снова открыть его в Фотошопе, если вдруг придётся что-то отредактировать спустя некоторое время;
PDF – тоже распространённый формат. В зависимости от настроек сохранения его можно будет также впоследствии открыть в Фотошопе для дальнейшей работы с логотипом;
PNG – это обычная картинка с прозрачным фоном. Редактировать её также, как два предыдущих расширения не получится, но вы сможете вставить её в какой-нибудь документ или другой файл при необходимости;
JPG – во многом похож на предыдущий вариант, но фон у него заливается каким-либо цветом, обычно белым, если не задан другой.

Рекомендуется сохранять готовую работу во всех или как минимум в первых трёх из указанных форматов. Это необходимо в тех случаях, если вам, например, вдруг потребуется отредактировать логотип и/или вставить его в какой-либо документ. Также стоит упомянуть, что Фотошоп поддерживает сохранение и в других форматах, однако их использование целесообразно только в каких-то отдельных случаях.

Создать логотип в Adobe Photoshop можно без каких-либо серьёзных проблем. Попрактивовшись и получив более широкое представление о различных функциях Фотошопа, вы сможете сами без проблем делать и более сложные логотипы уже без инструкций.

Вы открыли бизнес! Поздравляем! Вашей компании понадобится привлекательное лого, которое станет частью вашего бизнес-образа. VistaCreate – идеальный инструмент, чтобы создать такой логотип за пару минут.

Бесплатно. Кредитная карта не нужна.

Конструктор бизнес-логотипов, который нравится всем

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

Лого мечты при помощи простого конструктора

Бесплатный конструктор лого для новичков и профессионалов
В VistaCreate не нужно тратиться на дорогих дизайнеров, чтобы создавать запоминающиеся лого.

Готовые шаблоны лого для любого бизнеса

Делайте ставку на крутой логотип! Для 50% брендов сильное лого – хороший помощник в достижении бизнес-целей. Выбирайте нужный шаблон логотипа из бесплатной коллекции VistaCreate и создавайте wow-лого быстро и без лишних усилий.

Загрузка шрифтов без ограничений

Создайте логотип, который идеально отразит суть бренда. В онлайн-конструкторе лого VistaCreate можно выбрать любой шрифт из внутренней коллекции или загрузить свои.

Свой контент для лого

Нашли идеальный шаблон для лого? Теперь сделайте его дизайн чуть более авторским. Замените цвета, фигуры или шрифты одним кликом – или загрузите изображения из веба. В VistaCreate сделать лого в своем стиле очень просто – дрэг-энд-дроп поможет.

Простой и удобный редактор

Идеальный результат – в ваших руках. Бесплатный конструктор логотипов VistaCreate поможет создать лого мечты. Вы можете всё: перемещать объекты между слоями, ставить надписи, добавлять прозрачность, обрезать изображения, группировать элементы и многое другое. Попробуйте VistaCreate – и влюбитесь в него!

Прозрачный фон

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

Внушительная коллекция дизайн-объектов

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

Безграничные возможности дизайна с

Творческие ресурсы

Используйте 50K+ шаблонов и скачивайте без ограничений
Доступ к 50M+ лицензионных фотографий, видео и векторных изображений
Первоклассные шрифты, музыка, фоны и объекты дизайна

Возможности продукта

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

Почему стоит выбрать онлайн-конструктор логотипов VistaCreate?

Простой в использовании – VistaCreate – понятный и удобный. Вы можете создавать контент для своего бизнеса буквально за секунды.

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

Все онлайн – VistaCreate работает на любом устройстве и операционной системе. Тут можно создавать логотипы онлайн парой кликов и без сложных программ.

Безграничные дизайн-возможности – У вас под рукой огромная коллекция иконок, изображений, дизайн-объектов и цветов – выбирайте то, что нравится. Здесь вы сможете реализовать любую дизайн-идею.

Это перевод двух частей статьи Джереми Франка (Jeremy Frank) Responsive Logos. Часть 1, Часть 2. Я заметил, что когда дело доходит до адаптивного дизайна, логотипы зачастую используются не лучшим образом. В большинстве случаев логотип просто сжимается настолько, насколько это необходимо, чтобы заполнить отведенное ему пространство на странице.

Использование гайдов по фирменному стилю

Хорошо продуманные фирменные стили, как правило, предусматривают несколько вариаций логотипа для разных случаев. Горизонтально и вертикально ориентированные, сокращенные, полные и т.д. В руководстве по фирменному стилю перечислены все допустимые вариации, так что вы можете посмотреть в руководство и решить, как должен выглядеть логотип в соответствии с теми или иными пространственными ограничениями.

Например, недавно я работал с Университетом Пенсильвании. В руководстве по фирменному стилю у них предусмотрена специальная сокращенная версия логотипа, предназначенная для использования в малых размерах.

В сокращенной версии логотипа нет расшифровки текстовой части, а текстовый логотип увеличен так, чтобы соответствовать гербу по высоте. Сравните, как каждая из двух версий работает в небольшой шапке на экране шириной в 320 пикселов, и вы увидите, что сокращенная версия читается куда лучше.

Что делать, если нет руководства по стилю? Действуйте с осторожностью

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

Вот несколько советов для начала:

Уменьшение детализации

Хотя логотипы с замысловатыми деталями встречаются не так уж часто, тем не менее, в таких случаях уменьшение количества деталей поможет значительно улучшить читаемость в малых размерах. Формы с высокой детализацией могут быть сглажены, тонкие штрихи можно сделать толще, элементы, очерченные контуром, можно залить или инвертировать. Логотип Argento и их стиль выступает отличным примером описанных приемов.

Для каждой версии уровень детализации соответственно снижается, что заметно сказывается на читаемости логотипа.

Горизонтально и вертикально ориентированные блоки

Это, пожалуй, самый простой и распространенный способ адаптации логотипа, когда графический знак располагается над или сбоку от текстовой части, в зависимости от пропорций носителя. Логотип Case-Mate замечательно иллюстрирует этот прием.

Пошаговое сокращение

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

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

Теперь мы переходим к практической реализации описанных выше примеров в пользовательских интерфейсах.

CSS-спрайты и подкачка картинок

CSS-спрайты — наиболее распространенный метод, используемый для отображения разных картинок в разных случаях. Он хорошо работает, но подразумевает создание спрайта для каждой версии логотипа, а в идеале, для каждого разрешения, для которого вы разрабатываете интерфейс. Другой вариант — использовать новые адаптивные способы отображения картинок, но, к сожалению, они не всегда поддерживаются, и также требуют создания отдельных изображений для каждой версии логотипа. Ни тот, ни другой вариант не представляется по-настоящему удовлетворительным.

Адаптация логотипов с помощью inline SVG

К счастью, есть гораздо лучший способ, который обеспечивает независимость от разрешения и реализацию в одном файле. В адаптации с помощью inline SVG используется один файл SVG для логотипа, CSS media queries для настройки, и, при необходимости, капля JavaScript. Вот как это выглядит:

Логотип отображается на странице как inline SVG;
Размер логотипа определяется с помощью CSS media queries;
Настройте расположение, цвет, видимость отдельных частей логотипа для каждого случая с помощью CSS media queries;
Если пропорции логотипа должны меняться, настройте это с помощью свойства SVG viewBox для каждого случая, используя JS.

Пример 1. Университет Пенсильвании

Так как логотип в меньшей версии должен быть чуть выше, чтобы соответствовать гербу, свойство viewBox элемента SVG должно быть выставлено так, чтобы логотип не обрезался справа из-за большей общей ширины. Я взял значение из Иллюстратора, просто изменив общий размер и округлив значение.

Пример 2. Argento Wine

В этом примере используются три состояния логотипа: большая версия по умолчанию, средняя с меньшим количеством деталей в знаке, и маленькая, только со знаком.

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

Пример 3. Case-Mate

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

Как всегда, следите за свойством viewBox.

Пример 4. NOAA

Пример использует три состояния: основная большая версия, средняя версия без окружающего текста и меньшая версия, включающая только знак.

Это самый простой пример, так как меняется только прозрачность элементов. Нет необходимости в JavaScript, так как пропорции всегда квадратные. Свойство viewBox настройки не требует.

Бонус. Инъекция SVG

Еще более рациональный подход — использовать инъекции SVG. По существу, этот способ использует обычный тэг img для создания ссылки на внешний SVG файл, и JavaScript для загрузки соответствующей разметки. Для этой цели я рекомендую пользоваться легкой библиотекой SVGInjector.

Заключение

Формат SVG отлично подходит для реализации независящих от разрешения логотипов. В сочетании с настройкой с помощью CSS media queries и инъекцией SVG вы получаете надежный способ реализации адаптивных логотипов в пользовательских интерфейсах.

Читайте также: