Making of Robot Earth 3009 Typografisk Illustration

Vad du ska skapa
Denna handledning publicerades ursprungligen i oktober 2009 som en Tuts + Premium handledning. Det är nu tillgängligt gratis att visa. Även om denna handledning inte använder den senaste versionen av Adobe Illustrator, är dess tekniker och process fortfarande relevanta. 

Under denna handledning visar jag dig processen för att skapa en av mina illustrerade typskyltar. Jag älskar att arbeta skriver in i alla mina illustrationer för balans och rytm det ger till en layout, men jag älskar särskilt att skapa bilder av typ själv ... den grafiska formgivaren inuti mig tvingar mig att göra det!

För mer otroliga resurser, kolla in vårt fantastiska urval av Vector Robots tillgängliga via GraphicRiver. Eller få hjälp av en designprofessor från Envato Studio för anpassad robotdesign.

1. Hur man förbereder din skiss och dokument

Steg 1

Jag har en passion för robotar, sci-fi och typografi, så vilken bättre chans skulle jag behöva skapa en affisch som sammanfogar alla tre? Efter att ha samlat några robotreferenser och sökande genom några kommer Will Eisner frågor om "The Spirit" (se honom upp ... en komisk konstnär som var en mästare i illustrerad typ) började jag med att få en väldigt grov layout för min fauxfilmaffisch ned på papper. 

Min vision var att skapa en stor robot (som också fungerar som typ för filmens titel) roaming hotande genom en krigstornad stad.

Steg 2

Med den ursprungliga idén ur min hjärna och in i min skissbok flyttade jag till Adobe Illustrator. Nästa uppgift var att ställa in mitt dokument. Jag skapade en 11 "med 14" tavlor och, när de öppnades, optimerade min arbetsyta genom att öppna och organisera ofta använda paneler och verktygsfält. Min måste ha paneler inkluderar Karaktär, Stigfinnare, Justera, Skikten, rutor~~POS=HEADCOMP, Färg, Genomskinlighet, Lutning, och Stroke.

2. Hur man lägger till de inledande elementen

Steg 1

Jag brukar använda många lager i mina illustrationer, och det här var inget undantag. Det första lagret som jag alltid skapar är en vit "ram". Jag ställer den som mitt högsta lager, och det fungerar som en mask för hela konstverket under det. På det sättet kan jag utöka bilder på lager utöver tavlan, men inte oroa dig för att se dem.

Jag började med en rektangel storleken på tavlan och skapade sedan en större som jag lade bakom den, valde dem båda och använde Minus Front alternativet i Stigfinnare panel. Jag låste detta lager och lämnade det på så sätt för resten av projektet.

Steg 2

Efter att ha lagt till några nya lager i Skikten panelen började jag blanda några anpassade färger. Jag kastar alltid ut alla generiska Illustrator-färger och blandar mitt eget enkla, begränsade schema i CMYK

Det är också mycket användbart när du blandar dina egna färger i Färg panel, för att ställa in dem som "Spot Color". Detta gör att du kan dubbelklicka den färgen i rutor~~POS=HEADCOMP panelen när som helst, justera CMYK mixa, och har de ändringar som automatiskt tillämpas på eventuella exempel på den färgen i ditt dokument. 

Jag föreställde en varm palett för den här illustrationen, och jag skapade en röd, en brun och några tenner för att få mig igång.

Steg 3

Efter att ha lagt till en fast rektangel med färg i bakgrundsskiktet, släppte jag en skanning av skissen i skanningsskiktet (Arkiv> Plats), ändra storlek så att den passar sidan och ställ in Blandningsläge till Multiplicera använda Genomskinlighet panel. Detta släpper all den vita ut ur en placerad bild och låter dig arbeta på lager under den ser igenom Det.

Jag lade också till ett andra ramskikt som skulle fungera som ett förgrundselement som roboten skulle gå igenom (du kommer senare se att jag övergav detta element för slutstycket).

3. Hur man lägger till texten

Steg 1

Därefter började jag grova ut robotens kropp. Börja med rak typ designade jag en platt typkomposition som så småningom skulle bli robotens torso. Notera namnet ändrat från "Robot Earth 57" till "Robot Earth 3009." Jag trodde att 3009 skulle fungera som en bättre grund för robothöft.

Steg 2

Jag slog den platta typkroppen ovanpå den grova skanningen och med den fortfarande valda, valde jag Gratis omvandlingsverktyg.

Steg 3

Detta verktyg är ett utmärkt komplement till Illustrator, om det är lite knepigt att använda. Det gör att du kan skala ett objekt i perspektiv, vilket är precis vad läkaren beställt för den här bilden. Jag började med att flytta markören över en av de öppna vita rutorna i hörnet av den valda gruppen och flyttade den någonsin så lite tills de vita rutorna försvann. Medan du fortfarande håller musen nedtryckt, tryckte jag sedan Kommando-Alt-Shift.

Detta tvingar konsten att skjuta tillbaka i rymden med perspektiv. Att släppa någon av den kombinationen av tangenttryckningar, samtidigt som du håller markeringen med musen, släpper ut en begränsning, så att du kan få några ganska sofistikerade effekter. Mitt bästa råd är att experimentera liberalt för att få tag på det.

Steg 4

Med det önskade perspektivet uppnådde jag konsten och stängde av skiktet med den skannade skissen i den.

Steg 5

Slutligen bröt jag typen i separata lager: "robot", "jord", "3009" och de två axelblocken. Detta möjliggjorde större kontroll vid arbete på varje sektion.

4. Hur man lägger djup i texten

Steg 1

Aldrig att lämna de roliga delarna förrän jag hoppade in och började arbeta på robothuvudet. Jag ville att det skulle få effekten av en serie maskiner täckta av en genomskinlig glaskupol. Från och med halvpillerkapselformen kopierade jag (Kommando-C) och klistras framåt (Kommando-F) och strök kopian. Sedan konverterade jag den vägen till konturerna (Objekt> Path> Outline Stroke).

Därefter kopierade jag den ursprungliga kupolformen och klistrade in den för att se till att den var perfekt uppradad. Med den fortfarande valda, valde jag den nya skisserade stroke, gick in i Stigfinnare panel och tryckt Korsas. Jag var kvar med en form som var perfekt konturerad mot kupolformen som skulle fungera som en tänd kant för den klara glasdomen. Därefter lade jag till hjärnor av roboten genom att lägga till enkla former tillsammans.

Jag skickade dem bakom kupolformen, som jag satte mig på Multiplicera i Genomskinlighet panel. Slutligen kopierade jag den ursprungliga kupolformen och klistrade den hela vägen bak och satt färgen till vit. Detta gjorde det möjligt för mig att placera huvudaggregatet på vilken färgbakgrund som helst utan att bakgrunden visade genom det multiplicerade glasstycket.

Steg 2

När perspektivet var klart började jag lägga till dimensionen till var och en av karaktärerna i kroppstypen. Jag skapade en vinklad ruta som fungerade som en sida av bokstäverna och sedan kopierades, upprepades och justerade det om och om tills bokstäverna tycktes ha volym.

För något mer visuellt intresse slog jag ordet "jorden" bakåt lite för att skapa illusionen att det var ett kortare djup än ordet "robot". För att städa upp min dimensionsarbete skapade jag tillfälliga guider med låsta vita slag (som jag senare kastade bort). Dessa säkerställde att dimensioneringslådans perspektiv förblev i överensstämmelse med de ursprungliga bokstäverna.

Med dimensionen färdig släppte jag i huvudet som jag skapade tidigare för att se hur min robot formades.

5. Hur man lägger till extremiteter och slutgiltig spårning

Steg 1

Nästa upp på agendan var att skapa några ben för roboten. Se alltid till att perspektivet visuellt matchade resten av kroppen, gjorde jag med avsikt hans underben av stora, platta ytor för att rymma de bitar av typ som jag hade tänkt för dem.

Steg 2

Inte nöjd med utseendet på min hårda kant, jag trodde att roboten skulle se väldigt snyggare ut genom dammsugor skapad av den förstörelse han just hade påfört staden. 

Jag tryckte en liten kopia av filen och lade ett stycke spårpapper över den bilden. Sedan tog jag mina moln på spårpapperet, skannade dem in och tappade bilden i ett skannelag bakom roboten. På så sätt hade jag en fin mall för att göra den slutliga vektorkonsten från.

Steg 3

Jag var äntligen redo att börja lägga till i all min stödjande typ. Jag började genom att välja och skjuta robotens vänstra axelblock så att det verkade svänga i mitten.

