Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Fireworks > Fireworks MX/2004 Stoffe darstellen - Wassertropfen

Fireworks MX/2004 Stoffe darstellen

Wer kennt es nicht, man will irgendwie was cooles machen und es soll super aussehen. Wir nehmen uns in diesem Beispiel die Stoffe vor. Stoffe können fest oder flüssig sein. In diesem konkreten Beispiel ist es Wasser. Ja toll, aber wie soll ich denn Wasser darstellen? Als Tropfen!

Um Wasser in Form eines Tropfen darzustellen benutzen wir hier Fireworks MX/2004.

1. Neue Datei mit folgenden Einstellungen anlegen tooltipp

2. Einen Kreis mit B/H etwa 150px und vorerst beliebiger Farbe zeichnen. Mit dem Teilauswahlwerkzeug (weißer Zeiger) den oberen Punkt anfassen und nach oben ziehen. Die beiden mittleren Punkte ebenfalls noch etwas nach oben schieben und mit den Anfassern das ganze in Tropfenform bringen. tooltipp

3. Als Farbverlauf wählen wir Radial und stellen beide Reglerfarben auf Weiß ein. Die Opazität für den linken Regler stellen wir auf 55%. Den Verlauf insgesamt mit Hilfe der Füllgriffe wie in folgender Abbildung einstellen. Als Live-Effekt stellen wir Schlagschatten ein mit Abstand 0, Opazität 65%, Weichheit 4 und Winkel 315. Hinweis: Die eingestellte Verlaufs-Füllung wird erst mit dem Schlagschatten-Effekt sichtbar! tooltipp

4. Um den Schatten des Tropfens mit Hilfe der bereits erstellten Form zu erzeugen kopieren wir die Form (Strg+C) und fügen diese wieder ein (Strg+V). Die dahinterliegende Form versetzen wir um etwa 12px nach links und 15px nach unten. Nun markieren wir beide Formen zusammen und wählen im Menü: Modifizieren/Pfade kombinieren/Öffnen. Wir haben nun den Schatten als eigenständige Form. Dieser bekommt folgende Einstellungen: Farbe einfarbig grau (#666666) und den Live-Effekt Gaußverwischen mit Wert 3. Wir drücken erneut Strg+V um den noch in der Zwischenablage befindlichen Tropfen einzufügen. Mit dem Teilauswahlwerkzeug (weißer Zeiger) kann man die Schattenform noch etwas anpassen. tooltipp

5. Für die Innenfläche kopieren wir die Grundform und mit Modifizieren/Transformieren/Nummerisch transformieren verkleinern wir sie auf etwa 90%. Mit Taste A (Teilauswahl) kann die Form wieder etwas angepasst werden. Für den Einschnitt wählen wir am besten das Freiformwerkzeug (Taste O). Dazu mit dem Mauszeiger an die Pfadlinie fahren bis ein kleines S neben dem Zeiger erscheint und mit gedrückter linker Maustaste nach rechts ziehen. Es sollte wie in folgender Abbildung aussehen. tooltipp

6. Damit es wie Wasser aussieht legen wir für die Innenform folgende Einstellungen fest: Farbverlauf LINEAR (Füllfarbe links = weiß mit Opazität 60% und Füllfarbe rechts = schwarz mit Opazität 90%), Effekte: Innerer Schatten (Abstand: 14px, Opazität: 100%, Weichheit: 14, Winkel: 222 Farbe weiß) und Gauß- Verwischen mit Wert 3. Den Verlauf wie in Abbildung von oben nach unten einstellen. tooltipp

7. Als nächstes benötigen wir die Lichter und das sollte nicht so schwer sein. Wir brauchen einen kleinen Kreis und eine Form die wir wie immer mit dem Teilauswahlwerkzeug zurecht modellieren. Als Effekt für die Lichter wählen wir wieder Gauß-Verwischen mit Werten etwa 2-3. tooltipp

So wir haben einen Tropfen erstellt!

Anmerkung: Den Verlauf bei Punkt 3 kann man auch mit normalem zweifarbigen Verlauf ohne Opazität der Verlaufsfarben erzeugen. Es wirkt bei Wassereffekten aber immer besser, wenn man die Opazität nicht auf das gesamte Objekt einstellt, sondern eben wie hier gezeigt nur für einzelne Farben.

Originaldatei wassertropfen.png

 

Autor: (Leon)

Abbildungen

Abbildung 1 - Neue Datei

Abbildung 1 - Neue Datei

Abbildung 2 - Grundform erstellen

Abbildung 2 - Grundform erstellen

Abbildung 3 - Effekte und Verlauf

Abbildung 3 - Effekte und Verlauf

Abbildung 4 - Schatten anpassen

Abbildung 4 - Schatten anpassen

Abbildung 5 - Innenform erstellen

Abbildung 5 - Innenform erstellen

Abbildung 6 - Verlauf einstellen

Abbildung 6 - Verlauf einstellen

Abbildung 7 - Lichter

Abbildung 7 - Lichter

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /