Advertisement
  1. Web Design
  2. Avocode

Einführung von Avocode - PSD in Code ohne Photoshop

by
Read Time:11 minsLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Photoshop ist seit Jahren Teil des Webdesigns und wird wahrscheinlich noch lange so bleiben. Wenn Sie mit Photoshop für das Web entwerfen oder Entwickler sind, der sich mit dem Codieren von PSDs befasst, gibt es wahrscheinlich einige Probleme, auf die Sie regelmäßig stoßen.

Selbst wenn Sie für die Entwurfsphase Ihres Workflows von Photoshop zu Sketch gewechselt sind, werden Sie immer noch vor dem Problem stehen, dass Codierer Zugriff auf Software benötigen, die sie sonst nicht verwenden würden. Mit einem der beiden Programme werden Sie wahrscheinlich auf Geschwindigkeitsbegrenzungen stoßen, die für den Kurs selbstverständlich sind, wenn Sie Tools verwenden, deren Hauptzweck das Design ist, und keinen Code für das Web generieren.

Hergestellt von Source

Die Jungs von Source produzieren seit 2012 Erweiterungen für Photoshop. Ihre Plugins wurden entwickelt, um einige der häufigsten Probleme im Design-to-Code-Prozess zu vereinfachen, z. B. das Erstellen von CSS, das ein Design genau darstellt, und das effiziente Exportieren von Bildern.

Ich bin schon lange ein Fan des CSSHat-Plugins, das CSS- oder Präprozessor-Code aus Photoshop-Ebenen generiert. Ich verwende auch das PNGHat-Plugin fast jedes Mal, wenn ich Photoshop verwende, um Bilder nach PNG, JPEG oder Base64 zu exportieren. Sie können diese beiden Plugins in meinem zweiteiligen Tutorial in Aktion sehen:

Diese Plugins konzentrieren sich auf die Entwicklerphase des Site-Erstellungsprozesses. PSDs in voll funktionsfähige Websites verwandeln. Da viele Entwickler Photoshop nicht einmal für einen anderen Zweck als den Zugriff auf PSDs benötigen, ist es ein logischer nächster Schritt, diese Art der Workflow-Verbesserung direkt aus Photoshop heraus zu übernehmen.

Darum geht es bei Avocode, dem neuen Desktop- und webbasierten Tool von Source.

Avocode ist ein Programm, das speziell für den Übergang von PSD (oder Sketch) zu Code entwickelt wurde. Es werden keine Websites automatisch für Sie generiert, sondern es stehen Ihnen eine Reihe von Tools zur Verfügung, mit denen Sie Websites nach Ihren persönlichen Wünschen erstellen können, jedoch effizienter als bei der direkten Arbeit in Photoshop oder Sketch. Avocode zielt darauf ab, die Lücke zwischen der Entwurfs- und der Codierungsphase der Webentwicklung zu schließen.

Worüber geht

In diesem Artikel erfahren Sie, wie Sie Avocode verwenden können, um:

  • Öffnen Sie PSDs zum Codieren ohne Photoshop und ohne E-Mail oder Hochladen von Dateien.
  • Wählen Sie Ebenen und Gruppen aus und bewegen Sie sich in einem Design.
  • Generieren Sie CSS- oder Präprozessorcode für Elemente in Ihrem Design.
  • Erhalten Sie genaue Maßmessungen, mit denen Sie Ihr Layout erstellen können.
  • Kopieren Sie Textinhalte zur einfachen Platzierung im Code.
  • Extrahieren Sie Farbpaletten und Hexcodes aus PSDs.
  • Exportieren Sie Bilder, auch aus mehreren Ebenen, ohne sich um den Schneidevorgang kümmern zu müssen.
 

Öffnen Sie PSDs ohne Photoshop

Mit Avocode werden PSDs über einen automatisierten Synchronisierungsprozess zwischen Designern und Entwicklern gemeinsam genutzt. Wenn Sie Designer sind, installieren Sie ein Photoshop-Plugin. Wenn Ihr Design fertig ist, klicken Sie einfach auf die Schaltfläche "Jetzt synchronisieren", um Ihre PSD dem Entwickler zur Verfügung zu stellen.

