Snelle tip hoe u een aan- en uitknop in Adobe Illustrator maakt

In de volgende tutorial leer je een aan / uitknop te maken. Het is eenvoudig te maken en u leert hoe u een object kunt maken dat perfect is als een webelement of -pictogram. Laten we beginnen!


Stap 1

Maak een 200 bij 200 px, RGB-document. Schakel het raster in (Weergave> raster) en klik op raster (Beeld> Uitlijnen op raster). Vervolgens heb je om de 5px een raster nodig. Ga naar Bewerken> Voorkeuren> Gidsen & raster, voer 5 in het vak Raster in elk vak in en 1 in het vak Onderverdelingen. U kunt ook het infopaneel (Venster> Info) openen voor een livevoorbeeld met de grootte en positie van uw vormen. Vergeet niet om de maateenheid te vervangen door pixels in Bewerken> Voorkeuren> Eenheid> Algemeen. Al deze opties zullen uw werksnelheid aanzienlijk verhogen.


Stap 2

Kies het gereedschap Rechthoek (M), maak een vorm van 90 bij 140 px en vul deze met R = 65 G = 64 B = 66. Open het deelvenster Uiterlijk (Venster> Uiterlijk), selecteer de vulling en ga naar Effect> Stileren> Gloed binnen. Voer de onderstaande gegevens in en klik vervolgens op OK.


Stap 3

Selecteer de vorm gemaakt in de vorige stap, open het uitvouwmenu van het deelvenster Vormgeving en klik op Nieuwe opvulling toevoegen. Hiermee wordt een tweede vulling voor uw vorm toegevoegd. Selecteer het, stel de kleur in op R = 20 G = 20 B = 20 en ga vervolgens naar Effect> Vervormen & transformeren> Transformeren. Voer de onderstaande gegevens in afbeelding # 1 klik op OK en ga vervolgens naar Effect> Verdraaien> Boog lager. Voer de gegevens in die onder afbeelding # 2 worden weergegeven, klik op OK en ga vervolgens naar Effect> Vervagen> Gaussiaans vervagen. Voer een 1px-straal in en klik op OK. Zorg ervoor dat deze nieuwe vulling nog steeds is geselecteerd, verminder de dekking tot 70% en verplaats deze vervolgens onder de eerste vulling (in het deelvenster Vormgeving).


Stap 4

Voeg een derde vulling toe voor je rechthoek. Selecteer het, verminder de dekking tot 15%, verander de overvloeimodus in Vermenigvuldigen en ga vervolgens naar Effect> Artistiek> Filmkorrel. Voer de onderstaande gegevens in en klik vervolgens op OK.


Stap 5

Selecteer de rechthoek opnieuw en voeg een eerste streek toe. Maak het 0.5pt breed, lijn het uit naar binnen en stel de kleur in op R = 20 G = 20 B = 20. Selecteer het in het deelvenster Uiterlijk en klik op het pictogram Geselecteerd artikel dupliceren onder in het deelvenster Vormgeving. Dit dupliceert de streek. Selecteer deze kopie, stel de kleur in op R = 109 G = 110 B = 113 en ga vervolgens naar Effect> Vervormen & transformeren> Transformeren. Voer de onderstaande gegevens in en klik vervolgens op OK.


Stap 6

Selecteer de hele rechthoek opnieuw en ga naar Effect> Stileren> Afgeronde hoeken. Voer in en 5px radius en klik vervolgens op OK. Nu moet je vorm er in de volgende afbeelding uitzien.


Stap 7

Kies de Ellipse Tool (L), maak een 5 bij 5 px vorm en plaats deze zoals getoond in de volgende afbeelding. De Snap to Grid zal uw werk vergemakkelijken. Vul het met R = 88 G = 89 B = 91 en selecteer vervolgens de vulling en ga naar Effect> Stileren> Slagschaduw. Voer de onderstaande gegevens in en klik vervolgens op OK.


Stap 8

Herselecteer de vorm die in de vorige stap is gemaakt en voeg een tweede vulling toe. Selecteer het, stel de kleur in op R = 20 G = 20 B = 20 en ga naar Effect> Vervormen & transformeren> Transformeren. Voer de onderstaande gegevens in, klik op OK en ga vervolgens naar Effect> Vervormen en transformeren> Pucker & Bloat. Voer nogmaals de gegevens in die hieronder worden getoond en klik op OK.


Stap 9

Vervolgens moet u in elke hoek een kopie van deze cirkel toevoegen. U kunt drie kopieën maken en deze in de hoeken verplaatsen, of u kunt de cirkel selecteren en de twee onderstaande Transform-effecten toevoegen.


Stap 10

