Vsebina
Kot oblikovalci in razvijalci vemo, da je odlična tipografija več kot le izbira prijetne pisave. Katere pa so praktične tehnike, s katerimi lahko naše besedilo dvignemo na višjo raven? In kako te tehnike izvajamo v orodju za oblikovanje, kot je Sketch, ali jih izvajamo na spletnem mestu?
V tem članku bom predstavil tri tehnike za povečanje vaše igre tipografije: besedilo na poti, skrite funkcije pisave OpenType in posebni znaki. Te tehnike so vznemirljive, ker jih le malo ljudi ve, kako jih uporabljati v programu Skica, in lahko pomagajo, da je vaše delo videti bolj profesionalno. Ta članek sem pospremil s posebno spletno stranjo z viri in galerijo čudovitih primerov, od koder črpate navdih in kodo. Potrebujete odlično tipografijo? Oglejte si naš seznam najboljših brezplačnih pisav.
Besedilo na poti
„Besedilo na poti“ je, ko niz besedila ne stoji več na ravni črti, temveč se ovije okoli črte ali oblike po meri. To je najučinkovitejše, kadar je pot popoln krog ali zelo subtilen lok. Bolj ko je pot zapletena ali ukrivljena, bolj verjetno je, da bo vaše besedilo videti otročje - s to funkcijo je lahko pretiravati!
V programu Sketch je besedilo na poti stara in rahlo izbirčna lastnost, ki jo lahko zmedete sami. Ključno je razumeti, kako delujejo vektorske poti pod pokrovom, kar velja tako za črte kot za zaprte oblike. Vsaka vektorska pot ima začetno in končno točko ter smer za računalnik
da se premaknete med risanjem te poti.
Ko uporabljate orodje Sketch's Vector (aka orodje Pen), si je enostavno zapomniti, kje ste začeli risati in v katero smer ste narisali svojo pot po meri. Toda za oblike, kot je krog - ki se zdijo neprekinjene poti - ni očitnega načina, kako poznati začetno točko ali smer poti.
V način urejanja vstopite tako, da izberete plast poti in nato pritisnete tipko za vrnitev. Skica samodejno izbere vektorsko točko na poti in to je vaša začetna točka. Če pritisnete tipko zavihek, bo Sketch izbral naslednjo vektorsko točko in se pomaknil (in tako razkril) smer poti.
To je pomembno za besedilo na poti, ker je smer poti smer, v katero se premika vaše besedilo. Če se pot ne premika levo-desno, bo besedilo prikazano na glavo. Če želite obrniti smer poti, v menijski vrstici pojdite na »Sloj> Poti> Povratni vrstni red«.
Zdaj je vaša pot pripravljena, čas je, da jo povežete s svojo besedilno plastjo. Besedilna plast mora biti neposredno nad plastjo poti na seznamu Sloji in predlagam, da obe plasti združite v skupine, da zagotovite, da se to ne spremeni. Izberite besedilno plast in nato pojdite na »Type> Text on Path«. Nato povlecite, da preusmerite besedilno plast okoli platna, dokler besedilo ne sedi natanko tam, kjer želite po poti.
Najboljši nasveti
To lahko traja nekaj časa, saj se zdi, da je položaj besedilne plasti malo odvisen od tega, kje se pojavi na poti. Poleg tega se lahko mehanizem upodabljanja programa Sketch pri delu z besedilom na poti spotakne in prikaže, da besedilo obreže na nenavadnih mestih. Hitro povečanje in pomanjšanje običajno odpravi to napako upodabljanja.
Še zadnji nasvet za delo z besedilom na poti: ugotovil sem, da se funkcija najbolje obnese, ko je pot odprta kot črta, namesto da bi bila zaprta in neprekinjena kot krog. Orodje Sketch’s Scissors vam bo tam pomagalo in o tem, kako ga uporabiti, sem napisal cel članek.
Na svojem spletnem mestu lahko besedilo na poti implementirate z uporabo elementa SVG. Sketch trenutno ne podpira te funkcije v izvoženih SVG-jih, vendar ne bi bilo lažje dodati elementa sami. Na strani z viri boste našli predlogo CodePen, ki bo to olajšala.
Fancy funkcije pisave
Ko izberete pisavo in začnete tipkati, vidite le del tega, kar je pisava sposobna. Majhne kape, diskrecijske ligature in nadomestni znaki - pogosto znani tudi kot funkcije OpenType - so le nekatere od skritih zmožnosti.
Večina ljudi ne ve, da so funkcije OpenType na voljo v programu Sketch in celo drugih aplikacijah v macOS, kot je iWork. S programom Sketch vnesite način urejanja na besedilni plasti in izberite »Select All«. Nato odprite privzeto podokno Pisave macOS, tako da greste navzgor v »Pogled> Pokaži pisave«. Orodna vrstica na plošči Pisave vsebuje meni ikone zobnika blizu leve strani s skrivnostno imenovano možnostjo »Tipografija ...«. Tam se zgodi čarovnija!
Podokno Tipografija razkriva, katere čudovite funkcije pisave so na voljo za izbrano besedilo. Na vrhu na primer pogosto najdete potrditveno polje »Redke vezi«, ki omogoča več okrasnih kombinacij črk, kot sta »Qu« ali »ity«.
V pisavo lahko vključite številne vznemirljive tipografske funkcije, a tukaj je še ena izmed mojih najljubših: majhne kapice. Majhne kapice so niz miniaturnih velikih črk, ki so običajno enake višini kot mala črka 'x'. S pomočjo plošče Tipografija lahko vse male črke pretvorite v majhne velike črke, ki so odlične za kratke napise ali prvo vrstico članka.
Stvari, ki si jih je treba zapomniti
Čeprav so te funkcije pisave dostopne v programu Sketch, so lahko nekoliko izbirčne. Tukaj morate biti pozorni: Prvič, ko vklopite in izklopite funkcije na plošči Tipografija, boste morda morali počakati trenutek ali premakniti miškin kazalec nad izbrano besedilo, preden bodo spremembe izvedene.
Drugič, če spremenite velikost ali težo pisave s programom Sketch’s Inspector, bodo vse modne tipografske funkcije ponastavljene na privzete; Predlagam, da ta dva atributa namesto tega prilagodite na plošči Pisave. Spreminjanje drugih atributov, povezanih s pisavo (kot so barva, razmik med znaki ali višina vrstic) v programu Sketch’s Inspector, ne bo vplivalo na vaše tipografske funkcije.
Implementacija teh modnih funkcij pisave na vašem spletnem mestu je tako enostavna kot dodajanje nekaj lastnosti CSS, ki jih zdaj podpirajo vsi večji brskalniki.
Posebni znaki
Številne pisave poleg modnih funkcij, kot so ligature in majhne kapice, vsebujejo posebne znake, kot so dingbati, cvetovi in simboli. Na uvodni sliki tega članka so steklenica, ikona sonca in kretnja roke del različnih pisav.
Ko delate na svojem načrtu, obstajata dva načina za dostop do posebnih znakov, ki so bili vključeni v pisavo. Prva je uporaba vgrajene Applove aplikacije Font Book, ki omogoča ogled ‘Repertoarja’ posamezne pisave (mrežo črk in glifov) s klikom na ikono mreže v orodni vrstici. Ko se pomikate mimo najpogostejših znakov (A-Z), boste videli razširjeni nabor ligatur, majhne kapice, diakritike (naglasne oznake) in posebne simbole, ki jih je oblikovalec besed z ljubeznijo ustvaril za piflarje, kot smo mi.
Ko miškin kazalec premaknete nad znak, boste videli majhen opis z imenom in vrednostjo Unicode. Najboljše od vsega je, da lahko ta lik povlečete iz Knjige pisav v katero koli drugo aplikacijo (na primer Sketch), kjer urejate besedilo. Prepričajte se, da je v programu Skica vaša besedilna plast v načinu Urejanje - označeno z utripajočo besedilno kazalko - preden povlečete in spustite.
Podokno Znaki
Knjiga pisav ni edini način, kako lahko dostopate do teh posebnih znakov; večino jih je mogoče vstaviti skozi ploščo Znaki. Do te plošče lahko dostopate v programu Skica in v celotnem macOS-u na dnu menija Urejanje v menijski vrstici (zdaj se imenuje »Emodžiji in simboli«). Če je plošča Znaki videti majhna, kliknite ikono v zgornjem desnem kotu, ki je videti kot okno s simbolom '⌘' v notranjosti - ta preklopi med kompaktno in razširjeno ploščo.
Razširjena plošča Znaki je zmogljiva in vam omogoča dostop do neštetih simbolov, ločil in piktografov. Preprosto dvokliknite enega od teh znakov, da ga vstavite poleg besedila. Moj osebni favorit je numero ('Ne'), ki je veliko bolj eleganten kot '#' in bolj kompakten kot pisanje 'Number:'.
Kliknite ikono zobnika na vrhu plošče Znaki, da prilagodite seznam kategorij v stranski vrstici. Na seznam lahko dodate celo Unicode, ki vam omogoča brskanje po vsakem izmed tisočih znakov, združljivih z Unicode. Z drugimi besedami, to vam omogoča dostop do skoraj vseh likov, ki ste si jih kdaj zamislili! Prav tako se mi zdi koristno povleči posebne znake, ki jih pogosto uporabljam, na seznam Priljubljeni, kar odpravi potrebo po iskanju tega znaka vsakič, ko ga želite uporabiti.
Ko gre za implementacijo vašega dizajna v splet, je vstavljanje posebnih znakov enostavno. Kateri koli znak Unicode je mogoče uporabiti na spletnem mestu tako, da se sklicuje na ustrezno vrednost HTML znaka ali pa uporabi vsebino, ustvarjeno s CSS, s šestnajstiško vrednostjo znaka Unicode. Na strani z viri sem povezal odlično spletno mesto za hitro iskanje teh vrednosti za kateri koli znak in drugo spletno mesto, ki razlaga, kako jih uporabiti v CSS.
Zaključek
Kot lahko ugotovite, ta članek zgolj posname površino vsake teme. Zato sem toliko omenjal stran z viri! Vključuje galerijo čudovitih primerov, izbrane brezplačne pisave, opremljene s funkcijami OpenType, ki jih lahko preizkusite, lastne datoteke projekta Sketch, ki jih lahko ločim, in številna druga koristna spletna mesta in predloge. Veselo pri postavitvi sporočil!
Ta članek je bil prvotno objavljen v net magazine številka 284. Kupite ga tukaj.
