Hur man skapar en gula ubåt ikon med Gradient Meshes

Medan rymdskepp, raketer och ufoer är allt raseri i ikonvärlden i dag har ubåtarna oupplösligt försummat. Låt oss korrigera denna situation omedelbart genom att rita en rolig ubåt med hjälp av gradientmaskor, mönsterborstar, opacitetsmaskar och blandningsmetoder.

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


Steg 1

Under hela handledningen kommer vi att använda gradientmask för att uppnå vackra färgvariationer över ubåtens ytor. Gradient nät är extremt kraftfulla men också en av Illustrators mest förvirrande verktyg. Det mest intuitiva sättet att närma sig dem är att skapa den slutliga formen och omvandla den till ett nät.

Tyvärr, om inte formen är ganska enkel eller symmetrisk, kommer Illustrator att konvertera den till ett mest oanvändbart nät, vilket leder till att de flesta misslyckas med att hänga på verktyget. Det rätta sättet att arbeta med maskor är motsatsen: Börja med en enkel form, konvertera den till ett nät och manipulera sedan dess poäng för att få den slutliga formen.

Nu för att skapa kroppen i vår ubåt börjar vi med en enkel rektangel och gör den i ett nät med så lite poäng som nödvändigt för att få den slutliga formen.



Steg 2

Vi måste vrida denna rektangel i en långsträckt ellipsa, även tillämpa perspektiv så att ubåten kommer att se ut som om den kommer mot oss. Ta tag i Direct Selection Tool (A) och manipulera nätpunkterna som du skulle ha på en normal väg (2a).

Hjulen är ganska knepiga. Du kommer att upptäcka att du inte kan använda verktyget Convert Anchor Point (Shift + C) för att göra dem till smidiga Bezier-punkter. Istället måste man manuellt anpassa sina två handtag för att eliminera eventuella knäppningar och göra omrullningen smidigt. Med tålamod och övning skapar du den slutliga formen.

Notera hur perspektivet betonar fartygets främre och övre delar. Se till att alla linjerna kurvor harmoniskt för att definiera kroppens runda form (2b).



Steg 3

Låt oss börja skugga masken. Välj först alla punkter och ge dem en fin gul färg, gör sedan de främre och främre punkterna ljusare och de nedre mörkare. Lättare betyder en mindre mättad gul, mörkare betyder att lägga svart till basfärgen men också lite magenta för att presentera orange nyanser:



Steg 4

Använda Mesh Tool (U) lägg till två horisontella linjer, halvera de befintliga halvorna. Justera handtagen för att få linjerna att flyta smidigt, då, när du är nöjd med sin form, applicera de korrekta nyanserna på de nya punkterna. Målet är att skapa en kontinuerlig ljus-till-mörk gradient som går från topp till botten och från fram till baksida. Återigen kommer processen att vara tidskrävande men det är viktigt att få formerna och färgerna innan de gör nätet mer komplext, eftersom det blir svårare att manipulera sedan.



Steg 5

Lägg till en vertikal nätlinje till vänster. Utöka markeringen framåt genom att välja den andra punkten från toppen och prova ljusskärmen från en av de övre punkterna. Se hur bottenkanten har en fin orange skugga, sidan är fullgul och framsidan och toppen har ljusa höjdpunkter. Observera också hur toppljuset når bakstommen (baksidan) för att simulera ljus som kommer från vattnet.



Steg 6

Lägg till två vertikala nätlinjer, en till bågen (framsidan) och en till bakstommen (baksidan), justera sin form så att den passar ubåtens runda kropp (6a). För att understryka ljusets riktning (överst och främre), förfinera skuggningen, minska främre höjdpunkten och expandera orangefärgen på baksidan (6a).

Nu behöver vi skapa en sekundär längdhöjd längs den översta horisontella linjen. Skapa så en rad ovanför den och en nedan (6b). Tilldela de nya punkterna de rätta färgerna för att hålla lutningarna släta, välj sedan de centrala punkterna på mittenrad och applicera en ljusgul samplad från toppen. Den nya höjdpunkten börjar från framsidan och kommer att blekna till baksidan (6c).

