So exportieren Sie Assets aus Adobe XD zum Erstellen einer WordPress-Website

Adobe XD ist ein ziemlich tolles Programm zum Gestalten von Websites und übertrifft seinen alten Vorgänger Adobe Photoshop bei weitem. Bei Bright Vessel. Wir haben es zu unserem bevorzugten Programm gemacht, um Benutzererfahrungen für Kunden zu verbessern.

Hier erfahren Sie, wie Sie Assets exportieren, wenn Sie eine WordPress-Website in Adobe XD erstellen.

1. Sie möchten zuerst Ihre Adobe XD-Datei öffnen

2. Sobald Sie Ihre Datei geöffnet haben, sollten Sie sicherstellen, dass Sie die Dateien bereitstellen, damit sie korrekt exportiert werden können.

Es muss präzise sein und alle Elemente müssen gruppiert und in einem eigenen Abschnitt sein.

In dieser Abbildung fügt ein Designer Elemente in mehreren verschiedenen Ebenen hinzu, wenn alle Ebenen gruppiert wurden. Die Elemente wurden nicht richtig beschnitten. Dies ist eine einfache Lösung. Wenn Sie auf eines der Elemente doppelklicken, z. B. auf den Mann. Ziehen Sie so, dass keine Elemente in eine andere Zeile übergehen.

Dies ist eine einfache Lösung. Wenn Sie auf eines der Elemente doppelklicken, z. B. auf den Mann. Ziehen Sie so, dass keine Elemente in eine andere Zeile übergehen.

3. Das Benennungsschema ist sehr wichtig. Es ist immer gut, Ihre Bilder zu benennen, nicht nur für eine einfache Identifizierung, sondern auch für die SEO. Wir werden HDR für Header und dann BG für Hintergründe verwenden.

Dies macht es einfacher zu wissen, um welche Art von Elementbild es sich handelt, und dann den Namen des Abschnitts, wenn es sich um einen Hintergrund handelt, oder des Elements, wenn es sich um Typografie, Schaltfläche usw. handelt. Benennen Sie im Ebenenbereich die Gruppe und die einzelnen Bilder. Verwenden Sie Kleinbuchstaben und einen Bindestrich zwischen den einzelnen Wörtern.

4. Der einfachste Weg zum Exportieren, sobald Sie alle Elemente korrigiert haben, besteht darin, sie zu gruppieren, damit Sie das gewünschte Bild exportieren können. In den meisten Fällen werden Sie Assets sammeln, die sonst nicht in HTML erstellt werden könnten, und es handelt sich um einen Builder, den Sie möglicherweise verwenden.

Datei > Exportieren > ausgewählt

Nachdem wir den Layer benannt haben, müssen wir ihn nicht mehr abtippen. Wir wissen also, welche Art von Elementen Bilder für den Hintergrund, die Typografie, den Button usw. sind. Es ist immer gut, Ihre Bilder zu benennen, nicht nur für eine einfache Identifizierung, sondern auch für die SEO. Wir werden HDR für Header und dann BG für Hintergründe verwenden.

Sobald Sie exportiert haben, sollten Sie eine Gruppe von Elementen im gewünschten Bilddateityp haben.