Steg 4

Därefter skapade jag "Är detta slutet för mänskligheten?" skriv locket som en platt grafik och använd den Skev och Skalverktyg, mappade den på axelns sida.

Steg 5

Slutligen gjorde jag detsamma för skådespelare, producent och direktörskrediter på benet, och tillade en fiktiv studio cred över höger axel. Du kan också se att jag började göra dammskysten som jag pratade om i föregående steg.

Steg 6

Robots klo började som en enkel cirkelform med mitten utstansad (Pathfinder> Minus Front). Jag kopierade sedan formen, klistrade den i ryggen och färgade den nya formen en ljusare grön. 

Därefter skapade jag en koncentrisk cirkel och lade till filmens premierdatum och "Destroying Theaters" med Skriv på ett sökverktyg. Slutligen ritade jag i anslutningsdimensionen mellan de två cirklarna, tillagde lite detalj till handleden och skedde typen med Skala och Skew Tools tills jag fick önskad effekt.

Steg 7

Min nästa uppgift var att skapa en ribbad metallisk effekt på robotens armar. Jag kunde ha skapat en sektion och kopierat och upprepade det längs armens längd manuellt, men för att få jämnt avstånd bara genom syn skulle det ta en evighet. Lyckligtvis finns det ett mycket bättre sätt.

Jag började med att skapa en sektion av den rörformiga armen, som bestod av delaren för varje sektion, skuggorna och höjdpunkterna. Sedan slog jag den grupperade sektionen in i borstar paletten och vald Mönsterborste från de tillgängliga alternativen i dialogrutan som dyker upp. Jag slog då ok i följande penseldialogruta.

Steg 8

Därefter gjorde jag en Kopia av den gröna stroke som fungerar som basen av armen och klistrade på den framför (den visas här till vänster om den ursprungliga stroke för handledning). Jag applicerade den nyligen gjorda mönstret borsten till den stroke och ... voila! Slangavsnittet som jag skapade upprepas längs banans längd. Vissa experiment kan vara nödvändiga för att uppnå rätt effekt, men Mönsterborstar är ett bra sätt att få snygga, jämnt fördelade effekter längs en stig.

Steg 9

In i hemsträckan blev jag uppmärksam på stadsbilden i bakgrunden. Jag hade skapat byggnader för en tidigare illustration (återvinningsarbeten!), Men de blev inte förstörda, eftersom jag menade att de skulle visas här.

En enkel mask med en skrynklig kant över originalbyggnaden uppnådde det smulande utseendet som jag tänkte på, och tillägget av ett ojämnt kantmönster bakom byggnaden stod i för utsatta I-balkar. Slutligen sugde en lutning till varje byggnad upp just-förstörde-by-a-100-fot-robot ser ut att jag gick för.

Steg 10

Med alla element i bilden skapades, var jag bara tvungen att lägga till lite djup genom att använda multipla skuggor. För varje yta som jag trodde skulle kunna använda en skugga, jag helt enkelt kopierade och Pastas fram, skapa den nya kopian som en linjär gradient i Lutning panel, sätt den till Multiplicera, och syftar Skuggans riktning med Övertoningsverktyg.

Jag fortsatte med att lägga till många fler multiplicerade former i hela stycket för ett enhetligt skuggat utseende.

Steg 11

För en sista hotande beröring lade jag till ögonbalkar som kom ut ur robotens ögon. Vita former satt till en Opacitet av 50% uppnådde denna effekt.

Fantastiskt jobb! Du är nu klar!

Illustrerad typografi är en passion för mig, så jag hoppas att du har haft min turné på en av de skarpaste typbaserade robotmönster som du någonsin har lagt på dig! Den slutliga bilden är nedan. Du kan se den stora versionen här.

Roliga vektorrobotar från GraphicRiver

Kan inte få tillräckligt med vektorrobotar? Kolla in vårt fantastiska urval av Vector Robots från GraphicRiver för mer otroliga designtillgångar. Njut av en av våra favoriter listade nedan!

Vector Flat Modern Robots

Denna färgglada uppsättning vektorrobotar är redo att ta över världen! Komplett med moderna platta mönster och underbara färgscheman, dessa robotar är säker på att charma strumporna av någon inkräktare. Skapa ett Envato-konto idag för att ladda ner de här hjälpsamma resurserna.