Dette vil gøre dig til et sketch Layer Fusion Pro

Forstår du aldrig, hvad pokker foregår med fusionerede lag? Denne artikel er til dig!

Dagens industristandard for ikoner, der eksporterer filtyper, er naturligvis SVG (eller gennemsigtig PNG). Selvom det vigtigste incitament til at bruge SVG'er sandsynligvis er skalerbarheden, er filstørrelsen og friheden til at redigere SVG også fantastisk på grund af deres gennemsigtighedsmuligheder. Det betyder, at vi, (ikon) designere, har muligheden / forpligtelsen til at oprette ikoner der ser godt ud på forskellige baggrundsfarver.

Dette betyder, at vores ikoner burde indeholde lag, der udgør ikonet, og ikke indeholder nogen quick fix-simulerede negative mellemrum. I denne tutorial vil vi sænke kompleksiteten af ​​ikonet som en form (og endelig eksporteret SVG) og sørge for, at ethvert negativt rum er et faktisk negativt rum (udskæring) og ikke en simuleret (en form, der har baggrundsfarve) overlægning af et element, hvilket gør det afhængigt af baggrundsfarven). Alt i skitse.

Oprettelse af et ikon med figurer eller lagstilarter for at skabe negativ plads kommer du ingen steder, når ikonet vises på en forskellig baggrund.

Et par af de ting, vi lærer:

  • At dreje overlejringsformer, der efterligner negativt til faktiske udskæringer
  • Sammensmeltning af flere formede lag i et enkelt kombineret formlag
  • Skift med forskellige Kombiner typer (Union / Subtraktion)
  • Omarrangering af underlagsrækkefølge

Til denne tutorial arbejder vi med et forholdsvis simpelt mixer / indstillingsikon, der består af tre afrundede rektangler og tre ovale former. De ovale former har alle både et indre slag samt et ydre slag. Gå videre og genskab ikonet, og gruppér dets lag i en laggruppe ved navn Ikon, eller download Sketch-filen.

Vi arbejder med et forholdsvis simpelt ikon for at gøre det lettere at følge hvert trin, vi tager.Ikonet består af seks lag.

Trin 1. Konverter ethvert slag, der indeholder lag, til konturerne

Den første ting, vi skal gøre, er at konvertere de ovale lag, der har flere streger, der efterligner udskæringseffekten, til konturer. Det gør vi ved at vælge lagene og vælge Lag> Konverter til kontur fra menulinjen (eller ved hjælp af tastaturkombination ⇧⌘O).

Når du drejer lagene med to streger i fyldlag, ændres ikonets udseende, og vores lag vil se sådan ud ️

Trin 2. Fjern indersiden af ​​det ydre slag (udskæring)

Da figurerne havde både et fyld og to streger, har konvertering af dem til konturer omdannet hvert ovalt lag til to separate (kombinerede form) lag. Det skyldes, at et konturstrøg er en kombineret sti, der findes af to former. En, der bestemmer de ydre grænser, mens den anden bestemmer de indre grænser, hvilket skaber udseendet af et slag. I dette tilfælde har vi ikke brug for de indre grænser. Vi kan slippe af med underlaget, der er inde i den kombinerede form. Sørg for, at du sletter det rigtige underlag. Det er den nederste i det kombinerede formlag. Dette skyldes, at Sketch automatisk bruger denne sublayer-rækkefølge til streger, der er slået til konturer.

Konvertering af skyderknapformer til konturer har ført til, at det meget ydre slag (udskæringen) er placeret over det indre slag (den aktuelle skyderknap). Det betyder, at en større oval med den fyldfarve, du brugte til det ydre slag tidligere, vil overlejre det lag, der blev genereret fra det indre slag.

Når vi har fjernet indersiden af ​​det ydre slag, kan vores ikon se en underlig ud på grund af lagbestilling.

Trin 3. Flet skyderen og det ydre slag i et enkelt lag

Træk det ovale lag på rektangellaget.

Det, vi vil gøre nu, er at tage lagene, der udgør det ydre streg (udskæringen) og flette det med det første rektangel ved at trække det første udskæringslag på det øverste rektangel (skyderen).

Du kan også vælge både det ovale lag og rektangellaget (skyderen) og vælge kombinationstypen 'Union' ved at vælge 'Lag> Kombiner> Union' på menulinjen (eller ved at bruge tastekombination ⌥⌘U). Dog for virkelig at forstå hvert eneste trin i processen.

