Für ein vor kurzem abgeschlossenes Projekt habe ich einen Kochtopf illustriert. In Form eines Icons sollte der Kochtopf die Termine einer Kochschule anteasern. Letztendlich wurde das Icon durch ein Foto ersetzt und kam somit nicht zum Einsatz. Aus diesem Grund stelle ich die Photoshop-Datei sowie das Icon im PNG-Format hier als Download zur Verfügung. Vielleicht könnt ihr es ja in einem zukünftigen Projekt einsetzen.

Kochtopf-Icon

Die PNG-Grafik hat eine Größe von 512x512 Pixel und transparenten Hintergrund. Ich bin der Meinung, dass sich fertige Icons so gut wie nie wirklich 100%ig in eine Seite integrieren lassen. Daher könnt ihr auch die original Photoshop-Datei herunterladen und euren Anforderungen entsprechend anpassen. Der Topf, der Deckel, die Flüssigkeit und die Henkel liegen in separaten Ordnern.

Viel Spaß.

Icon und Photoshop-Datei herunterladen (ca. 250 KB)

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 realisieren mittlerweile einen Großteil der grafischen Elemente vollständig über CSS3. Hierbei stehen die Möglichkeiten von CSS3 denen von Photoshop in nichts nach, und es lassen sich mitunter sehr beeindruckende Effekte erzielen.
Leider wirken über Code erstellte Grafiken häufig zu glatt und zu einheitlich, was den fotorealistischen Gesamteindruck negativ beeinflusst. Es liegt ja gerade im Trend dezente Strukturen einzusetzen und so dem Design etwas mehr "Griff" zu geben. Was also tun? Die Lösung ist eine Kombination aus Photoshop-Pattern und CSS3.
In diesem Tutorial möchte ich euch zeigen, wie ihr zunächst eine transparente Struktur in Photoshop erstellt, und diese anschließend auf CSS3-generierte Objekte anwenden könnt.

Alle Dateien dieses Tutorial könnt ihr herunterladen. Das Download-Paket umfasst eine Photoshop-Datei, eine PNG-Struktur und das HTML-Beispiel.

Beispieldateien herunterladen

Datei anlegen und Smart-Filter vorbereiten

Erstellt zunächst einen neue Datei mit weißer Hintergrundfarbe. Ich habe in diesem Beispiel mit einer 500x300 Pixel großen Arbeitsfläche gearbeitet - die Abmessungen der Datei sind für das Verständnis dieser Technik allerdings irrelevant.

Wandelt nun die Hintergrundebene in eine normale Ebene um. Das erreicht ihr entweder mit einem Doppelklick auf die Hintergrundebene innerhalb der Ebenenpalette, oder alternativ über das Menü. "Ebene → Neu → Ebene aus Hintergrund".

Wandelt nun über "Filter → Für Smartfilter konvertieren" die Ebene in ein Smart-Objekt um. Das hat den Vorteil, dass ihr später den Rausch-Effekt noch anpassen könnt, ohne das ihr die Pixel unwiderruflich zerstört habt.

Rauschfilter anwenden

Wählt nun über "Filter → Rauschfilter → Rauschen hinzufügen" den Rauschfilter aus und erstellt ein leichtes, gleichmäßiges, monochromatisches Rauschen.

Auswahl aus Farbbereich erstellen

Erstellt jetzt eine zusätzliche Ebene oberhalb des Smart-Objektes. Auf dieser Ebene werden wir nun mit Hilfe einer automatischen Auswahl das transparente Rauschen erzeugen.

Achtet darauf, dass ihr die neue Ebene ausgewählt habt und ruft nun über "Auswahl → Farbbereich" den Farbbereich-Dialog auf. Mit diesem Werkzeug könnt ihr nun Pixel auf eurer Arbeitsfläche auswählen und anschließend eine Auswahl aller gleichfarbigen Pixel erstellen lassen. Die Toleranz bestimmt wie viele farblich benachbarte Pixel ebenfalls in die Auswahl aufgenommen werden.

Ich habe in diesem Beispiel mit einer Toleranz von 15 gearbeitet. Die Miniaturansicht zeigt welche Pixel ihr ausgewählt habt. Versucht hier ein möglichst gleichmäßiges Verhältnis von Schwarz und Weiß zu erreichen.

Bestätigt nun den Dialog und füllt die Auswahl anschließend über "Bearbeiten → Fläche füllen" schwarz ein. Jetzt könnt ihr die Auswahl wieder aufheben (Auswahl → Auswahl aufheben).

Struktur fertigstellen

Ihr könnt nun die ehemalige Hintergrundebene (Ebene 0) ausblenden oder löschen. Anschließend reduziert ihr die Deckkraft der Rausch-Ebene auf 5%-10% - je nachdem wie stark ihr das Rauschen einsetzen möchtet.

