Share
Edge Reflow ist ein relativ neues Programm von Adobe, das 2012 angekündigt und im Februar 2013 veröffentlicht wurde. Mit dem Elevator Pitch können Sie "das responsive Web entwerfen" und "schöne responsive Designs erstellen". Das Schwierige daran ist, dass Sie es momentan nicht direkt verwenden können, um Responsive zu erstellen Websites, nur ansprechbar Designs.
Dies bedeutet, dass Sie Reflow öffnen und seine visuelle Designschnittstelle verwenden können, um funktionsfähige Designprototypen mit Farbschemata, Layouts, Formularelementen, Links und Textinhalten zu erstellen. Sie können eine Vorschau Ihres Designs sowohl innerhalb des Tools als auch in Chrome anzeigen. Sie können Haltepunkte festlegen, Ihr Design ansprechend gestalten und dann mithilfe des Adobe Edge Inspect-Tools eine Vorschau für den mobilen Einsatz anzeigen.
Im Moment ist das jedoch so weit wie möglich. Sie können Ihr Design noch nicht als tatsächliche Website exportieren. Es gibt keine direkte Kontrolle über HTML und CSS, die das Design ausmachen, und Adobe macht deutlich, dass der Code für Vorschauen genau das sein sollte. Vorschau-Code und nicht in Produktionsqualität. Nach dem Entwurf Ihrer Site in Reflow müssen Sie sie ein zweites Mal zusammenstellen, um Code zu erstellen, den eine Live-Site verwenden kann.
Für einige Designer ist das einfach gut; Die Schaffung eines funktionalen Prototyps, den Kunden grünes Licht geben können, ist ein wesentlicher Bestandteil ihres Prozesses. Für viele Designer ist das Erstellen einer Site jedoch doppelt so, dass Reflow zu einem Werkzeug wird, das noch zu ineffizient ist, um eine responsive Website-Erstellung zu ermöglichen.
Es wird geredet, dass zu einem unbestimmten Zeitpunkt in der Zukunft vollständige Exporttools hinzugefügt werden. In anderen Gesprächen wird gesagt, dass Reflow immer nur ein Entwurfstool ist und niemals einen Workflow für die vollständige Erstellung von Websites enthält. Während sich die Dinge in der Zukunft ändern können, können wir im Moment nur davon ausgehen, dass für diejenigen, die am Ende ihres Designprozesses einen funktionierenden Standort haben möchten, Reflow möglicherweise nicht so gut passt.
Das heißt, während Reflow vielleicht nicht vollständig ist Website-Erstellung Tool hat es einige Funktionen, die es sehr nützlich machen können Design von Website-Elementen Werkzeug.
Für mich sind die größten Vorteile, die es derzeit bietet, die Photoshop-ähnlichen CSS-Steuerelemente, mit denen Sie die Auswirkungen Ihrer Auswahl in Echtzeit sehen können. Sie können Farben, Hintergründe, Ränder, Schatten, Schattierungen, gekrümmte Ecken, Deckkrafteinstellungen, Filter usw. in einer sehr vertrauten Umgebung steuern.
Reflow bietet zwar keine Code-Export-Tools für eine vollständige Site, bietet jedoch die Möglichkeit, CSS für jedes Element einzeln auszugeben. Klicken Sie dazu einfach auf das Element, an dem Sie gerade arbeiten, und klicken Sie dann unten im Bildschirm auf <> Symbol am Ende des Breadcrumb-Pfads. Daraufhin erhalten Sie ein Popup-Fenster mit dem CSS des Elements, das Sie kopieren und einfügen können:
Mit dieser Funktion können Sie einzelne Elemente entwerfen, die in Ihrer Site verwendet werden sollen, und deren CSS für die Verwendung in Ihrem produktionsbereiten Site-Projekt kopieren. Möglicherweise müssen Sie einige unerwünschte Layout-Codes entfernen, z. B. für Ränder oder Höhen. Der Styling-Code ist jedoch gut geeignet, um ihn direkt in eine CSS-Datei einzufügen. Wenn Sie mit Photoshop vertraut sind, können Sie dies mit dem Erstellen von Ebenenstilen vergleichen und für die spätere Verwendung speichern.
Unabhängig davon, ob Reflow jemals zu einem voll funktionsfähigen Website-Erstellungswerkzeug wird oder nicht, es gibt einige wirklich nützliche Dinge, die Sie jetzt tun können, und wir werden fünf davon behandeln.
Adobe Edge Fonts ist eine beeindruckende Sammlung von kostenlos zu verwendenden Webfonts, die in jede Website geladen werden können. Fügen Sie dazu ein kleines JavaScript-Snippet hinzu Abschnitt der Seite wie folgt:
Die Schrift wird dann in regelmäßiger Weise über CSS angewendet, z.
p font-family: abel, serifenlos; Schriftgewicht: 300; font-style: normal;
Edge-Schriftarten scheinen ein größeres Problem mit FOUT (Flash von ungestyltem Text) zu haben als Google-Schriftarten, die über eine geladen werden tag in der In diesem Abschnitt werden jedoch Methoden zur Minimierung des in der Adobe-Dokumentation beschriebenen Effekts bereitgestellt.
Wie jeder Designer, der jemals mit Schriftarten gearbeitet hat, weiß, unterscheidet sich die Art und Weise, wie eine Schrift in einem Auswahlfenster aussieht, ganz anders als sie aussieht, wenn der gewünschte Textinhalt, die Schriftgröße, Farben und andere Effekte in das Bild eingefügt werden. Durch die Verwendung von Reflow für die Vorschau von Edge-Schriftarten mit all diesen Dingen können Sie den mühsamen Prozess vermeiden, Ihren Embed-Script-Tag und verschiedene CSS-Stile jedes Mal ändern zu müssen, wenn Sie eine neue Schriftart ausprobieren möchten. Hier ist wie:
Fügen Sie Ihrer Leinwand ein "Textfeld" hinzu, indem Sie das Textfeld-Werkzeug oben links in der Reflow-Oberfläche auswählen:
Dann zeichnen Sie ein Textfeld auf die Leinwand:
Geben Sie den Text ein, mit dem Sie eine Vorschau der Schriftarten anzeigen möchten, indem Sie das Standardwort "Text" ersetzen, das nach dem Zeichnen des Textfelds angezeigt wird.
Legen Sie die gewünschten Styling-Eigenschaften fest, indem Sie auf klicken Styling Tab auf der linken Seite der Benutzeroberfläche:
Hier können Sie die Schriftgröße, die Schriftfarbe, die Schriftbreite und alle anderen Eigenschaften der Textfarbe einstellen Typografie oben abgebildete Tafel.
Unter diesem Panel sehen Sie auch das Hintergrund und Grenzen In diesem Bereich können Sie das Farbschema, in dem der Text verwendet wird, vollständig simulieren:
Nachfolgend finden Sie unseren Text mit Einstellungen für Farbe, Größe, Gewicht und Hintergrund:
Hinweis: Ich habe auch den Text zentriert und ein paar Füllungen unter hinzugefügt Layout Tab.
Jetzt können Sie mit der Vorschau der Schriftarten beginnen, um zu sehen, welche mit Ihrer gewünschten Größe, Ihrem Gewicht und Ihrem Farbschema funktionieren. Möglicherweise möchten Sie die Größe und das Gewicht ein wenig anpassen, um die Abweichungen von einer Schriftart zur nächsten auszugleichen.
Um neue Schriftarten auszuwählen, vergewissern Sie sich, dass Ihr Textfeld ausgewählt ist, und klicken Sie auf T+ Symbol rechts von Schrift Etikette:
Dadurch wird ein Fenster mit einer Reihe von Kantenschriftarten zur Auswahl angezeigt:
Wenn Sie eines sehen, das Sie mögen, klicken Sie darauf und nach einer kurzen Ladezeit wird es auf Ihr Textfeld angewendet. Sie können die verschiedenen Schriftarten so lange testen, bis Sie eine gefunden haben, die Sie mögen, z.
Nachdem Sie die gewünschte Schriftart ausgewählt haben, können Sie zur Edge-Schriftarten-Website wechseln, um den Code zum Einbetten von JavaScript zu erhalten.
Suchen Sie einfach nach dem Namen der ausgewählten Schriftart, klicken Sie darauf, und der Einbettungscode wird unten für Sie angezeigt.
Mit den CSS3-Einstellungen von Reflow können Sie einige ziemlich beeindruckende Texteffekte erstellen, ähnlich wie beim Erstellen von Textebenenstilen in Photoshop. Alle diese Stile können per Handcodierung erstellt werden, aber die Möglichkeit, Änderungen in Echtzeit zu sehen, kann von unschätzbarem Wert sein. Hier sind einige Beispiele für reine CSS-Texteffekte und die Einstellungen, mit denen sie erstellt werden.
Verwendete Einstellungen (Kredit: markdotto.com):
Verwendete Einstellungen:
Verwendete Einstellungen:
Eine der coolsten Möglichkeiten, die Sie mit CSS3 machen können, ist das Erstellen schicker Schaltflächen, für die zuvor große lumpige Bilder erforderlich waren. Wie bei den Texteffekten im letzten Abschnitt machen die Echtzeit-CSS-Einstellungen von Reflow diesen Vorgang schneller und intuitiver als die Handcodierung. Hier sind ein paar CSS-reine Schaltflächenbeispiele, die in Reflow erstellt wurden.
Verwendete Einstellungen:
Verwendete Einstellungen:
Neben der Möglichkeit, Texteffekte und Schaltflächenstile zu erstellen, gibt es in Reflow auch Werkzeuge zum Platzieren von Bildern, Texteingaben, Auswahlfeldern, Kontrollkästchen und Optionsfeldern auf der Leinwand. Außerdem können Sie generische "Boxen" erstellen, die im Wesentlichen den "divs" entsprechen. Zwischen all diesen Funktionen befinden sich die erforderlichen Bausteine zum Erstellen von Klassen für UI-Kit-Stylesheets.
Sie können mit Ihrem eigenen Design von vorne anfangen oder vorhandene PSD-UI-Kits nachahmen. Wenn Sie von der PSD zur Benutzeroberfläche wechseln möchten, verfügt Reflow über eine Funktion fast Super, mit sofort einsatzbereiten PSD-Kits, und das ist Photoshop CC Connect.
Nachdem Sie ein PSD-UI-Kit heruntergeladen haben, z. B. dieses coole kleine kostenlose Flat-Kit von Blaz Robar, öffnen Sie es in Photoshop. Bei diesem Kit sehen Sie Folgendes:
Klicken Sie dann in Reflow bei einem neuen Dokument auf die Schaltfläche Photoshop CC Connect Symbol oben rechts in der Benutzeroberfläche:
Klicken Sie im angezeigten Popup-Fenster auf Neue Seite erstellen Taste:
Reflow versucht, ein Duplikat der aktuell in Photoshop angezeigten Elemente zu erstellen. Im Falle dieses UI-Kits erhalten Sie Folgendes:
Das Ergebnis ist vielleicht nicht ganz das, was wir uns vielleicht erhofft haben. Ich bin sicher, es gibt bevorzugte Workflows für die Erstellung von PSDs, die einwandfrei in Reflow importiert werden, aber es ist tatsächlich nützlicher, als es auf den ersten Blick erscheint. Der Grund ist, dass, obwohl Dinge noch nicht so aussahen, wie wir sie brauchen, die wesentlichen Teile des Kits zusammen mit ihren Farben vorhanden sind. Dies erspart Ihnen die Mühe, Elemente zu erstellen und Farbcodes zu kopieren. Sie können die generierten Elemente verschieben und optimieren, bis sie dem Original ähneln.
Accentsconagua
px anstatt %. Dadurch wird verhindert, dass die Elemente unvorhersehbar schrumpfen und sich ausdehnen, wenn Sie die Breite der Leinwand ändern oder die Größe des Fensters "Reflow" ändern.relativ zu absolut. Auf diese Weise können Sie Elemente ziehen und an der Stelle positionieren, an der Sie Überlappungen vermeiden möchten, damit sie besser sichtbar sind.relativ zu absolut So können Sie es immer noch an der gewünschten Stelle auf der Leinwand platzieren.Wenn Sie fortfahren, werden Sie möglicherweise Elemente finden, für die Bilder erforderlich sind, die nicht nur mit den Reflow-CSS-Einstellungen ausgeführt werden können. Daher benötigen Sie Bilder wie die kleinen Pfeile dieses UI-Kits oder die Social-Icon-Bilder. Hier kommt eine weitere coole Funktion von Photoshop CC Connect ins Spiel.
Um ein Bild sofort von der ursprünglichen PSD zu importieren, müssen Sie nur dessen Ebene suchen und es in den gewünschten Bilddateinamen umbenennen. Zum Beispiel möchte ich in dieser PSD auf den kleinen weißen nach unten zeigenden Pfeil zugreifen, den Sie auf den orangefarbenen Elementen sehen. Zuerst finde ich seine Ebene in der PSD, die in diesem Fall unter dem Ordner "Image Nav Copy" mit ">" gekennzeichnet ist. Ich benenne diese Ebene in den Dateinamen um, den das exportierte Pfeilbild haben soll, d. H. "Downarrow.png"..
Ich klicke dann gleich an Photoshop CC Connect Das Symbol, mit dem wir die PSD ursprünglich importierten, drückte ich nur auf Asset-Bibliothek Taste. Beim Reflow wird eine kurze "Import" -Meldung angezeigt, wenn eine beliebige Schicht von Ihrer PSD mit einer Bilddateierweiterung am Ende des Namens gezogen wird. Jetzt kann ich auf klicken Asset-Bibliothek icon und ich sehe mein Bild "downarrow.png", das ich überall auf das Design ziehen und dort ablegen kann.
Hinweis: Im Fenster über dem Dateinamen befindet sich eine Vorschau des Bildes. In diesem Fall ist es jedoch etwas schwer zu erkennen, da es klein und weiß ist.
Nach einigen Anpassungen der Reflow-Einstellungen ist es möglich, das importierte anfängliche Durcheinander von Formen mit dem auf UI basierenden UI-Kit des Originals vergleichbar zu machen:
CSS-Filter sind relativ neu in der Szene und ermöglichen es Ihnen, sehr coole visuelle Effekte auf jedes HTML- oder SVG-Element anzuwenden. von divs über Bilder bis zu Schaltflächen, die häufigste Anwendung dieser Filter ist jedoch meist die Verwendung von Bildern. Beachten Sie, dass die Unterstützung für CSS-Filter immer noch auf Chrome, Opera und Safari beschränkt ist. Die von Ihnen gewählte Art der Verwendung sollte nur für zusätzliche Augenwehen sorgen, die IE- und Firefox-Benutzer nicht mit eingeschränkter Funktionalität beeinträchtigen.
Da Adobe Beiträge zu den CSS-Filterspezifikationen leistet, ist es vielleicht keine Überraschung, dass Tools für die Verwendung in Reflow enthalten sind. Sie bieten eine sehr praktische Möglichkeit, zu testen, wie Ihre Filtereinstellungen in Echtzeit aussehen, wenn Sie sie anwenden und anpassen. Leider unterstützt Reflow nur sieben der zehn verfügbaren Filter, aber es gibt noch viele Möglichkeiten, damit zu arbeiten:
Die Effekte sind in Ihrem standardmäßig nicht sichtbar Styles Tab, um sie zu aktivieren, gehen Sie zu Ansicht> Glänzendes Web-Feature Klicken Sie dann auf die Schaltfläche links von Filter Möglichkeit. Nach der Aktivierung können Sie auf ein beliebiges Element auf Ihrer Seite und anschließend auf klicken + Symbol unter der Filter Einstellungsfenster zum Hinzufügen neuer CSS-Filter:
Wie bei anderen CSS-Effekten können Sie Ihre CSS-Filter auch manuell codieren, aber die Ergebnisse Ihrer Einstellungen in Echtzeit anzeigen zu können, beschleunigt den Prozess. Sie können einzelne Filter auf Bilder anwenden oder Filter kombinieren, um verschiedene Effekte zu erzeugen. Hier einige Beispiele für Filter, die über Reflow angewendet werden:
Mit freundlicher Genehmigung von http://publicdomainpictures.net/Wenn Sie Reflow noch nicht einmal angeschaut haben oder dies getan haben, es jedoch nicht als Website-Design-Tool verwendet wurde, könnten Sie jetzt vielleicht dazu verleitet werden, es auszuprobieren und es als auszuprobieren ein Website-Element-Design stattdessen Werkzeug. Es ist vielleicht nicht genau das, wonach Sie in einem kompletten Site-Erstellungs-Tool suchen, aber es kann einfach eine großartige Arbeit sein, um dabei zu helfen, Teile Ihres gesamten Design-Prozesses schneller und intuitiver zu gestalten.
Sie können die in diesem Artikel enthaltenen Quelldateien verwenden, um alle Reflow-Dokumente zu sehen, die oben gezeigt werden, und einige Ideen, was Sie tun können.
Reflow ist als kostenlose Aufnahme in jede Creative Cloud-Mitgliedschaft verfügbar, unabhängig davon, ob es sich um eine einzelne App oder mehrere handelt, und Sie können sie auch kostenlos in einer 30-tägigen Testversion verwenden. Lesen Sie mehr im Reflow-Portal.
