Impressum Suchfunktion

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Thema geschlossen 
Grafisches Design erstellen und in Netobjects einbinden
#1
Ein Tutorial von Pittiplatsch für die NOF-Schule!

[Bild: NOF-Schule.png]


Tja, da sitzt man vor seinem PC, möchte sich so gerne eine eigene Webseite bauen und natürlich hat man auch den Ehrgeiz alles selbst zu gestalten.
Aber wie fängt man das nur an?

Anfangen wird natürlich erst mal alles im Kopf....dann setzen wir die Idee in Grafiken um....und letztlich bauen wir diese z. B. in NetObjects Fusion ein.

Also fangen wir mal in unserem Grafik-Programm an.

Grundsätzlich und egal mit welchem Grafikprogramm gearbeitet wird, wir arbeiten immer mit mehreren Ebenen und erstellen jede Einzelheit in einer neuen Ebene.....der Vorteil: Wir können einzelne Ebenen mal ausblenden, verschieben oder auch löschen ohne die gesamte Arbeit zu zerstören.

Abspeichern werden wir das ganze grafische Werk immer als PSD-Datei, denn dieses Dateiformat erlaubt uns später jede einzelne Ebene unserer Gesamtgrafik wieder zu bearbeiten, verschieben oder zu löschen.

Am Anfang ziehen wir uns die erste Ebene (unsere Arbeitsbühne) auf. Diese sollte eine Breite von 1920 Pixel x was immer Ihr wollt (oder ca. 1000 Pixel) hoch sein.

Zwar gilt noch immer, dass eine Webseite nicht breiter als 990 Pixel sein soll, damit bei kleinerer Auflösung später im Browser nicht unten auch noch so ein hässlicher Scrollbalken entsteht, aber unsere Arbeitsbühne sollte dennoch 1920 Pixel Breite haben.

So erkennen wir nämlich beim Erstellen unserer Grafiken schon am Anfang, wie unsere spätere Webseite bei unterschiedlicher Auflösung wirkt.
In der Mitte dieser 1920 Pixel ziehen wir uns 2 Hilfslinien im Abstand der 990 Pixel (tatsächliche Breite unserer späteren Webseite) auf.

Eine 2. Ebene dient uns für die Hintergrundfarbe (in diesem Fall ein dunkles Grau).


.jpg  1-Arbeitsbühne_kl.jpg (Größe: 24,95 KB / Downloads: 2.492)


Die 3. Ebene benutzen wir um einen Streifen oben für den Hintergrund im Masterbereich (hinter Banner) zu gestalten. Ich habe in diesem Fall diesem Streifen das Muster einer nostalgischen Tapete gegeben und für diesen Hintergrund noch 2 weitere Ebenen erstellt.

Eine Ebene für die “Ablage” und eine Ebene für die schmale Leiste (siehe Bild).


.jpg  2 Bannerhintergrund.jpg (Größe: 48,17 KB / Downloads: 2.003)


Weitere Ebenen für die Navigation und für alles was ansonsten noch an Grafiken dazu kommt fügen wir je nach Bedarf hinzu, bis unsere Webseite grafisch schon beinahe so aussieht, wie wir sie uns vorgestellt haben.


.jpg  3-Banner_kl.jpg (Größe: 78,59 KB / Downloads: 1.307)


Es werden viele Ebenen hinzu kommen im Laufe der Arbeit.
Ebenen für den Footer, für Bilder oder Bilderrahmen, für besondere Schatten oder spätere Textbereiche. Ein Logo hier und eine Deko dort...auf unserer “Arbeitsbühne” können und werden wir nach und nach alles so platzieren, wie es auf unserer Webseite einmal aussehen soll. Die Größe von 1920 Pixel Breite verschafft uns auch gleich einen Eindruck davon, wie sie bei hoher Auflösung wirkt.

Wenn wir nun alle Grafiken auf einer separaten Ebene platziert haben und uns gefällt was wir da sehen, dann schneiden (slicen) wir alles in kleine Schnipsel und speichern diese fürs Web (meistens) als "jpeg" ab.


