NetObserver Studie
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 > Eckige Formen abrunden

Eckige Formen abrunden

Ein abgerundetes Rechteck erzeugen ist ja kein Akt, aber es gibt schließlich noch mehr Formen mit Ecken und Kanten. Diese abzurunden kann schon zum großen Problem werden, gerade dann wenn man es genau machen will.

Die im Tut verwendete Beispielform gibts hier.

So sollte es sein. tooltipp

Gar nicht so einfach. tooltipp

Eine Rundung sollte also fließend in eine andere übergehen, es sei denn man will es absichtlich nicht. Das größte Problem ist eben genau diesen sauberen Übergang hinzukriegen. Im folgenden Bild besteht an den Ecken eine viertel Rundung, erzeugt mit einem abgerundeten Rechteck. Virtuell vierteilen kann man das mit dem setzen von Hilfslinien anhand der Pfadpunkte. Dadurch erhält man einen Rundungsmittelpunkt. Zeichnet man nun von diesem Mittelpunkt einen - Kreis - an die bestehende Rundung heran, dann bekommt man zwangsläufig genau diese Problemzone wie im Bild oben. Hier und da bissel rumziehen löst das Problem sicher, aber ist nicht gerade das gelbe vom Ei und schon gar nicht wenn man noch mehr vorhat mit seiner Form. tooltipp

Kleiner Tip! Ordentliche Rundungen lassen sich besser an eckige Kanten basteln, als wenn man an bestehende Rundungen anpassen muss. Das geht auch, aber meist aufwendiger.

Irgendwann hat man nun eine Idee oder noch nicht so richtig, erzeugt mit einfachen Mitteln ein paar Formen und setzt diese zusammen. Wohl dem, der vorweg schon alles perfekt im Kopf hat. tooltipp

Gefällt der Grundgedanke, will man das ganze sicher verfeinern und das so genau wie möglich. tooltipp

Machen wir erstmal folgende zwei Eckpunkte, dass sind die einfachsten. tooltipp

1. Die Ansicht an der entsprechenden Stelle mit der Lupe vergrößern bis man die einzelnen Pixel sieht und dann Hilfslinien setzen wie im Bild. Dabei nicht den Antialias mit einbeziehen, sondern genau abschließen mit der weißen Kante. Nun zwischen den Hilfslinien einen Kreis mit gedrückter Umschalttaste zeichnen, dieser hat dann genau die richtige Größe. tooltipp

2. Nun verschiebt man den Kreis bis eine Hälfte über der Grundform liegt. 1 Pixel hin und her ist dabei Brust wenn man die Vertikale Hilfslinie nicht genau trifft. Nur nichts an der Kreisgröße ändern! tooltipp

3. Nicht anders läufts mit der zweiten Ecke. tooltipp

Wie man sieht, stimmt Hilfslinie und Kreishälfte nicht überein. Kein Problem, man kann sich auch an Pixel orientieren (Augenmaß). Aber wie schon gesagt, nichts an der Kreisgröße ändern! tooltipp

4. Bei der letzten Ecke läufts bisschen anders. Mit der Methode kommen wir da nicht weiter und hätten letztendlich die Problemzone von oben oder ne rießen Klumpe am Ende. tooltipp

Hier muss der Zacken weggeraspelt werden, aber nicht einfach nur irgendwie. Wir nehmen die obere Kante rechts außen und zeichnen von dort mit gedrückter Umschalttaste einen Kreis bis an die Stelle wie im folgendem Bild. Dann wird an die Unterkante und die Mitte des Kreises jeweils eine Hilfslinie gesetzt. tooltipp

5. Wozu die neuen Hilfslinien? Damit man weiß was weg muss, könnte man auch frei Hand machen. Entlang dieser Hilfslinien nun Rechtecke zeichnen und mit Hilfe derer die überflüssigen Teile von der Form entfernen. Geht so: Beide Rechtecke und Form zusammen markieren (nicht den Kreis mit) und Modifizieren/Kombinieren/Öffnen (FW MX Modifizieren/Pfade kombinieren... ). Gleich nochmal Strg+Y für den Rest. Denke das Öffnen muss hier nicht ausgiebig erläutert werden. tooltipp

6. Wir haben jetzt alle Rundungen, aber immernoch die Form und drei Kreise getrennt. Nun kommts drauf an was man damit vorhat. Sollen Effekte darauf angewendet werden, ist es besser die Sache zu einer Form zu Vereinigen. Das wäre alles markieren und Modifizieren/Kombinieren/Vereinigen (FW MX Modifizieren/Pfade kombinieren...). tooltipp

Gegenprobe passt? tooltipp

Anwendungsbeispiel tooltipp

Download

 

Autor: (ar)

 

Abbildungen

Abbildung 1 - roter Pfad

Abbildung 1 - roter Pfad

Abbildung 2 - Hier gibts einen Knick in der Optik

Abbildung 2 - Hier gibts einen Knick in der Optik

Abbildung 3 - Mittelpunkt

Abbildung 3 - Mittelpunkt

Abblidung 4 - erste Idee

Abblidung 4 - erste Idee

Abbildung 5 - sieht schon besser aus

Abbildung 5 - sieht schon besser aus

Abbildung 6 - Ecke 1 und 2 bearbeiten

Abbildung 6 - Ecke 1 und 2 bearbeiten

Abbildung 7 - Kreis mit Hilfe von Hilfslinien zeichnen

Abbildung 7 - Kreis mit Hilfe von Hilfslinien zeichnen

Abbildung 8 - Kreis verschieben

Abbildung 8 - Kreis verschieben

Abbildung 9 - zweite Ecke

Abbildung 9 - zweite Ecke

Abbildung 10 - Augenmaß

Abbildung 10 - Augenmaß

Abbildung 11 - das wird nix

Abbildung 11 - das wird nix

Abbildung 12 - Schnittpunkt und neue Hilfslinien

Abbildung 12 - Schnittpunkt und neue Hilfslinien

Abbildung 13 - Nur Rechtecke und Form markiere

Abbildung 13 - Nur Rechtecke und Form markiere

Abbildung 14 - Vereinigen

Abbildung 14 - Vereinigen

Abbildung 15

Abbildung 15

Abbildung 16

Abbildung 16

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 /