Share
Szenario: Jemand übergibt Ihnen ein Illustrator-Dokument mit dem neuesten Weblayout, und es ist Ihre Aufgabe, es in HTML und CSS umzuwandeln. Lassen Sie uns einen Blick darauf werfen, wie Sie das schaffen können.
Hinweis: Das Ziel dieses Tutorials ist nicht, das Design für die Verwendung im Web perfekt neu zu erstellen. Stattdessen verwenden wir es, um Workflows und Funktionen in Illustrator zu erkunden, die uns dabei helfen.
Beginnen wir mit einem Blick auf das betreffende Dokument:
In diesem Lernprogramm erfahren Sie, wie unser Beispiellayout erstellt wurdeEs ist ein Layout für eine 404-Seite. Eine Seite, die den Benutzern mitteilt, dass das, wonach sie suchen, nicht gefunden werden kann und dass sie vielleicht etwas anderes versuchen sollten. Wir können eine Überschrift, einige Instruktionsabsätze, ein Suchformular und eine Schaltfläche sowie einige Schaltflächen mit Tooltips ganz unten sehen.
Das Ganze scheint horizontal und vertikal in der Mitte der Seite zu schweben. Es hat einen gelben Hintergrund, einige warme Akzente und Schatten hier und dort. Wo fangen wir an?
Wir werden das Rad dafür nicht neu erfinden, sondern machen uns das so einfach wie möglich. Illustrator wird dafür kein ordentliches Paket aus HTML, CSS und JavaScript ausgeben. Wir werden auch nicht unsere Zeit damit verschwenden, alles von Grund auf neu zu erstellen. Nehmen wir also eine Kopie von Bootstrap, um diesem Projekt einen Anstoß zu geben.
Derzeit v3.1.1, wie Sie sehen können… Ich habe Bootstrap heruntergeladen, einige der nicht benötigten CSS- und Font-Dateien entfernt und dann eine index.html-Datei hinzugefügt, die auf der Cover-Vorlage von Mark Otto basiert. Vier Minuten Mausklick und ich habe selbst eine grundlegende Seite, die ungefähr dem entspricht, was wir suchen.
Es sieht vielleicht nicht nach viel aus, aber wir haben gerade eine Menge Zeit gespart… Quelldateien, die ab diesem Punkt fortgesetzt werden können, sind im GitHub-Repo im Ordner 1-Ausgangspunkt verfügbar.
Der nächste logische Schritt wäre, strukturelle Markierungen in unsere index.html aufzunehmen (auch dies tut Illustrator nicht für uns). Wir haben bereits einen zentral ausgerichteten Container, einen div mit Klassen Innenabdeckung:
404
Dies ist die Basis, von der aus wir arbeiten werden. Alle Flusen wurden entfernt.
Fügen wir einige zusätzliche Teile hinzu:
Error
404
Leider existiert die von Ihnen gesuchte Seite nicht
Suchen Sie hier nach der Seite:
Oder
zurück zu hause kontaktiere uns
Wir haben Überschriften-Tags hinzugefügt und , einige Absätze und ein typisches Bootstrap-Formular-Markup (weitere Beispiele finden Sie in den Bootstrap-Dokumenten). Das Formular hat eine Klasse von Inline-Formular, eine native Bootstrap-Klasse, die unsere Formularelemente entlang einer Zeile platziert.
Am Ende sehen Sie drei Anker, alle mit den Klassen btn und BTN-Primär. Diese dienen als unsere Knöpfe. Folgendes haben wir zu diesem Zeitpunkt:
Zu diesem Zeitpunkt haben wir nichts in Bezug auf das Styling getan, keine einzelne CSS-Zeile, aber dank Bootstrap haben wir unsere Seite effektiv erstellt und sind bereit für das Aufpolieren.
Etwas anderes, mit dem Bootstrap uns helfen wird; die Tooltips Weitere Informationen zu den verschiedenen Optionen, die uns zur Verfügung stehen, finden Sie in den Bootstrap-Dokumenten. Lassen Sie uns jetzt die notwendigen Zutaten zu unserem HTML-Code hinzufügen.
Zu jeder Schaltfläche fügen wir eine zusätzliche Klasse hinzu Spitze Wird verwendet, um alles zu identifizieren, was einen Tooltip benötigt. Wir brauchen auch eine Titel Attribut, das bestimmt, was tatsächlich im Tooltip angezeigt wird:
zurück
Das bootstrap.min.js Die Datei, in die wir bereits ziehen, enthält alle JavaScript-Informationen, die für die QuickInfos erforderlich sind. Tatsächlich gibt es eine Menge anderer JavaScript-Spielzeuge, von denen viele nicht einmal benötigt werden. In einer Produktionsumgebung kann es daher sinnvoll sein, nur die Dinge zu verwenden, die wir verwenden. Bootstrap-Tooltips sind opt-in, also funktionieren sie nicht automatisch, wir müssen sie initialisieren. Tun wir das innerhalb der Skript-Tags am Ende unserer Seite, unter denen wir das andere JavaScript aufgerufen haben:
Erledigt. Wir haben jetzt folgendes:
Massiver Unterschied!Ich habe dem Projekt eine dritte CSS-Datei hinzugefügt theme.css und haben darauf aus dem Dokument hingewiesen . Aber was fügen wir dem Stylesheet hinzu??
Wir werden mit dem Hauptcontainer beginnen. Wählen Sie das Containerobjekt in Illustrator aus und Sie werden in der Schichten Panel, dass es benannt wurde Main.
Das ist relevant. In einer Team-Situation ist es ratsam, ein gemeinsames Verständnis darüber zu haben, wie solche Objekte benannt werden sollten. Sie werden den Grund sehen, wenn wir das CSS-Bedienfeld öffnen.
Gehe zu Fenster> CSS-Eigenschaften um ein Panel mit demselben Namen zu zeigen. Wenn unser Hauptobjekt ausgewählt ist, enthält es alle relevanten Stile, die wir direkt in unser Stylesheet einfügen können. Sie werden sehen, dass diese Stile auf den Selektor angewendet wurden .Main, so wie unser Objekt benannt wurde.
Kopieren Sie das, was Sie sehen, und fügen Sie es direkt in das ein theme.css Datei. Damit diese Regeln auf unser Containerelement angewendet werden können, müssen wir die Auswahl auf das ändern, was wir tatsächlich verwenden (Behalten der .Main Selector ist ein bisschen riskant, da wir dies an anderer Stelle auf unserer gesamten Website finden können. Veränderung .Main zu .Innenabdeckung und Sie sollten sehen, wie Ihr Containerelement goldgelb wird, mit abgerundeten Ecken und sogar mit einem Boxschatten, die alle mit ansehnlichem Cross-Browser-CSS angewendet werden.
Sie werden feststellen, dass unsere CSS-Regeln hier keine Breiten oder Höhen enthalten. Das ist eine gute Sache; Bootstrap kümmert sich ziemlich genau darum, also suchen wir nur nach ästhetischen Stilen. Durch Ändern der CSS-Eigenschaften Exportoptionen Wir könnten unsere Abmessungen hier einschließen, aber wir werden sie weglassen.
Unser Container ist jedoch aufgrund der bereits angewendeten Stile etwas breit, also überschreiben Sie diese Dimensionen mit der folgenden Medienabfrage:
@media (min-width: 992px) .masthead, .mastfoot, .cover-container width: 400px;
Dadurch werden die in cover.css gefundenen Regeln außer Kraft gesetzt, sodass eine Breite von 400 Pixeln auf Bildschirmen mit einer Breite von mindestens 992 Pixeln erreicht wird. 400px stimmt nicht genau mit dem Design überein, aber ich persönlich finde die wahren Abmessungen und die Schriftgröße etwas klein, daher lehne ich dies ab!
Während wir hier sind, möchte ich nur die Stile ändern, so dass wir auch die abgerundeten Ecken in dieser Medienanfrage anwenden. Entfernen Sie sie aus den Regeln, die Sie in Illustrator eingefügt haben, und wenden Sie sie stattdessen wie folgt an:
@media (min-width: 992px) .masthead, .mastfoot, .cover-container width: 400px; .inner.cover border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Jetzt sollten wir auf großen Bildschirmen etwas ähnliches haben:
… Und das auf kleinen Bildschirmen:
Wir halten uns nicht genau an die genauen Abmessungen des Illustrator-Dokuments, aber das ist kein Problem. Die Bahn ist flüssig. Trotzdem könnte unser Container etwas Polsterung auf der Unterseite verwenden, also lassen Sie uns herausfinden, wie viel unser Illustrator-Design für uns bedeutet.
Wähle aus Werkzeug messen in Illustrator (finden Sie es mit der Pipette) und ziehen Sie den Cursor, um einen beliebigen Bereich des Designs zu messen. Wir können sehen, dass die Auffüllung 25px ist, also lassen wir das manuell auf unsere Styles anwenden.
.Innenhülle Polsterung unten: 25px;
BesserWir haben hier eine Reihe von Stilen und Objekten, mit denen wir uns befassen müssen, und wenn alles genau so benannt wäre, wie es sein sollte, könnten wir (im Prinzip) einen riesigen CSS-Stapel von Illustrator ausgeben, um mit all dem umzugehen. Allerdings gibt es hier einige Unstimmigkeiten bei der Benennung der Objekte (um dies zu vermeiden, würde dies eine enge Kommunikation zwischen Designer und Entwickler erforderlich machen), und am Ende kann es zu unerwünschtem Code kommen, den wir nicht benötigen.
Arbeite dich geduldig von Element zu Element vor, wähle jedes Objekt aus und gib das entsprechende CSS aus. Beginnen Sie mit der Typografie und lassen Sie uns sehen, wie gut Illustrator ist.
Eines der ersten Dinge, die Sie bemerken werden, ist, dass das CSS für jedes Typobjekt Folgendes enthält: Schriftfamilie: Open Sans;
Open Sans ist keine Standard-Systemschriftart und wird in keinem Browser angezeigt, in dem der Benutzer sie nicht installiert hat. Sie müssen also zu Google Fonts wechseln und den CSS-Link verwenden, um ihn durch die Magie der Webfonts in die Seite zu ziehen.
Bis jetzt ist alles ziemlich gut gelaufen, aber dann haben wir die Knöpfe gedrückt. Die Suchschaltfläche ist eigentlich nicht schlecht, aber die drei folgenden Schaltflächen wurden nicht mit Objektnamen versehen. In unserem CSS-Eigenschaftenfenster wird Folgendes angezeigt:
Es wurde kein CSS-Code generiert. Um CSS für nicht benannte Objekte zu erstellen, benennen Sie das Objekt entweder im Ebenenbedienfeld oder aktivieren Sie die Option "CSS für nicht benannte Objekte generieren" im Dialogfeld "CSS-Exportoptionen".
Machen Sie weiter und eröffnen Sie die oben beschriebenen Optionen. Stellen Sie dann sicher, dass Sie das geprüft haben Generieren Sie CSS für Unbenannte Objekte. Die Alternative wäre, unseren Knöpfen einen Namen zu geben, aber beide Optionen sind hier in Ordnung.
Jetzt können wir alle Tasten auswählen CSS generieren und haben die Styles für uns ausgegeben. Leider gibt Illustrator vollständige Stile für jedes einzelne Objekt aus, auch wenn alle dieselben Regeln haben. Dies scheint auch dann der Fall zu sein, wenn wir Common verwenden Grafische Stile, Zeichenstile, Absatzstile, oder sogar alle Objekte den gleichen Namen geben! Hier besteht Verbesserungsbedarf, aber wir können zumindest gängige Stile greifen und sie manuell auf mehrere Objekte anwenden.
Ich habe die Stile für die Suchschaltfläche kopiert und auf sie angewendet .btn, .btn: hover um sicherzustellen, dass alle Bootstrap-Stile entsprechend überschrieben wurden. Ich fügte auch ein Grenze: keine; um den blauen Rand von Bootstrap loszuwerden. Mal sehen, was uns das bringt!
Nicht schlecht, aber nicht perfektDas ist nicht schlecht, aber es ist ein guter Weg, um perfekt zu sein. Die Text-Schatten wurden nicht eingehalten (es fehlt ihnen an Transparenz), die Farbverläufe auf den Schaltflächen sind nicht korrekt und die Box-Schatten fehlen vollständig.
Kurz gesagt, der Illustrator-CSS-Export ist noch nicht bereit für diese Art komplexer Strukturen (um ehrlich zu sein, ist er sehr komplex). Schauen wir uns die Suchschaltfläche an, die wir neu erstellen möchten:
Es ist wunderbar. Aber sehen Sie sich an, wie viele Füllungen, Farbverläufe und Schatten beim Bauen entstanden sind:
Autsch. Kein Wunder, dass Illustrator gesagt hat Nein. Sogar der Grenzradius wurde nicht berücksichtigt, weil die Dinge zu komplex geworden sind.
Du machst keine Witze ... Stattdessen werde ich einfach ein paar einfache Stile anwenden und das komplexe CSS umgehen (in diesem Tutorial wird erläutert, was Illustrator überhaupt für uns tun kann…) .btn Stile sehen so aus:
.btn, .btn: hover font-family: Open Sans; Schriftdicke: fett; Schriftgröße: 14px; Farbe: # AC4400; Text-Schatten: 0px 1px 0px rgba (255, 255, 255, 0,3); Hintergrund: # FDDA2F; Rahmenfarbe: # FDDA2F; Grenzradius: 4px;
In Bezug auf die CSS-Effizienz lässt dies alles zu wünschen übrig, aber wir arbeiten mit dem, was uns Illustrator zur Demonstration gibt. Es wäre ratsam, danach zurück zu gehen und das CSS aufzuräumen, vielleicht sogar mit einem Tool wie CSSLint.
Was wir bisher generiert haben, ist nicht schlecht, also lassen wir es für jetzt alleine. Wenden wir uns den Schaltflächensymbolen zu. Wir können hier einige Ansätze verwenden:
Wenn Sie jede Grafik auswählen, können Sie CSS auf die gleiche Weise wie zuvor erstellen. Illustrator kann komplexe Pfade als PNG-Dateien exportieren und diese Bilder dann als Hintergrund für Ihre Elemente verwenden.
Sie erhalten eine Gruppe von Assets, die Sie verwenden können:
Aber auch hier ist es nicht perfekt, und es werden bestimmte Aspekte des Designs ausgelassen, wobei fragwürdige Stile in anderen Fällen ausgegeben werden. Daher erfordert dieser Ansatz eine Feinarbeit. Bei diesem Ansatz werden auch Retina-Displays nicht berücksichtigt, wodurch auf bestimmten Bildschirmen möglicherweise Grafiken unterhalb des Standards erscheinen. Das ausgegebene CSS für diese Grafiken sieht jedoch folgendermaßen aus:
.Bild Hintergrundbild: URL (Bild.png); Hintergrundwiederholung: keine Wiederholung;
Als Webdesigner würde ich in diesem Fall lieber SVG wählen, was Illustrator sehr gut kann.
Wählen Sie zunächst ein Symbol aus und kopieren Sie es wie gewohnt in die Zwischenablage (Befehl + C). Die SVG-Daten für dieses Objekt stehen jetzt zum Einfügen in einen Texteditor (erstaunlich) zur Verfügung. Öffnen Sie eine neue Datei in Ihrem Webprojekt, nennen Sie sie "icon-contact.svg" und fügen Sie den Inhalt der Zwischenablage ein.
Sie können diese SVG-Datei jetzt direkt in das Markup Ihrer index.html einfügen:
Hallo… Es gibt verschiedene Möglichkeiten, SVG in eine Webseite zu implementieren. Über CSS können Sie die XML-Datei zunächst in base64 konvertieren und sie in Ihre Markup-Inline einfügen. Sie haben die Wahl (SVG-Dateien: Vom Illustrator ins Web, um weitere Informationen zu erhalten). Unser Ansatz funktioniert gut, zumindest in modernen Browsern, also bleiben wir dabei.
Wiederholen Sie den Vorgang für die anderen Symbole und…
Mit etwas mehr Optimierungsaufwand (ich habe dem Form-Element ein paar Füllungen hinzugefügt), sollten Sie etwas haben, das diesem ähnelt:
Nicht schlecht! Die Illustrator-Grafik wird nicht zu 100% wiedergegeben, aber da wir uns hauptsächlich auf die von Illustrator ausgegebenen Formatvorlagen verlassen haben, können wir uns ziemlich freuen. Alle weiteren Verbesserungen müssen von Hand vorgenommen werden, Illustrator hat an dieser Stelle alles getan, was er kann.
Haben Sie Tipps, mit denen Illustrator dieses Web-Layout direkt verbessern kann? Lass es uns in den Kommentaren wissen!
Accentsconagua
