Team Awesome Från Hand-Lettered Logotype till Vector i Adobe Illustrator

Vad du ska skapa

Har du någonsin velat skapa en typografisk logotyp för dig eller ditt lag? Det är inte så svårt som det verkar! Många säger att de inte kan måla eller rita, men typografi är en del av vårt dagliga liv. Vi skriver alltid namn, e-postadresser, telefonnummer och liknande. Så vi har alla en bra start; vi är alla bekanta med bokstavens former.

Jag kommer nu att vägleda dig genom alla nödvändiga steg för att skapa en logotyp för "Team Awesome". 

Vad du kommer att behöva

För att slutföra detta projekt behöver du följande:

  • Papper
  • Penna
  • Adobe Illustrator

1. Planera din logotyp

Steg 1

Skriv ner ordet eller frasen du vill skapa innan du börjar skissa. Det här låter dumt men tro mig, det är viktigt! När du skriver orden börjar du se hur bokstäverna dansar och spelar med varandra.

För det här projektet skapar jag en logotyp för "Team Awesome". Detta är namnet på instruktörsteamet och medlemmarna i avsnittet Design & Illustration här på Tuts +. Eftersom du läser denna handledning, välkommen till laget!

För min "Team Awesome", undrade jag vad jag kunde använda för att visuellt representera" Awesomeness ". Det första som kom till mig var superhjältar. Vad är mer fantastisk än en superhjälte? Så jag vill att min logotyp ska likna en superhjälte-logotyp.

Steg 2

Ta dig tid att tänka på och planera hur namnet du använder för din logotyp kan översättas visuellt. I så fall kommer vår logotyp att vara helt typ, så jag använder element som är integrerade med bokstäverna. För den här logotypen valde jag att använda en blixtbult.

Steg 3

Klotter! Börja utforska olika visuella möjligheter. Spela med typ och element. Inget behov av att förfina någonting på detta stadium, bara doodle!

2. Välja en typografisk stil

Steg 1

När du börjar skissera, tänk på vilken stil du vill ha och vilket meddelande du vill förmedla med din logotyp eller bokstäver. Hur vill du att din logotyp ska se ut? Vad vill du att personen tittar på din logotyp för att känna? Scott Biersack erbjuder en bra uppsättning av handledning som hjälper dig att bättre förstå typografi. Gå vidare till Scotts utbildning på Hand Lettering Fundamentals. Detta hjälper dig när du arbetar genom dina tankar.

Steg 2

Nu när du har tänkt på meddelandet du vill förmedla, måste du välja en specifik typografisk stil. Jag vill att min logotyp ska vara funky och ha ett fint flöde. För att göra det valde jag att göra det i en avslappnad manusstil som liknar handstil. För att få en bättre förståelse för typografi och välja en stil som bäst passar vad du vill förmedla, kolla in den här handledningen av Scott Biersack: Hand Lettering: Understanding Types of Type.

3. Skapa miniatyrbilder

Nu börjar du utforska flera möjligheter och försöker knyta alla element tillsammans.

Steg 1

Skapa först raffinerade miniatyrer. Jag gillar att skissa miniatyrerna som mini versioner av logotypen. På det här sättet kan jag tydligare se i detta första skede hur logotypen kommer att verka och om det kommer att fungera eller inte. Vid denna tidpunkt ska jag skissera mycket. Var inte rädd för att göra många olika versioner. Jag börjar också definiera var jag kommer att placera mina mer intressanta poäng på detta stadium.

Steg 2

Rita bokstäverna som enkla linjer och lägg sedan till djupet i brevformerna; typ av en analog version av Offsetväg kommando. Det är en bra teknik som du kan anpassa till din egen handstil eller former, så ta dig tid att träna. Jamen vänta.

4. Val och raffinering av skissen

Steg 1

Välj den grova penna skiss du vill arbeta med, skanna den och ändra storlek på den till en större storlek. Detta kommer att vara mallen för dig att bygga vektorerna på.

Steg 2

När bilden är skannad, skriv ut den igen och spåra stroke ovanpå den för att göra justeringar och korrigera eventuella problem. Skanna sedan denna skiss ytterligare en gång för att använda bilden för aktuell spårning i Illustrator. Jag brukar göra några sista minuten tweaks på den här skissen.

5. Definiera placeringen av Bezier Handles

Steg 1

Du kanske undrar: "Definiera placeringen av mina mysigare handtag ... nu? På papper?" Ja! Gör det nu, innan vi ens börjar med vektorgruppen. Detta kommer att bidra till att skapa ett snabbt arbetsflöde i Illustrator senare och är också en bra övning på generell vektorisering.

