Team Awesome Fra håndskrevet logotype til Vector i Adobe Illustrator

Hva du skal skape

Har du noen gang ønsket å lage en typografisk logo for deg eller ditt lag? Det er ikke så vanskelig som det virker! Mange sier at de ikke kan male eller tegne, men typografi er en del av vårt daglige liv. Vi skriver alltid navn, e-postadresser, telefonnumre og lignende. Så vi har alle en god start; vi er alle kjent med bokstavens former.

Jeg vil nå veilede deg gjennom alle trinnene som er nødvendige for å lage en logo for "Team Awesome". 

Hva du trenger

For å fullføre dette prosjektet, trenger du følgende:

  • Papir
  • Blyant
  • Adobe Illustrator

1. Planlegg din logo

Trinn 1

Skriv ned ordet eller frasen du vil opprette, før du begynner å skissere. Dette kan høres dumt ut, men tro meg, det er viktig! Når du skriver ordene, begynner du å se hvordan bokstavene danser og spiller med hverandre.

For dette prosjektet lager jeg en logotype for "Team Awesome". Dette er navnet på instruktørlaget og fellesskapsmedlemmene innenfor Design & Illustrasjon-delen her på Tuts +. Siden du leser denne opplæringen, velkommen til teamet!

For min "Team Awesome", lurte jeg på hva jeg kunne bruke til å visuelt representere" Awesomeness ". Det første som kom til meg var superhelter. Hva er mer fantastisk enn en superhelte? Så jeg vil at min logo skal ligne en superheltlogo.

Steg 2

Ta deg tid til å tenke på og planlegge hvordan navnet du bruker til logoen din, kan oversettes visuelt. I så fall vil logoen vår være alle type, så jeg vil bruke elementer integrert med bokstaveringen. For denne logoen valgte jeg å bruke en lynbolt.

Trinn 3

Doodle! Begynn å utforske forskjellige visuelle muligheter. Spill med type og elementer. Du trenger ikke å avgrense noe på dette stadiet, bare doodle!

2. Velge en typografisk stil

Trinn 1

Når du begynner å skissere, tenk på stilen du vil ha, og hvilken melding du vil formidle med din logo eller bokstaver. Hvordan vil du at logoet skal se ut og føles? Hva vil du at personen ser på logoen din for å føle? Scott Biersack tilbyr et flott sett med opplæringsprogrammer som vil hjelpe deg med å bedre forstå typografi. Gå videre til Scotts trening på Hand Lettering Fundamentals. Dette vil hjelpe deg når du jobber gjennom dine tanker.

Steg 2

Nå som du har tenkt på meldingen du vil formidle, må du velge en bestemt typografisk stil. Jeg vil at min logo skal være funky og ha en fin flyt. For å gjøre det, valgte jeg å gjøre det i en uformell skriptstil som ligner på håndskrift. For å få bedre forståelse for typografi og å velge en stil som passer best til det du vil formidle, sjekk ut denne veiledningen av Scott Biersack: Håndbokstaver: Forstå typer typer.

3. Opprett miniatyrbilder

Nå vil du begynne å utforske flere muligheter og prøve å knytte alle elementene sammen.

Trinn 1

Først må du lage raffinerte miniatyrbilder. Jeg liker å skisse miniatyrbildene som mini versjoner av logoen. På denne måten kan jeg tydeligere i denne første fasen se hvordan logoen vil oppføre seg og om det vil fungere eller ikke. På dette punktet skal jeg skissere mye. Ikke vær redd for å lage mange forskjellige versjoner. Også jeg begynner å definere hvor jeg vil plassere mine bezier poeng på dette stadiet.

Steg 2

Tegn bokstavene som enkle linjer, og legg deretter til dybde i bokstavformene; slags analog versjon av Offset-banen kommando. Det er en god teknikk som du kan tilpasse til din egen håndskrift eller figurer, så ta deg tid til å trene. Vi venter.

4. Velge og Raffinere Skissen

Trinn 1

Velg den røde blyantskissen du vil jobbe med, skann den og endre størrelsen på den til en større størrelse. Dette vil være mal for deg å bygge vektorer på.

Steg 2

Når bildet er skannet, skriv det ut igjen og spor streken på toppen av det for å gjøre justeringer og for å løse eventuelle problemer. Skann deretter denne skissen en gang til for å bruke bildet for faktisk sporing i Illustrator. Jeg gjør vanligvis noen siste øyeblikk tweaks på denne skissen.

5. Definere plasseringen av Bezier-håndtakene

Trinn 1

Du lurer kanskje på: "Definere plasseringen av mine bezier håndtak ... nå? På papir?" Ja! Gjør dette nå, før vi begynner med vektordelen. Dette vil bidra til å skape en rask arbeidsflyt i Illustrator senere, og det er også en god øvelse for generell vekting.

