Как сделать так, чтобы мои векторные логотипы выглядели очень резкими в Интернете?

Я много работаю с Illustrator, но я никогда не был доволен тем, как выглядит моя работа на нашем сайте. Я пробовал разные методы - сохранение из Illustrator, открытие в Photoshop и сохранение - но я все еще что-то упускаю.

Издание Логотип поставлялся только как AI. Я получаю тот же слегка размытый результат, сохраняю ли я для веб-устройств и устройств из Illustrator, или переношу вектор в Photoshop. Я стремлюсь масштабировать в Illustrator до необходимого размера, а затем сохраняю для Интернета (оптимизированный тип inc - в логотипе есть текст).

При растеризации векторной графики линии выглядят четкими, если они попадают в границы пикселей. Это может сделать растеризатор (округление), но большинство известных мне программ векторной графики этого не поддерживают. Одной из стратегий противодействия этому будет использование сетки, чьи ячейки охватывают и целое число пикселей (одна ячейка 1x1 или 2x2 или 3x3, ... pixel).

Для значков хорошее начало - сетка 16x16, поскольку она позволяет создавать четкие значки 16x16, 32x32, 48x84 и т. Д. Из одной и той же векторной графики.

Для логотипа хорошее начало - сетка пикселей с 1 ячейкой = 1 пиксель в самом маленьком представлении логотипа.

Вот учебник, который объясняет эту технику: Icon Векторный лампочка в Inkscape

Есть много вещей, которые вы можете сделать.

1. Используйте формат изображения со сжатием без потерь, как PNG
2. Убедитесь, что ваш векторный путь максимально выровнен по пиксельной сетке
3. Увеличьте контраст между изображением и фоном (по цвету, яркости или обоим)
4. Примените фильтр резкости в вашем программном обеспечении для редактирования изображений
5. Используйте комбинацию эффектов: более темная рамка + более светлое свечение (на светлом фоне) ИЛИ более светлая рамка + более темное свечение (на темном фоне), например:

6. Другой метод заключается в том, чтобы изменить размер векторного логотипа до 200%, объединить его с фоном, свести к растровому изображению, а затем изменить размер растрового изображения до 100%. Иногда это имеет значение.

Как программное обеспечение для веб-графики я настоятельно рекомендую Adobe Fireworks, так как он больше подходит для идеального дизайна пикселей, помимо других причин.

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

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

• Использование SVG для гибких, масштабируемых и забавных фонов, часть I
• Как добавить масштабируемую векторную графику на свою веб-страницу
• Использование SVG

Вы можете изменить свой векторный файл в Illustrator. Сохраните его в формате PDF с предустановкой: сжатие - цветные растровые изображения - бикубический уменьшенный размер до: любого размера, который вам нравится - сжатие: «JPEG» - качество изображения: «максимальное». Сохраните его и поместите файл PDF в Photoshop в предварительно настроенный файл формата 300 PPI (например, 125 x 125 пикселей). Сохранить как PNG. Это вы можете разместить на сайте. Это довольно острый.