10 vinkkiä tarkkaan suunnitteluun luonnoksessa
Sketch-toiminnolla saat molempien maailmojen parhaat puolet: skaalattavat vektorit ja tarkat pikselien hallinta. Sketch-työkalun avulla voit luoda teräviä reunoja ja määriteltyjä, tasapainoisia ääriviivoja, jotka ovat suuren suunnittelun perusta.
Sketch voi kohdistaa muodot automaattisesti pikselireunoihin ja antaa sinulle mahdollisuuden esikatsella ja muokata kutakin pikseliä varmistaaksesi viennin terävyyden. Tämä on erityisen tärkeää, kun valmistelet resursseja käytettävissä oleville näytöille, pikselitiheyksille ja alustoille.
Kun työskentelet vektorimuotojen kanssa ja viennin varoja, sinun kannattaa varmistaa, että kaikki muodot ja tasot on kohdistettu asiakirjan pikseliristikkoon, jotta vältetään epätarkat reunat, jotka voivat johtua murto-osista.
Tarkka muokkaus voidaan helposti saavuttaa pitämällä tarkastajaa silmällä ja hyödyntämällä esimerkiksi Pixel Fitting ja Pixel Zoom -työkaluja. Tässä opetusohjelmassa tutkitaan joitain suosikkityökalujani kuvapisteiden täydellisyyteen suunnitellessa.
01. Esiasetetut taulut
Suunnittelessani mobiililaitteille pidän aina mielessä erilaiset näytön koot ja tarkkuudet. Alkuperäisen iPhonen ajankohtana oli vain yksi näytön koko ja vain yksi resoluutio: yksi piste vastasi yhtä pikseliä. Tänään, kun Retina-näytöt ovat iPhonessa ja erilaiset Android-pikselitiheydet, asiat näyttävät monimutkaisemmilta.
Mutta Sketchin ennalta asetettujen piirtoalustojen, hieman suunnittelun ja yksinkertaisen matematiikan avulla resurssien valmistelu useille näytön kooille ja pikselitiheyksille on helppoa.
02. Suunnittelu 1x
Kun Apple esitteli ensimmäisen Retina-iPhonen, monet suunnittelijat alkoivat suunnitella heti 2x-tarkkuudella, pienentämällä 1x vanhojen puhelimien jälkikäteen. Kuitenkin, kun iPhone 6 Plus saapui, tästä tuli ongelmallista.
Loppujen lopuksi, jos suunnittelet jotain tarkkaa pikseliä 2x, on todennäköistä, että jos suurennat sitä 1,5x, se pääsee murto-osaan. Monet suunnittelijat ovat palanneet suunnittelemaan yhdellä kertaa, koska kun vektorimitat skaalataan 2 tai 3, taataan, että ne eivät päädy murto-numeroiksi.
03. Tarkastaja
Ensimmäinen tapa havaita tarkkuutesi on olla tietoinen niiden sijainti- ja koko-arvoista. Tarkastaja on Sketch-dokumenttisi tärkein komentokeskus. Se sisältää kaikki valitun muodon tai kerroksen ominaisuudet ja yksityiskohdat. Tämä on sinun paikka havaita puutteita murto-numeroina.
04. Sijainti- ja kokoarvot
Murtoluvut aiheuttavat alipikselien renderoinnin - tärkein syy viedyllä bittikarttakohteella voi olla epäselvä. Voit korjata tämän manuaalisesti: muokkaa vain Sijainti- ja Koko-arvoja täydiksi numeroiksi.
Ryhmien sisäisten muotojen käsittely voi olla työlästä, mutta cmd + Click -toiminnolla voit valita minkä tahansa muodon suoraan ja muokata sen arvoja.
05. Näytä pikselit
Näennäisesti sileät vektorikäyrät ja reunat voivat olla petollisia. Ottamalla Show Pixels -ominaisuuden käyttöön näet kaikki asiakirjan yksittäiset pikselit. Tämä asetus voidaan ottaa käyttöön valitsemalla Näytä>
Canvas> Näytä pikselit (shift + P).
Näkemäsi vastaa kuvan viemistä PNG: hen ja sitten suurentamista. Huomaa, että kun olet 100 prosentin zoomauksessa (todellinen koko), näiden kahden tilan välillä ei ole eroa, mutta kun lähennät edelleen, pikselit näkyvät.
06. Näytä pikseliruudukko
Jos haluat vihjeen siitä, miltä muotoilusi näyttää viennin yhteydessä, mutta et halua katsoa suuria epäselviä pikseleitä, piksel zoom on ystäväsi. Varmista, että Näytä pikseliruudukko on käytössä, valitsemalla Näytä> Kanvaasi> Näytä pikseliruudukko (Vaihto + X).
Show Pixels Grid antaa sinun erottaa sumeat pikselit pienellä kontrastilla, jotka muuten jäävät näkymättömiksi. Yhdistettynä Näytä pikselit -toimintoon kaikki reunat, jotka eivät ole linjassa pikseliruudukon kanssa, näkyvät.
07. Pyöristetään lähimpään pikselireunaan
Sketchin parhaiten piilotettu ominaisuus, pyöristäminen lähimpään pikselireunaan ratkaisee monet pikselien kohdistuksen puutteet. Kun olet havainnut vektorikuvan, jossa on alipikseliarvoja, voit valita muodon ja sitten Taso> Pyöristää lähimpään pikselireunaan.
Luonnos kohdistaa reunat automaattisesti pikseliruudukon kanssa. Tämä toimii sekä sijainti- että koko-arvojen kanssa. Tämä ominaisuus tarjoaa nopean tavan varmistaa, että mallit ovat yhdenmukaisia, varsinkin kun tuodaan kuvakkeita.
08. Muokkaa vektoripisteitä
Jos muotoasi ei ole kohdistettu halutulla tavalla, voit muokata yksittäisiä vektoripisteitä valitsemalla muodon ja napsauttamalla työkalurivillä Muokkaa. Tämä tuo vektorin muokkausvaihtoehdot tarkastajaan, jossa voit vaihtaa neljän eri pistetilan välillä ja valita pikselien pyöristysasetuksen.
09. Pyöristetään täyteen pikseliin
Pikselitarkkuus on mukava tarvittaessa, mutta sinun ei tarvitse rajoittaa itseäsi. Esimerkiksi pienten kuvakkeiden suunnittelussa voit poistaa pikselien pyöristysasetuksen pisteiden täydellisen liikkumisvapauden saavuttamiseksi. Jos kuitenkin haluat varmistaa, että muodon reunat ovat yhtenäiset, pyöreiden täyteen (tai puoleen) pikselien käyttöönotto auttaa.
10. Pikseliasennus
Globaalit asetukset, jotka takaavat pikselien tarkkuuden alusta alkaen, ovat Pixel Fitting -asetus, joka löytyy kohdasta Sketch> Preferences ...> General -välilehti> Pixel Fitting. Tämä asetus varmistaa, että kaikki lisäämäsi tai koon muuttamat tasot päätyvät koko pikselin reunaan (kiertämistä lukuun ottamatta).
Jos olet turhautunut pikseliverkon vapauden puutteesta, voit poistaa Pixel Fittingin käytöstä tarvittaessa.
Pikselien täydellisyyden suunnittelu on tärkeä käytäntö monille suunnittelijoille. Tällainen tarkkuus menee pitkälle, varsinkin kun haluat suojata suunnittelusi tulevaisuudessa puhtaasta ja terävästä renderöinnistä. Voit kuitenkin rikkoa tämän säännön, kun haluat täydellistä liikkumisvapautta.
Rakastan sitä Sketchissä: se tarjoaa ainutlaatuisen yhdistelmän joustavuutta ja tarkkaa pikselien hallintaa. Jos et ole kokeillut Sketchiä, lataa ilmainen kokeiluversio nyt.
Tämä artikkeli julkaistiin alun perin nettilehti numero 278.