Retro Ritning och Skuggning med Adobe Illustrator

Med att illustrera på datorer är det alltid frestande att använda alla djärva och ljusa färger som visas i standardfärgerna. Ibland kommer färre färger och lite mjukare nyanser att ge ditt arbete en viss värme och charm som kommer att låta folk undra om det skapades på en dator alls!

Du kan hitta källfilerna för det här projektet i katalogen märkt 'source' som kom i filerna som du hämtade. Du kanske vill titta igenom dem kort innan vi börjar.


Introduktion

Innan vi dyker in i färg, låt oss ta en titt på hur jag sammanfogar denna retrostil illustration. Jag har inkluderat alla genvägar jag tog och pekar på att leta efter när du väljer och placerar din färg.

Illustrationen är ett humoristiskt tag på datorauktioner. Fokus ligger på lampan precis till höger om centrum. Jag har en grupp datorbudgivare till vänster och auktionsföraren till höger. De människor som kommer ut från datorerna verkar vara de mest komplicerade elementen, vi arbetar med dem först. Jag gillar att göra de hårda grejer först, eftersom jobbet alltid verkar lättare när det är klart!

Jag har utarbetat en skiss för att följa, den är väldigt lös och är bara en guide för positioner etc. Efter att jag har skannat det i datorn placerar jag det på ett lager som heter "TRACE" och låser skiktet så jag don ' Jag går oavsiktligt och knyter saker senare.



Steg 1: Old Skool Reference

Jag tittade upp några referenser till min gamla skoldator och tyckte att den här från 1970-talet var en bra start. Jag gillar det vinklade inbyggda tangentbordet och det där, okej, så liten rundad bildskärm! Denna illustration kommer att bli en nyfiken blandning av 50-talet, 70-talet och dagens kultur!



Steg 2: Linje Tips

Rita ut datorns form med svartvitt till att börja med. Jag trodde att luftventilerna på bilden såg coola så jag skulle använda raderna för lite dekoration på min sida.

Det snabbaste sättet att köra snygga linjer uppe på sidan av en panel [1] är att kopiera den översta raden och längst ned längst till raden (endast) och använda BLEND TOOL (B) från verktygsfältet och för distansanvändning Specificerade steg 6. Skapa en rad rader som är parallella med varandra. Expandera menyn Val> Objekt> Expand. Nästa kopiera och klistra in en kopia av hela sidopanelen och flytta dina linjer nedanför så att du kan använda de två elementen för att göra en mask.

Jag använde samma process för att göra knapparna [2]. Genom att använda specificerade steg mellan två objekt, håller det verkligen avståndet rent och jämnt. En sista bit av dekoration på datorns översta sida är en krökt linje [3]. Det snabbaste sättet att göra det är att rita en oval med en stroke och använda en kopia av datorns toppform, gör en annan mask för att förlora de oönskade delarna.



Steg 3: Dumma ner färgen

Du vet att vi ska kopiera och klistra in dessa datorer istället för att rita dem alla igen rätt! Vi kommer först att släppa lite färg på datorn så vi behöver inte lita dem fem gånger ner på spåret. Eftersom bakgrunden är mjuk och svamlig, låt oss ge datorerna starka, plana färger så att de kontrasterar snyggt mot varandra.

Jag använde varm grå, turkos med cyan linjer, jag vet! låter hemskt när du beskriver det för någon men visuellt ser det ut, ibland är det värt att notera färgkombinationer som fungerar, du vet aldrig när du behöver dem!

Jag föll i några udda mitttonfärger på knapparna som jag ville spela ner dem och få dem att störa människorna. Jag försöker ofta och utarbetar vad jag vill att folk ska titta på i en illustration och försöka tona ner allt som kan vara en visuell distraktion.

Obs! Den svarta på sidan är lika grå som toppen men med den svarta reglaget tryckt hela vägen till 100% på CMYK Color Palette håller den djup och rik.



Steg 4: Alla de unga dudesna

Jag börjar med budgivaren på baksidan, huvudet är bara en oval med en rå form för hår och en grundläggande triangel för en näsa. Han ser ganska blankt ut [4] först men med ett par bra placerade blandningar borde vi kunna smarta honom upp. Första är att ge honom lite djup genom att lägga till lite skugga.

Jag hittar en liten skugga bakom örat och en under näsan ger verkligen ett ansikte ut. Att också lägga till en mörkare hud och göra den till en gradient kommer också att göra huden till liv. Graden är mycket subtil och blir bara lite mörkare till ena änden när den används. I det här fallet blir det lite mörkare upp till pannan, lite mörkare på örat och detsamma på nosens bro.

Dräkten är grön bara för att jag trodde att blå eller grå skulle gå vilse mot datorn. Lägg märke till hur jag lagt en ganska mörk gradient längst ner i hans kostym? Det är för att ge intrycket att han verkligen står inne i dataskärmen och hans nedre hälft går in i skuggan.

För att hjälpa killen i tv: n, ta en kopia av skärmen och förläng det övre R / H-hörnet för att täcka var hans huvud och arm kan gå [5]. Använd denna form igen som en mask och skörda kroppen. Se hur dubbla former, klistra in och maska ​​är ett bra sätt att minska din arbetstid. Du kan dela formerna och pryda dem snyggt, etc, men om de inte skriver ut, varför stör! Så sätt den maskerade mannen över datorskärmen och han ska se ut som om han verkligen står där inne!



Steg 5: Variationer på ett tema

Nu har vi en man och en dator alla färgade upp. Låt oss kopiera honom tre gånger och göra små förändringar i de nya versionerna. Det tar bara ett par tweaks för att ge en ny känsla till en befintlig ritning. Killen som är i mitten-tillbaka, [6] låt oss vrida armen framåt lite och glida också hans ögonboll framåt till ... kanske ändra den läppfärgen till vitt och förläng den nedre bågen ner för att göra ett leende. Plötsligt har vi en budgivare som är upphetsad och desperat att göra ett bud.

På samma sätt, med de andra killarna, små förändringar men märkbar! Jag gjorde dem större för att hjälpa till med perspektivet och ändrade munnen för att vara ett smirk och halvt leende.

Det är bara en liten punkt men jag gjorde knapparna mångfärgade på datorerna och blandade mönstren på var och en. Jag vet inte varför jag gjorde det exakt? Men jag kan säga att det kändes rätt då.


Samma hand om kvinnan. Rita en version, duplicera och göra några små förändringar. I detta fall var det hårfärg och ansiktsform. För att få höger arm [7] för att vara helt utanför skärmen. Jag klistrade in det framför allt för att lägga det på toppen av stapeln (se till att armen inte sträckte sig in i krageområdet och blockerade delar ut)

Dollar tecknet BTW är bara text skalad horisontellt 80% med skalverktyget (S), och snedställs något vertikalt med skärverktyget (W) och roteras sedan några grader. Ofta med dessa barn av saker kan du justera dem manuellt tills det verkar sitta visuellt med det du försöker uppnå, behöver inte vara raketvetenskap.


Steg 6: Illuminerande Quirky Shading

Lampan är huvudfokus i bilden, men jag vill hålla den lutad och inte överarbetad som med datorerna. När jag försöker förmedla tanken på något något avrundat, kan lite ljus och nyanser komma till nytta!


Jag fann ju mer oregelbundna formerna och quirky skuggningsvinklarna, desto mer intressant blev illustrationen.

Huvudhöjdpunkten på auktionslampan var en blandning med Blend Tool (B) som gick mellan en rosa och röd oval. Också lite ljusskuggning [8] var en vignett mellan en röd och mörkbrun med hjälp av Gradient Tool (G). Jag ville också kasta en skugga på lampans hals [9] och fann det snabbaste sättet att göra det var så här:

  • Rita ungefär en oval form bakom vasen.
  • Välj vashals och kopia, medan den fortfarande är vald slå in på framsidan (som håller den på sig själv men inte ovanpå den gula lampans skugga).
  • Skift sedan Välj den ovala formen - så du har dem båda markerade.
  • Välj nu Intersect från din Pathfinder-palett

Detta kommer att lämna dig med din skuggform, en liten gradient från rött till brunt ger det en fin skugga från vänster till höger.

Om du inte har din Pathfinder-palett (och det finns ingen anledning till varför du inte skulle! Det är ett användbart verktyg). Det finns under Meny> Fönster> Pathfinder (Shift + Command + F9).

