980 Beiträge rss | 57 Nutzer online

Workshop Paintshop Pro 6: Grafik-Effekte für das Web

Seit der dritten Version gehört Paintshop Pro zum Handwerkszeug der Web-Designer. Mit der neuen, sechsten Fassung setzen die Jasc-Programmierer wieder einen Standard in Sachen Bedienbarkeit und Preis. PC-Online stellt in dieser ersten Folge der Pixel-Factory neue und bewährte Effekte vor.

(erschienen 1999 in PC-Online)

Paintshop Pro hat schon eine lange Geschichte. Paintshop Pro 3 war ein Standard unter Windows 3.x. Mit der Version vier etablierte sich das Programm als ideales Werkzeug für alle, die gelegentlich für das Web Grafiken bearbeiten. Vor allem die einfache Bedienbarkeit half den Gestaltern, schnell ihre Ziele zu erreichen. Dafür nahm man auch einige Einbußen im Leistungsangebot in Kauf. Mit dem Nachfolger Paintshop Pro 5 hielt die Layer-Technik Einzug. Das versprach zwar mehr Leistung und Flexiblilität, brachte aber einige Umgewöhnung. Mit der Version 6 kamen vektororientierte Werkzeuge, eine bessere Benutzerschnittstelle und eine Möglichkeit, eigene Grafikkreationen mit digitalen Wasserzeichen zu versehn. Und an die Layer hat man sich auch inzwischen gewöhnt.

Button auf Knopfdruck

Ein alter Bekannter mit neuer Leistung ist die Buttonize-Funktion von Paintshop Pro. Diese verwandelt den markierten Bereich einer Grafik in einen dreidimensional anmutenden Button.

Zum Buttonizen benötigen Sie zunächst eine Grafik. Starten Sie Paintshop Pro 6. Im Menü File -- New öffnen Sie eine neue Grafik mit einer Width von 80 und einer Height von 40. Als Background Color wählen Sie Black, der Image Type sollte auf 16 Million Colors stehen. Bei niedrigeren Auflösungen funktionieren die Spezialeffekte nicht. Die Größe von 80 mal 40 Pixel ist ideal für einen kompakten Button. Um jedoch mit der Grafik besser arbeiten zu können, klicken Sie auf das Lupenwerkzeug und klicken danach viermal auf das schwarze Bild.

Damit ist schon alles bereit, um aus dem schwarzen Bild einen schicken Button zu gestalten. Stellen Sie zuerst noch die Hintergrundfarbe auf weiß. Dazu klicken Sie rechts im Bildschirm auf das hintere der beiden überlappenden Farbfelder und wählen aus dem dann erscheinenden Dialog per Doppelklick die Farbe Weiß. Wichtig: Buttonize funktioniert nicht, wenn Bildhintergrund und gewählte Hintergrundfarbe gleich sind. Wenn Sie nur einen Ausschnitt in einen Button verwandeln wollen, wählen Sie diesen mit dem Markierungs-Werkzeug. Dabei lassen sich auch elliptische und kreisförmige Ausschnitte markieren. Allerdings bringt das nicht viel. Denn Buttonize arbeitet immer eckig.

Wählen Sie aus dem Menü Image -- Effects -- Buttonize. Falls der entsprechende Menüpunkt nicht zu sehen ist, haben Sie wahrscheinlich schon einen zweiten Layer hinzugefügt, etwa einen Text geschrieben und auf dem Hintergrund platziert. In diesem Fall führen Sie die Maus über das Rollup-Menü Layer Palette, warten bis es aufspringt und wählen dann mit einem Klick Background. Eventuell ist auch die Farbtiefe zu gering. Das lässt sich ändern über Colors -- Increase Color Depth -- 16 Million Colors (24 Bit) Rufen Sie dann noch einmal Buttonize auf.

Erzeugen von Buttons mit Paintshop Pro 6

Im Buttonize-Dialog klicken Sie zuerst Auto Proof an. Dann zeigt Paintshop Pro jede Änderung im Dialog gleich als Vorschau am Bild selbst. Keine Angst: Die Grafik ändert sich erst dann dauerhaft, wenn Sie Ok klicken. Bei der Einstellung von Height und Width sollten Sie dezente Werte von sechs bis acht wählen. Die Opacity sagt aus, wie stark der weiße Hintergrund am Rand durchscheint. Ein Wert von 40 bis 50 ist in diesem Beispiel gut. In jedem Fall sollten Sie Transparent Edge wählen. Das ergibt weichere Kontraste. Sind alle Einstellungen erledigt, heißt es Ok und das Bild verwandelt sich in einen Button. Um das Ergebnis zu beurteilen, verkleinern Sie das Bild wieder mit dem Lupenwerkzeug und vier Klicks auf der rechten Maustaste. Ein Tipp: Speichern Sie diesen Knopf als Vorlage, bevor Sie mit dem Textwerkzeug darauf schreiben. So haben Sie immer einen leeren Button zur Hand, wenn Sie ihn brauchen.

