Tag: photoshop

Photoshop: 20 Jahre und Erinnerungen an den Anfang

Heute wird Adobe Photoshop 20 Jahre alt. Das Bildbearbeitungsprogramm entstand 1987 durch Thomas Knoll und seinen Bruder John Knoll unter dem Namen "Display" und wurde anfangs für visuelle Effekte (VFX, CGI) in Filmen eingesetzt. Ein Jahr später wurde die Software über die Firma Barneyscan XP und deren Scanner vertrieben. Bei Adobe wurde das Programm schließlich durch Adobes Art Director Russel Brown entdeckt. 1988 wurde ein Vertrag zwischen den Knoll-Brüdern und Adobe abgeschlossen, bis schließlich 1990 die erste Version von Photoshop veröffentlicht wurde. Ebenen wurden mit Version 3 der Anwendung eingeführt.
Bei Adobe TV wurde nun ein schönes Video veröffentlicht, in dem die 4 Entwickler hinter Photoshop 1.0 (Thomas Knoll, John Knoll, Russell Brown und Steve Guttman) in Erinnerungen an die Anfänge der Software schwelgen.

In den 18 Minuten unterhält man sich über damalige Projekte, Vorbilder und Gegebenheiten. Während Steve Guttman inzwischen bei Microsoft arbeitet und John Knoll immer noch bei Industrial Light & Magic für aufwendige Filmeffekte sorgt, sind Thomas Knoll und Russell Brown noch bei Adobe tätig.
Wer sich noch einmal alle bisherigen Versionen von Photoshop und ein weiteres Interview mit Thomas Knoll ansehen will, findet bei WebDesignerDepot eine schönen Beitrag dazu.

Adobe: Die Maskierungsfunktion von Photoshop CS5

John Nack von Adobe hatte vor einigen Tagen auf seinem Blog einen Artikel veröffentlicht, in dem er die neue Maskierungsfunktion des kommenden Photoshop CS5 vorstellt. Bei Facebook lässt sich das "Selections Sneak Peek"-Video auch in höherer Auflösung ansehen.
Mit Photoshop CS4 wurde der "Extrahieren"-Filter entfernt, der jedoch als zusätzliches Plug-In heruntergeladen werden kann. Der Grund für das Fehlen des Filters stellt die nun vorgestellte Maskierungsfunktion dar.

Der neue Modus erlaubt es, schneller exakte Masken-Selektionen zu erstellen. Dabei wird vom Benutzer zuerst eine grobe Auswahl des gewünschten Bereichs vorgenommen, woraufhin die Kanten per Kantenerkennung ("Refine-Edge") angepasst werden können. Anschließend können weitere Feinheiten und Optimierungen an der Selektion erfolgen, was das manuelle Maskieren überflüssig machen soll. Die Möglichkeit, mit dem Pinsel-Werkzeug eine Maske zu erweitern, gibt es schon länger in Photoshop.

Photoshop: Ebenenstil auf andere Ebene kopieren

Mit Ebenenstilen lassen sich in Photoshop dezente Effekte wie Schatten, Verläufe oder Muster realisieren. Das Bildbearbeitungsprogramm bietet hierfür etliche Einstellungsmöglichkeiten, die dennoch ein hohes Maß an Genaugikeit und Kreativität erfordern. Ebenenstile können kopiert und auf andere Ebenen angewendet werden, so dass bei mehreren Elementen mit gleichen Effekten nur einmal ein Ebenenstil erstellt werden muss. Photoshop bietet hierfür zum einen die Möglichkeit, Ebenenstile per Kontextmenü zu kopieren. Die Einträge nennen sich "Ebenenstil kopieren" bzw. "Ebenenstil einfügen" und finden sich im Kontextmenü der entsprechenden Ebene.
Weiterhin gibt es die Funktionalität, Ebeneneffekte per "Drag and Drop" auf andere Ebenen zu kopieren: Dabei muss sich der Mauszeiger direkt über dem "fx"-Symbol der gewünschten Ebene befinden. Anschließend muss die ALT-Taste in Verbindung mit der linken Maustaste gedrückt und gehalten werden, so dass durch Bewegen des Cursors ein vergrößertes "fx"-Symbol erscheint — dieses kann auf die neue Ebene verschoben werden, welche dann den jeweiligen Ebenenstil übernimmt.

Übrigens kann ein kopierter Ebenenstil auch auf mehrere Ebenen angewendet werden. Dazu müssen lediglich die Zielebenen ausgewählt werden (per STRG oder SHIFT), so dass anschließend der Stil per Kontextmenü eingefügt werden kann.

ComparePSD: Photoshop-Dateien vergleichen

