Tag: photoshop

201019Feb

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.

Adobe TV - Photoshop 20th Anniversary: Startup Memories

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.

201012Feb

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.

Photoshop CS5 - Maskierungsfunktion

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.

Tags: ,
201027Jan

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.

Photoshop - Ebenenstil kopieren

Ü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.

201022Jan

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).

ComparePSD

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.

UPDATE
Die Projekte bestehen in der Form nicht mehr.

200920Dez

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.

Photoshop - Infopalette

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

Weiterlesen...
200920Dez

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.

Photoshop Script - DummySliceLayer

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.

200918Dez

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.

Photoshop - Speicherplatz-Reduzierung durch farbige Ebene

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.

200916Dez

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.

Photoshop - Auswahlbereiche mit Mustern füllen

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