Hoe je assets uit Adobe XD exporteert 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. We hebben er ons go-to-programma van gemaakt om gebruikerservaringen voor klanten uit te bouwen.

Hier leest u hoe u activa kunt exporteren bij het bouwen van een WordPress-website in Adobe XD.

1. Je wilt eerst je Adobe XD-bestand openen

2. Zodra u uw bestand heeft geopend, wilt u er zeker van zijn dat u de bestanden inricht zodat ze correct kunnen worden geëxporteerd.

De noodzaak om nauwkeurig te 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 wanneer alle lagen zijn gegroepeerd. De elementen waren niet goed bijgesneden. Dit is een gemakkelijke oplossing. Wanneer u dubbelklikt op een van de elementen, bijvoorbeeld: de man. U sleept zodat er geen elementen naar een andere rij lopen.

Dit is een gemakkelijke oplossing. Wanneer u dubbelklikt op een van de elementen, bijvoorbeeld: de man. U sleept zodat er geen elementen naar een andere rij lopen.

3. Naamgevingsschema is erg belangrijk. Het is altijd goed om uw afbeeldingen een naam te geven, niet alleen voor een gemakkelijke manier om ze te identificeren, maar ook voor SEO. We gebruiken HDR voor headers en vervolgens BG voor achtergronden.

Dit maakt het gemakkelijker om te weten wat voor soort elementenafbeelding het is en vervolgens 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 nadat u alle elementen hebt gecorrigeerd, is door ze te groeperen, zodat u de benodigde afbeelding kunt exporteren. In de meeste gevallen verzamelt u activa die anders niet in HTML zouden kunnen worden gedaan en onze een builder die u mogelijk gebruikt.

Bestand > exporteren > geselecteerd

Nu we de laag een naam hebben gegeven, hoeven we hem niet meer uit te typen. We weten dus wat voor soort elementen afbeeldingen zijn voor de achtergrond, typografie, knop, enz. Het is altijd goed om uw afbeeldingen een naam te geven, niet alleen voor een gemakkelijke manier om ze te identificeren, maar ook voor SEO. We gebruiken HDR voor headers en vervolgens BG voor achtergronden.

Nadat u hebt geëxporteerd, zou u een groep elementen in het gewenste type afbeeldingsbestand moeten hebben.