Creative Cloud im Überblick

Responsive Design mit Edge Reflow erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Visualisierung von responsiven Designs erfolgt in der Adobe Creative Cloud mit Edge Reflow. Das Programm arbeitet hierbei äußerst intensiv mit Photoshop zusammen.
13:02

Transkript

Vielleicht haben Sie auch schon von Responsive Webdesign gehört. Da geht es ja im Prinzip darum, dass sich die Webseiten dem jeweiligen Anzeigegerät anpassen, und das kann einige Herausforderungen bei der Gestaltung eines solchen Designs mit sich bringen, denn im Prinzip muss ich hier die Gestaltung ja für verschiedene Mediengrößen optimieren. Und genau das soll Edge Reflow mir ermöglichen. Hier kann ich mir verschiedene Breiten anlegen, und jetzt mein Design entsprechend optimieren, ob ich es hier auf einem Smartphone, auf einem Tablet oder auf einem Desktop-Computer darstellen lasse. Das Schöne ist, dass Edge Reflow auch sehr einfach mit Photoshop zusammenarbeiten kann. Jetzt holen wir uns mal die ganze Programmoberfläche, da habe ich zwar nicht mehr viel Platz, in meinem kleinen Bildschirm jetzt für die Desktop-Variante, aber wir können jetzt hier mal alles sehen, was wir hier an Elementen in diesem Design entsprechend haben. Und wenn wir ein Element anwählen, dann können wir hier auf der linken Seite entsprechend Layout und Stilinformationen anlegen, Wir können aber auch hier mit Edge Reflow neue Elemente hinzufügen, wie Schaltflächen, Bilder, Boxen oder Textelemente. Im oberen Bereich kann ich die entsprechenden Breitenangaben definieren, und hier auch weitere Breiten hinzufügen. Wir wollen uns das einmal anschauen mit einem neuen Projekt. Also nehmen wir mal dieses Willkommens-Projekt raus und dann sagen wir hier mal, Neues Projekt erzeugen, und zunächst kann ich hier bestimmte Seiten-Eigenschaften festlegen, also wie viel Spalten will ich insgesamt haben, nehmen wir mal hier sechs, und der Spaltenabstand, den möchte ich hier gerne auf 4 % haben, und, ja, die Seitenbreite nehmen wir hier mal nur 80 % der Seite, oder sagen wir mal 90 % der Seite, der Webseite. Hier kann ich jetzt weitere Abstände zur Seite definieren, oder beispielsweise einen Hintergrund hinzufügen. Sagen wir hier mal Add a Color, und dementsprechend werde ich hier mal so ein Grau hinzufügen für dieses Element. Es hängt immer davon ab, was ich eigentlich angewählt hab, also ob ich jetzt hier zum Beispiel den Hintergrund angewählt hab, oder den Seitenhintergrund, das heißt, hier könnte ich jetzt zum Beispiel noch ein dunkleres Grau an der Kante anlegen, und jetzt kann es dann auch schon losgehen mit eventuellen Elementen, also ich habe hier meine Page, und den Page-Container, und wir sehen auf der linken Seite dann die entsprechenden Eigenschaften-Attribute. Wir wollen jetzt hier als erstes mal ein kleines Bild hinzufügen, wählen wir jetzt hier also Add Image, und hier wähle ich jetzt mal so ein PNG-Element, das positionieren wir mal hier links oben, sagen wir mal, mit einem Abstand von 17 und 20 Pixeln. Den kann ich dann aber auch in den Layout- Eigenschaften noch mal genauer definieren, hier kann ich jetzt hingehen und sagen, von oben nehmen wir mal genau 20 Pixel, von der linken Kante dann hier zum Beispiel 3 %, oder - natürlich kann ich das auch umschalten auf Pixel, und sagen ebenfalls 20 Pixel Abstand. Dann möchten wir hier einen Text hinzufügen, ziehen wir dafür mal einen Rahmen auf, der Rahmen soll ein bisschen ausgerichtet sein natürlich an meinen Spalten, das heißt, den Rahmen positioniere ich jetzt hier mal an den Spalten sozusagen, und kann jetzt hier entsprechenden Text einfließen lassen, ich hab mir dafür ein bisschen Text in die Zwischenablage kopiert, den füge ich jetzt hier entsprechend ein. Und wir wollen zu guter Letzt noch ein Bild positionieren, das werden wir mal hier auf der rechten Seite einfügen, nehmen wir hier so ein JPG-Dokument, das ist vielleicht ein bisschen stark groß, das werde ich jetzt erstmal verkleinern, und dementsprechend hier auf der rechten Seite einfügen. So finde ich jetzt mein Design erstmal ganz gut, wir können uns das jetzt anschauen im Chrome-Browser, speichern wir das Ganze jetzt mal hier auf dem Desktop ab, und aktuell kann ich dann hier jetzt eine Vorschau meines Designs sehen. Das ist natürlich noch nicht ganz das, was ich wollte, das heißt, wir wollen jetzt hier verschiedene Breiten angeben. Wie sieht also das Design aus, wenn es jetzt hier sagen wir mal eine Browsergröße von 650 Pixeln hat, oder 550 Pixeln, ich würde jetzt hier einmal auf das Plus klicken, und kann jetzt sozusagen hier die entsprechende Browserbreite angeben. Ich wollte ja 550 haben, und das wäre jetzt hier beispielsweise mal ein Tablet, Ich muss mich jetzt hier ein bisschen behelfen, das sind nicht die richtigen Größen für Smartphones und Tablets, die ich jetzt angebe, aber ich hab hier einfach nicht genug Platz bei der Bildschirmauflösung, da kann ich hier schwer sonst damit arbeiten. Und zwar soll das die maximale Breite sein, jetzt definieren wir ein zweites Design, gehen also hier rein und sagen, da soll das Ganze dann so aussehen, zum Beispiel jetzt für ein Smartphone, bis zu einer Breite von vielleicht 350 Pixeln ungefähr, klicken wir hier wieder drauf, wählen das an, und können dann hier wieder sagen, dass wir hier eine Breite von 350 Pixeln haben wollen für ein Phone, und zwar soll das hier der maximale Bereich sein. Und, ja, für ein Phone würde mir das zum Beispiel besser gefallen, wenn das Bild zum Beispiel hier unten steht, und der Text ein Stück weiter nach rechts kommt, ungefähr so, das Bild machen wir hier jetzt auch entsprechend größer, so ungefähr, und bei der Tablet-Variante sehe ich jetzt hier die entsprechend andere Auflösung, auch das können wir uns dann einfach mal im Browser anschauen, Browserfenster ein bisschen kleiner machen - jetzt sieht man, ab dieser Breite springt das Bild dann nach unten, rechts neben den Text. Und so kann ich jetzt hier beliebig viele Auflösungen definieren, und sagen, ob das minimale oder die maximale Breite ist. Jetzt können wir neben den Layout-Informationen, die wir jetzt hier sehen, die sich hier blau hinterlegt für Tablet, und violett hinterlegt für die Phone-Ansicht unterscheiden, jetzt kann ich hier auch noch Stilattribute hinzufügen. Wir machen das mal am Beispiel von dem Text, ich werde den Text jetzt hier mal ein bisschen mittig anpassen, vielleicht ein bisschen schmaler, so dass wir das Bild hier verschieben können, das ist die Tablet-Ansicht jetzt hier, und jetzt möchte ich dem Text einen kleinen Schlagschatten hinzufügen, und das finde ich hier unter den Styling-Attributen. Wenn ich weiter nach unten gehe, kann ich hier sagen, Schlagschatten hinzufügen, ich nehme jetzt mal hier so ein helles Grau, und hier können wir auch die Transparenz von dem Schatten entsprechend steuern, so ungefähr, die Weichzeichner vielleicht hier nur 1 Pixel nach rechts und nach unten, und 3 Pixel weichgezeichnet, so weit gefällt mir das ganz gut. das wird jetzt hier auch übernommen, für beide Varianten, hier können wir dann ebenfalls vielleicht noch mal die Größenangaben ein bisschen aktualisieren, das Bild vielleicht nochmal ein bisschen verschieben, damit es vielleicht noch ein bisschen netter ausschaut, auch auf der Smartphone Variante, dass das Ganze nicht ganz so stark am Rand hier klebt. Also, die Designs lassen sich sehr gut im Nachhinein bearbeiten, und wenn man etwas global haben möchte, dann kann man das Objekt hier entsprechend anwählen, Hier beispielsweise könnte ich jetzt sagen, das hätte ich ganz gerne nicht nur für diese Eigenschaft, sondern das würde ich ganz gerne für alle Eigenschaften übernehmen, das heißt, der Abstand ist jetzt hier für Phone und Tablet, bei beiden der Gleiche, das kann man dann hier entsprechend einschalten. Man kann sich den CSS-Code tatsächlich hier auch herauskopieren, dafür kann man einzelne Objekte anwählen, man sieht jetzt hier den Aufbau des HTML-Quellcodes, und wenn ich möchte, kopiere ich mir bestimmte Eigenschaften in die Zwischenablage, die ich dann in Dreamweaver in mein Stylesheet übernehmen kann. Wir können hier auch verschiedene Seiten einrichten, das heißt, hier habe ich jetzt verschiedene Seiten, die ich für ein Design nutzen kann, um auch hier mehrseitige Designs darstellen zu können, und das Besondere ist, dass ich hier eine sehr gute Photoshop-Integration habe, ich kann entweder Photoshop-Daten direkt importieren, oder aus Photoshop ein Design an Edge Reflow übergeben. Und auch das wollen wir uns einmal anschauen - wir beenden mal hier dieses Projekt - und in Photoshop sieht man habe ich hier bereits eine Webseite gestaltet. Das natürlich nur in einer Auflösung, und die möchte ich jetzt verschiedenen Auflösungen anpassen. Dafür kann ich hier hingehen, und sagen: Generieren machen wir das einfach mal, und Photoshop öffnet mir jetzt hier einen Ordner, hier liegt ja die Datei, dort kommt jetzt so ein Ordner, und dort liegt jetzt ein Reflow-Projekt, was ich hier mal öffnen kann. Jetzt sagt er mir als erstes Mal, dass hier Schriftarten fehlen, nämlich die Kepler Standard, jetzt hab ich zwei Möglichkeiten, Ich kann die ersetzen durch eine andere Schrift, oder ich füge hier eine Webschrift hinzu, vielleicht finde ich ja etwas anderes, was gut passt. Eigentlich habe ich sogar noch eine dritte Möglichkeit, ich kann nämlich hier eine Typekit-ID von einem Typekit-Account hinzufügen, um diese Schrift zu laden. Ich entscheide mich mal die auf die Schnelle zu ersetzen, vielleicht durch diese hier, bestätige das Ganze mit OK, und jetzt wird mir auf Basis meiner Photoshop-Datei hier entsprechend ein Design zur Verfügung gestellt. Und wir können uns das mal anschauen, so verhält es sich momentan, in den verschiedenen Breiten, jetzt kann ich eben auch hingehen und sagen, hier hätte ich ganz gerne eine Auflösung festgemacht, kucken wir mal, vielleicht hier so 1080, für ein solches Display wollen wir jetzt mal eine Auflösung definieren, jetzt kann ich hier die Eigenschaften der einzelnen Elemente anpassen, wie soll das dann in dieser Auflösung ausschauen, man kann die Sache natürlich hier auch noch bearbeiten, das heißt, ich wähle das Objekt an, könnte hier bei den Stilen sagen, hier hätten wir gerne einen border-Radius von 10 Pixeln, also eine leichte Abrundung, ich möchte vielleicht noch einen Schlagschatten hinzufügen, das hätte ich natürlich auch soweit in Photoshop machen können, aber man sieht jetzt hier dran, es ist nicht zu spät, bestimmte Dinge dann eben in Edge Reflow auch nochmal zu gestalten. Das Ganze geht auch noch einen Schritt weiter, denn ich kann natürlich jetzt auch die verschiedenen Auflösungen hier definieren, das heißt, ich gehe einfach in eine andere Größe, und passe mir jetzt die Elemente dann für diese Auflösung an, wählen wir die Auflösung nochmal genauer aus hier, hier nehmen wir mal jetzt genau 680 Pixel, so ungefähr, und machen jetzt hier eine leichte Anpassung, die beiden Elemente möchte ich untereinander haben, dieses jetzt hier oben, so ungefähr, könnte es für diese Auflösung passen, hier unten habe ich jetzt ebenfalls noch Elemente, die wir auswählen können, die würden jetzt hierhin passen, und wir können jetzt hier kucken, wie es mit den beiden Auflösungen aussieht, hier muss ich eventuell jetzt nochmal nachjustieren, so - so war es glaube ich vorher - und so sieht es jetzt aus, in verschiedenen Auflösungen. Ich kann also zwischen den verschiedenen Designs jetzt hier hin- und her wechseln. Angenehm ist natürlich auch, dass ich jetzt hier Photoshop-Assets habe, und dementsprechend kann ich das mit Photoshop synchronisieren, wenn es also in Photoshop Änderungen gibt. Wenn ich jetzt hier mal reingehe, in meine Assets-Library, sehe ich ja hier auch schon einzelne Elemente aus meiner Photoshop-Datei, das ist zum Beispiel jetzt dieses Hero-PNG, und wenn ich möchte kann ich das in Photoshop entsprechend bearbeiten. Gehen wir dazu mal zu Photoshop, und machen jetzt hier eine Änderung, hier haben wir ja dieses Element, und wir sagen jetzt mal, ich möchte hier die Belichtung anpassen, und den Kontrast ändern, ich werde mal die Farbtemperatur sehr dramatisch anpassen, damit man es hier auch gleich sieht, das Licht da ein Stück weit zurückfahren, und hier vielleicht die Klarheit etwas reduzieren, soll ruhig ein bisschen weichgezeichnet aussehen. die Dynamik an - ja, wunderbar, das Ganze wird jetzt hier entsprechend aktualisiert, dann kann ich jetzt hier mein Bild aktualisieren, ich sehe Click to update, und das Bild wir jetzt hier entsprechend neu geladen. Auf diese Art und Weise können wir jetzt eben schnell Änderungen zwischen Edge Reflow und Photoshop abstimmen, und haben so immer die aktuellen Design-Elemente jetzt hier in Edge Reflow zur Verfügung. Das Ganze ist aktuell noch eine Preview, das heißt, mit dem Code sollte man ein bisschen vorsichtig sein, obwohl man hier auch den Code entsprechend exportieren kann - das mache ich jetzt mal hier auf den Desktop - und diesen Code kann ich dann in einem Code-Editor weiterbenutzen, ich bekomme jetzt hier entsprechende HTML- und CSS-Dateien und einen Ordner mit den Bildern. Das könnte ich also jetzt einem Entwickler weiter an die Hand geben, der jetzt vielleicht noch die CSS-Dateien und die HTML-Seite überprüft, oder sich einfach nur bestimmte Elemente da herausziehen kann.

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!