Ako predstierať web pomocou aplikácie Sketch

Chcete vytvoriť jednoduchý maketa webových stránok, ale Photoshop vám znie len trochu skľučujúco? Ste po niečom rýchlom a ľahkom, čo efektívne predvedie váš nápad? Bohemian Coding vyslyšal vaše modlitby a priniesol nástroj, ktorého jadrom boli návrhári webových a používateľských rozhraní. Volá sa Sketch a práve vyšla verzia 3.

Skica je úplne založená na vektoroch, čo znamená, že všetko, čo robíte, bude škálovateľné a vaše procesy budú nedeštruktívne. Táto funkcia je v dnešnej dobe absolútnou zlatou farbou, so všetkými rôznymi zariadeniami a rôznymi veľkosťami a rozlíšením obrazovky, ktoré musíte brať do úvahy.

Už dva roky používam Sketch výlučne na všetky svoje dizajnérske práce a už dlho som necítil potrebu prejsť na niečo iné.



V tomto výučbe vytvorím maketu webových stránok pre digitálne štúdio s názvom Think Orange. Prevediem vás niekoľkými základnými konceptmi a nástrojmi aplikácie Sketch - vrátane niekoľkých zaujímavých nových funkcií, ktoré boli predstavené vo verzii 3 - a prevediem vás od prvého textového bloku až po export nášho finálneho dizajnu a podkladov.

Naučíme sa, ako vytvárať hlavičky a tlačidlá, pracovať s mriežkami, používať tvary na maskovanie prvkov, exportovať všetky aktíva v rôznych rozlíšeniach - sietnice a iné než sietnice - a oveľa viac. Ak nemáte kópiu skice, chyťte a skúška zadarmo a nasledovať.

01. Vytvorte nový súbor

Začnime vytvorením nového súboru. Na paneli ponuky prejdite do ponuky Súbor> Nové zo šablóny> Webdizajn. Tu už máme pre nás pripravené niektoré kresliace plátna, napríklad Web, Tablet a Smartphone (umelecké plátno si predstavte ako špeciálne plátno), ako aj niektoré štýly textu a prvky používateľského rozhrania.

02. Vložte symboly

Prejdite na druhú stranu a nájdete všetky symboly a štýly textu zabudované v tejto šablóne. Od formulárov cez tlačidlá, hlavičky až po úvodzovky, môžete vložiť symbol kliknutím na Vložiť> Symbol.

03. Vykonávanie zmien

Každá zmena, ktorú urobíte v symbole, sa prenesie do každej inštancie tohto symbolu. Ak teda chcete niekde na celej čiare zmeniť farbu tlačidla Odoslať na každej stránke, stačí to urobiť raz. To isté platí pre štýly textu.

Textové štýly fungujú rovnako ako značky HTML - môžete vytvoriť svoje hlavičky, text a prepojiť textové štýly. Keď jeden zmeníte, rozšíri sa to po všetkých prvkoch. Praktický.

04. Pozadie hlavičky

V rámci tohto tutoriálu sa vrátime na našu prvú stránku a budeme pracovať na kresliacom paneli Desktop. Začnime tým, že pre svoju hlavičku vytvoríme jednoduché pozadie. Vložte obdĺžnik kliknutím na položky Vložiť> Tvar> Obdĺžnik (alebo stlačením klávesovej skratky R).

Urobme to tak, aby vyplňovalo celú šírku stránky, a aby to bolo niečo ako 900 pixelov vysokých. Napravo od inšpektora máte prístup k výplniam, okrajom, tieňom - ​​pomenujete ich.

05. Vložte názov

Teraz pridať názov. Vložme textový blok (T) a potom ho môžeme iba napísať. V nástroji Inspector máme kontrolu nad písmom, veľkosťou, farbou a všetkým, čo by ste čakali.

06. Vytvorte textové pole

Pre navigačný panel v hornej časti vytvorím textové bloky pre rôzne odkazy. Potom, po výbere všetkých odkazov, použijem nástroje Zarovnať v hornej časti inšpektora na ich vodorovné zarovnanie a rovnomerné rozmiestnenie. Môžeme vytvoriť nový štýl textu a nazvať ho „Navigačné odkazy“.

07. Vložte obrázok