Steg 2

Ta din valda grova skiss och definiera nyckelpunkter som hjälper dig att bygga dina vektorgrader. Detta är inte en regel; Ibland behöver du lägga till eller ta bort poäng här och där senare. Var inte en bezier nazi! Det handlar om att kurvorna ser rätt ut. Kontrollera försiktigt bokstäverna och försök att identifiera de yttersta punkterna. Spåra runt bokstäverna för att identifiera de yttersta punkterna. Markera dem på papperet med en penna eller en markör.

Håll detta papper användbart för vidare referens; vi kommer att kalla det vårt Bezier Referensblad.

6. Förbereda skissen

Med den skiss som valts och placeringen av bezier-punkterna definieras är det dags att förbereda skissen som ska spåras i Illustrator. Vi gör det genom att öppna skissen i Photoshop, konvertera den till en bitmapps bild (Bild> Läge> Bitmapp) och spara som en TIFF-fil.

7. Ställa in ramverket i Adobe Illustrator

Steg 1

Nu är det dags att konfigurera Illustrator-dokumentet för att börja bygga formerna av vår "Team Awesome" -logo. Klicka först på Fil> Ny att skapa ett nytt dokument Min är A4 (210 x 297 mm) horisontellt, Färgläge: RGB. Jag använder CS5-version, men det borde inte vara så stor skillnad i nyare eller tidigare versioner.

Steg 2

Placera din bild genom att klicka på Arkiv> Plats och välja den TIFF-fil du sparat tidigare. Bra jobbat!

Steg 3

Denna skiss kommer att vara din mall. Jag målar den med en ljusblå färg för att hjälpa mig att se igenom linjerna. 

Det är en bra övning att lägga till rader som fungerar som guider för att hjälpa dig att placera formerna. Jag använder en ljusgrå för guiderna. Det här är ingen regel - du kan leka med färger för att se vad som är bäst för dig. Ljusgrå fungerar för mig. Det viktiga att tänka på är att få din skiss synlig. 

Namn det här skiktet "TEMPLATE", eller något annat namn som du tror hjälper dig. När det är klart, skapa ett nytt lager och namnge det "TRACE". Jag rekommenderar att du väljer den mörkblå färgen för "TRACE" -laget.

8. Börja bygga vektorgraden

Steg 1

Använd vårt Bezier Referensblad som skapats tidigare, klicka på Penverktyg (P) och börja lägga till poäng på de definierade platserna, håll alltid Flytta nyckeln för att begränsa positionen. Detta kommer att hålla punkterna vinklade på , 45 ° och 90º, så att din form kan ha bättre kurvor med färre poäng och gör det enkelt att bygga och styra senare. 

