Adobe stellt am 17. Juni 2013 das gesamte Produktsortiment von CS6 auf CC (Creative Cloud) um. Neben der Tatsache, dass Photoshop CC & Co. dann nur noch im Rahmen eines Creative Cloud Abonnements nutzbar sind (was Agenturen und Verlage auf die Barrikaden treibt), werden mit der neuen Version natürlich auch neue Funktionen eingeführt.
Ich möchte in diesem Beitrag die Features von Photoshop CC vorstellen. Da mich der Einsatz von Photoshop im Bereich Web- und Interface-Design besonders interessiert, nenne ich Webdesign-Funktionen zuerst. Fireworks wird übrigens eingestellt.

Photoshop CC und Edge Reflow CC arbeiten eng zusammen

Edge Reflow, das Produkt zum gestalten von flexiblen und reaktionsfähigen Designs (Responsive Design) wird in Zukunft eng mit Photoshop CC zusammenarbeiten. In Photoshop gestaltete Entwürfen können direkt nach Edge Reflow exportiert werden, was den Kreativprozess im Responsive Design deutlich beschleunigen und verbessern könnte. Im ersten Release von Photoshop CC wird diese Funktion jedoch noch nicht vorhanden sein, sie soll in Kürze nachgereicht werden.

Einen ausführlichen Artikel zu Edge Reflow findet ihr hier.

Ecken-Radius von Vektor-Objekten nachträglich editieren

In Photoshop CC kann der Ecken-Radius von Vektor-Objekten endlich jederzeit angepasst werden. Insbesondere für Web- & Interface-Designer ist das sehr praktisch. Bisher musste eine Form nämlich komplett neu erstellt werden, wenn der Radius verändert werden sollte. Es ist auch möglich, den Radius der Ecken unterschiedlich abzurunden und den passenden CSS-Code zu exportieren.

Intelligentes Hochrechnen (Upsampling)

Bilder können in Photoshop CC (angeblich) ohne Qualitätsverlust massiv vergrößert werden. Insbesondere das Entstehen von Bildrauschen soll nicht länger auftreten. Für die nachträgliche Retina-Optimierung von Grafiken könnte diese Funktion äußerst hilfreich sein.

Mehrfach-Auswahl von Pfaden und Vektoren

In Photoshop CC können mehrere Vektoren, Formen und Pfade gleichzeitig ausgewählt werden. Auch eine Auswahl über verschiedenen Ebenen hinweg ist möglich. Das dürfte die Arbeit mit Vektoren in Zukunft deutlich vereinfachen.

Ebenen isolieren (isolate Layers)

Wenn man an einem komplexen Photoshop-Dokument mit vielen Ebenen arbeitet, kann die Übersicht schnell verloren gehen. In Photoshop CC steht daher eine neue Funktion namens „Ebenen isolieren“ zur Verfügung.
Zunächst werden alle Ebenen ausgewählt, die man im Augenblick sehen möchte. Anschließend aktiviert man die neue Funktion und Photoshop blendet alle anderen Ebenen im Ebenen-Bedienfeld aus. Sehr praktisch.

Voreinstellungen für Schriften

In Photoshop CC können individuelle Einstellungen für Schriften gespeichert und anschließend per Klick angewendet werden. Auch eine globale Voreinstellung über alle Photoshop-Dokumente hinweg soll möglich sein.

System-Schriftglättung

Bisher hatten Webdesigner immer das Problem, dass Schriften in Photoshop anders aussahen als später im Browser. Das ist nun vorbei, Photoshop CC führt „System Anti-Aliasing“ ein. Hiermit wird die Schrift so geglättet wie vom verwenden Betriebssystem gewohnt. Die Funktion kann in der Optionsleiste als Glättungsmethode ausgewählt werden.

Farbfelder aus HTML, CSS & SVG-Dateien

Farbfelder können in Photoshop CC auch auf Basis von HTML, CSS und SVG-Dateien erstellt werden. Eine neue Import-Funktion macht es möglich.

Synchronisierte Voreinstellungen

Im Rahmen der Creative Cloud werden zukünftige Photoshop-Funktionen automatisch eingespielt sobald sie von Adobe fertiggestellt worden sind. Wenn ihr Photoshop auf verschiedenen Rechnern installiert habt, verfügen also auch diese Installationen ab CC über die gleiche Versionsnummer. Die Voreinstellungen für Installationen auf verschiedenen Computern können daher nun synchronisiert werden.

Share on Behance

Behance als führende Kreativ-Plattform ist jetzt stark mit Photoshop CC verbunden. Dateien können direkt aus dem Programm in die Plattform geladen und so der Community vorgestellt werden. Insbesondere für Echtzeit-Rückmeldungen während des Designprozesses kann diese Verbindung sinnvoll sein.

Smart Schärfen-Werkzeug (Smart Sharpen)

Das Smart-Schärfen Werkzeug von Photoshop CC verwendet neue Algorithmen und ermöglicht so ein verbessertes Schärfen, ohne die hässlichen Nebeneffekte wie Bildrauschen oder Halo (leuchtende Kanten) zu erzeugen.

Camera Shake Reduction Tool

Das Camera Shake Reduction Tool entfernt Verwackelungseffekte in Fotos. Nach ersten Tests einiger Kollegen scheint das Tool zu funktionieren, allerdings wirklich gut nur bei sehr geringen Verwackelungen.

Camera RAW 8

Camera RAW 8 integriert neue, non-destruktive Werkzeuge. Neben einem Korrekturpinsel mit echter Pinselspitze (bisher gab es nur einen runden Punkt) sind das der Radial-Verlaufsfilter (Radial Filter) für Vignetten-Effekte und das Aufrichten-Werkzeug (Automatic Upright) zur Perspektiv-Korrektur.

Camera RAW-Korrekturen als Smartfilter

Die Korrektur-Funktionen von Camera RAW stehen jetzt auch in Photoshop zur Verfügung. Dank einer Smartfilter-ähnlichen Anwendung können die Korrekturen ein- und ausgeschaltet und nachträglich editiert werden.

Photoshop und Photoshop Extended verschmelzen zu einer Version, Creative Cloud Funktionen sind integriert

Bisher existierten mit Photoshop und Photoshop Extended zwei separate Programmversionen mit unterschiedlichem Funktionsumfang. Das ist mit Photoshop CC vorbei, es existiert nur noch eine Variante. Für Nutzer der bisher abgespeckten Version stehen somit jetzt die 3D-Werkzeuge und die Bildanalyse-Werkzeuge zur Verfügung.
Wer bisher Photoshop CS6 als Standalone-Lösung genutzt hat (also nicht in der Creative Cloud) kommt ab sofort in den Genuss der Cloud exklusiven Updates. Dazu gehören unter anderem die Weichzeichnungsfilter als Smart-Filter.

Links / Quellen

• Photoshop CC for Creative Cloud Members Coming Soon!
• Adobe TV zu Photoshop CC
• Adobe Blogs
• Photoshop auf Facebook
• Photoshop auf YouTube
• Photoshop auf Twitter

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mein neues Buch "Webdesign mit Photoshop CS6 und CSS3" ist ab sofort im Handel erhältlich. Da CSS3 mittlerweile große Teile der Webgestaltung abdeckt, habe ich das Buch sowohl auf die gestalterischen Aspekte in Photoshop, als auch auf die Arbeit mit CSS3 ausgerichtet. Auf über 320 Seiten findet ihr daher diverse praxisorientierte Workshops.

Ziel des Buches ist es, Techniken und Arbeitsweisen zu vermitteln, mit deren Hilfe moderne, performante und flexible Weblayouts möglich sind. Viele Workshops zeige ich sowohl in CSS3 als auch mit Hilfe von Photoshop, damit ihr bei einem späteren Projekt selbst entscheiden könnt, welche Lösung geeigneter ist.

Jetzt bestellen

Inhaltsverzeichnis

Photoshop effizient konfigurieren

• Voreinstellungen festlegen
• Werkzeuge und ihre Funktionen
• Arbeitsbereiche einrichten
• Bridge und Mini Bridge
• Neue Dokumente einrichten
• Non-destruktive Arbeitsweise
• Photoshop und CSS3

Briefing und Projektplanung

• Wahrnehmung
• Zielgruppe
• Konventionen

Farben gekonnt einsetzen

• Mögliche Farbprobleme
• Farbe und Wirkung
• Farbkontraste einsetzen
• Durchdachte Farbkonzepte
• Hilfreiche Tools im Umgang mit Farben

Layoutplanung und Scribble

• Größen im Webdesign
• Seitenaufbau
• Layouttypen
• Gestaltungsraster
• Multi­Screen­Design
• Grid­Systeme, Frameworks und Tools
• Gestaltungsraster des Beispielprojekts
• Das Projekt skizzieren
• Mock­ups und Wireframes
• Style Tiles
• Prototypen

Flächen und Linien aufwerten

• Farbflächen
• White Space
• Linien und Konturen
• Transparenz
• Farbflächen verbinden

Schatten und Spiegelung

• Spiegelungen und Schatten bei 2­D­Objekten
• Spiegelungen und Schatten bei 3­D­Objekten

Muster, Strukturen, Brushes

• Muster
• Grafiken mit CSS kacheln
• Kostenlose Pattern im Netz
• Pattern mit CSS3
• Skriptbasierte Muster in Photoshop CS6
• Strukturen
• Photoshop­Brushes
• Eigene Brushes

Navigationskonzepte umsetzen

• Navigationsstrukturen
• Darstellungsformen
• Navigation platzieren
• Navigation gestalten
• Interaktionen kennzeichnen
• Navigationsmuster im Responsive Design

Texte attraktiv gestalten

• Typografie im Internet

Fotos einsetzen und optimieren

• Nach Fotos googeln?
• Bedingungen der CC­Lizenz
• Fotos aus einem Stock­Archiv
• Bildausschnitt und ­ausrichtung
• Geeignete Bildformate festlegen
• Bilder mit Bedacht spiegeln
• Bilder per HTML5 einbinden
• Bilder fürs Web aufbereiten

Illustrationen, Icons, Animationen

• Zierelemente für mehr Atmosphäre
• Icons
• Favicons
• Apple Touch Icon
• Webfont­Icons
• Animationen erstellen

Grafiken fürs Web optimieren

• Der »Für Web speichern«­Dialog
• Dateiformate im Web
• Grafiken maximal komprimieren
• Slices
• CSS­Sprites
• Layout für die Webentwicklung vorbereiten

Jetzt bestellen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In Photoshop CS6 werden Vektoren, Pfade und Transformationen automatisch am Pixelraster ausgerichtet. Für Webdesigner ist das normalerweise sehr praktisch, denn am Raster ausgerichtete Vektoren sind immer scharf und erzeugen keine unschönen Kanten. Doch leider rasten die Vektoren und Pfade in CS6 auch dann am Pixelraster ein, wenn man in der Optionsleiste die Checkbox „Kanten ausrichten“ deaktiviert hat. Das führt zu einiger Verwirrung, wenn man Pfade absichtlich auf halben Pixel positionieren möchte.

Die Lösung für dieses „Problem“ findet sich in den Voreinstellungen. Unter „Voreinstellungen → Allgemein“ befindet sich die Checkbox „Vektorwerkzeuge und Transformationen am Pixelraster ausrichten“.

Sobald hier der Haken deaktiviert ist, können Pfade und Vektoren wieder auf halben Pixel positioniert werden. Vorausgesetzt in der Optionsleiste wurde „Kanten ausrichten“ ebenfalls deaktiviert. Andernfalls rundet Photoshop die Pfade auf glatte Pixel.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.