Možno máte logo alebo fotografiu na pozadí, ktoré chcete použiť. Ak chcete vložiť obrázok, je to také jednoduché ako presunutie myšou. Stačí presunúť obrázok z vyhľadávača do okna Skica a tam je. Ak na ňu dvakrát kliknete, môžete ju orezať, vyplniť alebo dokonca vektorizovať.

08. Výzva na akciu

Pre tlačidlo Výzva na akciu vložím symbol tlačidla a zmením text na „Požiadajte nás o cenovú ponuku“ (návod, ako to urobiť, nájdete v kroku 2).

09. Jedinečné farby

Chcem, aby toto konkrétne tlačidlo malo inú farbu. Ak jednoducho zmeníme farbu, zmenia sa tiež všetky tlačidlá v tomto dokumente. Najprv ho teda musíme odpojiť od symbolu.

Ako by ste čakali, stačí kliknúť pravým tlačidlom myši na symbol (uistite sa, že ste vybrali priečinok so symbolmi a nie prvok v ňom) a vyberte možnosť Oddeliť symbol formulára.

10. Rozmazajte sa

Ak chcete replikovať teraz známe rozmazanie, ktoré nájdete v systéme iOS a novom OS X Yosemite, stačí vytvoriť obdĺžnik, ktorý sa použije ako vrstva rozmazania, v rozbaľovacom zozname rozmazania v inšpektore vyberte položku Blur pozadia a dolaďte množstvo rozmazania v posuňte dole podľa vášho vkusu a nezabudnite zmeniť jeho nepriehľadnosť, aby ste skutočne videli, čo sa za ním skrýva.

11. Pridanie štítku

Teraz chcem vytvoriť jednoduchú mriežku objektov 4x3 - povedzme obrázok a jednoduchý štítok. Zoskupím prvky a vyberiem možnosť Usporiadať> Vytvoriť mriežku. Tu môžete nastaviť počet stĺpcov, riadkov a okrajov medzi nimi. Kliknite na Make Grid a voilà!

12. Tvary pre tím

Je čas predstaviť náš pekný tím. Chcem maskovať fotografie ľudí šesťuholníkovým tvarom, ako malý odznak. Poďme na Vložiť> Tvar> Polygón, zmeňte počet bodov na šesť na inšpektore a možno zmeňte jeho polomer ohraničenia.

Jednoduchým dvojitým kliknutím na tvar vstúpite do režimu úprav. Vyberte všetky rohy (kliknutím na malé kruhy a súčasne stlačte kláves Shift) a zmeňte posuvník rohov na inšpektore podľa vášho vkusu. Nakoniec vyberte tvar a obrázok, ktorý chcete zamaskovať, zoskupte ich (Cmd + G), uistite sa, že sa obrázok nachádza nad tvarom, v zozname objektov kliknite pravým tlačidlom myši na tvar a vyberte možnosť Použiť ako masku.

13. Vývoz artboardov

Ak ste s výsledkom spokojní a chcete ho exportovať, jednoducho vyberte kresliacu plochu a v inšpektore uvidíte Export a malý znamienko plus vpravo. Kliknite na ňu a môžete pridať ľubovoľné množstvo rôznych rozlíšení a formátov. Po dokončení kliknite na položku Exportovať v dolnej časti bočného panela.

14. Export jednotlivých aktív

Pokiaľ ide o export jednotlivých aktív, je to rovnaké ako v predchádzajúcom prípade. Možno chcete toto tlačidlo exportovať. Vyberte ju a v inšpektore kliknite na možnosť Exportovať ďalej. Pridajte verziu 1x a 2x pre obrazovky sietnice a kliknite na Exportovať.

Element môžete dokonca pretiahnuť priamo zo zoznamu objektov na pracovnú plochu a vytvorí sa z neho PNG. Mágia!

Slová: Rafael Conde

najlepší počítač na spustenie adobe kreatívneho cloudu

Rafael Conde je odborníkom na dizajn, hudbu a kávu. Sledujte ho na Twitteri na adrese @rafahari . Tento článok sa pôvodne objavil v čistom čísle časopisu 258.

Páči sa ti to? Prečítajte si tieto!

Našli ste vynikajúce návody pre Sketch alebo máte nejaké kreatívne tipy? Dajte nám vedieť v komentároch nižšie!