Mehr Power für Schriften

Trotz Font-Tag und Cascading Stylesheets hat HTML noch nicht die Power, wirklich alles mit Schriften anzustellen. Sei es, einen Schriftzug in einer festen Breite mit festen Buchstabenabständen zu präsentieren oder einen Schrifteffekt zu gestalten, der auch wirklich mit allen Browsern funktioniert. Denn nicht jedes System verfügt über jede Schriftart. Besonders wenn der Schriftzug Ihres Firmennamens einen speziellen Font braucht, packen Sie den Namen lieber in eine Grafik. Nur so können Sie sicher sein, dass jeder Browser die Schrift auch erkennt.

Sinnvoll ist die Schrift als Grafik aber nur dann, wenn Sie das Bild kompakt halten und mehrmals verwenden. Dazu beschränken Sie sich auf nur eine Hintergrundfarbe. Mehrfarbige Backgrounds oder gar Farbverläufe lassen sich nicht gut komprimieren und brauchen beim Packen zu viel Speicher. Sinnvollerweise richten Sie beim Design gleich eine Grafik in 256 Farben ein. Die richtige Färbung für Ihre Schrift ist sicher dabei. Außerdem sollten Sie die Bilddatei so einbinden, dass jede Seite auf dasselbe File zugreift. Dazu packen Sie das Bild beispielsweise in das Verzeichnis /images auf Ihrem Server und verweisen aus jedem Dokument auf die Datei in diesem Verzeichnis. Nur so ist gewährleistet, dass das Browser-Cache immer wieder diese Datei erkennt, sobald sie auf einer Seite auftaucht. Und dann holt der Browser das Bild von der lokalen Festplatte statt über das Netz.

Texte mit Paintshop Pro

Paintshop Pro 6 verwöhnt seine Benutzer mit viel Komfort bei der Textgestaltung. Schriftzüge landen jetzt auf Wunsch als Vektorgrafik im Bild. Das bedeutet, man kann den Schriftzug nach Belieben dehnen oder stauchen.

Für einen ersten Test dient ein einfacher Titel-Schriftzug für eine Homepage. Starten Sie dazu Paintshop Pro. Mit File -- New öffnen Sie eine neue Grafik. Sie ist 500 mal 150 Pixel groß, die Hintergrundfarbe weiß, die Farbtiefe sollte 8 Bit mit 256 Farben betragen. Ist die neue Bilddatei geöffnet, wählen Sie eine dunkle Vordergrundfarbe und klicken auf das Textwerkzeug. Dieses befindet sich am linken Fensterrand von Paintshop Pro und ist mit einem A gekennzeichnet. Bringen Sie den Mauszeiger über die neue Grafik und klicken Sie an beliebiger Stelle, um den Textdialog zu öffnen.

Bevor Sie Text schreiben, wählen Sie Schriftart, -Größe und Farbe aus. Letzteres ist etwas umständlich. Denn im Gegensatz zu frühen Versionen von Paintshop Pro dient nicht mehr automatisch die Vordergrundfarbe als Schriftfarbe. Es gilt als Farbe der Inhalt des großen Rechtecks, das neben den beiden überlappenden Kästchen liegt. Die wiederum enthalten Vorder- und Hintergrundfarbe. Wenn Sie mit der Maus über eines der beiden Felder fahren, verwandelt sich der Zeiger in eine Pipette. Sie können dann die aktuelle Vorder- oder Hintergrundfarbe der Schrift zuweisen. Wünschen Sie eine ganz andere Kolorierung, klicken Sie einmal auf das große Farbkästchen. Dann erscheint die Farbauswahl mit allen Schattierungen. Nach einem Ok übernimmt das Programm die neue Schriftfarbe.

Nun geben Sie den Text ein. Den zeigt Paintshop Pro gleich in der richtigen Farbe und im richtigen Font. Zusätzlich dürfen Sie den Abstand zwischen den Textzeilen und zwischen Buchstaben feintunen. Ersteres macht natürlich nur Sinn, wenn Sie auch mehrere Zeilen Text haben. Für den Buchstabenabstand ist Kerning zuständig. Der Wert in der Box bemisst sich am Buchstaben m im gerade eingestellten Font und wird in 1000stel-Schritten eingestellt. Ein Wert von 500 also entspricht genau der Breite eines halben m in der aktuell eingestellten Schriftart und -Größe. Die Zeilenabstände stellen Sie in Punkt ein, der für Schriftgrößen gebräuchlichen Maßeinheit. Die Wirkung dieser beiden Änderungen sehen Sie übrigens nicht im Textfenster.

Mit einem Ok landet der Text im Bild. Dabei ist er von einem Rahmen mit mehreren Anfassern umgeben. An diesen lässt sich die Textauswahl aufziehen, verschieben oder verkleinern. Ebenso ist ein Anfasser für das Drehen des gesamten Textes vorgesehen. Den finden Sie, wenn Sie der Linie nach rechts folgen, die vom dem genau in der Mitte sitzenden Anfasser wegführt.

