Что в видео-уроке:
В уроке разбираем нарезку мобильной версии сайта: определяем, какие изображения и фоны нужно экспортировать заново, какие файлы можно взять из десктопной версии и как организовать мобильную нарезку без дублирования лишних элементов.
Не экспортируем мобильную версию полностью заново
Главное правило мобильной нарезки — не дублировать все материалы из десктопной версии.
Если элемент в мобильном макете не изменился или только пропорционально уменьшился, его можно использовать повторно. Нет необходимости создавать ещё одну копию того же логотипа, иконки или изображения.
Заново экспортируем только те элементы, параметры которых действительно изменились.
Перенарезаем увеличенные растровые изображения
Особенно внимательно работаем с растровой графикой.
Если изображение в мобильной версии стало меньше, исходного файла обычно достаточно. При уменьшении заметной потери качества не происходит.
Если же растровый объект в мобильной композиции пришлось увеличить относительно исходной версии, его лучше экспортировать заново в нужном размере.
SVG работает иначе: векторную графику можно масштабировать без потери качества, поэтому повторно экспортировать один и тот же SVG только из-за изменения размера обычно не требуется.
Заново сохраняем сложные фоны
Сложные фоновые композиции для мобильной версии чаще всего приходится экспортировать отдельно.
После адаптации меняются расположение декоративных кругов, фотографий, градиентов и других элементов. Поэтому десктопный фон уже не соответствует новой композиции.
Однотонные фоны — белые, серые, чёрные или цветные — экспортировать не нужно. Их верстальщик воспроизводит средствами CSS.
А вот сложный фон с изображениями и декоративными эффектами сохраняем заново.
Учитываем размытие заднего фона
Особого внимания требуют элементы с эффектом размытия фона.
Если у объекта используется эффект, аналогичный Background Blur, обычный экспорт в PNG или SVG не всегда сохраняет визуальный результат так, как он выглядит в Figma.
Сам объект можно сохранить, но размытие того, что находится позади него, является уже взаимодействием нескольких слоёв.
В такой ситуации есть два варианта:
- реализовать эффект средствами CSS;
- сохранить декоративный элемент сразу вместе с фоном.
Какой вариант использовать, лучше заранее обсудить с верстальщиком.
Не перенарезаем неизменившиеся элементы
Если стрелки, иконки, декоративные элементы или изображения уже были подготовлены для десктопа и в мобильной версии остались такими же, повторно сохранять их не нужно.
Это касается и SVG-иконок: один файл можно использовать на разных разрешениях.
Мобильная нарезка должна содержать только действительно отличающиеся материалы, а не копию всей десктопной папки.
Перенарезаем карточки при изменении пропорций
Если карточка в мобильной версии заметно изменила ширину или композицию, её графическую часть нужно подготовить заново.
При этом скругления углов в экспортируемое изображение обычно не включаем. Сохраняем элемент с прямыми краями, а радиус задаётся уже средствами вёрстки.
То же относится к простым теням и другим эффектам, которые можно воспроизвести через CSS.
Если карточка только пропорционально уменьшилась и её исходная графика подходит без потери качества, повторный экспорт не требуется.
Отдельно оцениваем логотипы и группы изображений
Если все логотипы представлены в SVG, их удобнее передать отдельными файлами и позволить верстальщику самостоятельно расположить их в адаптиве.
Если среди логотипов есть растровые изображения, иногда проще сохранить всю группу одним PNG.
Универсального решения здесь нет. Нужно учитывать количество элементов, их форматы и то, насколько сильно меняется композиция между разрешениями.
Если есть сомнения, лучше согласовать способ подготовки с верстальщиком.
Карту и стандартные интерфейсные элементы не сохраняем заново
Карту отдельно не нарезаем — она будет встроена средствами используемого картографического сервиса.
То же касается стандартных полей формы, текста, кнопок и простых фоновых плашек.
Если иконки контактов уже экспортированы для десктопной версии и не изменились, их также используем повторно.
Так мобильная нарезка остаётся компактной и содержит только необходимые новые файлы.
Разделяем десктопную и мобильную нарезку
Для удобства лучше сразу разделить материалы по версиям.
Например:
- desktop;
- mobile.
В десктопной папке остаются основные фоны, элементы, иконки, шрифты и favicon.
В мобильной создаём только те категории, в которых появились новые файлы. Если мобильных иконок нет, отдельную пустую папку icons создавать не требуется.
Такая структура помогает сразу понять, какие материалы уникальны для конкретного разрешения.
Отличаем мобильные файлы по неймингу
Названия мобильных файлов не должны полностью совпадать с десктопными.
Если два разных изображения получат одинаковое имя, при работе с файлами легко перепутать, какой вариант относится к какому разрешению.
Поэтому к мобильным материалам можно добавлять понятную маркировку.
Например:
- bg-targroup-mobile-01;
- element-targroup-mobile-01.
При этом общую систему названий желательно сохранить такой же, как в десктопной нарезке. Отличаться должна только часть, обозначающая мобильную версию.
Проверяем необходимость каждого нового файла
Перед экспортом мобильного элемента задаём себе несколько вопросов:
- изменился ли он относительно десктопной версии;
- стал ли растровый объект больше;
- поменялась ли его композиция или пропорции;
- изменился ли сложный фон;
- можно ли использовать уже существующий SVG;
- можно ли воспроизвести эффект средствами CSS.
Если существующий файл подходит без потери качества и визуальных отличий, повторно сохранять его не нужно.
Так мобильная нарезка получается компактной, понятной и не создаёт лишнего дублирования материалов для верстальщика.