.jpg  4 slicen.jpg (Größe: 90,85 KB / Downloads: 1.346)


Ich habe hier nur den Bannerbereich erstellt, aber genau so erarbeiten wir natürlich auch den Footer (unteren Masterbereich) und slicen auch ihn in entsprechende Schnipsel.


.jpg  Master-BG.jpg (Größe: 8,8 KB / Downloads: 883)



.jpg  Button.jpg (Größe: 2,15 KB / Downloads: 966)


und


.jpg  Banner_kl.jpg (Größe: 52,99 KB / Downloads: 1.018)


Diese Schnipsel bauen wir jetzt in NOF unter “Design” für unseren eigenen Sitestyle ein.

Nun haben wir je nach Arbeitsintensität einen Haufen kleiner Schnipsel....und beginnen mit dem Einbau in NOF für einem neuen und eigenem Style.

Einbau in NetObjects Fusion

Wir öffnen unsere Seite in NOF und klicken oben auf Design....dann entfernen wir rechts im Eigenschaftsfenster den Haken bei “Schreibgeschützt”.


.jpg  01-Style-wählen_kl.jpg (Größe: 55,71 KB / Downloads: 1.684)


Links im Styles-Explorer klicken wir mit der rechten Mousetaste auf unseren derzeitigen Style und im sich öffnenden Fenster auf “duplizieren” und geben dem Baby einen Namen.

Schön hässlich sieht er aus....dieser Style, aber gottlob und dank unserer Grafikkünsten ja nicht mehr lange.
Gruß Pittiplatsch
................................................
Jede Veränderung entsteht anfangs zwischen dem rechten und dem linken Ohr (und setzt den Einsatz der Mitte voraus).
Für Leute mit Humor...die noch den Knall hören.
Webdesign Agentur 24

Alle Beiträge dieses Benutzers finden
#2
Wir scrollen nun etwas weiter nach unten bis zu “Seiten-Hintergrund” und markieren per Linksklick ein mal diesen Bereich.

Im Eigenschaftsfenster ändern wir jetzt von “Automatisch” alles nach unseren Wünschen....also bei Bild suchen wir unseren Hintergrund-Schnipsel und bei Farbe wählen wir den Farbton aus unserem Schnipsel.
Nicht erschrecken....das sieht noch ganz grausam aus.


.jpg  02-BG_ändern.jpg (Größe: 47,7 KB / Downloads: 1.416)


Damit unser Schnipsel (Hintergrund) sich nun nicht in alle Richtungen kachelt gehen wir ganz oben auf “Formatvorlage” und dann auch “Formatvorlage verwalten”.

An der linken Seite klicken wir auf “Haupttext” und dann auf “Bearbeiten”.

Im neuen Fensten gehen wir auf den zweiten Karteireiter (Hintergrund) und verändern die “Wiederholung” von Automatisch auf Horizontal.

Unser Schnipsel für den Hintergrund wird sich nun also nur horizontal vervielfältigen.


.jpg  03-Formatieren_kl.jpg (Größe: 85,85 KB / Downloads: 1.400)


Und gleich sieht alles schon viel besser aus und wir widmen uns nun der Navigation und dem Banner.

Durch Doppelklick auf das 1. Button wählen wir unser eigenes erstelltes Button aus....passen Schrift, Schriftfarbe, Position und Schriftgröße unserem Button an......und verfahren so mit allen weiteren Buttons.


.jpg  04_Buttons_auswechseln_kl.jpg (Größe: 60,4 KB / Downloads: 1.212)


Jetzt wechseln wir in die “Seitenansicht” und ziehen entweder eine Tabelle oder einen zusätzlichen Layoutbereich im Masterborder auf.......weisen als Hintergrund unser Banner zu .... platzieren unsere Navigation ...... lehnen uns zurück und freuen uns über unseren ersten eigenen Style.


.jpg  05 Ansicht.jpg (Größe: 69,39 KB / Downloads: 1.412)