Struktur exportieren

Die transparente Rausch-Struktur ist nun fertig und muss lediglich exportiert werden. Speichert die Daten nun also über "Datei → Für Web und Geräte speichern" im PNG24-Format ab. Nur so erreicht ihr die benötigte Transparenz im Hintergrund.

Struktur mit CSS3 kombinieren

Die fertige Struktur könnt ihr nun wie gewohnt per CSS auf ein Element anwenden. Die Technik wird allerdings erst richtig interessant, wenn ihr fortgeschrittene CSS3-Techniken - wie Verläufe oder 3D-Effekte - mit der Rausch-Struktur noch weiter aufwertet.

Das folgende Live-Beispiel zeigt einen simplen CSS3-Button mit angewandter Rausch-Textur. Der Code wurde in Firefox, Chrome und Safari getestet.

Im direkten Vergleich nun das Beispiel ohne Rauschen.

CSS-Code des Beispiel-Buttons

.button {
	padding:15px 17px;	

	background-color: #b5bdc8;
	background-image:url(rauschen.png);
	border-top:1px solid rgba(255,255,255,0.4);

	color:#222;
	font:22px Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	text-shadow: rgba(255,255,255,.3) 0 1px 0;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow:
		inset 0px -5px 35px rgba(0,0,0,0.7),
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3),
		0px 3px 3px rgba(0,0,0,0.5);

	-moz-box-shadow:
		inset 0px -5px 35px rgba(0,0,0,0.7),
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3),
		0px 3px 3px rgba(0,0,0,0.5);

	-ms-box-shadow:
		inset 0px -5px 35px rgba(0,0,0,0.7),
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3),
		0px 3px 3px rgba(0,0,0,0.5);

	-o-box-shadow:
		inset 0px -5px 35px rgba(0,0,0,0.7),
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3),
		0px 3px 3px rgba(0,0,0,0.5);

	box-shadow:
		inset 0px -5px 35px rgba(0,0,0,0.7),
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3),
		0px 3px 3px rgba(0,0,0,0.5);
}

Download aller Beispiel-Dateien

Ihr könnt alle Dateien dieses Beispiels hier herunterladen. Das Paket enthält eine Photoshop-Datei mit der Basis-Struktur, die exportier PNG und das HTML-Beispiel mit dem Button.

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

Um in Photoshop eine Ebene vor weiterer Bearbeitung zu schützen, benutzen wir in der Regel das Schloss-Icon am oberen Rand des Ebenen-Bedienfeldes. Das Schloss sperrt die Ebene komplett, die anderen Icons in diesem Bereich schützen immer nur bestimmte Eigenschaften der Ebene. Beispielsweise die Position.
Ärgerlich wird es sobald mehr als eine Ebene ausgewählt ist. Dann sind diese Icons nämlich ausgegraut und können nicht mehr betätigt werden. Um mehrere Ebenen zu sperren bzw. zu entsperren müssen wir also alle Ebenen der Reihe nach auswählen und die Einstellung vornehmen. Doch es geht auch schneller, denn die Funktion zum sperren/entsperren mehrerer Ebenen existiert ebenfalls.

Ebenen fixieren: Transparenz, Position, Bild, Alles

Markiert zunächst alle Ebenen die ihr sperren wollt. Anschließend wählt ihr "Ebenen → Ebenen fixieren ...". Es öffnet sich folgender Dialog.

Setzt hier einfach den Haken bei der gewünschten Art der Fixierung und bestätigt den Dialog. Anschließend sind alle zuvor ausgewählten Ebenen mit der Fixierung versehen.

Mehrere Ebenen gemeinsam entsperren

Wenn ihr die Sperrung mehrerer Ebenen aufheben wollt, so funktioniert das auf die gleiche Art und Weise. Markiert zunächst alle Ebenen in der Ebenen-Palette. Anschließend ruft ihr den "Ebenen fixieren"-Dialog auf. Hier könnt ihr die nun voreingestellten Fixierungen wieder deaktivieren.

Unklar ist natürlich warum die Funktion so umständlich aufgerufen werden muss. Da die Funktion ja ganz offensichtlich in Photoshop bedacht wurde - wäre es schön, wenn spätesten in Photohop CS6 die Icons der Ebenenpalette dafür benutzt werden könnten.

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 Füllmethoden von Photoshop - wie z.B. "multiplizieren" oder "weiches Licht" - bestimmen wie die Pixel verschiedener Ebenen miteinander verrechnet werden. Hierbei wirkt sich in der Regel die ausgewählte, und mit einer Füllmethode versehene, Ebene auf die darunter liegende aus.
Ihr findet die Füllmethoden im Ebenen-Bedienfeld und könnt hier den Modus für die aktuell ausgewählte Ebene festlegen. Wenn ihr nichts verändert, so steht der Wert auf "Normal". Doch sobald ihr einen Ordner erstellt, ändert Photoshop die Füllmethode auf "Hindurchwirken", einen Wert der für Ebenen nicht zur Verfügung steht. Was diese Füllmethode bewirkt, möchte ich euch kurz erklären.

