So rendern Sie Symbole mit scharfen Kanten in Illustrator

Dies ist hauptsächlich eine Frage der Qualität von Logos/Icons, die auf Websites verwendet werden. Ich erstelle Logos/Symbole mit Illustrator, aber wenn ich Symbole auf professionellen Websites sehe (siehe Bild und Links), sehen sie scharf wie ein Text aus, ohne Unschärfe. Die Kanten sind sehr klar. Sehen Sie sich beispielsweise dieses Bild an, insbesondere das Suchsymbol und das Symbol für die Menüliste:

Geben Sie hier die Bildbeschreibung ein

  1. Dies ist mein eigener Blog mit schlechten Symbolen, dem Logo und dem Menüsymbol . Beide sind PNG- Bilder.
  2. Dies ist eine Entrepreneur- Website mit einem fantastischen Menüsymbol und einem Suchsymbol . Wenn Sie die Website Inspect Element for Mobile überprüfen , sehen Sie, dass das Suchsymbol und das Menüsymbol keine Bilder sind (ich kenne die Realität nicht). Es verwendet ein Pseudoelement . Wie funktioniert es? Vielleicht hat das was mit der Qualität zu tun.
  3. Gleiches gilt für die TimeofIndia- Website. Hier wird das Menüsymbol mit dem hr -Tag erstellt, es ist also offensichtlich großartig, aber das Suchsymbol ist immer noch unverständlich, da es ein Pseudoelement verwendet .
  4. Und ein weiteres Szenario hängt mit der Technik dieser Business Insider- Website zusammen. Ich habe es auf den meisten Websites gesehen, insbesondere auf Facebook-ähnlichen Websites. Sie verwenden ein einziges Bild für alle Symbole. Wie ist das möglich? Wenn Sie dies nicht verstehen, besuchen Sie bitte diese Website und überprüfen Sie die URL des Menüs und das Bild des Suchsymbols. Wie wird es gemacht?

Also zuerst würde ich gerne wissen, wie diese Dinge funktionieren? Wie werden diese Symbole gerendert?

Zweitens, warum bekomme ich nicht die Qualität wie sie? Sollte ich aufhören, solche Bilder zu verwenden? Ich frage dies, weil ich versucht habe, mit Illustrator auf viele Arten zu exportieren, mit den gleichen Abmessungen wie erforderlich, aber die Qualität ist immer noch schlecht. Wie Sie sehen können, ist auf der mobilen Website meines eigenen Blogs ( Blog ) der mittlere horizontale Balken verschwommen, obwohl das Originalbild vor dem Hochladen fantastisch aussieht. Warum das?

Ich denke, das sind zu viele Fragen. Ich würde mich freuen, wenn Sie geeignete Links bereitstellen könnten, um diese Dinge vollständig zu verstehen, wenn es nicht einfach ist, sie hier zu erklären.

Danke schön.

Kann ich diese Frage verbessern, um 1 Ablehnung zu entfernen?

Antworten (2)

Diese Seiten verwenden Vektoren. Wenn Sie als PNG exportieren, können Sie viel Qualität beibehalten, aber mit einem SVG (Vektor) behalten Sie die volle Integrität der Grafik bei.

Aus AI können Sie direkt nach SVG exportieren. Wenn Sie beabsichtigen, Text in die Grafik einzufügen, müssen Sie den Text „erweitern“, um die Umrisse der Buchstaben zu erfassen.

