Crtanje i tekst

Artboard možemo zamisliti kao papir za crtanje, platno za slikanje, uslovno i kao radnu
površinu. Ipak, artboard u Adobe XD je zapravo površina našeg projekta koja se prikazuje na
ekranu uređaja, bilo da kreiramo web sajt, aplikaciju za mobilne telefone ili nešto treće.

Sve što postavimo na artboard će biti prikazano u krajnjem proizvodu. Ukoliko postavimo
elemente van artboarda, na takozvani pasteboard, oni neće biti vidljivi u krajnjem proizvodu.

U Adobe XD dokumentu možemo imati neograničen broj artboardova. Na primer, možemo za

web sajt kreirati artboard za svaku stranicu sajta, ali i za tablet i mobilnu verziju. Tipičan
projekat web sajta u Adobe XD ima na desetine artboardova. Zato je njihova organizacija
veoma važna.

Slika 3.1. Primer više artboardova na pasteboardu Adobe XD

U bilo kom trenutku rada, možemo prikazati layers panel (srednja, druga opcija u donjem
levom uglu radne površine) i u njemu uočiti sve artboardove koji su kreirani u tekućem
dokumentu, kao što vidimo na slici ispod.

Copyright © Link group

 Slika 3.2. Layers panel sa artboard prikazom

Imajte na umu da će Adobe XD prikazivati artboard delove ukoliko nijedan objekat nije
označen (selektovan) na radoj površini.

Kreiranje i uređenje artboardova

Artboard možemo kreirati odmah prilikom kreiranja samog dokumenta, odnosno projekta.
Kasnije kreiranje artboard delova u istom projektu vršimo tako što izaberemo Artboard alatku
iz trake sa alatima sa leve strane, a zatim ili stvorimo artboard proizvoljnih dimenzija direktno
crtajući na pasteboard delu, ili kliknemo na sam pasteboard da bismo dobili predefinisanu
dimenziju, ili izaberemo neku od predefinisanih veličina iz panela sa desne strane.

Obratite pažnju na to da ukoliko selektujemo, izaberemo bilo koji objekat na određenom

artboardu, taj artboard postaje fokusiran, ali propeties panel sa desne strane prikazuje opcije
tog objekta (ne artboarda). U takvoj situaciji primećujemo da je artboard fokusiran tako što
su njegov okvir i naziv neposredno iznad, nešto tamnije boje od ostalih. Ukoliko želimo da
označimo sam artboard kako bismo menjali njegova podešavanja u properties panelu,
potrebno je da selektujemo, označimo baš sam artboard. To činimo tako što uradimo jedan
klik na naziv artboarda neposredno iznad njega ili uradimo dvoklik na pozadinu artboarda dok
je izabran Selection alat.

Po podrazumevanim podešavanjima, svaki artboard dobija automatsko ime na osnovu

predefinisanog šablona koji je korišćen (npr. iPhone X/XS/11 Pro) uz dodatak rednog broja.

Da bismo definisali posebno ime za artboard, možemo uraditi dvoklik mišem na sam naziv
artboarda neposredno iznad artboarda ili to učiniti iz layers panela. U njemu možemo takođe
uraditi dvoklik mišem na naziv ili uraditi desni klik te iz menija koji se pojavljuje izabrati
rename opciju. U svakom slučaju dobijamo isti rezultat.

Copyright © Link group

Organizacija artboardova

Artboard možemo slobodno premeštati u okviru pasteboard prostora kako bismo organizovali
svoj projekat. Ukoliko je artboard potpuno prazan, dovoljno je levim klikom uhvatiti artboard
dok je izabran selection alat i premestiti ga na novu lokaciju. Ipak, ukoliko artboard nije
prazan i na njemu se nalaze elementi, možemo ga premestiti tako što kliknemo i uhvatimo
naziv artboarda neposredno iznad i na sličan način prevučemo na novu lokaciju.

