Stvorite prilagodljive tipke pomoću kombiniranih oblika u skici

Napomena: Sketch 58 ova metoda više nije potrebna. Pogledajte moj novi članak o tome kako jednostavno stvoriti prilagodljive gumbe pomoću Sketch's Smart Layout.
Problem koji rješavamo, oblici ne odgovaraju na preglasani tekst.

Ako ste ikad pokušali stvoriti gumbe unutar simbola Sketch, brzo ste shvatili ograničenja. Čvrsti gumbi i obrisani gumbi ne odgovaraju na duljinu teksta za poništavanje. Vjerojatno ste morali napraviti kompromise, kreirajući gumbe fiksne širine ili se kreativno obrađujući s tekstom gumba kako biste ga uklopili unutar gumba fiksne širine.

Ovo je prvi od dva posta koji prikazuju različite metode za stvaranje prilagodljivih gumba koji se mogu ugnijezditi u druge simbole.

Uvođenje metode kombiniranog oblika

Koristeći snagu kombiniranih oblika, ovaj će vam vodič pokazati kako stvoriti grupe gumba i gumba koji se prilagođavaju duljini teksta preglasavanja. Ovi se gumbi mogu koristiti samostalno i mogu se ugnijezditi u druge simbole.

Ovaj vodič pokazuje kako stvoriti prilagodljive gumbe koji se mogu ugnijezditi u simbole.
Preuzmite datoteku skice

Ovu metodu možete koristiti za stvaranje više kombinacija stilova tipki, fokusirat ćemo se na stvaranje čvrste tipke i gumba samo za tekst za ovaj vodič.

Ova se metoda također može koristiti za stvaranje bilo koje kombinacije stilova tipki.

Kako ova metoda funkcionira

Ova metoda kombinira sve u jedan oblik. Ako ste upoznati s oblicima, brzo ćete shvatiti nedostatke ove metode. Neki će se slojevi oduzimati od drugih, kao što je tekst. Sve iza gumba pojavljuje se gdje je tekst. Također, samo se jedna boja može primijeniti na cijeli oblik.

Koristite ovu tehniku ​​ako:

  • Za sve gumbe potrebna je samo jedna boja
  • Boja teksta punog gumba i boja površine roditelja su iste

Nemojte koristiti ovu tehniku ​​ako:

  • Čvrsti gumb treba kapljicu; ako se ovdje primijeni, pojavit će se iza teksta.
  • Za gumbe ili obris gumba potrebne su različite boje

Potrebna vam je mogućnost da na gumbu imate gumbe različitih boja, boja teksta ili sjena? Pogledajte post na naprednijoj metodi:

Dovoljno već, pokaži mi kako!

Ovaj vodič pretpostavlja da imate iskustva sa stvaranjem kombiniranih oblika u Sketch-u, ali nadamo se da će biti napisan tako da ga svatko može pratiti.

Stvarat ćemo gumbe usmjerene po desnoj strani. Gumbi s poravnanjem ulijevo mogu se stvoriti obrnuto.

Savjet: Da bi tipka odgovorila na poništavanje duljine teksta, koristit ćemo se metodom opisanom u: Izradite simbol adaptivnog skica za označeno tekstualno polje dizajna materijala.

Stvorite simbol

Bilo koja veličina umjetničke ploče može se koristiti, izradit ćemo umjetničku ploču dovoljno veliku da drži solidan gumb OK i gumb za otkazivanje samo za tekst.

  • Naziv simbola: Red gumba - Potpuno i Tekst / Poravnanje udesno
  • Širina: 140
  • Visina: 36

Dodajte površinski sloj

Kako ne znamo maksimalnu duljinu gumba, površinskom ćemo sloju dati smiješnu duljinu. Otkrivat će se kako se dužina poništavanja teksta povećava. Ovo je ujedno i desna strana gumba, pa će desni uglovi biti zaobljeni.

Dodajte novi oblik pravokutnika:

  • Naziv sloja: Površina
  • Širina: 500
  • Visina: 36
  • X: -360
  • Polumjer: 0; 4; 4; 0 (za zaobljene kutove s desne strane)
  • Boja: 6200EE (ili bilo koja boja)
Savjet: Ako stvorite stil sloja, moći ćete promijeniti boju gumba kada je ugniježđena u simbolu.

Dodajte tekst za puni gumb

Da biste gumb pravilno uskladili, pričvrstit ćemo ga s desne strane ploče s umetkom. Poništavanje teksta pritiskat će sve lijevo, kako raste.

