Логотип с прозрачным фоном: экспорт PNG и SVG

Что означает настоящая прозрачность?

Она определяет видимость нижней поверхности. PNG может иметь альфа-канал: непрозрачный рисунок, прозрачное окружение и частично прозрачные края. Спецификация PNG W3C описывает растр без потерь с необязательной альфой. PNG может быть целиком непрозрачным.

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

Какой формат выбрать?

Используйте PNG для растровых мест с поддержкой прозрачности, SVG сохраните для других размеров. SVG описывает векторную графику, но нарисованные формы могут закрывать весь холст. Расширение не гарантирует пустой фон.

Переименование JPG в PNG или сохранение без правки пикселей не делает белое прозрачным. Удаление фона не создаёт векторы. SVG против PNG отделяет прозрачность, разрешение и редактирование.

Белый рисунок или прямоугольник?

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

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

Записана ли сетка в файле?

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

Снимок предпросмотра или картинка из поиска может содержать квадраты. Используйте настоящее скачивание либо исходный документ. Просите прозрачное PNG или вектор, не картинку предпросмотра.

Как проверить три фона?

Поместите один файл на белый, тёмно-серый и насыщенный цвет. Белый показывает тёмные контуры и тени; серый — светлые ореолы и белый рисунок; цвет — непрозрачные прямоугольники и квадраты. Двигайте и масштабируйте, чтобы не спутать поверхность просмотрщика с пикселями.

Сначала проверьте реальный размер использования, потом приблизьте подозрительные края. Деталь при 2000 пикселях может исчезнуть при 40. Полупрозрачные пиксели кривых часто являются нормальным сглаживанием: важно чистое соединение без случайного ореола.

Почему остаётся ореол?

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

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

Что делать, если есть только JPG или сведённый PNG?

Используйте редактор со слоями, например GIMP 3. Это ручная правка растра, а не функция загрузки в LogoSaga.

1. Работайте с копией. Сохраните нетронутый оригинал, откройте дубликат и оставьте рабочий слой. Добавьте альфа-канал, если его ещё нет.

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

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

4. Инвертируйте выделение и добавьте маску слоя. Теперь должен быть выделен логотип. В диалоге добавления маски слоя инициализируйте маску из выделения: выделенный рисунок останется непрозрачным, невыделенный фон станет прозрачным. Сначала инвертируйте выделение фона.

5. Доработайте маску вручную. Перед ретушью снимите выделение и активируйте миниатюру маски. Рисуйте на маске вместо удаления исходных пикселей. Чёрный скрывает, белый показывает, серый сохраняет частичную прозрачность. Берегите белые детали и сглаживание; проверяйте на белом, тёмно-сером и насыщенном цвете.

6. Сохраняйте и экспортируйте отдельно. Скройте тестовые фоны, сохраните редактируемый проект, например XCF, и экспортируйте PNG с альфа-прозрачностью. Снова откройте экспортированный PNG и повторите проверку на трёх фонах.

Удаление фона не вернёт деталей, которых нет в исходном растре. Светлый ореол может требовать коррекции цветов края или более качественного источника; маска сама по себе не отменит смешение пикселей со старым фоном.

Как экспортировать в LogoSaga?

Создайте или доработайте логотип и откройте экспорт. Выберите светлый либо тёмный вариант по использованию; он меняет рисунок, не заменяя настройки фона. Выберите прозрачный, затем PNG для растра либо SVG, если назначение его принимает.

Ширины PNG: 512, 1024 и 2048 пикселей. Выберите достаточно и проверьте конечные размеры: файл не обязательно квадратный. Однотонный фон добавляется намеренно. При ошибке повторно экспортируйте проект.

LogoSaga создаёт тогда SVG без фона и растровое PNG без фоновой заливки. Это касается созданных в редакторе логотипов, не очистки загруженных картинок или автоматической векторизации.

Что меняет масштабирование?

Уменьшение достаточно большого PNG обычно лучше увеличения малого. Каждый пересчёт может менять края: делайте новые размеры из оригинала, не последней маленькой копии. Переход со 100 до 2048 пикселей не восстанавливает детали.

Экспортируйте SVG или проект для расчёта краёв в нужном масштабе. Проверяйте маленький результат: тончайшие линии и плохие интервалы букв остаются нечитаемыми даже в векторе. Прозрачность не решает всю читаемость.

Что проверить на месте использования?

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

Для профиля Google соблюдайте растровые форматы и квадратную композицию; прозрачность необязательна. Понятно назовите варианты и сохраните SVG. Список файлов помогает передать нужную версию.

Связанные практические руководства: Тест логотипа: 10 проверок перед публикацией

Создайте логотип и экспортируйте прозрачное PNG или SVG

Часто задаваемые вопросы

Почему у PNG белый фон?

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

Доказывает ли шахматная сетка прозрачность?

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

Всегда ли SVG прозрачно?

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

Как убрать белую кайму?

Повторно экспортируйте исходный вектор. Если остался только сведённый растр, осторожно исправьте цвета краёв; стирание дополнительного белого может повредить рисунок.

Удаляет ли LogoSaga фон загруженных картинок?

Руководство касается логотипов, созданных в LogoSaga. Это не инструмент загрузки для удаления фона или перевода PNG в SVG.