Start

 


Die grafischen Vorbereitungen

 


Die Umsetzung in NOF

BlumeGr Einleitung Grafikarbeit & Ziel
BlumeGr Erstellung des Grundlayouts
BlumeGr Spiegeleffekt der Bannergrafik
BlumeGr Gestaltung & Fertigstellung des Layouts
BlumeGr Zuschneiden des Layouts für NOF
BlumeGr Erstellung der Navigationsschaltflächen
BlumeGr Fotos rahmen, drehen und überlappen
BlumeGr Erstellung der Hintergrundgrafik

 

BlumeOr Anlegen eines neuen Projektes und erste Schritte
BlumeOr Grundlegende Einstellungen in der Design-Ansicht
BlumeOr Aufbau eines Tabellen-Layouts
BlumeOr Anlegen von Seitenstruktur & Navigation
BlumeOr Zweitnavigation & Top-Link ohne Anker
BlumeOr Vervielfältigen der linken Naviationsleiste
BlumeOr Inhalte einfügen und formatieren

 

 

 

 

Die Vorarbeit im Grafikprogramm

 

Selbst dann, wenn man weiß wie es geht, ist ein eigenes Design nicht in fünf Minuten erstellt. Der Einbau eines eigenen Designs in NOF ist das eine, aber die Vorarbeit in einem Grafikprogramm ein anderer, ganz wichtiger Bestandteil Eurer Arbeit.
Im Grunde baut Ihr Eure Website zuerst mal als Grafik, dann zerschneidet Ihr diese Grafik, um ihre einzelnen Bestandteile in NOF dann wie ein Puzzle zusammenzusetzen.
Ich habe hierfür PhotoImpact genutzt und in möglichst vielen Screenshots die einzelnen Schritte meiner Vorbereitungen festgehalten. Ich war bemüht, meine Vorgehensweise möglichst einfach und nachvollziehbar zu gestalten und hoffe, dass ich hiermit dem Einen oder Anderen  auch in diesem Bereich ein wenig auf die Sprünge helfen kann.
 


Das Ziel

Damit Ihr zunächst eine Vorstellung von dem bekommt, was ihr erreichen sollt, stelle ich ganz am Anfang mal das Endprodukt vor. Ich habe dieses Design extra für diesen Zweck entworfen und bewusst im Farbtopf gerührt, in der Hoffnung, damit einen kleinen Anreiz zu schaffen. Mit einem Klick auf die Grafik gelangt Ihr auf eine Demoseite.

Damit die einzelnen Seiten auch noch einen praktischen Nutzen haben, findet Ihr auf den Seiten Galerie, Kontakt, Impressum und Gästebuch eine Auswahl verschiedener Links, passend zum jeweiligen Seiten-Thema.

 

Screen_k


Auf den folgenden Seiten werdet Ihr genau erfahren, wie ein solches Design erstellt wird. Lasst Euch bitte nicht von der Länge dieses Tutorials erschrecken. Es sieht schlimmer aus als es ist, weil ich wirklich fast jeden Arbeitsschritt in einem gesonderten Screenshot festgehalten habe. Los gehts!