Share
Photoshop ist seit Jahren ein Teil des Webdesigns und wird sich wahrscheinlich sehr lange fortsetzen. Wenn Sie mit Photoshop für das Web entwerfen oder wenn Sie ein Entwickler sind, der die Codierung von PSDs übernimmt, gibt es wahrscheinlich einige Probleme, mit denen Sie regelmäßig konfrontiert werden.
Selbst wenn Sie für die Entwurfsphase Ihres Workflows von Photoshop zu Sketch gewechselt sind, müssen Sie sich immer noch mit Codern beschäftigen, die Zugriff auf Software benötigen, die sie sonst nicht verwenden würden. Bei beiden Programmen ist es wahrscheinlich, dass Sie Geschwindigkeitsschwankungen bekommen, die nur gleichwertig sind, wenn Sie Tools verwenden, deren Hauptzweck das Entwerfen ist, und nicht Code für das Web generieren.
Die Jungs von Source produzieren seit 2012 Erweiterungen für Photoshop. Ihre Plugins sollen einige der am häufigsten auftretenden Probleme beim Design-Code-Prozess lösen, beispielsweise das Erstellen von CSS, das ein Design genau darstellt, und das effiziente Exportieren von Bildern.
Ich bin seit langem ein Fan des CSSHat-Plugins, das CSS- oder Preprozessor-Code aus Photoshop-Ebenen generiert. Ich benutze ihr PNGHat-Plugin fast immer, wenn ich Photoshop verwende, um Bilder nach PNG, JPEG oder Base64 zu exportieren. Sie können beide Plugins in Aktion in meinem zweiteiligen Tutorial sehen:
Diese Plugins konzentrieren sich auf die Entwicklerphase des Site-Erstellungsprozesses. Verwandeln von PSDs in voll funktionsfähige Websites. Da viele Entwickler Photoshop zu keinem anderen Zweck als dem Zugriff auf PSDs benötigen, ist es ein natürlicher nächster Schritt, wenn diese Art der Workflow-Optimierung in Photoshop alle zusammen umgesetzt wird.
Darum geht es bei Source mit dem neuen Desktop- und Web-basierten Tool Avocode.
Avocode ist ein Programm, das für den Übergang von PSD (oder Sketch) zum Code entwickelt wurde. Es werden nicht automatisch Websites für Sie generiert, sondern Sie erhalten eine Reihe von Tools, mit denen Sie Websites nach Ihren persönlichen Vorstellungen erstellen können, jedoch effizienter als bei der direkten Arbeit in Photoshop oder Sketch. Avocode zielt darauf ab, die Lücke zwischen Design und Codierung der Webentwicklung zu schließen.
In diesem Artikel wird beschrieben, wie Sie Avocode verwenden können, um:
Mit Avocode werden PSDs über einen automatisierten Synchronisierungsprozess zwischen Entwicklern und Entwicklern gemeinsam genutzt. Wenn Sie ein Designer sind, installieren Sie ein Photoshop-Plugin. Wenn Ihr Design fertig ist, klicken Sie einfach auf die Schaltfläche "Jetzt synchronisieren", um Ihre PSD für Entwickler verfügbar zu machen.
Weitere Möglichkeiten zur Synchronisierung sind in Vorbereitung, wobei Dropbox als bestätigte Option in einer zukünftigen Version verfügbar ist. Bei der aktuellen Beta 0.5.0-Benutzeroberfläche wird möglicherweise auch die Synchronisierung über Layervault, das direkte Hochladen und das direkte Abrufen von Dateien aus dem lokalen Speicher angezeigt.
Wenn Sie ein Entwickler sind, erhalten Sie über Avocode eine Benachrichtigung, dass ein neues Design verfügbar ist. Sie können es dann einfach mit einem einzigen Klick in der PSD-Suchleiste öffnen. Dadurch entfällt die Notwendigkeit, E-Mail-Anhänge per E-Mail zu senden oder PSD-Dateien auf andere Weise manuell zu übertragen.
Zu jedem Design gehört ein integriertes Versionsverwaltungssystem. Progressive Iterationen einer PSD können problemlos zwischen Designer und Entwickler synchronisiert werden, indem Sie erneut auf das Photoshop-Plugin klicken Jetzt synchronisieren Schaltfläche, mit der jede Version über das PSD-Browserfenster aufgerufen werden kann. Avocode speichert die vorherigen Exporteinstellungen der Bilder im Design, sodass Aufgaben wie das Exportieren neu aktualisierter Bilder automatisiert werden können.
Sobald Sie eine PSD in Avocode geöffnet haben, ist die Interaktion mit ihr sehr intuitiv. Wie Photoshop hat Avocode eine Ebenen Panel Hier können Sie alle Ebenen und Gruppen der PSD sehen. Diese Ebenen und Gruppen können alle ein- oder ausgeblendet werden, und Sie können auch klicken, um eine davon auszuwählen.
Neben der Auswahl von Elementen des Designs über das Ebenenfenster können Sie auch die Elemente auswählen Werkzeug auswählen Klicken Sie im Werkzeugfenster links auf ein Element auf der Bühne. Halten Sie einfach die Taste gedrückt, um mehrere Elemente auszuwählen VERSCHIEBUNG Klicken Sie anschließend auf die Elemente, die Sie auswählen möchten.
Die Mehrfachauswahl funktioniert unabhängig davon, ob Sie direkt auf die Bühne oder in das Ebenenfenster klicken.
Um das Design zu verschieben, wählen Sie die Handwerkzeug dann klicken und ziehen, um sich zu bewegen.
Mit einer beliebigen Ebene und der Inspektionspanel Öffnen Sie das CSS für die Ausgabe dieses Elements im Panel Code Unterabschnitt, entweder in Rohform oder in Präprozessorform, je nach Wunsch. Dies verwendet dieselbe CSS-Generierungslogik wie das CSSHat-Plugin, das nach wie vor der visuell genaueste CSS-Generator ist, den ich unter den derzeit verfügbaren Optionen gesehen habe.
Das CSS für das Element zu greifen, ist so einfach wie das Klicken auf CSS kopieren oder WENIGER kopieren können Sie sie in Ihr Stylesheet einfügen oder die Zeilen, die Sie verwenden möchten, direkt markieren und von dort kopieren. Wenn Sie einen Präprozessorcode generiert haben, werden automatisch Mixins aus Ihrer bevorzugten Mixin-Bibliothek hinzugefügt. Die derzeit verfügbaren Optionen sind:
Ich bin mir sicher, dass ich nicht alleine bin, wenn ich sage, dass das Finden der Layoutabmessungen in Photoshop etwas anstrengend sein kann. Der Ansatz von Avocode für dieses Problem ist sehr einfach. So erhalten Sie die Höhe und Breite eines Elements:
1. Wählen Sie das Werkzeug auswählen und wählen Sie einen oder mehrere Artikel aus.
2. Lesen Sie die Werte in der linken unteren Ecke des blauen Auswahlfelds.
3. Oder lesen Sie die Werte rechts neben dem Vorschaubereich oben in Inspektionspanel.
So ermitteln Sie den horizontalen und vertikalen Abstand in Pixeln zwischen zwei beliebigen Elementen:
1. Wählen Sie das Werkzeug messen und wählen Sie einen beliebigen Artikel.
2. Bewegen Sie den Mauszeiger über ein anderes Element und lesen Sie die Werte neben den horizontalen und vertikalen roten Linien.
Wenn Sie eine Textebene ausgewählt haben, wird eine beschnittene Vorschau des Inhalts in angezeigt Inspektionspanel, sowie seine Breite und Höhe und eine schnelle Text kopieren Mit dieser Schaltfläche können Sie den darin enthaltenen Text zum Einfügen in Ihren Code verwenden.
1. Wählen Sie das Farbauswahlwerkzeug Bewegen Sie die Maus über die Bühne und beobachten Sie die Farbvorschau, bis Sie die gewünschte Farbe haben.
2. Klicken Sie auf diesen Ort und Ihre Farbe wird dem hinzugefügt Farben Unterabschnitt in der Inspektionspanel, mit den angezeigten Hexcodes.
1. Wählen Sie das Werkzeug auswählen und wählen Sie einen oder mehrere Artikel aus.
2. In dem Inspektionspanel unter dem Panel Export Klicken Sie auf das kleine Dateisymbol mit dem blauen Pluszeichen, um Ihre Auswahl als Asset festzulegen.
3. Der Name Ihres Assets wird aus dem Ebenennamen gezogen. Wählen Sie den PNG-, JPEG- oder SVG-Export aus und klicken Sie auf "Jetzt exportieren". Wenn es sich um den ersten Asset-Export des Projekts handelt, können Sie einen Zielordner auswählen. Andernfalls wird die Datei sofort exportiert.
Nachdem Sie Ihre Auswahl als Asset festgelegt haben, wird sie auch im Asset-Bereich angezeigt. Von hier aus können Sie auf das Lupensymbol klicken, um zu dem Ordner zu gelangen, in dem Ihre Asset-Exporte gespeichert sind.
Sie können auch auf die Schaltfläche "Code abrufen" oben im Fenster oder auf die Schaltfläche klicken <> Symbol neben dem Namen Ihres Assets. Um HTML, CSS oder LESS zu generieren, können Sie das Asset im Code platzieren.
Im PNGHat-Plugin für Photoshop können Sie auch die exakten JPEG- und PNG-Exporteinstellungen sowie die Skalierungsoptionen steuern. Ich denke, wir werden sehen, dass diese Steuerelemente bald in Avocode übertragen werden.
Weitere Informationen zu PNGHat finden Sie hier: So exportieren Sie Photoshop-Assets für das Web mit PNGHat
Im Moment befindet sich Avocode in einer privaten Beta-Phase, daher gibt es noch einige sehr interessant aussehende Funktionen, die in naher Zukunft erscheinen werden. Die App wird voraussichtlich in diesem Sommer in die öffentliche Beta-Version übergehen. Danach wird der offizielle Launch stattfinden.
Während die Entwicklung voranschreitet, sind hier einige Dinge, die wir erwarten können:
Unabhängig von dem Betriebssystem, mit dem Sie arbeiten, oder auch wenn Sie sich auf einem mobilen Gerät befinden, können Sie Avocode verwenden. Momentan wird die Closed-Beta-Version von Avocode unter Mac auf Herz und Nieren getestet, aber die vollständige Version der nativen App kann auch unter Windows und Linux ausgeführt werden. Die Webversion wird in jedem modernen Browser ausgeführt.
Der Quellbericht verfügt bereits über einen funktionsfähigen Prototyp, der dieselbe Funktionalität für sketchbasierte Designs bietet. Wenn Sie als Designer Sketch auf einem Mac verwenden, ein Designer mit Photoshop unter Windows, ein Entwickler, der Code unter Linux schreibt, oder wenn Sie eine andere Kombination verwenden, sind Sie gleichermaßen bereit.
Avocode basiert eigentlich auf dem von GitHub produzierten Atom Code Editor. Das Aufregende dabei ist, dass es einen voll entwickelten, robusten und funktionsreichen Code-Editor gibt, der nach seiner Veröffentlichung direkt in Avocode verfügbar ist. In der Lage zu sein, den gesamten Codierungsprozess direkt in einer einzigen App abzuwickeln, wird das, was sich bereits als leistungsfähiges Feature-Set entwickelt, wirklich begrenzt.
Sie können nicht nur die Hexcodes für die zu Ihrer Palette hinzugefügten Farben abrufen, sondern Sie können jeder Farbe auch Variablennamen zuweisen, die in Ihrem Präprozessorcode verwendet werden.
Wie bei vielen anderen Funktionen, die für Avocode unterwegs sind, ist die Möglichkeit, direkt in CDN hochzuladen, bereits in einem der Source-Plugins, PNGHat, vorhanden. Wir können also davon ausgehen, dass die Funktionalität weitgehend gleich ist. Bilder können lokal über Avocode exportiert werden. Alternativ können Sie sie auch direkt auf ein CDN übertragen und den Dateispeicherort Ihrer CSS-Ausgabe hinzufügen. Sie haben auch die Möglichkeit, die Bilder beim Export direkt auf Ihren Server zu übertragen.
In den Einführungsvideos zu Avocode wird darauf hingewiesen, dass beim Erstellen des Codes für die Schriftarteinstellungen die Möglichkeit besteht, TypeKit und Google Fonts zu integrieren. Dies ist noch nicht in der geschlossenen Betaversion oder in einem der Plugins von Source enthalten. Ich bin mir nicht sicher, wie genau dies funktionieren wird, aber ich hoffe, dass es den Prozess des Zusammenstellens der entsprechenden URLs und des Codes, mit dem ich anrufen kann, rationalisiert verschiedene Schriftarten.
Die erste Stufe des Bildexports in der aktuellen Closed-Beta-Version von Avocode ist für JPEG, PNG und SVG. Source hat jedoch bereits einen Prozess für die Base64-Generierung über ihr PNGHat-Plugin für Photoshop eingerichtet. Ich gehe davon aus, dass wir sie aus dieser Codebasis ziehen und in Avocode bringen werden. Sie beabsichtigen auch, die Produktion von Sprite-Sheets zusammen mit dem erforderlichen CSS zu unterstützen.
Der Schwerpunkt von Avocode wird das Web sein, bis es voll ausgereift ist. In den Werken ist jedoch auch geplant, dass es als Bestandteil der iOS-Entwicklung verwendet werden kann.
Source hat bereits ein Plugin namens iOSHat, das in Photoshop zur Generierung von Objective-C- oder Swift-Code aus Photoshop-Ebenen für die iOS-Entwicklung verwendet wird. Es ist wahrscheinlich, dass die Unterstützung für den Export von iOS-Code in Avocode auf ähnliche Weise funktioniert.
Es gibt einen interessanten Menüpunkt in Avocode. eine, die auf die zukünftige Erweiterbarkeit der Plattform hinweist, wobei bereits einige erste Pakete vorhanden sind:
Die Quelle sagt, dass sie von der Veröffentlichung von Atom inspiriert wurden, eine ähnliche Methode anzuwenden, mit der benutzerdefinierte Pakete erstellt und von der Community geteilt werden können. Wir können uns darauf freuen, dass sich dieser Weg mit der weiteren Entwicklung öffnet.
Momentan führen Source ständig neue Funktionen ein und arbeiten im Beta-Feedback der Benutzer. Sobald die Software öffentlich verfügbar ist, wird sie für 240 US-Dollar pro Jahr über ein Abonnementmodell verfügbar sein.
Wenn Sie jedoch frühzeitig bei der Vorbestellung vorankommen, sichern Sie sich einen Spot mit einem unbefristeten Rabatt von 70% und senken ihn stattdessen auf 69 $ pro Jahr. Sie erhalten auch Zugriff auf die private Betaversion. Während dieser Zeit können Sie die Software kostenlos nutzen. Ihr aktuelles Abonnement beginnt erst, wenn Avocode öffentlich gestartet wird.
Vorbestellungen sind begrenzt und zum jetzigen Zeitpunkt sind weniger als 230 Plätze verfügbar. Vorbestellung: http://avocode.com/preorder.html
Für zusätzliche Informationen besuchen Sie:
Ich überlasse Ihnen das Ziehen der Schlussfolgerungen ganz! Was glauben Sie, sind Sie von den Features, die Source angekündigt hat, überrascht? Wird Avocode Teil Ihres zukünftigen Workflows sein? Lass es uns in den Kommentaren wissen!
Accentsconagua