Как визуализировать значки с четкими краями в Illustrator

В основном это вопрос о качестве логотипов/иконок, используемых на веб-сайтах. Я создаю логотипы/значки с помощью Illustrator, но когда я вижу значки на профессиональных веб-сайтах (см. изображение и ссылки), они выглядят четкими, как текст, без размытия. Края очень четкие. Например, посмотрите на это изображение, особенно на значок поиска и значок списка меню:

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

  1. Это мой собственный блог с плохими значками, логотипом и значком меню . Оба они являются изображениями PNG .
  2. Это веб-сайт предпринимателя с потрясающим значком меню и значком поиска . Если вы проверите Inspect Element для мобильного сайта, вы увидите, что значок поиска и значок меню не являются изображениями (на самом деле я не знаю). Он использует псевдоэлемент . Как это работает? Возможно, это как-то связано с качеством.
  3. То же самое верно и для веб-сайта TimeofIndia . Здесь иконка меню сделана с помощью тега hr , так что это, конечно, здорово, но все же иконка поиска непонятна, так как использует псевдоэлемент .
  4. И еще один сценарий связан с техникой этого веб-сайта Business Insider . Я видел это на большинстве веб-сайтов, особенно на сайтах, подобных Facebook. Они используют одно изображение для всех иконок. Как это возможно? Если вы не понимаете, посетите этот веб-сайт и проверьте URL-адрес меню и изображение значка поиска. Как это делается?

Итак, сначала я хотел бы знать, как эти вещи работают? Как отображаются эти значки?

Во-вторых, почему я не получаю такого качества, как они? Должен ли я прекратить использовать подобные изображения? Я спрашиваю об этом, потому что я пробовал экспортировать разными способами с помощью Illustrator с такими же размерами, как и требовалось, но качество все равно было отстойным. Если вы видите, на мобильном сайте моего собственного блога ( Блог ) средняя горизонтальная полоса размыта, несмотря на то, что исходное изображение перед загрузкой выглядит потрясающе. Почему это?

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

Спасибо.

Могу ли я улучшить этот вопрос, чтобы удалить 1 отрицательный голос?

Ответы (2)

Эти сайты используют векторы. Когда вы экспортируете в формате png, вы можете сохранить высокое качество, но с svg (вектором) вы сохраняете полную целостность графики.

Из AI вы можете напрямую экспортировать в svg. Если вы собираетесь включить текст в графику, вам нужно «расширить» текст, чтобы зафиксировать контуры букв.

А как насчет этих псевдоконцепций и единого изображения для всех иконок? Не могли бы вы добавить это к своему ответу?
Вы уверены, что все они используют векторы для значков поиска? Вы читали ответ ниже?
Комментарии по поводу значков шрифтов верны. Этот псевдоэлемент, о котором вы спрашиваете, является лишь частью того, как они загружаются. Что касается единого изображения для всех иконок, то это достигается спрайт-листами .
Если у вас есть знания о технологиях переднего плана, не могли бы вы взглянуть на эту проблему? Это связано с SVG. Что-то не работает: stackoverflow.com/questions/39678361/…
А, похоже, ты получил ответ. Дайте мне знать, если вам все еще нужна помощь.
Да, я получил ответ. Но у меня есть еще вопросы. Как насчет браузеров, которые не поддерживают SVG. Что делать? Использовать для них изображения PNG?
Да, я не знаю ни одного, который их не поддерживает, но следующий лучший вариант — PNG.
Итак, как я могу это сделать? Любой намек? Мы хотим заменить SVG, когда он не поддерживается.
Как загрузить PNG? Или как вернуться к PNG?
Как вернуться к PNG.
Вот ссылка с подробностями.
  1. Используйте иконочные шрифты, по крайней мере, для гамбургер-меню.
  2. Поскольку я не в Индии, меня перенаправляют на неиндийский сайт, поэтому трудно сказать.

  3. это иконочный шрифт, который определяется следующим образом:

    .s::before {
    color: #fff;
    content: "";
    font: bold 25px/1 "Genericons";
    position: relative;
}

    Работа зависит от шрифтаGenericons

  4. Они обрезаются с помощью инструкций css, подробнее здесь: css-sprites

3. Они использовали «\f400» в качестве контента. Что это значит?
Кроме того, я пытался найти в Google информацию о шрифтах Icon, но не смог найти удовлетворительных результатов, особенно об этой технике псевдоэлементов. Вы знаете какой-нибудь сайт для этого?
@VikasKumar '\ f400' - это просто имя символа в шрифте, как и «a» или «b», просто в большинстве шрифтов с ним не связан символ. Диапазон \e000-\f8ff является одной из трех так называемых областей частного использования , что означает отсутствие формального определения того, что представляет этот символ, но создатель шрифта может определить все, что захочет. Примеры его использования можно найти, например, в fontawesome , который содержит множество стандартных веб-иконок в качестве элементов шрифта в области частного использования.
@VikasKumar, а вот список символов шрифта avesomes и их местонахождение: fontawesome.io/cheatsheet
Я попытался напечатать некоторые символы, но они не отобразились. Я пытался поместить содержимое как '\f400' и '' но оба не работали.
@VikasKumar Но это работает только в том случае, если этот конкретный шрифт загружен в ваш браузер и связан с рассматриваемым текстом! Это не имеет никакого значения для любого другого шрифта.
О да, я только что прочитал об этом на Stackoverflow. Но теперь я не понимаю разницы между \wxyz и  Являются ли эти разные форматы для представления символа? Во-вторых, могу ли я использовать последний как контент '......'; ?
@VikasKumar да то же самое, альтернативный кодин. Да, вы можете использовать его в тексте.
Хорошо, я попробую в ближайшее время и скажу вам, если это работает :)
Формат \wxyz работает, а формат  не работает. Я скачал шрифты отсюда: fontawesome.io/assets/font-awesome-4.6.3.zip. Я пытался использовать второй формат, но он не отображался. Я скопировал это отсюда: fontawesome.io/cheatsheet
Как визуализировать значки с четкими краями в Illustrator
СпросиСетьПолитика конфиденциальности1y, 0v