Steg 2

Ta din valgte røde skisse og definer nøkkelpunkter som vil hjelpe deg med å bygge vektorgrader. Dette er ikke en regel; noen ganger må du legge til eller fjerne poeng her og der senere. Ikke vær en bezier nazi! Det handler om at kurvene ser riktig ut. Forsiktig undersøke bokstavene og forsøk å identifisere de ytre punktene. Spor linjer rundt bokstavene for å identifisere de ytre punktene. Merk dem på papiret med en penn eller en markør.

Hold dette papiret praktisk for videre referanse; vi vil kalle det vår Bezier Referanseblad.

6. Klargjøre skissen

Med skissen valgt og plasseringen av bezier-punktene er definert, er det på tide å forberede skissen som skal spores i Illustrator. Vi gjør det ved å åpne skissen i Photoshop, konvertere den til et bitmap-bilde (Bilde> Modus> Bitmap), og lagrer som en TIFF-fil.

7. Sette opp rammen i Adobe Illustrator

Trinn 1

Nå er det på tide å sette opp Illustrator-dokumentet for å begynne å bygge figurene på vår "Team Awesome" -logo. Først klikker du på Fil> Ny å opprette et nytt dokument. Min er A4 (210 x 297 mm) horisontal, Fargemodus: RGB. Jeg bruker CS5-versjon, men det bør ikke være mye forskjell i nyere eller tidligere versjoner.

Steg 2

Legg bildet ditt ved å klikke på Fil> Plass og velge TIFF-filen du lagret tidligere. Bra jobbet!

Trinn 3

Denne skissen blir din mal. Jeg maler den med en lyseblå farge, for å hjelpe meg å se gjennom linjene. 

Det er en god praksis å legge til linjer som vil fungere som guider for å hjelpe deg med å plassere figurene. Jeg bruker en lysegrå til støttelinjene. Dette er ikke en regel - du kan spille med farger for å se hva som passer best for deg. Lys grå fungerer for meg. Det viktige å huske på er å få skissen din synlig. 

Navngi dette laget "TEMPLATE", eller et annet navn som du tror, ​​vil hjelpe deg. Når det hele er satt, opprett et nytt lag og kaller det "TRACE". Jeg anbefaler å velge mørkblå farge for "TRACE" -laget.

8. Begynn å bygge vektorgrader

Trinn 1

Ved å bruke vårt Bezier Referanseark som er opprettet tidligere, klikker du på Pennverktøyet (P) og begynn å legge til poeng på de definerte stedene, og hold alltid Skifte nøkkel for å begrense stillingen. Dette vil holde punktene vinklet på , 45º og 90º, slik at formen din har bedre kurver med færre poeng og gjør det enkelt å bygge og styre senere. 