Die Füllmethode "Hindurchwirken" ist der Standard-Wert für Ebenengruppen (Ordner). "Hindurchwirken" bewirkt, dass alle eingeschlossenen Ebenen ihre individuelle Füllmethode behalten und jede Ebene auf alle anderen Ebenen (auch außerhalb der Gruppe!) wirkt. Visuell ändert sich also erst einmal gar nichts, weshalb es sich hierbei auch um den Standard handelt.

Wechselt man die Füllmethode des Ordners nun auf "Normal", so gilt die individuelle Füllmethode einer sich in der Gruppe befindenen Ebene nur innerhalb dieser. Zuerst wird alles innerhalb der Gruppe verrechnet, und dann erst das Ergebnis als Ganzes mit dem Rest.

Mit Ebenengruppen könnt ihr also den Wirkungsbereich von Füllmethoden maßgeblich beeinflussen.

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 realistischen Strukturen lässt sich die grafische Qualität einer Website spürbar verbessern, und auch im App-Design gehören simulierte Materialien wie Leder, Papier, Metall oder Holz heutzutage einfach dazu. Die Photoshop-Profis haben in Folge 58 einen Screencast von mir veröffentlicht, in dem ich erkläre, wie ihr mit Hilfe einiger Photoshop-Filter und etwas Handarbeit, eine realistische Holzstruktur herstellen könnt.

Die Photoshop-Profis beschreiben den Inhalt des ca. 14-minütigen Videos so:

Sie möchten Ihre Webseite mit ansprechenden Holzstrukturen veredeln? In dieser Folge der Photoshop-Profis zeigt Ihnen Webdesign-Experte Jonas Hellwig, wie Sie mit wenigen Handgriffen eigene Holzstrukturen entwerfen. Dazu erzeugen Sie zunächst mit dem Fasern-Filter eine Grundstruktur, auf der Sie schließlich die Astlöcher und Baumringe anbringen. Die Holzstruktur können Sie übrigens auch verwenden, um anschließend Holzbretter für einen Parkettboden zu simulieren.

Edle Holzstrukturen nachbauen

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 PhoCon Professional (ehemals Photoshop Convention) wirft ihre Schatten voraus. Das Event rund um Grafik, Design und Photoshop wurde in diesem Jahr thematisch etwas abgewandelt und präsentiert nun ein breiteres - in meinen Augen viel moderneres - Spektrum an Themen. Auch der Veranstaltungsort wurde geändert und klingt sehr vielversprechend.
Ich freue mich sehr auch in diesem Jahr auf der PhoCon einen Vortrag zum Thema Facebook & Co. halten zu dürfen und hoffe natürlich viele von Euch in München einmal persönlich zu treffen.

Die Veranstaltung findet am 10. und 11. November 2011 in München statt. Detaillierte Infos entnehmt ihr bitte der offiziellen Website.

• Die Referenten
• Das Programm
• Anmeldung

Ihr findet das Event natürlich auch auf meiner Facebook-Fanpage:

• Veranstaltungen von kulturbanause auf Facebook

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.

Ende Juni diesen Jahres habe ich im Haus der Wissenschaft in Bremen ein ganztägiges Seminar zum Thema "Effizientes Webdesign in Photoshop" gehalten. Die Veranstaltung wird nun am 16. November 2011 wiederholt und ich würde mich sehr freuen euch persönlich vor Ort kennenzulernen.
In einer sehr überschaubaren Gruppe von maximal zehn Teilnehmern zeige und erkläre ich den gesamten Webdesign-Workflow in Photoshop. Angefangen bei konzeptionellen Aspekten über die Gestaltung einer Website in Photoshop bis hin zu vielfältigen ergänzenden Tipps, Kniffen, Tools und Hintergrundinfos.

Die Seminar-Inhalte, sowie die Anmeldemöglichkeit findet ihr auf der Veranstaltungs-Website:

• Effizientes Webdesign in Photoshop. Seminar mit Jonas Hellwig

Ihr findet das Event auch auf meiner Facebook-Fanpage:

• Veranstaltungen von kulturbanause auf Facebook

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.

