Kako izvesti Adobe XD u HTML

Adobe XD je nevjerojatan alat za dizajn koji vam omogućuje jednostavno stvaranje fantastičnih dizajna web stranica bez ikakvog prethodnog iskustva s web razvojem. Možete samo uvesti PSD datoteke vašeg dizajna iz Photoshopa i stvoriti privlačno korisničko sučelje web stranice.

Ovi dizajni uvelike pomažu programerima da shvate kako želite da izgleda vaša web stranica i da njihov postupak malo olakša. Međutim, postoji samo ograničen broj načina na koje možete izvesti dizajne iz softvera.

Možete ih spremiti kao XD datoteku i nadate se da programer već ima instaliran softver na svom sustavu ili da svaku izvoznu ploču izvezete kao pojedinačnu PNG datoteku, što je malo neugodno za upotrebu.

Također na

Najbolji 3 alata za oblikovanje za izradu makeupa i žičanih okvira

Srećom, postoji zgodan dodatak treće strane koji vam omogućuje da izvozite ploče kao HTML datoteke i o tome ću govoriti. Ali prije nego što dođemo do toga, treba znati nešto.

Napomena: HTML datoteka generirana ovom metodom ni na koji način se ne smije tretirati kao osnova za cjelovitu web stranicu. Ova metoda je samo sredstvo za jednostavno dijeljenje vaših dizajna s programerom, a ne i funkcionalni proces razvoja web mjesta.

Izvezite Adobe XD datoteke u HTML pomoću dodataka

Sada kada smo vam to izuzeli, samo slijedite ove jednostavne korake za preuzimanje potrebnog dodatka, a zatim izvezite Adobe XD datoteke u HTML:

1. korak: Kliknite gumb izbornika hamburgera u gornjem lijevom kutu softvera.

2. korak: Pomaknite se do kraja i zatim kliknite na opciju Dodaci. Ovo će otvoriti novu ploču dodataka s desne strane glavnog izbornika.

Korak 3: Odaberite opciju Otkrivanje dodataka na ploči Plugins.

Korak 4: Na sljedećoj stranici potražite HTML, a zatim kliknite gumb Instaliraj pored dodatka za Web izvoz.

Nakon što instalirate potrebni dodatak, otvorite projekt koji želite eksportirati u HTML i zatim nastavite sa sljedećim koracima. Za ovaj ću članak koristiti besplatnu ploču Adobe XD koju sam pronašao na mreži.

5. korak: Klikom na njega odaberite grafičku ploču koju želite izvesti.

Korak 6: Sada kliknite gumb izbornika, pomaknite se na ploču dodataka, a zatim odaberite novu mogućnost izvozne ploče iz novih postavki dodatka za Web izvoz.

Iz istog prozora možete također izvesti više ploča umjetničkih ploča ili zadnju ploču koju ste uredili.

Korak 7: U skočnom prozoru Export Artboard dodajte ime datoteke, a zatim odaberite mapu u koju želite spremiti datoteku klikom na ikonu malog mape pokraj opcije Izvoz mape.

Korak 8: Sada, ako želite dodati vanjsku skriptu, tablicu stilova ili alternativne fontove u izvezenu datoteku, možete ih dodati u istom prozoru.

Korak 9: Zatim možete odabrati dimenzije izlazne HTML datoteke upisivanjem vrijednosti u prazan prostor pored opcije Veličina.

Korak 10: Kako biste osigurali da projekt ispravno mjeri, također možete odabrati različite postavke skaliranja iz istog prozora, potvrdite okvir pored svake opcije.

Korak 11: Nadalje, možete odabrati bilo koje dodatne postavke poput Navigacija na tipkovnici, Automatsko osvježavanje itd., Potvrdite okvire pokraj opcija.

12. korak: Nakon što ste finalizirali sve postavke, samo kliknite plavi gumb Izvoz i gotovi ste. Vaša će se umetnička ploča prikazati kao HTML datoteka u odredišnoj mapi koju ste prethodno odabrali.

Iz istog prozora moći ćete i kopirati CSS i oznaku vaše ploče ako želite i te podatke podijeliti s vašim programerom.

Još jednom imajte na umu da se izvezeni HTML ni na koji način ne može upotrijebiti za izradu potpuno funkcionalne web stranice. Od sada, nema načina da direktno objavite projekt Adobe XD na webu, a prema nekoliko rasprava na Adobe forumima, uskoro ih neće biti.

Adobe XD je samo alat za izradu prototipa koji vam omogućuje stvaranje početnog dizajna bez koda. Nakon što pripremite dizajn, možete koristiti platformu poput Dreamweavera da biste svoj dizajn pretvorili u web stranicu. Ali za to će vam trebati neko prethodno iskustvo u razvoju web-mjesta ili ćete trebati zaposliti nekoga tko to radi.

Također na

#dizajn

Kliknite ovdje da biste vidjeli stranicu s člancima o dizajnu

Izvezite svoju Adobe XD datoteku u HTML

Sada, kada znate kako izvoziti svoju Adobe XD datoteku u HTML, siguran sam da ćete lako dijeliti svoje artboards s programerom ili klijentom. I nećete morati brinuti o bilo kakvim problemima kompatibilnosti. Odmah instalirajte dodatak i s lakoćom započnite izvoziti vaše ploče.

Sljedeće: Pogledajte sljedeći članak za nekoliko besplatnih interaktivnih web stranica na kojima možete naučiti kako kodirati i pisati vlastitu HTML web stranicu.