Forberedelse og eksport af SVG-ikoner i skitse

Denne artikel antager, at du allerede forstår de grundlæggende elementer i ikonedesign. Og fokus på, hvordan du forbereder og eksporterer dem til brug på Web, iOS og Android. Vi vil bruge Sketch til at organisere, administrere og eksportere ikoner.

Vi vil også fokusere på monokrome ikoner, der kan tones dynamisk på alle platforme.

Skitse 42

Jeg begyndte at skrive denne artikel, før Sketch 42 blev frigivet. Det ser ud til, at de har foretaget nogle markante forbedringer. Det har faktisk ændret min arbejdsgang.
1. Indsæt fra illustratoren og klik på pixelnet meget mere konsekvent.
2. Det er meget lettere at ændre udfyldningsreglen nu. (mere om dette senere)

🖋 Start med Illustrator

Før jeg dykkede ind i skitsen, ville jeg starte med illustratøren. Jeg har brugt illustrator i 15 år, og nogle vaner er svære at bryde. Jeg er bare langt hurtigere med penværktøjet i illustrator end skitse. Jeg designer typisk mine ikoner i illustrator og flytter dem over til at tegne.

Årsager til at IKKE bruge illustrator til hele processen:

1. Illustratorfiler er begrænset til 100 tegnebræt. Hvis du har et stort ikonsæt, kan du ikke engang opbevare dem i en fil.

2. Masseeksport er begrænset.

3. Hvis dit team bruger skitse til design, vil du alligevel have dem i skitse

Lad os komme i gang

Jeg vil designe ikonerne på 24x24. Jeg kan godt lide at oprette et 24x24 tegnebræt til hvert ikon.

Hvis du er som mig, har du en tendens til at blande stier og figurer for at oprette ikonet. I sidste ende vil vi gerne konvertere stregerne til stier. Og forenkle stierne ned til enkeltformer.

Skitse stier

Du ønsker at konvertere alle stier til figurer.

Jeg oprettede en tilpasset genvej ⌥⌘O

Flet forme

Flet alle former ind i deres enkleste form. Du skal være i stand til at vælge hele ikonet med et enkelt klik.

Gå over til skitse

Lad os starte med at oprette et 24x24 tegnebræt til vores ikon. Og tilføj en 24x24 firkant.

Hvis du har læst nogen af ​​mine andre artikler, ved du, at jeg gerne tilføje guider til mine symboler. Dette fungerer også som et afgrænsningsfelt for symbolet.

Lader gruppere denne form og navngive den "Guider", og gruppér den derefter igen.

Dette skaber mappestrukturen til vores symboler.

Nu ville det være et godt tidspunkt at tænke på en navnekonvention for alle dine ikoner såvel som symbolerne.

Her er et eksempel på en navnekonvention, jeg har brugt i fortiden. Jeg valgte at holde mine symbolnavne lidt kortere end de eksporterede filer. Vi kan bruge skråstreg til at oprette hierarki i både eksport og symboler.

Vi vil bruge tegnebrættet til eksport, og laggruppen bliver vores symbol.

Importerer fra Illustrator

Nu hvor vi har udpeget vores navnekonventioner og dokumentstruktur. Lad os komme tilbage til at importere ikonerne fra illustratoren. Start med at kopiere og indsætte vores ikon fra illustratør til skitse.

Ok, at man ser temmelig godt ud, men lad os se på en mere kompleks form

Nå, det er ikke helt, hvad vi forventede, lad os se på laglisten.

Der er to firkantede former, der ikke bør være her. Dette er nogle artefakter fra illustratøren, vi kunne sandsynligvis gå tilbage og rette det der. Men det er lige så let at rette det her i skitse. Slet blot lagene.

Ser bedre ud, men det endelige mål er en enkelt kombineret form. Vi vil flette alle lagene. Den nemmeste måde at gøre dette på er at vælge alle lagene og ramme unionsværktøjet.

Endnu en gang brød vi vores ikon, så nu er vi nødt til at omorganisere vores lag og unionstyper. Vi bliver også nødt til at ændre udfyldningsreglen, hvis vi vil bruge disse svg-ikoner i Android.

Hvad i helvede er udfyldningsregel?

Jeg tænkte det samme, da min Android-dev fortalte mig, at mine svg-ikoner ikke fungerede. Min første reaktion var at åbne svg i en teksteditor og slette attributten. Men det virkede ikke, så jeg var nødt til at forske.

