Share
I denna handledning lär du dig att använda en kombination av SSR (Scale, Shear, Rotate) och Adobe Illustrator-guider för att skapa en isometrisk robot. Isometriska bilder är perfekta för diagram och spelprites. Så låt oss se hur man gör den här söta isometriska roboten ...
Öppna ett nytt Illustrator-dokument. Dokumentets storlek och upplösning är inte för viktig, så välj något du är bekväm med.
Innan vi börjar är det viktigt att definiera vad vi menar när vi säger att vi ska rita en isometrisk objekt.
Isometrisk perspektiv är ett sätt att rita ett 3D-objekt i 2D. Den används i tekniska ritningar, tecknade städer och 2D-spel som vill se 3D. Isometrisk perspektiv är att föredra över normalt perspektiv, eftersom alla objekt kommer att ha samma storlek, oavsett hur långt bortifrån tittaren de är.
Vi börjar med att skapa ett isometriskt nät för att fungera som våra guider. De tekniker jag visar dig i den här artikeln bygger på SSR-metoden, som står för skala, klippa, rotera. Förutom den här metoden kommer Illustrator-guider att komma till nytta senare när man utformar former i isometrisk perspektiv.
Skapa guiderna med den här snabba tipsen: Hur man skapar ett isometriskt nät på mindre än 2 minuter. Slå sedan på Smart Guides under Visa> Smart Guides.
Som en snabb uppdatering av SSR-metoden kommer vi att göra framsidan, sidan och toppen av en kub. Börja med att rita en fyrkant med hjälp av rektangelverktyget (M) och håll Shift medan du drar musen. Gör tre exemplar av torget, som blir de övre och två sidorna av en isometrisk kub.
Vi börjar med att göra toppen. Högerklicka på kuben och välj Transform> Skala och ange ett värde på 86.062% i fältet Non-Uniform> Vertical Input. Högerklicka därefter igen och välj Transformera> Skjuvning och ange en skjuvvinkel på 30 grader. För det sista steget, högerklicka och välj Transformera> Rotera och skriv in en vinkel på -30 grader.
Alternativt kan du använda transformeringsfönstret med samma procedur - ändra helt enkelt höjden (betecknad H) till 86,062%, sedan skjuva till 30 grader, och slutligen rotationen till -30 grader. Båda metoderna kommer att ge samma resultat.
För att göra kubens vänstra och högra sida kan vi följa samma procedur, med olika skjuv- och rotationsvinklar. Dessa värden sammanfattas i bilden nedan.
Med dessa tekniker under våra bälten kan vi fortsätta göra robottecken. Roboten jag ska göra i denna handledning är huvudpersonen i ett isometriskt spel som jag har arbetat med, Robotok.io.
Börja med att slå på det normala 2D-nätet genom att klicka på Visa> Visa nätet (Ctrl + "). Eftersom roboten är ganska rektangulär kan vi använda Rektangelverktyget (M) för att klämma ut de viktigaste funktionerna. Penverktyget (P) och direktvalverktyget (A) är också användbart och ger oss möjlighet att ge roboten lite karaktär.
Med hjälp av robotens framsida som referens kan vi rita sidan av roboten. Här har jag använt linjesegmentverktyget (\) för att lägga några blå linjer bakom bilden för att hjälpa till att rada upp delarna av robotens kropp. Du kan flytta raderna upp och ner till vilken del av ritningen du arbetar för närvarande. Att ha delarna uppförda på rätt sätt gör de senare stegen mycket enklare, när vi använder dessa åsikter för att göra roboten isometrisk.
Gör en kopia av sidovyn och ändra strokefärgen till grå. Nu kan vi rita armarna ovanpå sidovyn, vilket gör det lättare att se våra nya linjer. Vi kan också justera placeringen av våra blåa horisontella linjer för att hjälpa oss att ställa upp sidans bild på armen med framsidan.
Roboten behöver också en ryggsäck för att hålla alla sina saker, så låt oss rita det på sidovyn med samma metod.
Slutligen rita baksidan av roboten med hjälp av framsidan och sidan som en referens. Här har jag använt lättare linjer på baksidan av huvudet för att hjälpa dessa linjer att sticka ut från de andra, eftersom de visar huvudets volym.
Nu när vi har ritningarna på plats kan vi börja bygga 3D-roboten med vår isometriska SSR-metod och de guider vi gjort tidigare. Låt oss börja med att arbeta med bara huvudet och kroppen (lämna armarna och ryggsäcken för tillfället) av roboten för att konstruera en isometrisk framifrån.
Gör en kopia av robotens framsida, ta bort armarna och SSR är den till vänster sida (Skala: 86,062%, Skjuv: -30, Rotera: -30). Upprepa SSR-processen med baksidan av roboten, se till att ta bort armarna.
Nu gör vi samma sak med den (armlösa) roboten, men vi förvandlar den till höger (Skala: 86.062%, Skjuv: 30, Rotera: 30). Gör en kopia som vi kan använda för andra sidan roboten.
För att placera robotens båda sidor, välj hela sidan av roboten med hjälp av urvalsverktyget (V) och växla sedan till direktvalet (A).
Dra den övre vänstra ankarpunkten överlapp med motsvarande hörn på framsidan. När den smarta guiden säger ankare (i cyantext) släpp musknappen.
Gör samma sak med robotens andra sida. När robotens överkant har placerats, håll den markerad och tryck Ctrl + Shift + [för att flytta dessa former bakom de andra.
Justera baksidan av robotens huvud är lite svårare. Vid den här tiden borde vi stänga av nätet (Ctrl + ") och slå på våra isometriska guider (Ctrl +;). Välj hela roboten (V) och växla till Direct Selection Tool (A). Välj en av punkterna på den främre delen av robotens huvud och dra den över för att snäppa med guiden. Vi kan använda den här styrlinjen för att radera upp roboten med framsidan.
Välj baksidan (V) och växla till Direct Selection Tool (A). Dra roboten från en punkt på toppen av hans huvud till samma linje som vi justerade framsidan med. Dra nu det längs den här linjen tills baksidan är rakt upp med sidorna på robotens huvud.
Nu kan vi välja huvudpunkterna i sidovyn (se bild) med Direct Selection Tool (A), med Shift-klick för att få båda punkterna samtidigt. Dra dessa punkter för att matcha med baksidan av huvudet (igen, vänta tills ordet ankare visas i cyantext innan den släpps). När dessa punkter är på plats, behöver vi inte längre baksidan av roboten och kan radera den genom att välja alla former med urvalsverktyget (V) och trycka på Delete.
För att avsluta huvudets form kan vi använda pennverktyget (P) för att dra i toppen. Klicka på var och en av de 4 punkterna som utgör toppen av robotens huvud, varje gång du väntar på ordet ankare att framträda. Slutligen anslut den sista kanten. Tryck Ctrl + [några gånger för att flytta den här nya formen igen tills du kan se alla antennformer. Om du går för långt använder du Ctrl +] för att komma framåt igen.
Robotens antenn består av två delar: en kon och en sfär.
För att göra en isometrisk kon, börjar vi med två cirklar omlagda (steg a), med en större än den andra, och vi SSR att de är plana som kubens topp (steg b). Håll skift, flytta den mindre cirkeln uppåt vertikalt tills formen är den höjd du vill ha (steg c). Med hjälp av Add Anchor Point Tool (+), lägg till punkter på sidorna av bottencirkeln som visas (steg d). Använd sedan Direktmarkeringsverktyget (A) för att välja insidan av båda cirklarna och radera dem med Delete-tangenten (steg e). Byt tillbaka till pennverktyget (P) och anslut de återstående punkterna (steg f) för att göra din kon (steg g).
Därefter kan vi göra isometrisk sfär för antennens topp. Rita en cirkel, och det är det! En isometrisk sfär är helt enkelt en vanlig cirkel (steg h). Placera antennen ovanpå robotens huvud.
Därefter kan vi placera roboten på samma sätt som vi brukade göra huvudet. Ta bort halsen (eftersom vi inte kan se nacken från den här bilden) och den bortre sidan av kroppen som inte längre är synlig. Detta kommer att hjälpa till att städa upp vår syn på roboten.
Använd markeringsverktyget (V) för att välja robotens närliggande sida (ben och kropp). Byt till Direct Selection Tool (A) och dra sidan av kroppen med ett hörn för att stega upp mot motsvarande hörn på framsidan.
Gör nu en kopia av sidan (Ctrl + C, Ctrl + V) och dra den kopian till robotens överkant med samma metod för att justera punkterna (se vänster sida av bilden).
För att dra i toppen av kroppen, byt till Skärmvisning med hjälp av Ctrl + Y och använd pennverktyget (P) för att ansluta de fyra punkterna på toppen av kroppen (på samma sätt som vi gjorde toppen av huvudet). Byt vyn igen genom att slå Ctrl + Y igen.
Vi ska nu fokusera på benen. Benets sidovy är redan på plats, så vi kan använda den som en guide för framsidan. Använd Direct Selection Tool (A) för att välja punkter i par, vi kan flytta formerna så att de stämmer överens med sidorna. Använd Skift-klicka för att välja två punkter samtidigt, och dra dem för att rada upp med sidan av benet. De smarta guiderna hjälper dig att justera punkterna exakt.
När du är klar ett ben, använd markeringsverktyget (V) för att välja alla former och skapa en kopia (Ctrl + C, Ctrl + V). Placera den nya kopian som det andra benet på roboten. Håll nu Ctrl + Shift + [för att flytta detta ben till det lägsta lagret så att det ligger bakom roboten. Ta bort de oanvända formerna för att städa upp bilden.
Vid denna tidpunkt borde roboten vara fullständig, och vi kan gå vidare till armarna.
Först, gör en kopia av roboten och gruppera huvudet och kroppen separat. Ändra strokefärgen till grå. Isolera de olika armformerna och SSR dem i fram- och sidovyer.
Armen består av fyra delar: axeln, överarm, underarm och klo.
Vi börjar med att arbeta på underarmen, eftersom det är det enklaste att manipulera. Rikta fram och framsidan av armarna uppåt med den gråa kroppen och varandra. Justera punkterna på underarmens sida för att ställa upp med framsidan, se till att du väljer punkterna i par för att behålla perspektivet.
Använd pennverktyget (P) för att fylla i resten av underarmen. För detta steg bidrar det till att göra kopior av former att använda som guider (som vi gjorde med huvud och kropp).
Den svåra delen av armarna är cylindern som förbinder axeln mot robotens underarm. För att göra denna form börjar vi med att rita en cirkel och göra en kopia av den (Ctrl + C, Ctrl + V). Nu är SSR en cirkel som passar på sidan av roboten och SSR den andra att passa på underarmen. Placera dessa cirklar på axeln och underdelen av undermen som visas.
Använd pennverktyget (P) för att skapa en ny form som ser ut att den skulle ansluta de två cirklarna (som visat). Välj de två cirklarna och formen som förbinder dem med urvalsverktyget (V) och klicka på sökfältet> Lägg till i formområde och expandera sedan för att slå dem samman i en form.
Använd Ctrl + [och Ctrl +] för att korrekt placera denna form bakom åsen på underarmen.
Att göra den ihåliga cylindern för axeln kräver att vi delar den i två delar: delen framför armen och delen bakom den.
Börja med att göra en kopia av axelcirkeln på sidan av robotens kropp (Ctrl + C, Ctrl + F). Använd guiderna (tryck Ctrl +; för att slå på dem), dra den andra cirkeln ut lite för att ge axelcylindern ett djup (se diagram nedan).
Använd Add Anchor Point Tool (+) för att lägga till punkter på kanterna av de två cirklarna (se diagram, lägg till punkter i de röda cirklarna). Gör nu en kopia av formerna. En kopia av kommer att användas för att göra framkanten av axeln och den andra att göra ryggen.
Använd Direct Selection Tool (A) för att ta bort de onödiga punkterna på båda kopiorna för att sluta med två linjer i varje enskilt fall. Använd pennverktyget (P) för att ansluta punkterna igen. Montera bitarna ihop, och där har du det: en framsida och en baksida för din axel.
Nu kan vi göra robotens klo med hjälp av en teknik som liknar hur vi gjorde axeln.
Ta SSR'd kloformarna och rikta upp dem på styrningarna. När du formar upp former, välj helt enkelt någon punkt i en form, rikta upp den med en styrlinje och se till att placera motsvarande punkt på det andra objektet på samma plats. Här har jag valt torgets övre vänstra hörn på varje klo som referenspunkt och som du kan se är de båda positionerade på samma styrlinje.
Gör en kopia av klovens framsida och använd sidan som en breddreferens (som visas nedan) för att placera den här kopian som baksidan av objektet.
När vi har använt klovens sidovy för att bestämma bredden är formen inte längre nödvändig och vi kan ta bort den.
Vi börjar fylla i klogen genom att göra den gröna formen i objektet nedan. Gör en kopia av klovens två halvor och radera alla punkter som inte kommer upp på sidan av kloen med hjälp av Direct Selection Tool (A) och Delete-tangenten. Använd sedan Penverktyget (P) för att ansluta de två halvorna. Nu kan vi placera kuggens sida tillbaka i vårt objekt.
Med samma teknik kan vi fylla i insidan av kloen (lila), och för fullständighet kan vi också göra den undre kanten (blå).
Med den främre armen färdig kan vi använda samma metoder för att konstruera robotens andra arm.
Majoriteten av denna arm kan kopieras direkt från den första armen och tweaked med Direct Selection Tool. Robots hand, till exempel, är helt identisk så att vi inte behöver repetera den. Minns att isometriska föremål är lika stora, oavsett hur långt de är från betraktaren, till skillnad från sant perspektiv, så kommer den långa armens klo att vara lika stor som den närmaste.
Det sista vi ska lägga till roboten är hans ryggsäck. Jag gillar att göra en kopia av allt hittills, gruppera varje arm självständigt (Ctrl + G) och justera strokefärgen för att vara lättare. På det sättet kan vi behålla varje kroppsdel separat för framtida ändringar (som att göra baksidan, eller om vi ville animera roboten) och det hjälper dig att se vad du jobbar med just nu.
Använd SSR-metoden på sidan av ryggsäcken som vi ritade tidigare, och placera den sedan på sidan av roboten. Eftersom ryggsäcken är krökt, behöver den inte mycket arbete för att passa in i isometriskt perspektiv. Om det inte ser rätt ut, använd Direct Selection Tool (A) för att justera de enskilda punkterna.
Använd pennverktyget (P) för att rita framstycket över bältets axel.
Här har jag flyttat huvud och framarm ut ur vägen så att vi lätt kan se var ryggsäcken ska gå. När ryggsäcken är ritad, kan vi lägga tillbaka dessa former.
Och där är han! För att förena honom en bit, välj hela roboten och ändra strokebredden till ett värde. I det här fallet valde jag 1 poäng, men det beror på hur stor du har ritat din sprite.
Denna robot är nu klar för några färger!
Det första steget är att ändra strokefärgen till något mindre hård än svart. Här har jag valt mörkgrå, men beroende på din sprite kanske du vill blanda i någon färg.
Därefter kan vi fylla i några basfärger. Använd markeringsverktyget (V) för att välja hela roboten (förutom ögonen) och ändra fyllfärgen till grå.
Välj ögon, mun, knapp och skärm och ändra dessa för att få en fyllnadsfärg av vit. Färg ryggsäcken orange och gör knappen röd.
Nästa steg är att välja riktning för ljuskällan. Jag har bestämt mig för att få den att komma från vänster, så vänd mot roboten.
Skuggningen härifrån kan vara så detaljerad eller så enkel som du vill. Jag har valt att hålla skuggningen relativt enkel och ignorera det faktum att vissa föremål kan kasta skuggor på andra. Detta gör det lättare att använda spritet i animationer senare.
Börja med att välja alla former som kommer att vara i skugga och ändra fyllfärgen till en mörkare grå. Välj sedan alla former som kommer direkt i ljuset och fyll dem med en ljusare grå. För de plana formerna är det enkelt, men skuggorna på krökta ytor kräver mer arbete.
För att illustrera hur vi kan skugga de krökta ytorna, överväga ryggen.
Kopiera den här formen och klistra in med Ctrl + C, Ctrl + F. Ta av med stroke och sätt fyllfärgen till en mörk orange.
Nu kan vi använda verktyget Delete Anchor Point (-) för att trimma ner den här formen, och sedan Direct Selection Tool (A) för att justera det i form av en skugga. För att fixa stroke gör vi en annan kopia av ryggsäckskroppen och klistra in den framför. Ta bort fyllningen på den här nya formen och flytta den framåt (Ctrl +]) för att lägga den framför skuggformen.
Använd den här metoden för att skapa skuggor för resten av ryggsäcken, liksom för de andra krökta ytorna som cylindrarna i armarna och antennen.
För att ge roboten lite mer karaktär kan vi lägga till några höjdpunkter i hans leder och fötter.
Här har jag gjort handlederna och fötterna en mörkare grå, och armbågarna och fötterna ljusare. Jag har också gjort ögonen lite mörkare för att få dem att sticka ut. Tänk på ljuskällan när du lägger till fler färger, eftersom du behöver hålla skuggningen konsekvent.
För att få roboten att stå ut lite mer kan vi ge honom en något tjockare kontur.
Välj hela roboten, Kopiera och klistra in framför (Ctrl + C, Ctrl + F). Klicka på Pathfinder> Add to Shape Area och expandera sedan för att få en enda kombinerad form. Ändra fyllfärgen till vit så att vi tydligt kan få den nya formen.
Denna form kommer sannolikt att vara lite rörig (orsakad av det faktum att vissa former inte är perfekt anpassade) så att vi kan använda verktyget för borttagning av ankare (-) för att rengöra det lite genom att ta bort de fula punkterna. Fokusera på att de yttre kanterna är släta, eftersom det blir allt vi kan se när vi är klara.
Använd nu Stroke-fönstret för att ändra hörntypen till mittalternativet, "Round Join". Detta kommer att göra hörnen smidiga. Öka strokebredden på denna form till 3pt.
Välj skissformen och tryck Ctrl + Shift + [för att skicka denna form till baksidan.
Här är en bild av de två robotarna sida vid sida: en med konturen och en utan. Skissen förenar robotens form och hjälper honom att sticka ut mot en mer komplex bakgrund.
Låt oss ge roboten något att stå på. Eftersom han kommer att användas på en isometrisk spelbräda, verkar en spelplatta som ett bra val. Gör en torg och sedan SSR att den är platt som toppen av en kub. Placera kakel under roboten med Ctrl + Shift + [för att flytta den till mycket baksida.
I sista steget ger vi roboten en enkel skugga. Gör en cirkel och SSR att den är platt som plattan. Ändra fyllningsfärgen till mörkgrå och ställ sedan upp opacitet till ca 15%. Placera skuggan under allt utom plattan (Ctrl + Shift + [, sedan Ctrl +] för att flytta den upp en nivå).
Och där har vi det: en bedårande isometrisk robot. Använd dessa tekniker för att skapa isometriska sprites för spel, för tekniska diagram eller för att lägga till en 3D-punch till dina mönster.
Accentsconagua