Als Webdesigner kennt man das Problem: während des Kreativprozesses erstellt man mitunter hunderte von Ebenen, Smart-Filtern, Ordnern und Smart-Objects in Photoshop. Ich glaube kein Bereich der Gestaltung erzeugt auch nur annähernd so unübersichtliche Dateien wie das Interface-Design. Ist die Website fertig gestaltet, muss die PSD aufgeräumt werden - sofern man es nicht geschafft hat von Anfang an Ordnung zu halten. Dazu gehört auch, unbenutzte Ebenen zu löschen.

Um den Workflow zu beschleunigen, könnt ihr diese Arbeit von Photoshop übernehmen lassen - eine Funktion die vielleicht nicht jedem bekannt ist.

Photoshop: Alle leeren Ebenen löschen

Damit euer Workflow auch wirklich beschleunigt und nicht gar ausgebremst wird, müsst ihr beachten, dass die Funktion zum entfernen aller unbenutzten Ebenen recht lange dauern kann. Je nach Dokument können das auch mal schnell fünf Minuten sein.

Ihr findet die Funktion unter: Datei → Skripten → Alle leeren Ebenen löschen

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.

Innerhalb von Photoshop existieren seit Version CS2 die so genannten Arbeitsbereiche. Ein Arbeitsbereich fasst eine individuelle Zusammenstellung von Bedienfeldern, Tastaturkürzeln und Menüeinträgen zusammen und erleichtert es so Photoshop an die eigenen Bedürfnisse anzupassen. Neben einigen Standard-Arbeitsbereichen, die mit Photoshop zusammen ausgeliefert werden, habt ihr auch die Option eigene Arbeitsbereiche zu definieren.
Leider ist es nicht möglich aus Photoshop heraus Arbeitsbereiche zu exportieren oder zu importieren. Insbesondere wenn ihr an verschiedenen Rechnern arbeitet, ist die fehlende Exportfunktion ein echtes Manko. Mit einem kleinen PS-Script ist dieses Problem Vergangenheit.

Bitte kein Workaround!

Ein paar Worte vorab. Es ist auch möglich mit einem Workaround die Arbeitsbereiche im System/Programmordner auf der Festplatte ausfindig zu machen und anschließend manuell auf den USB-Stick oder in die Cloud zu kopieren. Mir persönlich ist das zu lästig und zu zeitaufwändig. Ich bevorzuge die Script-Variante da ich nur so Arbeitsbereiche aus dem Programm heraus verwalten kann.

Photoshop-Script herunterladen

Zunächst einmal müsst ihr das Photoshop-Script herunterladen. Das erledigt ihr hier: jnack.com/adobe/photoshop/cs5/WorkspaceImportExport.jsx.zip

Nachdem ihr das Script heruntergeladen und entpackt habt, verschiebt ihr es an eine beliebige Stelle auf eurer Festplatte. Die Datei muss nicht im Programmverzeichnis von Photoshop liegen um zu funktionieren.

Script verwenden

Innerhalb von Photoshop ruft ihr das Script über Datei → Scripten → Durchsuchen... auf. Es öffnet sich folgender Dialog.

Legt fest welche Arbeitsbereiche ihr exportieren wollt und ob der aktuelle, oder der erstmals gespeicherte Zustand des Arbeitsbereichs exportiert werden soll. Anschließend könnt ihr die Auswahl an eine beliebige Stelle auf eurer Festplatte exportieren.

Auf die gleiche Art und Weise könnt ihr zuvor exportierte Arbeitsbereiche importieren.

• Workspace import/export script for Photoshop

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.

Der Einsatz von Gestaltungsrastern (Grids) ist aus dem modernen Webdesign nicht mehr wegzudenken. Um in der Layoutphase mit Rastern arbeiten zu können, stehen zwei Optionen zur Verfügung. Entweder greift man auf ein vordefiniertes Grid-System wie beispielsweise 960.gs zurück, oder man berechnet sich ein eigenes Raster. Ich persönlich bevorzuge die Arbeit mit einem selbst erstellten Raster, da ich so alle Inhalte der Website bestmöglich berücksichtigen kann.
Nicolaj Kirkgaard Nielsen hat nun einen Online-Grid-Generator für Photoshop und Illustrator entwickelt, der alle Funktionen abdeckt, die ich bei der Arbeit mit Gestaltungsrastern benötige.

Wie funktioniert der Grid-Generator?

Über eine Online-Maske werden alle relevanten Daten eingegeben. Neben der Breite des Dokuments in Pixeln, muss die Spaltenzahl, der Abstand zwischen den Spalten und der Außenabstand angegeben werden. Besonders gut gefällt mir, dass immer erkennbar ist welches Element im Moment bearbeitet wird. Auch eine Warnung wird angezeigt sobald die Eingabe zu ungeraden Ergebnissen führen würde.

