Priprema i izvoz SVG ikona u skici

Ovaj će članak pretpostaviti da već razumijete osnove dizajna ikona. I usredotočite se na to kako ih pripremiti i izvoziti za upotrebu na Webu, iOS-u i Androidu. Sketch ćemo koristiti za organiziranje, upravljanje i izvoz ikona.

Također ćemo se usredotočiti na jednobojne ikone koje se mogu dinamički tonirati na svim platformama.

Skica 42

Počeo sam pisati ovaj članak prije nego što je Sketch 42 objavljen. Čini se da su postigli neka značajna poboljšanja. To je zapravo promijenilo moj tijek rada.
1. Kopirajući se s ilustratora, snažnije se dosljedno zaustavlja na mreži piksela.
2. Promjena pravila ispunjavanja sada je mnogo lakša. (više o tome kasnije)

🖋 Počevši od Ilustratora

Prije ronjenja u skicu htio sam započeti s ilustratorom. Koristim ilustrator već 15 godina i neke je navike teško razbiti. Ja sam samo mnogo brži s alatom za olovke u ilustratoru nego skicom. Ja ikone obično ilustriram u ilustratoru i prebacujem ih na skicu.

Razlozi NE korištenja ilustratora za cijeli postupak:

1. Datoteke ilustratora ograničene su na 100 umetničkih ploča. Ako imate veliki skup ikona, ne možete ih sačuvati ni u jednoj datoteci.

2. Skupni izvoz je ograničen.

3. Ako vaš tim koristi skicu za dizajn, ionako ćete ih poželjeti u skici

Počnimo

Izrađivat ću ikone u 24x24. Volim stvoriti umjetničku ploču veličine 24 x 24 za svaku ikonu.

Ako ste poput mene, skloni ste miješati staze i oblike da biste stvorili ikonu. Na kraju ćemo poteze željeti pretvoriti u staze. I pojednostavite staze do jedinstvenih oblika.

Skicirajte staze

Bilo koji put želite pretvoriti u oblike.

Napravio sam prilagođeni prečac ⌥⌘O

Spajanje oblika

Spajanje svih oblika u njihov najjednostavniji oblik. Trebali biste biti u mogućnosti odabrati cijelu ikonu jednim klikom.

Prijelaz na Skicu

Započnimo stvaranjem ploče od 24x24 za našu ikonu. I dodajte kvadrat 24x24.

Ako ste pročitali bilo koji drugi moj članak, znat ćete da želim dodati vodiče svojim simbolima. To će također služiti kao ograničavajući okvir za simbol.

Omogućimo grupiranje ovog oblika i imenovati ga „Vodiči“, a zatim ga ponovno grupirajte.

To će stvoriti strukturu mape za naše simbole.

Sada bi bilo dobro vrijeme da razmislite o načinu imenovanja za sve vaše ikone, kao i simbole.

Evo primjera konvencije o imenovanju koju sam koristio u prošlosti. Odlučio sam da imena svojih simbola budu kraća od izvezenih datoteka. Možemo koristiti crte unaprijed za stvaranje hijerarhije u izvozu i simbolima.

Za izvoz ćemo upotrijebiti grafičku ploču i grupa slojeva će postati naš simbol.

Uvoz iz Illustratora

Sad kad smo razvrstali naše konvencije o imenovanju i strukturu dokumenata. Vratimo se za uvoz ikona iz ilustratora. Započnite s kopiranjem i lijepljenjem naše ikone s ilustratora na skicu.

Ok, jedan izgleda prilično dobro, ali pogledajmo složeniji oblik

Pa, to nije baš ono što smo očekivali, pogledajmo popis slojeva.

Postoje dva kvadratna oblika koja ovdje ne bi smjela biti. Ovo su neki predmeti iz ilustratora, vjerovatno bismo se mogli tamo popraviti. Ali to je jednako jednostavno popraviti ovdje u skici. Jednostavno izbrišite slojeve.

Izgleda bolje, ali krajnji je cilj jedinstveni oblik. Spajat ćemo sve slojeve. Najlakši način za to je odabrati sve slojeve i pritisnuti alat za spajanje.

Još jednom smo razbili svoju ikonu, tako da sada moramo reorganizirati naše slojeve i vrste saveza. Također ćemo trebati promijeniti pravilo ispunjavanja ako želimo koristiti ove svg ikone u androidu.

Što je, dovraga, Pravilo ispunjavanja?

Isto sam mislio kad mi je android dev rekao da moje svg ikone ne rade. Moja prva reakcija bila je otvaranje svg-a u uređivaču teksta i brisanje atributa. Ali to nije uspjelo, pa sam morao obaviti neka istraživanja.