Mit Hilfe dieser Anfasser lässt sich Text leicht so positionieren und formatieren, dass er genau auf die vorgesehene Größe passt. Und als Bild gespeichert ist so ein Logo auch nicht allzu platzraubend. Speichern Sie die Grafik als GIF. Bei Bildern mit einfarbigen Hintergründen und einer, vielleicht zwei Schattierungen in der Schrift kann GIF richtig zupacken. Denn große einfarbige Flächen sind ideales Futter für den GIF-Algorithmus.

Text an Linie ausrichten

Richtig interessant wird die Textgestaltung mit Paintshop Pro erst, wenn Sie die neue Pfadfunktion nutzen. Dazu wählen wieder File -- New und öffnen eine neue Grafik in 500 mal 150 Pixel mit weißem Hintergrund. Dann wählen Sie das Zeichenwerkzeug. Dieses befindet sich links in der Werkzeugleiste als dritter Button von unten, erkennbar an einer geschlängelten Linie und einem Stift. In den Tool Options wählen Sie als Typ eine Bezier Curve und zeichnen damit eine einfache Kurve.

Mit Paintshop Pro 6 erzeugter geschwungener Schriftzug

Dazu klicken Sie den Startpunkt an, halten die Maustaste gedrückt und ziehen die Maus bis an den Endpunkt der künftigen Kurve -- vorerst ist es noch eine Gerade. Nun klicken Sie mit dem Mauszeiger an eine beliebige Stelle im Bild und ziehen die Maus bei gedrückter Taste nach oben oder unten. Schon wellt sich die Linie. Klicken Sie dann auf das Textwerkzeug und führen Sie den Mauszeiger wieder auf die Bezierkurve zurück.

Jetzt ist genaues Arbeiten gefragt: Der Mauszeiger muß genau über die Linie geführt werden, bis rechts unten im Kreuz ein schräges A mit einem Viertelkreis erscheint:

Cursoranzeige für Kurventext

Dann klicken Sie und geben Ihren Text ein. Nach dem Ok passt sich der Text der Linie an. Um die Textgröße zu modifizieren, öffnen Sie das Layer-Rollup und klicken Sie den Layer an, der als Namen den soeben eingegebenen Text trägt. Dann können Sie mit den Anfassern den Text aufziehen -- er wird sich trotzdem immer wieder an die Kurve anpassen. Speichern Sie die Grafik in jedem Fall im PSP-eigenen Format. Nur dann bleiben die Layer erhalten und Sie können nachträglich an der Schrift arbeiten oder die Kurvenform ändern. Um eine Web-fähige Version des Bildes zu schreiben, verwenden Sie die Exportfunktion von Paintshop Pro unter File -- Export -- Transparent GIF. Hier dürfen Sie zusätzlich noch beim Speichern eine transparente Farbe festlegen, damit sich der Schriftzug ideal in den Hintergrund Ihrer Website einfügt.

Kurztipps zu Paintshop Pro 6

Farbauswahl für HTML

Wenn Sie den richtigen RGB-Code für Ihre Text- oder Hintergrundfarbe suchen, bemühen Sie die Farbauswahl von Paintshop Pro. In diesem Dialog suchen Sie an dem Farbring Ihre Schattiernug. Gleichzeitig ermittelt Paintshop Pro den korrekten Farbcode im HTML-Format. Wenn Sie Ihre Farbe gefunden haben, markieren Sie den Inhalt des Feldes HTML Code und setzen Sie den Inhalt in Ihren HTML-Quelltext ein.

Farb-History

Ärgerlich: Da hatte man gerade die richtige Farbe eingestellt, aber mit einem unbedachten Mausklick wieder weggeworfen. Doch dieses Problem lässt sich in Paintshop Pro lösen: Klicken Sie mit der rechten Maustaste einmal auf die beiden überlappenden Farbauswahlfelder. Sofort zeigt Ihnen Paintshop Pro die 20 zuletzt ausgewählten Schattierungen.

Rollups abstellen

Die automatisch verschwindenden Rollup-Fenster sind praktisch, wenn man einen kleinen Bildschirm hat. Doch wer über Platz verfügt, möchte auch die Fenster für die Layer-Auswahl oder die Werkzeugoptionen dauerhaft offen halten. Klicken Sie dazu mit der rechten Maustaste auf die Fensterleiste eines der Rollips oder auf eine der Werkzeugleisten. Klicken Sie dann auf Toolbars und entfernen Sie im folgenden Dialog das Häkchen vor Enable Automatic Rollups.

Aktualisiert am: 09.04.2006



Ihr Kommentar:


Name:




Hinweis/Disclaimer

Copyright © goldmann.de 1999-2012   | Tippscout 5.0