Bemærk: Hvis de to lag, du slår sammen, begge har forskellige lagformater, fungerer det lag, der er placeret lavere i dit lagpanel, som den dominerende stil. Dette betyder, at det lag, der er højere oppe på listen i dit lagpanel, mister dets originale lagformater og vedtager det nedre lag, det er fusioneret med.
Efter at have samlet den første ovale (udskæring) og rektanglet (skyderen) vil dit ikon se sådan ud ️

Trin 4. Gentag forrige trin for alle tre skyder

Nu hvor vi har fusioneret den første skyder og den første udskæring sammen, kan vi gentage trin 3 for den anden og tredje skyder.

Vi har nu fusioneret de ydre streger (udskæringer) med deres respektive skyder, skyderknappen forekommer usynlig. Bare rolig, det er bare fordi det har den samme fyldfarve som skyderen.

Trin 5. Trækker det ydre slag fra skyderen

Sketch bruger standardtypen Union kombinere som standard, når du trækker et lag oven på et andet lag. Dette betyder, at den trækkede form tilføjes til destinationsformen, som om det var en udvidelse til den form.

Hvad vi vil gøre næste, kan også gøres i bagfra. Dette skyldes, at lagrækkefølgen i det endelige, fuldt sammenlagte enkeltformede ikon kan være forskellig fra lagrækkefølgen af ​​de tre separate skyder. Med andre ord; enhver underlagsrækkefølge, man opretter til separate elementer, kan forstyrre rækkefølgen af ​​det samlede underlag i det endelige enkeltformede ikon. Af hensyn til forståelsen af ​​underlagsbestilling og Kombiner typer, vil jeg dog gøre det

Hvad vi skal gøre nu er at trække det fra skyderen, da det var grunden til, at vi brugte en ydre kant i første omgang. For at gøre formen, der er indstillet til Union, til et udskæring, er vi nødt til at ændre typen Combine til at trække fra. Der er tre måder at gøre dette på:

  1. Ved at vælge Lag> Kombiner> Trækk fra menulinjen (eller ved hjælp af tastaturkombination ⌥⌘S)
  2. Ved at klikke på Subtraher-ikonet i Sketch's værktøjslinje (forudsat at du har Kombiner ikonerne tilgængelige på din værktøjslinje)
  3. Ved at klikke på det lille ikon for kombineret type til højre for laget (i lagpanelet) og vælge Undertræk i rullemenuen.
Klik på det lille ikon for kombineretype i højre side af lagnavnet viser alle fem muligheder.

Trin 6. Gentag forrige trin for alle tre skyder

Vi kan nu gentage trin 5 for de to resterende skyder.

Alle tre skyderne har nu udskæringen trukket fra rektangelskydeformen.

Trin 7. Tilføj det indre streg til skyderen

Det næste trin er at tilføje de indre streger (den egentlige skyderknap) - vi genereres sammen med det ydre slag (udskæringen) i trin 1– til deres respektive skyder. Den bedste måde efter min mening virkelig at have fuld kontrol over, hvad der sker ved fusion, er at trække det indre streg på skyderen.

I tilfælde af, at det kombinerede destinationsformede lag er sammenbrudt, bestiller Sketch automatisk det tilføjede lag, og det er underlag oven på listen.

Jeg foreslår, at jeg udvider skyderen på underlagene. På denne måde har du fuld kontrol med, hvor underlagene er placeret i listen over skyderunderlag.

Når du kombinerer den kombinerede form 'Rektangel', bliver det let at se underlagsrækkefølgen.

Trin 8. Gentag det forrige trin for alle tre skyder

Nu hvor vi ved, hvordan man tilføjer det indre streg (skyderknap), kan vi også gentage dette trin til den anden og tredje skyderen.

Efter at have slået alle skydeknapperne til deres respektive skyder, vil lagene se sådan ud ️

Trin 9. Flet de tre fulde skyder sammen

Nu kan vi gå videre til at flette de tre skyder ind i et enkeltformet lag. Der er to måder at gøre dette på.

Metode 1
Den nemme måde er at trække den første glider på den anden glider og derefter trække den tredje fulde skyder på det enkeltformede lag (første og anden glider kombineret). Dette skaber det nøjagtige resultat, du ønsker uden yderligere justeringer.

Metode 2
Selvom vi får nøjagtigt, hvad vi vil ved hjælp af metode 1, er der en anden måde at opnå det samme resultat. Selvom det tager lidt mere tid, foreslår jeg, at du gør det på denne måde for at lære om lagordre og Kombiner typer. Vi vælger de tre fusionerede lag og vælger 'Lag> Kombiner> Union' på menulinjen (eller ved hjælp af tastaturkombination ⌥⌘U).

