Assets exporteren vanuit Adobe XD om een WordPress-website te bouwen

Adobe XD is een behoorlijk geweldig programma voor het ontwerpen van websites en overtreft zijn oude voorganger Adobe Photoshop ruimschoots. Bij Bright Vessel. hebben we er ons go-to programma van gemaakt om gebruikerservaringen voor klanten op te bouwen.

Hier lees je hoe je assets exporteert bij het bouwen van een WordPress website in Adobe XD.

1. Open eerst je adobe XD-bestand

2. Zodra je het bestand hebt geopend, moet je ervoor zorgen dat de bestanden de juiste voorzieningen hebben, zodat ze correct kunnen worden geëxporteerd.

Het moet precies zijn en alle elementen moeten gegroepeerd zijn en in hun eigen sectie staan.

In deze afbeelding voegt een ontwerper elementen toe in verschillende lagen, dus toen alle lagen werden gegroepeerd. De elementen waren niet goed bijgesneden. Dit is eenvoudig te verhelpen. Als je dubbelklikt op een van de elementen, bijvoorbeeld de man. Je sleept zodat er geen elementen uitlopen naar een andere rij.

Dit is een eenvoudige oplossing. Als je dubbelklikt op een van de elementen, bijvoorbeeld de man. Je sleept zodat er geen elementen naar een andere rij gaan.

3. Naamgeving is erg belangrijk. Het is altijd goed om je afbeeldingen een naam te geven, niet alleen om ze gemakkelijk te kunnen identificeren, maar ook voor SEO. We gebruiken HDR voor koppen en BG voor achtergronden.

Dit maakt het gemakkelijker om te weten welk type afbeelding het is en dan de naam van de sectie als het een achtergrond is of het element als het typografie, knop, enz. is. Geef in het lagengebied de groep en afzonderlijke afbeeldingen een naam. Gebruik kleine letters en een streepje tussen elk woord.

4. De eenvoudigste manier om te exporteren als je alle elementen hebt gecorrigeerd, is om ze te groeperen zodat je de benodigde afbeelding kunt exporteren. In de meeste gevallen verzamel je elementen die je anders niet in HTML en onze bouwer zou kunnen doen.

Bestand > Exporteren > Geselecteerd

Nu we de laag een naam hebben gegeven, hoeven we die niet meer uit te typen. Zo weten we wat voor soort elementen afbeeldingen zijn voor de achtergrond, typografie, knop, enz. Het is altijd goed om je afbeeldingen een naam te geven, niet alleen om ze gemakkelijk te herkennen, maar ook voor SEO. We gebruiken HDR voor headers en BG voor achtergronden.

Als je eenmaal hebt geëxporteerd, zou je een groep elementen in het gewenste type afbeeldingsbestand moeten hebben.