Tipps zum Einfügen eines Webdesigns aus Illustrator in den Browser

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Szenario: Jemand gibt Ihnen ein Illustrator-Dokument mit dem neuesten Weblayout und es ist Ihre Aufgabe, es in funktionierendes HTML und CSS zu konvertieren. Lassen Sie uns einen Blick darauf werfen, wie Sie das tun können.

Hinweis: Ziel dieses Tutorials ist es nicht, das Design für die Webnutzung perfekt nachzubilden. Stattdessen werden wir damit Workflows und Funktionen in Illustrator untersuchen, die uns dabei helfen.

Die Illustrator-Datei

Schauen wir uns zunächst das betreffende Dokument an:

Sehen Sie in diesem Tutorial, wie unser Beispiellayout erstellt wurde

Es 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 ausprobieren sollten. Wir sehen eine Überschrift, einige Absätze mit Anweisungen, ein Suchformular und eine Schaltfläche sowie einige Schaltflächen mit QuickInfos ganz unten.

Das Ganze scheint horizontal und vertikal in der Mitte der Seite zu schweben. Es hat einen gelben Hintergrund, einige warme Akzente und Schlagschatten hier und da. Wo fangen wir an?

Immer sachte!

Wir werden das Rad dafür nicht neu erfinden, machen wir es uns so einfach wie möglich. Illustrator wird dafür kein ordentliches Paket aus HTML, CSS und JavaScript ausgeben, und 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 Kick-Start zu geben.

Ich habe Bootstrap heruntergeladen, einige der nicht benötigten CSS- und Schriftdateien entfernt und dann eine index.html-Datei hinzugefügt, die auf der Cover-Vorlage von Mark Otto basiert. Nach vier Minuten Mausklick habe ich eine einfache Seite, die in etwa dem entspricht, wonach wir suchen.

Es sieht vielleicht nicht nach viel aus, aber wir haben gerade eine Menge Zeit gespart.

Quelldateien, um von diesem Punkt aus fortzufahren, sind im GitHub-Repo im Ordner 1-Startpunkt verfügbar.

Markup hinzufügen

Der nächste logische Schritt wäre das Hinzufügen eines strukturellen Markups zu unserer index.html (Illustrator wird dies wiederum nicht für uns tun). Wir haben bereits einen zentral ausgerichteten Container, einen div mit Klassen innen cover:

1	<div class="inner cover">
2	<h1 class="cover-heading">404</h1>
3	<p class="lead">This is the base from which we'll work. All fluff has been stripped out.</p>
4	</div>

Fügen wir einige zusätzliche Teile hinzu:

<div class="inner cover">
          
    <h1>Error</h1>
    <h2>404</h2>
    <p>Sorry, the page you were looking for doesn't exist</p>
    <p>Try searching for the page here:</p>
           
    <!-- more form markup available http://getbootstrap.com/css/#forms -->            
    <form class="form-inline form-search" role="form">
        <div class="form-group">
            <label class="sr-only" for="searchInput">Search</label>
            <input type="search" class="form-control" id="searchInput">
        </div>
        <button type="submit" class="btn btn-default">Search</button>
    </form>
			
    <p>Or</p>
			
    <!-- buttons -->
    <a href="#" class="btn btn-primary">back</a>			
    <a href="#" class="btn btn-primary">home</a>			
    <a href="#" class="btn btn-primary">contact us</a>

</div>

Wir haben die Überschriften-Tags <h1> und <h2>, einige Absätze und einige typische Bootstrap-Formular-Markups hinzugefügt (weitere Beispiele finden Sie in den Bootstrap-Dokumenten). Das Formular hat eine Klasse von form-inline, eine native Bootstrap-Klasse, die unsere Formularelemente entlang einer Zeile platziert.

Schließlich sehen Sie am Ende drei Anker, alle mit den Klassen btn und btn-primary. Diese dienen als Knöpfe. Folgendes haben wir derzeit:

Zu diesem Zeitpunkt haben wir noch nichts in Bezug auf das Styling getan, keine einzige CSS-Zeile, aber dank Bootstrap haben wir unsere Seite effektiv erstellt und sind bereit zum Aufpolieren.

Lassen Sie uns die Werkzeugtips zum Laufen bringen