Selecteer de afgeronde rechthoek en ga naar Object> Pad> Offset pad. Voer een -20px offset in en klik op OK. De resulterende vorm zou eruit moeten zien in de tweede afbeelding. Selecteer het en druk op D om de standaard eigenschappen toe te voegen (witte vulling en zwarte lijn). Nu zou je vorm eruit moeten zien in de derde afbeelding. Selecteer het opnieuw, lijn de lijn uit naar buiten, stel de kleur in op R = 10 G = 10 B = 10 voor zowel vulling als streek en ga vervolgens naar Effect> Stileer> Afgeronde hoeken. Voer een straal van 5 px in en klik op OK. Uiteindelijk zou je vorm eruit moeten zien in de vierde afbeelding.


Stap 11

Selecteer de vorm gemaakt in de vorige stap en maak een kopie vooraan (Control + C> Control + F). Selecteer deze kopie, verwijder de lijn, stel de vulkleur in op R = 255 G = 255 B = 255 ga dan naar Object> Uiterlijk uitbreiden.


Stap 12

Kies het gereedschap Pen (P) en teken een horizontaal pad van 60 px. Voeg een dunne, rode streek toe zodat u het gemakkelijker kunt onderscheiden van de rest van de vormen. Selecteer deze samen met de witte vorm die in de vorige stap is gemaakt en open het paneel Uitlijnen. Kies het selectiegereedschap (V), klik op de rand van de witte vorm (het moet worden benadrukt) en klik vervolgens op het horizontale uitrichtingscentrum en de verticale uitrichtingscentrumknop in het uitlijningspaneel. Nu moet uw horizontale pad worden doorgeregen zoals weergegeven in de derde afbeelding. Selecteer opnieuw samen met de witte, afgeronde rechthoek en klik op de knop Verdeel in het deelvenster Pathfinder. Dit verdeelt je witte vorm in twee gelijke vormen.


Stap 13

Selecteer de groep die in de vorige stap is gemaakt en druk op Shift + Control + G om het groeperen ongedaan te maken. Laten we ons nu concentreren op de onderste vormen. Selecteer het, vul het met R = 75 G = 75 B = 75 en voeg vervolgens een tweede vulling toe en gebruik het lineaire verloop onder afbeelding # 2. De gele nul van de verloopafbeelding staat voor dekkingspercentage.


Stap 14

Kon de magnetisch uitlijnen niet uitschakelen en ga vervolgens naar Bewerken> Voorkeuren> Algemeen. Voer 0.5 in het vak Toetsenbordvergroting in en klik vervolgens op OK. Herkies de vorm die in de vorige stap is bewerkt en maak twee kopieën vooraan (Control + C> Control + F> Control + F). Selecteer de bovenste kopie en druk op de pijl-omhoog (om deze 0,5 px naar boven te verplaatsen). Selecteer beide exemplaren opnieuw en klik op de knop Minus voorzijde in het deelvenster Pathfinder. Vul de resulterende vorm met R = 147 G = 149 B = 152.


Stap 15

Laten we nu naar de bovenste vorm gaan. Selecteer het en ga naar Effect> 3D> Extrude & Bevel. Voer de onderstaande gegevens in, klik op OK en ga vervolgens naar Object> Uiterlijk uitvouwen. Neem een ​​kijkje in je deelvenster Lagen en je vindt een nieuwe groep. Open het en verwijder de twee uitknippaden.


Stap 16

Selecteer de vormen die zijn gemarkeerd in de eerste afbeelding en klik op de knop Unite in het deelvenster Pathfinder. Vul de resulterende vorm met de lineaire gradiënt weergegeven in de tweede afbeelding.


Stap 17

Schakel het magnetisch uitlijnen in en kies het gereedschap Direct selecteren (A). Selecteer de ankerpunten gemarkeerd in de eerste afbeelding en verplaats ze naar beneden zoals getoond in de tweede afbeelding. Nogmaals, de snap to grid zal uw werk vergemakkelijken. Vul deze vorm met R = 65 G = 64 B = 66 voeg een tweede vulling toe en gebruik de gradiënt die wordt weergegeven in de vierde afbeelding.


Stap 18

Schakel het magnetisch uitlijnen naar raster uit en selecteer vervolgens de vorm die in de vorige stap is bewerkt en maak twee kopieën vooraan (Control + C> Control + F> Control + F). Selecteer de bovenste kopie en druk op de pijl-omlaag. Selecteer beide exemplaren opnieuw en klik op de knop Minus voorzijde in het deelvenster Pathfinder. Vul de resulterende vorm met R = 128 G = 130 B = 133 en verminder de dekking tot 85%.


Stap 19

Tot slot, als je ervoor kiest om je knop 90 graden te draaien, ziet het eruit als in de eerste afbeelding. Als u de schaduw wilt herstellen, selecteert u de grote afgeronde rechthoek, gaat u naar de onderste laag, opent u het effect Transformeren en vervangt u de bestaande gegevens door de afbeelding die wordt weergegeven in de tweede afbeelding. Doe hetzelfde als u ervoor kiest om het Transform-effect te gebruiken om de schroeven te vermenigvuldigen.


Conclusie

Daar heb je het, een eenvoudige maar elegante aan en uit knop. Ik hoop dat je deze tut leuk vond.