Pored selekcije jednog artboarda, možemo selektovati više njih tako što držimo taster Shift
na tastaturi i izaberemo ih levim klikom na nazive artboardova ili povlačeći selekciju (držeći
levi taster miša) oko nekoliko artboardova selection alatkom. Na taj način možemo premeštati
više artboardova odjednom, brisati ih, kopirati ili ih poravnati/rasporediti koristeći align i
distribute opcije iz properties panela. Imajte na umu da ćemo, ukoliko selekcijom ne
pokrijemo ceo artboard, selektovati objekte na njemu, ali ne i artboard.

Sa druge strane, ukoliko uhvatimo levim tasterom miša naziv artboarda u Layers panelu i tu
prevučemo menjajući njihov redosled, to neće uticati na poziciju artboarda na pasteboard
površini, već samo na tzv. stacking order.

Ukoliko otvorimo Layers panel (druga, srednja opcija u donjem levom uglu radnog okruženja)
i ukoliko nije označen nijedan objekat na pasteboardu, možemo videti spisak svih
artboardova. Desnim klinkom na neki od njih pozivamo standardne opcije poput kopiranja,
brisanja i sl.

Elemente možemo slobodno prebacivati sa artboarda na artboard tako što ih prevučemo

držeći levi taster miša. Ukoliko to činimo držeći taster Alt (Windows) odnosno Option (Mac),
objekat će biti dupliran, isto kao i kod drugih Adobe alata.

Ukoliko želimo, možemo fiksirati objekte na njihovom artboardu. Na taj način objekat ostaje
u fiksnoj poziciji i kada se skroluje. To je korisno ukoliko planiramo da kasnije koristimo
position:fixed i sl. u CSS-u. Ta opcija se nalazi u Properties panelu, tokom Prototype načina
rada, pod nazivom Fix Position When Scrolling.

Artboardovi sa scroll opcijom

Adobe XD omogućuje da kreiramo artboardove sa vertikalnom scroll opcijom. Da bismo to

podesili, možemo podešavati opcije u Scrolling sekciji Properties panela na desnoj strani.

Slika 3.3. Scrolling podešavanja u Properties panelu

Copyright © Link group

Ukoliko smo kreirali predefinisani artboard, automatski će biti podešen viewport height u
pomenutom odeljku properties panela. Viewport height određuje visinu trenutnog prikaza na
uređaju i zapravo ono što istovremeno može biti prikazano. Ukoliko je ta vrednost manja od
ukupne visine artboarda i ukoliko je Scrolling padajući meni podešen na Vertical, imaćemo
scroll opciju na tom artboardu. Tako su podešeni svi predefinisani artboardovi i jednostavnim
povećanjem njihove visine dobijamo željeni efekat. Nasuprot tome, artboard koji smo
definisali ručno, sa proizvoljnom visinom neće odmah imati scroll opcije, ali možemo podesiti
sam pomenuti Vieport height, kao i Vertical u padajućem meniju.

Isprekidana horizontalna linija prikazuje raspon do koga se prostire viewport height i sam
prikaz.

Vođice

Adobe XD, poput Photoshopa, Illustratora i sl., podržava upotrebu vođica radi lakšeg
raspoređivanja i poravnanja elemenata.

Vođice su zamišljene linije koje se prostiru horizontalno ili vertikalno preko celih artboardova
kako bi pomogli u radu, ali neće biti prikazane prilikom izvoza projekta i krajnjeg prikaza.

Slika 3.4. Vođice

Da bismo kreirali vođicu, potrebno je da dovedemo kursor miša do leve, odnosno gornje ivice
artboarda. Pojaviće se traka nešto drugačije sive boje uz ivicu artboarda, dok će kursor miša
biti promenjen u dve strelice koje pokazuju horizontalno, odnosno vertikalno. Tada uhvatimo
levim tasterom miša i držeći povlačimo kako bismo kreirali vođicu. Pošto otpustimo levi taster
miša, vođica ostaje na mestu.

Copyright © Link group