Was macht Enigma64?

Enigma64 exportiert einzelne Ebenen, Auswahlen oder ganze Dokumente mit nur einem Klick nach JPG, PNG und Base64. Zunächst werden der Pfad und die Kompressionsstufe angegeben, anschließend lassen sich die grafischen Elemente der Website viel schneller speichern als das bisher der Fall war. In Kombination mit CSS Hat stehen in Photoshop somit alle Export-Möglichkeiten zur Verfügung, die wir heute für die Web-Entwicklung brauchen:

• JPG – Enigma64
• PNG – Enigma64
• Base64-Code – Enigma64
• CSS3-Code – CSS Hat

PNG und JPG-Grafiken exportieren

Um Grafiken zu exportieren sind nur wenige Punkte zu beachten. Zunächst müsst ihr mit dem großen Button ganz oben bestimmen, dass Grafiken exportiert werden sollen. In den Einstellungen könnt ihr festlegen in welcher Kompression die JPG-Grafiken gespeichert werden sollen und ob es sich um progressive JPGs handeln soll.

Darüber hinaus könnt ihr bestimmen wohin die Grafiken gespeichert werden, und ob ihr den Namen der Ebene als Dateinamen verwenden wollt. Wenn ihr einen individuellen Dateinamen vergeben wollt, aktiviert einfach die entsprechende Checkbox. Ein Haken bei „Trim“ beschneidet die Grafik, sollte die Ebene kleiner sein als der ausgewählte Bereich.

Nun müsst ihr nur noch bestimmen ob ihr PNG- oder JPG-Grafiken erstellen wollt. Anschließend klickt ihr auf „Visible Canvas“ um die gesamte Bühne zu exportieren. Ihr könnt alternativ auch einfach eine oder mehrere Ebenen auswählen und über „Selected layers“ exportieren. In diesem Fall werden jedoch nicht mehrere Dateien erstellt, sondern ein Dokument mit dem sichtbaren Inhalt aller markierten Ebenen.
Wenn ihr lieber mit einer Auswahl arbeitet, markiert zunächst einen Bereich und klickt anschließend auf „Selection“. Hierbei wird der sichtbare Inhalt der Auswahl durch alle Ebenen hinweg kopiert.

Base64-Code exportieren

Wenn ihr Base64-Code exportieren wollt, müsst ihr den Bereich zunächst ganz oben aktivieren. Wählt aus welches Dateiformat (PNG, JPG) als Grundlage für den Base64-Code dienen soll, anschließend reicht ein Klick auf einen der Export-Buttons und der Code befindet sich in der Zwischenablage. Etwas verwirrend ist hier, dass ganz unten noch Optionen für den Bildexport angezeigt werden. Wurde in Version 1.1.0 behoben.

Die Vorteile von Base64 habe ich in meinem Artikel „Grafiken mit Data URIs (Base 64) erzeugen“ ausführlich erklärt.

Enigma 1.1.0

Enigma ist in Version 1.1.0 erschienen. Neben einigen Fehlerkorrekturen ist die wohl wichtigste Verbesserung der Export nach PNG8. In den Optionen kann zwischen PNG24 und PNG8 gewechselt werden. Alternativ reicht ein Klick auf die PNG-Schaltfläche um zwischen den beiden Varianten von PNG zu wechseln.

Videos zu Enigma64

Links / Quellen:

• Enigma64 – Offizielle Website
• Enigma64 Changelog

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Auch wenn der moderne Workflow nicht mehr so linear verläuft wie noch vor ein paar Jahren (Design → Coding), wird Photoshop für Webdesigner immer interessanter. Zwar werden mittlerweile viele Grafiken über CSS3 realisiert, doch gestalten lässt es sich in Photoshop einfach besser. Und seit dem neuesten Update exportiert Photoshop auch CSS-Code. Ich habe die neue Funktion den zwei bekannten Plugins CSS3PS und CSS Hat gegenübergestellt.

Ebenenstile als Grundlage

Ich möchte euch in diesem Beitrag drei Lösungen vorstellen, mit denen sich Photoshop-Grafiken in CSS3-Code umwandeln lassen. Die Grundlage aller drei Varianten sind Ebenen mit zugewiesenen Ebenenstilen. Damit ihr die Ergebnisse besser bewerten könnt, habe ich ein Beispiel vorbereitet, und zeige sowohl das Aussehen der CSS-Version (in Chrome), als auch den exportierten Code. Da sich Blendmodi mit CSS nicht simulieren lassen, habe ich auf solche Einstellungen verzichtet.

Beispiel-Ebene

Die Beispiel-Ebene sieht so aus. Ein Vektor-Objekt mit abgerundeten Ecken und einem Vektor-Verlauf, bei dem ich Vordergrund- und Hintergrundfarbe umgekehrt habe. Zusätzlich ein paar Ebenenstile für eine Kontur, einen Schein nach Innen und einen Schlagschatten.

Die Vektor-Funktionen stellen erschwerte Bedingungen dar. Um effektiv und zeitgemäß mit Photoshop CS6 arbeiten zu können, sind Vektoren jedoch unverzichtbar. Daher habe ich sie in die Beispielebene aufgenommen, auch wenn es sich hierbei nicht um einen Ebenenstil handelt.

CSS-Export für Photoshop CS6 (13.1)

Nutzer der Creative Cloud können sich freuen. Seit dem Update auf Version 13.1 bietet Photoshop einen integrierten CSS-Export für Ebenenstile. Mit einem Rechtsklick auf die entsprechende Ebene im Ebenen-Bedienfeld, erreicht ihr den Eintrag „CSS kopieren“.
Leider eignet sich die Funktion für komplexe Grafiken nicht. Das Ergebnis ist deutlich schlechter als ich erwartet hätte. Den umgekehrten Verlauf in den Vektor-Einstellungen hat Photoshop glatt übersehen, auch der Schein nach innen ist nicht umgesetzt.

CSS-Code von Photoshop

.Abgerundetes_Rechteck_1 {
  border-width: 0px;
  border-color: rgb( 255, 255, 255 );
  border-style: solid;
  border-style: solid;
  border-width: 3px;
  border-color: rgb( 0, 75, 131 );
  border-radius: 15px;
  background-image: -moz-linear-gradient( 90deg, rgb( 58, 167, 232 ) 0%, rgb( 21, 113, 184 ) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb( 58, 167, 232 ) 0%, rgb( 21, 113, 184 ) 100%);
  box-shadow: 0px 16px 18px 0px rgb( 48, 30, 5 );
  position: absolute;
  left: 63px;
  top: 46px;
  width: 420px;
  height: 119px;
  z-index: 2;
}

CSS3PS

Als nächstes schauen wir uns das kostenlose Plugin CSS3PS an. Da ich das Tool vor einiger Zeit bereits vorgestellt habe, verzichte ich hier auf Details. Den entsprechenden Artikel findet ihr hier: Photoshop-Ebenenstile als CSS3-Code exportieren: CSS3PS

Das Ergebnis entspricht leider auch nicht unserem Qualitätsanspruch. Der Vektor-Hintergrund wurde ignoriert, ansonsten sind jedoch alle Effekte vorhanden. Im Gegensatz zur Photoshop eigenen Funktion, hat das Plugin sogar den Schein nach Innen umgesetzt.

CSS-Code von CSS3PS

Abgerundetes Rechteck 1
{
	width: 426px;
	height: 125px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 0 16px 18px #301e05, inset 0 0 0 2px rgba(255,255,255,.17);
	-moz-box-shadow: 0 16px 18px #301e05, inset 0 0 0 2px rgba(255,255,255,.17);
	box-shadow: 0 16px 18px #301e05, inset 0 0 0 2px rgba(255,255,255,.17);
	border: solid 3px #004b83;
}

CSS Hat

Kommen wir zum letzten Plugin unserer kurzen Testreihe: CSS Hat. Das Plugin ist zwar nicht kostenlos ($29.99), bietet dafür aber auch ein eigenes Bedienfeld mit Einstellungsmöglichkeiten.
Neben der Art des Codes (CSS, LESS, SCSS, SASS, Stylus, Stylus CSS) könnt ihr festlegen, ob die Bezeichnung der Ebene als CSS-Klasse verwendet werden soll und ob die Abmessungen der Grafik mit aufgenommen werden sollen. Auf Wunsch können sogar Vendor-Präfixe hinzugefügt und Kommentare eingebunden werden.

Das Ergebnis ist deutlich besser als bei Photoshop und CSS3PS. Im Gegensatz zu beiden anderen Lösungen sieht das Element genau so aus wie in Photoshop. Ich setze CSS Hat übrigens selbst täglich ein und bin von diesem Plugin sehr überzeugt. Die 30 Euro sind gut angelegt und sollten bereits im ersten Projekt wieder erwirtschaftet worden sein.

CSS-Code von CSS Hat

Ich habe beim CSS-Export alle Einstellungen aktiviert.

