Erstellung einer eleganten Portfolio-Webseite mit Illustrator

In diesem Tutorial erkläre ich, wie man ein Portfolio mit nur schwarzen Flächen und Transparenz sehr elegant wirken lässt. Unter anderem werden auch die Vorteile von Smart-Objekten erläutert und Tricks zum Umgang mit Symbolen von anderen Webseiten gezeigt. Natürlich sind im Video auch diverse kleine Tipps und Tricks verpackt! Ein Muss für jeden, der Webseiten erstellen möchte.

Schritt 1

Ich erstelle ein neues Dokument in 1600 x 2000 Pixel. Als Dokumentprofil nutze ich Web.

Wir empfehlen:
Illustrator-Video-Training - Basics und Tricks


 

Schritt 2:

Damit ich jetzt weiß, wo der Hauptinhalt in einer Größe von 980 Pixel erstellt werden muss, gibt es folgenden Trick: Ich lege zunächst ein Rechteck genau bis zur Mitte an (rastet automatisch in der Mitte ein, sofern die intelligenten Hilfslinien aktiviert sind). Jetzt erstelle ich genau in der Mitte eine Hilfslinie und klicke mit gedrückter Alt-Taste genau auf die Hilfslinie und ziehe dort ein Rechteck mit einer Größe von ca. 970 – 980 Pixel auf.

 

Schritt 3:

An den beiden Enden erstelle ich eine Hilfslinie und die Hilfslinie in der Mitte kann ich löschen. Jetzt weiß ich, wo mein Hauptinhaltsbereich ist. Als Nächstes werde ich ein paar neue Ebenen erstellen: Header, Content und Footer.

 

Schritt 4:

Als Nächstes erstelle ich ein Rechteck auf der Ebene Footer mit der Farbe Grau, die erst einmal meinen Hintergrund darstellen soll.

 

Schritt 5:

Als Nächstes füge ich den Webseitennamen als Textebene ein. Außerdem kommen noch in einer weiteren Textebene die Links hinein. Die Links werden mit einem senkrechten Strich getrennt. Im Hintergrund der Links kommt ein Rechteck mit schwarzer Farbe, jedoch setze ich die Deckkraft auf 80%.

 

Schritt 6:

Ich kopiere jetzt einfach die schwarze Fläche mit gedrückter Alt-Taste, schiebe sie nach unten und werde sie auch gleich vergrößern.

 

Schritt 7:

Damit die schwarze Box auch mit einem schönen Foto gefüllt wird, öffne ich ein entsprechendes Bild und füge das in mein Layout ein. Ich habe die Möglichkeit, das Bild als Verknüpfung zu belassen oder es in mein Dokument einzubetten. Ich bette es ein, damit ich mir keine Sorgen machen muss, falls das Bild mal auf der Festplatte nicht vorhanden ist. Dadurch wird jedoch die Dateigröße des Dokuments größer.

 

Damit ich das Objekt korrekt auf die Größe meiner Box bekomme, beschneide ich das Foto ein wenig. Das geht am einfachsten, indem ich oben auf Maske klicke und es mir dann zurechtziehe.

 

Schritt 8:

Damit der Besucher sieht, dass man die Slideshow auch selber steuern kann, füge ich einen kleinen Pfeil aus dem Symbole-Bedienfeld ein (die Pfeile befinden sich nur unter Symbole, wenn ich ganz am Anfang beim Erstellen des Dokumentes unter Dokumentprofil auch Web verwendet habe). Jetzt noch schnell oben die Verknüpfung gelöscht, und dann könnte ich auch die Farben noch ändern.

 

Schritt 9:

Da mich mein selbst gebauter Pfeil nicht 100% vom Hocker haut, werde ich mir einen von www.iconspedia.com besorgen (Suchwort: arrow).

 

Schritt 10:

Den Pfeil werde ich ins Layout einfügen, duplizieren und spiegeln.

 

Schritt 11:

Ich habe jetzt die schwarze Fläche wieder kopiert und vergrößert nach unten geschoben. Jetzt füge ich eine große Überschrift ein.

 