Ukoliko pomeramo element, pojaviće se privremene oznake ljubičaste boje koje označavaju
udaljenost od drugih objekata i potencijalno poravnanje sa njima. Udaljenost od drugih oblika
i ivica artboarda možemo videti i ukoliko pritisnemo taster Alt dok selektujemo element.

Crtanje oblika i linija

Adobe XD omogućava iscrtavanje osnovnih oblika koristeći alate iz trake sa alatima koja se
nalazi sa leve strane radnog okruženja. Tu možemo naći opcije Rectangle, Ellipse, Polygon i
Line, koje su i prikazane na slici ispod. Nakon crtanje i uopšte postavke elemenata, Selection
alat omogućava njihovu selekciju i izmenu.

Slika 3.5. Alati

Napomena:

Sam toolbar (traka sa alatima) deluje dosta jednostavnije od ekvivalentnih delova radnog
okruženja Adobe Photoshop ili Illustrator softvera, ali sadrži krucijalne alate koji su potrebni
za Adobe XD.

Ukoliko izaberemo Rectangle (pravougaonik) alatku iz trake sa alatima, možemo crtati

pravougaone oblike, odnosno kvadratne ukoliko pritisnemo i držimo taster Shift na tastaturi
tokom crtanja.

Ukoliko izaberemo Ellipse alatku, možemo crtati ovalne oblike, odnosno kružne ukoliko držimo
pritisnut taster Shift.

Shodno tome, ukoliko izaberemo Polygon alatku, možemo crtati višeugaone oblike. Kao i kod
prethodnih, ukoliko držimo pritisnut taster Shift, crtanje obavljamo srazmerno.

Crtanje Line alatkom stvara prave linije. Shodno prethodnim opcijama, držeći Shift taster
stvaramo linije koje su isključivo savršeno horizontalne, vertikalne ili pod uglom od 45 stepeni
(dijagonalne).

Copyright © Link group

Pošto nacrtamo oblik, on će automatski ostati označen (selektovan). Bilo da smo ga tako
označili ili iskoristili selection alatku, properties panel će prikazivati opcije u vezi istog.
Appearance deo će biti prikazan kao na slici ispod.

Slika 3.6. Appearance odeljak Properties panela

Ponuđene opcije, označene na slici, jesu:

A. Opacity – opcija kojom menjamo vidljivost elementa od 0% (providan) do 100%

(potpuno vidljiv). Istoimeno svojstvo kasnije koristimo u CSS kodu.
B. Blend mode – opcija koja određuje način prikaza i stapanja sa elementima koji se
nalaze ispod. Ove opcije u potpunosti odgovaraju istoimenim opcijama u Adobe
Photoshop softveru.
C. Border radius – opcije kojima podešavamo eventualno zaobljenje uglova. Prva ikonica
sa leve strane definiše podjednako zaobljenje svih uglova, dok sledeća (odvojeni
uglovi) definiše zasebno zaobljenje uglova. U zavisnosti od izbora, sa desne strane
ćemo moći da upišemo jednu ili četiri vrednosti zaobljenja.
D. Fill – opcija kojom definišiemo boju ispune elementa. Checkbox sa leve strane možemo
kortisti da kompletno ugasimo/uključimo ispunu elementa. Klikom na pravougaonik
koji predstavlja ispunu, pozivamo dodatni dijalog izbora boje. Klikom na ikonicu pipete
sa desne strane, uključujemo opciju za izbor boje direktno sa ekrana. Pojavljuje se
lupa koja zumira deo gde se kursor nalazi. Fill opcije neće biti prikazane za linije i
uopšte elemente koji nemaju ispunu.
E. Border – opcija kojom definišemo ivicu, okvir elementa. Funkcioniše skoro istovetno
kao prethodna opcija, Fill, uz dodatna podešavanja debljine ivice (size), isprekidane
linije (dash i gap), kao i ponašanja pozicije, završetka i uglova bordera. U Adobe
Illustrator softveru se naziva stroke.
F. Shadow – opcija kojom definišemo senku koju element stvara. Kao i kod prethodne
dve opcije, klikom na pravougaonik biramo boju. Po podrazumevanim podešavanjima,
neće biti uključena za element. Ukoliko je uključimo, pojavljuju se dodatne opcije