Das fertige Raster exportiert ihr als Photoshop- bzw. Illustrator-Script. Per Drag and Drop kann das Raster anschließen auf ein geöffnetes Dokument angewendet werden. Öffnet ihr das Script mit dem jeweiligen Programm, so wird eine neue Datei erzeugt.
In beiden Fällen wird das Raster in Form von Hilfslinien umgesetzt.

• gridcalculator.dk

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 den letzten beiden Artikeln habe ich die Adobe iPad-Apps Color Lava und Adobe Nav vorgestellt. Nun möchte ich mich der dritten Anwendung widmen. Adobe Eazel.
Eazel ist im Grunde genommen eine Painting-App für das iPad. Im Gegensatz zu allen anderen, mir bekannten, Apps dieser Kategorie fasziniert Eazel jedoch durch eine sehr ungewöhnliche Fünf-Finger-Steuerung und einen recht hohen Funktionsumfang.

Voraussetzungen

Um Eazel nutzen zu können, benötigt ihr zwingend Photoshop CS5 (12.0.4+) und ein iPad. Diese Photoshop-Version ist mit der Creative Suite 5.5 erschienen und steht als kostenloses Update zur Verfügung. Anschließend könnt ihr Eazel im Apple App-Store herunterladen. Da das Programm kostet aktuell 3,99 €.
Nachdem Ihr Eazel gestartet habt, solltet ihr die App mit Photoshop verbinden. Dazu benötigt ihr eine WiFi-Verbindung in der beide Geräte kommunizieren können.

Eazel und Photoshop CS5 verknüpfen

Öffnet innerhalb von Photoshop über "Bearbeiten → Remoteverbindungen" den entsprechenden Remote-Dialog und vergebt hier einen Dienstnamen sowie ein Passwort.

In der unteren rechten Ecke der iPad-App seht ein graues Photoshop-Icon. Ein Fingertipp auf das Icon öffnet einen weiteren Dialog in welchem nun die soeben vergebenen Daten erneut eingegeben werden müssen. Ist die Verbindung erfolgreich hergestellt, wechselt das Icon die Farbe zu blau.

Eazel als digitale Leinwand?

Mit Eazel könnt ihr digitale Gemälde erstellen und anschließend an Photoshop senden. Im Gegensatz zu den anderen beiden Touch-Apps von Adobe, ist Eazel jedoch eher als eigenständiges Programm mit WiFi-Exportfunktion zu verstehen. Adobe Nav und Color Lava bieten hier eine sinnvollere Photoshop-Erweiterung.

Das (laut Adobe) revolutionäre an Eazel ist die Steuerung. Man bedient das Programm mit allen fünf Fingern, wobei jeder Finger für eine Werkzeug-Kategorie steht. Der Zeigefinger stellt beispielsweise die Farbauswahl dar. Über verschiedene Navigationsebenen kann man sehr intuitiv und schnell die gewünschte Farbe auswählen. In den Bewertungen der App gibt es einige Benutzer die kritisieren, dass die Steuerung sehr gewöhnungsbedürftig sei. Mir persönlich viel der Einstieg allerdings recht leicht.
Auffällig ist auch der Gestaltungs-Stil von Eazel. Das Ergebnis ähnelt immer einem Aquarell und die Farben werden sogar während der Bedienung animiert dargestellt. Insbesondere auf dem alten iPad spüre ich hier jedoch einige Performance-Probleme.

Fazit

Adobe Eazel ist für mich die überflüssigste der drei Touch-Apps. Im Gegensatz zu den anderen beiden Programmen fehlt mir hier der echte Mehrwert für Photoshop. Eazel ist sicher eine interessante Technik- und Usability-Demo. Eine sinnvolle Erweiterung für das Mutterprogramm sehe ich hier jedoch nicht.
Auch kann ich mir schwer vorstellen, dass sich mit Eazel in einer akzeptablen Zeit brauchbare Ergebnisse realisieren lassen. Dafür ist die Steuerung der Touch-Medien einfach generell zu schwammig.

Download

Wenn ihr ausprobieren möchtet wie Adobe Eazel sich anfühlt, so könnt ihr die App aus dem App Store herunterladen:

• Adobe Eazel

Adobe bewirbt das Produkt im App-Store mit folgender Beschreibung:

Ihr iPad ist die Leinwand, Ihr Finger der Pinsel. Erstellen Sie wunderschöne Bilder für Photoshop CS5.

Mit Adobe Eazel, einer Photoshop Touch App für Adobe Photoshop CS5 (Version 12.0.4 oder höher erforderlich), können Sie jetzt mit Ihrem iPad und Ihren Fingerspitzen wunderschöne Bilder erstellen. Dank der speziellen Technologie, die eine neuartige Interaktion zwischen „Nass-“ und „Trocken-Techniken“ ermöglicht, können Sie beeindruckende Farbmischungen erzielen. Über die Benutzeroberfläche können Sie die gesamte Größe Ihres iPad Displays zum Malen verwenden und haben jederzeit Zugriff auf die notwendigen Tools.