Dodajte sloj teksta iznad površinskog sloja:

  • Naziv sloja: Tekst pune tipke (to će biti ime nadjačavanja)
  • Prikvači na ivicu: udesno
  • Fiksna veličina: visina
  • Krstionica: Roboto
  • Veličina: 14
  • Težina: redovita
  • Redak: 36
  • Usklađivanje: točno
  • Transformiranje teksta: Velika slova (neobavezno)
  • Tekst: OK
Savjet: Tajna ove metode je visina crte. Preglasavanje teksta gura samo susjedne slojeve koji su iste visine ili manji od teksta i ne preklapaju se. Visina retka koristi se za povećanje visine teksta. Pogledajte ovaj post za više informacija o prilagodljivom tekstu.

Kombinirajte slojeve površine i teksta u oblik

Stvorite kombinirani oblik:

  • Odaberite oba sloja i kliknite Oduzimanje na alatnoj traci ili u izborniku: Sloj> Kombiniraj> Oduzimanje.
  • Preimenujte sloj u površinsku masku
  • Preimenujte sloj u Boja gumba. Ovo će biti oznaka izbornika za nadjačavanje za promjenu boje gumba.

Dodajte površinski sloj maske

Trebamo 'maskirati' površinski sloj tako da se pojavljuje samo dok sloj teksta raste u duljini. Sloj maske mora biti duljina površinskog sloja, umanjena za širinu tekstualnog sloja (19 px) i razmak od teksta do kraja ploče s umjetnicima (16 px).

Sloj maske trebate staviti prije sloja teksta i ne preklapati ga. U suprotnom, sloj maske neće se pomaknuti kad unesete tekst za poništavanje.

Iznad teksta čvrstog gumba u kombiniranom obliku dodajte sloj pravokutnika.

  • Naziv sloja: Površinska maska
  • Širina: 465
  • Visina: 36
  • X: -360
  • Metoda kombiniranja: oduzimanje

Testirajte svoj napredak

Dodajte simbol na stranicu i dodajte tekst u Poništavanju teksta gumba Solid. Tekst za poništavanje trebao bi pomicati sloj površinske maske, otkrivajući više boje površinske maske.

Trebao bi izgledati kao da se gumb prilagođava duljini teksta.

Ispunite puni gumb

Trebamo 'izrezati' dio maske za površinu. Koristit će se pravokutnik fiksnog oblika s dva zaobljena ugla. Kao i Surface Maska, kretat će se s tekstom poništavanja.

Iznad površinske maske dodajte novi sloj pravokutnika:

  • Naziv sloja: Lijevi izrez
  • X: 89 (Napomena: ne smije se preklapati površinski sloj.
  • Širina: 16
  • Visina: 36
  • Polumjer: 4; 0; 0; 4
  • Fiksna veličina: vodoravna

Testirajte svoj napredak

Kao i prije, testirajte svoj napredak dodavanjem simbola na stranicu i unosom teksta u izbornik za poništavanje. Levi isječak sloj trebao bi se pomicati nakon unosa teksta preglasavanja. Također ne bi trebao mijenjati oblik jer se simbolu mijenja veličina.

Dodajte gumb samo za tekst

Uopće, gotovo! Popunite grupu gumba dodavanjem gumba samo za tekst.

Dodajte sloj teksta:

  • Naziv sloja: Gumb za tekst (ovo će biti ime nadjačanja)
  • Fiksna veličina: visina
  • Krstionica: Roboto
  • Veličina: 14
  • Težina: redovita
  • Redak: 36
  • Usklađivanje: točno
  • Transformiranje teksta: Velika slova (neobavezno)
  • Tekst: Odustani

Gotovo!

Sada biste trebali imati simbol s čvrstim i samo tekstualnim gumbima koji se mogu koristiti samostalno ili ugniježditi u drugim sustavima i još uvijek odgovarati na tekst za poništavanje.

Ako ste ranije koristili slojeve slojeva, možete promijeniti boju gumba preko preklapanja boje gumba, čak i ako su ugniježđeni unutar drugih simbola.

Što možete učiniti s ovom metodom?

Kao što je spomenuto ranije, ova se metoda može koristiti za stvaranje toliko mnogo varijacija i kombinacija teksta koji se može prilagoditi. Javite mi što stvarate pomoću ove tehnike!

Ova se metoda također može koristiti za stvaranje bilo koje kombinacije stilova tipki.
Preuzmite datoteku skice

Možda će vam se svidjeti i moji povezani članci: