Ikon Indstiller med farveoverskridelse i skitse

Med Sketchs kraftfulde symboler og tilsidesættelser kan du hurtigt og nemt oprette et ikonsæt, der bruger en tilsidesættelse til at ændre farve!

Lad os først oprette vores ikons tegnebræt. Hvad jeg har her er en 24px by 24px artboard med en indvendig 2px trim. Jeg kan godt lide at oprette en kant, som jeg kan genbruge til alle mine ikoner. Dette lag skjules, når det er tid til placering af symbolet.

Tilføj en kant for at få vores ikoner til at passe godt!

Lad os derefter oprette et simpelt ikon, som jeg vil genbruge i hele mit projekt - et standard plustegn.

Dang, det er et smukt plustegn!

Når ikonet er oprettet, skal du sørge for, at det er fladet ud i stier så meget som det kan være. Du kan bruge Layer> Stier> Flatten eller Sketch's indbyggede boolske operationer. Målet er, at du har et rent, fladt ikon. Jeg har også sat fyldet til sort bare for kontrast.

Lad os derefter yderligere tre tegnebræt, der hver er 20 x 20 x 20. I hver af disse sættes et rektangel, der fylder hele tegnebrættet. Indstil udfyldningen til farver, som du måske ønsker, at ikonerne skal være.

Se på alle disse smukke farver

I Sketch er størrelse vigtig. Sketch bruger den fysiske pixelstørrelse til at bestemme et symbols forhold til andre symboler. Det antages automatisk, at symboler af lignende størrelse hører sammen. Vi bruger dette til at hjælpe os med at vælge forskellige farver til vores ikoner. I tilfælde af vores øvelse skal du sørge for, at alle "farve" -symboler er 20px x 20px, og "ikonet" er 24px x 24px.

Derefter konverteres alle disse til symboler ved at vælge tegnebrættet og klikke på “Opret symbol”. Omdøb derefter symbolerne for at give lidt mere mening.

Et andet pænt trick Sketch har op, det er ærmet har med lagnavne at gøre. Lagnavne kan bruges til organisering. Når du præfikserer lagnavne med den samme ting og a /, vil de blive samlet i menuen Symboler. Dette bliver super nyttigt, hvis du har masser af symboler!

Sådan ser min lagliste ud nu:

Grå eller grå… åh nej!

Drej derefter en af ​​farverne øverst på ikonet.

Gå derefter til t0 Indsæt> Symbol> farve> gul, og slip det lige ind i dit ikon / plus oven på alle de andre lag.

Skaler farvelaget for at udfylde det komplette ikonstavle.

Vælg derefter ikonlaget, og tryk på maskknappen.

Whoa - nu har vi gult plustegn.

(Whoops! Sørg for at skjule kantlaget, når du er færdig!)

Nu kan jeg lide at markere det "farve / gule" lag i mit ikon til noget mere meningsfuldt - som Farve. Dette gør det lettere at finde, når du skal ændre farve.

Nu kan du indsætte ikonsymbolet i enhver del af dit sketch-dokument. ligesom ethvert andet symbol. Dog til højre kan du ændre farven til en af ​​dine foruddannede farver!

: Sind-blæst:

Hvad der er super cool ved dette, er at du kan duplikere dit ikonsymbol og oprette så mange ikoner, som du gerne vil.

Dejlige ikoner, du har der

Og skift derefter ikonet fra dine symbolindstillinger.

Tilføj ny søgning?

Puha! Nu er det tid til fest!