Сделайте логотип прозрачным

Коротко

Как это сделать

1. Найдите самую большую копиюЛоготип в подписи письма часто меньше 200 px в ширину. Поищите оригинал в папке с брендбуком, пресс-ките, PDF или в файлах изображений самого сайта. Вырезка не добавит деталей, которых нет, поэтому исходник в 2000 px даёт чистые края, а в 150 px мягкие и рваные.
2. Удалите фон и проверьте внутренние областиУдалите фон, затем приблизьте буквы с замкнутыми контурами, например O, A, B, e и g, и промежутки между знаком и надписью. Эти внутренние области тоже должны быть прозрачными, иначе цвет слайда или шапки сайта не будет через них виден. Переключите превью на тёмный фон, чтобы заметить остатки белого.
3. Экспортируйте под конкретное местоСкачайте прозрачный PNG для слайдов, документов и макетов мерча или WebP для сайта, где он легче. Сделайте квадратные версии для фавиконки и соцсетей, с отступами вокруг знака, чтобы круглая обрезка его не срезала.

Советы и частые ошибки

• Белый ореол на тёмном фонеУ логотипа, сохранённого на белом, краевые пиксели смешаны с белым, поэтому после вырезки на тёмно-синем или чёрном виден светлый контур. Вырежьте заново из исходника побольше или сделайте отдельную светлую версию логотипа (белую или в инверсных цветах) для тёмного фона. Многие бренды выпускают обе.
• Используйте SVG, если он естьДля логотипа в шапке сайта MDN рекомендует SVG, если есть векторная версия, и форматы без потерь для растровых логотипов, потому что артефакты вокруг резких краёв очень заметны. Прозрачный PNG остаётся запасным вариантом, когда есть только фото или JPG.
• Фавиконке нужен знак, а не надписьФавиконка показывается совсем маленькой во вкладках браузера и в поиске. Оставьте только символ или первую букву, сохраните квадрат (Google требует 1:1) и дайте ей сплошную или контрастную форму, чтобы она читалась и на светлых, и на тёмных вкладках.
• Слайды и документыШирокоформатный слайд PowerPoint имеет размер 13,333 x 7,5 дюйма (16:9). Вставляйте логотип как PNG, а не JPG, чтобы цвет слайда просвечивал и на цветном шаблоне не появлялся белый прямоугольник.
• Мерч и печатьРастровый логотип печатается не чётче, чем позволяют его пиксели. Отправляйте в типографию векторный файл, если он есть; прозрачный PNG используйте для макетов, карточек товаров и быстрых проб.
• Логотипы с текстом в соцсетяхFacebook отмечает, что фото профиля и обложки с логотипом или текстом могут выглядеть лучше в PNG. Сжатие JPG с потерями размывает резкие края и даёт артефакты, особенно на тексте.