Exportieren von Assets aus Adobe XD zur Erstellung einer WordPress-Website

Adobe XD ist ein großartiges Programm für die Gestaltung von Websites und übertrifft seinen alten Vorgänger Adobe Photoshop bei weitem. Bei Bright Vessel. Wir haben es zu unserem bevorzugten Programm für die Erstellung von Benutzererlebnissen für Kunden gemacht.

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

1. Öffnen Sie zunächst Ihre Adobe XD Datei

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

Sie müssen präzise sein und alle Elemente müssen gruppiert und in einen eigenen Abschnitt eingeordnet werden.

In diesem Bild hat ein Designer Elemente in mehreren verschiedenen Ebenen hinzugefügt, so dass alle Ebenen gruppiert wurden. Die Elemente wurden nicht richtig beschnitten. Dies ist leicht zu beheben. Wenn Sie auf eines der Elemente doppelklicken, z. B. auf den Mann. Ziehen Sie, damit keine Elemente in eine andere Zeile übergehen.

Dies ist leicht zu beheben. Wenn Sie auf eines der Elemente doppelklicken, z. B. auf den Mann. Sie ziehen 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 um sie leicht identifizieren zu können, sondern auch für die Suchmaschinenoptimierung. Wir werden HDR für Überschriften und dann BG für Hintergründe verwenden.

So ist 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, eine Schaltfläche usw. handelt. Benennen Sie im Bereich "Ebenen" die Gruppe und die einzelnen Bilder. Verwenden Sie Kleinbuchstaben und einen Bindestrich zwischen den einzelnen Wörtern.

4. Sobald Sie alle Elemente korrigiert haben, ist es am einfachsten, sie so zu gruppieren, dass Sie das benötigte Bild exportieren können. In den meisten Fällen werden Sie Assets sammeln, die sonst nicht in HTML und unserem Builder, den Sie möglicherweise verwenden, erstellt werden könnten.

Datei > Exportieren > Ausgewählt

Da wir die Ebene nun benannt haben, müssen wir sie nicht mehr abtippen. Wir wissen also, welche Art von Elementen Bilder für den Hintergrund, die Typografie, die Schaltfläche usw. sind. Es ist immer gut, die Bilder zu benennen, nicht nur, um sie leicht identifizieren zu können, sondern auch aus SEO-Gründen. Wir werden HDR für Überschriften und BG für Hintergründe verwenden.

Nach dem Exportieren sollten Sie eine Gruppe von Elementen in der gewünschten Art von Bilddatei haben.