Vår huvudkroppsform är nu klar och ser väldigt snäll och komplex med realistiska, subtila färgvariationer (6d).



Steg 7

Låt oss lägga till lite detalj i kroppen genom att skapa rader nitar över den. Vi kommer att applicera en enkel mönsterborste på banor som löper över kroppen.

Skapa en ellips (7a) och dra sedan den i penselborsten. Ett fönster kommer att dyka upp (7b). Välj Ny mönsterborste och klicka på OK. Fönstret Pattern Brush Options visas. Benämna penseln "nitar", ställ in skalan till 4% och räcka till 250% (7c).



Steg 8

På ett nytt lager skapar du en ny linje för att definiera ubåtens (8a) båge, knäppning mot kroppens kanter (aktivera Smart Guides med Command + U) och ge den en gul stroke. På menyn Effekt väljer du Stylize> Drop Shadow och ställer in alternativen som i 8b. Slutligen klicka på "nitar" borsten i borstpaletten och se resultatet (8c).



Steg 9

Skapa tre kopior av denna rad nitar, anpassa deras former så att de matchar ubåtens kropp och placera dem progressivt närmare varandra när de når nacken. Det här perspektivet är viktigt för att vi ska kunna se raderna av nitar som placerade regelbundet över kroppen (9a). Skapa också två horisontella rader med två ytterligare kopior av den första raden, rotera dem 90 grader och anpassa sin form (9b).



Steg 10

Låt oss ge våra ubåt några portholes.

På ett nytt lager skapar du en vit ellips (10a) och slår sedan Kommando + C för att göra en kopia och Command + F för att klistra in den framför. Skala denna ellips ner en bit (10b). Med den mindre ellipsen vald, Shift-välj den större ellipsen i Pathfinder, klicka på Minus Front, den andra ikonen från raden "Shape Modes" (10c). Namn den resulterande ringen "yttre fälgen".

Gör en kopia av den, namnge den "inre fälgen", skicka den till baksidan (Kommando + Skift + Vänster fäste) och flytta den över och till vänster för att simulera tjocklek (10d). Ge dessa ringar smidiga copperygradienter (10e, 10f).



Steg 11

Nu lägger vi till glasfönstret. Skapa en ellips, skicka den till baksidan (Kommando + Skift + Vänster fästnyckel) och ge den en rökgrå radiell gradient (11a).

Låt oss lägga till reflektioner på porten. Välj "ytterkanten" -ringen, kopiera den och klistra in den framför (Command + C, Command + F) och ge den en svart till vit gradient (11b).

Dra sedan en krökt form (11c) och dra den från den svarta till vita ringen med hjälp av Minus Front-metoden som förklarats före (11d). Justera lutningen så att det är mindre svart (11e), sedan ändras blandningsläge till mjukt ljus (11f) från paletten Transparent.



Steg 12

Nu Låt oss lägga djup och reflektioner i glasfönstret. Dölj allt utom glaset. Duplicera denna ellipse, skala ner den och flytta den lite till vänster så det finns ett tunt blad i den nedre ellipsen som visas. Ge den en svart-vit radiell gradient, ändra blandningsläget till Darken och sänka opaciteten till 50% (12a). Detta ger fönstret lite tjocklek.

Med den sista ellipsen som valts ut, kopiera den och klistra in den framför. Ändra sin gradient från radial till linjär med svart ovanpå och sänka opacitet till 35% (12b). Detta lägger till en skugga överst i fönstret.

Återigen kopiera och klistra in framför den sista ellipsen. Använd Minus Front-metoden, dra av den en krökt form (12c). Justera lutningen av den resulterande formen så att den vita är överst. Ändra blandningsläge till skärm och ställ in opacitet till 50% (12d). Nu har fönstret en reflektion.



Steg 13

Ta bort både yttre och inre fälgar, välj alla objekt (Command + A) och gruppera dem (Command + G). På menyn Effekt väljer du Stylize> Drop Shadow. Skuggan ska vara mörkare än ubåtens kropp men inte svart.

