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

13

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

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

Possikiem
источник
Вы пытаетесь сохранить его в формате png / gif? Вас беспокоит смутный край изображения?
hello_world
1
Ваш сайт построен на CMS, такой как Wordpress, потому что Wordpress (и, возможно, другие) автоматически снижает качество изображения, чтобы уменьшить размер файла.
deecemobile
Вы измеряете изображение в браузере, вверх или вниз? Если это так, не делайте этого :) Поскольку есть три человека, у которых есть вопросы, возможно, вы могли бы отредактировать свой вопрос для ссылки на экспорт или что-то подобное? Это поможет нам ответить.
Брендан
Если один из ответов ниже ответил на ваш вопрос, примите его.
DᴀʀᴛʜVᴀᴅᴇʀ

Ответы:

11

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

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

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

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

Питер Уолсер
источник
5

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

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

введите описание изображения здесь

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

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

Alph.Dev
источник
Благодарю. Я думаю, что при выравнивании по пиксельной сетке я ошибаюсь. Я слышал хорошие вещи о Fireworks, но я никогда не использовал его. Приветствия.
Поссикием
Попробуй Modify > Snap to pixelвариант. Вы также можете позволить фейерверку выравнивать отдельные пиксели в левом верхнем углу или в центре пикселя. Внутренняя Pathпанель, под Edit pointsэтикеткой. Удачи.
Alph.Dev
5

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

введите описание изображения здесь

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

DᴀʀᴛʜVᴀᴅᴇʀ
источник
1

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

user49293
источник