Etwas anderes, bei dem Bootstrap uns helfen wird; die Werkzeugtips. Sie können mehr über die verschiedenen Optionen lesen, die uns in den Bootstrap-Dokumenten zur Verfügung stehen, aber jetzt fügen wir einfach die erforderlichen Zutaten zu unserem HTML hinzu.

Zu jeder Schaltfläche fügen wir einen zusätzlichen Klassen tip hinzu, mit dem alles identifiziert wird, was einen Werkzeugtip benötigt. Wir benötigen auch ein title-Attribut, das vorschreibt, was tatsächlich im Werkzeugtip angezeigt wird:

1	<a href="#" class="btn btn-primary tip" title="back">back</a>

Die Datei bootstrap.min.js, die wir bereits abrufen, enthält das gesamte JavaScript, das für die QuickInfos benötigt wird. Tatsächlich gibt es viele andere JavaScript-Spielzeuge, von denen viele nicht einmal benötigt werden. In einer Produktionsumgebung ist es daher möglicherweise ratsam, nur die von uns verwendeten Dinge einzuschließen. Bootstrap-Werkzeugtips sind aktiviert, sodass sie nicht automatisch funktionieren. Wir müssen sie initialisieren. Lassen Sie uns dies in Skript-Tags am Ende unserer Seite tun, unter denen wir das andere JavaScript aufgerufen haben:

<script>
    $(function(){
        $('.tip').tooltip()
    });
</script>

Getan. Wir haben jetzt folgendes:

Probieren wir jetzt einige Stile aus

Ich habe dem Projekt eine dritte CSS-Datei namens theme.css hinzugefügt und aus dem Dokument <head> darauf hingewiesen. Aber was fügen wir dem Stylesheet hinzu?

1	<link href="css/theme.css" rel="stylesheet">

Wir beginnen mit dem Hauptcontainer. Wählen Sie das Containerobjekt in Illustrator aus, und Sie werden im Layersbedienfeld feststellen, dass es als main objekt bezeichnet wurde.

Dies ist relevant. In einer Teamsituation ist es ratsam, ein gemeinsames Verständnis darüber zu haben, wie Objekte wie dieses benannt werden sollten. Sie werden sehen, warum, wenn wir das CSS-Panel öffnen.

CSS-Eigenschaften

Gehen Sie zu Fenster > CSS-Eigenschaften, um ein gleichnamiges Bedienfeld anzuzeigen. 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 .main angewendet wurden, genau wie unser Objekt benannt wurde.

Kopieren Sie das, was Sie sehen, und fügen Sie es direkt in die Datei theme.css ein. Damit diese Regeln für unser Containerelement gelten, müssen wir den Selektor auf das ändern, was wir tatsächlich verwenden (das Beibehalten des .main-Selektors ist etwas riskant, da wir ihn möglicherweise an anderer Stelle auf unserer gesamten Site verwenden). Ändern Sie .main in .inner.cover und Sie sollten sehen, dass Ihr Containerelement ein schönes Goldgelb mit abgerundeten Ecken und sogar einem Kastenschatten annimmt, die alle mit anständigem browserübergreifendem CSS angewendet werden.

CSS-Abmessungen

Sie werden feststellen, dass unsere CSS-Regeln hier keine Breiten oder Höhen enthalten. Das ist eine gute Sache; Bootstrap kümmert sich so ziemlich um all das, also suchen wir wirklich nur nach ästhetischen Stilen. Durch Ändern der Exportoptionen für CSS-Eigenschaften könnten unsere Dimensionen hier enthalten sein, aber wir lassen sie weg.

Unser Container ist jedoch aufgrund der bereits angewendeten Stile etwas breit. Überschreiben Sie diese Dimensionen mit der folgenden Medienabfrage:

@media (min-width: 992px) {

    .masthead, .mastfoot, .cover-container {
		width: 400px;
	}

}

Dies überschreibt die Regeln in cover.css und gibt uns eine Breite von 400px auf Bildschirmen mit einer Breite von mindestens 992px. 400px entspricht nicht genau dem Design, aber ich persönlich finde die tatsächlichen Abmessungen und die Schriftgröße etwas klein, also lehne ich es ab!

Während wir hier sind, möchte ich nur die Stile ändern, damit wir die abgerundeten Ecken auch in dieser Medienabfrage anwenden. Entfernen Sie sie aus den Regeln, die Sie in Illustrator eingefügt haben, und wenden Sie sie stattdessen folgendermaßen 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 so etwas auf großen Bildschirmen haben:

