Albrecht: Agentur für Unternehmensdarstellung
Home
 

Corel Photopaint: Workshops

17.7.2004 Diese Seite drucken  Diese Seite per E-Mail empfehlen

3D-Glass-Buttons mit Photopaint

Workshop für Webdesigner

Attraktive Buttons machen eine Website nicht nur schöner, mit einer klaren Bildsprache ist die Seite auch intuitiver benutzbar. Gerade, wenn es um spezielle Themen-Buttons geht, helfen Standard-Icons oft nicht weiter.

Sehr beliebt sind die so genannten Glass-Buttons, kugelähnliche Symbole mit Licht und Reflexion. Dieser Workshop zeigt Ihnen, wie Sie solche Buttons mit Ihrem eigenen Symbol erstellen.

Damit wir später viele Möglichkeiten der Skalierung haben, legen wir den Button nicht in der finalen Größe an, sondern wählen ein deutlich größeres Format.

  1. Legen Sie neues RGB-Bild in der Größe 450x450 Pixel an und klicken Sie im Dialogfeld "Kein Hintergrund" an.
  2. Mit F7 wählen Sie nun das Hilfsmittel Ellipse aus.
  3. In der Eigenschaftsleiste (oben) wählen Sie nun unter "Formfüllung" die Option "Farbverlauf" aus
  4. Mit dem Befehl rechts daneben definieren Sie das "Füllmuster", hier also unsere Farbverlaufsfarben.
  5. Als Typ wählen Sie "Radial" und bei der Farbüberblendung unter "Von" eine leuchtende Farbe,  z.B. Blau. Bei "Bis" nehmen Sie Weiß (später können Sie mit anderen Farben experimentieren). Klicken Sie Ok.
  6. Ziehen Sie nun mit gedrückter Strg-Taste ein fast formatfüllenden Kreis auf.

Erstellen der oberen Refexion

  1. Mit Strg&M erstellen Sie aus dem Kreis-Pbjekt eine Maske, aus der wir nun eine Refelxion anfertigen.
  2. Um die Maske wie ein Objekt zu verzerren, drücken Sie nun die Taste M


  3. Ziehen Sie nun den unteren mittleren Haltepunkt bis zur Mitte des Kreises nach oben
  4. Klickern Sie nun langsam drei Mal in die Maske (Achtung, keine Doppelklicks machen!) und schalten Sie nun vom Größenmodus über Drehmodus (1. Klick) über Verzerrungsmodus (2. Klick) zum Perspektivmodus (3. Klick) um.
  5. Weisen Sie nun der Maske über Ziehen der beiden Haltepunkte rechts-oben und links-unten eine Perspektive so zu, dass der obere Rand der Maske schön harmonisch im geringen Abstand zum Rand unseres Kreises verläuft.
  6. Wenn Sie zufrieden sind, doppelklicken Sie in die Maske oder drücken die Eingabetaste.
  7. Stellen Sie sicher, dass in der Hilfsmittelpalette "Weiß" als Vordergrundfarbe und "Schwarz" als Hintergrundfarbe gewählt sind. Gegebenenfalls ändern können Sie dies mit dem Doppelfeil (Farben austauschen) oder einen Doppelklick auf eine der Farben, um diese zu ändern.
  8. Erstellen Sie nun ein neues Objekt und wählen über die Taste G die interaktive Füllung aus.
  9. Wählen Sie oben in der Eigenschaftsleiste als Typ "Linear" aus und rechts daneben als Füllungsstil "Von Transparent zu Malfarbe".


  10. Ziehen Sie nun im Bild den rechten Farbverlaufshaltepunkt zum oberen Rand der Maske und mit der Strg-Taste den linken Haltepunkt zum unteren Rand der Maske und anschleißend die Eingabetaste.
  11. Mit Strg&R löschen Sie die Maske; unsere obere Reflexion ist nun fertig.

Einfügen eines Cliparts innerhalb des Buttons

Sie können jede beliebige CorelDraw-Grafik benutzen, also selbstgefertigte oder Cliparts. Der Einfachheit halber nehmen wir hier ein fertiges Clipart. Achten Sie bei der Wahl darauf, das es keinesfalls viele Details besitzt und aus klaren Linien besteht.

  1. Legen Sie Ihre Corel-Clip-Art-CD ein und öffnen Sie mit Strg&F12 das Skizzenbuch in Photopaint
  2. Wählen Sie oben im Pulldown-Menü vom Skizzenbuch "Arbeitsplatz" aus und klicken Sie dann unten auf das CD-ROM-Laufwerk. Suchen Sie nun ein geeignetes Clipart aus und ziehen Sie es aus dem Skizzenbuch heraus in Ihr Bild.
  3. Es erscheint ein Dialogfenster, in dem Sie als Größenangabe unsere 450 Pixel eintragen. Zudem klicken Sie jeweils "Anit-Alias" und "Transparenter Hintergrund" an. Dann klicken Sie auf Ok.
  4. Schieben Sie nun das neue Objekt im Andockfenster "Objekte" (Strg+F7) von der obersten Position nach unten, bis oberhalb unseres Kreisobjektes. Es befindet Sich also zwischen der Reflexion und dem Kreis.
  5. Klicken Sie nun im Andockfenster "Objekte" in die Spalte zwischen Auge und Bildchen. Es erscheint eine Büroklammer.
    Dadurch wird nun das Objekt nur in den Grenzen des darunter liegenden Objektes angezeigt
  6. Verkleinern, drehen und Verschieben Sie nun gegebenenfalls Ihr Clipart, damit es optisch ansprechend platziert ist.
  7. Um das Clipart eventuell besser an die Farbe des Buttons anzupassen probieren Sie mal einige der "Zusammenführungen" im Andockfenster "Objekte" aus: "Helligkeit", "Bild überlagern" oder "Weiches Licht" können hilfreich sein. Ansonsten müssen Sie mit den üblichen Filtern unter Menü-Bild-Anpassen arbeiten.

Weitere Licht-Effekte

Um noch einen besseren Kugel und 3D-Effekt zu erlangen, fügen wir noch eine Abdunkelung und einen Schatten hinzu.

  1. Wählen Sie das Kreis-Objekt aus und drücken S für einen Schatten.
  2. Klicken Sie nun in die Mitte des Kreises und ziehen mit gedrückter Maustaste einen Schatten nach unten rechts.
  3. Wählen Sie oben in der Eigenschaftsleiste bei "Verlaufsrand" den Typ "Gaußsche Unschärfe".
  4. Wieder im Bild sehen Sie die beiden Dreiecke des Schattenwerkzeuges. Verändern Sie damit die Transparenz und den Verlauf so, dass ein optisch realistischer Schatten entsteht. Beenden Sie den Vorgang mit der Taste O bzw. klicken Sie auf das Objektauswahl-Werkzeug.

    Um den Kugeleffekt etwas besser herauszuarbeiten erstellen wir nun eine Abdunkelung:
  5. Klicken Sie auf unseren Kreis und erstellen aus dem Objekt eine Maske (Strg&M)
  6. Invertieren Sie diese (Menü-Maske-Invertieren)
  7. Wählen Sie nun im Menü-Maske-Maskenumriß-Verlauf


  8. Im Dialogfenster stellen Sie bei Richtung "Außen" und bei Ränder "Gekrümmt" ein.
  9. Schalten Sie die Maskenvorschau über das Auge ein und Verändern Sie die Breite nun so, dass nur noch der Rand des Kreises von der Maske unberührt bleibt ist.
  10. Erstellen Sie nun über Menü-Objekt-Neues Objekt eine neue Linse.
  11. Wählen Sie im Dialogfeld oben "Linse aus Maske erstellen" und als Linseneffekt "Helligkeit-Kontrast-Intensität"
  12. Danach erscheinen Schieberegler, bei denen Sie die Helligkeit auf z.B. -70% einstellen. Dann klicken Sie auf Ok.
    Tipp: Verwenden Sie auch mal andere Linsen, zum Beispiel "Farbton-Sättigung-Helligkeit".

Sie können auch mehrere Cliparts in einer Datei verwenden, blenden Sie ainfach alle anderen Symbole aus. Dadurch erhalten Sie, wenn Sie an der Kugel Änderungen vornehmen für alle Buttons ein einheitliches Aussehen.

Beispiele

 

Hier wurde dem Telefonhörer ein nach innengerichteter Schatten zugewiesen
Genau wie bei dem beschriebenen Abdunkelungs-Effekt wurd hier eine Linse erstellt, die "verstreut", also unscharf macht. Jedoch war hier der Verlauf für die Maske deutlich stärker (ca. 40). Da diese Unschärfe nur sehr gering ausfällt wurde diese Verstreuungs-Linse viermal dupliziert (Strg&D).
Die Farbflächen dieses Cliparts konnten mit dem Objekt-Zusammenführungs-Typ "Helligkeit" neutralisiert werden. Zudem wurde dem Drucker-Symbol eine Schatten zugewiesen und die obere Refelxion leicht unscharf gemacht.

 

Sie haben nun das Grundgerüst für viele weitere Buttons. Schicken Sie uns welche zu, damit wir sie hier ausstellen können.

 

Viel Spaß nun beim experimentieren.


Anzeige:

Hat Ihnen dieser Workshop gefallen?

Der Autor und Diplomdesigner Ulrich Albrecht bietet professionelle Schulungen auch für Ihr Unternehmen an:

  • Grafik und Typografie mit Corel Draw, Photopaint oder Ventura
  • Professionelle Marketingprodukte selber texten und gestalten
  • Windows-Schulungen
  • Viele weitere Themeninhalte maßgeschneidert auf die Mitarbeiter in Ihrem Unternehmen oder Ihrem Schulungszentrum

Die Kursteilnehmen lernen qualitativ hochwertige Tricks und grafische Beurteilungskriterien und keine überflüssigen visuellen Spielereien. Seit 1996 wurden von Ulrich Albrecht schon zahlreiche Unternehmen geschult und Seminarteilnehmer ausgebildet.

Nehmen Sie Kontakt auf: www.agentur-albrecht.com

1 Kommentar


Um Kommentare zu schreiben, müssen Sie sich zuerst hier anmelden.

Grenze

Re: 3D-Glass-Buttons mit Photopaint (Punkte: 1)
von Rasdar auf 4.2.2009 (Userinfo | Artikel schicken)

Oh man, super genial. Ich habe lange verzweifelt nach einem Tuturial für diesen Effekt gesucht.

Einfach nur geil.

Danke, Mfg. Rasdar

Anzeigen

 Mehr Platz 
Extra große DTP-Monitore: