Ich bin ziemlich neu in Photoshop und Illustrator und versuche, ein einfaches textbasiertes Logo zu erstellen, das ich auf meiner Website verwenden kann, zum Beispiel: http://codepen.io/d3wannabe/pen/BWrbZa
Je nachdem, welchen Browser man zum Rendern des Textes verwendet, bekommt man ganz unterschiedliche Versionen davon (weshalb ich das Bild natürlich selbst erstellen muss), aber zum Beispiel auf Chrome sieht man schon eine Unschärfe an den Rändern der Schrift.
Das Problem, das ich in Illustrator habe, ist, dass, wenn ich in einer bestimmten Schriftart schreibe (z. B. „Arial Rounded MT Bold“ bei 24pt), die Schriftart bei 200% Zoom schön und klar vor meiner Hintergrundfarbe aussieht, aber ich beginne, Unschärfe zu sehen bei 100% - dann bin ich mir nicht sicher, was es mit dem "Im Web speichern"-Prozess auf sich hat, aber das Bild verliert weiter an Klarheit, bis es auf meiner Website landet (als "typoptimiertes" PNG).
Ich habe irgendwo gelesen, dass Photoshop besser zum Speichern von Textbildern für das Web geeignet ist, aber ich sehe dort bereits vor dem Exportieren eine ähnliche Unschärfe (und natürlich verpixelt ein 200% -Zoom in Photoshop nur das Bild).
Was mir also wirklich fehlt, ist eine Schritt-für-Schritt-Anleitung für Dummies, wie man gestochen scharfe Bilder von Text auf eine Website bringt. An diesem Punkt bin ich mir nicht sicher, ob ich vielleicht nur einen schlechten Farbkontrast oder Schriftarten gewählt habe, die nicht gut skalieren - obwohl ich mich auch frage, ob die Tatsache, dass die Schriftart in Illustrator bei 200 schön aussieht, etwas Bedeutsames hat % oder größer - vielleicht bedeutet das, dass ich die Schriftart aus Illustrator in einer größeren Größe als erforderlich exportieren und dann (irgendwie!) danach zusätzlich verkleinern sollte - obwohl ich natürlich wieder nicht darauf vertrauen kann, dass Webbrowser das für mich tun.
BEARBEITEN: Ich hätte auch bemerken sollen, dass der Effekt auf meinem Monitor viel schlimmer ist als auf meinem Laptop (es ist verlockend zu sagen, dass ich einen schlechten Monitor habe, aber es gibt viele Websites, auf denen die Monitorversion auch gut aussieht!)
Photoshop vs. Illustrator sollte hier keinen so großen Unterschied machen. Dinge, die Sie ausprobieren können:
Exportieren Sie Ihr Logo aus drei Gründen als SVG:
Als Webentwickler, der in einer Agentur von angemessener Größe arbeitet, exportieren wir alle Logos unserer Kunden als SVGs. Ich würde mich nicht einmal um PNGs kümmern, sie sind viel größer und normalerweise nicht annähernd so scharf oder glatt wie eine SVG.
Folgendes sollten Sie tun:
Es ist ziemlich einfach und Sie haben ein extrem scharfes Logo, das schneller geladen wird als jedes PNG.
Bearbeiten: Verwenden Sie Illustrator über Photoshop, Sie möchten ein scharfes Vektorlogo, das beliebig vergrößert werden kann, nicht etwas, das auf die Größe beschränkt ist, in der Sie es entwerfen. Photoshop hat SVG-Exportfunktionen, ist aber im Vergleich zu Illustrator ziemlich ruckelig. Ich würde für diesen Fall zu 100% Illustrator verwenden, es spielt keine Rolle, welchen Sie verwenden.
Dies ist völlig hypothetisch, aber es besteht eine gute Chance, dass dies mit einer Skalierung der Benutzeroberfläche des Betriebssystems zu tun hat. Heutzutage haben viele Monitore so viele Pixel, dass viele Leute es unangenehm klein finden, wenn alles zu 100% angezeigt wird. Das Ergebnis ist, dass beim Kauf eines Full-HD-Monitors Windows standardmäßig leicht hineinzoomt. Wenn es Informationen über die aktuelle Größe hinaus gibt, werden diese Informationen verwendet, um diese zusätzlichen Details aufzufüllen, sodass 100 % möglicherweise etwas unscharf aussehen und Sie höhere DPI-Versionen speichern und diese servern müssen, damit sie auf diesen Monitoren scharf aussehen. Also ja, in diesem Fall lassen Sie den Browser die gesamte Verkleinerung durchführen (Sie können sogar den Algorithmus in CSS auswählen , sollten dies aber nicht wollen). Hier ist eine sehr alte Antwort , die beschreibt, wie es geht.
Nun, damit es bei so niedrigen Auflösungen scharf ist, gibt es nur eine Route. Vektorgrafiken. Ein solcher vorgeschlagener Dateityp ist SVG (Scalable Vector Graphics), aber es reicht nicht aus, nur eine Bitmap zu laden und dann als SVG zu exportieren, weil Sie dann einfach versuchen, eine gerasterte Datei in eine vektorisierte zu zwingen, das geht nicht sehen auf diesem Weg nicht besser aus als das Original.
Sie erwähnen jedoch Schriftarten, also tippen Sie vermutlich in Illustrator und es sieht klar aus. Schriftarten sind von Haus aus ein Vektorformat. Wenn Sie das also als SVG exportieren, sollte es schön und klar bleiben. Nicht unbedingt ganz so viel, Schriftarten erfordern je nach Betriebssystem jedoch oft ein wenig zusätzliches Schummeln für eine besonders knusprige Knusprigkeit mit Subpixel-Pegelsteuerung.
Abhängig von Ihrer Originaldatei müssen Sie möglicherweise die Vektoren für Ihre Datei im Wesentlichen nachzeichnen und neu erstellen und erst dann als SVG exportieren.
Auch „Save to/for web“ ist ein Code für „schlachte meine Datei mit viel Komprimierung, um sie klein zu machen und schnell zu laden“.
Ich verspreche zu 100 %, dass SVG der richtige Weg ist. Sie haben bereits Adobe Illustrator, aber für alle, die dies nicht tun, ist Inkscape ein weiterer kostenloser und quelloffener Vektorgrafik-Editor, mit dem Sie problemlos scharfe Logos in jeder Größe erhalten können.
PDFs verwenden auch Vektorgrafiken (meistens, obwohl Sie auch Rasterbilder einbetten können), aber sie werden nicht für Logos im Web unterstützt (das in Registerkarten angezeigte usw.).
Es gibt viele Tutorials, um sie zu erstellen, z. B. in Inkscape (damit jeder es versuchen kann) https://www.youtube.com/watch?v=mX7Nbj1xFco Einfach am Ende stattdessen als SVG speichern.
Und auch in Webseitenform: http://lebende-bilder.blogspot.qa/2014/03/tutorial-how-to-create-logo-in-inkscape.html
Wenn Sie lieber noch PNG (ein Rasterformat) verwenden möchten, ist es wahrscheinlich am besten, mit einer ziemlich großen Datei zu beginnen und viele verkleinerte Versionen für die Verwendung in verschiedenen Teilen Ihrer Website zu erstellen. Der Skalierungsalgorithmus kann auch eine Rolle spielen, ich würde vorschlagen, etwas mindestens auf der Ebene von SincLanczos zu verwenden (es ist sicher auch im kostenlosen und Open-Source-GIMP und in Photoshop verfügbar, obwohl die Benennung etwas anders sein kann). Ein Tutorial für ein PNG-Logo in Inkscape finden Sie hier: http://audioplastic.org/blog/2011/07/03/inkscape-logo/ Ich denke, dass einige der verwendeten Effekte gerastert sind, und das war die Motivation dafür ihnen, ein PNG zu verwenden.
Hier ist ein tolles Tutorial zum Thema mit Illustrator: https://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the-web--vector-20899
Wie er betont, werden einige der Dinge, die er tut, nicht für Text benötigt, aber wenn Sie von einem Rasterbild ausgehen, müssen Sie davon irgendwie zu Vektoren gelangen. Inkscape hat ein Tool, das dies automatisch versucht, aber es kann nur einfache Eingaben wirklich gut verarbeiten. Ich bin mit Illustrator nicht vertraut genug, um zu sagen, ob ihr Tool (falls sie eines haben) besser ist. Aus diesem Grund habe ich vorhin vorgeschlagen, dass Sie möglicherweise die Vektoren über das Rasterbild verfolgen müssen, um das Logo neu zu erstellen, und dann das Rasterbild löschen und exportieren.
SVG wird die stark unterschiedlichen Versionen verhindern, wie das OP zu Beginn angemerkt hat, da das Logo einmal in SVG als mathematische Gleichungen dargestellt wird (es bettet keine Schriftarten ein, sie werden in die Gleichungen für die gezeigten Formen umgewandelt). In PDF können Sie tatsächlich eine völlig andere Schriftartanzeige erhalten, insbesondere wenn die eingebettete Schriftart von Ihrem Betriebssystem nicht unterstützt wird. In diesem Fall wird eine andere Standardschriftart zur Anzeige des Textes verwendet.
Ich wiederhole noch einmal: Verwenden Sie die Webformate NICHT für alles, was Sie in hoher Qualität zeigen möchten. Der Zweck dieses Exports besteht darin, Bandbreite zu sparen und Ladezeiten zu verkürzen, indem viel verlustbehaftete Komprimierung verwendet wird (während das Bild hoffentlich kaum akzeptabel bleibt), da Websites diese Bandbreite nicht verschwenden möchten. Allerdings hat es seinen Nutzen, nicht jeder möchte alles in absolut maximaler Qualität anzeigen. SVG hält zwar auch die Größe klein, aber viele Dinge, die wir zeigen wollen, funktionieren nicht als SVGs, z. B. Fotos, die wir mit unseren Kameras aufnehmen, werden von dem Moment an gerastert, in dem wir sie aufnehmen, und es macht wenig Sinn, sie in ein SVG zu stecken. Je nachdem, ob dies der zentrale Fokus Ihrer Website ist oder nicht, möchten Sie sie möglicherweise für das Web komprimieren (z. B. möchten Sie dies wahrscheinlich nicht für die Benutzerbilder von Flicker,
Über die Unschärfe des Bildes beim Zoomen würde ich mir keine Gedanken machen. Wenn jemand 200 % heranzoomen muss, um die Seite bequem lesen zu können, ist der Text zu klein oder seine Sicht ist nicht gut genug, um zu bemerken, dass das Bild bei solch extremen Zoomstufen verschwommen ist.
Nik