Gruß Pittiplatsch
................................................
Jede Veränderung entsteht anfangs zwischen dem rechten und dem linken Ohr (und setzt den Einsatz der Mitte voraus).
Für Leute mit Humor...die noch den Knall hören.
Webdesign Agentur 24

Alle Beiträge dieses Benutzers finden
#3
Unmittelbar relevante Links zu Pittis Tutorial:

Verschiedene Hintergründe für die Website und Einbindung im NetObjects-Programm

Nützliche Codes wie Seitenzentrierung

Stil-Definitionen im Body > Designansicht

Einfügung des Banners

Einfügung der Navigation

Erstellung einer horizontalen Navigation mit Klappleisten-Untermenüs

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#4
So Ihr Lieben...um das Thema hier nun komplett abzurunden und damit jeder bei Bedarf sich alle noch so kleinen Einzelheiten runterladen kann, folgen jetzt diverse Downloads.

Zum 1. ist hier mal zum downloaden eine sogenannte PSD-Datei.....alles das was ich (wie ganz oben beschrieben) in einem Grafikprogramm erstellt habe.

.zip   PSD Datei.zip (Größe: 949,55 KB / Downloads: 342)

Ich habe diese PSD-Datei mit diversen Ebenen in PhotoShop erstellt.......man kann dieses Dateiformat allerdings auch in PhotoImpact öffnen (sicher auch in PaintShop Pro) und weiter bearbeiten.
Wie das bei dem Grafikprogramm GIMP aussieht oder in anderen Grafikprogrammen müsst Ihr selbst etwas erkunden. Wink

Zum 2. könnt Ihr hier die sogenannten "Schnipsel" runter laden (so wie man eben besagte Grafik dann passend für NOF zurecht schneidet)....damit auch unsere Anfänger hier nachvollziehen können, was oben so eingehend beschrieben wurde.

.zip   komplette Grafik.zip (Größe: 107,23 KB / Downloads: 266)

Zum 3. (denn alle guten Dinge sind ja 3).... kommt hier auch noch eine komplette NOF-Vorlage....

.zip   NOF 10 Vorlage.zip (Größe: 361,57 KB / Downloads: 363)
....welche ich mit NOF 10 erstellt habe (mit allen Updates) und somit aufwärtskompatibel für NOF 11 und NOF 12 und jede höhere NOF-Version ist.

Als kleinen Bonbon und weil es immer wieder mal Fragen dazu gibt, habe ich in dieser NOF Vorlage sowohl einen durchgehenden Footer eingebaut, die Seite im Browser zentriert gesetzt über die Eingabe im Masterrahmen und ich habe Euch eine Klappnavigation in dieser Vorlage eingerichtet.

Diese Vorlage ist absolut kostenlos für Euch....unter einer Bedingung!
Im Quelltext habe ich unter Copyright "Layoutdesign by http://www.webdesign-agentur24.de" reingeschrieben.......und das hat dort auch so stehen zu bleiben, solange eine meiner Grafiken in dieser/Eurer Seite/Webseite ist.

Aber ich denke, dafür habt Ihr sicher Verständnis.
Viel Spass und guten Durchblick thumbs up
Gruß Pittiplatsch
................................................
Jede Veränderung entsteht anfangs zwischen dem rechten und dem linken Ohr (und setzt den Einsatz der Mitte voraus).
Für Leute mit Humor...die noch den Knall hören.
Webdesign Agentur 24

Alle Beiträge dieses Benutzers finden
Thema geschlossen 


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Erste Schritte: ein eigenes Design mit NOF barbara0701 1 5.012 09.03.2015, 13:32
Letzter Beitrag: barbara0701
  Responsives Design mit NetObjects Fusion Tommy Herrmann 0 1.309 26.09.2014, 06:39
Letzter Beitrag: Tommy Herrmann
  Layout mit Schatten in Netobjects Fusion umsetzen - Vorlage von Blogger.com Bee 1 23.696 20.03.2011, 18:35
Letzter Beitrag: Bee



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!