Creeu una font dibuixada a mà amb Illustrator i Fontastic.me

01 de 06

Creeu una font dibuixada a mà amb Illustrator i Fontastic.me

Text i imatges © Ian Pullen

En aquest tutorial divertit i interessant, us mostraré com podeu crear el vostre propi tipus de lletra amb Illustrator i el servei web web fontastic.me.

Per seguir endavant, necessiteu una còpia d'Adobe Illustrator, encara que si no teniu una còpia i no voleu comprar-lo, us pot interessar el nostre tutorial similar que utilitza Inkscape . Inkscape és una alternativa lliure i gratuïta a Illustrator. Sigui quina sigui l'aplicació de dibuix de línies vectorials que utilitzeu, fontastic.me ofereix el seu servei completament gratuït.

Tot i que us mostraré com crear una lletra dibuixada a mà amb una foto de lletres dibuixades al paper, també podeu utilitzar tècniques similars per produir una font amb lletres que s'han dibuixat directament a Illustrator. Si utilitzeu una tauleta de dibuix , potser us sigui preferible.

Si utilitzeu una foto, assegureu-vos d'utilitzar un bolígraf de color fosc per dibuixar les vostres lletres i fer servir paper blanc normal per obtenir el màxim contrast. A més, agafeu la vostra foto amb bones llum per ajudar-vos a produir una foto que sigui clara i contrastada per fer que el Illustrator sigui el més senzill possible per rastrejar les lletres individuals.

Durant les properes pàgines, us guiaré pel procés de creació de la vostra primera font.

02 de 06

Obriu un document en blanc

Text i imatges © Ian Pullen

El primer pas és obrir un fitxer en blanc per treballar.

Aneu a Fitxer> Nou i, al quadre de diàleg, configureu la mida com vulgueu. He fet servir una mida de pàgina quadrada de 500 px, però podeu configurar-la com vulgueu.

A continuació, importarem el fitxer de fotos a Illustrator.

03 de 06

Importeu la vostra foto de text dibuixat a mà

Text i imatges © Ian Pullen

Si no teniu una foto de text dibuixat a mà per treballar, podeu descarregar el mateix fitxer que he utilitzat per a aquest tutorial.

Per importar el fitxer, aneu a Fitxer> Lloc i, a continuació, navegueu fins a on es troba la vostra foto de text dibuixat a mà. Feu clic al botó "Posar" i veureu que la foto apareix al document.

Ara podem traçar aquest fitxer per donar-nos lletres vectorials.

04 de 06

Trace la foto de cartes dibuixades a mà

Text i imatges © Ian Pullen

El seguiment de les lletres és molt senzill.

Només has d'anar a Object> Live Trace> Make and Expand i després d'uns moments, veuràs que totes les lletres s'han establert amb noves versions de línies vectorials. Menys evident és el fet que estaran envoltats d'un altre objecte que representi el fons de la foto. Hem d'eliminar l'objecte de fons, així que aneu a Objeto> Desagrupar i, a continuació, feu clic a qualsevol part del quadre delimitador rectangular per anul·lar-ho tot. Ara feu clic a prop, però no a sobre, una de les lletres i heu de veure que el fons rectangular està seleccionat. Només cal que premeu la tecla Supr del teclat per eliminar-la.

Tanmateix, si deixeu totes les lletres individuals, si alguna de les vostres lletres conté més d'un element, haureu d'agrupar-les. Totes les meves lletres contenen més d'un element, així que vaig haver d'agrupar totes elles. Això es fa clicant i arrossegant una carpeta de selecció que engloba totes les parts diferents d'una lletra i després aneu a Object> Group.

Ara se us quedaran totes les vostres lletres individuals i, posteriorment, les utilitzarem per crear els fitxers SVG individuals que necessitem per crear un tipus de lletra a fontastic.me.

Relacionats: Usant traça en viu a l'Illustrador

05 de 06

Deseu les lletres individuals com a fitxers SVG

Text i imatges © Ian Pullen

Lamentablement, Illustrator no us permet desar diversos fitxers a fitxers SVG individuals, de manera que cada lletra s'ha de desar manualment com a fitxer SVG separat.

En primer lloc, seleccioneu i arrossegueu totes les lletres perquè no acabin el tauler d'art. A continuació, arrossegueu la primera lletra a l'artboard i torneu a dimensionar-la per omplir l'artboard arrossegant un dels patrons d'arrossegament de la cantonada. Mantingueu premuda la tecla Majús. Mentre feu això per mantenir les mateixes proporcions.

Quan hagueu acabat, aneu a Fitxer> Desa com i al diàleg, canvieu el format desplegable a SVG (svg), doneu-li un nom significatiu i feu clic a Desa. Ara podeu suprimir aquesta lletra i el lloc i tornar a dimensionar la següent a l'artboard. Torneu a fer Guardar com i continueu fins que hàgiu desat totes les vostres lletres.

Finalment, abans de continuar, deseu un tauler en blanc perquè pugueu fer servir aquest espai per a un caràcter d'espai. També voldreu considerar desar notes de puntuació i versions en minúscules de les vostres lletres, però no m'he preocupat per aquest tutorial.

Amb aquests fitxers de lletres SVG separats a punt, podeu fer el següent pas per crear el vostre tipus de lletra carregant-los a fontastic.me. Feu un cop d'ull a aquest article per veure com utilitzar fontastic.me per finalitzar la font: Creeu una font amb Fontastic.me

06 de 06

Com s'utilitza el nou panell d'exportació d'actius a Adobe Illustrator CC 2017

La creació de SVG es redueix a un flux de treball de clic i arrossegar amb el nou panell Export Asset a Adobe Illustrator CC 2017.

La versió actual d'Adobe Illustrator conté un nou panell que us permet posar tots els vostres dibuixos en una sola caixa i crear-los com a documents SVG individuals. heus aquí com:

  1. Seleccioneu Finestra> Exportació d'actius o obriu el panell d'exportació d'actius.
  2. Seleccioneu una o totes les lletres i arrossegueu-les al tauler. Tots apareixeran com a elements individuals.
  3. Feu doble clic al nom de l'objecte al tauler i canvieu el nom. Feu això per tots els elements del tauler.
  4. Seleccioneu els elements que voleu exportar i seleccioneu SVG des del menú emergent.
  5. Feu clic a Exporta.