Copyright © Link group

 kojima definišemo poziciju senke u odnosu na element koji je stvara (X i Y polja), kao
i zamućenje senke (B polje). Ove opcije odgovaraju shadow podešavanjima CSS-a.
G. Background blur – opcija kojom možemo postaviti zamućenje (blur) na elementima
ispod selektovanog. Izborom ove opcije se isključuje ispuna samog elementa. Opcije
koje se pojavljuju ako je uključimo su nivo zamućenja (amount), svetlina (brightness)
i vidljivost (opacity). Klikom na sam naziv opcije možemo je promeniti u Object blur,
koji, umesto zamućenja elemenata ispod, zamućuje (blur) sam element uz jednu
opciju jačine (amount). Iako ove dve opcije, tj. varijante iste opcije deluju zanimljivo
i potencijalno stvaraju zanimljiv vizuelni efekat, treba ih oprezno koristiti, jer ne postoji
lak način da isto repliciramo u HTML/CSS okruženju, tako da se postavlja pitanje
opravdanosti njihove upotrebe.

Ukoliko je selektovan polygon element, u ovom odeljku ćemo ispod Blending Mode opcije naći
i opciju broja uglova elementa, kao i opciju njihovog zaobljenja.

Ukoliko želimo da postavimo zaobljene uglove, to možemo učiniti i tako što označimo
(selektujemo) oblik nakon crtanja, kada će se pojaviti i tačke zaobljenja pri samim uglovima.
Ukoliko uhvatimo levim tasterom miša neku od ovih tačaka i držeći pomeramo, stvaramo
podjednako zaobljenje svih uglova. Ukoliko to vršimo dok istovremeno držimo pristisnut taster
Alt na tastaturi, zaobljenje ćemo vršiti samo na tom uglu. Kao što smo već saznali, iste opcije
možemo postići i kroz Properties panel.

Crtanje Pen alatkom

Kao i kod mnogih drugih programa, Pen alatka u Adobe XD zaslužuje posebnu pažnju. Ovom
alatkom možemo stvarati kompleksne linije, ali i oblike ukoliko linijom „zatvorimo” oblik.

Najjednostavnije je crtanje pravih linija i segmenata. Klikom levim tasterom miša i ponovnim
klikom na drugom mestu (bez držanja klika) stvaramo pravu liniju. Ukoliko nastavimo dalje,
stvaramo pravolinijske segmente.

Kao i kod Line alatke, držeći taster Shift, ograničavamo se na horizontalne/vertikalne

segmente ili one pod uglom od 45 stepeni.

Ukoliko se tačka prikazuje sa praznim krugom selekcije, ona nije selektovana. Ukoliko je krug
selekcije ispunjen, ta tačka je selektovana. Poslednja nacrtana je automatski selektovana.

Ukoliko pritisnemo taster Esc na tastaturi ili izaberemo neki drugi alat, možemo liniju ostaviti
nezatvorenu. Ukoliko ipak završimo poslednji segment na početnoj tački, stvorićemo zatvoren
oblik.

Ukoliko prilikom dodavanja tačaka i iscrtavanja segmenata zadržimo levi taster miša pritisnut
i povlačimo u stranu, automatski ćemo stvoriti dodatne pomoćne tačke koje određuju
zaobljenje tačke. Kao i kod drugih Adobe alata, svaka tačka Pen alatke je ili sa oštrim ili sa
zaobljenim prolaskom.

Dvoklikom na tačku menjamo tip tačke iz oštre u zaobljenu i obrnuto. Izmenu tačaka i njihovih
detalja vršimo samom Pen alatkom ukoliko precizno mišem označimo tačku ili pomoćnu tačku.
Takođe, izmenu možemo vršiti Selection alatkom, ali u tom slučaju moramo dvokliknuti na
liniju/oblik stvoren Pen alatkom da bismo pristupili tačkama.

Copyright © Link group

 Savet:

Ukoliko ne želimo da Adobe XD poravnava tačke (snap) prema obližnjim postojećim

tačkama, možemo držati pritisnut taster Ctrl na Windows ili Cmd na macOS sistemu.

Napomena:

Ukoliko se do sada niste sretali sa Pen alatkom ni u jednom alatu niti ste je koristili,
preporuka je da naučite njenu u potrebu i funkcionisanje u Adobe Photoshop ili Adobe
Illustrator softveru. Adobe XD Pen alatka, iako poseduje sve najbitnije opcije, ipak nije u
toj meri upotpunjena i kompleksna kao istoimene alatke u pomenutim radnim okruženjima.

Tekst

Tekst u Adobe XD dolazi u dve varijante. To su:

• Point type - tekst se ne nalazi u posebnom okviru i ostaje u jednom redu, osim ukoliko
mi to ne promenimo tasterom Enter;
• Area type – tekst se uklapa u zadati okvir i njegove dimenzije.

Oba načina kreiranja teksta se postavljaju koristeći istu alatku iz trake sa alatima – Text.
Razlika nastaje u zavisnosti od toga da li smo samo pomenutom alatkom kliknuli levim
tasterom miša ili smo držeći nacrtali okvir za tekst.

Pošto je tekst postavljen, Properties panel će prikazivati Appearance opcije, iste kao kod
prethodno objašnjenih alata za crtanje, ali će se iznad prikazivati Text odeljak sa opcijama
samog teksta, kao što je prikazano na slici ispod:

Slika 3.7. Text odeljak Properties panela

Copyright © Link group

Ove opcije, označene na slici, jesu:

A. Font opcija - Izbor font familije. Treba imati na umu da neće svi fontovi dostupni na
računaru biti dostupni i u web okruženju.
B. Font size opcija – Veličina teksta u pikselima.
C. Font weight opcija – Određuje težinu (weight) i stil (style) teksta. Odgovara
svojstvima font-weight i font-style u CSS jeziku.
D. Character spacing opcija – Određuje razmak između pojedinačnih karaktera.
Odgovara letter-spacing opciji CSS jezika.
E. Line spacing opcija – Određuje prored teksta. Odgovara line-height opciji CSS
jezika.
F. Paragraph spacing opcija – Određuje razmak između posebnih paragrafa teksta.
Može se postići marginama u CSS jeziku.
G. Align opcije – Poravnanje teksta levo/centrirano/desno. Nažalost, ne postoji Justify
opcija koje se može naći u text-align svojstvu CSS jezika.
H. Opcije konverzije iz Point u Area text i obrnuto.
I. Posebne opcije teksta za promenu veličine pisma i sl.

Pitanje

Šta se događa ukoliko držimo taster Shift dok crtamo Pen alatkom?

a) Prekidamo tekuću liniju i automatski započinjemo novu

b) Crtamo sledeći segment u režimu crtanja slobodnom rukom
c) Crtamo sledeći segment kao pravu liniju horizontalno ili vertikalno,
odnosno pod uglom od 45 stepeni

Objašnjenje:

Držeći Shift taster, ograničavamo se na horizontalne/vertikalne segmente ili one pod uglom
od 45 stepeni.

Rezime

• U ovoj jedinici smo naučili da artboard delove koristimo kao papir za crtanje i da sve
što kreiramo kreiramo na njima. Shvatili smo da se artboardovi mogu organizovati
putem panela Layers, kao i da ih možemo uređivati kroz isti panel ili direktno u radnom
okruženju. Saznali smo da možemo kreirati skrolujući Artboard opcijama iz Properties
panela. Naučili smo da koristimo vođice radi poravnanja elemenata i uopšte kao pomoć
u radu. Naučili smo da crtamo koristeći alate iz trake sa alatima koja se nalazi uz levu
ivicu radnog okruženja i da podešavamo nacrtane elemente koristeći Properties panel.
Saznali smo kako možemo postavljati i uređivati tekst koristeći Area i Point type.

Copyright © Link group