Inhalt
Vor einigen Monaten fand bei Adobe mit dem reaktionsschnellen Webdesign-Tool Edge Reflow CC ein großer Fortschritt statt. Dies war die Erstellung des Generator-Plugins, das Photoshop (hier erfahren Sie, wie Sie Photoshop herunterladen) mit Edge Reflow verknüpft und es Ihnen ermöglicht, Ihr Weblayout in Photoshop ohne Codierung schnell direkt in Edge Reflow zu exportieren.
Wenn ein Designer zuvor ein Weblayout erstellen wollte, musste er ein Layout erstellen, es in einzelne Komponenten zerlegen und diese in ein Webdesign-Programm verschieben. Das würde viel Zeit in Anspruch nehmen.
Das Generator-Plugin vereinfacht diesen Vorgang.
Wie es geht
Als erstes müssen Sie Photoshop CC herunterladen und dann Edge Reflow CC herunterladen und installieren. Dies soll sicherstellen, dass das Generator-Plugin korrekt funktioniert.
Wenn dies nicht der Fall ist, laden Sie das Generator-Plugin herunter und installieren Sie es direkt. Das sollte alle Probleme mit der Verbindung beheben.
Gehen Sie als Nächstes zu Bearbeiten: Einstellungen: Plug-Ins. Klicken Sie im Abschnitt Generator auf das Kontrollkästchen Generator aktivieren und auf OK, um die Einstellung zu speichern.
Eine andere Sache, die Sie bei der Verwendung von Generator wissen sollten, ist, dass es dateispezifisch ist, was bedeutet, dass es für jede Datei aktiviert werden muss.
Der Grund dafür ist, dass Sie diese Funktion möglicherweise nicht für jedes Projekt aktivieren möchten.
Um den Generator für eine bestimmte Datei zu aktivieren, klicken Sie auf Datei: Generieren: Image Assets.
Sobald Sie Image Assets aktiviert haben, wird der Ordner BracketsIO-Assets in meinem Dateiverzeichnis erstellt, wie hier gezeigt:
Wenn wir den Ordner BracketsIO-Assets öffnen, sehen Sie alle Image-Assets für dieses Projekt, die automatisch für dieses Projekt generiert wurden.
Der interessante Teil ist, wie diese Dateien erstellt wurden. Um diese Antwort zu erhalten, gehen Sie zum Ebenenbedienfeld.
Beachten Sie, dass der Rasterordner geöffnet wurde. Im hervorgehobenen Bereich oben sehen Sie, dass mehrere der Ebenen mit der Erweiterung .webp benannt wurden. Dies ist Teil der Generatorfunktion.
Wenn die Image-Assets aktiviert sind, werden die Assets erstellt. Darüber hinaus wird diese Änderung sofort im Ordner "Assets" aktualisiert, wenn Sie eine Änderung an einer der Ebenen vornehmen.
Wenn Sie mit Ihrem Layoutprojekt zufrieden sind, erstellen Sie in der nächsten Phase ein Edge Reflow-Projekt. Klicken Sie dazu auf Datei: Generieren: Edge-Reflow-Projekt.
Es wird ein Ordner erstellt, der alle Assets für Edge Relow enthält, die Sie über Edge Reflow öffnen können.
Starten Sie als Nächstes Edge Reflow. Beachten Sie das Photoshop CC Connect-Symbol oben rechts auf dem Bildschirm. Klick es an.
Daraufhin wird das Dialogfeld angezeigt. Klicken Sie unten links auf die Schaltfläche Photoshop-Synchronisierung, um Edge Reflow mit Photoshop zu synchronisieren.
Über das Photoshop CC Connect-Bedienfeld können Sie das Layout mit dem gesamten CSS für Ihr Projekt in Edge Reflow importieren.
Wie bereits erwähnt, werden diese Änderungen im Assets-Ordner aktualisiert und können in Edge Reflow angezeigt werden, wenn Sie Änderungen an der ursprünglichen Photoshop-Datei vornehmen.
Edge Reflow-Tipps
Es ist wichtig zu wissen, dass der gesamte Text in der Edge Reflow-Datei bearbeitbares HTML ist. Sobald Sie ein Projekt in Reflow importiert haben, können Sie bei Bedarf ein ansprechendes Layout mit Haltepunkten erstellen.
Sobald Ihr Layout fertig ist, können Sie HTML und CSS extrahieren und das gesamte Projekt in ein HTML-Programm wie Dreamweaver verschieben, um den Entwurfsprozess abzuschließen. Sie können das Projekt im Rahmen des Designprozesses auch mit anderen Fachleuten teilen.
Im Wesentlichen handelt es sich bei Edge Reflow um ein Prototyping-Tool, mit dem Sie schnell und einfach mit verschiedenen Design-Layouts experimentieren können.
Wenn Sie eine Site erstellen, die mehrere Seiten enthält, können Sie jede Seite dieses Designs mithilfe des Photoshop CC Connect-Bedienfelds in Reflow importieren. Öffnen Sie zuerst die Seite in Photoshop und klicken Sie dann in Edge Reflow auf die Schaltfläche Neue Seite erstellen. Dieser Teil des Projekts wird importiert.
Sie können diese Designverbindung auch dann verwenden, wenn Sie nur an Bildern arbeiten. Sie würden jedes Bild mit der entsprechenden Bilderweiterung benennen (z. B. JPG, PNG, GIF). Sie können diese Erweiterungen Ebenen, Gruppen oder intelligenten Objekten hinzufügen. Sobald Ihr Projekt in Photoshop abgeschlossen ist, können Sie die gesamte Datei in Edge Reflow importieren.
Neben Photoshop können Designer auch Fireworks und Illustrator CC verwenden. Edge Reflow ist auch in Edge Inspect- und Edge Web-Schriftarten integriert.
Fazit
Die Brücke zwischen Photoshop und Reflow bietet Designern einige großartige neue Tools und löst viele Designherausforderungen. Es ist nicht mehr erforderlich, Bilder auseinanderzuschneiden und die Teile in ein HTML-Designprogramm zu exportieren. Es ist natürlich nicht perfekt, aber es erledigt die Aufgabe, für die es entwickelt wurde, effizient und schnell.
Um mit Reflow auf dem Laufenden zu bleiben, sollten Sie einige Projektdateien herunterladen und sie verwenden, um zu sehen, wie der Prozess funktioniert. Sie benötigen eine PSD-Vorlagendatei und eine vollständige Reflow-Datei.
Wörter: Nathan Segal