Når du har samlet de tre fulde skydere i en enkelt kombineret form, vil dit ikon se sådan ud ️

Du vil bemærke, hvordan nogle af de subtraktioner, der var der før, nu er forsvundet. Lad os gå videre til trin 10 for at løse dette.

En anden ting, du måske vil bemærke, er, hvordan sammenlægning af lagene ved hjælp af 'Unionen' Combine-type ser bort fra underlagets lagnavne. Dette er en af ​​grundene til, at jeg normalt ikke navngiver sublayere for ikoner, der stadig skal fusioneres, undtagen når ikonet er temmelig kompliceret. I tilfælde af komplekse ikoner vil jeg gerne hurtigt kunne se, hvilken underlag der repræsenterer hvilken del af ikonet, og hvor det skal være med hensyn til underlagsordenen.

Trin 10. Ændre kombinationstypen og arranger underlagets rækkefølge

Vi så lige, hvordan sammenlægning af tre enkeltformede lag i et ved hjælp af Combine> Union ser bort fra en hel del handlinger, vi har gjort før. Ingen bekymringer, dette kan rettes ganske let.

Vi kan enten arrangere rækkefølgen af ​​sublayere og derefter ændre Combine-typen, eller vi kan gøre det omvendt. Igen, for at forstå, hvad vi gør nøjagtigt, lad os starte med at ændre typen Combine, hvor det er nødvendigt.

  1. Begynd med at finde ud af, hvilken underlag der repræsenterer hvilken del af ikonet, så vi kan ændre typen Combine, hvor det er nødvendigt. Grundlæggende være at gøre trin 4 på en måde igen. Du vil se, hvordan det ydre udskæring (det, der plejede at være det ydre slag, husker du?) Stadig er indstillet til Trækker. Det er en god ting, da det betyder, at hver udskæring faktisk trækkes fra hvert skyderen underlag under det. Den første ændring gør vi ved at indstille kombinationstypen for den allerhøjeste øverste lille udskæring (indersiden af ​​skyderen) fra Union til Subtraktion, da den skal trækkes fra dets større søskende.
  2. Det næste trin er at ændre kombinationstypen af ​​det større søskende, jeg lige har nævnt fra Ingen til Union.
  3. Nu skal vi arrangere sublayernes rækkefølge. Det skyldes, at det fungerer sammen med lagrækkefølge. Når alt kommer til alt, hvis et underlag er indstillet til at trække fra, og der ikke er noget lag. Jeg foretrækker at bruge en ordre, der efterligner den måde, hvorpå underlagene er stablet, men alligevel grupperet pr. Skyder.
Ændring af Combine-typen viser ikke nødvendigvis umiddelbart det ønskede resultat. Det skyldes, at det fungerer sammen med lagrækkefølge.

Trin 10 (valgfrit). Flad lag

Vi har nu et enkelt kombineret formlag. Men vi kunne gå endnu længere med at beskære ikonets fodaftryk. Hvis du vil have, at ikonet ikke kan redigeres, fordi du, siger, ønsker at distribuere det sammen med andre ikoner som et ikonsæt, kan du vælge at flade det kombinerede formlag lidt mere. Du kan gøre det ved at vælge ikonet og Lag> Kombiner> Flad. at vælge Peter Nowell gjorde et godt stykke arbejde med at forklare begrænsningerne ved udfladning af figurer i Sketch, og jeg anbefaler meget godt at læse hans artikel om dette emne.

Yo Adrian, jeg gjorde det !!

Vi boksede os gennem trinnene, og vi fik titlen bælte: Et ikon, der har faktisk negativ plads, i stedet for at overlejre figurer eller lag stylesto simulere det negative rum. Du vil bemærke, at ikonet ikke længere afhænger af at have et sæt baggrundsfarve. Yay!

Øv, hvad du prædiker

Vi har brugt disse teknikker i lang tid nu på alle vores ikonprojekter. For eksempel er vores ikonsæt for mobilapps til NOS alle blevet eksporteret på denne måde for at sikre et perfekt alsidigt og skalerbart sæt.

Et andet projekt, hvor vi anvendte disse tricks, er Tiqets. Du kan tydeligt se detaljerne, hvor vi anvendte den ovenfor nævnte magi flere gange.

Vi håber, du lærte noget fra dette indlæg. Hvis du har det, giv mig et råb på Twitter.