Weitere Möglichkeiten zur Synchronisierung sind in Vorbereitung. Dropbox ist eine bestätigte Option, die in einer zukünftigen Version verfügbar sein wird. Gemessen an der aktuellen Beta 0.5.0-Oberfläche kann es auch vorkommen, dass die Synchronisierung über Layervault erfolgt, Dateien direkt hochgeladen und direkt aus dem lokalen Speicher abgerufen werden.

Wenn Sie Entwickler sind, erhalten Sie über Avocode eine Benachrichtigung, dass ein neues Design verfügbar ist. Zu diesem Zeitpunkt können Sie es einfach direkt mit einem einzigen Klick im PSD-Browserfenster öffnen. Dadurch entfällt die Notwendigkeit, Mega-Anhänge per E-Mail zu versenden 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 die Schaltfläche Jetzt synchronisieren mit dem Photoshop-Plugin klicken. Auf jede Version kann über das PSD-Browserfenster zugegriffen werden. Avocode merkt sich die vorherigen Exporteinstellungen der Bilder im Design, sodass Aufgaben wie das Exportieren neu aktualisierter Bilder automatisiert werden können.

Auswählen und Navigieren

Sobald Sie eine PSD in Avocode geöffnet haben, ist die Interaktion mit ihr sehr intuitiv. Wie Photoshop verfügt Avocode über ein Ebenenbedienfeld, in dem Sie alle Ebenen und Gruppen der PSD anzeigen können. Diese Ebenen und Gruppen können alle ein- oder ausgeblendet werden. Sie können auch klicken, um eine davon auszuwählen.

Sie können nicht nur Elemente des Designs über das Ebenenbedienfeld auswählen, sondern auch das Auswahlwerkzeug im Werkzeugbedienfeld auf der linken Seite auswählen und dann direkt auf ein beliebiges Element auf der Bühne klicken. Um mehrere Elemente auszuwählen, halten Sie einfach die UMSCHALTTASTE gedrückt und klicken Sie weiter auf die Elemente, die Sie auswählen möchten.

Die Mehrfachauswahl funktioniert unabhängig davon, ob Sie direkt auf die Bühne oder im Ebenenbedienfeld klicken.

Um das Design zu verschieben, wählen Sie das Handwerkzeug und klicken und ziehen Sie, um es zu verschieben.

Generieren Sie CSS- und Präprozessor-Code

Wenn eine Ebene ausgewählt und das Inspektionsfenster geöffnet ist, wird das CSS für dieses Element im Unterabschnitt Code des Panels angezeigt, je nach Ihren Wünschen entweder in Roh- oder Präprozessorform. Dies verwendet dieselbe CSS-Generierungslogik wie das CSSHat-Plugin, das immer noch der visuell genaueste CSS-Generator ist, den ich unter den derzeit verfügbaren Optionen gesehen habe.

Das Abrufen des CSS für das Element ist so einfach wie das Klicken auf die Schaltfläche CSS kopieren oder LESS kopieren, sodass Sie es in Ihr Stylesheet einfügen oder die gewünschten Zeilen direkt markieren und von dort kopieren können. Wenn Sie Präprozessorcode generieren lassen, enthält dieser automatisch Mixins aus Ihrer bevorzugten Mixin-Bibliothek. Die derzeit verfügbaren Optionen sind:

  • LESS + LESSHat
  • Sass + Compass
  • SCSS + Compass
  • Sass + Bourbon
  • SCSS + Bourbon
  • Stylus + Nib

Erhalten Sie genaue Layoutmessungen

Ich bin mir sicher, dass ich nicht allein bin, wenn ich sage, dass das Finden der Layoutabmessungen in Photoshop etwas schwierig sein kann. Avocodes Herangehensweise an dieses Problem ist sehr einfach. So ermitteln Sie die Höhe und Breite eines Elements:

1. Wählen Sie das Auswahlwerkzeug und wählen Sie ein beliebiges Element oder mehrere Elemente aus.

2. Lesen Sie die Werte in der unteren linken Ecke des blauen Auswahlfelds.

3. Oder lesen Sie die Werte rechts neben dem Vorschaudaumen oben im Inspektionsfenster.

So ermitteln Sie den horizontalen und vertikalen Abstand in Pixel zwischen zwei beliebigen Elementen:

1. Wählen Sie das Messwerkzeug und wählen Sie ein beliebiges Element aus.

2. Bewegen Sie den Mauszeiger über ein anderes Element und lesen Sie die Werte neben den horizontalen und vertikalen roten Linien.

Textinhalt kopieren

Wenn Sie eine Textebene ausgewählt haben, werden im Inspektionsfenster eine abgeschnittene Vorschau des Inhalts sowie dessen Breite und Höhe und eine Schaltfläche zum schnellen Kopieren von Text angezeigt, mit der Sie den darin enthaltenen Text zum Einfügen in Ihren Code abrufen können.

Generieren Sie eine Farbpalette

1. Wählen Sie das Farbauswahl-Werkzeug und bewegen Sie die Maus über die Bühne. Sehen Sie sich die Farbvorschau an, bis Sie die gewünschte Farbe haben.

2. Klicken Sie an dieser Stelle, und Ihre Farbe wird dem Unterabschnitt Farben im Inspektionsfenster hinzugefügt, wobei jeweils die Hexcodes angezeigt werden.

Bilder exportieren

1. Wählen Sie das Auswahlwerkzeug und wählen Sie ein beliebiges Element oder mehrere Elemente aus.

2. Klicken Sie im Inspektionsfenster unter dem Unterabschnitt Export des Bedienfelds 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 PNG-, JPEG- oder SVG-Export und klicken Sie dann auf "Jetzt exportieren". Wenn es der erste Asset-Export des Projekts ist, 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 in den Ordner zu gelangen, in dem Ihre Asset-Exporte gespeichert sind.

Sie können auch auf die Schaltfläche "Code abrufen" oben im Bedienfeld oder auf das Symbol <> rechts neben dem Namen Ihres Assets klicken, um HTML, CSS oder WENIGER zu generieren, mit denen Sie das Asset in Code einfügen können.

Im PNGHat-Plugin für Photoshop können Sie auch die genauen JPEG- und PNG-Exporteinstellungen sowie die Skalierungsoptionen steuern. Ich kann mir also vorstellen, dass diese Steuerelemente bald auf Avocode portiert werden.

Weitere Informationen zu PNGHat finden Sie hier: So exportieren Sie Photoshop-Assets für das Web mit PNGHat

Zusätzliche Funktionen in der Entwicklung

Derzeit befindet sich Avocode in der privaten Beta-Phase, daher gibt es in naher Zukunft noch einige sehr interessant aussehende Funktionen. Die App soll irgendwann in diesem Sommer in die öffentliche Beta übergehen. Danach wird der offizielle Start stattfinden.

Im weiteren Verlauf der Entwicklung können wir einige Dinge vorwegnehmen:

Vollständiger plattformübergreifender und webbasierter Support

Unabhängig davon, mit welchem Betriebssystem Sie arbeiten oder ob Sie sich auf einem mobilen Gerät befinden, können Sie Avocode verwenden. Momentan wird die Closed Beta-Version von Avocode auf dem Mac auf Herz und Nieren geprüft. Die vollständige Version der nativen App wird jedoch auch unter Windows und Linux ausgeführt, und die Webversion wird in jedem modernen Browser ausgeführt.

Verwendung mit skizzenbasierten Designs

Quellbericht Sie haben bereits einen funktionierenden Prototyp, um alle Funktionen für skizzenbasierte Designs bereitzustellen. Wenn Sie also ein Designer sind, der Sketch auf einem Mac verwendet, ein Designer, der Photoshop unter Windows verwendet, ein Entwickler, der Code unter Linux schreibt, oder wenn Sie eine andere Kombination verwenden, sind Sie gleichermaßen bereit.

Atom Code Editor in Avocode

Avocode basiert auf dem von GitHub erstellten Atom Code Editor. Das wirklich Spannende daran ist, dass es bei seiner Veröffentlichung einen vollwertigen, robusten und funktionsreichen Code-Editor direkt in Avocode geben wird. Die Möglichkeit, den gesamten Codierungsprozess direkt in einer einzigen App abzuwickeln, schließt das ab, was sich bereits als leistungsstarkes Feature-Set herausstellt.

Farbvariablen

