Hogyan készítsünk grafikát az Adobe XD segítségével: Útmutató kezdőknek

Az Adobe XD egy hatékony eszköz, amely lehetővé teszi UI/UX tervezések létrehozását szoftverekhez, alkalmazásokhoz, webhelyekhez és egyebekhez. Ez magában foglalja a makettek, prototípusok és egyéni felhasználói felület-összetevők létrehozását is egy felülethez. Az Adobe XD segítségével egyszerű és összetett terveket is készíthet.

Itt felvázoljuk, hogyan adhatunk egyszerű grafikákat, köztük alakzatokat, képeket és szöveget egy új Adobe XD projekthez. Ezt követi egy útmutató arról, hogyan alakíthat át alakzatcsoportokat összetevőkké, és hogyan használhatja újra ezeket az összetevőket az oldalon. Végül a cikk a grafikák exportálásával is foglalkozik. Egyből ugorjunk be.

Adobe XD projekt létrehozása

Amikor új Adobe XD projektet hoz létre, válassza ki a projekt elrendezési méretét. Néhány sablont kínál, amelyek közül választhat néhány népszerű eszköz alapján.

Néhány példa erre az iPhone X/XS/11 Pro (375x812px), az iPad (768x1024px) vagy a Web 1920 (1920x1080px). Alternatív megoldásként lehetősége van egyéni szélességet és magasságot is kiválasztani a projekthez.

Miután létrehozott egy új projektet, az Adobe XD megnyit egy üres oldalt. Itt kezdheti el a képek, alakzatok, szövegek vagy egyéb tervezési elemek hozzáadását. Attól függően, hogy melyik Adobe XD verzióval rendelkezik, lehetséges fedezzen fel néhány új funkciót amit az Adobe XD kínál.

A legfelső szintű design elem maga a vászonoldal. Ha kiemeli, a jobb oldali ablaktáblával közvetlenül módosíthatja egyes tulajdonságait, például a vászon szélességét vagy magasságát.

Képek hozzáadása

Többféleképpen is hozzáadhat képeket Adobe XD projektjéhez.

• Az első lehetőség az, hogy rákattint a hamburger menü ikonra a bal oldali oszlop tetején. Kattintson Importálás, és nyissa meg a hozzáadni kívánt fájlt.
• Egy másik lehetőség, hogy a fájlkezelőben keresse meg a képét, és húzza a fájlt közvetlenül az Adobe XD-be.
• A harmadik lehetőség a kép másolása és beillesztése, ha egy másik szoftverben, például a Microsoft Wordben van megnyitva.

Hogyan lehet átméretezni és áthelyezni egy képet

Áthelyezheti és átméretezni egy képet akár közvetlenül a vászonra, akár a tulajdonságainak megváltoztatásával.

1. Jelölje ki a képet. Ha kiemel egy tervezési elemet a vásznon, a jobb oldali ablaktáblában láthatja annak tulajdonságait.
2. Módosítsa a kép szélességét és magasságát. Ezeket képviseli a W és H mezőket.
3. Azt is megváltoztathatja a x és Y koordinátáit, ahol a kép bal felső része kezdődik.
4. A kép mozgatásához kattintson a képre, és húzza körbe a vásznon.
5. Az átméretezéshez húzza a kép szélein található pontokat.

Hogyan állítsuk be a kép széleit

Beállíthatja a kép sarkait, hogy megváltoztassa annak alakját.

1. Jelölje ki a képet.
2. Látni fog néhány pontot a kép körül. Ezenkívül néhány pont a kép sarkaiban található.
3. Kattintson és húzza a képen belüli pontra. Ez lassan átformázza a képet egy másik formára.

Hogyan adhatunk más effektusokat a képhez

A képet tovább módosíthatja effektusok hozzáadásával. Ide tartozik az átlátszatlanság, a szegélyek, az elmosódási effektusok stb.

1. Jelölje ki a képet, és változtassa meg a Oüteme a jobb oldali ablaktáblában.
2. Még mindig a jobb oldali ablaktáblában változtassa meg a színét Brendelés. Itt is módosíthatja a vastagság, kötőjel stílus, és sarok stílus a határ.
3. Adjon hozzá elmosódást a képhez, és módosítsa a Objektum elmosódás mennyisége az elmosódás intenzitásának növelésére vagy csökkentésére.