Was ist mit diesen Pseudokonzepten und diesem einzigen Bild für alle Symbole? Könnten Sie dies bitte Ihrer Antwort hinzufügen?
Sind Sie sicher, dass alle Vektoren für Suchsymbole verwenden? Hast du die Antwort unten gelesen?
Die Kommentare zu den Schriftsymbolen sind korrekt. Dieses Pseudoelement, nach dem Sie fragen, ist nur ein Teil davon, wie sie geladen werden. Was das einzelne Bild für alle Symbole betrifft, wird dies mit Spritesheets erreicht .
Wenn Sie sich mit Front-End-Technologien auskennen, könnten Sie sich dieses Problem bitte ansehen? Es hängt mit SVG zusammen. Etwas funktioniert nicht: stackoverflow.com/questions/39678361/…
Ah, sieht aus, als hättest du eine Antwort bekommen. Lassen Sie mich wissen, wenn Sie noch Hilfe benötigen.
Ja, ich habe die Antwort bekommen. Aber ich habe noch mehr zu fragen. Was ist mit Browsern, die SVG nicht unterstützen? Was soll ich tun? Verwenden Sie PNG-Bilder für sie?
Ja, ich kenne keine, die sie nicht unterstützen, aber PNG ist die nächstbeste Option
Wie kann ich das tun? Irgendein Hinweis? Wir möchten das SVG ersetzen, wenn es nicht unterstützt wird.
Wie lade ich PNG? Oder wie kann man auf PNG zurückgreifen?
So greifen Sie auf PNG zurück.
Hier ist ein Link mit Details.
  1. Verwenden Sie Icon-Fonts zumindest für das Hamburger-Menü
  2. Da ich nicht in Indien bin, werde ich auf eine nicht-indische Seite umgeleitet, so schwer zu sagen.

  3. Es ist eine Icon-Schriftart, die folgendermaßen definiert ist:

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

    Um zu funktionieren, hängt es von der Schriftart abGenericons

  4. Sie werden durch CSS-Anweisungen beschnitten. Lesen Sie hier mehr: CSS-Sprites

3. Sie haben '\f400' als Inhalt verwendet. Was bedeutet das?
Außerdem habe ich versucht, bei Google nach Icon-Fonts zu suchen, aber ich konnte keine zufriedenstellenden Ergebnisse finden, insbesondere diese Pseudo-Element-Technik. Kennst du eine Seite dafür?
@VikasKumar '\f400' ist nur der Name des Zeichens in der Schriftart, genau wie 'a' oder 'b', es ist in den meisten Schriftarten nur kein Symbol damit verbunden. Der Bereich \e000-\f8ff ist einer von drei sogenannten Bereichen für den privaten Gebrauch , was bedeutet, dass es keine formelle Definition dessen gibt, was dieses Zeichen darstellt, aber der Hersteller der Schriftart kann definieren, was er will. Anwendungsbeispiele finden sich beispielsweise in fontawesome , das im privaten Bereich viele Standard-Web-Icons als Font-Einträge enthält.
@VikasKumar und hier ist die Liste der Font-Avesomes-Zeichen und deren Speicherort: fontawesome.io/cheatsheet
Ich habe versucht, einige der Symbole zu drucken, aber sie wurden nicht gerendert. Ich habe versucht, Inhalt als '\f400' und '' aber beides ging nicht.
@VikasKumar Aber es funktioniert nur , wenn Sie diese bestimmte Schriftart in Ihrem Browser geladen und mit dem betreffenden Text verknüpft haben! Es hat keine Bedeutung für andere Schriftarten.
Oh ja, ich habe gerade bei Stackoverflow darüber gelesen. Aber was ich jetzt nicht verstehe, ist der Unterschied zwischen \wxyz und  Sollen diese unterschiedlichen Formate ein Symbol darstellen? Zweitens kann ich letzteres als Inhalt verwenden '.......'; ?
@VikasKumar ja dasselbe alternative encodin. Ja, Sie können es im Text verwenden.
Ok, ich werde es bald versuchen und dir sagen, ob es funktioniert :)
Nun, das \wxyz-Format funktioniert und das  funktioniert nicht. Ich habe Schriftarten von hier heruntergeladen: fontawesome.io/assets/font-awesome-4.6.3.zip Ich habe versucht, das zweite Format zu verwenden, aber es wurde nicht gerendert. Ich habe es von hier kopiert: fontawesome.io/cheatsheet
So rendern Sie Symbole mit scharfen Kanten in Illustrator
AntwortenHierDatenschutz-Bestimmungen1y, 0v