Pravilo ispunjavanja je svojstvo SVG-a koje u osnovi definira kako odrediti koji su oblici ispunjeni ili oduzeti od oblika. Zadana vrijednost svg je "neulabilna", a to zahtijeva i Android. Nažalost, Sketch koristi "evenodd". Srećom Sketch pruža sve značajke koje su nam potrebne za pretvaranje oblika iz "evenodd" u "nonzero". A sada je još lakše u Sketchu 42

Uzmimo malo vremena da shvatimo kako funkcioniše pravilo ispunjavanja.

Pravilo ispunjavanja = "evenodd" polazi od vanjske strane oblika i broji svaku stazu do sredine, čak se puštaju i neparne staze se oduzimaju.

Pravilo ispunjavanja = "nečije nulo" znači da će se bilo koja putanja povučena u smjeru kazaljke na satu napuniti, a bilo koja povučena u smjeru suprotnom od kazaljke na satu oduzeti.

A kad kažem nacrtano u određenom smjeru doslovno mislim na smjer u kojem su se crtale točke.

Sada obično ne crtamo svaku točku u našim oblicima, ali važno je razumjeti kako to funkcionira kako bismo mogli popraviti svoje oblike kada se razbiju.

Srećom Sketch je sadržavao značajku za promjenu pravila ispunjavanja. Pored ikone za punjenje nalazi se ikona zupčanika.

Vratimo se našoj ikoni "vijesti" i promijenimo pravilo ispunjavanja u nula.

Sjajno, još uvijek slomljeno! Ovo je još jedna promjena koju sam primijetio u 42. Moramo biti sigurni da su slojevi u ispravnom redoslijedu. Pa sam pomaknuo vanjski najveći sloj na dno. I promijenio boolove tipove. Osiguravajući da su oduzeta područja postavljena za oduzimanje i ispunjena područja su sjedinjena.

🗒 Kao bočna napomena čini se da Sketch 42 fiksira smjer puta za nas. U prošlosti to nije bio slučaj, morali bismo koristiti alat za vodoravno okretanje, na simetrične predmete. Ili zapravo postoji opcija obrnutog puta u Sloju> Putevi> Obrnuti redoslijed.

Dakle, to je to da je naša Ikona dovršena, imam dva zadnja koraka prije izvoza.

Jer zadana crna boja nije # 000000 u Illustratoru i uvijek je zaboravim promijeniti. Volim primijeniti sloj crnog sloja koji sam nazvao "ikona crna.

I na kraju omogućuje stvaranje simbola

Pri izvozu poželjno je odabrati ploču s unutarnjim pločama. Ne zaboravite da smo ih imenovali prema željenoj strukturi datoteka.

Sada možete jednostavno izvesti PDF datoteke za iOS i SVG za Web i android u 1x kako biste izbjegli sve varijacije gustoće zaslona.

Pričekajte prije izvoza SVG-ova

Obavezno instalirajte dodatak SVGO Compressor tvrtke Bohemian Coding. Ovo je vrlo važan korak i popravit će 90% vaših SVG problema.

https://github.com/BohemianCoding/svgo-compressor

Ok, to je to

Dakle, imamo ga! Lijep SVG Icon Set s prekrasnim pikselom s 24x24 graničnim kutijama. Jednobojni su s prozirnošću tako da se mogu dinamički obojati na webu, iOS-u, Androidu, pa čak i Sketchu (vrsta ).

Savjet profesije: Možete itamniti crne ikone, ali stavljajući obojeni oblik iznad njih i promijeniti način miješanja na zaslon. Vaša pozadina mora biti bijela.

Nekoliko posljednjih napomena o implementaciji vaših ikona

mreža

Budući da u svojim ikonama nema poteza, možemo ih tonirati jednostavnom izmjenom CSS-a. To također izvrsno funkcionira sa svg spritesima.

Android

Ovim alatom možete testirati svoje SVG ikone http://inloop.github.io/svg2android/

iOS

Dok su izvezeni PDF-ovi vektorski i xcode generirat će 2x i 3x sredstva za upotrebu. Ako želite koristiti ikone različitih veličina, morat ćete ih izvesti kao zasebne pdfs.

U ovom primjeru skica bi stvorila 3 pdfs.

1x = 24x24, 2x = 48x48, 64w = 64x64. To bi bile vaše 1x veličine, a xcode bi stvorio vaše @ 2x i @ 3x varijacije.

Tu je i knjižnica koja vam omogućuje korištenje jednog 1x PDF-a.

https://github.com/mindbrix/UIImage-PDF

Hvala na čitanju

Kao i uvijek poput mene, znam što mislite ili dijelite svoj tijek rada. Možete me naći i na Twitteru @CheckYourVector