..und dies auf kleinen Bildschirmen:

Spezifische Messungen

Wir sind den genauen Abmessungen im Illustrator-Dokument nicht genau treu, aber das ist kein Problem. Die Bahn ist flüssig. Trotzdem könnte unser Container unten etwas gepolstert sein. Lassen Sie uns also genau herausfinden, wie viel unser Illustrator-Design vorschreibt.

Wählen Sie das Messwerkzeug in Illustrator aus (Sie finden es mit dem Pipette-Werkzeug) und ziehen Sie den Cursor, um einen bestimmten Bereich des Designs zu messen. Wir können sehen, dass die Polsterung, nach der wir suchen, 25 Pixel beträgt. Wenden wir sie also manuell auf unsere Stile an.

1	.inner.cover {
2	padding-bottom: 25px;

Die anderen Stile

Wir haben hier eine ganze Reihe von Stilen und Objekten zu behandeln, und wenn alles genau so benannt wäre, wie es sein sollte, könnten wir (im Prinzip) einen riesigen Stapel CSS von Illustrator ausgeben, um mit all dem fertig zu werden. Es gibt jedoch einige Unstimmigkeiten bei der Objektbenennung hier (um dies zu vermeiden, wäre eine enge Kommunikation zwischen Designer und Entwickler erforderlich), und wir erhalten möglicherweise überflüssigen Code, den wir nicht benötigen.

Arbeiten Sie sich stattdessen geduldig von Element zu Element vor, wählen Sie jedes Objekt aus und geben Sie das entsprechende CSS aus. Beginnen Sie mit der Typografie und lassen Sie uns sehen, wie gut Illustrator funktioniert.

Schriftarten

Eines der ersten Dinge, die Sie bemerken werden, ist, dass das CSS für jedes Typobjekt Folgendes umfasst: font-family : 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 daher zu Google Fonts gehen und den CSS-Link aufrufen, um ihn durch die Magie von Webfonts auf die Seite zu ziehen.

1	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

Tasten

Bisher ist alles ziemlich gut gelaufen, aber dann haben wir die Tasten gedrückt. Die Suchschaltfläche ist eigentlich nicht schlecht, aber den drei Tasten unten wurden keine Objektnamen zugewiesen, sodass in unserem Fenster mit den CSS-Eigenschaften Folgendes angezeigt wird:

Es wurde kein CSS-Code generiert. Um CSS für unbenannte Objekte zu erstellen, benennen Sie das Objekt entweder im Layersbedienfeld oder aktivieren Sie die Option "CSS für unbenannte Objekte generieren" im Dialogfeld "CSS-Exportoptionen".

Öffnen Sie die zuvor beschriebenen Optionen und stellen Sie sicher, dass Sie CSS für unbenannte Objekte generieren aktiviert haben. Die Alternative wäre, unseren Schaltflächen einen Namen zu geben, aber jede Option ist hier in Ordnung.

Wenn alle Tasten ausgewählt sind, können Sie auf CSS generieren klicken und die Stile für uns ausgeben lassen. 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 gängige Grafikstile, Zeichenstile, Absatzstile verwenden oder sogar allen Objekten den gleichen Namen geben! Dort gibt es Raum für Verbesserungen, aber wir können zumindest gemeinsame Stile greifen und sie manuell auf mehrere Objekte anwenden.

Ich habe die Stile für die Suchtaste kopiert und sie dann auf .btn, .btn: hover angewendet, um sicherzustellen, dass alle Bootstrap-Stile entsprechend überschrieben wurden. Ich habe auch einen Rand border: none; um den blauen Rand von Bootstrap loszuwerden. Mal sehen, was uns das bringt!

Das ist nicht schlecht, aber es ist ein fairer Weg, perfekt. Die Textschatten wurden nicht eingehalten (es fehlt ihnen an Transparenz), die Farbverläufe auf den Tasten sind nicht korrekt und die Boxschatten fehlen vollständig.

Warum?

Kurz gesagt, der Illustrator-CSS-Export ist für diese Art komplexer Struktur noch nicht bereit (um fair zu sein, er ist sehr komplex). Schauen wir uns die Suchtaste an, die wir neu erstellen möchten:

Es ist wunderbar. Aber schauen Sie sich an, wie viele Füllungen, Farbverläufe und Schatten in den Bau eingeflossen sind:

Autsch. Kein Wunder, dass Illustrator Nein sagte. Auch der Randradius wurde aus der Gleichung herausgelassen, weil die Dinge zu komplex geworden sind.

Stattdessen werde ich nur einige einfache Stile anwenden und das komplexe CSS umgehen (in diesem Tutorial geht es darum, was Illustrator schließlich für uns tun kann.) Die geänderten .btn-Stile sehen folgendermaßen aus:

.btn,
.btn:hover
{
    font-family : Open Sans;
    font-weight : bold;
    font-size : 14px;
    color : #AC4400;
    text-shadow : 0px 1px 0px rgba(255, 255, 255, 0.3);
	
    background : #FDDA2F;
    border-color: #FDDA2F;
	
    border-radius : 4px;
}

In Bezug auf die CSS-Effizienz lässt dies alles zu wünschen übrig, aber wir arbeiten mit dem, was Illustrator uns zur Demonstration bietet. Sie sollten danach zurückgehen und das CSS bereinigen, vielleicht sogar mit einem Werkzeug wie CSSLint.

Symbole

Was wir bisher generiert haben, ist nicht schlecht, also lassen wir es vorerst in Ruhe. Wenden wir uns den Tastesymbolen zu. Es gibt einige Ansätze, die wir hier verwenden könnten:

Bitmaps exportieren

Durch Auswahl jeder Grafik können Sie CSS auf die gleiche Weise wie zuvor generieren. Illustrator exportiert komplexe Pfade als PNG-Dateien und verwendet diese Bilder dann als Hintergrund für Ihre Elemente.

Sie erhalten eine Gruppe von Assets, die Sie verwenden können:

Aber auch hier ist es nicht perfekt und lässt bestimmte Aspekte des Designs aus. In anderen Fällen werden fragwürdige Stile ausgegeben, sodass dieser Ansatz von Ihrer Seite etwas verfeinert werden muss. Bei diesem Ansatz werden auch Retina-Displays nicht berücksichtigt, wodurch auf bestimmten Bildschirmen möglicherweise Grafiken entstehen, die nicht dem Standard entsprechen. Wie auch immer, das ausgegebene CSS für diese Grafiken sieht folgendermaßen aus:

.image
{
    background-image : url(image.png);
	background-repeat : no-repeat;
}

SVG

Als Webdesigner würde ich mich in diesem Fall für SVG entscheiden, was Illustrator sehr gut kann.

Wählen Sie zuerst ein Symbol aus und kopieren Sie es dann wie gewohnt in die Zwischenablage (Befehl + C). Die SVG-Daten für dieses Objekt können jetzt in einen Texteditor eingefügt werden (erstaunlich). Ö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 jetzt als Bild direkt im Markup Ihrer index.html hinzufügen:

1	<a href="#" class="btn btn-primary tip" title="contact us">
2	<img src="img/icon-contact.svg" alt="">
3	</a>

Hallo..

Es gibt verschiedene Möglichkeiten, wie Sie SVG in eine Webseite implementieren können. Wenn Sie über CSS zuerst das XML in base64 konvertieren und es in Ihr Markup inline einfügen, haben Sie die Wahl (weitere Informationen finden Sie unter SVG-Dateien: Von Illustrator ins Web). Unser Ansatz funktioniert jedoch einwandfrei, zumindest in modernen Browsern, also bleiben wir dabei.

Wiederholen Sie den Vorgang für die anderen Symbole und..

Wir sind fertig!

Mit etwas mehr Optimierungen (ich habe dem Formularelement einige Auffüllungen hinzugefügt) sollten Sie etwas haben, das diesem ähnelt:

Nicht schlecht! Es spiegelt nicht zu 100% die Illustrator-Grafik wider, aber wenn man bedenkt, dass wir uns hauptsächlich auf die von Illustrator ausgegebenen Stile verlassen haben, können wir ziemlich zufrieden sein. Alle weiteren Verbesserungen müssen von Hand vorgenommen werden. Illustrator hat zu diesem Zeitpunkt alles für uns getan.

Haben Sie Tipps, mit denen Illustrator dieses Weblayout direkt verbessern kann? Lass es uns in den Kommentaren wissen!