Schritt 12:

Als Nächstes muss ich einen Text einfügen. Weil ich mir diesen Text nicht aus den Fingern saugen will, bediene ich mich der Webseite www.loremipsum.de. Hier kann man einstellen, wie viele Wörter benötigt werden, und schon hat man einen Platzhaltertext.

 

Schritt 13:

Sieht doch schön gefüllt aus, oder? Zu beachten gilt, dass der Zeilenabstand ein wenig erhöht wird, damit man den Text besser lesen kann.

 

Schritt 14:

Ich benötige jetzt die gleiche Box noch einmal samt Überschrift. Ich kopiere mir einfach die obere Box samt Text mit gedrückter Alt-Taste. Als Überschrift trage ich jetzt "Meine Fotos" ein.

 

Schritt 15:

Jetzt füge ich in der Box drei Fotos hinzu. Leider kann man Fotos nicht so einfach eine weiße Kontur hinzufügen. Dazu lege ich einfach im Hintergrund ein gleich großes Rechteck an und füge dem dann eine Kontur hinzu. So geht's dann doch.

 

Schritt 16:

Sollten die Fotos nicht perfekt passen, wieder mit Masken arbeiten!

 

Schritt 17:

Da meine Arbeitsfläche doch nicht ganz ausreicht, nutze ich das Zeichenflächen-Werkzeug und vergrößere die Arbeitsfläche sehr einfach.

 

Schritt 18:

Ich kopiere jetzt die gesamte Ebene mit meiner Foto-Box, schiebe sie nach unten und benenne sie in "Meine Videos" um. Danach füge ich drei andere Fotos auf die gleiche Art und Weise wie bei "Meine Fotos" ein.

 

Schritt 19:

Ich habe jetzt einfach die Navigationslinks von oben nach unten kopiert und in Schwarz umgefärbt.

 

Schritt 20:

Ganz unten würden sich auch ein paar Icons für RSS, Twitter usw. gut machen. Dazu gehe ich wieder auf www.iconspedia.com. Ich wähle mir dort mal einen im Briefmarkenstil aus.

 

Schritt 21:

Die drei Icons positioniere ich unten links:

 

Schritt 22:

Ich färbe jetzt die graue Hintergrundfarbe in ein etwas dunkleres Grau um, und die Links werde ich von Schwarz in Weiß umfärben. Sieht so noch eleganter aus.

 

Schritt 23:

Ich werde mir jetzt ein Foto in einer relativ guten Auflösung besorgen und im Hintergrund meiner Webseite einfügen. Dabei muss das Foto nicht unbedingt komplett in der Seite zu sehen sein. Ich finde, man kann sogar Fotos abgeschnitten zeigen. Dazu klicke ich wieder auf Maske und ziehe den linken Bereich nach rechts, damit dieser nicht zu sehen ist. Mein Beispiel würde wie folgt aussehen:

 

Schritt 24:

Die Deckkraft des Bildes setze ich auf ca. 40%. Das geht am einfachsten im Aussehenbedienfeld und dann mit Doppelklick auf Deckkraft.

 

Schritt 25:

Damit das Bild unten ausläuft, werde ich jetzt eine Deckkraftmaske hinzufügen. Das geht über das Transparenz-Bedienfeld unter den Optionen>Deckkraftmaske erstellen.

 

Schritt 26:

Jetzt muss ich innerhalb der Deckkraftmaske ein Rechteck erstellen, das die gesamte Arbeitsfläche einnimmt, und darauf dann einen Schwarz-Weiß-Verlauf.

 

Schritt 27:

Den schwarzen Flächen werde ich bei der Deckkraft anstatt 80% doch lieber 60 – 70% geben, damit man das Hintergrundbild noch besser leicht durchschimmern sieht.

Schritt 28:

Und so sieht mein Ergebnis aus:

 

Schritt 29:

Das Layout ist jetzt fertig; um dieses schon mal für z. B. Dreamweaver gut vorzubereiten, kann es jetzt gesliced werden. Dazu nehme ich das Slice-Werkzeug und ziehe die Bereiche auf, die nachher als einzelne Grafiken vorliegen sollen. Ich möchte diese Funktion nur kurz anschneiden.

 

Schritt 30:

Unter Menü>Objekt>Slice>Slice-Optionen kann ich für jeden einzelnen Slice-Bereich bestimmte Einstellungen vornehmen.

 

Schritt 31:

Ich kann in diesem Fenster z. B. den Namen der Grafik festlegen und auch gleich die URL eintragen bzw. den Alt-Tag, der im Web nicht fehlen sollte, damit die Suchmaschinen die Grafiken lesen können (bzw. er ist auch für barrierefreies Webdesign notwendig).

 

Schritt 32:

Ich wähle jetzt Bereich für Bereich aus:

 

Schritt 33:

Ich kann sogar in den Voreinstellungen von Illustrator die Farben der Slices ändern. Wenn ich jetzt alle Bereiche ausgewählt habe, kann ich diese im Menü>Datei>Für Web speichern exportieren.

 

Schritt 34:

In diesem Fenster kann ich jetzt sogar Bereich für Bereich selber entscheiden, wie und und welchem Dateiformat gespeichert werden soll. Ganz unten links wird dann immer die Dateigröße angezeigt. Probieren lohnt sich!

 

Schritt 35:

In den Ausgabeeinstellungen lassen sich auch noch interessante Optionen treffen. Dazu oben auf das unscheinbare Optionsfeld klicken.

 

Schritt 36:

Hier kann ich z. B. auswählen, ob die HTML-Datei in einer Tabelle aufgebaut sein soll oder lieber im moderneren CSS. Danach bestätige ich durch einen Klick auf OK.

 

Schritt 37:

Wenn ich dann endlich alle Einstellungen getroffen habe, kann ich auf Speichern klicken. Jetzt habe ich die Wahl, ob ich nur die Bilder gespeichert haben möchte oder gleich auch die HTML-Datei.

 

Schritt 38:

Illustrator gibt jetzt eine HTML-Datei und einen Ordner mit allen Bildern aus, die ich vorher gesliced habe.

 

Schritt 39:

Die Webseite kann jetzt im Browser geöffnet werden. Bei meiner kleinen Auflösung muss ich jetzt natürlich scrollen, aber sonst würde die perfekt passen, sofern mein Monitor auf mindestens 1024×768 eingestellt ist.

 

Schritt 40:

Ich kann jetzt die HTML-Datei in Dreamweaver weiterbearbeiten. Die Datei sieht dann so aus:

 

Schritt 41:

Und weiter unten die entsprechenden Div-Boxen:

 

Schritt 42:

Tipp am Schluss desTutorials: Im Symbole-Bedienfeld gibt es auch schöne Web-Schaltflächen, die wunderbar in fast jedes Weblayout passen.

Bildquelle fotolia.com:
sexy woman © Gabi Moisa, beauty © nutech21, Giorgio Gruizza, Ontario Ltd, water flow effect1 © 2jenn, Glamour portrait of beautiful sexy lady © T.Tulic, SmaragdDaily Spa © Dash, Fire frame © -Misha, Traffic in Los Angeles under the moonlight © Mike Liu, Amir Kaljikovic

Wir empfehlen:
InDesign-Video-Training - Moderne Praxis

Unsere Empfehlung für dich

Illustrator für Einsteiger & Aufsteiger

Illustrator für Einsteiger & Aufsteiger

Einsteigen in die große Welt der Vektoren war noch nie so einfach. In über 5 Stunden Videomaterial erfährst du alles über das Arbeiten mit Adobe Illustrator CC.

  • Grundlegende Funktionen, Werkzeuge und Bedienfelder ausführlich erklärt
  • Zahlreiche Praxisbeispiele zur Erstellung von Effekten mit allerhand Tipps und Tricks
  • Bonus-Kapitel mit speziellen Anwendungsgebieten von Adobe Illustrator

Zum Training