Photoshop: Typische Anwendungen
Photoshop und ImageReady ermöglichen schnell und unkompliziert hervorragende Ergebnisse, ein dezenter Einsatz der Werkzeuge kann erheblich dazu beitragen.Erstellen von Rollover-Schaltflächen
Ein Rollover ist ein Effekt, bei dem über ein Maus-Ereignis verschiedene Aktionen ausgelöst werden können, z. B. Schaltflächen ihr Aussehen ändern durch Tauschen der Schaltflächengrafik. Aber auch andere JavaScript -Ereignisse sind möglich.Maus-Aktionen können sein das Rollen oder Klicken in einen Bereich, das Loslassen der Maustaste, das Verlassen eines bestimmten Bereiches.
Anhand folgenden Beispiels sollen zwei Maus-Aktionen, Rollen und Klicken in einen Bereich, gezeigt werden. Dabei findet jeweils ein Tausch der Schaltflächen statt. Das Aussehen der verschiedenen Schaltflächen kann beliebig gewählt und soll hier nur als Vorschlag verstanden werden.
Für das Erstellen von Rollover-Effekten muss das Programm ImageReady (unterste Schaltfläche der Werkzeugpalette, auch "Datei - Springen zu ") gestartet werden.
Mit folgenden Arbeitsschritten kann schnell eine Rollover-Schaltfläche erstellt werden:
- neue Datei erstellen, Größe 100x30 Pixel, Inhalt transparent
- abgerundetes Auswahlrechteck wählen, Auswahl erstellen, Vordergrundfarbe definieren und Fläche farbig füllen ("Bearbeiten - Fläche füllen"), Auswahl aufheben
- über die Ebenen-Palette der Ebene 1 Ebeneneffekt (abgeflachte Kanten und Relief) hinzufügen
- Textwerkzeug auswählen, in Optionsleiste Text zentrieren sowie Textgröße einstellen
- Schriftfarbe definieren, Schaltfläche beschriften, evtl. mit Verschieben-Werkzeug ausrichten
- Rollover-Palette öffnen und neuen Status -über- erstellen
- Ebene 1 aktivieren und neuen Ebeneneffekt hinzufügen, z.B. Verlaufsüberlagerung (Vorder- zu Hintergrundfarbe, diese vorher definieren) sowie abgeflachte Kanten und Relief
- in Rollover-Palette neuen Status -unten- erstellen
- Ebene 1 aktivieren und wiederum Ebeneneffekte Verlaufsüberlagerung, jedoch Option "umkehren" aktivieren sowie abgeflachte Kanten und Relief hinzufügen
Darstellung: verschiedene Rollover-Status
Darstellung: die Ebenen-Palette
Die Tastenkombination "Strg - Alt - P" ermöglicht ein Testen der erstellte Schaltfläche im Browser.
Erstellte Datei muss schließlich HTML-seitig gespeichert werden, dazu "Datei - Optimiert-Version speichern" und unter Dateityp "HTML und Bilder" wählen, ImageReady generiert zu den erstellten Schaltflächengrafiken die dazugehörige HTML-Datei, welche entsprechend in das Web - Projekt eingebunden werden muss.
Sollen mehrere Schaltflächen dieser Art erstellt werden, die Datei *.psd speichern und bei Bedarf entsprechend textmäßig neu bearbeiten, mehrere HTML-Dateien können anschließend zusammengefasst werden.
Animation - Ändern einer Bewegung
Um eine Animation zu erstellen, werden im ImageReady Werkzeuge angeboten, mit deren Benutzung man schnell und einfach zu hervorragenden Lösungen kommt. Eine Animation ist eine Abfolge von sich minimal unterscheidenden Bildern, die schnell unmittelbar hintereinander gezeigt werden. Hierdurch entsteht der Eindruck von Bewegung, Änderung. Erstellte Animationen müssen im GIF-Format abgespeichert werden, da nur dieses Format im Internet Animation unterstützt.Am folgendes Beispiel einer Bewegungsänderung soll das Arbeiten mit der Animation-Palette näher erklärt werden, die zusammen mit der dafür wesentlichen Ebenenpalette benutzt wird. Prinzipiell wird durch das Einstellen der entsprechend vorbereiteten Ebenen der jeweilig zu bearbeitende Frame gestaltet.
Für eine animierte Grafik werden einzelne, aufeinander abgestimmte Bilder auf je einer Ebene der Datei definiert. Zum Erstellen der einzelnen Frames diese dann jeweils durch Einblenden der erforderlichen Ebene oder Ebenen gestalten. Einfache Grafiken lassen sich durch Kopieren der Ebene - vorher sollte man bereits einen neuen Frame erstellen - und anschließender Auswahl eines Teils der Grafik mit Transformieren der Auswahl (Drehen um einen Punkt) verändern. Um eine Auswahl zu transformieren, einfach diese mit einem geeigneten Werkzeug erstellen, anschließend Menüpunkte "Bearbeiten - Transformieren - Drehen" durchführen, das in der Mitte der Auswahl erscheinende Drehpunktkreuz vorher zum Punkt der Drehung hin verschieben, Cursor an den Rand der Auswahl setzen; über die so erscheinenden gebogenen Doppelpfeile kann nun die Auswahl um den Drehpunkt (nunmehr am Rand der Auswahl), gedreht werden. Beispielsweise kann so eine Armbewegung erzeugt werden. Wie schon erwähnt, werden die einzelnen, neu zu erstellenden Frames durch das jeweilige Einblenden (Augen-Symbol) der erforderlichen Ebene (auch Ebenen) zusammengestellt. Das Optimieren über die gleichnamige Palette bewirkt eine Reduzierung der Dateigröße. Über das Menü "Datei - Vorschau in" kann die Animation im Browser betrachtet werden.
Die Animation wird mit "Datei - Optimiert-Version speichern unter" mit den aktuellen Einstellungen der Optimieren-Palette und Nennung eines Bildnamens im GIF-Format gespeichert.
Soll die Datei später nachbearbeitet werden, ist zusätzliches Speichern im Photoshop-Format unumgänglich.
Animation - Ändern einer Form
Weitere Möglichkeiten einer animierten Grafik liegen in der Formanimation.Folgendes Beispiel einer Formänderung zeigt weitere Möglichkeiten von Animation- und Ebenenpalette.
Das Einblenden der entsprechend vorbereiteten Ebenen gestaltet den jeweilig zu bearbeitenden Frame. In einer neuen Datei, 100 x 100 Pixel mit transparentem Hintergrund, wird mittels Auswahlellipse eine kreisförmige Auswahl erstellt. Mit "Bearbeiten - Fläche füllen" - vorher beliebige Farbe definieren - und Aufheben der Auswahl ist die erste geometrische Figur erstellt.
In der Animation-Palette "Fenster - Animation einblenden" wurde mit der ersten Grafik automatisch ein Frame, das erste Bild, erzeugt. Dieser Frame zeigt den Status des momentan aktuellen Bildes.
Über das Einblendmenü der Animation-Palette, auch möglich über die Schaltfläche am unteren Rand der Palette, wird nun ein neuer Frame eingefügt. Dieser neue Frame ist immer eine Kopie des vorherigen Frames und bereits aktiviert. Der Inhalt dieses Frames kann durch Bearbeiten des Bildes verändert werden.
In der Ebenenpalette ("Fenster - Ebenen einblenden") über das Einblendmenü oder die Schaltfläche am unteren Rand der Palette eine neue Ebene erstellen, Ebene 1 ausblenden und mit dem Auswahlrechteck analog erster Grafik entsprechende Auswahl - nun ein Rechteck - erstellen. Andere Farbe definieren und Auswahl füllen, Auswahl aufheben.
Der Inhalt der Frames wird durch Bearbeiten des jeweiligen Bildes verändert. Durch das Ausblenden der Ebene 1 erhält Frame 2 sodann das Abbild der Ebenen 2, also der zweiten Grafik. Folgende Zuordnungen gibt es nun:
Aktvierter Frame 1 bei eingeblendeter Ebene 1 (Ebene 2 ausgeblendet)
Aktvierter Frame 2 bei eingeblendeter Ebene 2 (Ebene 1 ausgeblendet)
"Datei - speichern" sichert den momentanen Stand der Arbeit. Um nun die erste Grafik in die zweite Grafik übergehen zu lassen, muss der Übergang zwischen beiden Frames aufgefüllt werden. Dieses Einfügen von Übergangsframes geschieht automatisch durch das Programm.
Frame 1 muss dazu aktiviert sein. Aus dem Palettenmenü die Option "Dazwischen einfügen .. " wählen, im folgenden Dialogfeld nur die Optionen "alle Ebenen" und "Deckkraft" aktivieren. Bei eventuell vorhandenen Ebeneneffekten und Positionsveränderung entsprechende Felder aktivieren. Die Option "nächster Frame" fügt die einzufügenden Frames zwischen dem aktiven und dem folgenden Frame ein. Der Wert 5 für die Anzahl der einzufügenden Frames hält den Übergang einigermaßen flüssig, ohne die Datei übermäßig aufzublähen. Durch Bestätigen der Einstellungen werden 5 neue Frames erzeugt, deren Bildinformationen aus den beiden Ausgangsframes ermittelt werden. Über die linke untere Schaltfläche der Animation-Palette kann eine Wiederholungsoption für die Animation, mittels Schaltfläche darüber die Verzögerungszeit der Frames eingestellt werden.
Ein Klick auf die Schaltfläche "Abspielen" gibt einen ersten Eindruck über die Animation.
Frames können verschoben, gelöscht, kopiert sowie einzeln oder mehrere gemeinsam bearbeitet werden. Die Bearbeitung eines Frames sollte am besten in der Originalansicht des Bildfensters erfolgen. Über die Optimieren-Palette ("Fenster - Optimieren einblenden") besteht die Möglichkeit, die nun animierte Datei optimal für das Speichern vorzubereiten. Da Animation nur durch das GIF-Format unterstützt wird, muss dieses Format in der Optimieren-Palette gewählt werden. Durch Anklicken der Palettenart "Perzeptiv", die Option "Transparenz" sowie ein Reduzieren der Anzahl der Farben kann die Dateigröße merklich minimiert werden. Das Optimieren über das Einblendmenü der Animation-Palette mit Bestätigung beider Optionen im folgenden Dialogfenster ("Begrenzungsrahmen" sowie "Entfernung redundanter Pixel" erzeugt nun das optimierte Bild. Wurde außerdem Transparenz gewählt, sollte als Entfernungsmethode beim Framewechsel "Automatisch" eingestellt sein. Dazu alle Frames auswählen und über Kontextmenü entsprechende Option selektieren. So wird sichergestellt, dass der aktuelle Frame verworfen wird, wenn folgender eine Ebenentransparenz enthält.
Durch Klicken auf die Registerkarte "optimiert" im Bildfenster der Datei ist das Optimieren der GIF-Animation unmittelbar ersichtlich.
Darstellung: Animation-Palette mit erstelltem ersten und letzten Frame
Darstellung: Animation-Palette mit eingefügten Übergangsframes
Die Animation wird mit "Datei - Optimiert-Version speichern unter" mit den aktuellen Einstellungen der Optimieren-Palette und Nennung eines Bildnamens im GIF-Format gespeichert. Ein zusätzliches Speichern im Photoshop-Format garantiert die Möglichkeit einer spätere Nachbearbeitung.
Anwendung von Filtern
Sehr schöne optische Effekte lassen sich mit dem Werkzeug Filter erzielen. Photoshop verfügt über eine Vielzahl von Filtern für die verschiedensten Effekte. In vorangegangenen Kapiteln wurde der Einsatz von Filtern bereits teilweise angerissen. Bezüglich dieser Thematik ist hier einfach Probieren angesagt. Zur groben Orientierung sei gesagt, dass Kunst- und Malfilter einen Maleffekt im Bild bewirken, Rendering-Filter unter anderem räumliche und Lichteffekte, Stilisierungsfilter handgemalte Effekte bewirken.Abschließend sei erwähnt, dass Filtereffekte nicht auf Bitmap, Schwarz-Weiß-Bilder sowie Bilder mit indizierten Farben (8-Bit-Farbtiefe) angewendet werden können. Einige Filter funktionieren nur mit RGB-Bildern. Beim Öffnen des Menüpunktes "Filter" erscheint der zuletzt verwendete Filter zuerst. Zum Widerrufen eines angewendeten Filters den Menüpunkt "Bearbeiten - Widerrufen" bzw. die Tastenkombination "Strg + Z" betätigen. Um die verschiedenen Filter auszuprobieren, besonders bei großen oder hochauflösenden Bildern, sollte man einen kleineren Bildbereich auswählen und den Filter auf diesen Bereich anwenden. Da Filteranwendungen teilweise sehr speicherintensiv sind, können Speicherprobleme evtl. über den Befehl "Bearbeiten - Entleeren" gelöst werden. Auch das Schließen nicht benötigter Anwendungen und Zuweisen von mehr RAM für Photoshop kann Abhilfe schaffen. Dazu mit "Strg + K" das entsprechende Dialogfenster öffnen und über "Arbeitsspeicher & Bildcache" mehr RAM zuweisen.
Drucken von Dateien
Wenn Bilder ausgedruckt werden sollen, müssen im Vorfeld die Seite eingerichtet sowie entsprechende Druckoptionen festgelegt werden. Über das Menü "Datei - Druckoptionen" wird das gleichnamige Dialogfenster aufgerufen. Im das Kontrollfeld "Bild zentrieren" wird das Bild mittig angeordnet, bei Deaktivierung können Angaben hinsichtlich oberer und linker Abstand zur Seitenkante definiert und das Bild entsprechend positioniert werden.Das Kontrollfeld "Auf Mediengröße skalieren" garantiert ein Ausdrucken in der maximal möglichen Bildgröße. Alternativ wird bei Deaktivierung dieses Feldes und Eingabe eines prozentualen Skalierungswertes - auch die Angabe von festen Maßeinheiten ist möglich - die Größe des auszudruckenden Bildes individuell festgelegt. Über den Begrenzungsrahmen - wenn aktiviert - ist durch Ziehen mit der Maus ebenso eine Größe für den Druck einstellbar. Bei einer erstellten Auswahl im Bild kann durch Aktivieren des entsprechenden Kontrollfeldes dieser ausgewählter Bereich zum Ausdruck gebracht werden. Wurden alle Einstellungen vorgenommen, so wird über die Schaltfläche "Drucken" aus dem aktuellen Dialogfeld oder aber über das Menü "Datei - Drucken" ein weiteres Dialogfenster aufgerufen. Hier kann abhängig vom zu verwendeten Drucker die Druckauflösung sowie die Anzahl der Kopien eingestellt werden. Sollen nur einzelne Seiten der Datei gedruckt werden, kann man diese entsprechend selektieren. Über den Quellfarbraum wird entweder der Farbraum des Dokumentes oder eines definierten Profils festgelegt.
Zur Auswahl des Druckfarbraumes für das Drucken kann im Einstellfeld "Profil" ein dem Drucker entsprechendes Farbprofil zugewiesen werden. Die Auswahl "Wie Quelle" greift auf den Farbraum der Datei zu. Über die Schaltfläche "Einrichten" gibt es weitere spezifische Einstellmöglichkeiten. Mit Bestätigung dieses Dialogfeldes wird der Druckvorgang gestartet.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Farben
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project