Fill-Rule er en SVG-egenskab, der dybest set definerer, hvordan man bestemmer, hvilke former der er udfyldt eller trækkes fra formen. Standardværdien for svg er “nonzero”, og det er dette, Android kræver. Desværre bruger Sketch “evenodd”. Heldigvis giver Sketch alle de funktioner, vi har brug for for at konvertere vores figurer fra “evenodd” til “nonzero”. Og det er nu endnu lettere i Sketch 42

Lad os tage et minut at forstå, hvordan udfyldningsregel fungerer.

Udfyldningsregel = “evenodd” starter udefra af formen og tæller hver sti mod midten, selv stier bliver fyldte og ulige stier trækkes fra.

Udfyldningsregel = “ikke-nul” betyder, at enhver sti, der er trukket i urets retning, udfyldes, og enhver, der tegnes i retningen mod uret, trækkes fra.

Og når jeg siger, at jeg er trukket i en bestemt retning, mener jeg bogstaveligt talt den retning, hvor punkterne blev trukket.

Nu tegner vi typisk ikke alle punkter i vores figurer, men det er vigtigt at forstå, hvordan det fungerer, så vi kan fikse vores figurer, når de går i stykker.

Heldigvis inkluderede Sketch en funktion til at ændre udfyldningsreglen. Der er et tandhjulikon ved siden af ​​udfyldningen i inspektøren.

Lad os gå tilbage til vores "nyheder" -ikon og ændre udfyldningsreglen til ikke-nul.

Fantastisk, stadig ødelagt! Nu er dette en anden ændring, jeg har bemærket i 42. Vi er nødt til at sikre, at lagene er i den rigtige rækkefølge. Så jeg flyttede det ydre lag til bunden. Og ændrede de boolske typer. Sørg for, at de subtraherede områder er indstillet til at trække fra, og at udfyldte områder er sammenhængende.

🗒 Som en sidebemærkning ser det ud til, at Sketch 42 fastlægger stieretningen for os. I fortiden var dette ikke tilfældet, vi ville have været nødt til enten at bruge det vandrette flipværktøj på symmetriske genstande. Eller der er faktisk en omvendt stiindstilling under Lag> Stier> Omvendt rækkefølge.

Så det er vores ikon er komplet, jeg har to sidste trin inden eksport.

Fordi standardsortet ikke er # 000000 i Illustrator, og jeg glemmer altid at ændre det. Jeg kan godt lide at anvende en sort lagstil, som jeg kaldte ‘ikonet sort.

Og lad os til sidst oprette et symbol

Du vil vælge tegnebrættet, når du eksporterer. Husk, at vi navngav dem i henhold til den ønskede filstruktur.

Du kan nu blot eksportere PDF'er til iOS og SVG'er til web og Android på 1x for at undgå alle variationer i skærmtæthed.

Vent, inden vi eksporterer SVG'er

Sørg for at installere SVGO-komprimeringsplugin af Bohemian Coding. Dette er et meget vigtigt trin og vil løse 90% af dine SVG-problemer.

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

Ok, det er det

Så der har vi det! Et smukt pixelmonteret SVG Ikonsæt med 24x24 afgrænsningsbokse. Monokrom med gennemsigtighed, så de kan tones dynamisk på Web, iOS, Android og endda Sketch (Type ).

Pro-tip: Du kan farve sorte ikoner, men placere en farvet form over dem og ændre blandingstilstand til skærm. Din baggrund skal være hvid.

Et par afsluttende bemærkninger til implementering af dine ikoner

Web

Da vi ikke har streger i vores ikoner, kan vi farve dem ved blot at ændre udfyldningen i CSS. Dette fungerer også godt med svg sprites.

Android

Du kan bruge dette værktøj til at teste dine svg-ikoner http://inloop.github.io/svg2android/

iOS

Mens de eksporterede PDF'er er vektor og xcode genererer de 2x og 3x aktiver til brug. Hvis du vil bruge dine ikoner i forskellige størrelser, skal du eksportere dem som separate pdfs.

I dette eksempel ville skitsen generere 3 pdfs.

1x = 24x24, 2x = 48x48, 64w = 64x64. Disse ville være dine 1x størrelser, og xcode skaber dine @ 2x og @ 3x variationer.

Der er også et bibliotek, der giver dig mulighed for at bruge en enkelt 1x pdf.

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

Tak for at have læst

Som altid som mig ved hvad du synes, eller del din arbejdsgang. Du kan også finde mig på Twitter @CheckYourVector