Соберите компактный интерфейсный знак вокруг одной читаемой формы, затем выровняйте поля и проверьте результат рядом с реальными кнопками или аватарами.
1
Выберите форму с чистыми границами
Выберите лицо, монограмму или пиктограмму с простым фоном и четкими границами, которые не исчезнут после уменьшения.
2
Настройте визуальный вес внутри квадрата
Оставьте вокруг объекта равномерное пространство и сократите мелкие внутренние детали, если они начинают слипаться внутри сетки 28x28.
3
Сравните с соседними элементами
Посмотрите знак в нужном интерфейсе и на разных фонах, затем экспортируйте вариант, который сохраняет контур и контраст без увеличения.
Практическое применение изображений 28x28
При 28 пикселях на сторону уже можно сохранить одну вторичную деталь, но композиция все еще должна работать как знак: сильный силуэт, чистые края и контролируемые поля важнее сложного рисунка.
01
Сбалансируйте знак внутри маленького контейнера
Сравнивайте результат с соседними кнопками и аватарами, чтобы объект не казался слишком крупным или мелким внутри одинакового контейнера.
Оставьте визуально равные поля вокруг символа
Уберите линии, которые сливаются после уменьшения
Проверяйте знак рядом с другими элементами интерфейса
Проверка интерфейсного знака 28x28
Ширина
28px
Высота
28px
28x28 px
02
Подготовьте небольшой аватар
Упростите лицо, монограмму или логотип для плотного списка.
Сохраните главный объект в пределах рамки
Оставьте равномерное пространство вокруг важных деталей
Проверьте результат в конечном масштабе
Предпросмотр: подготовьте небольшой аватар
Студия 28x28
Оригинал 28x28Обрезка 1:1Проверить
28x28 px
Подготовьте небольшой аватар
Упростите лицо, монограмму или логотип для плотного списка.
03
Создайте символ интерфейса
Подготовьте знак для навигации, элемента управления или служебной функции.
Соблюдайте одинаковый масштаб объектов
Не размещайте важные детали у края
Используйте четкий и хорошо освещенный оригинал
Предпросмотр: создайте символ интерфейса
Коллекция 28x28
Подготовьте знак для навигации, элемента управления или служебной функции.
Создайте символ интерфейса
маленький знак интерфейса
Посмотреть результат
04
Соберите индикаторы и метки
Оформите небольшой знак состояния, уведомления или списка.
Сохраните главный знак или заголовок
Поддерживайте единые поля и контраст
Убедитесь в читаемости перед использованием
Предпросмотр: соберите индикаторы и метки
Материал 28x28
Соберите индикаторы и метки
Оформите небольшой знак состояния, уведомления или списка.
Открыть предпросмотр
Готово к проверкемаленький знак интерфейса
Область макета
маленький знак интерфейса
Размер 28x28
28x28
Вопросы об изображениях 28x28
Разберите, как подготовить 28x28 для интерфейса: сколько свободного места оставить вокруг знака, как проверить тонкие линии, нужен ли прозрачный фон и что происходит с фотографией после сильного уменьшения.
Сколько деталей выдерживает изображение 28x28?
Квадрат 28x28 чуть свободнее микрозначка 16x16, поэтому в нем можно сохранить простую внутреннюю деталь или лицо крупным планом. Мелкий текст и сложный фон все равно быстро перестают читаться.
Насколько близко можно подводить объект к краям?
При квадратной обрезке важнее оставить воздух вокруг символа, чем заполнить каждый пиксель. Если знак касается края, он может выглядеть тяжелее соседних кнопок или визуально обрезаться внутри круглой маски.
Как оценить читаемость 28x28 в интерфейсе?
Проверьте файл рядом с реальными элементами интерфейса. Индикатор должен отличаться от соседних состояний, а аватар оставаться узнаваемым без увеличения; отдельный просмотр на большом холсте для этого недостаточен.
Всегда ли большой исходник дает лучший результат?
Исходник может быть намного крупнее, но полезной останется только та часть, которая переживает уменьшение. Выбирайте вариант с чистым силуэтом и достаточным контрастом, а не просто файл с большим количеством пикселей.
Что делать, если исходный знак размытый?
Ресайз не исправляет мягкий фокус и не восстанавливает потерянные края. Для маленького аватара это может быть менее заметно, но для пиктограммы размытый контур лучше заменить четкой версией до уменьшения.
Как связаны формат и тип содержимого 28x28?
PNG хорошо подходит интерфейсной графике с резкими краями и альфа-каналом. WebP можно использовать при поддержке продукта. JPG разумнее оставить для фотографических аватаров без прозрачности.
Зачем проверять прозрачный край на разных фонах?
Для кнопок и индикаторов прозрачность часто помогает вписать знак в разные темы. Проверяйте альфа-края на нескольких цветах фона; ореол вокруг символа заметен даже при таком небольшом размере.
Для каких интерфейсных элементов подходит 28x28?
Размер может использоваться для компактных аватаров, управляющих элементов и индикаторов, если именно такой слот задан интерфейсом. Перед экспортом сверяйте фактическую спецификацию компонента.
Изменить размер изображения до точных размеров в пикселях
Выберите готовый размер в пикселях, чтобы открыть инструмент изменения размера с уже установленной точной шириной и высотой.
Создайте маленький знак интерфейса 28x28
Подготовьте изображение для аватаров, элементов управления и индикаторов состояния прямо в браузере.