.abgerundetes-rechteck-1 {
	width: 426px;
	height: 125px;
	border: 3px solid #004a83; /* stroke */
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	border-radius: 18px; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	-moz-box-shadow: 0 16px 18px rgba(48,30,5,.83), inset 0 0 0 2px rgba(255,255,255,.17); /* drop shadow and inner glow */
	-webkit-box-shadow: 0 16px 18px rgba(48,30,5,.83), inset 0 0 0 2px rgba(255,255,255,.17); /* drop shadow and inner glow */
	box-shadow: 0 16px 18px rgba(48,30,5,.83), inset 0 0 0 2px rgba(255,255,255,.17); /* drop shadow and inner glow */
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDQyNiAxMjUiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE1NzFiNyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhYTdlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNDI2IiBoZWlnaHQ9IjEyNSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* layer fill content */
	background-image: -moz-linear-gradient(bottom, #1571b7 0%, #3aa7e7 100%); /* layer fill content */
	background-image: -o-linear-gradient(bottom, #1571b7 0%, #3aa7e7 100%); /* layer fill content */
	background-image: -webkit-linear-gradient(bottom, #1571b7 0%, #3aa7e7 100%); /* layer fill content */
	background-image: linear-gradient(bottom, #1571b7 0%, #3aa7e7 100%); /* layer fill content */
}

Fazit

Ich hätte ehrlich gesagt nicht erwartet, dass das Ergebnis so eindeutig zugunsten von CSS Hat ausfällt. Ich bin zwar davon ausgegangen, dass CSS Hat den besten Code liefert, dass Photoshop jedoch so klar versagt, ist enttäuschend. Ich hoffe Adobe reicht hier zügig ein Update nach.
CSS3PS befindet sich im Mittelfeld, hat jedoch den großen Nachteil, dass die Ebenen mühsam hochgeladen werden müssen und das Vektoren nicht erkannt werden. Für Profis ist das Gratis-Plugin daher keine Alternative.

Links / Quellen

• CSS3PS
• Photoshop-Ebenenstile als CSS3-Code exportieren: CSS3PS
• CSS Hat
• Photoshop CS6 With Brand New “Copy CSS” Function – CSS Hat Blog

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Zugegeben – wenn man Photoshop nicht gerade zu Trainingszwecken einsetzt, muss man die Voreinstellungen wahrscheinlich eher selten zurücksetzen. Doch wenn es einmal soweit ist, beispielsweise weil das Programm unerwartet reagiert, ist es gut zu wissen wie es geht. Darüber hinaus könnt ihr mit der hier vorgestellten Methode die Voreinstellungen auch zwischen verschiedenen Rechnern austauschen. Die schnelle Variante funktioniert mit einem Tastaturkürzel.

Photoshop-Voreinstellungen per Shortcut resetten

Ihr könnt die Voreinstellungen über ein Tastaturkürzel zurücksetzen. Beachtet aber, dass ihr in diesem Fall kein Backup habt!
Beendet Photoshop und startet die Anwendung anschließend neu. Unmittelbar nachdem ihr das Icon angeklickt habt, müsst ihr jetzt unter OS XCmd + Alt + Umschalt und unter Windows Strg + Alt + Umschalt drücken. Es erscheint ein Systemdialog zur Bestätigung.

Sollte der Dialog nicht erscheinen, wart ihr zu langsam. In diesem Fall müsst ihr Photoshop beenden und es erneut versuchen.

Photoshop Voreinstellungen sichern, resetten und wiederherstellen

Wenn ihr ein Backup der Voreinstellungen sichern möchtet, solltet ihr die folgende Variante wählen. In allen beschriebenen Fällen sollte Photoshop zunächst geschlossen werden.

Vorgehensweise unter Mac OS X

Öffnet zunächst den Programmordner mit den Voreinstellungen. Ihr findet den Ordner unter Festplatte/Benutzer/[Benutzername]/Library/Preferences/Adobe Photoshop CS6 Settings/.

Verschiebt die Datei Adobe Photoshop CS6 Prefs.psp an einen sicheren Ort außerhalb des Verzeichnisses und startet das Programm anschließend. Photoshop startet nun mit den Standard-Einstellungen, und legt einen neue Datei mit Voreinstellungen an.

Wenn ihr die alten Voreinstellungen wiederherstellen möchtet, kopiert das Backup zurück ins Verzeichnis und überschreibt dort die neu angelegt Datei.

Vorgehensweise unter Windows 7

Öffnet zunächst den Programmordner mit den Voreinstellungen. Ihr findet den Ordner unter Festplatte\Users\AppData\Roaming\Adobe\Adobe Photoshop CS6\Adobe Photoshop CS6 Settings.

Verschiebt die Dateien Adobe Photoshop CS6 Prefs.psp und Adobe Photoshop X64 CS6Prefs.psp an einen sicheren Ort außerhalb des Verzeichnisses und startet das Programm anschließend. Photoshop startet nun mit den Standard-Einstellungen, und legt einen neue Datei mit Voreinstellungen an.

Wenn ihr die alten Voreinstellungen wiederherstellen möchtet, kopiert das Backup zurück ins Verzeichnis und überschreibt dort die neu angelegten Dateien.

Vorgehensweise unter Windows XP

Öffnet zunächst den Programmordner mit den Voreinstellungen. Ihr findet den Ordner unter Festplatte\Dokumente und Einstellungen\[Benutzername]\Anwendungsdaten\Adobe\Adobe Photoshop CS6\Adobe Photoshop CS6 Settings.

Verschiebt die Dateien Adobe Photoshop CS6 Prefs.psp und Adobe Photoshop X64 CS6Prefs.psp an einen sicheren Ort außerhalb des Verzeichnisses und startet das Programm anschließend. Photoshop startet nun mit den Standard-Einstellungen, und legt einen neue Datei mit Voreinstellungen an.

Wenn ihr die alten Voreinstellungen wiederherstellen möchtet, kopiert das Backup zurück ins Verzeichnis und überschreibt dort die neu angelegten Dateien.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Aufgrund vieler Nachfragen habe ich ein Video zum Thema Absatz- und Zeichenformate von PS CS6 erstellt. In diesem Screencast zeige ich euch wie ihr die Formate einsetzen könnt, und wie ihr häufige Probleme im Umgang mit diesen Werkzeugen vermeidet. Da insbesondere die Export-Funktion häufig angefragt wurde, gehe in diesem Zusammenhang auch auf den Export/Import von Absatzformaten ein. Ich hoffe das Video hilft euch weiter, dieses wirklich hilfreiche Werkzeug endlich auch produktiv zu nutzen

Absatz- und Zeichenformate in Photoshop CS6

In diesem Video zeige ich anhand eines Beispiel-Dokuments, wie ihr Absatzformate/Zeichenformate anlegt und verschiedenen Textelementen zuweist. Wichtig ist dabei vor allem, dass ihr den Basisabsatz von Photoshop nicht mit individuellen Einstellungen überschreibt und Formate nicht versehentlich auf gesamte Ebenen anwendet.

Probleme im Umgang mit Absatzformaten vermeiden

Die Absatz- und Zeichenformate reagieren häufig anders als erwünscht. Wenn ihr euch über ein bestimmtes Verhalten wundert, prüft ob einer der folgenden Lösungsvorschläge das Problem behebt:

• Ist das Format auf zuvor formatierten Text angewendet worden? Wenn ja: Überschreibung löschen
• War die gesamte Textebene aktiv? Wenn ja, wirkt sich ein zugewiesenes Format auf alle Texte dieser Ebene aus

Photoshop CS6: Absatzformate exportieren

Wenn ihr Absatzformate exportieren möchtet, so speichert einfach die gesamte Photoshop-Datei. Absatzformate werden in Form einer PSD importiert, ein eigenes Format existiert nicht.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Smartfilter von Photoshop arbeiten non-destruktiv und sollten daher den normalen Filtern in den meisten Fällen vorgezogen werden. Wendet ihr einen Filter auf ein Smartobjekt an, wird automatisch ein sog. Smartfilter erstellt. Ein Smartfilter hat den Vorteil, dass ihr sowohl das Originalbild, als auch alle Filtereigenschaften im Nachhinein noch verändern oder deaktivieren könnt. Ihr arbeitet also verlustfrei und i.d.R. auch effizienter. Mit folgendem Shortcut könnt ihr Smartfilter zwischen Ebenen verschieben oder kopieren.

Smartfilter per Drag & Drop verschieben oder kopieren

Um einen Smartfilter zu verschieben zeiht ihr den Filter einfach per Drag & Drop von einer Ebene auf eine andere Ebene. Die Ziel-Ebene muss natürlich ebenfalls ein Smartobjekt sein, ansonsten funktioniert es nicht.
Um ein Smartobjekt zu kopieren, drückt ihr Alt und zieht den Filter anschließend auf die Ziel-Ebene.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn die gestalterische Arbeit in Photoshop abgeschlossen ist, muss das Design für die Entwicklung aufbereitet werden. Es werden Hilfslinien aufgezogen, Auswahlen erstellt und die gewünschten Grafiken Stück für Stück exportiert. Viele grafische Bestandteile werden zwar längst über CSS3 realisiert, dennoch ist die Aufbereitung eines Layouts ein Stück Arbeit. Das Photoshop CS6-Plugin „Cut & Slice Me“ automatisiert diesen Arbeitsschritt.

Photoshop-Dokumente für Android, iOS & Co.

Das Plugin arbeitet auf Basis des Ebenen-Bedienfeldes. Ihr könnt gezielt auswählen welche Ebenen und/oder Ordner exportiert werden sollen. Darüber hinaus orientiert sich das Plugin an den Namen der Ebenen und benennt die exportierten Grafiken entsprechend. Wurde die Photoshop-Datei in der richtigen Größe angelegt, exportiert Cut & Slice me sogar "Retina-Ready".

Besonders interessant sind auch die verschiedenen Export-Regeln die ihr anwenden könnt. Über einen Suffix im Ebenen-Namen könnt ihr das Plugin noch genauer steuern. Fügt ihr beispielsweise ein @-Zeichen ans Ende des Ebenen-Namens, wird die Ebene beschnitten, als PNG exportiert und alle transparenten Pixel gelöscht. Der Suffix _BTN exportiert eine Gruppe inklusive der verschiedenen Zustände der Schaltfläche.

Links zum Thema / Quellen

• Cut & Slice Me
• via: Impressive Photoshop Plugin For Exporting Layers Smartly – Cut&Slice me

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Smartobjekte von Photoshop sind meist eine große Hilfe, doch ab und zu sind sie lästig. Wenn ihr beispielsweise ein Pixelbild in einem anderen Dokument platzieren wollt, konvertiert Photoshop die Grafik zunächst in ein Smartobjekt, und skaliert sie anschließend auf die Größe der Arbeitsfläche. Das kann praktisch sein, muss aber nicht. Zum Glück könnt ihr das Verhalten beeinflussen.

Voreinstellungen anpassen

In den Voreinstellungen von Photoshop findet ihr zwei Punkte die in diesem Zusammenhang wichtig sind. Unter „Voreinstellungen → Allgemein“ gibt es eine Liste von Optionen. Hier könnt ihr folgende Einstellungen festlegen:

Bild beim Platzieren skalieren

Legt fest, ob die Größe von Bildern beim Platzieren angepasst wird

Rasterbilder als Smartobjekt ablegen oder ziehen

Bestimmt, ob beim Platzieren eines Rasterbilds in einem Dokument ein Smartobjekt erstellt wird. Gilt nicht für die Platzierung von Vektor- oder Videodateien.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ein stimmiges Farbkonzept ist entscheidend für den Erfolg einer Website. Farben transportieren Emotionen und werden unmittelbar und unterbewusst wahrgenommen. Es lohnt sich also hier etwas Zeit zu investieren um auch die richtigen Emotionen in der Zielgruppe zu erzeugen. In diesem Video zeige ich euch wie Ihr mit Hilfe von Adobe kuler ein Farbkonzept entwickeln könnt. Darüber hinaus erstellen wir ein zweites Farbkonzept auf Grundlage eines Fotos.

Videos

Beschreibung von Galileo Press: Wenn Sie das Farbkonzept von Text und Bild optimal aufeinander abstimmen, wirkt Ihr Design bereits viel ansprechender und hochwertiger. Der Profi-Designer Jonas Hellwig zeigt Ihnen in dieser neuen Folge der »Photoshop-Profis«, wie Sie mithilfe von Photoshop und Adobe Kuler ein eigenes Farbschema für Ihre Designs entwerfen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In einem meiner letzten Photoshop-Seminare in Bremen haben wir zwei verschiedene Probleme im Umgang mit Photoshop diskutiert. Einerseits arbeiten Webdesigner immer im RGB-Modus und müssen daher häufig GIFs oder PNGs konvertieren um die Grafik bearbeiten zu können. Andererseits kommt es regelmäßig vor, dass Ebenenkompositionen versehentlich zerstört werden. Der große (und in meinen Augen völlig unterschätzte) Vorteil von Ebenenkompositionen geht dadurch natürlich verloren.
Helge Meinhold, Team Manager Content Production bei der Bremer Web-Agentur hmmh war so nett ein Photoshop-Script zu schreiben, das diese Probleme löst.

Funktion 1 - Umwandlung in den RGB-Modus

Das Script prüft anhand der Dateiendung, ob es sich um eine PNG oder GIF-Datei handelt. Ist das der Fall, wird das Bild automatisch in den RGB-Modus umgewandelt. Der Arbeitsschritt taucht im Protokoll auf und kann daher auch rückgängig gemacht werden.

Funktion 2 – Warnung bei Ebenenkompositionen

Das Script prüft ob Ebenenkompositionen im Dokument eingebettet wurden. Sobald eine Ebenenkomposition gefunden wurde, wird eine Warnmeldung ausgegeben. Ein Entwickler, der beispielsweise eine Photoshop-Datei von einem Kollegen bekommt, ist also gewarnt.

Script aktivieren

Das Script wird über den Script-Ereignis-Manager von Photoshop aktiviert. Unter „Datei → Skripten → Skript-Ereignis-Manager“ nehmt ihr dazu folgende Einstellungen vor.

Anschließend klickt ihr auf „hinzufügen“ um das neue Skriptereignis zu aktivieren. Wenn ihr euch detailliert mit dem Skriptereignismanager von Photoshop befassen wollt, schaut euch auch meinen Einführungsartikel zu diesem Thema an.

Noch einmal vielen Dank an Helge, der das Skript geschrieben und für uns zur Verfügung gestellt hat.

Photoshop-Script herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Es gibt Fragen die polarisieren. Apple oder Samsung? Coke oder Pepsi? Fireworks oder Photoshop? Oder vielleicht doch lieber InDesign? Ich bin der Meinung, man sollte das Tool nutzen, in dem man sich am wohlsten fühlt. Unabhängig davon ob das Programm ursprünglich für den Einsatz im Webdesign gedacht war und vorausgesetzt, dass die Qualität des Projekts nicht leidet. Doch warum schwören einige Webdesigner auf Photoshop und andere auf InDesign, Illustrator oder Fireworks? Ich habe die Webdesigner Ivo Mynttinen, David Hellmann und Christian Seitz gefragt und interessante Antworten erhalten. 

Bitte stelle dich unseren Lesern kurz vor und erzähle uns welche Art von Projekt du normalerweise bearbeitest

Ivo Mynttinen

Ich bin ein 20-jähriger User Interface Designer. Momentan wohne ich in Nürnberg. Seit etwa einem halben Jahr bin ich selbständig und entwerfe für meine Kunden (meist Startups aus der Bay-Area) innovative Designkonzepte für Webapps, Mac Apps und iOS Apps. Seitdem ich 15 bin experimentiere ich mit (damals noch Macromedia) Fireworks und konnte mir so ein sehr solides Wissen über mein favorisiertes Design-Tool, sowie einige andere Programme der Creative Suite aneignen.

David Hellmann

Ahoi! Ja namentlich nennt man mich David Hellmann und sonst bin ich im anonymen Internet meist unter dem Namem: davidhellmann zu finden! Wenn ich nicht vor einem Bildschirm sitze fahre ich oft ein wenig Rad. Früher BMX heute dann eher MTB.

Meistens gestalte ich Websites was für mich heißt, dass ich in Photoshop gestalte und teilweise später auch noch den HTML/CSS Part mit übernehme. Kommt aber immer auf das einzelne Projekte an. Eines meiner letzten Freelance Projekte war Deutsches Obst und Gemüse wo ich für den Designpart verantwortlich war: www.deutsches-obst-und-gemuese.de

Nett oder? :)

Christian Seitz

Hallo, ich heiße Christian Seitz und arbeite als freiberuflicher Grafik-Designer für Digital- und Printmedien. Mein Schwerpunkt liegt dabei auf umfangreicheren Publikationen wie Katalogen oder Magazinen im Printbereich. Nebenbei blogge ich auf herrseitz.de über Themen rund um Fotografie, Mountainbike, Skifahren und Workflows aus dem Mac-User-Alltag.

Hast du einen bestimmten gestalterischen Stil? Inwiefern unterstützt dich „dein“ Programm dabei?

Ivo Mynttinen

Wer ein wenig Zeit damit verbringt, sich meine Arbeiten auf meinem Portfolio anzusehen, wird schnell feststellen, dass ich stark darauf achte, Benutzeroberflächen sauber und einfach zu gestalten. Gerne verliere ich mich jedoch auch in Details, die sehr häufig das „gewisse Extra“ meiner Arbeiten ausmachen. Auch wenn es sich stark nach einem Klischee anhört, inspirieren mich die Designs von Apple, allerdings auch Arbeiten von Agenturen wie z.B. MetaLab oder Softfacade.

Fireworks bietet mir genügend Möglichkeiten, um solide Designs zu erstellen, eignet sich aber auch hervorragend dafür, mal eben ein erweitertes Mockup zu erstellen. Den größten Vorteil von Fireworks sehe ich allerdings darin, dass ich persönlich damit extrem viel Zeit sparen kann - gerade weil hier viele Dinge einfach anders angegangen werden als z.B. mit Photoshop.

David Hellmann

Ich glaube der ändert sich immer mal bzw. hängt auch das stark vom Projekt/Kunde ab. Da ich ja wie oben schon erwähnt Photoshop als MEIN Programm sehe kann ich nur sagen das ich mit Photoshop immer das Gefühl habe alles machen zu können. Egal ob clean oder verspielt. Ich finde in Photoshop einen weg. Bei anderen Programmen kam mir das nicht so vor. (Die gelbe Hölle!!! :)

Es wird nicht grundlos sein, dass wohl die meisten mit Photoshop arbeiten, oder?

Christian Seitz

Wenn mich das Briefing nicht in eine bestimmte stilistische Richtung lenkt, bin ich ein Fan von klarer, reduzierter und funktionaler Gestaltung, die durch gute Typographie, stimmige Proportionen und einem klaren Ordnungssystem – am Besten mit viel Weißraum – überzeugt.

Mein Programm der Wahl ist Adobe InDesign. Es kommt mir durch die Möglichkeit der einfachen Einrichtung auch komplexerer Rastersysteme in horizontaler als auch vertikaler Richtung entgegen. Ich weiß, dass ist nichts weltbewegendes und schon lange vorhanden, aber ich finde es immer wieder hilfreich beim Aufbau neuer Layouts. Überhaupt bin ich ein Fan des numerischen Gestaltens, sprich viele Objekte werden mit Hilfe der Koordinaten/Transformieren-Palette final platziert.

Wie ist es dazu gekommen, dass du dieses Programm nutzt?

Ivo Mynttinen

Fireworks war das erste „Bildbearbeitungs“-Programm, was mir in die Hände kam. Bereits nach den ersten Stunden konnte ich für damalige Verhältnisse gute Ergebnisse erzielen. Gerade die steile Lernkurve ist wohl einer der Gründe, weshalb ich nach wie vor Fireworks-Nutzer bin.

David Hellmann

Gruppenzwang! Klarer Fall. Ganz früher hatte ich noch PaintShop Pro 7 wenn ich mich recht erinnere. War eigentlich auch ganz cool. Aber sind wir ehrlich. Man kommt an Adobe Sachen einfach nicht vorbei im professionellen Umfeld. Und da Photoshop halt verbreiteter ist als andere Sachen bin ich schlussendlich auch dort gelandet. Bereut habe ich es nicht.

Christian Seitz

Ich arbeite am Liebsten mit Programmen, die ich gut und schnell und vor allem aus dem FF bedienen kann. Das ist bei mir mit InDesign der Fall. Meist muss es ja im Job schnell gehen und da finde ich das Umdenken von InDesign nach Photoshop – vor dem Hintergrund des Entwerfens und mit Deadlines im Nacken – eher störend.

Deshalb bin ich mehr froh als skeptisch, dass Adobe die Software immer mehr zum crossmedialen Layoutwerkzeug ausbaut. Kommt mir entgegen. Sehr.

Bezogen auf Webdesign - was sind für dich die Vorteile des Programms?

Ivo Mynttinen

Die Möglichkeit, alle Seiten eines Projekts unkompliziert in einer Datei zu bearbeiten und die Tatsache, dass in Fireworks fast ausschließlich mit Vektor-Elementen gearbeitet wird.

Ein weiterer Vorteil ist, dass Benutzeroberflächen für unterschiedliche Auflösungen (z.B. iPhone und iPad Apps) fast ohne nachträgliches Verbessern von Details skaliert werden können. Außerdem sagen mir die Layer-Styles sehr zu, welche sich 1:1 zu CSS3 konvertieren lassen.

David Hellmann

Wie oben geschrieben habe ich einfach das Gefühl an keine Grenzen zu stoßen bei dem was ich mache. Das ist für mich wichtig. Ein anderer wichtiger Punkt ist, dass ich mich wohl fühle mit dem Programm. Auch ich hatte das ein oder andere mal schon Fireworks auf, aber kam damit einfach nicht wirklich zurecht. Vielleicht auch eine Sache der Gewöhnung aber wer weiß, vielleicht sind wir auch einfach nicht für einander gemacht :)

Christian Seitz

Am Besten finde ich, mehrere Seiten mit unterschiedlichen Größen in einem Dokument anlegen zu können und bei einem Wechseln zwischen Print und Online nicht umdenken zu müssen.

Welche Webdesign-Aufgaben bewältigt das Programm nicht optimal?

Ivo Mynttinen

Sobald es darum geht, aufwendigere Illustrationen zu erstellen, ist man mit Photoshop eindeutig besser dran. Ich bin der Meinung, dass man mit Fireworks absolut alles machen kann, was auch in Photoshop geht - nur steigt der Aufwand enorm, wenn man beispielsweise detaillierte Icons erstellen möchte.

David Hellmann

Es sind eher so Kleinigkeiten… Die fehlende Möglichkeit, dass man den Eckradius von Vektor-Objekten nicht nachträglich ändern kann. Das sind zwar Kleinigkeiten, würden aber oft großes bewirken. Etwas sehr gutes gibt es seit CS6 ja nun endlich "Pixel Snapping"!!! :) Letztendlich wird jedes Programm immer irgendwelche Schwächen haben bzw. Sachen die man als nicht optimal empfindet. Aber das ist ja völlig normal.

Christian Seitz

Ich finde, den Export von Grafiken für die Umsetzung könnte man noch optimieren.

Was stört dich an anderen Programmen?

Ivo Mynttinen

Die direkte Konkurrenz Photoshop ist mir zu unflexibel und zu aufwendig. Sketch 2, ein relativ neues Programm, welches Fireworks sehr nahe kommt aber erfrischende Konzepte mit einbringt, die man in einem Adobe Programm wohl niemals erwarten darf, ist mir momentan noch zu instabil.
Eventuell werde ich, sobald sich das geändert hat, dennoch den Schritt gehen von Fireworks zu Sketch zu wechseln.

David Hellmann

Stören direkt nichts. Ich finde einfach ich hab mich nie damit wohl gefühlt wenn ich es genutzt habe. In Photoshop arbeitet man ja viel mit Ebenen in Fireworks sind diese zwar auch da aber haben da nicht so den Stellenwert wie in Photoshop. Klar, ein Fireworks Mensch der zu Photoshop kommt wird wohl das gleiche anders herum sagen. Für mich gibt es aktuell einfach keinen Grund auf ein anderes Programm zu wechseln.

Ach was mich bei Fireworks immer aufgeregt hat war, dass man die Werte (Breite einer Box z.B.) nicht mit den Pfeiltasten ändern konnte sondern immer tippen musste :)

