Webdesign-Tutorial, Hilfe zur Gestaltung der eigenen Homepage
Layout in einem Bild umsetzen und ein Template erstellen (Fireworks)
In den vorangegangen Schritten hast du viel geistige und zeichnerische Arbeit geleistet, um einer eigenen Homepage einen Schritt näher zu kommen. Im folgenden Schritt arbeitest du zum ersten Mal wirklich mit dem Computer und einem Grafikprogramm.
Für diesen Abschnitt des Tutorials solltest du schon Erfahrung im Umgang mit einem Grafikprogramm haben, dabei ist es egal, welches das ist. Da wäre Adobe Photoshop, Macromedia Fireworks (meine persönliche Empfehlung für die Webseitenerstellung), Jasc Paint Shop Pro, Ulead PhotoImpact, The GIMP (kostenlos) und bestimmt viele weitere. Ich kann aber leider nicht zu jedem Programm eine Anleitung schreiben, das würde einfach den Rahmen sprengen. Ich hoffe du hast dafür Verständnis.
Allerdings versuche ich allgemein die Funktionen zu erläutern, die am häufigsten benötigt werden. Wo hinter sich diese dann in deinem Programm verbergen, musst du dann selber herausfinden. Da helfen aber auch Tutorials die man zahlreich zu den meisten Programmen im Internet findet. Ich kann nur sagen, dass alle von mir hier genannten Programme von den benötigten Funktionen her ähnlichen Umfang haben.
1.
Jetzt sollte vor dir eine Skizze mit einer groben Vorstellung deiner Homepage liegen. Öffne dein Grafikprogramm und erstelle ein neues Bild mit weißem Hintergrund und einer Größe von 800x600 Pixeln.
2.
Womit fängt man nun an? Eine Möglichkeit wäre es, zuerst mit einem geeigneten Hintergrund zu beginnen. Andererseits kann man den Hintergrund auch zum Schluß hinzufügen, um so einen möglichst passenden Hintergrund zum Seitenaufbau zu finden. Für welche Vorgehensweise du dich entscheidest liegt in deiner Hand. Beide sind möglich und ich denke, dass es da keine Regel gibt. Jeder muss für sich selbst entscheiden, wie man es am besten kann. Persönlich verwende ich meistens die 2. Variante.
Was gibt es für Hintergründe? Als Hintergrund dient eine einzelne Farbe, ein Muster, ein Farbverlauf oder eine Kombination aus Muster und Farbverlauf. Im folgenden einige Beispiele.
| Einzelne Hintergrundfarbe | Farbverlauf im Hintergrund | Muster im Hintergrund | Kombination aus Farbverlauf und Muster |
Passende Webdesign-Tipps: Farbverläufe
3.
Jetzt musst du im nächsten Schritt deinen aufgezeichneten Aufbau mit Formen erstellen. Dazu kannst du Rechtecke und Ellipsen benutzen, worunter natürlich auch Quadrate und Kreise zu verstehen sind. Spezielle Formen kannst du dir mit Hilfe der Standardformen und einigen Funktionen selbst erstellen. Entweder kannst du Formen verzerren, neigen und spiegeln oder du erstellst neue Formen, indem du 2 Formen miteinander verbindest, bzw. "voneinander trennst".
Zur Abbildung:
Díe Aufgabe: Erstelle eine Grundform für ein Tor. Die Lösung: Wir formatieren einen Kreis und ein Quadrat, bzw. Rechteck so, dass sie die gleiche Breite haben und setzen den Kreis anschließend mit dem Mittelpunkt an die Mitte einer Seitenkante. Im letzten Schritt werden beide Objekte miteinander vereinigt. Die letzte Form ist so nur noch 1 Pfad, also ein eigenständiges Objekt, welches es nicht als Standardform gibt.
So verfährt man mit allen Teilen, die man für den Aufbau benötigt. Sollte man auch mal etwas "aussparen" müssen, gibt es auch diese Möglichkeit.
Mit diesem Verfahren lassen sich alle möglichen Formen erstellen. Zum Ende dieses Teilabschnitts zeige ich dir eine komplexere Form, die mit diesen Hilfsmitteln und durch die mehrmalige Anwendung der Funktionen erstellt wurde.
Zur Abbildung:
Ein Rechteck dient ersteinmal als Grundform, welches durch zwei Kreise, deren Umkreis genau die Eckpunkte des Rechtecks kreuzen, erweitert wurde. Dann wurden zwei weitere Kreise angefügt (in den selben Eckpunkten) und durch Verbinden bzw. Ausschneiden der Teile entstand die Figur rechts. Tipp: bei der Erstellung dieser Formen helfen die Vergabe verschiedener Farben und 50 % Transparenz für die einzelnen Teile. So kann man die Figur leichter zusammensetzen.
Viele weitere Formen sind natürlich denkbar. Da musst du deiner Kreativität einfach freien Lauf lassen, dich mit den Funktionen deines Grafikprogramms vertraut machen und sie möglichst ausreizen. Dann sollte bald kaum eine Form mehr ein Problem für dich darstellen.
Tipps zum Layouten:
- Spiele bei den Elementen mit Schatten und Konturen. Dadurch können nette Effekte erzielt werden.
- Transparenzeffekte bewirken eine Auflockerung im Gesamtbild
- Verwende in den Elementen wenig Farbverläufe, am besten nur einen, um das Gesamtbild ruhig und die Ladezeit gering zu halten.
4.
Steht dein Grundaufbau im Grafikprogramm kannst du die Seite sozusagen mit Inhalt füllen. Zu Anfang kannst du das Logo, das die Seite bekommen soll, einbinden bzw. importieren. Danach erstellt man meist als Text die Navigationspunkte. Entweder möchtest du die Navigation später auf der Basis von Grafiken aufbauen, oder die Navigationspunkte werden normaler Text und mit CSS angepasst.
Das wichtigste ist, dass das Bild so aussieht, wie auch später die Webseite aussehen soll. Also wäre es sinnvoll bei Text, den du per CSS anpasst, die Anti-Aliasing-Funktion auszuschalten.
Oft benötigt man für die Navigation zusätzlich rechteckige Flächen, um die Hintergrundfarbe zu ändern oder um der Navigation ein anderes aussehen zu geben. Nur zu, Formen kannst du in diesem Abschnitt des Tutorials benutzen so viel du willst.
Meistens füge ich in meine Entwürfe auch Blindtexte ein und baue eine Überschrift ein, welche später natürlich meistens mit CSS formatiert wird. Der Inhalt macht an dieser Stelle noch keinen Sinn, also ist es egal, was inhaltlich dort steht. Aber für das Gesamtbild einer Webseite macht Text einiges aus. Dadurch entscheidet sich eventuell auch, wie breit einige Objekte später werden oder wie groß die Schriftgröße minimal sein muss. Viele Probleme kann man durch so einen Entwurf im Vorhinein erkennen und lösen.
Blindtexte bekommst du bei www.blindtexte.de. Auch kleine Textpassagen sollten eingefügt werden, und wenn es nur die Copyright-Klausel ist, aber nur der Gesamteindruck kann später nach der Umsetzung überzeugen. Also solltest du das auch schon vor der vielen Arbeit sicherstellen.
Tipps zur Formatierung:
- Verändere mal den Zeichenabstand und vor Allem den Zeilenabstand in den Textblöcken und sieh dir an, wie positiv, bzw. negativ sich die Wirkung ändert.
Passende Webdesign-Tipps: Buchstabenabstand, Minikurs: Schriften im Web
Damit du dir auch vorstellen kannst, wie das alles gemeint ist, kannst du dir nun einmal ein Beispiel-Layout als Bild umgesetzt ansehen.
Zur Abbildung:
Klicke auf die Grafik, um die Originalansicht in einem Popup anzusehen. Klar, der Inhalt und das Thema dieser Beispielseite ist nur mal eben ausgedacht und völliger Blödsinn, aber die Hauptsache ist du erkennst nun in etwa, was ich mit meinen Erklärungen meine. Die Originaldatei aus Fireworks kannst du dir zum besseren Nachvollziehen hier als RAR-Datei herunterladen.
5.
Speichere deine Arbeit am besten immer mit dem Programmeigenen Format ab, z.B. Fireworks » .png, Photoshop » .psd, damit alle Einstellungen an den Elementen auch später noch bearbeitet werden können.
Solltest du dein Werk jemandem zeigen wollen, exportiere das fertige Layout einfach als JPG-Bild ohne Kompression. So hat das Bild eine sehr gute Qualität und niemand kann die Vorlage in wenigen Schritten farblich anpassen.
Meiner Meinung nach macht dieser Teil des Webdesign-Tutorials am allermeisten Spaß, denn man kann sich im Grafikprogramm so richtig auslassen. Es ist einfach Übung, Übung und nochmals Übung gefragt, wenn man noch nicht richtig zum gewünschten Ergebnis kommt. Es lohnt sich jedenfalls nicht aufzuhören. Bei speziellen Fragen würde ich mich sehr über eine E-Mail freuen.
Viel Spaß und Erfolg!