Wenn eine Netzwerkverbindung zwischen Ihrem iPad und Ihrem Computer besteht, können Sie Ihre in Adobe Eazel erstellten Grafiken von überall direkt an Photoshop CS5 senden. Anschließend können Sie mithilfe von führenden Bildbearbeitungs-Tools eine Version Ihrer Kunstwerke mit höherer Auflösung erstellen. Sie können auch alle Ihre Malaufgaben in Adobe Eazel durchführen. Sie können Ihre Arbeit jederzeit per E-Mail an andere Benutzer weitergeben oder Ihre Bilder in der integrierten Fotos-App auf Ihrem iPad speichern.

Erstellen Sie wunderschöne Kunstwerke mithilfe Ihrer Fingerspitzen.
• Mischen Sie Nass- und Trocken-Techniken, um beeindruckende, realistische Farbmischungen zu erzielen. Die bahnbrechende neue Technologie ermöglicht es den digitalen Farben, mit der Zeit zu „trocknen“.
• Arbeiten Sie ungestört unter Verwendung des gesamten iPad Displays. Die Steuerelemente für das Ändern von Farbe, Deckkraft, Pinselgröße und anderen Einstellungen werden nur angezeigt, wenn Sie das Display mit allen fünf Fingern berühren.
• Senden Sie Ihre Kunstwerke direkt an Photoshop CS5, wo sie dann mit einer höheren Auflösung neu gerendert und in einem beliebigen Dateiformat gespeichert werden können. (Hierzu muss Photoshop CS5 geöffnet und eine Netzwerkverbindung zwischen Ihrem iPad und Ihrem Computer eingerichtet sein.)
• Speichern Sie Ihre Bilder in der iPad Fotos-App und senden Sie sie als JPEG-Dateien per E-Mail.

Die Screenshots der Touch-App stammen aus dem App-Store

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.

Adobe hat drei Touch-Apps für das iPad veröffentlicht, die ich in dieser kleinen Artikel-Serie kurz vorstellen möchte.
Im vorherigen Artikel habe ich bereits die App Adobe Nav behandelt, nun möchte ich mich der Anwendung Color Lava widmen.
Mit Color Lava lassen sich auf dem iPad Farben mit dem Finger mischen und zu harmonischen Farbsets zusammenstellen. Diese Farbkonzepte können anschließend, vom iPad aus, an die Fotoshop-Farbfelder übermittelt werden.

Voraussetzungen

Um Color Lava nutzen zu können, benötigt ihr zwingend Photoshop CS5 (12.0.4+) und ein iPad. Diese Photoshop-Version ist mit der Creative Suite 5.5 erschienen und steht als kostenloses Update zur Verfügung. Anschließend könnt ihr Color Lava im Apple App-Store herunterladen. Da das Programm kostet aktuell 2,39 €.
Nachdem Ihr Color Lava gestartet habt, müsst ihr die App mit Photoshop verbinden. Dazu benötigt ihr eine WiFi-Verbindung in der beide Geräte kommunizieren können.

Color Lava und Photoshop CS5 verknüpfen

Öffnet innerhalb von Photoshop über "Bearbeiten → Remoteverbindungen" den entsprechenden Remote-Dialog und vergebt hier einen Dienstnamen sowie ein Passwort.

In der unteren rechten Ecke der iPad-App seht ein graues Photoshop-Icon. Ein Fingertipp auf das Icon öffnet einen weiteren Dialog in welchem nun die soeben vergebenen Daten erneut eingegeben werden müssen. Ist die Verbindung erfolgreich hergestellt, wechselt das Icon die Farbe zu blau.

Farben mischen

Innerhalb von Color Lava könnt ihr Farben nun mit dem Finger mischen und zu harmonischen Farbsets kombinieren. Dazu wird zuerst ein Farbfeld auf der rechten Seite ausgewählt. Anschließend tippt ihr mit dem Finger links in eine der Farben und fangt an, verschiedene Farben auf der Arbeitsfläche zu verteilen. Sollten die sechs Grundfarben unpassend sein, so könnt ihr mit einen Double-Tap einen detaillierten Dialog aufrufen. Hier lassen sich Farben nach den Kriterien "Farbton", "Sättigung" und "Helligkeit" definieren.

Farbfelder zusammenstellen und an Photoshop senden

