Saturs
Kā dizaineri un izstrādātāji mēs zinām, ka lieliska tipogrāfija ir vairāk nekā tikai patīkama fonta izvēle. Bet kādas ir praktiskās metodes, kuras mēs varam izmantot, lai mūsu tekstu pārceltu uz nākamo līmeni? Un kā mēs varam izpildīt šīs metodes dizaina rīkā, piemēram, Sketch, vai ieviest tos vietnē?
Šajā rakstā es aplūkošu trīs paņēmienus, kā uzlabot jūsu tipogrāfijas spēli: teksts uz ceļa, slēptās OpenType fontu funkcijas un īpašās rakstzīmes. Šie paņēmieni ir aizraujoši, jo maz cilvēku zina, kā tos izmantot skicē, un tie var palīdzēt padarīt jūsu darbu profesionālāku. Esmu pievienojis šo rakstu ar īpašu resursu tīmekļa lapu un skaistu piemēru galeriju, no kuras varat smelties iedvesmu un kodu. Nepieciešama lieliska tipogrāfija? Skatiet mūsu labāko bezmaksas fontu apkopojumu.
Teksts uz ceļa
‘Teksts uz ceļa’ ir tad, kad teksta virkne vairs neatrodas uz plakanas līnijas, bet tā vietā ietinās pielāgotu līniju vai formu. Tas ir visefektīvāk, ja ceļš ir ideāls aplis vai ļoti smalks loks. Jo sarežģītāks vai izliektāks ir jūsu ceļš, jo lielāka iespēja, ka jūsu teksts izskatīsies bērnišķīgs - šo funkciju ir viegli pārspīlēt!
Programmā Sketch teksts uz ceļa ir veca un nedaudz izsmalcināta funkcija, kuru var izjaukt patstāvīgi. Galvenais ir saprast, kā vektora ceļi darbojas zem pārsega, kas attiecas gan uz līnijām, gan uz slēgtajām formām. Katram vektora ceļam ir sākuma punkts un beigu punkts, kā arī virziens datoram
pārvietoties, zīmējot šo ceļu.
Kad izmantojat rīku Sketch’s Vector (pazīstams arī kā Pildspalvas rīks), ir viegli atcerēties, kur sākāt zīmēšanu un kurā virzienā esat novilcinājis pielāgoto ceļu. Bet tādām formām kā aplis, kuras, šķiet, ir nepārtraukts ceļš, nav acīmredzama veida, kā uzzināt sākuma punktu vai ceļa virzienu.
Ievadiet rediģēšanas režīmu, atlasot ceļa slāni un pēc tam nospiežot atgriešanās taustiņu. Skice automātiski izvēlas vektora punktu pa ceļu, un tas ir jūsu sākuma punkts. Nospiežot tabulēšanas taustiņu, Sketch atlasīs nākamo vektora punktu, pārvietojoties pa ceļa virzienu (un tādējādi atklājot).
Ceļa tekstam tas ir svarīgi, jo ceļa virziens ir virziens, kurā teksts virzās. Ja ceļš nepārvietojas no kreisās uz labo pusi, teksts tiks parādīts otrādi. Lai mainītu ceļa virzienu, izvēlņu joslā dodieties uz sadaļu ‘Slānis> Ceļi> Apgrieztā secība’.
Tagad jūsu ceļš ir gatavs, ir pienācis laiks to savienot ar teksta slāni. Teksta slānim jābūt tieši virs ceļa slāņa Slāņi, un es iesaku grupēt abus slāņus, lai nodrošinātu, ka tas nemainās. Atlasiet teksta slāni un pēc tam pārejiet uz “Tips> Teksts uz ceļa”. Pēc tam velciet, lai mainītu teksta slāni ap audeklu, līdz teksts atrodas tieši tajā vietā, kur vēlaties.
Galvenie padomi
Tas var aizņemt nedaudz laika, jo šķiet, ka teksta slāņa pozīcija ir maz saistīta ar vietu, kur tā parādās pa ceļu. Turklāt Sketch renderēšanas dzinējs var paklupt, strādājot ar tekstu ceļā, šķiet, ka tas tiek apgriezts dīvainās vietās. Ātra tuvināšana un tālināšana atkal novērsīs šo renderēšanas kļūdu.
Pēdējais padoms darbam ar Tekstu uz ceļa: Es atklāju, ka šī funkcija vislabāk darbojas, ja ceļš ir atvērts kā līnija, nevis ir slēgts un nepārtraukts kā aplis. Sketch's Scissors rīks jums tur palīdzēs, un es esmu uzrakstījis veselu rakstu par to, kā to izmantot.
Savā vietnē varat ievietot tekstu ceļā, izmantojot SVG elementu. Sketch šobrīd neatbalsta šo funkciju eksportētajos SVG, taču pats elementa pievienošana nevar būt vienkāršāka. Resursu lapā atradīsit CodePen veidni, kas to atvieglos.
Iedomātā fonta funkcijas
Kad izvēlaties fontu un sākat rakstīt, redzat tikai daļu no tā, uz ko fonts spēj. Mazie vāciņi, diskrecionārās ligatūras un aizstājējzīmes - kas bieži tiek dēvētas par OpenType funkcijām - ir tikai dažas no slēptajām iespējām.
Lielākā daļa cilvēku nezina, ka OpenType funkcijas ir pieejamas Sketch un pat citās MacOS lietotnēs, piemēram, iWork. Izmantojot skici, teksta slānī ievadiet rediģēšanas režīmu un atlasiet visu. Pēc tam atveriet noklusējuma macOS fontu paneli, dodoties uz augšu ‘Skatīt> Rādīt fontus’. Fontu paneļa rīkjoslā atrodas zobrata ikonas izvēlne netālu no kreisās puses, un tajā ir noslēpumaini nosaukta opcija “Tipogrāfija ...”. Tur notiek burvība!
Tipogrāfijas panelis parāda, kuras izdomāto fontu funkcijas ir pieejamas jūsu atlasītajam tekstam. Piemēram, augšpusē jūs bieži atradīsit izvēles rūtiņu “Reti Ligatūras”, kas iespējo dekoratīvākas burtu kombinācijas, piemēram, “Qu” vai “ity”.
Ir daudz aizraujošu tipogrāfisku funkciju, kuras var iekļaut fonā, taču šeit ir vēl viens no maniem izlases veidiem: mazie vāciņi. Mazie vāciņi ir miniatūru lielo burtu kopums, kas parasti ir vienādā augstumā ar mazo burtu “x”. Izmantojot paneli Typography, visus mazos burtus var pārveidot par maziem burtiem, kas lieliski izskatās īsiem parakstiem vai raksta pirmajai rindai.
Lietas, kas jāatceras
Lai gan šīm fontu funkcijām var piekļūt no skices, tās var būt nedaudz izsmalcinātas. Lūk, kas jums jāzina: Pirmkārt, kad tipogrāfijas panelī ieslēdzat un izslēdzat funkcijas, pirms izmaiņu veikšanas, iespējams, būs jāgaida brīdis vai virziet kursoru virs atlasītā teksta.
Otrkārt, ja maināt fonta lielumu vai svaru, izmantojot Sketch’s Inspector, visas izdomātās tipogrāfiskās funkcijas tiks atiestatītas uz noklusējuma iestatījumiem; Es iesaku tā vietā pielāgot šos divus atribūtus Fontu panelī. Citu ar fontu saistītu atribūtu (piemēram, krāsu, rakstzīmju atstarpes vai līnijas augstuma) maiņa Sketch's Inspector neietekmēs jūsu tipogrāfiskās funkcijas.
Šo iedomāto fontu funkciju ieviešana jūsu vietnē ir tikpat vienkārša kā dažu CSS rekvizītu pievienošana, ko tagad atbalsta visas galvenās pārlūkprogrammas.
Īpašās rakstzīmes
Papildus izdomātām funkcijām, piemēram, ligatūrām un maziem vāciņiem, daudzos fontos ir īpašas rakstzīmes, piemēram, dingbats, uzplaukumi un simboli. Šī raksta sākuma attēlā pudele, saules ikona un rokas žests ir daļa no dažādiem fontiem.
Strādājot ar savu dizainu, ir divi veidi, kā piekļūt īpašajām rakstzīmēm, kas iekļautas fonā. Pirmais ir izmantot Apple iebūvēto Fontu grāmatu lietotni, kas ļauj jums apskatīt katra fonta ‘Repertuāru’ (burtu un burtu režģi), rīkjoslā noklikšķinot uz režģa ikonas. Ritinot garām visizplatītākajām rakstzīmēm (A – Z), jūs sāksit redzēt paplašināto ligatūru, mazo vāciņu, diakritisko zīmju (akcentu zīmju) un īpašo simbolu kopu, ko tipa dizainers ar mīlestību ir izveidojis tādiem nerdiem kā mēs.
Pārvietojot kursoru virs rakstzīmes, redzēsiet nelielu padomu ar rakstzīmes nosaukumu un Unicode vērtību. Vislabākais ir tas, ka šo rakstzīmi varat izvilkt no Fontu grāmatas un uz jebkuru citu lietotni (piemēram, Skice), kur rediģējat tekstu. Pirms velciet un nometiet, pārliecinieties, vai skicē jūsu teksta slānis ir rediģēšanas režīmā - kas apzīmēts ar mirgojošu teksta kursoru.
Raksts Rakstzīmes
Fontu grāmata nav vienīgais veids, kā piekļūt šīm īpašajām rakstzīmēm; lielāko daļu no tām var ievietot, izmantojot paneli Rakstzīmes. Šim panelim var piekļūt Sketch un visā MacOS, izvēlnes joslas izvēlnes Rediģēt apakšdaļā (tagad to sauc par “Emocijas un simboli”). Ja rakstzīmju panelis izskatās mazs, augšējā labajā stūrī noklikšķiniet uz mazās ikonas, kas izskatās kā logs ar simbolu ’⌘’ - tas pārslēdzas starp kompaktu un izvērstu paneli.
Paplašinātais rakstzīmju panelis ir spēcīgs, ļaujot piekļūt neskaitāmiem simboliem, pieturzīmēm un piktogrammām. Vienkārši veiciet dubultklikšķi uz vienas no šīm rakstzīmēm, lai to ievietotu blakus tekstam. Mans personīgais favorīts ir skaitlis (‘Nē’), kas ir daudz elegantāks nekā “#” un kompaktāks par “Number:” rakstīšanu.
Lai pielāgotu kategoriju sarakstu sānjoslā, noklikšķiniet uz zobrata ikonas paneļa Rakstzīmes augšdaļā. Jūs pat varat pievienot Unicode sarakstam, kas ļauj pārlūkot katru no tūkstošiem ar Unicode saderīgo rakstzīmju. Citiem vārdiem sakot, tas ļauj jums piekļūt gandrīz visiem varoņiem, kurus jūs kādreiz varētu iedomāties! Es arī uzskatu, ka ir lietderīgi ievilkt īpašās rakstzīmes, kuras bieži izmantoju, izlases sarakstā, kas novērš nepieciešamību meklēt šo rakstzīmi katru reizi, kad vēlaties to izmantot.
Kad runa ir par dizaina ieviešanu tīmeklī, īpašu rakstzīmju ievietošana ir vienkārša. Jebkuru Unicode rakstzīmi var izmantot vietnē, vai nu atsaucoties uz rakstzīmes atbilstošo HTML vērtību, vai izmantojot CSS ģenerēto saturu ar rakstzīmes Unicode hex vērtību. Resursu lapā esmu izveidojis saiti ar lielisku vietni, kur ātri atrast šīs vērtības jebkuram rakstzīmei, un citu vietni, kurā paskaidrots, kā tās ieviest CSS.
Secinājums
Kā jūs varat pateikt, šis raksts tikai noslīpē katras tēmas virsmu. Tāpēc es tik daudz pieminēju resursu lapu! Tajā ietilpst skaistu piemēru galerija, atlasīti bezmaksas fonti, kas aprīkoti ar OpenType funkcijām, lai izmēģinātu, manis paša izstrādātie Sketch projekta faili, kā arī daudzas citas noderīgas vietnes un veidnes. Laimīgu drukāšanu!
Šis raksts sākotnēji tika publicēts net žurnāls 284. izdevums. Pērciet to šeit.