Christian Seitz

Wie oben schon erwähnt, stört mich in erster Linie das Umdenken in der Bedienung. Wobei ich bei „anderen Programmen“ an Photoshop, Fireworks oder Illustrator denke. InDesign arbeitet objektorientiert, Photoshop eher ebenenorientiert. Hat beides seine Daseinsberechtigung. Aber ich kann – und hab's auch nicht wirklich intensiv probiert – auf Ebenenbasis nicht gestalten.

Illustrator ist InDesign noch am ähnlichsten – deshalb komm ich damit wahrscheinlich auch prima klar.

Zu Fireworks kann nicht besonders viel sagen. Hab ich nur mal oberflächlich probiert.

Nutzt du ergänzende Plugins, Tools oder andere Programme für die Erstellung deiner Designs? Wenn ja in welchen Bereichen?

Ivo Mynttinen

Ich verwende keine zusätzlichen Plugins. Für diverse Aufgaben nutze ich natürlich Photoshop und selten auch Illustrator.

David Hellmann

Photoshop Plugins:

• GuideGuide! Einfach genial!
• DevRocket ist auch ganz nett.
• Bjango Aktionen

Andere Apps:

• Pochade, ein globaler Colorpicker der sich in der Menüleister versteckt. Ist super!
• WhatFont: Super Chrome Plugin

