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

März 4th, 2010 | von Ivo Mynttinen | Design, Tutorials

In diesem Tutorial zeige ich euch wie man einen schönen Lichteffekt in Adobe Fireworks CS4 erstellt. Ich erkläre dabei jeden Schritt sehr detailliert , so dass auch Einsteiger keine Probleme haben werden den gewünschten Effekt zu erzielen.

Das Ziel

Wir wollen mit wenig Aufwand einen schönen Lichteffekt in Fireworks CS4 erstellen.

Schritt 1: Neues Dokument

Als erstes erstellen wir ein neues Dokument mit den Maßen 1200×600 Pixel und setzen den Hintergrund auf Transparent.

Schritt 2: Hintergrund

Zunächst benötigen wir einen Hintergrund für unser Design. Zu empfehlen sind hierbei meist dunkle Farben, da die Lichteffekte welche wir erstellen möchten dann kräftiger wirken. Den Hintergrund bilden wir aus einem Rechteck (U) mit den Maßen unserer Leinwand. Als Füllkategorie wenden wir “Einfarbig” an und setzen die Farbe anschließen auf #0C1016.

Eigenschaften des Rechtecks

Um nun noch einen leichten “Griesel-Effekt” zu erzielen, fügen wir dem Rechteck ein Rauschen der Menge 1 hinzu.
Rauschen hinzufügen

Schritt 3: Hintergrund des Inhaltbereichs

Nun erstellen wir ein weiteres Rechteck mit den Maßen 960×196 Pixel, welches wir in der Ebenenansicht über dem Hintergrund anordnen. Dieses Rechteck möchten wir später verwenden um den Inhalt der Webseite darin darzustellen. Als Füllkategorie verwenden wir diesmal einen Linearen Verlauf, welcher von der Farbe #CCCCCC zu #FFFFFF verläuft.

Linearer Verlauf

Um nun den Content-Bereich etwas von unserem Header abzugrenzen, fügen wir am oberen Rand unseres zweiten Rechtecks eine 1-Pixel dicke, weiße Linie hinzu.

Linie in Fireworks

Dieser Linie weisen wir dann noch einen Schlagschatten (Filter->Schatten und Glühen->Schlagschatten) zu.

Schlagschatten in Fireworks

Schritt 4: Die Lichteffekte

Jetzt werden wir die Lichteffekte im Header unseres Designs erstellen. Hierzu benötigen wir zunächst ein Paar unterschiedliche Formen, welche wir mit dem Stift-Werkzeug (P) erstellen. Diese Formen sollten oval und etwa 400×200 Pixel groß sein. In diesem Tutorial verwenden wir drei verschiedene Formen.

Freiformen in Fireworks

Nun wenden wir folgende Eigenschaften auf jede dieser drei Formen an.

Eigenschaften der Formen

Jetzt ordnen wir die drei Formen in der Ebenenansicht über dem Hintergrund, allerdings unter allen anderen Elementen an. Der Effekt sieht dann in etwa so aus:

Lichteffekt in Fireworks

Skalieren WerkzeugUm den Effekt zu verstärken und einen realistischeren Look zu erzielen, kopieren wir die Formen mehrfach und transformieren sie mit dem Skalieren-Werkzeug (Q) freihand.

Anschließend ordnen wir die Formen so an dass sie sich teilweise überlappen und so an einigen Stellen der Lichteffekt intensiver wirkt.

Realistischer Lichteffekt in Fireworks

Das Ergebnis

Lichteffekt in Fireworks

Natürlich kann man die hier gezeigten Effekte auch über andere Wege realisieren, jedoch gehört diese Methode zu den einfachsten, wenn es darum geht einen schönen Lichteffekt in Adobe Fireworks CS4 zu erstellen.

Download *.png

Beispiele für Lichteffekte aus dem Web

McCafè

McCafe

Postbox

PostBox

Barack Obama

Barack Obama Website

Kompakt

kompakt Webdesign

Ein Kommentar

  1. Mato sagt:

    Vielen dank, das werde ich in meinen aktuellen Projekt brauchen.
    Grüße

    Antworten

Hinterlasse einen Kommentar