Verwende unsere Suchfunktion
Impressum und Datenschutz
Die NOF-Schule | Startseite
Zum NOF-Forum
trennlinie-im-NOF-Projekt

Ein eigenes Design mit NetObjects Fusion

Das Layout im Grafikprogramm vorbereiten

  • Layout-Erstellung im Grafikprogramm
  • Grafikschnipsel erzeugen

Eigenes Design: Layout-Erstellung im Grafikprogramm

Farbpalette-NOFBevor wir das Design der Website in NOF einrichten, müssen wir unsere grafische Vorstellung in einem Grafikprogramm umsetzen. Für die Screenshots verwende ich hier das Programm Photoshop. Eine sehr gute kostenlose Alternative zu Photoshop ist Gimp, ansonsten wird z.B. Corel Draw sehr gerne verwendet. Es gibt zahlreiche Möglichkeiten, Grafiken zu erstellen, mit begrenzten Möglichkeiten sind hier m.E. auch Picasa und Photoscape hervorzuheben.

Für Anfänger ist sogar die Verwendung von Power Point denkbar, zumindest wenn es darum geht, Struktur und Schaltflächen zu konzipieren.

Alternativ kann man auf kostenlose oder Premium-Templates im Internet zurückgreifen, und die darin enthaltenen Grafiken in NOF einbauen. Dafür werden Anfänger aber sicherlich Hilfe benötigen.

Grafik Beispiel für unsere Demo-Vorlage

 

Demo-Vorlage - Mondo - Vorschau

Die für dieses Beispiel benötigte Hintergrund-Grafik kann ohne Einschränkungen benutzt werden. Weiterhin sind im Forum einige  kostenlose NOF-Templates zu finden.

Als ersten Schritt richte ich mein Layout im Grafikprogramm (hier Photoshop) ein. 

Für dieses Beispiel habe ich eine Datei mit Auflösung 96 dpi gewählt, Modus: RGB-Farben, 8-bit Kanal.

Die Datei ist 1280 px breit. Mit vertikalen Hilfslinien markiere ich die Mitte und die Ränder des Arbeitsblattes um die Objekte für das Layout auf einer maximalen Seitenbreite von 990 px auszurichten:

Arbeitsfläche einrichten

Nun zeichne ich ein Layout zu Übungszwecken im Grafikprogramm:

12-Layoutbeispiel

Das Layout ist bewusst minimalistisch gestaltet, da wir nur die wichtigsten Gestaltungsinstrumenten für dieses Tutorial verwenden.

Nun geht es darum, die Grafiken für die Website aus dem Layout “auszuschneiden”. Wir nennen diesen Vorgang “slicen” oder “cutten” aus dem Englischen.

Ich stelle dafür den Hintergrund der Grafiken auf “transparent” und aktiviere den Slice-Werkzeug:

13-Schnipsel-schneiden

Ich speichere die Dateien für den Web als png-24 oder transparente pngs, weil die Schatten in diesem Layout die Transparenz benötigen. Darüber hinaus kann ich die Hintergrundfarbe der Website völlig frei wählen, weil sie in den Grafiken selbst nicht enthalten ist.

Wenn keine Schatten und Halbtransparenzen erforderlich sind können die Grafiken als .jpg erzeugt werden. Einzige Ausnahme sind Grafiken die Rottöne enthalten. Diese sollten immer als png gespeichert werden, sonst erscheinen in den HTML-Dokumenten unschöne Schliereneffekte.

Grundsätzlich achten wir auf eine möglichst geringe Dateigröße.

Folgende Grafiken werden für den Aufbau dieses einfache Layout benötigt:

Hintergrundschnipsel, wiederholt sich nur horizontal (roter Rahmen dient nur hier im Tutorial der Angrenzung vom Hintergrund):

hintergrund_02


Navigationsschaltfläche:

navi_13


Schriftzug:

schriftzug

Bannerbild:

Bannerbild


Die Grafik für den Footer sieht man in voller Größe hier



Nächste SeiteDemo-Vorlage - Mondo - Vorschau

Seite drucken