Vor einiger Zeit habe ich ein Design für eine Firma erstellt. Da ich nun schon mehrfach gefragt wurde, wie ich die genutzten Effekte in Adobe Fireworks CS4 erstellt habe, entschied ich mich dazu, den Designprozess in einem Tutorial aufzuzeigen und somit Anfängern (und vielleicht auch Fortgeschrittenen) zu zeigen, wie man ein Webseitendesign in Adobe Fireworks CS4 erstellt. Für dieses Tutorial sind kaum Vorkenntnisse nötig, jeder einzelne Schritt wird detailliert erklärt.
Das Ziel
Ich möchte heute mit euch in Adobe Fireworks CS4 ein Business Webseiten Design erstellen, welches über folgende Features verfügt:
- Großer Header mit Navigation
- Licht & Schatteneffekte
- Slideshow
- Subnavigation (Breadcrumb)
- Gallerie
- Textbereiche
Was am Ende dabei herauskommt, könnte dann in etwa so aussehen:
Schritt 1 – Neues Dokument
Zunächst erstellen wir ein neues Dokument mit den Maßen 1200×1400 Pixel. Als Hintergrundfarbe wählen wir transparent.
Schritt 2 – Hintergrund
Wir erstellen nun die Basis für unser neues Webseitendesign, den Hintergrund. Mit dem Rechteck-Werkzeug (U) erstellen wir ein Rechteck mit den Maßen 1200×1400 Pixel und ziehen es so zurecht, dass es die gesamte Leinwand ausfüllt. Sobald wir das Rechteck an der richtigen Position haben, stellen wir die Füllkategorie auf “Linear”. Als Verlaufsfarben verwenden wir #676767 zu #272727. Den Verlauf skalieren wir so wie es in dem oberen Bild zu sehen ist.
Nun selektieren wir das Rechteck welches wir soeben erstellt haben und fügen einen Filter hinzu (Filter->Rauschen->Rauschen hinzufügen…), die Menge legen wir auf zwei Einheiten fest.
Schritt 3 – Header
Nun werden wir den Header der Webseite gestalten. Dazu erstellen wir wieder mit dem Rechteck-Werkzeug (U) ein Rechteck, diesmal mit den Maßen 960×120 Pixel. Dieses zentrieren wir dann (hierbei helfen die Hilflinien von Fireworks CS4). Wieder ändern wir die Füllkategorie zu “Linear”, verwenden aber diesmal die Farben #303030 zu #0C0C0C.
Um einen Schatteneffekt zu erzeugen wenden wir nun einen Schlagschatten auf den gesamten Header an. Dazu selektieren wir das Rechteck mit dem normalen Mauszeiger und klicken bei den Objekteigenschaften unter “Filter” auf das “+” und wählen Schatten und Glühen -> Schlagschatten. Nun ändern wir die Werte so dass der Schatten nicht zu aufdringlich oder künstlich wirkt.
Als nächstes fügen wir das Logo und die Navigationspunkte ein. Das Logo ist in diesem Fall nur eine Textmarke. Die Schriftart des Logos und der Navigationspunkte ist “LargoD”, eine kostenlose Alternative wäre zum Beispiel “Franklin Gothic Demi”.
Schritt 4 – Slideshowhintergrund
Mit einigen Abstand zum Header erstellen wir nun erneut ein Rechteck in dem wir später eine Slideshow oder eine Bildergalerie anzeigen wollen.
Wieder ändern wir die Füllkategorie zu “Linear” und passen die Farben des Verlaufs an wie wir es schon einmal gemacht haben. Anschließend fügen wir dem Rechteck wieder einen Schlagschatten hinzu, ähnlich wie wir es bereits bei dem Header-Rechteck getan haben.
Um dem Rechteck nun noch einen edleren Touch zu verleihen, fügen wir einfach eine 1 Pixel-Linie in der Farbe #FFFFFF am oberen Ende des Rechtecks hinzu.
Schritt 5 – Lichteffekte
Wir wollen nun, um der gesamten Webseite einen edleren und echter wirkenden Look zu geben, ein paar Lichteffekte unter dem Header erstellen. Dazu brauchen wir zuerst einmal zwei verschiedene Formen die wir mit dem Stift-Werkzeug (P) erstellen. Die Farbe dieser Formen stellen wir auf Weiß.
Nun setzen wir die Objekteigenschaften auf
- Rand: “Weiche Kante” 29 Einheiten
- Deckkraft 25%
- Mischmodus: Ineinanderkopieren
Jetzt müssen wir die Formen ein paar mal (je häufiger, desto stärker der Effekt) kopieren. Nun ordnen wir die Formen in der Ebenenansicht ganz nach unten, lassen sie allerdings noch über dem Hintergrund. Nun haben wir einen schönen Lichteffekt erstellt.
Den geschaffenen Platz können wir für Text verwenden, welcher dem Besucher besonders ins Auge stechen soll. Dem Text, welchen wir mit dem Text-Werkzeug (T) erstellen, können wir, um ihn edler wirken zu lassen, einen Schlagschatten zuweisen.
Nun kopieren wir ein Icon aus dem Iconpack “Container Icon Set 2” und fügen es anschließend im Design ein.
Schritt 6 – Slideshow & Texte
Fügen wir nun eine Überschrift für die Slideshow ein. Praktisch wäre hierbei websichere Schriftarten zu verwenden, zum Beispiel Arial, Tahoma oder Lucida Sans.
Unter der Überschrift erstellen wir nun ein recht großes, weißes Rechteck. Wir wollen dieses Rechteck einen Schatten werfen lassen, daher erstellen wir mit dem Pinsel-Werkzeug eine neue Form.
Nun ordnen wir die eben erstellte Form in der Ebenenansicht unter dem großen, weißen Rechteck welches wir soeben erstellt haben an. Danach wenden wir ähnliche Objekteigenschaften wie bei dem Lichteffekt an.
Das Ergebnis der neuen Objekteigenschaften wird dann etwa so aussehen:
Da wir jedoch auf beiden Seiten des weißen Rechtecks einen Schatteneffekt haben möchten, kopieren wir einfach die soeben erstellte Form und transformieren sie horizontal (Modifizieren -> Transformieren -> Horizontal spiegeln).
Nun benötigen wir nur noch ein Bild welches wir innerhalb des weißen Rechtecks anzeigen möchten. Ich habe hierzu ein Stockfoto von sxc.hu verwendet.
Natürlich muss das Foto noch entsprechend zugeschnitten werden, damit es ohne Probleme in das weiße Rechteck passt. Hierzu verwenden wir zunächst das Zuschneiden-Werkzeug (C) um einen Teil aus dem Bild auszuschneiden und anschließend das Skalieren-Werkzeug (Q) um die Größe des Bildes zu verändern.
Da wir später steuern möchten, welcher Eintrag der Slideshow angezeigt werden soll, brauchen wir dafür Steuerelemente.
Um einen gut aussehenden Button zu erstellen, brauchen wir zu allererst ein Quadrat, dem wir einen Verlauf mit hellen Farben zuweisen und dessen Ecken wir abrunden. In diesem erstellen wir mit dem Pinsel-Werkzeug einen Pfeil. Die beiden Formen selektieren wir sobald der Pfeil an der richtigen Position sitzt. Nun Gruppieren wir die beiden Formen (Rechtsklick auf die beiden gleichzeitig selektierten Formen -> Gruppieren).
Nun ziehen wir die soeben erstellte Gruppe an eine Seite des Slideshowbereichs und ordnen sie in der Ebenenansicht unter dem Hintergrund der Slideshow an, um einen leichten Schatteneffekt zu erhalten.
Nachdem ihr auf der rechten Seite ein paar Texte hinzugefügt habt, solltet ihr ein ähnliches Resultat wie dieses hier erhalten.
Schritt 7 – Inhalt-Bereich
Mit etwas Abstand zu der Slideshow erstellen wir nun den Hintergrund für den Inhalts-Bereich. Ich habe die Maße 960×700 Pixel verwendet, ihr könnt das allerdings der Menge des Inhalts anpassen den ihr anzeigen möchtet. Dem Rechteck weisen wir wieder einen Verlauf zu.
Um dem späteren Benutzer der Webseite etwas mehr Übersichtlichkeit zu bieten, möchten wir eine Breadcrumb-Navigation auf unserer Seite einbinden. Um dies zu bewerkstelligen, grenzen wir die Breadcrumb-Navigation mit einer grauen 1px Linie von dem Rest des Inhalt-Bereichs ab. Als Trennzeichen für die einzelnen Menüpunkte erstellen wir mit dem Pinsel-Werkzeug einen Pfeil und kopieren diesen so oft wie nötig.
Nun fügen wir mit dem Text-Werkzeug noch beliebigen Text hinzu und trennen (sofern nötig) einzelne Bereiche mit einer 1-Pixel Linie voneinander ab.
Da wir eine kleine Fotogalerie mit Produkten im unteren Bereich haben möchten, erstellen wir, wie bei der Slideshow, einen Rahmen für die Bilder, diesmal allerdings in Rot.
Jetzt fügen wir wieder die zugeschnittenen Bilder hinzu. Darunter können wir zum Beispiel den Namen eines Produktes schreiben.
Im Kontaktbereich fügen wir, um die Ästetik der Seite ein wenig anzuheben, ein Icon ein. Dieses stammt aus dem Icon-Pack “Lovely Website Icon Pack 1“.
Schritt 8 – Der Footer
Am unteren Ende der Webseite erstellen wir nun noch ein Rechteck welches wir mit einem dunklen Grau füllen. Hier können Footer-Informationen wie zum Beispiel ein Copyright-Hinweis und ein Link zum Impressum platziert werden.
Das Ergebnis
Ähnliche Artikel
Mit anderen teilen
Der Autor
Ivo arbeitet in einer Agentur als Screendesigner. Außerdem ist er freiberuflich als Interface Designer tätig. Er würde sich freuen euch als "Follower" bei Twitter begrüßen zu dürfen.
12 Kommentare
Hinterlasse einen Kommentar
Vorschau auf Adobe Fireworks CS5
Tutorial – Server Icon erstellen in Fireworks CS4
jQuery für Einsteiger – Teil 3: Events
Vorschau auf Adobe Photoshop CS5
Tutorial – iPad Icon in Fireworks CS4
Sehr schönes Tutorial.
Hat mir wirklich sehr weitergeholfen, vielen Dank!
Antworten
hey,
cool mal ein Fw tutorial zu sehen.
ich arbeite fuer webdesigns momentan hauptsaechlich mit Ps aber ich glaube es lohnt sich total sich etwas mehr mit Fw zu beschaeftigen. ich hoffe nur, dass sie bis zur naechsten version das interface staerker an die adobe programme anpassen.
thx, tobias
Antworten
Na toll, sieht ja super aus, ist aber für den tatsächlichen Einsatz im Netz zu schwerfällig.
Antworten
Ivo Mynttinen antwortete:
Zunächst einmal solltest du begründen weshalb das so ist.
Antworten
Marion antwortete:
wieso findest du es zu schwerfällig? Kann ich so nicht bestätigen.
Antworten
I read the language you do not. But I can understand your article. I am looking for sites that teach Firework in web design and I found your site thanks.
Antworten
Hallo! Bin kein Anfänger, aber manche Dinge wusste ich bisher gar nicht, Danke für die tollen Erklärungen.
Antworten
Ich find das Tutorial auch sehr gelungen und werde es unbedingt nachmachen, um mehr zu lernen. Gerade für Fireworks findet man nicht so viel brauchbares im Netz. Danke!
Antworten
Marion antwortete:
Was mir noch sehr gefallen würde, wäre ein videotutorial in gleicher Qualität zu sehen!
Antworten
Danke für das klasse Tutorial!
Mittlerweile klappt´s bei mir mit der Layouterstellung in Fireworks recht gut, ich habe nur Schwierigkeiten, das Layout dann eins zu eins ins Web zu bekommen.
Kennt jemand zum Thema “slicen” bzw. zum gesamten Ablauf von Layout & HTML ein gutes Tutorial? Die Exportfunktionen taugen ja nicht viel.
Antworten
Das sogenannte “slicen” ist echt die beste Art ein schönes Design in einen miesen (X)HTML Code zu bringen.
Tables und inline CSS sind echt unterste Schublade. Kannst ja gleich in DreamWeaver coden…
Nur per Hand und CSS-based Layouts haben Stil und werden einem schönen Design wirklich gerecht.
Antworten
Ivo Mynttinen antwortete:
Da stimme ich dir natürlich voll und ganz zu, mir war nicht bekannt das slicen grundsätzlich bedeutet Tablelayouts mit zerschnittenen Bildern zu erzeugen, ich dachte slicen beschreibt viel mehr den Prozess des “Bilder zu recht schneidens” wie zum Beispiel das Ausschneiden einer 1px Grafik für einen Verlauf.
Danke für den Hinweis, wird bei Gelegenheit geändert!
Antworten