Multipliceringsläget ska väljas som standard. Justera de andra parametrarna för att få en ganska mjuk skugga (13a). Porthole är klar! Gör bara två kopior och placera dem längs kroppen, med hjälp av raderna nitar som guider. Progressivt minska deras ömsesidiga avstånd och deras bredd för att redogöra för perspektivet (13b).



Steg 14

För att skapa seglet följ instruktionerna i nästa bild. Se till att du arbetar med ett nytt lager för att hålla det städat.

  1. Rita basen av seglet och duplicera den. Skala ner kopian och placera den ovan för att göra toppen (14a).
  2. Byt till kontorsvy (Command + Y) och dra raka anslutningslinjer, knäppa till de böjda formerna. Låsa de raka linjerna (14b).
  3. Med saksverktyget (C) skär sätets botten där det skär de raka linjerna. Radera den resulterande övre halvan (14c).
  4. Kopiera och klistra in framför segelns topp, göm originalen. Upprepa föregående steg, klippa formen i två och radera den övre halvan (14d).
  5. Lås upp anslutningslinjerna. Använd Direktmarkeringsverktyget (A) för att välja varje hörn av den nya formen och klicka sedan på Command + J för att gå med i de två punkterna, välj alternativet Corner (14e).


Steg 15

Låt oss skugga seglet. Markera det och välj sedan Objekt> Skapa Gradient Mesh, sätt sedan 2 rader och 4 kolumner (15a). Se de nästa bilderna för de steg som är nödvändiga för att skapa det slutliga nätverket. Vårt mål är att skapa en främre höjdpunkt och få seilen att bli mörkare mot bak och botten.



Steg 16

Låt oss nu lägga till en reflektion vid basen av seglet. Gör en kopia av segelns nät. Vi vill vända tillbaka till en väg. Välj Objekt> Path> Offset Path och använd 0 som offset (16a). Radera alla övre punkter, lämna en enda bana (16b). Ge det en 1px ljusgul stroke och en 2px Gaussian Blur genom att gå till Effekt> Blur> Gaussian Blur (16c).



Steg 17

Seglet projekterar en skugga på huvudkroppen. Rita en form som överensstämmer med ubåtens krökning (17a) och ge den en platt, mörkorange fyllning. I paletten Transparens ställer du in blandningsläget till Multiplicera och Opacity till 65% (17b). Vi har nu en solid, hårdskuggad skugga, men i själva verket blir skuggorna blekna och suddiga när de kommer undan från deras bas. Så låt oss lägga till en opacitet mask. Kopiera och klistra in framför skuggan och applicera en vit-till-svart linjär gradient (17c).

Välj nu båda objekten, klicka på pilikonen i det övre högra hörnet av paletten Transparency och, i rullgardinsmenyn, välj Gör Opacity Mask - skuggan dyker nu bort från seglet. När du skapar opacitetsmaskar, kom ihåg att vitt låter föremål genom och svart döljer dem, precis som i Photoshop. Applicera en 5px Gaussian Blur till skuggan (17c).



Steg 18

Vi har ett problem nu: även om det mesta av seglet är i skugga är höjdpunkten vid basen helt ljus över hela dess längd. Det är fel. Låt oss rätta till det här.

Kopiera och klistra in framför höjdpunkten (du är nu experter på att slå Command + C och Command + F), ta bort Gaussian Blur från paletten Utseende, justera Stroke till 2px och välj sedan Objekt> Path> Outline Path (18a).

Fyll i den här formen med en vit till svart linjär gradient, se till att viten blir svart från vänster till höger (18b). Som vi gjorde tidigare, välj den här formen och markeringen gör sedan en opacitetsmask. Nu är höjdpunkten mer konsekvent med belysningen (18c).



Steg 19

På framplanen, rita en förlängd tårform med en spetsig ände (19a), det kommer att vara förplanets sida. Rita längden på förplanen (19b) och fyll den med en vertikal gradient för att ljusna toppen, mörka botten och markera framsidan (19c). Sidan behöver också ha en lutning. Nu ser det bra ut (19d).



Steg 20

