Share
Leer een gestileerde Rubik's Cube te maken in Illustrator. Ik zal je laten zien hoe je elk detail van de laatste illustratie kunt maken, wat je een aantal nieuwe technieken zal leren en je kennis zal laten maken met een aantal nieuwe Illustrator-tools. Laten we beginnen met het maken van deze iconische, retro puzzelkubus.
Maak een nieuw document en plaats onderstaande gegevens.
Hernoem "Laag 1" naar "Kubus" door te dubbelklikken op de naam van de laag in het deelvenster Lagen.
Druk op "M" om het gereedschap Rechthoek te openen en klik vervolgens eenmaal in het document om het venster Rechthoek te openen, voer 360px in voor de breedte en hoogte en druk op OK. Geef het vierkant een rode vulling en geen streek.
Druk op V om de selectiepijl te openen en selecteer uw nieuwe vierkant. Ga nu naar Effect> 3D> Extrude and Bevel. Plaats de onderstaande afmetingen in en klik op OK. Ten slotte, Uiterlijk uitvouwen (Object> Uiterlijk uitbreiden) en vervolgens de laag "Kubus" vergrendelen.
Maak een nieuwe laag (Command + L) bovenaan het Lagen-venster en noem het "Face1".
Download het Rectangle Grid Tool, dat kan worden geselecteerd als je de knop voor het lijngereedschap ingedrukt houdt. Klik eenmaal in het document en voer de onderstaande afmetingen in en klik vervolgens op OK. Geef het raster een donkerblauwe streep (of een andere kleur die gemakkelijk te zien is). Plaats het rooster ongeveer op het hoofdfront.
Ga naar de voorbeeldweergave door op Command + Y te drukken.
Druk op V en selecteer het raster en druk vervolgens op E om het gereedschap Vrije transformatie te krijgen. Klik in de rechterbovenhoek van het raster op het kleine witte vak dat u gebruikt om de vorm van een object te transformeren. Sleep de hoek iets naar binnen en houd Command vervolgens meteen ingedrukt. Hiermee kunt u de doos vrij laten schuiven.
Verplaats alle hoeken zodat het raster op een lijn ligt met het hoofdfrontvlak van de kubus. Dit is een beetje onhandig omdat knooppunten die je al hebt verplaatst, niet op hun plaats komen als je hun tegenovergestelde hoek transformeert. Je moet gewoon teruggaan totdat het raster exact op het vlak van de onderliggende kubus staat. Zoom in en uit (Command en + of -) om te zorgen dat de hoeken op de juiste manier worden uitgelijnd. Zet de laag "Face1" op slot als je klaar bent.
Herhaal dit proces voor de andere twee zijden op hun eigen lagen met de naam "Face2" en de onderkant "Face3".
Wees niet bang om hier wat tijd aan te besteden. De onderkant is best moeilijk om goed te krijgen, maar je hebt alle hoeken nodig om op één lijn te komen dus volhard. Ik vind kleine bewegingen en geleidelijk aan werken elke hoek op zijn plaats maakt het gemakkelijker.
Sluit Preview af (Command + Y) en zoom uit, zodat u de hele kubus kunt zien.
Verberg nu de lagen "Cube", "Face2" en "Face3" door op het kleine oogpictogram naast de laagnamen te klikken. Ontgrendel de laag "Face1", selecteer het raster met het selectiegereedschap (V) en maak de regels van groepen ongedaan (Command + Shift + G)
Maak de selectie van het raster ongedaan door ergens in het tekengebied te klikken en vervolgens de linker en rechter verticale lijnen te selecteren en te verwijderen.
Selecteer de twee middelste horizontale lijnen en druk vervolgens op Command + C om ze te kopiëren en druk vervolgens op Command + F om ze vooraan te plakken. Schakel de zichtbaarheid uit van de lijnen die u zojuist hebt geplakt in het deelvenster Lagen.
Gebruik het gereedschap Direct selecteren (A) om de twee uiterste eindknooppunten op de eerste en tweede horizontale lijn te selecteren (als u over het einde van de lijn beweegt, verschijnt er een klein wit vierkant naast het gereedschap Direct selecteren om te laten zien dat u bent afgelopen het einde van het knooppunt).
Als deze zijn geselecteerd, klik je op Command + J of ga je naar Object> Pad> Samenvoegen om de uiteinden van de twee afzonderlijke regels samen te voegen. Doe dit aan het andere eind van dezelfde lijnen om de vorm te voltooien. Doe dit dan voor de derde en vierde horizontale lijnen eronder.
Maak hierna de twee lijnen die we vanuit het midden hebben gekopieerd opnieuw zichtbaar en voeg de uiteinden samen, zoals je net met de andere hebt gedaan. U kunt ze naar de bovenkant van de laag verplaatsen om ze gemakkelijker te kunnen klikken. Je zou nu iets moeten hebben dat er precies uitziet als het raster waarmee we begonnen.
Gebruik opnieuw met het gereedschap Direct selecteren (A) het bovenste knooppunt van de tweede verticale lijn en druk eenmaal op de Pijl-omhoogtoets. Selecteer vervolgens het onderste knooppunt van dezelfde regel en druk eenmaal op de toets Pijl-omlaag. Doe hetzelfde voor de derde verticale lijn.
Zie de afbeelding hieronder om er zeker van te zijn dat u de juiste knooppunten verplaatst.
Selecteer de tweede verticale lijn met het selectiegereedschap (V), verplaats het naar de bovenkant van de laag (Command + Shift + Rechter beugeltoets) en ga vervolgens naar Object> Pad> Objecten verdelen hieronder. Doe hetzelfde met de derde verticale lijn.
Je zou nu een raster moeten hebben dat identiek lijkt aan het raster waarmee we begonnen, maar nu zouden de negen binnenste kaders allemaal afzonderlijk selecteerbaar moeten zijn.
Zet de laag op "Face1", schakel het zicht uit en voeg vervolgens de rasters toe aan de lagen "Face2" en "Face3". Dit proces begon bij stap 9 als je terug wilt kijken naar wat we net deden.
Tip: aangezien de onderkant zich in een zeer scherpe hoek bevindt en u de twee middelste verticale lijnen één pixel omhoog verplaatst door eenmaal op de pijl omhoog te drukken, moet u ook tweemaal op de pijl naar rechts drukken om het perspectief te behouden. Als je de onderste knooppunten van de regels naar beneden verplaatst, druk je ook tweemaal op links. Het doel is om de lijnen op alle drie de gezichten te laten overeenstemmen, dus houd de andere twee kanten in de gaten door hun zichtbaarheid aan en uit te zetten terwijl u werkt.
OK, dat was het lastigste deel van deze tutorial, maar noodzakelijk om ons de mogelijkheid te geven om het koele perspectief te behouden en de binnenste vierkanten onafhankelijk van elkaar te bewerken.
U kunt de laag "Kubus" nu verwijderen. Schakel de zichtbaarheid van de overgebleven lagen in, maar vergrendel "Face2" en "Face3" en ontgrendel "Face1".
Selecteer nu met de selectiegereedschap (V) alle vierkanten in "Face1". Met hen nog steeds alle geselecteerde ga naar Object> Pad> Offset pad. Typ -4 px in het venster dat verschijnt en klik op OK.
Selecteer nu alle nieuwe binnenste vakken met de selectiegereedschap (V) en groepeer ze vervolgens (Command + G of Object> Groep).
Selecteer vervolgens alle omdozen en groepeer ze. Een snelle manier om dit te doen, is door alles in de laag te selecteren (Command + A) en vervolgens Shift-klik op de binnenste vakken die u zojuist hebt gegroepeerd, waardoor ze worden gedeselecteerd, waarbij u alleen de buitenste vakken geselecteerd hebt).
Selecteer beide groepen en ga naar Effect> Stileren> Afgeronde hoeken. Voer in het pop-upvenster 6 px in en klik op OK
Ga met beide groepen nog steeds naar Object> Uiterlijk uitbreiden. Verander vervolgens hun streken in vullingen door op Shift + X te drukken. Wijzig de opvulkleur van de buitenste vakken in zwart # 000000. Wijzig de opvulkleur van de binnendozen nu naar deze blauwe # 0AAEEF. Je zou de afbeelding hieronder moeten hebben.
Gebruik het selectiegereedschap (V) om de zwarte vakken te selecteren, de groeperingen te verwijderen (Command + Shift + G), maar houd ze geselecteerd en klik vervolgens op de knop Toevoegen aan vormgebied in het Pathfinder-venster om ze allemaal in 1 object te maken en klik vervolgens op Expand (Als u het Pathfinder-venster niet kunt zien, drukt u op Command + Shift + F9 of gaat u naar Venster> Pathfinder).
Gebruik het gereedschap Direct selecteren (A) om de vier openingen in het midden tussen de zwarte vakken te verwijderen door op een van de knooppunten van de openingen te klikken en tweemaal op Verwijderen te klikken.
Hernoem het nieuwe zwarte object in de laag 'Face1' naar 'Face1Back'. Schakel de zichtbaarheid van "Face1Back" uit.
Gebruik het selectiegereedschap (V) om de blauwe vakken te selecteren. Koppel ze los maar houd ze allemaal geselecteerd en klik vervolgens nogmaals op de knop Toevoegen aan vormgebied in het deelvenster met deelvensters en klik vervolgens op Uitbreiden. Hernoem ze nu naar "Face1color."
Kopieer deze set blauwe vakken (Command + C) en schakel de zichtbaarheid ervan uit. Plak twee exemplaren op dezelfde plaats en voor elkaar door Command + F tweemaal in te drukken.
Selecteer alleen de bovenste reeks vierkanten die u zojuist hebt geplakt met het selectiegereedschap (V, en dan met de pijlen op uw toetsenbord drie keer omhoog en vervolgens driemaal naar rechts.) Selecteer nu beide van de twee vormen en druk op het gedeelte Aftrekken van vormgebied in het Pathfinder-venster en klik vervolgens op de knop Uitvouwen.
Wijzig de kleur van de resterende vormen in dit donkerder blauwe # 099AD4 en hernoem het object in "Face1Shadow." Zet nu de zichtbaarheid van de 'Face1Back' en 'Face1color' weer aan en vergrendel de laag 'Face1'.
Het proces voor de volgende twee kanten maakt gebruik van exact dezelfde technieken, maar heeft kleine verschillen, dus ik zal ze in minder detail doornemen.
Ontgrendel en schakel de zichtbaarheid van "Face2" in. Selecteer alle vakjes en verplaats deze keer hun paden met -3px. Groepeer de binnendozen. Groepeer de buitenste dozen. Bij beide wordt een effect met afgeronde hoeken van 6 px toegepast en vervolgens naar Object> Uiterlijk uitbreiden. Wissel de streken om in vullingen.
Selecteer de buitenste kadersgroep, maak de groeperingen ongedaan en klik vervolgens op de knop Toevoegen aan vormgebied in de Pathfinder. Hernoem het object in "Face2Back", verander de kleur in zwart # 000000 en verwijder de vier openingen tussen de vakken. Verberg de zichtbaarheid van "Face2Back".
Selecteer de groep binnenste vakken, maak de groeperingen ongedaan en klik vervolgens op de knop Toevoegen aan vormgebied in Pathfinder en Expand. Hernoem de selectie naar "Face2color" verander de kleur in deze rode # F70D0D. Kopieer "Face2color" en verberg dan de zichtbaarheid ervan.
Plak de twee kopieën op dezelfde plaats op elkaar. Selecteer de bovenste kopie en druk deze keer twee keer omhoog en vervolgens drie keer naar links. Selecteer beide exemplaren en druk op de knop Aftrekken van vormgebied in het Pathfinder-venster en klik op Uitbreiden. Wijzig de kleur van de overgebleven vormen in dit donkerder rode # D40404 en hernoem de selectie in "Face2Shadow". Verander de zichtbaarheid van "Face2color" en "Face2Back" weer.
Sluit nu de laag "Face2".
Tot slot, gebruik voor de onderkant hetzelfde proces opnieuw, maar met een paar kleine wijzigingen.
Verander alleen het pad voor de binnenste vakken met -2 px.
Selecteer deze keer alleen de buitenste vakken en pas een 6px afgerond hoeken effect toe. Selecteer vervolgens de binnenste vakken en pas het effect Rounded Corners toe, maar dan met 4px.
Geef de binnenste vakken dit gele # EDD70C. Als u de schaduw voor het ondervlak wilt maken, drukt u driemaal omlaag, dan een keer naar links en trekt u de vormen van elkaar af. Geef tenslotte de schaduwen deze gele kleur # CFBB0A.
Dingen zouden nu meer op een Rubik's Cube moeten lijken, maar we moeten het een beetje in bulk doen!
Ontgrendel de drie lagen met de naam 'Face1', 'Face2' en 'Face3'. Gebruik nu het selectiegereedschap (V) om alleen de zwarte vormen van elk van de lagen te selecteren, die 'Face1Back', 'Face2Back' en 'Face3Back' moeten worden genoemd. Kopieer deze drie selecties (Command + C) en sluit vervolgens alle drie de lagen.
Maak een geheel nieuwe laag (Command + L) bovenop alle andere lagen en noem het "Overzicht". Plak vooraan (Command + F) de drie zwarte vormkopieën die je zojuist in deze nieuwe laag hebt gemaakt. Zorg ervoor dat de drie vormen zijn geselecteerd en voeg een zwarte lijn van 1 px in gewicht toe die op de buitenkant is uitgelijnd. Als u een streek buiten de vorm van een lijn wilt uitlijnen, klikt u op de knop Lijn naar buiten uitlijnen in het deelvenster Lijn.
Nu met de drie vormen die nog steeds zijn geselecteerd, ga je naar Object> Uiterlijk uitvouwen en vervolgens degroeperen door op Command + Shift + G te klikken. Klik ten slotte op de knop Toevoegen aan vormgebied in het venster Pathfinder en vervolgens op Uitbreiden. Over de zwarte vorm die overblijft, pak je het gereedschap Direct selecteren (A) en verwijder de openingen in het midden.
Selecteer nu uw nieuwe vorm en open het deelvenster Uiterlijk (Venster> Uiterlijk). Sleep in het deelvenster het vak met de tekst 'Lijn' onder het vak met de tekst 'Opvulling'. De vulling moet al zijn ingesteld op Zwart, dus selecteer het vak Lijn in het deelvenster Vormgeving en voeg een 4px witte #FFFFFF-streek toe aan de vorm, zoals u normaal zou doen.
Terwijl de vorm nog steeds is geselecteerd, gaat u terug naar het deelvenster Vormgeving en klikt u op de kleine pijl aan de rechterkant die een klein submenu weergeeft en selecteert u de optie Voeg nieuwe streek toe. U zou nu twee verschillende streken in het paneel Uiterlijk moeten kunnen zien. Selecteer de onderste en voeg een 10px zwarte # 000000 streek toe aan de vorm.
Sleep de laag "Overzicht" naar de onderkant van het deelvenster met lagen en vergrendel deze.
Laten we de gezichten nu een mooi glanzend gevoel geven. Ontgrendel de laag "Face1" en selecteer de blauwe vakken, die "Face1color" moeten heten. Klik nu op de knop Verloop met verloop onder aan het deelvenster Gereedschappen en plaats deze instellingen in het Verloop-venster (Command + F9): # 0CB0F0 op 0%, # 29CAFE op 48%, # 0AAEEF op 50%, # 27C8FD op 76% , # 0EB1F1 op 77% en # 2CCDFF op 100%. Zet de engel dan op 310 graden. Sluit nu laag "Face1."
Ontgrendel "Face2" en plaats deze instellingen voor het verloopseffect: # F50D0D op 0%, # F70D0D op 48%, # E41010 op 50% en # E21010 op 100%. Zet de engel dan op 310 graden. Sluit nu de laag "Face2".
Ontgrendel "Face3" en plaats deze instellingen voor het verloopseffect: # EDD70C op 0% en # FFE108 op 100%. Zet de engel vervolgens op 15 graden.
Ontgrendel nu alle vier de lagen en druk op Command + A om alles te selecteren. Ga vervolgens naar Object> Transformeren> Schaal en plaats de onderstaande dimensies. Vergrendel de lagen vervolgens opnieuw, want we zijn er voorlopig mee klaar. Ik vind het gemakkelijker om soms groter te werken, omdat je kunt inzoomen en nauwkeuriger kunt zijn en het later kunt verkleinen. Goede oude vectoren!
Laten we nu de achtergrond maken. Maak een nieuwe laag helemaal onderaan het lagenvenster en noem het "Achtergrond". Druk op M om het gereedschap Rechthoek op te halen, klik eenmaal in het document en plaats 2000px voor de breedte en hoogte. Centreer het nieuwe vierkant achter je Rubik's Cube en geef het deze kleur # 7DD6EA. Als het nog steeds is geselecteerd, druk je op Command + 2 om de selectie in de laag te vergrendelen.
Druk nu op L om de Ellipse Tool te openen en teken een cirkel van 480 px bij 480 px. Geef de cirkel een witte #FFFFFF-vulling.
Plaats de cirkel achter de Rubik's Cube en ga er met deze selectie naar ga naar Effect> Vervormen & transformeren en voer vervolgens de onderstaande afmetingen in. Vergrendel nu de laag "Achtergrond".
Maak een nieuwe laag boven in het lagenvenster en noem het 'Vlag'. Druk op N om het potloodgereedschap te openen en teken een lijn zoals hieronder. Geef het een 2px zwarte # 000000 streek en plaats het zodat het linker uiteinde net over de linkerkant van de Rubiks kubus begint.
Kopieer de streek (Command + C) en plak een nieuwe aan de voorkant (Command + F). Druk vervolgens drie keer op Shift + Pijl-omlaag om de kopie 30 px naar beneden te verplaatsen.
Kopieer de regel die je net hebt verplaatst en plak er nog een recht voor de regel en druk nog drie keer op Shift + Pijl-omlaag. Schakel de zichtbaarheid van de middelste lijn nu uit.
Breng het Direct Select-gereedschap (A) omhoog en voeg de eindknopen op de twee lijnen die u nog steeds kunt zien (Command + J) samen. Geef de vorm een witte vulling #FFFFFF en noem het "FlagFace".
Terwijl de vorm "FlagFace" nog steeds is geselecteerd, opent u het gereedschap Pen door op P en aan de rechterkant te drukken. Voeg in het midden van de verticale lijn een nieuw knooppunt toe door eenmaal op de regel te klikken.
Selecteer dit knooppunt met het gereedschap Direct selecteren (A) en verplaats het naar binnen, zodat de vlag lijkt alsof deze een paar staarten heeft. Neem nog steeds met het gereedschap Direct selecteren het onderste linkerknooppunt van de vlag en verplaats het ongeveer 3 px naar rechts.
Maak nu die middellijn, die we een minuut geleden verborgen hebben, weer zichtbaar. Verplaats het naar de bovenkant van de laag.
Selecteer het gereedschap Type op pad, te vinden als u het gereedschap Tekst ingedrukt houdt en ergens links van de lijn ergens klikt. Typ nu "Rubik's Cubes Rock !!!". Ik heb Rockwell Bold op 32px gekozen als mijn lettertype, maar als je dat niet hebt, probeer dan een ander lettertype uit. Ik vind dat iets met bloedserifen goed werkt.
Ga met het type dat nog steeds is geselecteerd naar Type> Type op een pad> Type op padopties. Voer de onderstaande afmetingen in om het type verticaal op het pad te centreren.
Als u het type langs het pad van links naar rechts en vice versa wilt verplaatsen, selecteert u het type, krijgt u het gereedschap Direct selecteren en plaatst u de muisaanwijzer op het begin van het eerste woord, waar u een verticale lijn met een wit vak moet zien ernaast. Wanneer u de muisaanwijzer over de doos beweegt, wordt het gereedschap voor directe selectie zwart met een kleine pijl die naar rechts wijst. Als u dit ziet, kunt u klikken en de tekst slepen langs het pad.
Selecteer de vlag die u zojuist hebt getekend en kopieer deze. Druk vervolgens op Command + B om het achter te plakken en druk vervolgens eenmaal op Shift + Pijl-omlaag om het met 10 px naar beneden te verplaatsen. Verander de kleur in zwart # 000000 zonder een streek. Noem de vorm "FlagShadow."
Ontgrendel de laag "Omtrek" en kopieer de vorm daar naartoe, en vergrendel vervolgens de laag opnieuw. Plak de contourvorm die u zojuist in positie onderaan de laag hebt gekopieerd door op Command + B in de laag 'Vlag' te drukken.
Selecteer zowel de geplakte omtrekvorm als de vorm met de naam "FlagShadow" en druk op de knop Snijd vormgebied in het Pathfinder-venster gevolgd door Uitvouwen. Noem de resterende vorm "FlagShadow" opnieuw en geef deze een zwarte vulling. Zet de dekking op 40% en vergrendel de laag "Vlag".
Maak ten slotte een nieuwe laag, net boven de laag met de naam 'Achtergrond' en noem deze 'FlagBack'. Druk op L en teken een vrij platte ellips met dezelfde afmetingen hieronder weergegeven.
Plaats de vorm achter de linkerhoek van de vlag die u hebt getekend en geef deze een 2px zwarte lijn en een lichtgrijze (# E8EAEA) vulkleur. De uiteindelijke afbeelding wordt hieronder getoond.
Abonneer u op de Vectortuts + RSS-feed om op de hoogte te blijven van de nieuwste vectorhandleidingen en -artikelen.
Accentsconagua