13. diel - Adobe XD - Rady a tipy čo ďalej + klávesové skratky

V predchádzajúcom kvíze, Kvíz - Tvoríme tvary v Adobe XD, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

Ešte predtým, než sa pustíme do klávesových skratiek v Adobe XD, povieme si v pár vetách, kde hľadať inšpiráciu na Adobe XD, ako využiť prepojenie programov od Adobe a kde nájdeme moderné webové stránky, ktoré môžu slúžiť ako naša šablóna pre tvorbu. Často vieme, ako určitý softvér používať, ale nemáme v tom momente nápad na tvorbu. Preto sa treba inšpirovať od tých najlepších, prípadne od tých, ktorí sú hodnotení ako najlepší.

Kde hľadať rady a tipy pre Adobe XD

Ako prvé sa budeme zaoberať Adobe XD. Tento kurz Adobe XD nás mal vykonať od úplných základov až po niektoré pokročilejšie metódy práce v Adobe XD. Ukázali sme si napr. ako si vytvoriť funkčný „carousel“ z obrázkov a prezentovať naše portfólio, ako vytvoriť zložitejší prototyp typu prekrytia textu, ako si vytvoriť login stránky pomocou pluginu atď. Skrátka bolo toho dosť a mohlo by nám to v našej tvorbe stačiť.

Základné informácie nájdeme na oficiálnych stránkach Adobe XD, ktoré nám pomôžu s prvotným nastavením Adobe XD, ale napríklad aj dizajnom, tvorbou prototypov atď. Manuál je v angličtine, preto je potrebné vedieť jazyk alebo si jednotlivé tipy preložiť (prípadne aj preložiť pomocou nástroja celú stránku ).

Je potrebné neustále spomínať neuveriteľné možnosti, ktoré nám Adobe vďaka prepojeniu všetkých programov ponúka. Čo si vytvoríme v Ilustrátore, Photoshope, ale aj InDesigne si môžeme ľahko nakopírovať alebo otvoriť v XD. Skvelá možnosť je vytvárať si napr. aj animácie v Adobe After Effects, prípadne Animate a preniesť si ich do Adobe XD. Pokiaľ vlastníme viac programov napr. v rámci Adobe Creative Cloud, určite ich odporúčam využívať na maximum, pretože takto môžeme vytvoriť naozaj pútavý web vďaka vlastnej úprave obrázkov, ikon atď.

Preto odporúčam pozrieť ďalšie kurzy zamerané na Adobe Photoshop, Adobe Illustrator alebo Adobe InDesign.

Pokiaľ sa v lekciách Adobe XD alebo na chystaných ďalších Adobe kurzoch na niečom zaseknete, napíšte mi správu a ja vám rád ukážem tú správnu cestu, prípadne aj poradím s niečím zložitejším.

Kde hľadať inšpiráciu na atraktívnych weboch

Ďalej sa treba pozrieť, kde čerpať inšpiráciu. Ukážeme si stránky na moderné weby, ktoré dnes fungujú a sú designovo atraktívne. Ukážeme si pár odkazov a tipov, kde hľadať vhodné stránky.

Úplne najlepšie je samozrejme sledovať tie najúspešnejšie. Ak sme však začiatočníci, bude nám nejaký čas trvať, než sa k podobnému dizajnu webov aspoň priblížime. Môžeme však objaviť niečo, na čo by sme normálne neprišli. Nepredpokladám, že budeme vytvárať úplné kópie úspešných webov, ale vezmime si z toho vždy to, čo nás najviac zaujme a čo bude pre náš jedinečný navrhnutý web typické.

Ja osobne rád čerpám zo stránky webtop100 az kategórie firemných webov. Sú tu naozaj špičkové weby, ktoré súťažia v tejto prestížnej súťaži. Napríklad v roku 2021 vyhrali túto súťaž www stránky Bernardu, ale aj napríklad taká Česká zbrojovka má veľmi vydarený a mne osobne najsympatickejší web. Záleží samozrejme na vkuse. Držal by som sa však najnovších trendov ohľadom tvorby webov.

Bernard web

Česká zbrojovka web

Pokiaľ hľadáme ďalšiu inšpiráciu, ja osobne mám rád blog od Miowebu, kde nájdeme napr. článok zameraný na 8 trendov webdesignu, alebo sa tu môžeme pozrieť na výber niektorých šablón, ktoré použili na tvorbu webov.

Klávesové skratky v Adobe XD

Podobne ako pri iných programoch od Adobe aj v XDčku si môžeme uľahčiť prácu na projektoch pomocou veľkého množstva klávesových skratiek. Tie nám uľahčia a urýchlia prácu s programom, preto ich odporúčam používať.

Pri použití klávesových skratiek všetko vyzerá ľahko a efektívne, aj keď sa pozrieme na akékoľvek inštruktážne videá k programom.

Preto sa ich poďme naučiť. Môžeme ich nájsť ako v tejto lekcii, tak aj v priloženom súbore, kde sme ich nachystali samozrejme v programe Adobe XD. Môžeme priložený súbor skratiek použiť aj ako šablónu pre inú tvorbu 🙂

Skratky ľavý panel

Skratky	Popis
V	Výber
R	Obdĺžnik
E	Elipsa
L	Čiara
P	Pero
T	Textové pole
A	Nový Artboard
Z	Lupa

.<> Skratky upraviť

Skratky	Popis
Ctrl + C	Kopírovať
Ctrl + V	Vložiť
Ctrl + Alt + V	Vložiť potiahnutím
Ctrl + A	Výber všetkého
Shift + Ctrl + A	Výber všetkého ostatného

.<> Skratky object

Skratky	Popis
Ctrl + G	Do skupiny
Shift + Ctrl + G	Rozdeliť skupinu
Ctrl + K	Vytvorí komponent
Shift + Ctrl + K	Vyberie hlavný komponent
Shift + Alt + H	Orez horizontálny
Shift + Alt + V	Orez vertikálny
Shift + C	Zarovná do stredu
Shift + Ctrl + Left	Zarovná doľava
Shift + Ctrl + Right	Zarovná doprava
Ctrl + ]	Pošle vpred
Ctrl + [	|Pošle dozadu

.<> Skratky view

Skratky	Popis
Ctrl + +	Zoom in
Ctrl + -	Zoom out
Ctrl + ;	Skryje všetky guidy
Shift + Ctrl + ;	Zamkne guidy
Shift + Ctrl + ´	Zobrazí mriežky
Ctrl + ´	Zobrazí štvorcovú sieť

Samozrejme nejde o všetky klávesové skratky, ale len tie, čo sa mi najviac hodili pri tvorbe a najviac som používal. Čím viac projektov budeme v Adobe XD robiť, tým lepšie nám ich používanie samozrejme pôjde. 😇

V budúcej lekcii, Adobe XD - Exporty do rôznych formátov a pre web , sa budeme venovať exportom do formátov PDF, JPEG, PNG, SVG, exportom do iných programov Adobe (After Effects, Photoshop) a exportom pre webový editor.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.