Versionsmanagement ist nicht nur bei Entwicklern ein wichtiges Thema — auch Designer sollten bei der Arbeit mit Photoshop Sicherheitskopien oder Versionen anlegen, um auf ältere Elemente Zugriff zu haben. Neben dem manuellen Kopieren von Dateien gibt es automatisierte Lösungen. So bietet beispielsweise PixelNovel mit Timeline ein derartiges Versionierungssystem für Designer an, das für 60 USD zu haben ist.
Das Unternehmen hat nun auch eine kostenlose Anwendung zur Verfügung gestellt, mit der sich die Ebenen von zwei Photoshop-Dateien vergleichen lassen. Die Software nennt sich ComparePSD und ist derzeit für Windows erhältlich (eine Mac OS X-Version befindet sich in Arbeit).

Das Programm arbeitet zuverlässig und erfüllt genau seinen Zweck: Die veränderten Ebenen der ausgewählten Photoshop-Dateien werden farblich markiert und können so gut verglichen werden. Die Ansicht kann so eingestellt werden, dass lediglich die Unterschiede der Ebenen angezeigt werden. Eine Suchfunktion für Ebenen ist ebenfalls integriert, die allerdings nur teilweise funktioniert.
ComparePSD kann sich vor allem bei älteren Photoshop-Dateien als hilfreich erweisen, da die Änderungen oft nur schwer nachvollziehbar sind.

Photoshop: Infopalette für Webdesign einstellen

In Adobe Photoshop gibt es diverse Paletten (Fenster), die für bestimmte Zwecke gedacht sind. Nicht alle Paletten sind von vornherein so eingestellt, dass sie für den Bereich Webdesign/Screendesign nützlich sein könnten. Die Infopalette stellt einen derartigen Fall dar: Sie ist eines der hilfreichsten Werkzeuge, wenn es darum geht, Abstände und Größen zu ermitteln. Allerdings sollte sie auch auf die Bildschirmdarstellung optimiert sein, was in Photoshop nicht voreingestellt ist.
Um die Infopalette sinnvoll für die Gestaltung von Websites nutzen können, müssen lediglich drei Einstellungen in den Optionen der Palette vorgenommen werden. Dazu muss das Infofenster geöffnet sein, was sich über F8 oder den Menüeintrag "Fenster -> Info" erreichen lässt. Anschließend müssen die Palettenoptionen aufgerufen werden, die sich über die kleine Schaltfläche in der rechten oberen Ecke des Fensters öffnen lassen.

Nun sollten die Farbwertanzeigen auf "RGB" und die Zeigerkoordinaten auf "Pixel" eingestellt werden.

Photoshop: Hilfsebenen mit Größenangaben erstellen

Bei der Umsetzung und Programmierung von Webdesigns, die als Photoshop-Layout vorliegen, kommt es auf pixelgenaue Abstände und Koordinaten von Bildelementen an. Adobe Photoshop bietet mit den Slices eine gute Funktionalität an, um eine Website in entsprechende Teile zu separieren, die bei der HTML/CSS-Entwicklung wieder zusammengesetzt werden.
Neben Slices können auch einfach gewöhnliche Ebenen als Hilfsebenen verwendet werden, um die Größen und Koordinaten von Bildern zu speichern. Markiert man die Transparenz der Hilfsebene (STRG + Klick auf Ebene), kann die Arbeitsfläche auf die Bildgröße zugeschnitten und das Webseiten-Bild exportiert werden.
Um einen besseren Überblick über die verschiedenen Bildgrößen und Koordinaten zu behalten, habe ich ein kleines Skript entwickelt, welches eine halbtransparente Farbfläche erstellt, auf der die Informationen des Auswahlbereiches (Breite x Höhe @ X, Y) vermerkt werden.

Dazu muss einfach eine Selektion erstellt werden, welche ein Platzhalter für das spätere Bild darstellt. Wird anschließend mein Skript DummySliceLayer ausgeführt, erstellt Photoshop eine Hilfsebene (siehe Abbildung). So lassen sich Größen- und Positionsangaben von Bildelementen schneller auf den HTML- bzw. CSS-Code übertragen. Das Skript steht auch in den Extras zum Download bereit.
Die Datei funktioniert unter Photoshop ab Version 7 — eine Installationsanleitung liegt wie gewohnt der ZIP-Datei bei.

Photoshop: Dateigröße von PSD-Dateien verringern

An der Gestaltung und Umsetzung einer Website können viele Personen beteiligt sein. So ist es häufig der Fall, dass die offenen Dateien von Webdesigns (wie PSD oder PNG mit Ebenen) versendet werden müssen, damit sie weiter verarbeitet werden können. Auch im Zeitalter von DSL-Geschwindigkeiten ist es stets von Vorteil, wenn die im Internet verschickten Daten klein gehalten werden, damit der Download entsprechend schnell funktioniert.
Ein alter, aber stets effektiver Trick, um die Dateigröße von Photoshop-Dateien im PSD-Format zu verringern, besteht im Erstellen einer einfarbigen Ebene. Die Ebene sollte eine Pixelebene sein, welche die komplette Arbeitsfläche der Datei abdeckt.

