Не удалось сохранить логотип неверное соотношение сторон логотипа
Обновлено: 04.07.2024
В объявления, которые вы публикуете в сервисах Google, можно добавить логотип вашего магазина.
Ниже рассказывается, где и как это сделать. Обратите внимание, что не всем продавцам обязательно загружать свой логотип. Это требование зависит от программы, в которой вы участвуете.
О том, как добавить элементы брендинга в рамках программы Прямые покупки, рассказывается в этой статье.Порядок действий
Пользователи просматривают объявления на разных устройствах с экранами различного разрешения, поэтому логотипы должны отвечать определенным требованиям.
Например, в качестве квадратного логотипа мы рекомендуем использовать изображение, которое хорошо смотрится на небольших экранах. Это может быть значок сайта или фирменный знак, который вы размещаете в своих профилях в социальных сетях. Имейте в виду, что названия бренда на таком изображении быть не должно. Для прямоугольного логотипа можно загрузить картинку с названием своей марки. Тогда пользователи сразу будут понимать, о каком продавце идет речь.
Как загрузить новый логотип
Как изменить логотип
Наши специалисты всегда проверяют все логотипы. В первую очередь мы рассматриваем изображения, отправленные участниками программ Merchant Center, где он обязателен. Если логотип будет одобрен, изображение обновится автоматически.
Требования к изображениям
В качестве логотипов можно использовать только изображения, которые соответствуют приведенным ниже требованиям. Мы советуем загрузить и квадратный, и прямоугольный логотип, чтобы в зависимости от ситуации в объявлении отображался наиболее подходящий из них.
Примечание. В программе "Прямые покупки" действуют другие требования. Подробнее…Квадратные логотипы
- Тип изображения. Загружайте логотипы, которые хорошо смотрятся на мобильных устройствах, например значки сайтов или небольшие изображения, которые вы используете в социальных сетях. Примечание. На квадратном логотипе название магазина указывать не нужно.
- Соотношение сторон. Квадратные логотипы должны иметь соотношение сторон 1:1.
- Тип файла. Допускаются форматы SVG, PNG и JPG. Мы рекомендуем использовать первый вариант, так как SVG-изображения отлично видны практически на всех устройствах. У изображений форматов PNG и JPG минимальный размер должен составлять 500 x 500 пикселей, а максимальный – 2000 x 2000.
- Размер файла. Можно загружать изображения размером не более 5 МБ.
Примеры квадратных логотипов
Вокруг основного логотипа, то есть буквы "G",
слишком много пустого места, заполненного белым цветом.
Как загрузить свой логотип
- Размеры логотипа не должны превышать 300 x 80 px
- Назовите логотип латиницей, но не logo.jpg?v=1588600934, а например mylogo.jpg?v=1588600934 ***
- Загрузите логотип в папку img Вашего шаблона (если у Вас стоит например "синий со смешанным фоном", то называться он будет electro_blue_bw) (Администрирование - Файлы и папки - Bitrix - Templates - Ваш шаблон - Img)
- В редактируемой области через редактирование как php вставьте код
<a href="<?=SITE_DIR?>" ><img src="<?=SITE_TEMPLATE_PATH?>/images/mylogo.jpg?v=1588600934" alt="" title=""></a>
* Если Вы используете светлую цветовую гамму, то для подвала (футера) сайта Вам потребуется другой логотип, размеры те же, только нужно, чтобы текст на нем был светлый, иначе логотип сольется с фоном сайта. Процедура загрузки аналогична основному логотипу
Возможные ошибки при загрузке логотипа
*** Если Вы назовете логотип logo.jpg?v=1588600934 и загрузите его в папку с Вашим шаблоном, то при обновлении или переустановке решения Ваш логотип заменится нашим демонстрационным
Есть и другие способы загрузки логотипа на сайт, например через визуальный редактор битрикса, но при использовании такого метода, Вы можете столкнуться со следующими проблемами:
- Логотип стал не кликабельным
- Логотип не центрируется по высоте (съехал наверх или вниз)
- Логотип не правильно отображается на разных разрешениях экрана
- Логотип имеет не правильные размеры
Загрузка логотипа для мобильной версии сайта
Для мобильной версии сайта требуется загрузка отдельного логотипа, способ загрузки такой же, как и для основной версии сайта, только загружать следует в другой шаблон. Шаблоны мобильной версии в структуре сайта называются m_electro (начинаются с буквы m), т.е. путь к папке с картинками будет (Администрирование \ Файлы и папки \ Bitrix \ Templates \ m_electro \ Img)
Если вы занимаетесь фронтенд-разработкой, то вам, возможно, приходится создавать разделы сайтов, содержащие логотипы каких-то компаний. На первый взгляд эта задача может показаться очень простой. Но, когда дело доходит до выравнивания и центровки логотипов, выясняется, что всё сложнее, чем кажется. Кроме того, тут стоит сказать о том, что изображения логотипов могут иметь разные размеры, и о том, что некоторые логотипы имеют вертикальную ориентацию, а некоторые — горизонтальную.
В этом материале я собираюсь рассмотреть различные способы размещения группы логотипов на странице, различные подходы к их качественному выравниванию средствами CSS. Полагаю, что статья понравится веб-дизайнерам, так как приёмы, о которых пойдёт в ней речь, помогут им упростить решение задачи по идеальному выравниванию логотипов в соответствующих разделах сайтов, над которыми они работают.
Пара слов о дизайне
Прежде чем мы углубимся в CSS-код и в разговор о том, как лучше всего организовывать и стилизовать логотипы различных размеров, мне хотелось бы немного рассказать о том, как я, выступая в роли дизайнера, работаю с логотипами в специальном приложении. Здесь я буду говорить о приложении Sketch, но вы можете пользоваться любым другим подобным инструментом.
Итак, у меня есть восемь логотипов, которые нужно разместить в сетке. Первым делом я их выделяю и перетаскиваю в рабочую область Sketch.
Выглядит эта куча логотипов весьма некрасиво. Давайте это исправим.
Выделяя логотипы, проверьте, чтобы соотношение их ширины и высоты было бы заблокировано, после чего доведите их ширину или высоту до 150px . В этом видео показано изменение размера логотипов и размещение их в сетке.
Размещение логотипов в сетке
Обратите внимание на то, что некоторые логотипы кажутся более крупными, чем другие. Логотип Airbnb — самый большой из всех. Для того чтобы разобраться в происходящем, я обычно размещаю их в прямоугольниках. Эти прямоугольники помогают мне лучше оценивать размеры логотипов, их выравнивание относительно друг друга и расстояние между ними.
Анализ логотипов
Учитывайте то, что расстояние между всеми прямоугольниками должно быть одинаковым. В Sketch этого легко добиться, выбрав строку, щёлкнув в верхнем правом углу на Tidy , и настроив расстояние. Лучше всего, чтобы это расстояние составляло бы, как минимум, 10px .
Теперь, когда мы вывели на страницу прямоугольники, становится хорошо заметным то, что некоторые из логотипов неправильно выровнены, то, что некоторые из них заметно больше, чем другие, и то, что некоторые логотипы находятся совершенно не там, где им следует быть. Вот что получилось после того, как я настроил размеры логотипов и выровнял их по центру.
Результат изменения размеров логотипов и их выравнивания. Логотип Dropbox Business после этого выглядит слишком маленьким
Исправление логотипа Dropbox Business
Теперь в нашем распоряжении есть хороший макет, который готов к тому, чтобы воссоздать его средствами HTML и CSS. Учитывайте то, что в следующих разделах мы будем исходить из предположения о том, что вы — веб-программист, и вам, от дизайнера, достались логотипы, на размер которых особого внимания никто не обращал.
Реализация макета для логотипов, основанного на CSS Grid
Поговорим о том, как создать раздел страницы, содержащий логотипы, учитывая следующие требования:
- Раздел с логотипами должен следовать правилам отзывчивого веб-дизайна.
- Размеры логотипов должны быть как можно ближе друг к другу. То есть — не рекомендуется, чтобы среди логотипов, например, был бы какой-то очень большой логотип, и какой-то — очень маленький.
- Нужно, чтобы для логотипов заранее были бы установлены минимальные/максимальные размеры.
В этом примере я разработаю макет раздела с использованием CSS Grid. Но это не должно вас ограничивать в выборе технологии для создания подобных разделов. Пользуйтесь здесь тем, что подходит вам, и то, что поддерживают интересующие вас браузеры.
Начало работы над разделом сайта с логотипами
Как видите, в результате оказалось, что логотипы занимают всю ширину родительских элементов. Размеры логотипов неоднородны. Поэтому давайте начнём улучшать наш раздел с того, что настроим свойство логотипов width :
Результат настройки ширины логотипов
Изменение ширины хорошо показало себя на некоторых логотипах. Но, например, внешний вид логотипа Dropbox это лишь ухудшило. Дело тут в том, что это — горизонтальный логотип. Прежде чем рассматривать решение этой проблемы, давайте попробуем настроить высоту логотипов:
Результат настройки высоты логотипов
Так, у нас проблема. Логотип Dropbox нехорошо растянуло по высоте. Дело тут в том, что высота этого логотипа меньше, чем у других. В результате установленное в CSS значение height для этого логотипа слишком велико. Его применение приводит к растягиванию логотипа с нарушением пропорций.
Решить эту проблему можно, воспользовавшись свойством object-fit :
В результате я пока остановлюсь на решении, предусматривающем использование свойства width .
Нашим следующим шагом будет выравнивание логотипов по горизонтали и по вертикали.
Flexbox-стили позволили отцентровать логотипы. Вот как они теперь выглядят.
Логотипы выровнены по центру, но логотип Dropbox получился слишком маленьким
Результаты применения разных подходов к стилизации логотипов
Свойство object-fit: contain хорошо тем, что оно, независимо от ширины или высоты логотипа, заставляет изображение занимать отведённое ему пространство и при этом не искажаться.
О директиве supports и о свойстве object-fit
Я, уже после публикации данного материала, добавил в него этот раздел. А именно, речь идёт о применении директивы @supports для обнаружения поддержки браузером свойства object-fit . Если браузер это свойство поддерживает, то оно используется вместе со свойством height . Это нужно для того чтобы не дать логотипам растягиваться в браузерах, не поддерживающих object-fit . Благодарю Луиса за подсказку.
Для того чтобы убедиться в том, что эта методика работает так, как ожидается, я испытал её на другом наборе логотипов. Результат мне понравился.
Использование свойства object-fit
Тут мне хотелось бы продемонстрировать одну иллюстрацию, которая призвана показать сильные стороны свойства object-fit . Обратите внимание на то, что на следующем рисунке логотипы содержатся в пределах двух линий. Если же они, учитывая соотношение их сторон, не в состоянии заполнить всё доступное им пространство, они выравниваются по центру.
Анализ размещения логотипов
Использование свойства mix-blend-mode для удаления белого фона
Логотипы размещены на сером фоне. Благодаря этому мы можем заметить то, что некоторые из них, являясь JPG-изображениями, имеют белый непрозрачный фон.
Если вы не можете достать версию изображения логотипа с прозрачным фоном, вы, чтобы всё же избавиться от фона, можете воспользоваться CSS-свойством mix-blend-mode . С его помощью белый фон исчезнет как по волшебству.
Дело сделано! Белый фон исчез. Хотя тут стоит отметить то, что этот приём может сделать некоторые логотипы темнее. Например — так случилось с логотипом McDonald’s.
Логотипы до и после избавления от белого цвета. Обратите внимание на выделенные изображения
Использование CSS-селекторов
Я, после публикации, внёс в статью ещё одно дополнение. Дело в том, что в этом твите мне предложили использовать CSS-селекторы для того чтобы применить свойство mix-blend-mode только к .jpg- и .jpg-изображениям:
Выравнивание последнего ряда логотипов по центру
Выводя на страницу некий набор логотипов и используя сеточный макет, нельзя быть полностью уверенным в том, что в последнем ряду занятыми окажутся все места. Пустое место в последнем ряду логотипов (именно такой последний ряд имеется в нашем примере) выглядит не очень хорошо. Для того чтобы выровнять последний ряд логотипов по центру, лучше всего использовать для разработки макета соответствующего раздела не Grid, а Flexbox.
Теперь последний ряд логотипов будет аккуратно выровнен по центру.
Flexbox-макет и выравнивание последнего ряда логотипов по центру
Заключительные рекомендации
Прежде чем завершить эту статью, мне хотелось бы дать вам несколько советов, которые вы можете принять во внимание, работая над сеточным макетом для раздела страницы, в котором планируется вывести логотипы:
Хороший логотип для Wildberries определенно произведет впечатление на ваших клиентов, ведь профессиональный фирменный знак сделает из вашего магазина настоящий бренд.
Если магазин работает без логотипа, это вызовет недоверие у будущих покупателей, что снизит конверсию в покупки и будет являться одним из минусов в вашем продвижении.
Также для вашего лого очень важен цвет, так как он автоматически вызывает определенные ассоциации.
Выбор оттенка остается за вами, поэтому уделите подбору и сравнению достаточно времени.
В нашем конструкторе вы сможете выбрать среди огромного логотипов для Вайлдбериз: текстовые и графические, минималистичные и винтажные, яркие, строгие и т.д.
Вот лишь несколько креативных примеров лого для Wildberries, которые были созданы в нашем конструкторе.
Но, если вы не хотите ждать, вы можете перейти к созданию собственного логотипа в конструкторе прямо сейчас. Перейти в конструктор.
Креативные примеры лого, созданных в нашем сервисе
Создать ваш собственный логотип под Вайлдберриз очень легко
Настройте
Введите название своей компании и выберите стили, цвета и символы логотипа — это займет всего 2 минуты!
Наш конструктор логотипов на базе искусственного интеллекта будет использовать ваши предпочтения при создании вариантов дизайна.
Выберите
Вам будут представлены сотни различных макетов логотипа на основе ваших пожеланий.
Добавьте несколько из них в избранное и посмотрите, как они смотрятся на футболках, визитках и многом другом.
Доведите до идеала
Используйте наш специальный редактор, чтобы усовершенствовать дизайн и воплотить в жизнь свое видение.
Вы можете легко изменить цвета, шрифты, формы и размеры - никаких навыков дизайна не требуется!
Превратите свое творческое видение в бренд, которым вы будете гордиться. Перейти к созданию логотипа.
На что стоит обратить внимание при выборе?
Создавая логотип для Wildberries, ищите цвета, которые отражают настроение и посыл, который вы хотели бы передать.
Конструктор предложит вам готовые цветовые решения, чтобы вам было легче найти желаемое, но вы сможете редактировать цвета вашего лого на любом шаге.
Создавая свою палитру, постарайтесь ограничиться одним или двумя цветами.
Форма
Будет ли размещен ваш логотип под Вайлдберриз где то помимо маркетплейса?
Будете ли вы печатать его на одежде сотрудников и вашей команды?
Лучшая форма логотипа для вашего бренда — это та, которая подходит для носителей, на которых вы будете чаще всего использовать свой логотип, будь то физические или цифровые, большие или маленькие.
К счастью, наш сервис покажет вам, как ваш лого будет выглядеть в различных местах и на разных поверхностях еще до покупки.
Шрифт
Уделите внимание подбору правильного шрифта для вашего фирменного знака.
Типографика, также, как и цвет, способна передать настроение и посыл вашей аудитории.
Не ленитесь и протестируйте несколько разных шрифтов, посмотрите столько вариантов, сколько потребуется, чтобы найти подходящий.
Символ, иконка
Да, вероятно вы будете использовать символ в своем логотипе, но ведь иконки тоже бывают разные.
В конструкторе будут представлены сотни разных иконок, поэтому выберите сразу несколько и сравните их вместе, добавляя в избранное понравившиеся варианты лого.
Создание и редактирование вашего лого абсолютно бесплатно. Купите готовые файлы, только если останетесь довольны дизайном. Создать логотип онлайн.
Читайте также: