In diesem Artikel möchte ich euch zeigen, wie man mit Hilfe von Gimp ein schönes Design für eine Homepage erstellen kann. Hierzu verwenden wir, als fiktives Beispiel, die Homepage einer Pizzeria. Dieses Tutorial behandelt den gestalterischen Teil. Die Umsetzung in html und css würde den Rahmen sprengen. Hierzu werde ich jedoch weiterführende Links auflisten.
Das Grundgerüst:
Unsere Seite soll später auf vielen Computern gut dargestellt werden können. Daher müssen wir uns ein wenig nach der breiten Masse richten. Die am weitesten verwendete Bildschirmauflösung ist 1024*768 Pixel. Also darf unsere Seite nicht breiter, als 1024 Pixel sein. Durch den Scrollbalken des Browser verringert sich die Breite noch etwas. Für unsere Seite nehmen wir eine Breite von 960 Pixel. Diese 960 Pixel sind mittlerweile eine Art inoffizieller Standart geworden.
Nun aber zur Umsetzung. Wir erstellen ein neues Dokument mit einer Abmessung von 1024*768 Pixel. Anschließend erstellen wir eine neue Ebene mit 960*700 Pixel und zentrieren diese innerhalb des Dokuments. Auf einer weiteren Ebene erstellen wir nun den Kopfbereich der Seite. In diesen wollen wir später eine Grafik einbinden. Wir geben ihm die Breite von 960 Pixeln und eine Höhe von 200 Pixel. Anschließend sollte es wie in nachfolgendem Bild aussehen. Die Farben spielen jedoch keine Rolle. Sie dienen im Moment nur der Übersichtlichkeit.
Klicken zum Vergrößern
Der Kopfbereich:
Nun wollen wir, wie versprochen, das Hintergrundbild für den Kopfbereich einfügen. Hierbei müsst ihr jedoch das Urheberrecht bedenken. Wenn ihr fremde Bilder benutzen wollt, dann musst ihr erst um Erlaubnis fragen. Alternativ könnt ihr auch Bilder aus einer Fotocommunity verwenden, wie ich es in diesem Fall getan habe. Trotzdem müsst ihr die Bildquelle angeben. Eine solche Community ist beispielsweise aboutpixel. Nachdem ihr euch für ein Bild entschieden habt, fügt ihr es an der vorgesehenen Stelle ein. Ich habe mich für das Bild von einer leckeren Pizza entschieden. Es soll ja die Seite einer Pizzeria werden. Für das Einfügen habe ich noch einen kleinen Trick. Wenn ihr das Bild auf eine neue Ebene einfügt und diese halbtransparent macht, dann könnt ihr das Bild leicht positionieren. Anschließend erstellt ihr eine Auswahl aus der darunter liegenden Ebene (die Ebene, die wir im vorigen Schritt für den Kopfbereich erstellt haben). Dies macht ihr mit einem Rechtsklick im Ebenemenü „Auswahl aus Alphakanal“. Anschließend könnt ihr mit „Auswahl – Invertieren“ und „Bearbeiten – Ausschneiden“ den überstehenden Teil abschneiden.
Soweit so gut.
Klicken zum Vergrößern
Die Farbwahl:
In diesem Schritt wollen wir uns um die farbliche Gestaltung der Seite kümmern. Ich verwende meistens die Grafik im Kopfbereich als farblichen Anhaltspunkt. So wird die Grafik gut integriert und es ergibt ein stimmiges Gesamtergebnis. Außerdem sollte man nicht zu viele verschiedene Farben verwenden. Dies wirkt unruhig. Alternativ kann man auch Farben mit Hilfe der Farbenlehre ermitteln. Genaueres hierzu könnt ihr in meinem Artikel „Farben – Die Qual der Wahl“ nachlesen. Ich verwende in diesem Tutorial jedoch das Hintergrundbild als farbliche Grundlage.
Klicken zum Vergrößern
Die braune Hintergrundfarbe basiert auf dem knusprigen Rand der Pizza. Für die Ermittlung der Farbe habe ich die Farbpipette mit einem Abtastradius von 3 Pixeln genommen. Die cremeweiße Farbe im mittleren Teil entspricht dem Käse auf der Pizza. Und der schwarze Rand beinhaltet die Farbe der Oliven. Wie ihr seht, wirkt es gleich harmonischer, als mit diesen bunten Farben.
Die Navigation:
Für die Navigation erstellen wir eine neue Ebene mit der Breite von 960 Pixel und einer Höhe von 50 Pixel. Diese positionieren wir, mit einem kleinen Abstand, unterhalb des Bildes und füllen sie mit einem Farbverlauf. Auch hier verwende ich wieder Farben aus dem Bild. Wieder benutze ich den knusprigen Rand als Basis. In die freie Lücke fügen wir nun eine schwarze Trennlinie ein. Hierzu benutzen wir wieder die Olivenfarbe. Anschließend kopieren wir die Ebene und fügen sie unterhalb wieder ein.
Klicken zum Vergrößern
Nun folgt der Text und ein Hover-Effekt. Unter dem Hover-Effekt versteht man die Veränderung einer Grafik, wenn sich der Mauszeiger darauf befindet. Diesen Effekt kennt ihr sicherlich von anderen Internetseiten. Zuerst erstellen wir den Text. Der genaue Wortlaut spielt keine Rolle. Er dient erstmal nur zur Gestaltung. Der genaue Text wird später bei der Programmierung erstellt. Empfehlenswert ist aber ein etwas größerer und kräftigerer Text. Die Navigation soll ja schließlich, als solche erkennbar sein. Gerne könnt ihr auch noch senkrechte Trennstriche zwischen den einzelnen Kategorien einfügen. Anschließend erstellen wir hinter einer Kategorie eine neue Ebene und erstellen einen weiteren Farbverlauf. Hierfür habe ich etwas hellere Farben, als auf dem ursprünglichen Verlauf, ausgewählt.
Klicken zum Vergrößern
Fußbereich und Text:
Zu guter letzt folgen der Fußbereich und der Text. Für den Fußbereich erstellen wir eine neue Ebene und füllen sie mit dem dunklen Farbton aus der Navigation. Anschließend fügen wir den Text ein. An dieser Stelle steht für gewöhnliche ein Link zum Impressum oder zum Kontaktformular. Auch in dem Textbereich folgt nun der Text. Hier verwende ich einen typischen Platzhaltertext. Diesen kann man sich unter www.loremipsum.de generieren. Für den Text verwende ich den Schwarzton, den wir zuvor für den Rahmen verwendet haben.
Fertig!
Klicken zum Vergrößern
Links zu html und css:
Hier möchte ich euch zwei Seiten an die Hand geben, mit denen ihr in der Lage seid eure Seite zu programmieren.
Fazit:
Natürlich ist dies nur ein Beispiel für eine Website. Ihr könnt alle möglichen Bilder, Stimmungen und Farben in eure Seite einbringen. Achtet aber darauf, dass eure Seite harmonisch wirkt und ihr einen Stil beibehaltet.
Nun wünsch ich euch einen guten Appetitt……. Quatsch. Viel Spaß beim Nachbauen natürlich 
Für alle, die keinen Lust zum nachbauen haben, werde ich das Design in den nächsten Tagen in der Kategorie „Download“ anbieten.
Ähnliche Artikel:
- Colorkeybilder mit Gimp erstellen
- Cooles 3D-Wallpaper mit Gimp
- Gebürstete Metalltexturen mit Gimp
- Texturen erstellen mit Gimp
- Pizza Webdesign
Schlagworte: aboutpixel, css, Gimp, Homepage, html, Pizza, Webdesign, Website