Christian Seitz

Ja. Ich verwende zwar InDesign für die Layoutarbeit, aber ergänzenden Aufgaben, beispielsweise das Entwickeln von Buttons, Schriftzügen oder Icons mach' ich in Illustrator.
Bilder bearbeite, retuschiere oder optimiere ich in Photoshop und Text für Webseiten schreibe ich in iA Writer. In InDesign wird das dann alles vermixert. ;-)

Welche Features würden deinen Webdesign-Workflow beschleunigen? Was wünschst du dir für kommende Programmversionen?

Ivo Mynttinen

Mehr Stabilität, eine überarbeitete Benutzeroberfläche, bessere Gesten-Unterstützung sowie Optimierungen für Retina Screens wären ein Anfang. Leider hielt sich Adobe bei den letzten Major-Updates mit neuen Features immer stark zurück, weshalb ich relativ wenig Hoffnung habe, all diese Features in der nächsten Version zu sehen.

David Hellmann

• Die Möglichkeit Eckradien nachträglich zu ändern für Vektorobjekte.
• Eine Art Bibliothek in Photoshop wäre auch ganz cool denke ich. Sowas wie es in Flash gibt in der Art.
• Cloudsync für die Settings. Das wäre toll :) Auch das Mustern, Pinsel etc. alles in der Cloud abgelegt wird und man überall das gleiche findet.

Christian Seitz

Schwierige Frage. Ich komm' so eigentlich ganz gut zurecht. Was ich verbessern würde, wäre eventuell die Farbpalette bzw. das Farbraum-Management. Man kann im Moment noch ganz leicht RGB und CMYK Farben vermischen, was ich weder im Webdesign noch bei Print-Projekten sinnvoll finde. Die Exportfunktion für Grafiken würde ich verbessern oder sogar eine Slice-Funktion einführen.

Weitere Features würde ich mich im Moment gar nicht fordern trauen, da ich mich noch nicht mal richtig mit den ganzen neuen Features von InDesign CS6 auseinander gesetzt habe – ausgenommen die PDF-Formularfunktion. Die find ich schon erste Sahne. ;-)

Zum Thema

• A Real Web Design Application
• Creating Wireframes And Prototypes With InDesign – Smashing Magazine
• Infografik zur Kategorisierung der Adobe-Produkte - Interessant ist, dass Adobe sowohl Photoshop als auch Fireworks unter "Bildbearbeitung" einsortiert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Auch wenn viele Webdesigner jetzt laut aufschreien werden, InDesign wird für Web-Layouts häufiger eingesetzt als manch einer vielleicht glauben mag. Ich möchte jetzt nicht die Vor- und Nachteile von InDesign im Webdesign diskutieren, ich möchte all jenen, die InDesign im Umfeld Webdesign einsetzen, ein praktisches Hilfsmittel vorstellen. Das folgende Script wandelt InDesign-Dokumente in PSDs um.

Ich wage jetzt die Behauptung, dass Webdesigner die InDesign als Layoutprogramm verwenden ihre Wurzeln für gewöhnlich im Print-Bereich haben. Bei solch klassischen Screendesignern wird häufig ein Webentwickler die Layouts technisch umsetzen. Für diesen Entwickler ist InDesign jedoch genauso fremd wie der HTML-Code für den Screendesigner. Daher wird häufig Photoshop als Zwischenformat eingesetzt.
Mit dem InDesign-Script „PageToPSLayers“ exportiert ihr alle Ebenen des Dokuments in eine neue Photoshop-Datei. In der PSD werden anschließend alle Ebenen korrekt angezeigt und benannt. Textebenen werden allerdings gerastert – evtl. muss also noch ein wenig manuell nachgebessert werden.

InDesign-Script herunterladen und installieren

Ladet zunächst das InDesign-Script hier herunter und kopiert die Datei in den Script-Ordner: Programme → Adobe InDesign → Scripts → Scripts Panel.

Startet nun InDesign einmal neu. Anschließend findet ihr das neue Script unter „Fenster → Hilfsprogramme → Scripte“ im Ordner „Anwendung“.

*.indd in *.psd konvertieren

Schließt alle geöffneten Photoshop-Dokumente und öffnet das InDesign-Dokument. In InDesign doppelklickt ihr nun das Script. Ihr werdet gefragt wo das Dokument gespeichert werden soll und könnt einige Export-Einstellungen festlegen. Anschließend öffnet sich eine neue Photoshop-Datei mit den entsprechenden Inhalten. Je nach Umfang des Dokuments dauert es einen Moment bis alle Ebenen konvertiert wurden.

Das Script habe ich auf provisorium.tumbler.com entdeckt. Der Tipp dazu kam von medien[plan]tage. Vielen Dank!

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Bei der Programmierung einer Website lagert man identische Seitenelemente, also beispielsweise den Header oder die Hauptnavigation, in separate Dateien aus. Anschließend verknüpft man die verschiedenen Dokumente untereinander. Diese Vorgehensweise hat den Vorteil, dass Änderungen immer nur an einer Stelle vorgenommen werden müssen. Das geht schneller und minimiert gleichzeitig das Risiko einen Bereich beim Update zu übersehen.
Das Plugin „Can Link It“ erweitert Photoshop um die Möglichkeit externe Dokumente zu inkludieren. Eine Funktion die Smartobjekte eigentlich schon bieten sollten.

Installation

Das Plugin kann unter canlinkit.com heruntergeladen und über den Adobe Extention Manager installiert werden. Anschließend findet ihr das neue Bedienfeld unter „Fenster → Erweiterungen → Can Link It“.

Externe Photoshop-Dokumente einbinden

Um das Plugin verwenden zu können, muss die Photoshop-Datei zunächst abgespeichert werden. Anschließend kann über den Button „New Link“ ein externes Dokument ausgewählt und in die bestehende Datei importiert werden. Die Ebenen werden dazu in einem Smartobjekt zusammengefasst.
Nun könnt ihr Änderungen an der verknüpften Datei vornehmen und das Dokument wie gewohnt speichern. In der Hauptdatei wählt ihr anschließend das Smartobjekt aus, öffnet das Can Link It-Bedienfeld und klickt auf „Update“. Photoshop arbeitet einen Augenblick und die Ansichten sind aktualisiert. Es ist auch möglich ganze Ordner auf einmal zu aktualisieren.

Video-Tutorial: Can Link It

In diesem Video zeige ich euch anhand einer simplen Demo-Website, wie ihr eine externe Header.psd in zwei Inhaltsseiten inkludiert. Die beiden Inhaltsseiten sind anschließend von der ausgelagerten Datei abhängig und werden nach einer Änderung am Header aktualisiert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit Photoshop lassen sich verschiedene Arten von Animationen herstellen. Eine davon ist die sog. Frame-Animation, in der verschiedene Einzelbilder nacheinander abgespielt werden. In diesem Video-Tutorial zeige ich euch am Beispiel eines Ladebalkens, wie ihr das Grundobjekt gestaltet und anschließend mit Hilfe der Photoshop-Zeitleiste animiert. Das Ergebnis speichern wir als GIF-Animation ab.

Dieses Video ist ein Auszug aus dem Training »Webdesign mit Photoshop« von Galileo Press und wurde auf Photoshop Profis veröffentlicht.

In dieser neuen Folge der »Photoshop-Profis« zeigt Ihnen Jonas Hellwig, wie Sie einen Ladevorgang ansprechend visualisieren können. Bei der Animation des Fortschrittbalkens hilft Ihnen die neue Zeitleiste in Photoshop CS6. Den Ladebalken selber können Sie über Ebenenstile plastisch gestalten und zum Leuchten bringen. Naürlich zeigt Ihnen der Profi auch, wie Sie die Animation als GIF speichern.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wer kreativ arbeitet, probiert aus, nimmt häufig Korrekturen und Anpassungen vor und verwirft die Entscheidungen evtl. einen Tag später wieder. Um trotz des sprunghaften Ablaufs effektiv zu sein, sollte man möglichst wenig Pixel unwiederbringlich zerstören. Korrekturen lassen sich nur so schnell und unkompliziert vornehmen. Dieses Prinzip nennt sich non-destruktives oder verlustfreies Arbeiten und ist die Basis eines professionellen Workflows. Mit jeder Photoshop-Version kommen neue verlustfreie Methoden hinzu. In diesem Beitrag möchte ich euch die wichtigsten Techniken vorstellen.

Inhaltsverzeichnis

Ich behandle in diesem Artikel folgende verlustfreie Techniken

• Einstellungsebenen, Füllebenen & Korrekturen
• Smartobjekte
• Smart-Filter
• 50% Grauebenen / neutrale Ebenen
• Ebenenmasken
• Ebenenstile & Stile

Einstellungsebenen, Füllebenen & Korrekturen

Der Klassiker unter den non-destruktiven Methoden ist die Einstellungs- oder Füllebene. In neuen Photoshop-Versionen werden Einstellungsebenen auch als „Korrektur“ bezeichnet und in einem entsprechenden Bedienfeld zusammengefasst.

Mit einer Einstellungsebene könnt ihr Bildkorrekturen vornehmen und diese Korrekturen auch im Nachhinein noch verändern oder deaktivieren. Es gibt Einstellungsebenen für folgende Anpassungen (Stand: CS6):

• Helligkeit / Kontrast
• Tonwertkorrektur
• Gradationskurve
• Belichtung
• Dynamik
• Farbton / Sättigung
• Farbbalance
• Schwarz / Weiß
• Fotofilter
• Kanalmixer
• Color-Lookup
• Umkehren
• Tonwerttrennung
• Schwellenwert
• Verlaufumsetzung
• Selektive Farbkorrektur

Als Füllebenen stehen folgende Möglichkeiten zur Auswahl (Stand: CS6):

• Farbfläche
• Verlauf
• Muster

Einstellungsebenen erzeugen

Eine neue Einstellungsebene/Korrektur lässt sich auf verschiedene Arten erzeugen:

• Über „Ebene → Neue Einstellungsebene“
• Über das Icon „neue Füll- oder Einstellungsebene“ im Fuß des Ebenen-Bedienfeldes
• Über das Bedienfeld „Korrekturen“

Sobald ihr eine Korrekturebene hinzugefügt habt, könnt ihr im Bedienfeld „Eigenschaften“ entsprechende Anpassungen vornehmen. Im Ebenen-Bedienfeld werden die Korrekturen als separate Ebene angezeigt und wirken sich auf alle darunterliegenden Ebenen aus. Damit sich eine Einstellungsebene nur auf die darunterliegende Ebene auswirkt, müsst ihr eine Schnittmaske erstellen.

Korrekturen automatisch als Schnittmaske hinzufügen

Klickt auf den kleinen Pfeil oben rechts im Korrekturen-Bedienfeld. Anschließend könnt ihr auswählen, dass neue Korrekturen automatisch als Schnittmaske hinzugefügt werden. (Menüpunkt: Auf Ebene beschränken). Ihr könnt auch festlegen, dass automatisch eine Maske hinzugefügt wird (Menüpunkt: Standardmäßig Maske hinzufügen).

Smartobjekte

