Kuinka luoda kuvakirjasto Sketchissä

Oletko koskaan taistellut web-suunnittelun johdonmukaisuuden suhteen? Tämä tapahtuu liian usein, varsinkin kun työskentelet mittakaavassa. Onneksi meille kuviokirjastot auttavat!



Kuvakirjasto on kokoelma käyttöliittymän suunnitteluelementtejä, joita voidaan käyttää uudelleen sivujen rakentamiseen. Esimerkkejä ovat navigoinnit, painikkeet, kappaleet, otsikot ja lomakkeet. Suunnittelemalla yksittäisiä elementtejä kokonaisen sivun sijaan kannustamme aktiivisesti uudelleenkäyttöä, mikä johtaa yhtenäisiin ja helposti ylläpidettäviin malleihin.



Ennen mallikirjaston toteuttamista on varmistettava, että suunnittelutyökalumme pystyvät käsittelemään uudelleenkäytettäviä elementtejä. Viimeisten kahden vuoden aikana suunnittelutyökaluni on ollut Sketch: kevyt, vektoripohjainen työkalu, joka sopii täydellisesti rajapintoihin ja kuvakirjastoihin. Miksi se on täydellinen? Annan sinulle esimerkin.

Oletetaan, että sinulla on painikeelementti, jota käytetään useita kertoja verkkosivustolla, ja päättää sitten muuttaa sitä. Normaalisti joudut käymään läpi ja vaihtamaan manuaalisesti kyseisen painikkeen jokaisen esiintymän. Ei Sketchin kanssa. Ohjelmisto sisältää ominaisuuden nimeltä Symbolit: erityinen tasoryhmä, jossa kaikki symboliin tekemäsi muutokset otetaan automaattisesti käyttöön kaikissa muissa instansseissa. Se on täydellinen työskennellä uudelleenkäytettävien elementtien kanssa.



OK, tarpeeksi minua laulaa Sketchin kehuja. Sukelletaan opetusohjelmaan! Eikö sinulla ole kopiota Sketchistä? Yksinkertaisesti pään yli tässä ladata ilmainen kokeiluversio.

Vaihe 01

Määritä piirtoalusta

Määritä piirtoalusta

Ennen kuin aloitamme, varmista, että sinulla on ilmainen Google-fontti Lähde Sans Pro asennettu. Luo uusi asiakirja ja aseta sitten uusi piirtoalusta siirtymällä kohtaan Lisää> Piirrä (pikanäppäin: A). Piirtotaulu on kiinteä kangas, jota käytämme näytön koona. Huomaat, että Artboard 1 on lisätty vasemmalla olevaan tasoluetteloon. Määritä oikealla olevassa Tarkastaja-paneelissa Leveys-arvoksi 1280 kuvapistettä ja Korkeudeksi 2000 kuvapistettä.



Vaihe 02

Tee verkkosi

Tee verkkosi

Nyt luoda verkkomme. Kun Artboard 1 on valittu, siirry kohtaan Näytä> Kanvas> Näytä asettelu (pikanäppäin: Ctrl + L). Näet oletusruudukon. Nyt meidän on vain muokattava sitä. Kun Artboard 1 on edelleen valittuna, siirry kohtaan Näytä> Kanvaasi> Asetteluasetukset. Aseta kokonaisleveydeksi 1080 kuvapistettä, sarakkeiden lukumääräksi 12, kourun leveydeksi 30 kuvapistettä ja sarakkeen leveydeksi 60 kuvapistettä. Varmista, että kouru ulkona on valittuna. Napsauta keskipainiketta.

Vaihe 03

Painikkeen tekeminen

kuinka olla suosittu tumblr: ssä
Painikkeen tekeminen

Nyt piirtoalusta ja ruudukko on asetettu, on aika lisätä sisältöä. Tätä opetusohjelmaa varten aiomme luoda neljä erityyppistä mallikirjastoelementtiä. Aloitetaan painikkeilla. Voit luoda painikkeen taustan valitsemalla Lisää> Muoto> Suorakulmio (pikanäppäin: R). Määritä Tarkastuksessa Leveykseksi 280 kuvapistettä ja Korkeudeksi 44 kuvapistettä. Aseta säteeksi 3 kuvapistettä ja täyteväriksi # 1A9DD3.

Vaihe 04

Tekstin lisääminen ja muotoilu

Tekstin lisääminen ja muotoilu

Lisää nyt teksti. Siirry kohtaan Lisää> Teksti (pikakuvake: T). Vaihda kirjasintyypiksi Source Sans Pro, painosta lihavoitu, väristä #FFFFFF, koon arvoksi 16pt ja napsauta keskitetyn tasauskuvaketta. Sijoita teksti siten, että se on keskellä taustaa. Valitse molemmat tasot ja siirry kohtaan Järjestä> Ryhmäkerrokset (pikanäppäin: Cmd + G). Kun ryhmä on valittu, siirry Taso> Luo symboli. Huomaat, että Sketch kehottaa sinua nimeämään symbolin, joten kirjoita Button. Symbolit voidaan tunnistaa violetin kerroksen kuvakkeella.

