Share
Hva du skal skapeJeg skal vise deg hvordan du lager en fargeskrift. Å skape fonter har aldri vært så fort, morsomt og enkelt som med Fontself, en kraftig forlengelse for Adobe Illustrator og Photoshop CC. I denne opplæringen lærer du hvordan du lager en fargeskrift.
Fontself lar deg lage en fullt funksjonell skrifttype med alle klokkene og fløyter som de fleste profesjonelle skrifttyper har (kerning, ligaturer etc.), og det mest spennende med det er at det hjelper deg å lage en fargeskrift! Du kan få fantasien til å bli vill og legge til alle former og farger du vil ha (inkludert gradienter og andre effekter) til tegnene dine.
Bortsett fra å lage fargeskrifter, som kan brukes i Adobe Photoshop CC 2017/2018 og Adobe Illustrator CC 2018, kan du bruke Fontself til å lage standard "ikke-farge" vektorfontter som kan brukes i annen programvare som eldre versjoner av Adobe CC apps, CS6, Microsoft Word, og mange andre.
Kan ikke vente med å prøve den ut?
Tusenvis av reklamer fra Adobe, Google, Apple, Microsoft og andre kjente selskaper bruker allerede Fontself. Det som også er kult om det er at det er 100% indie-programvare som ble opprettet av tre lidenskapelige utviklere med det formål å bringe oss til et brukervennlig skriftskapningsverktøy. Og de gjorde det!
La oss gå gjennom hele prosessen med å lage og bruke vår egen fargeskrift i Adobe Illustrator CC 2018 og Fontself Maker!
Når jeg lager en skrift fra begynnelsen, begynner jeg vanligvis ved å skildre en generell ide. Denne gangen bestemte jeg meg for å lage en skrifttype i en fargerik line art stil.
Jeg begynte med en grov skisse av hvert brev, og prøvde å gjøre hver av dem unik, men likevel bevare den generelle stilen. Jeg skal bruke denne skissen som en veiledning for skissene som vi skal lage i Adobe Illustrator.
Vær oppmerksom på at Fontself Maker fungerer sammen med Adobe Illustrator CC 2015.3 og nyere, men å bruke fargeskrifter du trenger CC 2018, så ikke glem å oppdatere hvis du ikke har gjort det ennå!
Begynn med å opprette en Nytt dokument av ønsket størrelse i RGB-fargemodus. Hvis du velger andre Fargemodus, alle farger vil bli slått til RGB selv om de er definert i CMYK eller om dokumentet i CMYK-fargeplass. Du kan lære mer om fargeplass i Fontself fra deres hjelpeside.
La oss starte med bokstaven A. Ta Polygonverktøy (du finner den i samme rullegardinmeny som Rektangelverktøy (M)) og enkeltklikk hvor som helst på Artboard. Angi antall Sider til 3 og lag en trekant.
Sett sin Fylle farge til Ingen og dets Stroke farge til mørk lilla i Farge panel. Nå, i Stroke panelet (Vindu> Stroke), sett Vekt til 2,5 pt og Lokk til Round Cap.
Nå kan vi slette den nederste delen av formen som vi ikke trenger. Ta Direkte utvalgsverktøy (A) og klikk på den nederste kanten av trekanten. Slå den Slett nøkkel (eller Backspace hvis du er på en Mac) for å slette den.
Velg formen med Utvalgsverktøy (V) og treffer Tast inn å åpne Bevege seg vindu. Sett Horisontal verdi til 25 px og vertikal til 0 px, og klikk Kopiere å duplisere formen og flytte den til høyre.
Holde begge formene valgt, ta Form Builder Tool (Shift-M), holde nede alt, og klikk på stykket til høyre for å slette det.
Kopiere Den første formen og endre størrelsen på den for å lage en liten trekant. Plasser den på bunnen, skape fjæren på en pil. Velg formen, hold nede alt, og dra den opp for å lage en kopi. Legg til to eksemplarer og fest dem langs den venstre kanten av trekanten.
Gruppe (Control-G) de skapte elementene i fjæren og Dobbeltklikk de Reflekteringsverktøy (O). Velg Vertikal akse og klikk Kopiere å vende formen til motsatt side.
Ta Ellipseverktøyet (L), holde nede Skifte, og lag en 10 x 10 px sirkel med mørkblå Stroke og turkis Fylle farge.
Tips: Bruke Eyedropper Tool (I) for å velge fylle eller strekkfarge eller innstillinger for utseende og bruke dem til andre objekter. Du kan få tilgang til alternativene til Eyedropper Tool (I) av dobbeltklikke det i Verktøy panelet, og deretter kan du krysse innstillingene du vil velge og bruke.
Kopiere Slaget ved å velge det og dra til siden mens du holder alt. Bruke Pennverktøyet (P) å legge til et ankerpunkt midt på linjen. Bruk deretter Slett ankerpunktsverktøy (-) for å slette punktet på toppen av streken.
Ta Pennverktøyet (P) eller Linjesegmentverktøy (\) og hold Skifte å lage en horisontal linje over brevet. Dette kommer til å være baren til bokstaven A.
Kopier (Control-C> Control-F) Slaget og dra det ned. Gjør det kortere ved å flytte punktene med Direkte utvalgsverktøy (A).
Bruk nå Pennverktøyet (P) å lage en sikksag linje i den øvre delen av brevet, som vist på bildet nedenfor.
Legg til noen flere slag på begge sider av brevet, slik at det ser nærmere ut.
Nå som konturene til bokstaven A er klare, la oss legge til litt farge! Vi kan duplikat (Control-C> Control-B) brevet og Gjemme seg kopien i lag panel ved å klikke på det lille øyeikonet, bare hvis vi trenger å bruke disse skissene senere.
Velg den synlige kopien og gå til Objekt> Live Paint> Make.
Nå ta tak i Live Paint Bucket (K) og svinger over området du vil fylle med farge. Når du ser en rød oversikt, klikker du på området for å fylle det.
Fortsett å bruke Live Paint Bucket (K) og velge nye farger i Farge panel for å fylle trianglene i den øverste delen av brevet.
La oss nå gå til Objekt> Levende maling> Utvid for å slå hver fargede seksjon i en separat gjenstand.
Bruke Direkte utvalgsverktøy (A) å trekke et par elementer ut, noe som gjør sammensetningen mer dynamisk.
Og der har vi det! Vårt første brev er ferdig! La oss flytte til neste og se hva annet vi kan bruke for å få det til å se unikt ut.
Jeg bruker ikke noen snapping eller spesielle grids for denne skriften, fordi jeg vil beholde litt av en håndlagd touch uten å gjøre det geometrisk perfekt eller piksel perfekt. Men for å gjøre skrifttypen konsistent, må vi beholde alle bokstavene i samme høyde (mens bredden vil være annerledes).
Skru på Linjaler (Control-R) og dra et par horisontale guider på Artboard for å markere høyden på bokstaven A. Vi kan få tilgang til Guides meny fra Se> Guider.
La oss begynne med staven av brevet B. Bruk Rektangelverktøy (M) å lage et smalt rektangel av ca. 30 x 120 px (Husk å holde høyden lik høyden på ditt første bokstav).
Velg den nederste kanten med Direkte utvalgsverktøy (A) og slett den.
Legg til noen horisontale linjer og legg til et par 10 x 10 px turkise sirkler til bunnen av formen. Vi kan kopiere disse kretsene fra vårt brev A.
La oss nå lage en rett horisontal linje ved hjelp av Pennverktøyet (P) og gå til Effekt> Forvreng og transformer> Zig Zag. Sett Størrelse til 10 px, Ridges per segment til 5, og Poeng til Hjørne.
Klikk OK og gå til Objekt> Utvid Utseende å bruke effekten.
Plasser den opprettede zigzagen inne i toppen av brevet og endre størrelsen på den slik at den passer til rektangelet.
La oss lage et rektangel på ca. 45 x 55 px størrelse og juster den til de øverste og venstre kantene av brevet. For å gjøre dette, velg stengelen og det opprettede rektangelet og klikk på stangen igjen for å gjøre det a Nøkkelobjekt (du vil se et tykkere utvalg rundt det).
Åpne Rette inn panelet (Vindu> Juster) og klikk Horisontal Juster Venstre og Vertikal Juster Topp.
La oss velge de øverste og nederste høyre hjørner av rektangelet med Direkte utvalgsverktøy (A) og få dem avrundet ved å trekke sirkelmarkøren til Levende hjørner nærmere senteret. Vi kan også justere Corners radius manuelt fra kontrollpanelet på toppen.
Tips: Hvis du ikke finner topp kontrollpanelet etter oppdatering til Adobe Illustrator CC 2018, ikke bekymre deg! Det er fortsatt der, og du kan slå den på Vindu> Arbeidsrom> Essentials Classic.
La oss slette den venstre kanten av formen. Velg nederste venstre hjørne med Direkte utvalgsverktøy (A) og trykk Slett (Backspace på Mac).
Gjenta det samme for det øverste venstre punktet, og la bare den buede formen.
Lag en større bue for bunnen av brevet B.
Legg til en mindre buk inne i bunken. Gjør brevet mer intrikat ved å legge til horisontale og vertikale streker. Avslutt konturene ved å plassere to sirkler inne i bunnskålen.
la oss duplikat (Control-C> Control-B) brevet og hold kopien usynlig dersom vi trenger det senere.
Velg den synlige kopien og Objekt> Live Paint> Make. Bruke Live Paint Bucket (K) og Eyedropper Tool (I) å velge og bruke farger på elementene i bokstaven B.
La oss fullføre brevet. Gå til Objekt> Levende maling> Utvid og bruk Direkte utvalgsverktøy (A) å trekke noen av de fargede delene ut av oversikten.
Rått! Det andre bokstaven er ferdig! La oss sjekke ut noen flere teknikker som vi kan bruke til andre bokstaver og symboler.
Ta Ellipseverktøyet (L) og begynn med bunnen av brevet ved å lage en 115 x 115 px sirkel. Kopiere den opprettede sirkelen og Lim inn foran (Control-C> Control-F). Reduser størrelsen på kopien til 80 x 80 px.
Som du kanskje ser, er brevet litt lavere enn topp retningslinjen. Vi har forlatt litt plass over sirkelen for å legge til noen detaljer der.
Ta Pennverktøyet (P), holde Skifte, og lag en vertikal linje over sirkler. Holder linjen valgt, Dobbeltklikk de Rotate Tool (R) og sett Angle til 12 grader. Klikk Kopiere å legge til en rotert kopi av linjen.
Trykk nå Kontroll-D for å gjenta den siste handlingen og fortsett å trykke til du får 30 kopier for å fylle sirkelen.
la oss gruppe (Control-G) de opprinnelige strålene og gjemme seg dem for nå.
La oss nå lage en silhuett av bokstaven C. Bruk Legg til ankerpunktsverktøy (+) å legge til to punkter på høyre side av den større sirkelen og to for den minste, som markert i skjermbildet nedenfor.
Nå kan vi bruke Direkte utvalgsverktøy (A) å klikke på segmentet av bue mellom de opprettede punktene og slette den. Gjenta det samme for begge sirkler.
La oss nå avsløre de skjulte strålene og velge alle elementene i C.
Ta Form Builder Tool (Shift-M) og klikk rektanglene dannet av kryss linjer. Ikke klikk på dem alle; la noe uberørt plass i bunnen av formen.
Nå kan vi velge de unødvendige stykkene av strålene i midten av C og slette dem.
La oss knuse strålene på venstre side av bokstaven C.
Bruke Pennverktøyet (P) å legge til et nytt ankerpunkt et sted midt på linjen og slette toppunktet med Slett ankerpunktsverktøy (-). På denne måten løsner vi brikken fra kanten av brevet.
Fortsett å skifte strålene, gjøre noen av dem kortere og løsne andre for å legge til variasjon i bokstavens silhuett.
Legg til noen flere buede slag til den indre delen av brevet. Fest sirkler til spissene til de store buene.
Duplisere de opprettede skissene og bruk Levende maling og Live Paint Bucket (K) å legge til farger.
Objekt> Levende maling> Utvid formen og dra ut noen av de fargede rektanglene. Flott arbeid! Vårt tredje brev er ferdig!
Fortsett og opprett flere bokstaver, tall og tegnsetting, alt du trenger for din fremtidige skrifttype. Ikke bekymre deg hvis du ikke lager alle ønskede symboler samtidig; Du kan alltid åpne fontfilen din og legge dem til senere.
Nå for den morsomme delen! Siden vi har alt forberedt, kan vi endelig lage en font ved hjelp av Fontself Maker!
Først av alt, la oss åpne lag panel og plasser alle bokstavene i alfabetisk rekkefølge, fra venstre til høyre. Fontself vil automatisk tildele de riktige tegnene hvis du plasserer dem i riktig rekkefølge.
Vi kan omdøpe bunnretningslinjen, sette den som en basislinje.
La oss nå sørge for at alle våre brev er justert til bunnen og plassert på grunnlinjen. Velg tegnene dine og klikk Vertikal justere bunnen i Rette inn panel, bruk ett av tegnene som a Nøkkelobjekt.
Gå til Vindu> Utvidelser og løp Fontself Maker. Et kompakt vindu av forlengelsen blir lastet, og du kan justere størrelsen ved å dra nederste hjørner. Den har et enkelt og brukervennlig drag-og-slipp-grensesnitt med popup-tips og en online chat assistent som kan hjelpe deg med dine spørsmål.
La oss nå velge vårt alfabet og dra det til Fontself-vinduet. Her har vi flere alternativer å velge mellom. Hvis du allerede har alle tegnene klare, kan du bruke 'A-Z' område og slipp bokstavene dine der. Fontself plasserer dem automatisk i riktig rekkefølge, og gir hvert brev et riktig navn.
Ellers, hvis du ikke har alle tegnene ferdig ennå, plasser du musepekeren over 'Enhver karakter (Batch)' feltet og slipp musenøkkelen for å laste opp tegnene dine.
I vårt tilfelle lager vi en stor skrift, så alle bokstavene vil være de samme for både store og små bokstaver.
Hva er bra med Fontself er at det gjør ting så mye lettere: Når vi har ordnet og justert våre bokstaver, vil programmet plassere dem i riktig rekkefølge, ved hjelp av informasjonen fra lag panel. Bare vær sikker på at du drar og slipper alt sammen, inkludert grunnlinjen.
Hvis du trenger litt mer kontroll over retningslinjene, og du ønsker å legge til en stigende og nedstigende, kan du også gjøre det! Bare legg til to flere retningslinjer, omdøpe dem "Ascender" og "descender" i lag panel, og dra og slipp dem til Fontself sammen med alfabetet ditt. voila!
Du kan lære mer om å bruke guider i Fontself fra hjelpesiden.
Nå har vi hvert brev plassert i sitt eget spor. Herfra kan vi skrive noe i Live Preview vindu for å sjekke ut hvordan det ser ut og leker med Letter Space, Line Space og Scale, hvis nødvendig.
Ved å klikke på det lille tannikonet til høyre kan du endre skriftstørrelsen, justeringen og bakgrunnsfargen.
Vi kan også utvide brevet forhåndsvisningsvinduet ved å klikke på den lille diagonalpilen i øverste venstre hjørne av hvert forhåndsvisningsspor (sirklet i skjermbildet nedenfor) eller ved dobbeltklikke glyphen.
Her har vi flere alternativer for hvert brev. Vi kan dra linjene, endre posisjonen til oppstigeren og nedstigningen og justere andre innstillinger.
Når vi er fornøyd med bokstavene, la vi legge til andre symboler og tegnsetting! For å gjøre dette, velg bare elementene på Artboard og klikk på Parti knappen i Hjem vindu av Fontself. Symbolene dine vil bli lagt til og plassert i riktig rekkefølge.
La oss nå se på noen avanserte innstillinger som er avgjørende når du oppretter en skrift. Finn og klikk på Avansert knappen i Hjem vindu av Fontself.
Herfra kan vi justere Spacing, utligning, og noen andre parametere som er viktige for at skrifttypen skal være balansert og konsistent.
La oss begynne med Spacing.
I typografi, avstanden eller sporing er mengden mellomrom mellom tegnene, som påvirker tettheten og gir skriftets relative åpenhet eller tetthet. Faktisk vil en god avstand spare deg for en masse tid når du oppretter en skrifttype, så sørg for at du begynner med å justere den først!
Det finnes flere måter å jobbe med mellomrom i Fontself. Først av alt, klikk på Spacing Pad vindu og skriv noen setninger der for å se hvordan tegnene oppfører seg innenfor en tekst. Nå, i det grå området til høyre, kan du se en liste over bokstaver og deres verdier. Her kan du redigere avstanden ved å angi nøyaktige verdier i tabellen.
En annen måte å redigere avstand på er å gjøre det manuelt ved å klikke på tegnet selv og dra de strekkede linjene på venstre og høyre side av det. Du vil se alle justeringene i Spacing Pad og i Live Preview område som allerede har en prøvetekst med alle tegnene dine.
Nå som vi er fornøyd med tekstens tetthet og dets generelle utseende, er det på tide å justere parringsparene ved å klikke på utligning knapp.
utligning er prosessen med å justere avstanden mellom spesifikke tegnpar for å oppnå et visuelt tiltalende resultat. I proporsjonale all-caps-fonter forekommer det ofte at bokstaver i noen vanlige kombinasjoner (som VA eller AW) ser for langt unna hverandre. I dette tilfellet må vi finne slike par og justere avstanden mellom dem manuelt, opprette kerning par. Og Fontself har også denne funksjonen! Dessuten har det allerede noen vanlige kerningpar i Live Preview vindu, slik at du kan se resultatet umiddelbart.
Det samme som med avstand, det er flere måter å justere kerning på. Først av alt, klikk på Kerning Pad vindu og skriv inn noen paringspar som du vil redigere, for eksempel AVA. Nå, i det grå området til høyre, kan du se Kerning par vindu og skriv inn verdiene der manuelt.
En annen måte å justere kerning på er å klikke på tegnet og dra strekklinjen mellom paret. Den røde linjen vises for negative verdier, noe som gjør at rommet mellom bokstavene er mindre. Den blå linjen indikerer det økende rommet med en positiv verdi som beveger bokstavene lengre bort fra hverandre. Så enkelt som det.
Den neste viktige tingen du kanskje vil bruke i skrifttypen din, og Fontself har denne funksjonen, er bruk av ligaturer!
EN ligatur er en kombinasjon av to eller flere bokstaver i ett symbol. For eksempel kan vi i felles kombinasjoner som 'tt', 'fi' og 'ff' endre noen elementer av bokstavene, for eksempel kryssfelt, for å få dem til å se bedre sammen. Videre kan vi bruke ligaturer på mer kreative måter, mens du arbeider med fargefonter, slik at noen ord eller navn ser ut som lyst ved å legge til nye elementer for dem, for eksempel partikler, blomster eller swashes. I dette tilfellet kan hele sammensetningen brukes som et symbol, dvs. ligatur.
La oss si at vi ønsker å slå sammen to bokstaver sammen i 'TT' for å lage en enkelt linje for dem. Når du har tegnet det nye brevet, velger du det på Artboard. Åpne deretter Fontself-vinduet og skriv 'TT' i tekstområdet øverst og klikk på Lag ligatur knappen rett ved siden av den.
Når du har klikket på knappen, vil Fontself spørre deg hvilken type ligatur du vil opprette. Senere kan du finne begge deler Standard ligaturer og Diskretionære ligaturer i Open panelet (Vindu> OpenType) av Adobe Illustrator og se hvordan de fungerer.
Den siste men ikke minst funksjonen som kan gjøre skrifttypen mer unik og leken, bruker veksler-De alternative versjonene av noen (eller alle) tegn som legger variasjon til hele teksten. De kan være versjoner med andre farger, konturer eller swashes.
For eksempel, her kan du se at 'O' bokstavene er litt forskjellige i ordet 'COLORS'. Dette er hvordan vi gjør det. Når du har den alternative versjonen av brevet utarbeidet, velg det på Artboard og legg det til Fontself. Programmet vil spørre deg om du vil Erstatte det eksisterende bokstaven 'O' eller opprette en alternativ glyph. Bare klikk på Alternere knappen, og der har du det!
Nå som vi har lagt alle tegnene til Fontself, justert avstanden og kerning, og satt ligaturer og alternativer, er det på tide å nevne vår baby!
Klikk på Font Infos knappen i Hjem vinduet Fontself og fyll inn all nødvendig informasjon. Utviklerens tips vil lede deg gjennom hele prosessen. Jeg kan ikke annet enn nevne deres gode sans for humor i denne delen.
Endelig er det på tide å prøve ut vår første fargeskrift! Å, jeg er så spent!
Til å begynne med kan vi teste det rett i Adobe Illustrator ved å klikke på Installere knappen i den øverste delen av Hjem vindu av Fontself. Nå kan du velge skrifttypen din i Karakter panel av Adobe Illustrator (Vindu> Tegn) og prøv det ved å skrive noe!
Når du er fornøyd med resultatet, fortsett og klikk på Eksport knappen i Fontself-vinduet for å generere en OpenType-fil med skrifttypen din og alle de kule funksjonene som vi har lagt til ved hjelp av utvidelsen. Eksportere skrift kan du også Lagre arbeidet ditt og når du må redigere det igjen, må du bare Åpen det i Fontself og der har du det!
Flott arbeid! Nå kan vi ha det gøy å bruke vår fargeskrift i Adobe Photoshop CC 2017/2018 og Adobe Illustrator CC 2018! Prosessen med å justere og installere skrifttypen ved hjelp av Fontself Maker var så morsomt og enkelt at jeg ikke engang har lagt merke til hvordan jeg fullførte alle trinnene som vanligvis gjør meg kjedelig.
Jeg håper du liker å skape tegn i Adobe Illustrator og gjøre dem til en fargeskrift i Fontself så mye som jeg gjør. Du er velkommen til å prøve det, og ikke glem å dele resultatene dine i kommentarene nedenfor eller i sosiale nettverk med #fontself!
Hvis du liker skrifttypen som vi har opprettet i denne opplæringen, og du vil spille med det, kan du ta tak i Fiesta-fargeskriften på Envato Elements! I arkivet får du også vektorfiler med alle tegnene for å lage ditt eget bokstav eller for å prøve hvordan det fungerer i Fontself Maker. Nyt!
Accentsconagua