Smartobjekte gehören zu den mächtigsten Werkzeugen von Photoshop. Ein Smartobjekt erleichtert verschiedene Bereiche der Bildbearbeitung und hilft gleichzeitig bei der non-destruktiven Arbeit.
Ein Smartobjekt dient als Container-Element für eine einzelne Ebene oder eine Gruppe von Ebenen. Wenn ihr eine Ebene/eine Gruppe in ein Smartobjekt umwandelt, merkt sich Photoshop alle Daten, die zu diesem Zeitpunkt vorhanden waren und fasst sie im Smartobjekt zusammen. Das Smartobjekt könnt ihr nun bearbeiten, ohne dass dies Auswirkungen auf die enthaltenen Elemente hat. Ihr könnt das Objekt also beispielsweise beliebig oft skalieren, ohne dass Qualität verloren geht.
Ob es sich bei einer Ebene um ein Smartobjekt handelt, erkennt ihr an dem Icon der Ebene.

Smartobjekte erzeugen

Um ein Smartobjekt zu erzeugen, wählt in der Ebenenpalette zunächst die Ebene(n)/Gruppe(n) aus, die ihr umwandeln wollt. Anschließend wählt ihr eine der folgenden Optionen:

• Macht einen Rechtsklick in die Auswahl des Ebenenbedienfeldes und wählt dann „In Smartobjekt konvertieren“.
• Wählt „Filter → Für Smartfilter konvertieren“
• Wählt „Ebene → Smartobjekte → In Smartobjekt konvertieren“

Wenn ihr Bilder per Drag and Drop in Photoshop hineinzieht, erzeugt Photoshop i.d.R. automatisch ein Smartobjekt.

Smartobjekte verschachteln

Wenn ihr mehrere Objekte in einem Smartobjekt zusammengefasst habt, könnt ihr über einen Doppelklick auf das Icon in der Ebenenpalette das Smartobjekt „betreten“. Das Smartobjekt wird dabei in einer neuen Datei geöffnet, die im *.psb-Dateiformat (Photoshop-Big) erstellt wird. Innerhalb der Datei seht ihr nun alle Ebenen und könnt wie gewohnt Anpassungen vornehmen. Smartobjekte können auch mehrmals verschachtelt werden.

Instanzen von Smartobjekten erstellen

Wenn ihr ein Smartobjekt kopiert und anschließend über einen Doppelklick den Inhalt eines der Smartobjekts verändert, wirkt sich diese Änderung auf alle Smartobjekte aus, die von der Ursprungsquelle abhängig sind.
Ein Beispiel: Ihr erstellt einen Button für eure Website. Sobald ihr mit der Gestaltung des Buttons zufrieden seid, fasst ihr alle „Button-Ebenen“ in einem Smartobjekt zusammen. Anschließend erstellt ihr Kopien des Buttons und platziert diese im Layout. Nun möchtet ihr später den Button verändern. Dazu müsst ihr dank Smartobjekt nicht jeden Button einzeln anpassen, sondern nur den Inhalt eines Button-Objektes. Die Veränderungen wirken sich auf alle Buttons aus.

Inhalte von Smartobjekten ersetzen

Wenn ihr euch innerhalb eines Smartobjekts befindet, könnt ihr das Dokument wie gewohnt speichern. Dabei bietet Photoshop standardmäßig das *.psb (Photoshop Big) Dokumentformat für große Dateien an. Ihr könnt das Smartobjekt allerdings auch als *.psd abspeichern. Wenn ihr jetzt Änderungen am Smartobjekt vornehmt und speichert, aktualisiert Photoshop nicht mehr automatisch die abhängigen Dateien. Um die Ansicht zu aktualisieren, müsst ihr in das Dokument wechseln in dem das Smartobjekt eingebunden ist. Über einen Rechtsklick auf das Smartobjekt im Ebenenbedienfeld könnt ihr "Inhalt ersetzen" wählen. Im nun folgenden Dialog wählt ihr die gespeicherte Datei aus.

Video: Verschachtelte Smartobjekte und Smartfilter

In diesem Screencast zeige ich euch, welche Vorteile die Arbeit mit Smartobjekten bietet. Ich gehe kurz auf die Basics ein, zeige wie Smartfilter eingesetzt werden und wie ihr mit verschachtelten, voneinander abhängigen Objekten arbeitet.

Smart-Filter

Mit Filtern lassen sich in Photoshop unzählige Effekte erzeugen. Der Nachteil von Filtern ist jedoch, dass Sie die Pixel einer Ebene dauerhaft verändern. Sobald Ihr einen Filter jedoch auf ein Smartobjekt anwendet, handelt es sich bei diesem Filter um einen sogenannten Smart-Filter. Smart-Filter stehen in Version CS6 für nahezu alle Filterarten zur Verfügung. Lediglich die Weichzeichnungs-Tools und die Objektivunschärfe werden nicht unterstützt.
Im Gegensatz zu einem normalen Filter arbeitet der Smart-Filter verlustfrei. Sobald ihr einen Filter angewendet habt, seht ihr einen neuen Eintrag in der Ebenenpalette.

Der Filter kann jederzeit ein- und ausgeschaltet werden und lässt sich über die automatisch hinzugefügte Maske bearbeiten. Mit einem Doppelklick auf das Icon des entsprechenden Smartfilters öffnet ihr die "Eigenschaften" und könnt auch nachträglich noch Korrekturen vornehmen oder die Einstellungen anpassen.

50%-Grauebenen / Neutrale Ebenen

Jede Ebene in Photoshop kann mit einem Mischmodus versehen werden, der bestimmt, wie die Pixel dieser Ebene sich auf die darunterliegenden Ebenen auswirken. Den Mischmodus könnt ihr im Kopf des Ebenenbedienfeldes einstellen.
Die Mischmodi „Ineinanderkopieren“, „Weiches Licht“, „Hartes Licht“, „Strahlendes Licht“ und „Lineares Licht“ haben die Eigenschaft, dass 50% graue Pixel unsichtbar werden. Hellere Pixel beleuchten die Ebenen darunter, dunklere Pixel dunkeln die Ebenen darunter ab. 50% Grauebenen bieten sich also optimal an, um Licht und Schatten auf einer separaten Ebene einzuzeichnen.

50% Grauebene erstellen

Um eine Ebene mit einem mittleren Grauton (exakt 50% Grau) zu füllen, gibt es wie immer verschiedene Wege:

• Über „Bearbeiten > Fläche füllen > Verwenden: 50% Grau“
• Alt + Klick auf das Icon für eine neue Ebene im Ebenenbedienfeld. Im folgenden Dialog muss als Modus einer der oben genannten Mischmodi gewählt werden. Anschließend setzt ihr den Haken in der Checkbox darunter um die Ebene mit neutraler Farbe zu füllen.

Licht und Schatten

Um Licht und Schatten auf einer neutralen Ebene einzuzeichnen, bieten sich das Abwedler/Nachbelichter-Werkzeug und der Modus „Weiches Licht“ an. Mit dem Abwedler hellt ihr die Grautöne auf, der Nachbelichter dunkelt ab. Mit dieser Technik könnt ihr sehr komfortabel Licht und Schatten für die darunterliegende Ebene einzeichnen.
Zu diesem Thema habe ich bereits einen Artikel inkl. Video erstellt: Screencast: Photoshop-Elemente verlustfrei beleuchten.

Strukturen

Neutrale Ebenen bieten sich auch an um dezente Strukturen, wie beispielsweise ein leichtes Rauschen, hinzuzufügen und später noch anpassen zu können. Konvertiert die Grauebene dazu in einen Smartobjekt und fügt über einen Smart-Filter ein leichtes Rauschen hinzu. Nun könnt ihr alle Bestandteile der Struktur zu jeder Zeit korrigieren.

Lens-Flares und Beleuchtungseffekte

Wenn ihr Lense Flairs hinzufügen wollt, bietet sich eine neutrale Ebene ebenfalls an. Über „Filter > Renderfilter > Blendenflecke“ könnt ihr den Lense-Flair hinzufügen und anschließend beliebig im Bild positionieren. Blendenflecke sehen meistens im Mischmodus „Hartes Licht“ am besten aus.

Auch die Beleuchtungseffekte unter „Filter → Renderfilter → Beleuchtungseffekte“ lassen sich über neutrale Ebenen perfekt steuern. Alternativ können beide Filter auch als Smart-Filter eingesetzt werden.

Ebenenmasken

Über Masken lassen sich Bildbereiche ausblenden und freistellen, ohne dass die Pixel tatsächlich entfernt werden, wie es etwa beim Radiergummi der Fall ist. Eine Maske kann auf verschiede Arten hinzugefügt werden:

• Über „Ebene → Ebenenmasken → Aus Transparenz“
• Über das Icon „Ebenenmaske hinzufügen“ im Fuß des Ebenenbedienfeldes.

Sobald eine Maske aktiv ist, könnt ihr mit Schwarz und Weiß auf dieser Maske arbeiten. Ebenenbereiche, die auf der Maske weiß abgebildet werden, sind sichtbar, schwarz maskierte Bereiche sind unsichtbar. Grautöne erzeugen Transparenzen auf der Ebene.
Im Bedienfeld „Eigenschaften“ ist die Maske ebenfalls aufgeführt. Hier könnt ihr die Maske weiter bearbeiten, beispielsweise die Maskenkante weichzeichnen oder die Maske invertieren.

Maske verbessern

Die detailliertesten Einstellungen verbergen sich hinter dem Button „Maske verbessern“. Das entsprechende Bedienfeld bietet sich vor allem für komplexe Freistellarbeiten wie Haare etc. an.

Zunächst solltet ihr mit dem „Radius verbessern Werkzeug“, das automatisch aktiv ist sobald das Fenster geöffnet wurde, die Maskenkante nachzeichnen. Die Einstellungen innerhalb des Bedienfeldes wirken sich dann nur noch auf den gewählten Bereich aus.
Über den „Radius“ könnt ihr den Bereich verringern oder ausweiten. Auch ein Klick auf „Smart Radius“ lohnt sich. Hierbei passt Photoshop den Radius automatisch an die Bildbereiche an.
Im Abschnitt „Kante anpassen“ könnt ihr die Maske innerhalb eurer Auswahl noch weiter optimieren. Insbesondere der „Kontrast“ und der Punkt „Kante verschieben“ führt hier zu ansprechenden Ergebnissen.

Farbbereich

Über den Button „Farbbereich“ könnt ihr mittels Pipette Farben auswählen, die für die Maske verwendet werden sollen. Über die Toleranz bestimmt ihr, wie viele ähnliche Farben ebenfalls in die Maske aufgenommen werden sollen. Hier solltet ihr darauf achten, dass ihr keine zu scharfen Kanten erzeugt, sondern weiche Übergänge.
Wenn ihr die „lokalisierten Farbbereiche“ aktiviert, könnt ihr über den Bereichsregler festlegen in welchem Radius Farben aufgenommen werden.

Ebenenstile & Stile

Die Ebenenstile sind ebenfalls Klassiker unter den non-destruktiven Techniken und besonders im Webdesign äußerst hilfreich. Ein Ebenenstil kann auf eine Ebene oder Ebenengruppe (ab CS6) angewendet werden und überlagert die Pixel dieser Ebene(n) mit weiteren visuellen Eigenschaften. Über das Bedienfeld „Stile“ können Ebenenstile gespeichert und auf andere Ebenen angewendet werden.
Es existieren Ebenenstile für folgende Effekte:

• Abgeflachte Kante und Relief
• Kontur
• Schatten nach innen
• Schein nach innen
• Glanz
• Farbüberlagerung
• Verlaufsüberlagerung
• Musterüberlagerung
• Schein nach außen
• Schlagschatten

Ebenenstile hinzufügen

Um einer ausgewählten Ebene einen Ebenenstil hinzuzufügen, existieren verschiedene Wege:

• Über „Ebene → Ebenenstil“
• Über einen Doppelklick auf die entsprechende Ebene in Ebenenbedienfeld (Doppelklick neben den Namen der Ebene)
• Über das Bedienfeld „Stile“. Hier können gespeicherte Stile angewandt werden.

Ebenenstile als Stil abspeichern

Wenn ihr einen Ebenenstil speichern möchtet, geht das am einfachsten über das Bedienfeld "Stile". Hier klickt ihr auf das Icon für einen neuen Stil und wählt im darauffolgenden Dialog aus, welche weiteren Eigenschaften in den Stil einfließen sollen. Zur Erklärung: Im Kopf des Ebenenbedienfeldes findet ihr Regler für „Deckkraft“ und „Fläche“. Die Deckkraft steuert die Sichtbarkeit der Ebene inkl. aller angewandten Ebenenstile. Die Fläche hingegen steuert nur die Pixel der Ebene. Ebenenstile behalten dabei ihre volle Deckkraft.

Ebenenstile kopieren

Ihr könnt Stile mit einem Rechtsklick auf die entsprechende Ebene im Ebenenbedienfeld kopieren (Ebenenstil kopieren) und anschließend auf andere Ebenen anwenden (Ebenenstil einfügen). Es ist auch möglich, alle Stile über das Kontextmenü zu löschen.

Ebenenstile einklappen/ausklappen

Wenn ihr Ebenenstile hinzufügt, werden die Stile im Bedienfeld ausgeklappt dargestellt. Wenn ihr das verhindern möchtet, klickt auf den kleinen Pfeil oben rechts in der Ebenenpalette und wählt anschließend die „Bedienfeldoptionen“. Hier deaktiviert ihr das Häkchen bei „Neue Effekte erweitern“.
Ab Photoshop CS6 könnt ihr darüber hinaus alle aufgeklappten Menüs mit einem Klick schließen oder alle öffnen. Dazu drückt ihr Alt und Klickt anschließend auf den Pfeil neben dem „fx“-Icon.

Ebenenstile als CSS3-Code exportieren

Ebenenstile bieten noch einen weiteren Vorteil. Mit Tools wie CSS3PS oder CSSHat könnt ihr Stile in CSS3-Code konvertieren lassen. Das ist praktisch und beschleunigt den Workflow spürbar.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Ebenenstile von Photoshop sind ein beliebter Weg um eine Ebene schnell mit einigen ansehnlichen Effekten wie Schatten, Konturen oder Glanz zu versehen. Darüber hinaus könnt ihr Stile auch abspeichern und anschließend per Klick auch auf andere Ebenen anwenden. Leider lassen sich die Ebenenstile nicht gut weiterbearbeiten oder transformieren. Mit folgendem Tipp wandelt ihr alle Ebenenstile in "echte" Ebenen um. Diese Pixelebenen sind dann zwar kein Stil mehr, können aber umfangreicher angepasst werden.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In Photoshop existieren verschiedene Standards was die Schärfung eines Bildes angeht. Die Klassiker dürften wohl die Filter "unscharf maskieren" oder "selektiv scharfzeichnen" sein. Eine alternative Methode das Motiv nachträglich zu schärfen führt über den Hochpass-Filter und den Blendmodus "weiches-" bzw. "hartes Licht". Bei dieser Methode muss zwar manuell vorgegangen werden, das Ergebnis kann jedoch sehr detailliert eingestellt werden und bietet sich je nach Bild oder Workflow besser an. In diesem Photoshop-Screencast möchte ich euch zeigen wie ihr ein Bild mit dem Hochpass-Filter bearbeiten könnt.

Auch dieser Screencasts ist auf Wunsch eines Lesers dieses Blogs entstanden.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Viele Webdesigner bzw. Frontend-Developer arbeiten immer weniger in Grafikprogrammen wie Photoshop oder Fireworks und wechseln bereits in einer sehr frühen Phase der Website-Erstellung in den Browser. Der Browser ist heute DIE neue Entwicklungsumgebung für Code und Grafik und das Stichwort in diesem Zusammenhang ist „Design in the Browser“. Cloud-Anwendungen und die integrierten Debug-Konsolen der Browser greifen uns dabei mächtig unter die Arme.
Heute möchte ich euch ein neues Photoshop-Plugin vorstellen, dass diese Entwicklung noch weiter beschleunigt: CSS3PS. Mit Hilfe des Plugins wandelt ihr Ebenenstile in CSS3-Code um. Ein Feature das ich mir bereits vor zwei Jahren auf der PhotoCon in München gewünscht habe ist somit endlich Realität geworden!

Wo finde ich das Plugin?

Das Plugin steht online als Download für die Photoshop-Versionen CS3, CS4, CS5 und CS6 kostenlos zur Verfügung. Nach dem Download installiert ihr das Plugin über den Extention-Manager von Adobe und startet Photoshop einmal neu. Anschließend findet ihr innerhalb von Photoshop unter „Fenster → Erweiterungen“ ein neues Bedienfeld namens „CSS3PS“.

Wie arbeite ich mit dem Plugin?

Das Plugin wandelt Ebenenstile und einige weitere Einstellungen wie die Größe eines Objekts oder die Abrundung der Ecken in CSS3-Code um. Erstellt zunächst ein beliebiges Objekt (z.B. ein Form-Objekt) und fügt anschließend Ebenenstile wie Konturen, Verläufe oder Schatten hinzu. Markiert die gewünschten Ebenen (es ist auch eine Mehrfachauswahl möglich) im Ebenen-Bedienfeld und klickt anschließend auf das „CSS3PS“-Logo im Bedienfeld des Plugins. Das Plugin stellt nun eine Verbindung zur Website her und wandelt die Stile in Code um. Als Ergebnis erhaltet ihr eine Vorschau und den CSS3-Code zum Download auf der Website.

Photoshop CS6-Plugin als Video

Ich habe ein kurzes Video erstellt in dem ich euch zeige, wie ihr mit Hilfe des Plugins Ebenenstile in CSS3-Code umwandelt. Zunächst erstellen wir ein simples Beispiel-Objekt, anschließend generieren wir den Code mit Hilfe des Plugins.

Links zum Thema

• Photoshop-Plugin CSS3PS - css3ps.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/07/photoshop-ebenenstile-als-css3-code-exportieren-css3ps/feed/ 15 http://blog.kulturbanause.de/2012/07/photoshop-screencast-erweiterte-pinsel-einstellungen-am-beispiel-des-bokeh-effekts/ http://blog.kulturbanause.de/2012/07/photoshop-screencast-erweiterte-pinsel-einstellungen-am-beispiel-des-bokeh-effekts/#comments Thu, 05 Jul 2012 09:35:10 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=8149 Vor kurzem bin ich in einem meiner Photoshop-Seminare gebeten worden die Erstellung von Pinselspitzen, sowie die individuellen Einstellungsmöglichkeiten von Pinseln [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Vor kurzem bin ich in einem meiner Photoshop-Seminare gebeten worden die Erstellung von Pinselspitzen, sowie die individuellen Einstellungsmöglichkeiten von Pinseln im Blog noch einmal aufzuarbeiten. Diesem Wunsch möchte ich nun mit einer Verzögerung nachkommen.
Im folgenden Screencast zeige ich am Beispiel des Bokeh-Effekts wie ihr eine eigene Pinselspitze erstellt und das Verhalten des Pinsels anschließend entsprechend eurer Vorstellungen anpasst. Im letzten Schritt wird der Effekt mit Blendmodi und Smart-Filtern fertiggestellt.

Beispiele für den Einsatz des Bokeh-Effekts im Webdesign

Folgende Websites setzen den oben beschriebenen Effekt ein.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/07/photoshop-screencast-erweiterte-pinsel-einstellungen-am-beispiel-des-bokeh-effekts/feed/ 0 http://blog.kulturbanause.de/2012/05/photoshop-cs6-die-top-features-tricks-fur-webdesigner/ http://blog.kulturbanause.de/2012/05/photoshop-cs6-die-top-features-tricks-fur-webdesigner/#comments Wed, 09 May 2012 09:41:01 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7845 Jedes Mal wenn eine neue Photoshop-Version in den Startlöchern steht stellen wir uns die gleichen Fragen. Soll ich updaten? Lohnt [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Jedes Mal wenn eine neue Photoshop-Version in den Startlöchern steht stellen wir uns die gleichen Fragen. Soll ich updaten? Lohnt sich der Kauf überhaupt? Überspringe ich die Version nicht lieber?
Ich habe mir Photoshop CS6 Extended angeschaut und möchte euch zeigen welche neuen Funktionen das Update mit sich bringt. Dabei habe ich mich neben den Features die ganz allgemein den Workflow beschleunigen, vor allem auf den Einsatz im Webdesign konzentriert.

Hand aufs Herz

In meinen Seminaren und Workshops habe ich gelernt, dass viele Designer einen Großteil der Funktionen von CS4 und CS5 nicht einsetzen. Das kann natürlich daran liegen dass die Funktionen nicht bekannt sind. Häufig finden die neuen Features aber einfach nicht den Weg in den Arbeitsalltag. Und dann gibt es natürlich noch einige Funktionen die man zwar kennt, aber nicht braucht.
Die Content-Aware-Methoden (inhaltssensitive Techniken) sind für mich so ein Beispiel: in CS4, CS5 und CS6 wurde je eine dieser Techniken als „Killer-Feature“ vorgestellt. Webdesigner brauchen die Funktionen allerdings deutlich seltener als beispielsweise Bildbearbeiter.

Die Entscheidung ob ein Photoshop-Update lohnt sollte daher meiner Meinung nach davon abhängig gemacht werden ob es genügend Funktionen gibt von denen man glaubt, dass sie den Workflow spürbar beschleunigen oder erleichtern. Die 30-Tage Testversion von Photoshop hilft euch dabei diese Entscheidung zu treffen.
Darüber hinaus werden die Update-Kosten i.d.R. höher, je mehr Versionsnummern zwischen den Programmen liegen. Auch das sollte bei der Entscheidung berücksichtigt werden.

Aber nun zu den Features.

Interface und Dokumentvorlagen

Starten wir mit dem offensichtlichen Feature. Das Interface von Photoshop ist nun dunkel und kann in vier verschiedenen Helligkeitsstufen angepasst werden. Das geht übrigens auch während der Arbeit über SHIFT + F1 / SHIFT + F2. Leider sind die Dialogfelder nicht angepasst und werden nach wie vor in Hell dargestellt. Das finde ich allerdings halb so schlimm.

In den Dokumentvorlagen können nun mehr mobile Endgeräte ausgewählt werden. Das hilft dabei Layouts für Responsive Webdesign und Apps zu entwerfen. Die Auswahl der mobilen Geräte gab es zwar auch schon in CS5, die angebotenen Formate wurden jedoch modernisiert.

Mehr Features als je zuvor setzen auf Grafikkarten-Beschleunigung. Dadurch verbessert sich zum Einen die Performance des Programms, es werden jedoch auch neue Hilfsmittel möglich. Wenn ihr ein Objekt transformiert oder die Pinselspitzen vergrößert, werden euch nun beispielsweise direkt am Werkzeug Informationen zum Objekt angezeigt. Das Info-Bedienfeld hat somit weitestgehend ausgedient.

Skriptbasierte Muster

In den Einstellungen für „Fläche füllen“ können nun „Skriptbasierte Muster“ ausgewählt werden. Wenn ihr eine dieser Füllmethoden auswählt, kachelt Photoshop das Muster nicht wie üblich von links oben nach rechts unten, sondern wendet ein Skript zur Berechnung an. Im Hintergrund des Bildes seht ihr eine angewendete „Spirale“.