För att ge lampan en känsla av att vara en elektrisk föremål, gav jag den en plugg [10] och gjorde flexen a 2pt slag med en rusa av 2 och a gap av 2 i ljusbrun. Jag klistrade en kopia av flexen bakom sig själv i en mörkbrun för att ge en fin kontrast.


Steg 7: Gör en folkmassa

Använd en annan kopia av en av de män som vi ritade tidigare vänd honom vertikalt med Reflect Tool (O) och stå honom bakom en podium. Pallen använder samma färger som datorn utan raderna på sidan. För att göra den nya auktionsföraren en lite annorlunda än den vanliga Joe gör budgivningen gav jag honom några fina runda glasögon och en slips (snygg kille!). Samma skuggningsteknik, låg på sin jacka, fungerar för podiet, precis som det gjorde för insidan av TV-skärmen.


Nej, vi har alla våra människor och det är dags att börja massera dem! För att undvika val av olyckor är det bäst att kopiera / klistra in framför och grupp OBJEC / GROUP (G) varje auktionsbudgivare så att vi kan flytta folket och datorerna ihop tillsammans med hjälp av SELECTION TOOL (V)


Steg 8: Gå inte nötter!

Nu när du har gjort allt svårt att skapa lite olika män och två kvinnor, kan det vara frestande att kopiera dem alla för att göra en orc army som i "Ringenes Herre" och verkligen göra en show av allt ditt arbete. Men för att vara ärlig, allt som gör det är att späda ut vad du har gjort, inte förbättra det. Varför använder sexhundra människor att förmedla en idé när sex kommer att göra. Åtminstone med sex kan folk få se några av de finare detaljerna du har lagt in.



Steg 9: Sprid åtgärden runt

När man ordnar folket finns det inga hårda och snabba regler. De saker jag ser i allmänhet ut är:

  • Spridning av intresse runt - i detta fall är kvinnorna blandade med männen som ger en naiv blandad gruppkänsla.
  • Att säkerställa att intressanta delar inte är dolda - så huvudet blockerar inte andra huvuden bakom dem, och auktionsfladderna är tydligt synliga mellan människor och datorer.


Steg 10: Bakgrund

Om vi ​​släpper en platt blå bakgrund bakom illustrationen ser den lite tråkig ut, även om vi lägger till en stjärnbrista bakom lampan.


Vad skulle vara bra att ge det som cyberspace känner skulle vara att datorerna flyter i mitten av luften och kanske några mystiska vetenskapliga stjärnor spridda runt och lite mjuk skuggning. Låt oss börja med den bakgrunden. I stället för att införa en ny färg kan det vara trevligt att presentera en mjukare nyans av en färg som redan finns i illustrationen.

Jag tycker att en mjukare nyans av det varma grået ovanpå datorerna skulle se bra ut. Och för att föra in fokusen till mitten, låt oss lägga en gradient från datorns bästa grå till vår nya bakgrundsfärg. Formerna behöver bara vara grova trianglar, eftersom de kommer att blöda bort från illustrationens kant.


För att få fram några av elementen i illustrationen, som gaveln och några budspadrar, kommer en cirkulär gradient från bakgrundsfärgen till en vitvit förhoppningsvis fånga tittarnas ögon! Jag sätter också en bakom lampstjärningsbytet för att mildra det lite. Den cirkulära gradienten av killen på baksidan går faktiskt under stjärngradsgradienten. Jag kunde fixa detta genom att dra tillbaka cirklarna och använda vissa transparensalternativ, men jag känner mig som en liten punkt, jag släpper den ... den här gången!


Så, nästan där nu! Jag tror att det är väldigt uppenbara (snarare än de här vita vita halonerna), och det kommer att låta folk veta att dessa människor verkligen flyter där ute och några spikiga stjärnor av 2 pt linjer kommer verkligen att lägga till blandningen. Försök att göra stjärnorna lite av balans, inte för symmetriska och använd några av de färger som redan finns i illustrationen.



Slutsats

Lätt, eh! Håll det lutat, fortsätt det. Har några välvalda färger och återanvänd dem närhelst du kan, och använd så ofta som möjligt Kopiera och Klistra in. Skål.