Dobivanje piksela pravo na Sketch-u

Ako dizajnirate sučelja za digitalne platforme, pikseli su vaš Lego. Sastavljate svaki dio sučelja i imate potpunu kontrolu nad onim gdje ide svaki piksel. Dizajni koje stvarate djeluju i kao temelj na kojem je izgrađen konačni proizvod. Stoga je važno osigurati da su vaši dizajni vjerni pikselima od kojih su izgrađeni - preciznim i ponovljivim jedinicama koje se mogu dosljedno i bez pogreške ponavljati.

Možda postoji mnogo razloga zbog kojih u dizajnu završimo s pola piksela, no evo nekoliko savjeta koji vam mogu pomoći da postignete čiste i piksele savršene dizajne tijekom rada na Sketch-u.

← Pixel Perfect vs Blurry Mess →

Nekoliko osnova

  1. Nikad ne biste trebali namjerno ići za pola piksela (oni ionako stvarno ne postoje). Ravna vodoravna ili okomita linija ne trebaju pola piksela i ne bi trebale imati nijedan. Idite po jasnim i čistim linijama.
  2. Ako pola piksela ne postoji, zašto su dopušteni u Sketch-u?
    Jer Sketch (i ostali alati) rade u vektorskom i bitmap formatu. Pola piksela simulirano je smanjenjem neprozirnosti punog piksela. Koriste polovinu piksela za izračunavanje zamagljenosti kako bi dobili mekše kutove i rubove, na primjer, pri crtanju dijagonala. Trebali biste pročitati više o ovim stvarima tražeći "nagovještavanje piksela" i "antialiasing".

Dakle, evo nas ...

1. Uključite "Prilagodba piksela"
To osigurava da rubovi vaših novih slojeva uvijek završavaju na punim pikselima. Isto je i za kretanje slojeva.

2. Dodajte "Prikaži piksele" na Alatnoj traci
Upotrijebite ovo često da biste bili sigurni da su vaši slojevi međusobno poravnani sve do piksela.

3. Uključite "Prikaži pikselu mrežu"
Kad zumirate više od određene razine (800% od pisanja) na ekranu se pojavljuje rešetka piksela - ovo je vrlo korisno u otkrivanju zalutalih „pola piksela“.

Ova se rešetka pojavljuje samo kada uvelike uvećate zum, ali može biti od velike koristi u ispravnom poravnavanju objekata.

4. Nikada ne promijenite veličinu miša - uvijek je promijenite veličinu s inspektorom.

5. Koristite Inspector za pomicanje slojeva
Ako trebate pomicati sloj mišem, završite s tipkovnicom kako biste bili sigurni da ste ispravno uskladili stvari.

6. Pazite na piksele kad god skalirate
Izbjegavajte skaliranje u postocima osim ako nije 200%, 300% itd. (Skalirajte se u više od 100).

7. Budite oprezni pri poravnavanju slojeva pomoću alata za poravnanje u Inspektoru
Prilikom izrade ikona obratite posebnu pozornost - ravnomjerne se linije ujednačavaju s ravnim razmacima i ostalim ravnomjernim oblicima. Neparne linije težine poravnavaju se s neparnim oblicima težine.

Ta lagana narančasta linija pokušava sjediti između dva piksela (tako završava sjedenje na dva simulirana pola piksela)

9. Nikada ne upotrebljavajte "središnje" obrube, osim ako stvarno nisu potrebni
Kao kad radite s stvarno jako malim ikonama - čak i tada pregledajte stvarnu veličinu i pokušajte dobiti jasne oštre rubove.

← Granice „Središta“ često su na pola piksela

10. Izbjegavajte alat crta i umjesto toga koristite pravokutnik.
Alat za liniju može vaše polazne točke postaviti na pola piksela (ili još gore frakcijskih piksela).

11. Stvorite sve ikone na mreži od početka, unutar postavljenih ograničavajućih okvira
Tako ćete osigurati da između ostalog ne dođete u poteškoće s usklađivanjem.

12. Također, za sada izbjegavajte "vanjske" granice - zadano unutar granica.
To je uglavnom zbog toga što se vanjske granice u Sketch-u zanemaruju dok se poravnavaju i kada stvaraju simbole.

Granice

13. Izbjegavajte prečace "okruglo piksela" - nemate kontrolu nad stvarnim oblikom ili poravnanjem.

14. Nema 1px linija sa sjenom 0,5 zamućenja - koriste se zadani Sketch UI predlošci.

Samo svjesnost načina rada piksela trebala bi biti dovoljna da privučete pažnju na svoje piksele. Nadamo se da će ti savjeti moći pokrenuti.

Ovaj članak je iz niza internih radionica dizajna koje provodimo u našem studiju - Buuuk. Evo, vodim tim za dizajn koji za naše klijente stvara mobilna rješenja koja se mogu nositi.

✏ @isnav