Alakzatok hozzáadása

Az Adobe XD-ben alakzatokat adhat hozzá a bal oldali ablaktáblán keresztül.

1. A bal oldali ablaktáblában több alapvető alakzatot is létrehozhat, beleértve a téglalapot, kört, háromszöget és vonalat. Válassza ki a rajzolni kívánt alakzatot.
2. Kattintson a vászon bármely pontjára, és húzza a kurzort az alakzat létrehozásához.

Egyéni alakzatok hozzáadása

Az egyéni alakzat eszközzel létrehozhatja saját alakját.

1. A bal oldali ablaktáblában válassza ki a toll ikon.
2. Kattintson bárhová a vásznon, hogy hozzáadja az alakzat első pontját vagy „sarkát”. Az alakzat minden pontjához kattintson a vászonra azon a területen, ahol szeretné, hogy legyen.
3. Ha elkészült az alakzat létrehozásával, nyomja meg a gombot Esc gombot a billentyűzeten.

Hogyan változtassuk meg az alakzat színét

Az alakzat színét a jobb oldali ablaktábla segítségével módosíthatja.

1. Jelölje ki a formát.
2. A jobb oldali ablaktáblában módosítsa a Fbeteg.
3. Ezenkívül a képekhez hasonlóan szegélyeket, elmosódási effektusokat is hozzáadhat, és módosíthatja az alakzat átlátszatlanságát.

Szöveg hozzáadása

Te is szöveg hozzáadása és szerkesztése ugyanúgy, ahogy alakzatokat ad hozzá.

1. Kattintson a Szöveg ikonra a bal oldali ablaktáblában.
2. Új szövegmező hozzáadásához kattintson bárhová a vásznon. Írja be a kívánt szöveget a szövegmezőbe.
3. A jobb oldali ablaktáblával szerkesztheti a méret, betűtípus család, és igazítás mezőket.

Hogyan készítsünk komponenseket

Az alkatrész olyan tervezési elemek csoportja, amelyek újrafelhasználhatók. Egy összetevő létrehozásához és használatához először alakzatok vagy egyéb tervezési objektumok csoportjával kell rendelkeznie.

1. Emelje ki az alakzatok csoportját a vásznon. Kattintson a jobb gombbal a csoportra, és válassza ki Készítsen komponenst.
2. A bal oldali ablaktábla alján kattintson a gombra Eszközök. Megnyílik egy új menü, amely felsorolja a meglévő eszközöket, beleértve az imént hozzáadott összetevőt is.
3. Kattintson és húzza az összetevőt az összetevők listájából a vászonra. Ezzel pontosan ugyanazt az elemcsoportot hozza létre.

Elemek exportálása

Exportálhatja az egyes elemeket, valamint a teljes oldalt.

1. Ha egyetlen elemet szeretne exportálni, jelölje ki az exportálni kívánt elemet.
2. Kattintson a hamburger menüikonra a bal oldali oszlop tetején.
3. Válassza ki Export, majd kattintson a gombra Kiválasztott.
4. Ha a teljes oldalt (vagy az összes oldalt) szeretné exportálni, válassza a lehetőséget Minden rajztábla helyette.
5. Megadhatja a fájl formátumát (PNG, JPG, SVG vagy PDF), hogy az exportált elem mire való (például web vagy iOS), és hova szeretné menteni a fájlt.

Szerezzen jártasságot az Adobe XD használatában

Ezek csak az alapok. Néhány egyéb funkció magában foglalja a hiperhivatkozások, szimbólumok, alkalmazásintegrációk és felhasználói felület készletek hozzáadásának lehetőségét. Az Adobe XD időnként új szolgáltatásokat is kínál, hogy javítsa és egyszerűsítse a makettek és az egyéni felhasználói felület kialakítását.

Számos online kurzus áll rendelkezésre, amelyek segítségével új tervezési készségeit magasabb szintre emelheti.

Ezek az Adobe-tanfolyamok kreatív felhőmesterré varázsolják Önt

Olvassa el a következőt

A szerzőről