Mit dieser Methode können bis zu 20% (oder mehr) eingespart werden. Die Berechnung lässt sich nicht verallgemeinern, aber getestete Dateien konnten beispielsweise von 7,7 MB auf 6,2 MB oder von 11,1 MB auf 9,6 MB reduziert werden. Wenn derartige Dateien per E-Mail versendet werden, macht sich der kleine Unterschied dennoch bemerkbar.

Photoshop: Auswahlbereiche mit Mustern füllen

Manche Tastaturbefehle (Shortcuts) von Adobe Photoshop sind nicht allgemein bekannt, obwohl sie gute Dienste verrichten können. Für ein besseres Arbeiten lohnen sich Tastenkombinationen auf jeden Fall, da der Weg über die Menüs sicherlich nicht die schnellste Methode ist. Die Anpassung der bestehenden Tastaturbefehle ist ebenfalls zu empfehlen, da das Bildbearbeitungsprogramm nicht auf einen bestimmten Zweck (z.B. Webdesign) zugeschnitten ist. Shortcuts, die für Retouche oder Druckdaten angelegt sind, können daher ersetzt werden.
In Photoshop dürften die beiden bekanntesten Tastenkombinationen wahrscheinlich solche sein, die der Füllung eines Auswahlbereiches (Selektion) dienen: Mit ALT + BACKSPACE wird eine ausgewählte Fläche mit der Vordergrundfarbe gefüllt, während STRG + BACKSPACE die Auswahl mit der Hintergrundfarbe füllt. Ein weiterer Shortcut stellt nun SHIFT + BACKSPACE dar, mit dem sich Auswahlbereiche mit einem vorhandenen Muster (Pattern) füllen lassen.

Übrigens können Flächen durch SHIFT + F6 mit einer Kontur umrandet werden.

Photoshop: Farben außerhalb aufnehmen

In Photoshop gibt es viele Funktionen und Arbeitsschritte, die nicht offensichtlich sind und dennoch sehr nützlich sein können. Wenn es beispielsweise darum geht, eine Farbe von einer Website oder einem Fenster aufzunehmen, muss dafür nicht der Weg über den Screenshot gegangen werden. Photoshop bietet hierzu eine schöne Möglichkeit, die eigentlich auf der Hand liegt.
Um also einen Farbwert außerhalb des Photoshop-Programmfensters bzw. der Arbeitsfläche aufzunehmen, muss zuerst die Pipette (I-Taste) aktiviert werden. Anschließend kann mit gedrückter Maustaste der Mauszeiger überall auf dem Monitor hinbewegt werden — der Farbwert unterhalb des Mauszeigers wird so als Vordergrundfarbe in Photoshop festgelegt.

Photoshop: Auswahlbereiche in Formen umwandeln

In Photoshop lassen sich Farbflächen als Pixel- oder Vektorformen anlegen. Rechtecke können präzise mit dem Auswahl-Werkzeug erstellt und anschließend mit einer Farbe gefüllt werden. Alternativ lassen sich flächige Elemente mit dem Rechteck-Werkzeug als Vektorobjekte anlegen, die besser editierbar sind, da die einzelnen Punkte verschoben und modifiziert werden können.
Der Unterschied zwischen dem Auswahl-Werkzeug und dem Vektor-Werkzeug liegt in der Berechnung der Subpixel bei einer vergrößerten Darstellung. Arbeitet man mit einer Vergrößerung der Arbeitsfläche (Zoom), werden die Kanten von Vektorflächen um halbtransparente Pixel erweitert (Anti-Aliasing). Dies kann in vielen Fällen ungewollt sein. Flächen, die hingegen mit dem Auswahl-Werkzeug erstellt werden, erhalten stets "harte" Kanten. Daher habe ich ein kleines Script geschrieben, durch das sich Vektorformen mit dem Auswahl-Werkzeug erstellen lassen. Dabei kann der Tastaturbefehl für dieses Script natürlich beliebig gewählt werden ("Bearbeiten -> Tastaturbefehle… -> Datei -> Skripten").

So können auch bei einer Zoomstufe von beispielsweise 800% Vektorflächen ohne halbtransparente Kanten erstellt werden. Das Script kann hier heruntergeladen werden. In der ZIP-Datei befindet sich zudem das Script "SelectionToRoundedShape", mit dem sich Auswahlbereiche auch in abgerundete Vektorformen umwandeln lassen — hierbei erscheint ein Dialog, in den lediglich der Radius der Rundung eingegeben werden muss.
Das Script-Paket enthält verschiedene Dateien, die mit einer Versionsnummer gekennzeichnet sind: So liegen Skripte bei, die in Photoshop bis Version 9 (CS2) funktionieren. Die CS3-Skripte sind optimiert für Photoshop CS3 und höher.