Sie können nicht nur die Hexcodes für die Ihrer Palette hinzugefügten Farben abrufen, sondern auch jeder Farbe Variablennamen zur Verwendung in Ihrem Präprozessorcode zuweisen.

In Built FTP und CDN Upload

Wie bei vielen anderen Funktionen auf dem Weg zu Avocode ist die Möglichkeit zum direkten Hochladen auf CDN bereits in einem der Plugins von Source, PNGHat, vorhanden, sodass wir davon ausgehen können, dass die Funktionalität weitgehend gleich sein wird. Bilder können lokal über Avocode exportiert werden. Alternativ können Sie sie direkt auf ein CDN übertragen und den Dateispeicherort zu Ihrer CSS-Ausgabe hinzufügen. Sie haben auch die Möglichkeit, die Bilder beim Export direkt auf Ihren Server zu übertragen.

Verbinden Sie sich mit TypeKit und Google Fonts

In den Einführungsvideos zu Avocode wird erwähnt, dass beim Generieren des Codes für die Schriftarteinstellungen eine Option zur Integration in TypeKit und Google Fonts verfügbar ist. Dies ist noch nicht in der Closed Beta oder einem der Plugins von Source enthalten, daher bin ich mir nicht sicher, wie dies genau funktionieren wird, aber ich persönlich hoffe, dass es den Prozess der Zusammenstellung der entsprechenden URLs und des Codes, mit denen aufgerufen werden soll, rationalisiert verschiedene Schriftarten.

Base64- und Sprite-Sheet-Export

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 das PNGHat-Plugin für Photoshop eingerichtet. Ich gehe daher davon aus, dass sie aus dieser Codebasis zeichnen, um ihn in Avocode zu integrieren. Sie beabsichtigen auch, die Produktion von Sprite-Blättern zusammen mit dem erforderlichen CSS zu unterstützen.

Exportcode für iOS

Der Schwerpunkt von Avocode wird auf dem Web liegen, bis es seine volle Reife erreicht hat. Es ist jedoch auch geplant, es als Teil der iOS-Entwicklung zu verwenden.

Source verfügt bereits über ein Plugin namens iOSHat, das in Photoshop zum Generieren von Objective-C- oder Swift-Code aus Photoshop-Ebenen zur Verwendung in der iOS-Entwicklung verwendet wird. Es ist wahrscheinlich, dass die Unterstützung für den Export von iOS-Code in Avocode ähnlich funktioniert.

Pakete für benutzerdefinierte Erweiterungen

In Avocode gibt es einen interessanten Menüpunkt. eine, die auf die zukünftige Erweiterbarkeit der Plattform hinweist, wobei einige erste Pakete bereits vorhanden sind:

Laut Quellen waren sie von der Veröffentlichung von Atom inspiriert, eine ähnliche Methode anzuwenden, mit der benutzerdefinierte "Pakete" erstellt und für die Community freigegeben werden können. Wir können uns darauf freuen, dass sich dieser Weg im Verlauf der Entwicklung öffnet.

Vorbestellung für einen Rabatt von 70%

Im Moment führt Source ständig neue Funktionen ein und arbeitet im Laufe der Zeit an Beta-Benutzer-Feedback. Wenn die Software öffentlich veröffentlicht wird, ist sie über ein Abonnementmodell für 240 USD pro Jahr erhältlich.

Wenn Sie jedoch frühzeitig bei der Vorbestellung einsteigen, sichern Sie sich einen Platz mit einem unbefristeten Rabatt von 70% und senken ihn stattdessen auf 69 USD pro Jahr. Sie erhalten auch Zugriff auf die private Beta und können die Software während dieser Zeit kostenlos nutzen. Ihr eigentliches Abonnement beginnt erst, wenn Avocode öffentlich gestartet wird.

Vorbestellungsplätze sind begrenzt und derzeit sind weniger als 230 Plätze verfügbar. Vorbestellung: http://avocode.com/preorder.html

Nützliche Links

Weitere Informationen finden Sie unter:

Abschluss

Ich überlasse das Ziehen der Schlussfolgerungen ganz Ihnen! Was denkst du, bist du überrascht über die Funktionen, die Source angekündigt hat? Wird Avocode Teil Ihres zukünftigen Workflows sein? Lassen Sie uns in den Kommentaren wissen!

Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.