Share
Vad du ska skapaJag ska visa dig hur man skapar en färgfont. Skapa teckensnitt har aldrig varit så snabbt, roligt och enkelt som med Fontself, en kraftfull förlängning för Adobe Illustrator och Photoshop CC. I denna handledning lär du dig hur du gör en färgfont.
Med Fontself kan du skapa ett fullständigt funktionellt teckensnitt med alla klockor och visselpipor som de flesta professionella typsnitt har (kerning, ligaturer etc.) och det mest spännande med det är att det hjälper dig att skapa en färg typsnitt! Du kan göra din fantasi gå vild och lägga till eventuella former och färger du vill ha (inklusive gradienter och andra effekter) till dina karaktärer.
Förutom att skapa färgfonter, som kan användas i Adobe Photoshop CC 2017/2018 och Adobe Illustrator CC 2018, kan du använda Fontself för att skapa vanliga "icke-färg" vektorfonter som kan användas i någon annan programvara som äldre versioner av Adobe CC-appar, CS6, Microsoft Word och många andra.
Kan inte vänta med att prova det?
Tusentals annonsmaterial från Adobe, Google, Apple, Microsoft och andra kända företag använder redan Fontself. Vad som också är coolt om det är att det är 100% indie-programvara som skapades av tre passionerade utvecklare med målet att ge oss ett användarvänligt typsnittskapsverktyg. Och de gjorde det!
Låt oss gå igenom hela processen att skapa och använda vårt eget färgfont i Adobe Illustrator CC 2018 och Fontself Maker!
När jag skapar ett teckensnitt från början, börjar jag vanligtvis med att skildra en allmän ide. Den här gången bestämde jag mig för att skapa en typsnitt i en färgstark linjekonststil.
Jag började med en grov skiss av varje bokstav, försök att göra var och en unik men ändå behålla den övergripande stilen. Jag använder den här skissen som en guide för de konturer som vi ska göra i Adobe Illustrator.
Observera att Fontself Maker fungerar med Adobe Illustrator CC 2015.3 och senare men att använda färgfonter behöver CC 2018 så glöm inte att uppdatera om du inte har gjort det ännu!
Börja med att skapa en Nytt dokument av önskad storlek i RGB färgläge. Om du väljer annan Färg läge, alla färger kommer att vridas till RGB även om de definieras i CMYK eller om dokumentet i CMYK-färgutrymmet. Du kan lära dig mer om färgutrymme i Fontself från deras hjälpsida.
Låt oss börja med bokstaven A. Ta med Polygon Tool (du kan hitta den i samma rullgardinsmeny som Rektangelverktyg (M)) och enkeltklick var som helst på Artboard. Ange antal Sidor till 3 och gör en triangel.
Ställ in dess Fylla färg till Ingen och dess Stroke färg till mörk lila i Färg panel. Nu, i Stroke panel (Fönster> Slag), ställ in Vikt till 2,5 pt och Keps till Round Cap.
Nu kan vi ta bort den undre delen av formen som vi inte behöver. Ta Direktmarkeringsverktyg (A) och klicka på den nedre kanten av triangeln. Slå Radera tangent (eller Backspace om du är på en Mac) för att radera den.
Välj formen med Urvalsverktyg (V) och slå Stiga på att öppna Flytta fönster. Ställ in Horisontell värde till 25 px och Vertikal till 0 px, och klicka Kopia att duplicera formen och flytta den till höger.
Om du väljer båda formerna väljer du Formverktygsverktyg (Shift-M), håll ner Alt, och klicka på stycket till höger för att radera det.
Kopia Den första formen och ändra storlek på den för att göra en liten triangel. Placera den längst ner, skapa en pils fjäder. Välj form, håll nere Alt, och dra upp det för att skapa en kopia. Lägg till ytterligare två kopior och fäst dem längs den vänstra kanten av triangeln.
Grupp (Control-G) de skapade elementen i fjädern och dubbelklicka de Reflekteringsverktyg (O). Välj Vertikal axel och klicka Kopia att vända formen till motsatt sida.
Ta Ellipsverktyg (L), håll ner Flytta, och gör en 10 x 10 px cirkel med mörkblå Stroke och turkos Fylla Färg.
Tips: Använd Eyedropper Tool (I) för att välja fyllnings- eller strokefärg eller eventuella utseendeinställningar och tillämpa dem på andra objekt. Du kan komma åt alternativen för Eyedropper Tool (I) av dubbelklicka det i Verktyg panelen, och sedan kan du kryssa de inställningar som du vill välja och tillämpa.
Kopia stroke genom att välja den och dra till sidan medan du håller Alt. Använd Penverktyg (P) att lägga till en ankarpunkt i mitten av linjen. Använd sedan Ta bort Anchor Point Tool (-) för att radera punkten ovanpå stroke.
Ta Penverktyg (P) eller den Linjesegmentverktyg (\) och håll Flytta att göra en horisontell linje över brevet. Detta kommer att vara baren i bokstaven A.
Kopiera (Control-C> Control-F) slaget och dra det ner. Gör det kortare genom att flytta punkterna med Direktmarkeringsverktyg (A).
Använd nu Penverktyg (P) för att skapa en zigzag-linje i den övre delen av brevet, som visas i bilden nedan.
Lägg till några fler slag på båda sidor av brevet, så att det ser mer detaljerat ut.
Nu när konturerna i bokstaven A är klara, låt oss lägga till lite färg! Vi kan duplikat (Control-C> Control-B) brevet och Dölj kopian i Skikten panelen genom att klicka på den lilla ögonikonen, bara om vi behöver använda dessa skisser senare.
Välj den synliga kopian och gå till Objekt> Live Paint> Make.
Ta nu tag i Live Paint Bucket (K) och sväva över det område som du vill fylla med färg. När du ser en röd skiss, klicka på området för att fylla det.
Fortsätt använda Live Paint Bucket (K) och välja nya färger i Färg panel för att fylla trianglarna i bokens övre del.
Låt oss nu gå till Objekt> Levande färg> Expand för att vända varje färgad sektion till ett separat objekt.
Använd Direktmarkeringsverktyg (A) att dra ett par element ut, vilket gör kompositionen mer dynamisk.
Och där har vi det! Vårt första brev är klart! Låt oss flytta till nästa och se vad vi kan använda för att få det att se unikt ut.
Jag använder inte några snäpp eller speciella galler för denna typsnitt, eftersom jag vill behålla lite av en handgjord touch utan att göra den geometriskt perfekt eller pixel perfekt. Men för att göra stilsorten konsekvent måste vi behålla alla bokstäver av samma höjd (medan bredden blir annorlunda).
Slå på Linjaler (Control-R) och dra ett par horisontella guider på Artboard för att markera höjden på bokstaven A. Vi kan komma åt guider meny från Visa> Guider.
Låt oss börja med stavelsen på brevet B. Använd Rektangelverktyg (M) att göra en smal rektangel av ungefär 30 x 120 px (kom ihåg att hålla höjden lika med längden på ditt första brev).
Välj den undre kanten med Direktmarkeringsverktyg (A) och radera det.
Lägg till några horisontella linjer och bifoga ett par 10 x 10 px turkoscirklar till botten av formen. Vi kan kopia Dessa cirklar från vårt brev A.
Låt oss nu göra en rak horisontell linje med Penverktyg (P) och gå till Effekt> Förvräng & Transformera> Zig Zag. Ställ in Storlek till 10 px, Ridges per segment till 5, och Points till Hörn.
Klick ok och gå till Objekt> Expand Utseende att tillämpa effekten.
Placera den skapade zigzagen inuti den övre delen av brevet och ändra storlek så att den passar rektangeln.
Låt oss skapa en rektangel av ungefär 45 x 55 px storlek och justera den till bokens övre och vänstra kanter. För att göra detta, välj stammen och den skapade rektangeln och klicka på stammen en gång till för att göra det a Nyckelobjekt (du kommer att se ett tjockare val runt det).
Öppna Justera panel (Fönster> Justera) och klicka Horisontell Justera Vänster och Vertikaljustera topp.
Låt oss välja rektangelns övre och nedre högra hörn med Direktmarkeringsverktyg (A) och gör dem rundade genom att dra cirkelmarkören på Levande hörn närmare centrum. Vi kan också justera Corners radie manuellt från kontrollpanelen ovanpå.
Tips: Om du inte hittar den översta kontrollpanelen efter uppdatering till Adobe Illustrator CC 2018, oroa dig inte! Det är fortfarande där, och du kan slå på det Fönster> Arbetsyta> Essentials Classic.
Låt oss ta bort formens vänstra kant. Välj det nedre vänstra hörnet med knappen Direktmarkeringsverktyg (A) och tryck på Radera (Backspace på Mac).
Upprepa samma för den övre vänstra punkten, och lämna endast den välvda formen.
Gör en större båge för bottenskålen i bokstaven B.
Lägg till en mindre båge inuti bottenskålen. Gör brevet mer invecklat genom att lägga till horisontella och vertikala streck. Avsluta konturerna genom att placera två cirklar i bottenskålen.
låt oss duplikat (Control-C> Control-B) brevet och behåll kopia osynlig om vi behöver det senare.
Välj den synliga kopian och Objekt> Live Paint> Make. Använd Live Paint Bucket (K) och den Eyedropper Tool (I) att välja och tillämpa färger på elementen i bokstaven B.
Låt oss avsluta brevet. Gå till Objekt> Levande färg> Expand och använd Direktmarkeringsverktyg (A) att dra några av de färgade delarna ur konturen.
Grymt bra! Andra bokstaven är klar! Låt oss kolla in några fler tekniker som vi kan använda för andra bokstäver och symboler.
Ta Ellipsverktyg (L) och börja med basen av brevet genom att göra en 115 x 115 px cirkel. Kopia den skapade cirkeln och Klistra in på framsidan (Control-C> Control-F). Minska storleken på kopian till 80 x 80 px.
Som du kanske märker är brevet lite lägre än den övre riktlinjen. Vi har lämnat något utrymme ovanför cirkeln för att lägga till några detaljer där.
Ta Penverktyg (P), håll Flytta, och skapa en vertikal linje över cirklarna. Håller vald linje, dubbelklicka de Rotera verktyg (R) och ställa in Vinkel till 12 grader. Klick Kopia för att lägga till en roterad kopia av linjen.
Tryck nu på Kontroll-D Upprepa den sista åtgärden och fortsätt trycka tills du får 30 kopior för att fylla cirkeln.
låt oss grupp (Control-G) de skapade strålarna och Dölj dem för nu.
Låt oss nu skapa en silhuett av bokstaven C. Använd Lägg till Anchor Point Tool (+) att lägga till två punkter på högra sidan av den större cirkeln och två för den mindre, som markerat i skärmdumpen nedan.
Nu kan vi använda Direktmarkeringsverktyg (A) att klicka på segmentet båge mellan de skapade punkterna och radera Det. Upprepa samma för båda cirklarna.
Låt oss nu avslöja de dolda strålarna och välj alla C-elementen.
Ta Formverktygsverktyg (Shift-M) och klicka på rektanglarna som bildas av korslinjer. Klicka inte på dem alla; lämna lite orörd utrymme längst ner i formen.
Nu kan vi välja de onödiga bitarna av strålarna i mitten av C och ta bort dem.
Låt oss krossa strålarna till vänster om bokstaven C.
Använd Penverktyg (P) att lägga till en ny ankarpunkt någonstans mitt i raden och ta bort toppunkten med Ta bort Anchor Point Tool (-). På så sätt lossar vi biten från kanten av brevet.
Fortsätt växla strålarna, gör några av dem kortare och ta bort andra för att lägga till variation i bokstäverens silhuett.
Lägg till några mer välvda slag till den inre delen av brevet. Fäst cirklarna till spetsarna på de stora bågarna.
Duplicera de skapade konturerna och använda Levande färg och den Live Paint Bucket (K) att lägga till färger.
Objekt> Levande färg> Expand formen och dra ut några av de färgade rektanglarna. Bra jobbat! Vårt tredje brev är klart!
Fortsätt och skapa fler bokstäver, siffror och skiljetecken, allt du kan behöva för ditt framtida teckensnitt. Oroa dig inte om du inte gör alla önskade symboler samtidigt. Du kan alltid öppna din fontfil och lägga till dem senare.
Nu för den roliga delen! Eftersom vi har allt förberedt kan vi äntligen skapa ett teckensnitt med hjälp av Fontself Maker!
Först av allt, låt oss öppna Skikten panel och placera alla bokstäver i alfabetisk ordning, från vänster till höger. Fontself kommer automatiskt att tilldela rätt tecken om du placerar dem i rätt ordning.
Vi kan byta namn på den nedre riktlinjen, ange den som en baslinje.
Låt oss nu se till att alla våra bokstäver är i linje med botten och placerad på baslinjen. Välj dina tecken och klicka på Vertikalt justera botten i Justera panel, med en av tecknen som en Nyckelobjekt.
Gå till Fönster> Extensions och springa Fontself Maker. Ett kompakt fönster i förlängningen laddas, och du kan justera storleken genom att dra i dess nedre hörn. Den har ett enkelt och användarvänligt drag-och-släpp-gränssnitt med popuptips och en online chattassistent som kan hjälpa dig med dina frågor.
Låt oss nu välja vårt alfabet och dra det till fontselfönstret. Här har vi flera alternativ att välja mellan. Om du redan har alla bokstäver redo kan du använda 'A-Z' område och släpp dina bokstäver där. Fontself lägger dem automatiskt i rätt ordning, vilket ger varje brev ett riktigt namn.
Annars, om du inte har alla karaktärer färdiga ännu, placera muspekaren över 'Alla tecken (Batch)' fält och släpp musknappen för att ladda upp dina tecken.
I vårt fall gör vi en stor bokstäver, så alla bokstäver kommer att vara desamma för både stora och små bokstäver.
Vad som är bra med Fontself är att det gör saker så mycket enklare: när vi har ordnat och anpassat våra bokstäver, kommer programmet att placera dem i rätt ordning med hjälp av informationen från Skikten panel. Se bara till att du drar och släpper allt tillsammans, inklusive baslinjen.
Om du behöver lite mer kontroll över riktlinjerna och du vill lägga till en stigare och nedstigning, kan du också göra det! Lägg bara till ytterligare två riktlinjer, byt namn på dem "Ascender" och "descender" i Skikten panel och dra och släpp dem sedan i Fontself tillsammans med ditt alfabet. voila!
Du kan lära dig mer om att använda guider i Fontself från hjälpsidan.
Nu har vi varje brev placerat i sin egen plats. Härifrån kan vi skriva in något i Live förhandsvisning fönster för att kolla hur det ser ut och leka med Letter Space, Line Space och Skala, om det behövs.
Genom att klicka på den lilla kuggikonen till höger kan du ändra teckenstorlek, inriktning och bakgrundsfärg.
Vi kan också expandera fönstret för förhandsgranskning av bokstäver genom att klicka på den lilla diagonalpilen i det övre vänstra hörnet av varje förhandsgranskningsfack (cirkulerat i skärmbilden nedan) eller genom dubbelklicka glyfen.
Här har vi några fler alternativ för varje brev. Vi kan dra linjerna, ändra positionen för uppstigaren och nedstigningen och justera andra inställningar.
När vi är nöjda med bokstäverna, låt oss lägga till andra symboler och skiljetecken! För att göra detta, välj bara elementen på Artboard och klicka på Sats knapp i Hem Fönster av Fontself. Dina symboler kommer att läggas till och placeras i rätt ordning.
Låt oss nu titta på några avancerade inställningar som är viktiga när du skapar ett teckensnitt. Hitta och klicka på Avancerad knapp i Hem Fönster av Fontself.
Härifrån kan vi justera Mellanrum, kerning, och några andra parametrar som är viktiga för att göra vårt teckensnitt ser balanserat och konsekvent.
Låt oss börja med Mellanrum.
I typografi, mellanrum eller spårning är mängden utrymme mellan tecknen, som påverkar densiteten och ger teckensnittet sin relativa öppenhet eller täthet. Faktum är att ett bra avstånd sparar dig en massa tid när du skapar ett teckensnitt, så se till att du börjar med att justera den först!
Det finns flera sätt att arbeta med avstånd i Fontself. Först av allt, klicka på Spacing Pad fönstret och skriv några fraser där för att se hur tecknen fungerar i en text. Nu i det grå området till höger kan du se en lista över bokstäver och deras värden. Här kan du redigera avståndet genom att ange exakta värden i tabellen.
Ett annat sätt att redigera avstånd är att göra det manuellt genom att klicka på tecknet själv och dra de streckade linjerna till vänster och höger sida av det. Du kommer se alla justeringar i Spacing Pad och i Live förhandsvisning område som redan har en provtext med alla dina karaktärer.
Nu när vi är nöjda med textens densitet och dess övergripande utseende, är det dags att justera parningen genom att klicka på kerning knapp.
kerning är processen att justera avståndet mellan specifika teckenpar för att uppnå ett visuellt tilltalande resultat. I proportionella all-caps-teckensnitt händer det ofta att bokstäver i vissa vanliga kombinationer (som VA eller AW) ser för långt ifrån varandra. I det här fallet måste vi hitta sådana par och justera avståndet mellan dem manuellt och skapa kerning par. Och Fontself har också denna funktion! Dessutom har det redan några vanliga parningspar i Live förhandsvisning fönster så att du kan se resultatet direkt.
Samma som med avstånd, det finns flera sätt att justera kerning. Först av allt, klicka på Kerning Pad fönster och skriv några parningspar som du vill redigera, till exempel AVA. Nu, i det grå området till höger kan du se Kerning par fönstret och skriv värdena manuellt.
Ett annat sätt att justera kerning är att klicka på tecknet och dra den streckade linjen mellan paret. Den röda raden visas för negativa värden, vilket gör att mellanslag mellan bokstäverna är mindre. Den blå linjen indikerar det ökande utrymmet med ett positivt värde som flyttar bokstäverna längre bort från varandra. Enkelt som det.
Nästa viktiga sak som du kanske vill använda i din typsnitt och Fontself har den här funktionen är användningen av ligaturer!
en ligatur är en kombination av två eller flera bokstäver i en symbol. Exempelvis kan vi i gemensamma kombinationer som "tt", "fi" och "ff" ändra vissa element i bokstäverna, till exempel tvärsnitt, för att se dem bättre ut tillsammans. Vidare kan vi använda ligaturer på mer kreativa sätt när vi arbetar med färgfonter, till exempel att vissa ord eller namn ser ut som nyfiken genom att lägga till nya element till dem, som partiklar, blommor eller swashes. I detta fall kan hela kompositionen användas som en symbol, dvs ligatur.
Låt oss säga att vi vill slå samman två bokstäver tillsammans i "TT" för att skapa en enda stapel för dem. När du har skrivit ut den nya bokstaven väljer du den på Artboard. Öppna sedan Fontself-fönstret och skriv 'TT' i textområdet ovanpå och klicka på Skapa ligatur knappen bredvid den.
När du har klickat på knappen frågar Fontself vilken typ av ligatur du vill skapa. Senare kan du hitta båda Standard ligaturer och Diskretionära ligaturer i Opentype panel (Fönster> OpenType) av Adobe Illustrator och se hur de fungerar.
Den sista men inte minst funktionen som kan göra ditt teckensnitt mer unikt och lekfullt använder suppleanter-Alternativa versioner av vissa (eller alla) tecken som lägger till variation för hela texten. De kan vara versioner med andra färger, konturer eller swashes.
Till exempel kan du se att "O" -breven i ordet "COLORS" är lite annorlunda. Det är såhär vi gör det. När du har den alternativa versionen av brevet som är klar, välj den på Artboard och lägg till den i Fontself. Programmet kommer att fråga dig om du vill Byta ut den existerande bokstaven "O" eller skapa en alternativ glyph. Klicka bara på Alternativ knapp, och där har du det!
Nu när vi har lagt till alla tecken till Fontself, justerat avståndet och kerning, och ställer ligaturerna och suppleanter, det är dags att namnge vår bebis!
Klicka på Font Info knapp i Hem Fontselfönster och fyll i all nödvändig information. Utvecklarens tips leder dig genom hela processen. Jag kan inte bara nämna deras stora sinnesro i denna del.
Slutligen är det dags att prova vår första färgfont! Åh, jag är så upphetsad!
Till att börja med kan vi testa det direkt i Adobe Illustrator genom att klicka på Installera knappen i den övre delen av Hem Fönster av Fontself. Nu kan du välja din typsnitt i Karaktär panelen av Adobe Illustrator (Fönster> Tecken) och prova det genom att skriva något!
När du är nöjd med resultatet, fortsätt och klicka på Exportera knappen i Fontself-fönstret för att skapa en OpenType-fil med ditt teckensnitt och alla de coola funktionerna som vi lade till med utvidgningen. Genom att exportera teckensnittet kan du också Spara ditt arbete och när du behöver redigera det igen behöver du bara Öppna det i Fontself och där har du det!
Bra jobbat! Nu kan vi ha kul med vår färgfont i Adobe Photoshop CC 2017/2018 och Adobe Illustrator CC 2018! Processen med att justera och installera teckensnittet med hjälp av Fontself Maker var så roligt och lätt att jag inte ens märkt hur jag avslutade alla steg som vanligtvis gör mig uttråkad.
Jag hoppas att du gillar att skapa tecken i Adobe Illustrator och göra dem till en färgfont i Fontself så mycket som jag gör. Ta gärna prov på det, och glöm inte att dela dina resultat i kommentarerna nedan eller i sociala nätverk med #fontself!
Om du tycker om typsnittet som vi har skapat i den här handledningen och du vill spela med det, är du välkommen att ta tag i Fiesta Colour Font på Envato Elements! I arkivet får du även vektorfiler med alla tecken för att skapa ditt eget bokstäver eller för att prova hur det fungerar i Fontself Maker. Njut av!
Accentsconagua