Fortsätt att byta och stänga av TEMPLATE-skiktet för att se hur kurvorna ser ut och justera dem om det behövs. För formerna använder jag en rosa färg (# FF00FF). Detta hjälper dig att se linjerna ovanpå den blå skissen.

Steg 2

Börja med stor bokstav A och bygg varje bokstav separat som ett annat objekt tills kompositionen är klar. Fortsätt att upprepa detta för alla bokstäver, byta till och från TEMPLATE-laget och var uppmärksam på hur dina poäng placeras och hur kurvorna ser ut. När du väl blivit van vid denna teknik ser du hur enkelt det är.

9. Placering av punkterna

För de flesta människor är det svåraste och ibland skrämmande, att arbeta med snyggare kurvor. Det kan tyckas svårt första gången, men det är det inte. Titta på skärmdumparna nedan och märka hur alla punkter är placerade. 

10. Slutförda vektorgrader 

Steg 1

Med våra grundläggande vektorformer färdiga, nu är det dags att se över våra framsteg. Vid denna tidpunkt brukar jag skriva ut det igen och göra mer justeringar med en penna.

Steg 2

Detta är min tryckta skiss. Jag kommer dock inte att skanna om detta. Jag kommer bara hänvisa till det för att göra ändringar i Illustrator.

11. Justeringar

Steg 1

Kopiera TRACE-skiktet och namnge det REVISION. På detta lager gör korrigeringar med hjälp av den utskrivna skissen om det behövs, behåll de övriga skikten och lämna dem intakta.

Steg 2

Du har gjort och förfinat vektorgraden. Duplicera detta lager och namnge det FINAL som en säkerhetskopia, om du behöver ändra det senare.

12. Styling

Nu är det dags att göra logotypen pop! Låt oss ge det lite liv för att göra det ännu mer fantastiskt.

Steg 1

Klipp några bokstäver för att få dem att se mer interlaced. Du kan lägga till former på vissa delar och med Minus Tillbaka kommando från Stigfinnare panel, subtrahera dem från den ursprungliga formen.

Du kan göra detta genom att placera de sneda formerna längst ner och klicka på Objekt> Ordna> Skicka till Tillbaka eller slå Skift-Control- [.

Steg 2

Öppna Stigfinnare panelen genom att klicka på Fönster> Pathfinder eller klicka Shift-Control-F9.

Steg 3

Med de två olika formerna, klicka på Minus Tillbaka knapp. Voilà!

Steg 4

Lägg till en kontur i ditt objekt genom att välja och klicka på Objekt> Path> Offset-sökväg. Stiga på 1 mm och klicka ok.

Måla konturen med en mörkblå eller svart färg, så vi kan skilja båda. Oroa dig inte för färger för nu - vi kommer att ändra det senare.

Steg 5

Låt oss nu lägga till lite djup. Dubbla konturskiktet genom att klicka på Redigera> Kopiera (Kontroll-C), och klistra in det på baksidan genom att klicka på Redigera> Klistra in bakåt (Control-B).

Välj de två svarta konturerna och klicka på Objekt> Blanda> Gör eller klicka Kontroll-Alt-B.

Efter att ha applicerat effekten kommer du att märka att blandningen ser konstigt ut. Låt oss korrigera detta genom att dubbelklicka på Blandningsverktyg knapp på Verktyg panel.

I dialogrutan som visas väljer du Spacing: Specificerade steg och skriv in 60. När du har tillämpat effekten, välj Objekt> Blanda> Expandera och det kommer att konverteras till objekt.

Med de markerade objekten öppnar du Stigfinnare  panel och lokalisera Förena knapp. Klicka på det. Detta sammanfogar alla objekt i ett enda objekt.

Och det är klart! Grattis på din ... Vad? Nej, nej, ännu inte! Zooma in och ser du att några rader är fulla av punkter, vilket gör konturen serig i vissa områden. Vi måste bli av med det!

Stiga på Översiktsläge genom att klicka Kontroll-Y och klicka på Lasso Tool knapp (Q) Verktyg panel. Välj extra poäng med Lasso Tool och gå till Objekt> Path> Ta bort Anchor Points. Upprepa detta på alla delar som behövs tills du har snygga släta former.

13. Färg och detaljer

Steg 1

När allt är korrigerat, låt oss ändra färgerna. I mitt fall gör jag den här logotypen för en fantastisk grupp människor och deras färger är de två nedanför, så jag kommer att hålla fast vid dem. I det här steget kan du spela med vilken färg du vill ha.

Jag tror fortfarande att något saknas. Det är fortfarande inte superheltlogotypen som jag förutsåg, så jag lade till en ellips på bakgrunden och målade den med ljusare färg.

Steg 2

Nu för att lägga till några detaljer. Först lägger jag en vit kontur runt extrusion. Klicka på Objekt> Förskjutningsväg och skriv in 1 mm.

Kopiera den vita konturen genom att markera den och klicka på Redigera> Kopiera (Kontroll-C) och klistra in det på baksidan genom att klicka på Redigera> Klistra in bakåt (Kontroll-B) Jag kommer att måla min "skugga" med en färg mörkare än ellipsfärgen.

Steg 3

Nu lägger jag till några höjdpunkter. Klicka på Rektangelverktyg knapp på Verktyg paneleller träffa M, och rita några rektanglar och måla dem blå för att vara mer synliga. Jag kommer att placera mina tillsammans med extrusionsvinkeln. Skapa en Föreningsvägen från alla rektanglarna, vilket gör dem till en enda väg. Med alla blåa rektanglarna markerade klickar du på Skift-8 eller gå till Objekt> Sammansatt sökväg> Gör.

Välj extrusion och klicka på Objekt> Path> Offset-sökväg och skriv in -1 mm i dialogrutan.

Välj den genererade sökvägen och rektanglarna, och i Stigfinnare panelen lokaliserar Korsas knappen och klicka på den. Kopiera den genererade sökvägen genom att klicka på Redigera> Kopiera (Kontroll-C), och välj sedan strängsprutningen och klicka på Redigera> Klistra in framför (Kontroll-F).

Awesome Work, Team!

Jippie! Vår Team Awesome-logotyp är klar och glänsande! Grymt bra!

Denna handledning är avsedd att hjälpa dig att få en bättre förståelse av handbokstäver och vektor. Det låter komplicerat först, men ju mer du tränar desto lättare blir det. Jag hoppas att all information jag har gett är användbar för dig, och att du kan anpassa de tekniker och tips som visas här för dina egna projekt. Tack för att du tittade och var fantastisk!