Vaihe 05

Symbolien käyttö

Symbolien käyttö

Symboliin tehdyt muutokset, kuten juuri luomamme muutokset, sovelletaan kaikkiin muihin symboleihin. Ainoa ongelma on, että jos muutamme painikkeen tekstiä symbolin sisällä, se muuttaa kaikkien muiden painikkeiden tekstiä. Voit estää tämän tapahtumisen valitsemalla tekstikerroksen ja valitsemalla valintaruudun Sulje pois tekstiarvo Symbolista Inspectorissa. Luodaan nyt kaksoiskappale. Siirry kohtaan Lisää> Symbolit> Painike.

Vaihe 06

Symbolit toiminnassa

käytä puhelinta piirtotablettina tietokoneelle
Symbolit toiminnassa

Jos haluat nähdä symbolit toiminnassa, muuta yhden painikkeen taustaväri. Huomaa, kuinka väri muuttuu molemmille. Mutta jos muutat yhden painikkeen tekstiä, toisen painikkeen teksti ei muutu. Vain tyylit ovat synkronoituja, ei tekstimerkkijonoja. Tämä tarkoittaa, että voimme esimerkiksi luoda Rekisteröidy, Osta nyt ja Ota yhteyttä-painikkeet, joilla kaikilla on sama tyyli.

Vaihe 07

Ennen kuin jatkat, on tärkeää olla tietoinen siitä, miten mittaus toimii Sketchissä. Valitse yksi painike, pidä Alt-näppäintä painettuna ja vie hiiri toisen painikkeen päälle näyttääksesi niiden välisen etäisyyden. Tämä ei ole vain ominaisuus, jota suunnittelijat käyttävät jatkuvasti, mutta se sopii erinomaisesti kehittäjille, joiden on säännöllisesti laskettava tarkat pikselimittaukset.

Vaihe 08

Aloita otsikoiden käyttö

Aloita otsikoiden käyttö

Seuraavaksi otsikot. Koska otsikot ovat uudelleenkäytettäviä tekstielementtejä, on tärkeää käyttää Tekstityylit-ominaisuutta symbolien sijaan. Lisää tekstikerros ja kirjoita Otsikkotaso 1. Vaihda kirjasintyypiksi Source Sans Pro, paino rohkeaksi, väri arvoksi # 3A4654 ja koko arvoksi 37pt. Valitse Taso> Luo jaettu tyyli. Tarkastuksessa huomaat, että teksti on korostettu. Luonnos kehottaa sinua nimeämään tekstityylin, joten kirjoita H1.

Vaihe 09

Otsikkokoot

Otsikkokoot

Luo H1 - H6 -elementit toistamalla viimeinen vaihe. Otsikkofontini koot ovat H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt ja H6: 15pt. Koska kukin otsikko on tekstityyli, kaikki muutokset tehdään kaikkiin muihin sen esiintymiin. Olen käyttänyt Jeremy Churchin Kirjoita Scale-työkalu otsikoiden koon määrittämiseksi. Tyyppi-asteikko käyttää modulaarista asteikkoa valitaksesi suhteelliset kirjasinkoot valitsemastasi suhteesta riippuen.

Vaihe 10

Tekstityylien järjestäminen

Tekstityylien järjestäminen

Voit järjestää juuri luomamme tekstityylit valitsemalla Lisää> Tyylitelty teksti> Järjestä tekstityylit. Täällä voit poistaa ja nimetä tekstityylejä, mutta et järjestää niitä uudelleen. Koska tekstityylit on järjestetty aakkosjärjestykseen, nimeän samanlaiset elementit samalla ensimmäisellä sanalla: esimerkiksi Lista järjestämätön ja Lista järjestetty. Noudata samaa prosessia symbolien järjestämisessä. OK, olemme käsitelleet painikkeita ja otsikoita! Mutta entä kuvat?

Vaihe 11

Avatarin tekeminen

Avatarin tekeminen

Avatareille lisää kuva ja suorakulmio, joiden molempien leveys ja korkeus ovat 130 kuvapistettä. Anna suorakulmion säde 65 kuvapistettä. Ryhmittele molemmat kerrokset ja sijoita suorakulmio kuvan taakse. Napsauta hiiren kakkospainikkeella suorakulmion tasoa ja valitse Käytä maskina. Meillä on nyt pyöreä avatar. Olemme käyttäneet suorakulmiota, jossa on säde-asetus todellisen ympyrän sijasta, koska jos haluat tehdä avatar-neliön, voit yksinkertaisesti muokata sädettä uuden muodon lisäämisen sijaan.

