Ich denke, ein passender Titel könnte sein: "Ist Photoshop immer noch ein geeignetes Werkzeug, um Typografie im Internet zu gestalten?" Aber das fehlt der dramatischen Reiz der oben genannten.
Wie viele von euch habe ich immer Photoshop verwendet, um Mock-up-Kompositionen meiner Designs zu erstellen. Solange ich mich erinnern kann, war es der Industriestandard und die Software der Wahl für die meisten Designer, mit denen ich gearbeitet habe. Ich habe Wochen damit zugebracht, pixelgenaue Layouts zu entwerfen, Elemente in hierarchische Ordner zu gruppieren und alle meine Ebenen zu etikettieren, um den Übergang vom schönen Mock zum Code so reibungslos wie möglich zu gestalten.
Ich wäre voller Enthusiasmus, Energie und Aufregung, erklärte einem Entwickler meine Entwürfe, schaltete Schichtzustände ein und aus, um meine Vision durch Photoshop zu illustrieren, war aber immer ein wenig enttäuscht, als mein glänzendes, poliertes Design zu dem wurde, was ich sehen würde im Browser. Sicher, es würde aussehen wie mein Design ... Und ich erkannte die Schriften, aber es fehlte mir die Schärfe, an die ich mich aus meinen Kompositionen erinnerte. Es war nicht so, dass die Entwickler es nicht gut codiert hatten, mehr, dass die Typografie, die ich in Photoshop erstellt hatte, nicht in Code übersetzt worden war.
Bei der Wahl Schriftarten Es gibt wenige Dinge, die wichtiger sind als die Frage, ob eine Schrift gut lesbar ist oder nicht. In Photoshop ist das nicht so ein Problem, weil alles gut aussieht. Es spielt keine Rolle, welche Schriftart Sie verwenden, bei welcher Größe oder Gewicht (innerhalb des Grundes), wie es perfekt auf dem Bildschirm rendern wird.
Leider erstreckt sich dies nicht auf den Browser. Bei der Anzeige meines Designs im Browser waren die Beziehungen zwischen Elementen und Typ oft falsch. Die Schriftgrößen und Zeilenhöhen, die ich den Stilen in meiner Photoshop-Komposition zugewiesen hatte, sahen nicht so aus wie im Browser. Wenn ich in meinen Entwürfen einen 20-Pixel-Rand über dem Titel festgelegt hätte, könnte sich diese Entfernung geändert haben, da die Zeilenhöhe der Kopfzeile sich auf die Größe des Rands auswirken würde, was in Photoshop nicht passieren würde. Ich müsste dann den langwierigen Prozess der gefürchteten "Design Tweaks" beginnen.
Vertrauen Sie mir, dass es nicht nur der Entwickler ist, der sich vor der Idee eines neben ihm sitzenden Designers zurückhält und ihn auffordert, die Körperkopie-Zeilenhöhe um zwei Pixel zu erhöhen, dann den CSS zu verändern und zu binden. Eingeben. 'Eigentlich 1 Pixel kleiner' ... Enter. "Vielleicht war es besser, wie es war". Diese Art der Feinabstimmung des CSS nach und nach, um die Ergebnisse in Echtzeit über den Browser zu sehen, ist zeitaufwändig und nicht förderlich für die Kreativität. Die Entwickler haben es schnell satt, den Tag damit zu verbringen, immer wieder die kleinsten Details zu verändern, die keinen Unterschied machen. Designer können nicht einfach und schnell neue Schriftarten und -stile ändern, um sie im Browser besser darstellen zu können.
Für Designer, die CSS verstehen, können Sie Tools wie Feuerwanze um effektiv Ihr eigenes Design im Browser zu optimieren, indem Sie alle CSS-Änderungen in einem Dokument notieren, die Sie dann an einen Entwickler weitergeben können. Dies ist praktisch das Gleiche wie das Sitzen mit einem Entwickler und das Vornehmen von CSS-Änderungen, aber viel weniger mühsam für den Entwickler und ermöglicht es dem Designer, weiter mit Größen und Stilen zu experimentieren, bevor er eine Entscheidung trifft. Obwohl dies ein gutes Werkzeug ist, um Teile des HTML und CSS zu überprüfen und zu verändern, werden Sie alle Änderungen verlieren, sobald Sie den Browser aktualisieren, was sehr ärgerlich sein kann, wenn Sie viele Elemente geändert haben und nicht alle aufgeschrieben haben Anpassungen.
Du kannst den ... benutzen Firediff-Plug-in um eine Aufzeichnung aller Änderungen zu speichern, die Sie in Firebug vornehmen, was großartig ist, da Sie dadurch jede Veränderung in einer separaten Tabelle für später speichern müssen. Das größte Problem bei dieser Methode besteht darin, dass Sie Web-Schriftarten in die Gleichung einfügen, da alle ausgewählten Schriftarten in Ihrem Typ-Kit installiert sein müssen oder nicht im Browser angezeigt werden. Dies macht es wesentlich schwieriger und weniger einfach, mit verschiedenen Schriftarten zu experimentieren, da Sie Schriftarten nicht einfach ausprobieren können.
Dienstleistungen wie Typumwandlung Es ist viel einfacher für Designer, mit Webfonts zu arbeiten, und ich mache meine ganze Typografie für das Web, das es benutzt. Es erlaubt Ihnen, typografische Mock-Ups zu erstellen (genau wie in Photoshop), indem Sie seine visuelle Oberfläche verwenden, um Schriften, Stile, Gewichte, Farben, Linienhöhe, Rand, Füllung und mehr Ihrer Typografie zuzuordnen. Das Beste an der Verwendung von Typecast ist, dass alles innerhalb des Browsers funktioniert, sodass Sie Entscheidungen über den Typ genau so treffen, wie er für den Benutzer gerendert wird. Sieht eine bestimmte Schriftart bei 19 Pixeln nicht zu heiß aus? Bump es bis zu 20 mit einem Klick auf eine Schaltfläche, zurück auf 19, bevor schließlich bei 18 Pixel Größe, alles in Sekunden, anstatt Stunden sitzen mit einem Entwickler.
Sie können beliebige Webfonts aus ihren 23.000 Schriftarten verwenden, einschließlich Google Fonts, Typekit und mehr in Ihren Kompositionen, was das Experimentieren schnell und einfach macht (sie wurden kürzlich von Monotype gekauft, die Fonts.com und Myfonts besitzen, also viele weitere Fonts erwarten auf dem Weg bald). Typecast führt meiner Meinung nach eine Vorstellung von Verspieltheit in die Typografie ein, da es Sie ermutigt, Schriftvariationen auszuprobieren, die Sie vielleicht nie entdeckt hätten, wenn sie nicht so leicht verfügbar und leicht austauschbar wären.
Ein weiteres sehr nützliches Feature von Typcast ist die Möglichkeit, das CSS Ihres Typs anzuzeigen und zu bearbeiten. Sie können Hintergrundfarben und -bilder, Hover-Zustände oder sogar Übergänge hinzufügen, indem Sie einfach das CSS-Bedienfeld bearbeiten. Sobald Sie mit Ihrer Erstellung zufrieden sind, können Sie den CSS-Code einfach exportieren und speichern, der dann auf Ihre Website hochgeladen oder an einen Entwickler gesendet werden kann. Da alles im Browser entworfen wurde, wird es genau so angezeigt, wie Sie es vorhaben.
Photoshop ist nicht der Industriestandard für nichts, und es wird einige von Ihnen draußen Hyperventilation bei dem Gedanken geben, es zum Design im Browser fallen zu lassen, schließlich sind wir nicht Coder kreativ. Nun, legen Sie die Papiertüte, da es immer noch eine Möglichkeit gibt, schöne Schrift mit Web-Fonts in Photoshop zu erstellen. Extensis Ich habe ein Plug-in erstellt, das auf Photoshop CS5 und höher installiert werden kann und Ihnen Zugriff auf alle WebINK- und Google Web Fonts gibt, die Sie direkt in Photoshop kostenlos verwenden können.
Dies bedeutet, dass Sie beliebige WebINK- oder Google-Webfonts in Ihren Design-Kompositionen verwenden können, wie Sie es auch bei Schriftarten tun würden, die auf Ihrem System installiert sind, und sie werden ungefähr so aussehen, wie sie im Browser aussehen sollten. Das Plug-In wird Ihnen im Moment nur Zugriff auf WebINK- und Google-Web-Fonts geben, aber auf der positiven Seite werden automatisch neue Fonts aktualisiert, wenn diese zu WebINK und Googles Fontsammlung hinzugefügt werden.
Ein weiteres wertvolles Plug-In, das den Übergang zwischen Photoshop-Kompositionen und browserkompatiblen CSS erleichtert, ist das kostenlose, Cloud-basierte Plug-In von css3ps.com . Einer der Hauptgründe, aus dem viele Designer mit Photoshop arbeiten, ist die Kontrolle über Ebenen und Formelemente. In der Lage zu sein, einfach und schnell mit Schatten, Leuchten, Farben, Texturen, abgerundeten Ecken und vielem mehr zu experimentieren, ist für die meisten fast eine Selbstverständlichkeit und etwas, das selbst erfahrene Designer nur mühsam im Browser replizieren können. Für diese ist dieses Plug-In perfekt, da Sie Ihre Kompositionen so erstellen können, wie Sie es am besten wissen, aber dann können Sie die Stile Ihrer Form ganz einfach in browserkompatibles CSS3 konvertieren. Diese Methode eignet sich ideal zum Entwerfen von Schaltflächen, Navigation oder irgendetwas anderem, für das Sie eine Form entworfen haben.
Vielleicht gibt es immer noch eine Rolle für Photoshop als Werkzeug für die Gestaltung von Weblayouts, aber für das Design von Typografie für das Web haben Anwendungen wie Firebug und Typecast es übernommen. Die Zeit, die benötigt wird, um statische Kompositionen zu aktualisieren, kann nicht mit der Geschwindigkeit und Leichtigkeit verglichen werden, mit der Sie Änderungen im Browser vornehmen können. Für diejenigen von Ihnen, die nicht einmal die Idee des Entwerfens im Browser unterhalten können, sollten die oben genannten Plug-ins zumindest Photoshop den nötigen Schub geben, um relevant zu bleiben und den Übergang zu erleichtern.
Verwenden Sie Photoshop zum Entwerfen von Websites? Geht Photoshop den Weg von Flash? Lassen Sie es uns in den Kommentaren wissen.
Vorgestelltes Bild / Thumbnail, verwendet totes Bild über Shutterstock.