Dieses Blog ist nicht länger aktiv!

Hier wird es in Zukunft keine neuen Inhalte geben, allerdings bloggen die Autoren weiter. Die Designartikel werden nun auf dem persönlichen Blog von Ivo Mynttinen veröffentlicht, während Artikel in denen es um Webdevelopment geht demnächst hier veröffentlicht werden.

Weitere Projekte der Autoren: Fireworks Lab - Kostenlose Adobe Fireworks Dateien

Februar 25th, 2010 | von Ivo Mynttinen | Design, Freebies, Templates, Tutorials

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:

Webseitendesign mit Fireworks CS4

Schritt 1 – Neues Dokument

Neue Datei erstellen in Fireworks CS4

Zunächst erstellen wir ein neues Dokument mit den Maßen 1200×1400 Pixel. Als Hintergrundfarbe wählen wir transparent.

Schritt 2 – Hintergrund

Rechteck erstellen in Fireworks CS4Wir 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.

Rauschen hinzufügen Fireworks CS4Nun 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

Verlauf in Fireworks CS4Nun 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.

Schlagschatten in Fireworks CS4Um 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.

Text in Fireworks CS4Als 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

Rechteck mit Verlauf erstellen in Fireworks CS4Mit einigen Abstand zum Header erstellen wir nun erneut ein Rechteck in dem wir später eine Slideshow oder eine Bildergalerie anzeigen wollen.

Verlauf zu Rechteck hinzufügenWieder ä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.

Schlagschatten hinzufügen in Fireworks

Linie in Fireworks

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

Lichteffekte in Fireworks CS4

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ß.

Lichteffekte in Fireworks CS4

Nun setzen wir die Objekteigenschaften auf

  • Rand: “Weiche Kante” 29 Einheiten
  • Deckkraft 25%
  • Mischmodus: Ineinanderkopieren

Lichteffekte in Fireworks CS4

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.

Text mit Schlagschatten in Fireworks CS4

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.

Cargoicon

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

Text in Fireworks CS4

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.

Rechteck in Fireworks CS4

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.

Schatteneffekt in Fireworks CS4Nun 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.

Fireworks CS4 - Objekteigenschaften Schatteneffekt

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).

Form transformieren in Firewoks CS4

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.

Bild zuschneiden in Fireworks CS4

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.

Rounded Corners in Fireworks CS4

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).

Objekte anordnen in Fireworks CS4Nun 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.

Cargo Design in Fireworks

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

Verlauf in Fireworks CS4

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.

Breadcrump Navigation

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.

Webseiten Design in Fireworks CS4

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.

Roter Rahmen

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.

Fotogallerie in Fireworks CS4

Jetzt fügen wir wieder die zugeschnittenen Bilder hinzu. Darunter können wir zum Beispiel den Namen eines Produktes schreiben.

Kontakt Bereich in Fireworks CS4

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

Footer Design

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

Webseitendesign mit Fireworks CS4

Download Quelldatei

Des Logos und der Navigationspunkte

13 Kommentare

  1. Phenomart sagt:

    Sehr schönes Tutorial.
    Hat mir wirklich sehr weitergeholfen, vielen Dank!

    Antworten

  2. tobias sagt:

    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

  3. Joosy sagt:

    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

  4. Slotpro sagt:

    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

  5. Robie sagt:

    Hallo! Bin kein Anfänger, aber manche Dinge wusste ich bisher gar nicht, Danke für die tollen Erklärungen.

    Antworten

  6. Marion sagt:

    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

  7. Christian sagt:

    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

  8. Michael Pehl sagt:

    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

  9. Dead written subject material, thanks for entropy. “You can do very little with faith, but you can do nothing without it.” by Samuel Butler.

    Antworten

Hinterlasse einen Kommentar