Mit Color Lava lassen sich sehr intuitiv und spielerisch Farbkompositionen erstellen. Auch die Wirkung des Farbsets lässt sich recht gut bewerten.
Sobald ihr mit der Gestaltung des Sets fertig seid, könnt ihr die Farbzusammenstellung umbenennen und an Photoshop senden. Dort erscheint das Set dann im Bedienfeld "Farbfelder". Innerhalb der iPad-App kann per Tap die Vordergrundfarbe gewählt werden, so dass Color Lava auch während der späteren Gestaltung als digitale Farbpalette genutzt werden kann.

Download und Produktbeschreibung

Ihr könnt Color Lava über folgenden Link aus dem App-Store von Apple herunterladen:

• Color Lava

Adobe beschreibt das Produkt wie folgt:

Tupfer. Schnörkel. Farbmischungen. Erstellen Sie Ihre eigenen Farben und Farbdesigns für Adobe Photoshop CS5.

Mit Adobe Color Lava, einer Photoshop Touch App für Adobe Photoshop CS5 (Version 12.0.4 oder höher erforderlich), können Sie jetzt mit Ihrem iPad und Ihren Fingerspitzen Farben mischen und benutzerdefinierte Farben und Farbthemen mit fünf Farben erstellen. Sie können dann unmittelbar in Photoshop CS5 auf diese Farbkreationen zugreifen. Dazu benötigen Sie lediglich eine Netzwerkverbindung zwischen Ihrem iPad und Ihrem Computer. Sie können Adobe Color Lava auch unterwegs verwenden und Ihre Farben auf dem iPad speichern, um sie dann zu einem späteren Zeitpunkt in Photoshop CS5 zu importieren. Darüber hinaus haben Sie die Möglichkeit, Ihre mit Adobe Color Lava erstellten Kreationen per E-Mail an sich selbst und an andere zu senden.

• Tupfen, verwischen und verwirbeln Sie nach Belieben und erstellen Sie so einzigartige individuelle Farben und Farbthemen mit fünf Farben.
• Interagieren Sie mit Photoshop CS5 in Echtzeit. Tippen Sie einfach auf Ihrem iPad auf ein Farbfeld, um die Farbe im Photoshop CS5-Farbreglerbedienfeld als Vordergrundfarbe auszuwählen, oder erstellen Sie ein Farbdesign und zeigen Sie die Farben sofort danach im Farbreglerbedienfeld an.
• Nehmen Sie mithilfe der Schieberegler für Farbton/Sättigung die Feinabstimmung für Ihre Farbkreationen vor. Außerdem können Sie die HSB- und RGB-Werte anzeigen lassen.
• Mischen Sie Farben auch unterwegs. Sie können Ihre Kreationen auf Ihrem iPad speichern und dann zu einem späteren Zeitpunkt in Photoshop CS5 importieren.
• Geben Sie Ihre Farben und Farbdesigns per E-Mail an andere weiter – direkt über Adobe Color Lava.

Mit Adobe Color Lava für Photoshop CS5 können Sie Ihrer Kreativität freien Lauf lassen.

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 dem Erscheinen der Creative Suite 5.5 hat Adobe auch ein SDK (Software Developer Kit) für Photoshop auf den Markt gebracht. Mit Hilfe dieses SDK können Touch-Applications geschrieben werden, die anschließend kabellos mit Photoshop kommunizieren und das Haupt-Programm auf Tablet PCs erweitern. Hierbei liegt der Schwerpunkt natürlich auf der Touch-Bedienung.
Nun hat Adobe selbst drei Touch-Apps für das iPad veröffentlicht, die ich Euch in den kommenden drei Beiträgen kurz vorstellen möchte. Zunächst widme ich mich der App Adobe Nav die sowohl das Dateihandling als auch die Werkzeugpalette auf das iPad auslagert.

Voraussetzungen

Um Adobe Nav nutzen zu können, benötigt ihr zwingend Photoshop CS5 (12.0.4+) und ein iPad. Diese Photoshop-Version ist mit der Creative Suite 5.5 erschienen und steht als kostenloses Update zur Verfügung. Anschließend könnt ihr Adobe Nav im Apple App-Store herunterladen. Da das Programm kostet aktuell 1,59 €.
Nachdem Ihr Adobe Nav gestartet habt, müsst ihr die App mit Photoshop verbinden. Dazu benötigt ihr eine WiFi-Verbindung in der beide Geräte kommunizieren können.

Adobe Nav und Photoshop CS5 verknüpfen

Öffnet innerhalb von Photoshop über "Bearbeiten → Remoteverbindungen" den entsprechenden Remote-Dialog und vergebt hier einen Dienstnamen sowie ein Passwort.

In der unteren rechten Ecke der iPad-App seht ein graues Photoshop-Icon. Ein Fingertipp auf das Icon öffnet einen weiteren Dialog in welchem nun die soeben vergebenen Daten erneut eingegeben werden müssen. Ist die Verbindung erfolgreich hergestellt, wechselt das Icon die Farbe zu blau.

