1. aspro.ru
  2. Аспро: Шины и диски 2.0
  3. Требования к графическим материалам

Требования к графическим материалам


В этом уроке рассмотрим требования к графическим материалам, которые понадобятся для запуска интернет-магазина на основе Аспро: Шины и диски 2.0. К ним относятся баннеры на главной странице, тизеры, картинки для новостей, акций и т.д.

Фавикон

Фавикон — это небольшая картинка, которая отображается в сниппете в результатах поиска, рядом с адресом сайта в адресной строке браузера и около названия сайта в избранном или закладках браузера.

0fdded86-7b64-11f1-8fe4-fa163e2ff576

Рекомендации от поисковой системы Яндекс

Размер фавикон: 120x120 px (рекомендуемый), 16x16 px или 32x32 px.

Формат фавикон: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP.

Совет: Используйте размер 120x120 px или формат SVG, чтобы на логотип сайта выглядел более четким и заметным.

Главная страница

Логотип

156b3700-7b5e-11f1-8fe4-fa163e2ff576

Логотип располагается в левом верхнем углу.

Требования к логотипу: файл .jpg или .png с разрешением 190 x 40 px.

Главный баннер

  • Тип главной страницы №1

21de191f-7b5e-11f1-8fe4-fa163e2ff576

При таком типе баннер со слайдером располагается во всю ширину экрана.

Требования к основному баннеру: файл .jpg или .png с разрешением 1920 x 450 px.

  • Тип главной страницы № 2

c1321bc0-7b64-11f1-8fe4-fa163e2ff576
Здесь располагаются основной баннер со слайдером и 2 дополнительных маленьких баннера. На основном баннере можно разместить неограниченное количество слайдов, которые будут автоматически меняться через установленные промежутки времени. 

В зависимости от выбранной ширины сайта размер баннера может меняться от 930 до 1314 px. Вы можете для каждой ширины сайта указывать свою ширину баннера, но мы рекомендуем выбирать ширину 1920 px, тогда края сами обрезаются под нужную.

Требования к основному баннеру: файл .jpg или .png с разрешением 1920 x 450 px (c рекомендуемой безопасной зоной в 900 px по центру).

Размер элемента на баннер – 450x450 рx.

Требования к дополнительным баннерам: файл jpg, png, gif. Соотношение сторон 3:2.

Размер картинок должен быть:

733 x 486 px – при ширине сайта 1200x1344x1500 px;

834 х 555 px – при ширине сайта 1700 px.

Узкий баннер на главной

635cc121-7b64-11f1-8fe4-fa163e2ff576

Требования к узкому баннеру на главной: файл .jpg или .png с разрешением 1920x150 px (c рекомендуемой безопасной зоной в 900 px по центру).

Маленькие баннеры на главной

57ae14f1-7b63-11f1-8fe4-fa163e2ff576

Требования к 3 маленьким баннерам: файл .jpg или .png с разрешением 530x180 px.

Баннеры для акций 

Блок располагается на  главной странице. При клике на элемент вы попадаете на детальную страницу акции.

7b19233b-7b5e-11f1-8fe4-fa163e2ff576

Требования к формату файла .jpg или .png с разрешением 400x266 px. Соотношение сторон 3:2.

Баннеры из блога (большой и малые)

Блок располагается на  главной странице. При клике на элемент вы попадаете на детальную страницу новости.

894fd7e1-7b5e-11f1-8fe4-fa163e2ff576

Эти баннеры выстраиваются в ровную плитку на любой ширине окна. Они бывают двух видов: большие и маленькие.

В решении Аспро: Шины и диски 2.0 есть возможность регулировать ширину страницы. Чтобы изображения в плавающих баннерах помещались полностью, необходимо использовать определенные размеры изображений для каждого разрешения.

Допустимые форматы изображений – jpg и png. Соотношение сторон 3:2.

Размер картинок должен быть:

733x486 px – при ширине сайта 1200x1344x1500 px;

834х555 px – при ширине сайта 1700 px.

В административной части перейдите в Аспро: Шины и диски 2.0 → Настройки → Общие.

05463253-7b64-11f1-8fe4-fa163e2ff576

Задайте ширину сайта и загрузите подходящий размер баннера.

Информационный блок о компании

5908dd24-7b5e-11f1-8fe4-fa163e2ff576

Допустимые форматы изображений – jpg, png, gif.

Размер картинки может быть любой, но в пределах 222x244 px.

Услуги на главной

Допустимые форматы изображений – jpg, png. Соотношение сторон 3:2.

Размер картинок должен быть:

401x267 px – при ширине сайта 1700 px;

398x265 px – 1500x1344x1200 px.

b8293632-7b63-11f1-8fe4-fa163e2ff576
Иконки в фильтре при 2 типе главной страницы
db550bd2-7b61-11f1-8fe4-fa163e2ff576

Допустимые форматы изображений – svg, jpg, png.

Оптимальный размер картинок – 50x50 px.

Тизеры преимуществ

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

59039b8f-7b5c-11f1-8fe4-fa163e2ff576

Допустимые форматы изображений – svg, jpg, png.

Оптимальный размер картинок – 50x50 px.

Логотипы партнеров и производителей

  • Для логотипов в разделе «Наши партнеры» и «Производители» используйте изображения с расширением jpg, png.

  • Максимальный размер картинок – 150х90 px.

  • Допустимо размещение изображения меньшего размера.

Баннеры детальных страниц новостей и акций

Баннеры в детальных страницах разделов

Сюда относятся, например, страницы акций или лендингов. Баннер на таких страницах состоит из фонового баннера и активной картинки.

16e4e109-7b5f-11f1-8fe4-fa163e2ff576

Требования к фоновому баннеру: файл .jpg или .png. с разрешением 1920x450 px.

Требования к активной картинке: файл .jpg или .png. с разрешением 555x450 px.


Баннеры детальных страниц новостей и акций

e859c0ce-7b63-11f1-8fe4-fa163e2ff576

Требования к баннерам детальных страниц новостей и акций: файл .jpg или .png. с разрешением 1314x360 px.

Баннеры в колонке

8b8cd680-7b5c-11f1-8fe4-fa163e2ff576

Требования к баннерам: файл .jpg или .png с разрешением 530x390 px.

Фото товара для карточки

Основное фото товара на его странице.

d4ec41bc-7b61-11f1-8fe4-fa163e2ff576

Требования к фото для карточки товара: файл .jpg или .png с разрешением не менее 500х500 px. Оптимально 1000x1000 px. Изображение обязательно должно быть квадратным. 

Фото товара для раздела каталога

e6d943dc-7b5c-11f1-8fe4-fa163e2ff576

Требования к фото для раздела каталога: файл .jpg или .png с разрешением не менее 120x120 px. Изображение обязательно должно быть квадратным.
Предыдущая статья Настройка поиска по торговым предложениям
Следующая статья Установка модулей сторонних разработчиков