Fortsett å bytte TEMPLATE-laget på og av for å se hvordan kurvene ser ut, og juster dem om nødvendig. For figurene bruker jeg en rosa farge (# FF00FF). Dette vil hjelpe deg å se linjene på toppen av den blå skissen.

Steg 2

Start med store bokstaver A, og bygg hvert brev separat som en annen gjenstand til komposisjonen er fullført. Fortsett å gjenta dette for alle bokstavene, bytte på TEMPLATE-laget av og på og gi oppmerksomhet til hvordan poengene dine er plassert og hvordan kurvene dine ser ut. Når du blir vant til denne teknikken, vil du se hvor enkelt det er.

9. Plassering av poengene

For de fleste er det vanskeligste, og noen ganger skremmende, å jobbe med økende kurver. Det kan virke vanskelig for første gang, men det er det ikke. Se på skjermbildene nedenfor, og legg merke til hvordan alle poengene er plassert. 

10. Fullførte vektorgrader 

Trinn 1

Med våre grunnleggende vektorformer ferdigstilt, er det nå på tide å vurdere vår fremgang. På dette tidspunktet vil jeg vanligvis skrive ut det igjen og gjøre flere justeringer med en blyant.

Steg 2

Dette er min trykte skisse. Jeg vil imidlertid ikke skanne dette igjen. Jeg vil bare referere til det for å gjøre endringer i Illustrator.

11. Justeringer

Trinn 1

Dupliser TRACE-laget og gi det navnet REVISION. På dette laget gjøres korrigeringer ved hjelp av den utskrevne skissen om nødvendig, bevar de andre lagene og la dem være intakt.

Steg 2

Du har fullført og raffinert vektorformene. Dupliser dette laget og kaller det FINAL som en sikkerhetskopi, hvis du må endre det senere.

12. styling

Nå er det på tide å lage logoen pop! La oss gi det litt liv for å gjøre det enda mer fantastisk.

Trinn 1

Klipp litt bokstaver for å få dem til å se mer interlaced. Du kan legge til figurer på enkelte deler, og med Minus Tilbake kommando fra Pathfinder panel, trekke dem fra den opprinnelige formen.

Du kan gjøre dette ved å plassere kuttformene på bunnen og klikke på Objekt> Ordne> Send til Tilbake eller treffer Shift-Control-[.

Steg 2

Åpne Pathfinder panel ved å klikke på Vindu> Pathfinder eller klikke Shift-Control-F9.

Trinn 3

Med de to formene som er valgt, klikker du på Minus Tilbake knapp. voilà!

Trinn 4

Legg til en kontur i objektet ved å velge og klikke på Objekt> Path> Offset Path. Tast inn 1 mm og klikk OK.

Mal konturen med en mørk blå eller svart farge, slik at vi kan skille begge deler. Ikke bekymre deg for farger for nå - vi endrer det senere.

Trinn 5

La oss legge til litt dybde. Dupliser konturlaget ved å klikke på Rediger> Kopier (Kontroll-C), og lim den inn på baksiden ved å klikke på Rediger> Lim inn i baksiden (Control-B).

Velg de to svarte konturene og klikk på Objekt> Blend> Lag eller klikk Kontroll-A-B Alt.

Etter å ha brukt effekten, vil du legge merke til at blandingen ser merkelig ut. La oss rette dette ved å dobbeltklikke på Blend Tool knappen på Verktøy panel.

På dialogboksen som vises, velg Spacing: Spesifiserte trinn og skriv inn 60. Etter å ha brukt effekten, velg Objekt> Blend> Utvid og det vil bli konvertert til objekter.

Med objektene som er valgt, åpner du Pathfinder  panel og lokaliser Forene knapp. Klikk på den. Dette vil fusjonere alle objekter i et enkelt objekt.

Og det er klart! Gratulerer med din ... Hva? Nei, nei, ikke enda! Zoom inn og vil du se at noen linjer er fulle av poeng, noe som gjør konturen ser tynn på noen områder. Vi trenger å bli kvitt det!

Tast inn Oversikt over modus ved å klikke Kontroll-Y og klikk på Lasso verktøy knapp (Q) Verktøy panel. Velg ekstra poeng med Lasso verktøy og gå til Objekt> Sti> Fjern ankerpoeng. Gjenta dette på alle delene du trenger til du har fine, glatte figurer.

13. Farge og detaljer

Trinn 1

Når alt er korrigert, la oss endre fargene. I mitt tilfelle gjør jeg denne logoen for en fantastisk gruppe mennesker, og deres farger er de to under, så jeg holder fast med dem. I dette trinnet er du fri til å spille med uansett farger du vil ha.

Jeg tror fortsatt noe mangler. Det er fortsatt ikke superheltlogoen jeg forestilte, så jeg la en ellipse på bakgrunnen og malte den med lysere farge.

Steg 2

Nå for å legge til noen detaljer. Først legger jeg til en hvit kontur rundt ekstruderingen. Klikk på Objekt> Offset-banen og skriv inn 1 mm.

Dupliser den hvite konturen ved å velge den og klikk på Rediger> Kopier (Kontroll-C) og lim det inn på baksiden ved å klikke på Rediger> Lim inn i Tilbake (Kontroll-B) Jeg vil male min "skygge" med en farge mørkere enn ellipse farge.

Trinn 3

Nå vil jeg legge til noen høydepunkter. Klikk på Rektangelverktøy knappen på Verktøy paneleller treffer M, og tegne noen rektangler og male dem blå for å være mer synlige. Jeg vil plassere min sammen med ekstruderingsvinkelen. Lage en Forbindelsesvei fra alle rektangler, noe som gjør dem til en enkelt bane. Med alle de blå rektanglene valgt, klikk Shift-8 eller gå til Objekt> Forbindelsesvei> Lag.

Velg ekstrudering og klikk på Objekt> Path> Offset Path og skriv inn -1 mm i dialogboksen.

Velg den genererte banen og rektanglene, og i Pathfinder panelet lokaliserer Krysse knappen og klikk på den. Kopier den genererte banen ved å klikke på Rediger> Kopier (Kontroll-C), og velg deretter ekstruderingen og klikk på Rediger> Lim inn foran (Kontroll-F).

Awesome Work, Team!

Jippi! Vår Team Awesome logo er klar og skinnende! Rått!

Denne opplæringen er ment å hjelpe deg med å få bedre forståelse av håndbokstaver og vektor. Det høres komplisert først, men jo mer du trener, desto lettere blir det. Jeg håper all informasjon jeg har gitt er nyttig for deg, og at du kan tilpasse teknikker og tips som vises her for dine egne prosjekter. Takk for at du ser, og vær fantastisk!