Mit dieser Funktion lassen sich erstaunliche Effekte im Handumdrehen erstellen. Jetzt muss nur noch CSS nachziehen.

Das neue Ebenen-Bedienfeld

Das Bedienfeld „Ebene“ hat ein massives Update erfahren und einige wirklich gute Features spendiert bekommen. Alle diese Funktionen dürften den Workflow von Profis spürbar beschleunigen.

Im Kopf des Bedienfeldes findet ihr nun einen Filter. Hier könnt ihr in den Ebenen nach Namen suchen oder die Ansicht nach Art, Effekt, Modus, Attribut und Farbe filtern. Die Farben für Ebenen lassen sich jetzt auch deutlich einfacher über das Kontextmenü vergeben. Insbesondere für Webdesigner ist der Filter sehr praktisch – Web-Layouts verfügen in der Regel über sehr viele Ebenen.

Wenn Ihr viele Ebenen auf einmal umbenennen möchtet, musstet ihr bisher jede Ebene einzeln doppelt anklicken und anschließend den Namen ändern. In Photoshop CS6 doppelklickt ihr nur noch eine Ebene und ändert den Text. Anschließend könnt ihr mit Tab in die nächste Ebene springen. So lassen sich Umbenennungen viel schneller und komfortabler durchführen.

Ebeneneffekte lassen sich nun auch auf ganze Ordner anwenden und Ordner können per Shortcut Cmd/Strg + J genau wie Ebenen kopiert werden.

Wenn ihr eine Ebene mit einem Ebenenstil ausstattet, wird dieser aufgeklappt im Ebenen-Bedienfeld angezeigt. Das kann störend sein und viel Platz wegnehmen. In CS6 könnt ihr nun alle diese aufgeklappten Menüs mit einem Klick schließend oder alle öffnen. Dazu drückt ihr Alt und Klickt anschließend auf den Pfeil neben dem „fx“-Icon.

Neues Bedienfeld „Eigenschaften“

In Photoshop gibt es ein neues Bedienfeld namens „Eigenschaften“. Wenn ihr Einstellungsebenen verwendet (beispielsweise über das Korrekturen-Bedienfeld) werden die entsprechenden Eigenschaften dort abgebildet. Das Bedienfeld räumt in erster Linie den Arbeitsplatz auf und erleichtert die non-destruktive Arbeit.

Absatzformate und Zeichenformate

Es ist für mich vielleicht DAS Webdesign-Feature der CS6. Photoshop kann jetzt Absatz- und Zeichenformate. Ein Traum wird wahr!
Wie bereits aus InDesign bekannt, könnt ihr nun Voreinstellungen für bestimmte Textelemente festlegen und anschließend per Klick zuweisen oder ändern. Die Absatzformate funktionieren also sehr ähnlich wie eine Auszeichnung per CSS: Absatzformate entsprechen Block-Elementen, Zeichenformat entsprechen Inline-Elementen.

Ein Beispiel: ihr beginnt mit einem neuen Projekt und legt ein Absatzformat für Überschriften und eins für Links an. Anschließend gestaltet ihr die Website und baut diverse Textelemente ein. Nun überlegt ihr, dass die Überschriften vielleicht doch in einer anderen Schrift besser aussehen würden und dass die Links eigentlich nicht unterstrichen dargestellt werden sollen. Anstatt jedes Textelement und jedes Zeichen im Fließtext einzeln zu markieren und anschließend zu ändern, passt ihr nur das Zeichenformat bzw. Absatzformat an. Alle zugewiesenen Objekte der Seite sind davon abhängig und ändern sich ebenfalls.
Dieses Photoshop CS6-Feature dürfte die Arbeit eines Webdesigners unglaublich vereinfachen.

Lorem Ipsum

Nein, das ist keine fehlerhafte Überschrift. Photoshop kann jetzt endlich „Lorem Ipsum“. Über „Schrift → Platzhaltertext einfügen“ füllt Photoshop eine Textauswahl mit einem eigenen Lorem Ipsum.

Neue Vektor-Formwerkzeuge und Konturen

Die Formwerkzeuge haben ein üppiges Update erhalten. Sobald ihr eine Form z.B. ein abgerundetes Rechteck aufzieht, stehen euch in der Optionsleiste neue Eigenschaften und Vektor-Funktionen zur Verfügung. Ähnlich wie in Illustrator könnt ihr die Fläche und die Kontur auswählen und gestalten. Auch die Stärke der Kontur und die Art (z.B. gestrichelt) kann detailliert eingestellt werden. Als Füllmethoden stehen Farben, Muster und Verläufe zur Verfügung.
Die Einstellungen könnt ihr anschließend - ähnlich wie Ebenenstile - über einen Rechtsklick auf das Element in der Ebenenpalette kopieren und einfügen. Der Eintrag heißt bei Vektorformen „Formattribute kopieren“.

In der Optionsleiste findet sich nun der Eintrag „Kanten ausrichten“. Den Eintrag gab es zwar bisher auch schon, er war aber etwas versteckt. Ist das Feld aktiviert, wird verhindert dass Vektorformen auf halben Pixeln verlaufen und unscharfe Konturen erzeugen. Unscharfe Objekte sind äußerst unprofessionell und führen regelmäßig zu Problemen bei der technischen Umsetzung einer Website. Im Webdesign nennt sich diese Technik „Pixel Perfect“.
Per Cmd + Shift + H kann übrigens der Pfad von Formobjekten aus- und wieder eingeblendet werden.

Hash-Code im Farbwähler

Der Farbwähler erlaubt nun die Eingabe eines Hash-Codes bei Hexadezimalwerten. Wer häufig zwischen Code und Photoshop wechselt und Farben kopiert, wird bereits gemerkt haben wie ärgerlich es war, dass Photoshop die Raute (#) nicht zugelassen hat. Für Designer die auch „im Browser designen“ wird dieses Mini-Feature daher sehr hilfreich sein.

Weitere Photoshop-Funktionen

Das waren für mich erst einmal die für das Webdesign relevanten neuen Funktionen. Photoshop CS6 bietet natürlich noch einiges mehr, wie das Inhaltsbasierte-Bewegen-Werkzeug, abnutzbare Pinselspitzen, ein überarbeitetes Beschneiden-Werkzeug oder die neuen Weichzeichnungsfilter.
Diese Funktionen gehören allerdings nicht in diesen Artikel und werden daher in einem anderen Beitrag ihren Platz finden.
Sollte ich Funktionen nicht erwähnt haben, die eurer Meinung nach für Webdesigner relevant sind, schreibt mir bitte in den Kommentaren. Ansonsten interessiert mich natürlich brennend was ihr von Photoshop CS6 haltet.

Vielen Dank an Olaf an dieser Stelle. Sein Video zur Photoshop CS6 Beta hat mir geholfen diesen Artikel vorbereiten zu können.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/05/photoshop-cs6-die-top-features-tricks-fur-webdesigner/feed/ 13 http://blog.kulturbanause.de/2012/03/photoshop-cs6-beta-verfugbar/ http://blog.kulturbanause.de/2012/03/photoshop-cs6-beta-verfugbar/#comments Thu, 22 Mar 2012 07:37:34 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7624 Die Beta von Photoshop CS6 steht ab sofort für Windows und Mac als Download zur Verfügung. Nach der Registrierung bei [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Die Beta von Photoshop CS6 steht ab sofort für Windows und Mac als Download zur Verfügung. Nach der Registrierung bei Adobe (Adobe ID benötigt) kann das Programm im Umfang der späteren Extended Version getestet werden. Die fertige Version von Photoshop CS6 ist dann Bestandteil der Adobe Creative Cloud. Photoshop CS6 und Photoshop CS6 Extended werden im Handel als zwei eigenständige Programme mit unterschiedlichem Umfang verfügbar sein.

Den ca. 1GB großen Download der Photoshop CS6 Beta findet ihr hier:

• labs.adobe.com/downloads/photoshopcs6

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/03/photoshop-cs6-beta-verfugbar/feed/ 10 http://blog.kulturbanause.de/2012/03/photoshop-cs6-mit-uberarbeiteten-3d-funktionen/ http://blog.kulturbanause.de/2012/03/photoshop-cs6-mit-uberarbeiteten-3d-funktionen/#comments Wed, 21 Mar 2012 06:50:34 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7618 Zorana Gee, Photoshop Product Manager, hat im Sneek Peak #7 neue 3D-Funktionen von Photoshop CS6 Extended vorgestellt. Die 3D-Funktionen wurden [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Zorana Gee, Photoshop Product Manager, hat im Sneek Peak #7 neue 3D-Funktionen von Photoshop CS6 Extended vorgestellt. Die 3D-Funktionen wurden in den vergangenen Photoshop-Versionen bereits mehrfach ausgebaut und erhalten nun erneut ein vollständiges Performance und Usability-Update.

Einfachere Bedienung

Mit Hilfe der überarbeiteten 3D-Ebenen kann die Ausrichtung eines dreidimensionalen Objekts, sowie die angewandten Materialien, Lichter und Effekte intuitiv und direkt auf der Arbeitsfläche verändert werden. Per Klick lassen sich die Objekte, Schatten oder die Kamera auswählen und an die gewünschte Position rücken.

Wie bei Photoshop üblich stehen die 3D-Funktionen nur in der Extended Version des Produkts zur Verfügung.

Alle CS6-Funktionen auf einen Blick habe ich übrigens in diesem Artikel zusammengefasst.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/03/photoshop-cs6-mit-uberarbeiteten-3d-funktionen/feed/ 0 http://blog.kulturbanause.de/2012/03/spiegelungen-im-webdesign-die-grundlagen-als-screencast/ http://blog.kulturbanause.de/2012/03/spiegelungen-im-webdesign-die-grundlagen-als-screencast/#comments Thu, 08 Mar 2012 09:28:50 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7560 Die Photoshop-Profis haben ein Video zum Thema "Spiegelungen" von mir veröffentlicht. In Folge 93 des Podcasts beschreibe ich die Grundlagen [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Die Photoshop-Profis haben ein Video zum Thema "Spiegelungen" von mir veröffentlicht. In Folge 93 des Podcasts beschreibe ich die Grundlagen der Spiegelung von zweidimensionalen und dreidimensionalen Objekten, und gehe auf häufige Fehlerquellen ein. Am Beispiel des Wet-Floor-Effektes werden darüber hinaus die typischen handwerklichen Techniken beschrieben.

Das Thema Spiegeleffekte habe ich in der Vergangenheit bereits in meinem Artikel "10 Tipps zu Spiegelungen im Webdesign" behandelt. Einen fortgeschrittenen Screencast zum Thema Wasserspiegelung findet ihr hier.

Spiegeleffekte für moderne Webgrafiken

Galileo-Press, bzw. die Photoshop-Profis beschreiben den Inhalt des Videos so:

Spiegeleffekte sind in modernen Weblayouts immer gern gesehen. Sie sorgen für einen edlen Glanz und zeichnen hochwertige Webseiten aus, ganz in Anlehnung an eine erfolgreiche Apfelmarke. Jonas Hellwig zeigt Ihnen in dieser neuen Folge der »Photoshop-Profis«, wie Sie mit wenigen Handgriffen überzeugende Spiegeleffekte erzeugen. Doch Vorsicht: Nicht jeder Text oder jedes Objekt eignet sich gleichermaßen gut für einen Spiegleffekt!

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/03/spiegelungen-im-webdesign-die-grundlagen-als-screencast/feed/ 5