Was kann Adobe Nav denn nun?

Sobald eine WiFi-Verbindung hergestellt ist, könnt ihr auf dem iPad per Touch-Control die Photoshop-Werkzeuge antippen. Die Auswahl wird direkt auf Photoshop übertragen und ersetzt somit dort das entsprechende Bedienfeld. Darüber hinaus existieren in der iPad-App auch noch Basis-Steuerungsmöglichkeiten für den Bildschirmmodus, den 1:1-Zoomfaktor sowie den Wechsel von Vordergrund- zu Hintergrundfarbe.
Adobe Nav erlaubt es 16 Werkzeuge gleichzeitig darzustellen. Über die App-Einstellungen kann diese Auswahl natürlich editiert werden. Hier stehen alle Photoshop-Werkzeuge zur Verfügung.
Die Werkzeugleiste auf das iPad auszulagern ist grundsätzlich eine gute Idee. Für mich persönlich ist es jedoch eher eine stylische Spielerei als eine Verbesserung meines Workflows. Wer die Shortcuts für die gebräuchlichsten Werkzeuge kennt, ist damit viel schneller. Darüber hinaus können auf dem iPad keine Farben ausgewählt werden, was ein ganz klarer Minuspunkt ist.

Der zweite Bereich der App umfasst die Dateiverwaltung. Im Grund genommen werden hier nur alle geöffneten Dokumente als Miniaturansicht dargestellt und können per Fingertipp in den Vordergrund geholt werden. Für mich ist diese simple Darstellung eine ganz klare Beschleunigung meines Workflows und den Preis für die App allein schon wert.
Da ich fast immer im Vollbild-Modus arbeite, sehe ich die Tabs innerhalb von Photoshop nicht, über die ich zwischen verschiedenen geöffneten Dokumenten wechseln kann. Selbst per Shortcut muss ich verschiedene Dokumente "durchblättern" und habe keinerlei visuelle Unterstützung.
Außerdem kann ich so das iPad noch sinnvoller in meinen Arbeitsalltag integrieren. Echt cool.

Download

Ihr findet Adobe Nav im Apple App-Store und unter folgendem Link:

• Adobe Nav auf iTunes

Der Vollständigkeit halber möchte ich euch auch noch die offizielle Produktbeschreibung mit auf den Weg geben:

Erleben Sie völlig neue Möglichkeiten der Interaktion mit Photoshop CS5. Tippen oder streichen Sie über das Display Ihres iPad, um die Photoshop-Tools zu aktivieren und durch geöffnete Dokumente in Photoshop CS5 zu navigieren.

Mit Adobe Nav, einer Photoshop Touch App für Photoshop CS5 (Version 12.0.4 oder höher erforderlich), können Sie jetzt mit Ihrem iPad Photoshop-Tools aktivieren und geöffnete Photoshop-Dokumente anzeigen und auswählen. Bei bestehender Netzwerkverbindung zwischen Ihrem iPad und Ihrem Computer können Sie die Symbolleiste für Photoshop CS5 auf Ihrem iPad so einstellen, dass Sie bequem auf die am häufigsten benötigten Tools zugreifen können. Nutzen Sie die Funktionen zum Suchen, Neuanordnen, Anzeigen und Vergrößern für bis zu 200 geöffnete Photoshop-Dokumente auf Ihrem iPad. Wenn Sie auf ein Dokument auf Ihrem iPad tippen, wird es automatisch in Photoshop CS5 aktiviert. Darüber hinaus können Sie mit Ihrem iPad ganz einfach die Dateien, an denen Sie in Photoshop CS5 arbeiten, weitergeben und prüfen auch von unterwegs!

• Wählen Sie mithilfe Ihrer Fingerspitzen die gewünschten Photoshop CS5-Tools auf dem Display Ihres iPad aus.
• Passen Sie die Anzeige der Photoshop CS5-Symbolleiste auf Ihrem iPad individuell an, sodass die am häufigsten von Ihnen verwendeten Tools verfügbar sind. Sie können die Konfiguration einer Adobe Nav-Symbolleiste mit bis zu 16 Tools speichern.
• Nutzen Sie die Funktionen zum Suchen, Neuanordnen, Anzeigen und Vergrößern für bis zu 200 geöffnete Photoshop-Dokumente auf Ihrem iPad Display.
• Tippen Sie auf ein beliebiges Dokument auf Ihrem iPad, um es automatisch in Photoshop CS5 zu aktivieren.

Mit Adobe Nav für Photoshop können Sie die Vorteile von Photoshop CS5 auch auf Ihrem iPad nutzen.

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.