Vaihe 12

Mutta entä jos haluan korvata kuvan, kuulen sinun kysyvän? OK, ehkä et kysynyt sitä, mutta se johtaa minut siistiin ominaisuuteen, nimeltään asianmukaisesti Image Replace. Valitse hahmosi ja siirry kohtaan Taso> Kuva> Korvaa. Valitse toinen valokuva. Sketch muuttaa automaattisesti uuden kuvan kokoa ja vaihtaa sen nykyiseen. Käytät tätä useammin kuin luulet: se on toinen hieno ajansäästäjä!

Vaihe 13

Käyttäjäkuvien vetäminen Sisällöntuottaja Sketch-sovellusta varten

Käyttäjäkuvien vetäminen Sisällöntuottaja Sketch-sovellusta varten

Vaihtoehto omien kuviesi lisäämiselle on käyttää Sisällöntuottaja luonnokselle laajennus: Timur Carpeev. Luo vain muoto ja siirry kohtaan Laajennukset> Sisällöntuottajan luonnoslaajennus> Persona> Valokuvat. Se vetää käyttäjän valokuvat Käyttöliittymän kasvot ja lisää ne muotoon. Sketch-laajennusyhteisö on loistava.

Vaihe 14

Värimallit

Värimallit

Seuraavaksi värimallit! On tärkeää dokumentoida yleisesti käytetyt värit kuvakirjastossamme. Lisää suorakulmio, jonka leveys ja korkeus on 120 kuvapistettä, ja anna sille täyteväri # 1A9DD3. Toista tämä vaihe väreillä # 3A4654, # 475361, # 8793A1 ja # EFF0F1. Siellä on myös laajennus värimallien luomiseen kirjoittanut Jody Heavener. Valitse Lisäosat> Värimallit ja kirjoita viisi yllä olevaa heksadesimaaliarvoa.

Vaihe 15

Värikirjaston rakentaminen

Värikirjaston rakentaminen

Valitse värimalli ja napsauta Inspectorin täyttöväriä. Värivalitsimen alaosassa huomaat kaksi osiota: Globaalit värit ja Asiakirjan värit. Globaalit värit tallennetaan kaikille luomillesi Sketch-asiakirjoille, kun taas asiakirjan värit ovat ainutlaatuisia jokaiselle asiakirjalle. Lisäämällä värejä asiakirjan väreihin voit luoda oman värikirjaston.

Vaihe 16

Usein käytetyt värit

Usein käytetyt värit

Asiakirjan värien lisäksi Sketch poimii automaattisesti asiakirjan yleiset värit ja ilmoittaa kuinka usein niitä on käytetty! Tämä ominaisuus on piilotettu näkymältä, mutta siihen pääsee värivalitsimesta. Napsauta sävyn ja peittävyyden liukusäätimien oikealla puolella olevaa aluetta. Näet ponnahdusikkunan nimeltä Usein käytettävät värit ... Sketch ei vain kerro kuinka usein väriä on käytetty, mutta missä.

kuinka perustaa ruudukko suunnitteluun

Vaihe 17

Taloudenhoito

Taloudenhoito

Lataa viimeiset vaiheet lataamalla resurssi tämän oppaan mukana ja varmista, että Source Code Pro -fontti on asennettu. Resurssissa HTML sisältyy jokaisen elementin viereen. Tämä varmistaa, että kehitykseen käytetään oikeita HTML-tunnisteita ja luokkien nimiä. Käyttöhuomautuksia voidaan antaa tarvittaessa. Hieno esimerkki tästä on ruudukkojärjestelmässä, jossa on hyödyllistä saada tietoja sarakeluokista, sarakkeiden offsetista ja niin edelleen.

Vaihe 18

Varmista, että ihmiset voivat siirtyä elementteihin, jotta he eivät

Varmista, että ihmiset voivat siirtyä elementteihin, jotta heidän ei tarvitse vierittää

Resurssissa huomaat myös, että otsikossa on Jump to ... -valitsin. Kuvakirjastot voivat olla pitkiä, joten on tärkeää, että tiimisi jäsenet pystyvät siirtymään nopeasti elementtiin ilman, että tarvitsee selata koko sivua. Esimerkki tästä löytyy A List Apart -kuvakirjasto ja Anna Debenhamin kuvakirjasto .

Se siitä! Nyt tiedät kuinka työskennellä kuvakirjastojen kanssa: sinun tarvitsee vain löytää inspiraatiota omaan kirjastoon. Suosittelen lämpimästi vierailua Verkkosivustotyylin oppaat Anna Debenham ja Brad Frost, josta löydät paljon hienoja artikkeleita, työkaluja ja esimerkkejä.

Sanat : Richard Child

Richard Child on suunnittelukonsultti. Tämä artikkeli ilmestyi alun perin numerossa 272 nettilehti .

Piditkö tästä? Lue nämä!