För att lägga till en höjdpunkt i framkantens kant, duplicera sidan och ta bort bottenpunkterna (20a). Ge den här vägen en 0,5 px ljusgul stroke (20b). Samma som förut, duplicera banan, skissera den, lägg till en svart till vit gradient (20c). Gör opacitetsmasken och applicera sedan en Gaussian Blur (20d). Forplanet är klart.

Gör en kopia, flytta den bakom seglet och justera sedan dess storlek och position för att matcha perspektivet. Ändra lutningen för att göra den ljusare eftersom den andra förplanen är i direkt ljus (20e).



Steg 21

Självklart kastar rätt plank en skugga på seglet. Rita skuggan och fyll den med samma mörkorange som segelens huvudskugga. Precis som vi gjorde innan du duplicerade formen, lägger du till en svart till vit gradient, gör en opacitetsmask så suddas den resulterande skuggan (21a, 21b).



Steg 22

Låt oss skapa periskopen. Gör en kopia av en av portarna, vänd den horisontellt, skala ner den och ändra färgen på fälgarna till grå (22a). Med hjälp av guider (22b) ritar du periskopets rör och fyller den med en medelgrå (22c).

Dra sedan två linjer längs röret (22d). Applicera en lätt stroke på innerlinjen och Blur den (22e). Applicera en mörk stroke på ytterlinjen och Blur den också (22f). Gruppera de två linjerna Gör en kopia av röret, ta det framåt (Shift + Command + Right Bracket-tangenten). Skift-välj de suddiga linjerna och tryck sedan på Command + 7 för att göra en klippmask så att oskärmen kommer att begränsas till röret (22f).



Steg 23

Periskopen behöver också en reflekterande höjdpunkt. Skapa en vit ellips (23a), konvertera dess övre och nedre ankarpunkter till hörnen genom att klicka på dem en gång med Convert Anchor Point Tool (Shift + C) (23b). Skala, placera och rikta formen på periskopens rör (23c) och minska dess opacitet och oskärpa den (23d).



Steg 24

Låt oss nu rita tailplanesna. Gör en kopia av förplanets sida, skala ner den, placera den nära ubåtens akter och göra den mörkare (24a). Därefter ritar resten av planet, fyller den med en flerfärgad gradient liknande förplanets men mörkare (24b). Slutligen kopiera forplanets skugga, placera den under svansplanen och anpassa sin form så att den matchar den nya platsen (24c).



Steg 25

Det sista steget är att dra propellen. Rita ett blad med en enda bana (25a) och omvandla den till en Gradient Mesh. Se bilden för skuggning (25b). Gör tre kopior och ordna dem med 90 ° vinklar. Rita en cirkel för navet. Fyll den med en mjuk radiell gradient och ge den ett yttre glöd (Effekt> Stylize> Outer Glow) (25c).

Välj och gruppera navet och de fyra bladen. Flytta propellern bakom ubåtens huvudkropp och squash den horisontellt. Du kan behöva klippa det vertikalt lite för att matcha perspektivet. Gör det genom att högerklicka på propellern och välj Transform> Shear (25d).

Endast tre blad kvarstår synliga. Deras skuggning behöver justeras för att redogöra för ubåtsgjutningsskuggorna på den. Även bottenklingorna är nästan helt i skugga. Bara prova färger från ubåtens huvudkropp och du kommer att bli bra (25e). Vi är färdiga!



Slutsats

Låt mig berätta, det var mycket roligt att göra. Vi har täckt många tekniker: gradientmaskor, mönsterborstar, opacitetsmaskar och blandningsmetoder. De är alla väldigt enkla när de tas individuellt men när de kombineras blir de extremt kraftfulla. Den viktigaste aspekten när man skapar realistiska illustrationer är att ägna stor uppmärksamhet åt perspektiv och skuggning. Att plocka en konsekvent synpunkt och en tydlig riktning mot ljuset gör det här jobbet mycket enklare.

Jag hoppas att du njöt av den här lilla turn-the-force så mycket som jag och jag hoppas att du lärt dig mycket. Nu börjar du en ny trend i ikondesign - ubåtar!