Illustrator CC für Webdesigner: Kernkonzepte

Passende Dateien für Entwickler erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Viele Missverständnisse entstehen durch mangelnde oder falsche Kommunikation zwischen Design- und Entwicklungsteams. Illustrator bietet perfekte Möglichkeiten, durch korrekte und abgesprochene Verwendung von Ebenen und Objektbezeichnungen der Entwicklungsabteilung bereits eine Vielzahl wichtiger Informationen alleine durch das Dokument zu übermitteln.

Transkript

Egal welchem Team Sie angehören, ob Sie zu den Designern gehören oder zu den Entwicklern oder wie ich eigentlich auf beiden Seiten zu Hause sind, Ganz gleich, es gibt immer wieder Witze, die die eine über die andere Seite macht. Ich bin sicher, Sie kennen auch solche Sprüche. Beispielsweise sagt man ja über Designer, dass sie alles wunderschön aussehen lassen können, aber nichts funktioniert. Hingegen die Entwickler, da funktioniert alles, aber es sieht einfach nur schrecklich aus und das sind so typische, ja, Witze oder Kommentare, die zwischen diesen einzelnen Teams ausgetauscht werden. Ich denke der Grund ist häufig mangelnde Kommunikation oder falsche, weil man gar nicht weiß, wie man etwas darstellen soll oder wie man etwas erklären soll. Illustrator als Entwicklungsumgebung für das Webdesign ist ein perfektes Bindeglied, um bereits in der Entwicklung von der Seite des Designs heraus den Entwicklern mitzuteilen, was man sich genau vorstellt oder was einem wichtig ist und welche Definitionen man dort hat. Ich gebe zu, Mann muss sich auch damit beschäftigen. Der beste Weg ist sicherlich, mit den Entwicklern zu sprechen, aber hier bei der Umsetzung einer solchen Datei, da hat man schon ganz viele Schritte abgegolten und wie man dabei vorgeht, zeige ich Ihnen in diesem Video. Es gibt eine Entwicklungsdatei und diese Entwicklungsdatei habe ich jetzt mal geöffnet und schauen wir uns an, wie die genau aufgebaut ist. Also ich habe hier so ein kleines Layout zum Bestellen bei einer Pizzeria Parmigianos und da kann ich einmal den Button Bestellen auswählen, einmal die Karte mir anschauen und das Ganze ist so strukturiert, dass das Ganze über die Ebenen aufgebaut ist und damit wir da besser mit arbeiten können, ziehe ich einmal die Ebenen hier raus und öffne das mal und jedes dieser einzelnen Objekte ist nun innerhalb dieser Ebenenpalette vorhanden. Also wenn ich hier auf bestellen klicke, dann sieht man, dann ist hier der Text Bestellen aktiv. Das Gleiche gilt mit der Hintergrundfläche. Erster Schritt, gruppieren Sie zusammengehörige Objekte, Also in dem Falle ist es der Button und damit drücke ich mit der Shift-Taste diese beiden Elemente. Ich wähle diese beiden Elemente aus, die Sie hier sehen, das können Sie auch genauso hier in der Ebenenpalette machen, und drücke Command G oder Steuerung G und dann sieht man, dann wird hier eine Gruppe draus gebildet. So, und das Gleiche mache ich mit dem Button Karte. Auch hier Command G und dann fassen wir mal das Logo zusammen. Das sind diese grünen Rechtecke + den Text + den größeren Text und diesem Element, dem Kochhut. So, auch hier wieder Command G oder Steuerung G, das Ganze gruppiert und dann gibt's hier im Hintergrund noch mal so ein Element, das liegt also direkt auf der obersten Ebene. Auch das gruppiere ich jetzt einfach mal mit dem Rechteck so, an der Stelle und das entspricht dann, das entspricht dann dem Background quasi, der jetzt hier dann drunter liegt und jetzt müssen wir das Ganze nur noch benennen, damit wir richtig wissen, was mit den Objekten überhaupt gemeint ist. Fangen wir mit dem Button an. So, das ist also hier dieser Button. Ein Doppelklick hier rein öffnet mir die Möglichkeit, eine Eingabe bezüglich des Namens zu vollziehen, also noch mal, so, oder ein Doppelklick direkt auf das Element öffnet den Dialog komplett. So und hier kann man dann zum Beispiel jetzt sagen, das soll heißen Bestellen_BTN. Das Gleiche kann ich dann hier unten mit dem roten Button genauso machen, also auch hier wieder ein Doppelklick auf das Icon und dann sage ich Karte_BTN. So lassen Sie mich schon mal vorwegnehmen, besonders originell oder besonders gut ist es nicht. Entwickler sind es gewohnt mit, ja, Sprachkonstrukten zu arbeiten, die schwerpunktmäßig durch die Bank in englischer Sprache funktionieren. So und Bestellen_BTN, Karte_BTN, das funktioniert zwar, das klappt auch, aber Sie wissen selbst, wir haben teilweise Umlaute oder Zeichen, die in der englischen Sprache nicht vorkommen und ja es irritiert auch ein wenig und man sollte es auf jeden Fall auf ein und dieselbe Art und Weise, also identisch umsetzen und deswegen finden Sie so häufig solche Angaben auch in Englisch und das mache ich jetzt noch mal, ich ändere es noch mal ganz kurz um und schreibe hier Order zum Beispiel hin und hier oben beispielsweise einfach mal View für sich die Karte anzuschauen, und dann weiß der Entwickler, der Programmierer viel besser Bescheid darüber. Dann haben wir hier dieses Objekt, diese Gruppe. Das ist das Logo und da gehen Sie bitte direkt vor und tragen einen Punkt und eine Dateiendung ein. und diese Dateiendung, die bestimmt nämlich später, was das für ein Dateiformat werden soll. Also auch das ist ja auch für die Entwicklung und für die Grafiker eine ganz entscheidend wichtige Information, dass wir wissen, aha da muss ich ein PNG draus machen und nicht ein JPEG oder ein GIF. So, und dann haben wir ja noch entsprechend den Hintergrund hier und den benennen wir einfach mal als BG von Background und dann nehmen wir _Tile zum Beispiel .png So könnte das Ganze aufgebaut aussehen. Damit das ganze Dokument auch benutzerfreundlich in der Struktur herüberkommt, nicht nur benutzerfreundlich, sondern auch der Entwickler weiß, wo sich bestimmte Elemente aufhalten sollen und wo die platziert werden sollen, ist es üblich, das Ganze in Form eines typischen Web-Dokumentes zu strukturieren und dafür brauchen wir zwei weitere Ebenen. Die füge ich hier unten mit Klick auf neue Ebene erstellen hinzu und die obere Ebene, die benenne ich schon mit kleinen Buchstaben als Header und das Gleiche, die untere Ebene ist der Footer und die Ebene in der Mitte ist der Content oder der Body, könnte man auch sagen. So, dann passt es besser. So, das schiebe ich jetzt noch an die richtige Stelle, also indem ich die linke Maustaste gedrückt halte und genau zwischen Header und Footer platziere. Jetzt weiß der Entwickler, dass alle Elemente, die den Namen Order_BTN oder Logo.png tragen, innerhalb des Bodys eines Web-Dokumentes untergebracht werden sollen und damit habe ich schon ganz entscheidend Einfluss als Designer auf die einzelnen Arbeitsschritte und ja auch notwendigen Informationen, die ein Entwickler haben, beziehungsweise wissen muss. Natürlich muss ich mich als Designer damit beschäftigen und wie eingangs schon erwähnt, am besten funktioniert das, indem Sie mit der Entwicklungsabteilung sprechen, mit den Programmierern sich unterhalten und fragen - Wie braucht ihr das? Wie heißt das bei euch? Wie benennt ihr so etwas? Ja, da muss man sich sicherlich ein klein wenig mit auseinandersetzen, aber ich verspreche Ihnen, wenn Sie sich konsequent bei Ihren Projekten an solch eine Struktur halten, dann bleibt ganz, ganz viel Ärger schlicht auf der Strecke beziehungsweise tritt erst gar nicht auf, wo man sich sonst immer wirklich den Mund fusselig reden muss oder wo man immer wieder nachkommunizieren muss, damit es hinterher endlich stimmt und es spart ganz einfach unglaublich viel Arbeit und ja sorgt auch dafür, dass Missverständnisse erst gar nicht entstehen. Sie wissen also, wie Sie entwicklungsfreundliche oder Programmierer-freundliche Dokumente mit Illustrator erstellen, indem Sie die Ebenen benutzen, die korrekten Bezeichnungen wählen und direkt die richtigen Strukturen, die ein Webprojekt bei Ihnen benötigt.

Illustrator CC für Webdesigner: Kernkonzepte

Lernen Sie die grundlegenden Begriffe des Webdesigns kennen und konfigurieren Sie Illustrator für den teamfreundlichen Webdesign-Einsatz.

1 Std. 49 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.05.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!