Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Creative Cloud im Überblick

Designinformationen auslesen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Adobe Creative Cloud stellt mit Extract einen Service auf der Website zur Verfügung, um Designinformationen aus zuvor synchronisierten Photoshop-Dateien auszulesen.
07:08

Transkript

Extract ist ein Service der Creative Cloud Webseite, der mir für Photoshop-Dateien, sprich, für User-Interface-Designs zur Verfügung gestellt wird. Ich habe hier mal die Datei GearSale.psd, die wir uns kurz mal in Photoshop ansehen wollen. Innerhalb dieser Datei habe ich hier verschiedene Schriften benutzt, wir haben verschiedene Bilder, Grafiken und vieles mehr, und dieses möchte ich jetzt ganz gerne extrahieren, in einzelne Dateien speichern, oder für Webdesign Wiedernutzen können. Schließen wir das Ganze in Photoshop, und schauen uns das Ganze im Web einmal an. Wenn ich die Datei jetzt hier innerhalb meiner Creative Cloud Files öffne, so kann ich hier auf den Menüpunkt Extract gehen. Aktuell ist das noch ein Preview-Dienst, also ein Vorschau-Dienst, der aber schon zur Verfügung zum Testen steht. Gehen wir hier mal auf 50%, da das Ganze hier auch auf meine Browser-Größe passen muss, und wir sehen jetzt hier, wir können von der Photoshop-Datei Stile extrahieren, Ebenen oder Elemente. Wie funktioniert das Ganze? Nun, wenn wir jetzt hier zum Beispiel einen Path markieren wie diesen Text, dann sehe ich jetzt Informationen wie die Breite und Höhe, und die x- und die y-Position. Ich kann mir den Text kopieren, der wird jetzt einfach in die Zwischenablage eingefügt, und, ja, wir können das mal sehen, wenn ich hier sage Pathed, dann sehe ich hier entsprechend den Text. Außerdem kann ich mir die CSS-Stile kopieren, öffnen wir uns die mal in einem Text-Editor, ein Programm, was sich dafür anbietet, ist zum Beispiel Adobe Edge Code. Erzeugen wir ein neues Dokument, und fügen jetzt den Text hier ein, und wir sehen, das ist im Prinzip CSS-Text, ich hab die Font-Family, die Farbe, die Größe in Pixel von Weight, und viele Eigenschaften mehr. Die sehen wir hier auch natürlich nochmal in der Zusammenfassung, ich kann hier auch bevorzugte Maße angeben, kann also bestimmte Eigenschaften nochmal ändern, und wir sehen auch, welche Schriftarten in meinem Design verwendet worden sind, das heißt, hierüber kann ich mir Schriftarten, Farben und Verläufe aufrufen Klicke ich hier zum Beispiel auf eine Farbe, so sehe ich hier gleich den Webcode und kann diesen in Form von RGB, oder HSL oder Hexadezimal-Webcode kopieren. Im Grunde genommen also einfach nur das entsprechende Objekt anwählen, und dann kann ich hier Informationen herunterladen. Dieses Objekt möchte ich jetzt ganz gerne haben, sprich dieses Bild, ich klicke auf herunterladen, und kann jetzt sagen, wie ich es speichern möchte. Das brauche ich ja hier nicht als PNG, ein JPG reicht aus, wir wählen mal hier die Qualität und klicken auf Speichern. Und hier wird mir jetzt auch gesagt, dass ich in meine Elemente gehen muss, hier kann ich im Prinzip alles sammeln, um es dann gemeinsam, was ich brauche, nachher herunterzuladen. Gehen wir ein bisschen weiter, hier wähle ich ebenfalls mal ein Element an, kann mir den CSS-Code dann entsprechend kopieren, der mir hier auch von diesem Objekt angegeben wird, wir können hier entweder alles kopieren, oder wieder einzelne Informationen rausziehen. Ich nehme vielleicht noch hier dieses Dokument, da kann ich mir vorstellen, dass es praktisch ist, ein PNG mit Alpha zu speichern, und man kann die Skalieren-Funktion benutzen, wenn man später Webdesigns für HiDPI-Displays erstellt, speichern wir das ebenfalls. Im Ebenenbereich kann ich hier noch sehen, dass ich von der Datei einzelne Ebenen ein- und ausschalten kann, und habe auch noch hier den Vorteil, dass ich schnell Elemente herunterladen kann, speichern kann hier auch wieder als PNG, geben wir das hier jetzt auch noch schnell aus - und jetzt warten hier schon im Elementebereich einzelne Dateien, die ich dann sehr schnell herunterladen kann. Ziehen wir Sie entsprechend heraus, und diese kann ich jetzt als Webdesigner direkt nutzen. Das ist eine schöne Funktion, um als Designer mit einem Webentwickler zusammenzuarbeiten, ich muss dem Webentwickler einfach hier nur den Link zu meiner Datei senden, die ich in meinen Creative Cloud Files hochgeladen hab, ich kann jetzt hier einen öffentlichen Link erstellen, und ich muss auf jeden Fall die Verwendung von Extract hier in den Erweiterten Optionen zulassen. Dann kann dieser Webentwickler hingehen, und sich aus meinem Photoshop-Design einfach die benötigten Elemente herausziehen, das bezieht sich eben auf das Kopieren von CSS-Stilen, Texten, und die Bilder, und natürlich hat er eben auch Zugang zu den ganzen Breitenangaben, entweder in Prozent oder in Pixeln, je nachdem, wie er es dann nachher braucht. Extractor steht im Übrigen auch als Bedienfeld in Dreamweaver zur Verfügung, hier mit einem kleinen Tutorial, ich kann aber auch Eigendateien natürlich benutzen, ich klicke dazu auf Jetzt Beginnen, kann entweder jetzt eine Photoshop-Datei hochladen, oder ich gehe in meinen Creative Cloud Ordner, und kann hier auf eine bestehende Photoshop-Designdatei zugreifen. Wir wollen jetzt mal ein neues Dokument erzeugen, oh, jetzt brauche ich mal hier etwas Text, wir nehmen uns mal hier diesen Text, klicken da einmal drauf, und können sagen, Text kopieren, und den Text, den können wir natürlich hier dann einfach in unser Design einfügen. Geben wir dem Text jetzt eine Formatierung, wir nennen das hier einfach mal .standard, ich möchte es nur auf dieser Seite definieren, also bestätige ich das mit Return, und kann jetzt ebenfalls die Stile hier kopieren, indem ich sage, CSS kopieren. Mit einem Rechtsklick auf diesen Selector, kann ich sagen, Stil einfügen, und jetzt wird entsprechend der Stil aus der Photoshop-Datei hier ausgelesen, und mein Text damit formatiert, das kann man vielleicht besser vergleichen wenn wir hier mal in die 100 Prozent Darstellung gehen, hier kann man schon wesentlich besser sehen, dass der Text jetzt hier die Formatierung übernommen hat. Auch Bildelemente kann ich hier übernehmen, wir geben das Bild dafür an, können jetzt sagen, Element extrahieren, ich speichere das hier in meine Website-Datei rein, beispielsweise hier als PNG mit Transparenz oder als JPG, mit einer bestimmten Qualität, klicke jetzt hier auf Speichern, das Element wird entsprechend extrahiert, und steht jetzt innerhalb meiner Website-Dokumente hier zur Verfügung, das heißt, hier haben wir's dann, oder noch einfacher, das Element kann einfach per Drag&Drop von hier in mein Design gezogen werden, hier kann ich's dann fallen lassen, speichere vielleicht noch schnell meine Seite ab, als erstes muss ich natürlich mein HTML-Dokument speichern, das habe ich noch gar nicht gemacht, und jetzt fragt er mich danach, wie soll das Element heißen, in dem Fall nennen wir es backpack_1.png, drücken Return, und es wird jetzt hier meiner Seite hinzugefügt, und ich kann, wenn ich möchte, weitere Stile oder Eigenschaften hier definieren. Auf die Art und Weise kann man also auf Basis einer Photoshop-Designdatei sehr einfach Elemente extrahieren, die ich in meinem Photoshop-Design entsprechend drinhabe, und kann diese dann jetzt in Dreamweaver schnell übernehmen.

Creative Cloud im Überblick

Lernen Sie Adobes Creative Cloud und all ihre Applikationen kennen. Sven Brencher zeigt, was hinter CC und den Applikationen für Web, Design, Fotografie und Publishing steckt.

7 Std. 24 min (55 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Mit dem Creative Cloud Update vom Oktober 2014 wurde Adobe Kuler umbenannt in Adobe Color.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!