Share
In de volgende stappen leert u hoe u een reeks pixel-perfecte handaanwijzers kunt maken in Adobe Illustrator. Om te beginnen leer je hoe je je nieuwe document voorbereidt en hoe je een eenvoudig raster instelt. Vervolgens leert u met behulp van het gereedschap Rechthoek, het gereedschap Ellipse en het gereedschap Pen, samen met het effect Afgeronde hoeken, hoe u de vormen maakt die uw handcursors vormen. Verdergaand, met behulp van elementaire vectorvormtechnieken, een eenvoudige lijn, een lineair verloop, sommige effecten van slagschaduw en een eenvoudig transformatie-effect, leert u hoe u kleur, hooglichten en schaduw voor de laatste handcursors kunt toevoegen.
Raken Controle + N om een te maken nieuwe document. invoeren 600 in de Breedte doos en 300 in de Hoogte vakje en klik vervolgens op de gevorderd knop. kiezen RGB, Scherm (72ppi) en zorg ervoor dat de Lijn nieuwe objecten uit met Pixel Grid vakje is uitgeschakeld voordat u klikt OK.
Schakel de rooster (Beeld> Raster weergeven) en de Klik op raster (Beeld> Uitlijnen op raster). Je hebt elk een rooster nodig 1px, dus ga gewoon naar Bewerken> Voorkeuren> Gidsen> Raster, invoeren 1 in de Gridline elke doos en 1 in de onderverdelingen doos. U moet ook de. Openen info paneel (Venster> Info) voor een live preview met de grootte en positie van je vormen. Vergeet niet om de maateenheid in te stellen op pixels van Bewerken> Voorkeuren> Eenheden> Algemeen. Al deze opties zullen uw werksnelheid aanzienlijk verhogen.
Kies het Rechthoekgereedschap (M) en focus op je Toolbar. Verwijder de kleur uit de streek en selecteer de vulling en stel de kleur in op rood (R = 237 G = 28 B = 36). Ga naar je Artboard, maak gewoon een 4 x 15 px rechthoek en lager zijn ondoorzichtigheid naar 30%. Door de dekking van de vorm te verlagen, wordt het gemakkelijker voor u om het raster achterin te zien, waardoor u gemakkelijker de exacte positionering voor elke vorm kunt begrijpen. Zorg ervoor dat je rechthoek nog steeds is geselecteerd en ga naar Effect> Stileer> Afgeronde hoeken. Voer een in 2px straal en klik OK.
Zorg ervoor dat de Rechthoekgereedschap (M) blijft actief, maakt een 6 x 10 px vorm, plaats het zoals weergegeven in de tweede afbeelding, lager zijn ondoorzichtigheid naar 30% en druk op Shift + Control + E om diezelfde 2px toe te voegen Afgeronde hoeken effect. Maak een 6 x 9 px vorm, plaats het zoals getoond in de derde afbeelding, lager zijn ondoorzichtigheid naar 30% en druk op Shift + Control + E. Maak tot slot een 6 x 7px vorm, plaats het zoals weergegeven in de vierde afbeelding, lager zijn ondoorzichtigheid naar 30% en druk op Shift + Control + E.
De ... gebruiken Ellipse Tool (L), Maak een 4PX cirkel, vul het met hetzelfde rode (R = 237 G = 28 B = 36), plaats het zoals in de volgende afbeelding wordt getoond en verlaag het ondoorzichtigheid naar 30%. Schakel over naar de Rechthoekgereedschap (M), Creëer een 8 x 10 px vorm, plaats het zoals getoond in de volgende afbeelding en verlaag het ondoorzichtigheid naar 30%.
Stel scherp op de rechterkant van je rechthoek en kies de Pen gereedschap (P). Stel de vulkleur in op zwart, lager de ondoorzichtigheid naar 30% en maak een "L" -pad zoals getoond in de eerste afbeelding. Zorg ervoor dat dit nieuwe pad geselecteerd blijft, voeg een vierde ankerpunt toe zoals getoond in de tweede afbeelding en sleep de hendels 2 px omhoog en 1 px naar rechts. Ga omhoog, voeg een vijfde ankerpunt toe zoals getoond in de derde afbeelding en sleep de hendels 2 px omhoog. Houd de alt toets vanaf uw toetsenbord, Klik op dit vijfde ankerpunt dan eenvoudig Klik op het startankerpunt om het pad te sluiten.
Focus op de linkerkant van uw rode rechthoek, kies de Pen gereedschap (P) en maak een pad zoals weergegeven in de eerste afbeelding. Zorg ervoor dat dit nieuwe pad geselecteerd blijft, voeg een vierde ankerpunt toe zoals weergegeven in de tweede afbeelding en sleep de grepen 2 px omhoog en 1 px naar links. Ga naar beneden, voeg een vijfde ankerpunt toe zoals getoond in de derde afbeelding en sleep de hendels 4px naar beneden. Houd de alt toets vanaf uw toetsenbord, Klik op dit vijfde ankerpunt dan eenvoudig Klik op het startankerpunt om het pad te sluiten. Zorg er ten slotte voor dat de vorm die in deze stap wordt gemaakt, is gevuld met zwart en lager ondoorzichtigheid naar 30%.
Selecteer alle vormen die tot nu toe zijn gemaakt en Groep hen (Controle + G). Ga naar de Lagen paneel (Venster> Lagen), dubbelklik op deze nieuwe groep en noem deze "pointerHandCursor". Dupliceer deze groep (Besturing + C> Besturing + F), selecteer de kopie en en sleep deze naar rechts zoals getoond in de tweede afbeelding. Ga terug naar de Lagen paneel en noem deze nieuwe groep "palmHandCursor"Blijf focussen op deze tweede groepen, selecteer de vier afgeronde rechthoeken en verwijder ze gewoon.
Concentreer u op uw "palmHandCursor"groepeer en kies de Rechthoekgereedschap (M). Maak een 4 x 13 px vorm en plaats deze zoals getoond in de eerste afbeelding. Vul het met rood, verlaag het ondoorzichtigheid naar 30% en ga naar Effect> Stileer> Afgeronde hoeken. Voer een straal van 2px in en klik OK. Zorg ervoor dat de Rechthoekgereedschap (M) blijft actief, maakt een 4 x 14 px vorm, plaats het zoals weergegeven in de tweede afbeelding, lager zijn ondoorzichtigheid naar 30% en druk op Shift + Control + E.
Maak een seconde, 4 x 14 px vorm, plaats het zoals getoond in de derde afbeelding, lager zijn ondoorzichtigheid naar 30% en druk op Shift + Control + E. Maak tot slot een 4 x 11 px vorm, plaats het zoals weergegeven in de vierde afbeelding, lager zijn ondoorzichtigheid naar 30% en druk op Shift + Control + E. Focus op de Lagen paneel, selecteer de vier afgeronde rechthoeken gemaakt in deze stap en sleep ze eenvoudigweg naar binnen "palmHandCursor"groep.
Duplicaat (Besturing + C> Besturing + F) jouw "palmHandCursor"groep, selecteer de kopie en en sleep deze naar rechts zoals getoond in de tweede afbeelding Lagen paneel en noem deze nieuwe groep "fistHandCursor"Blijf focussen op deze derde groepen, selecteer de vier afgeronde rechthoeken samen met de 20px omcirkelen en gewoon verwijderen.
Concentreer u op uw "fistHandCursor"groep en pak de Ellipse Tool (L). Maak een 6px cirkel, vul het met rood, verlaag het ondoorzichtigheid naar 30% en plaats het zoals getoond in de eerste afbeelding. Kies het Rechthoekgereedschap (M). Maak een 4 x 9 px vorm en plaats deze zoals getoond in de tweede afbeelding. Vul het met rood, verlaag het ondoorzichtigheid naar 30% en ga naar Effect> Stileer> Afgeronde hoeken. Voer een in 2px straal en klik OK. Zorg ervoor dat de Rechthoekgereedschap (M) blijft actief, maakt een 4 x 10 px vorm, plaats het zoals getoond in de derde afbeelding, lager zijn ondoorzichtigheid naar 30% en druk op Shift + Control + E.
Maak een 4 x 9 px vorm, plaats het zoals weergegeven in de vierde afbeelding, lager zijn ondoorzichtigheid naar 30% en druk op Shift + Control + E. Maak tot slot een 4 x 7px vorm, plaats het zoals weergegeven in de vijfde afbeelding, lager zijn ondoorzichtigheid naar 30% en druk op Shift + Control + E. Focus op de Lagen paneel, selecteert u de vier afgeronde rechthoeken en de 6px cirkel gemaakt in deze stap en sleep ze gewoon naar de "fistHandCursor"groep.
Selecteer uw "pointerHandCursor"groep, ga naar Object> Uiterlijk uitbreiden open vervolgens de verkenner paneel (Venster> Pathfinder) en klik op de Verenigen knop. Selecteer de resulterende vorm, verhoog de ondoorzichtigheid naar 100% en focus op de Verschijning paneel (Venster> Uiterlijk). Verwijder de kleur uit de vulling, voeg een toe 1pt streek en selecteer het. Zet de kleur op R = 70 G = 70 B = 70, lijn het uit naar binnen en open de Beroerte paneel (Venster> Lijn). Focus op de Hoek sectie en eenvoudig de Ronde Join knop. Als je klaar bent ga je naar Object> Pad> Contourlijn.
Kies het Rechthoekgereedschap (M), maak er twee, 1 x 3px vormen, a 1 x 4 px vorm en een 1 x 5 px vorm. Vul alle vier de vormen met R = 70 G = 70 B = 70 en plaats ze zoals getoond in de vierde afbeelding. Als u klaar bent, selecteert u alle vormen gemaakt in deze stap en klikt u op de Verenigen knop van de verkenner paneel.
De ... gebruiken Rechthoekgereedschap (M), Maak een 21 x 26 px rechthoek, vul het met wit, plaats het zoals getoond in de eerste afbeelding en stuur het naar achteren (Shift + Control + [ ). Selecteer deze witte rechthoek samen met de handcontour en klik op de Verdelen knop van de verkenner paneel. Zorg ervoor dat de resulterende groep is geselecteerd en klik gewoon op Shift + Control + G naar Ungroup het. Selecteer de buitenste witte vorm en verwijder deze. Selecteer vervolgens de binnenste witte vorm en vervang het wit door de lineaire gradiënt die wordt weergegeven in de uiteindelijke afbeelding.
Schakel de Klik op raster (Beeld> Uitlijnen op raster) ga dan naar Bewerken> Voorkeuren> Algemeen en zorg ervoor dat de Toetsenbordverhoging is ingesteld op 1px. Herselecteer de vorm gevuld met het lineaire verloop en maak twee kopieën vooraan (Besturing + C> Besturing + F> Besturing + F). Selecteer de bovenste kopie en druk eenmaal op de pijl naar rechts om deze 1 px naar rechts te verplaatsen. Selecteer opnieuw zowel kopieën als Klik de Minus voorkant knop van de verkenner paneel. Selecteer de resulterende groep vormen, verander het in een Samengestelde pad (Controle + 8 of Object> Samengestelde pad> Maken) en stel de vulkleur in op R = 205 G = 205 B = 205.
Herselecteer de vorm gevuld met het lineaire verloop en maak nog twee kopieën vooraan (Besturing + C> Besturing + F> Besturing + F). Selecteer de bovenste kopie en druk eenmaal op de linkerpijl om deze 1 px naar links te verplaatsen. Selecteer beide exemplaren opnieuw en klik op de Minus voorkant knop van de verkenner paneel. Selecteer de resulterende groep vormen, verander het in een Samengestelde pad (Controle + 8 of Object> Samengestelde pad> Maken) en stel de vulkleur in op wit.
Herselecteer de vorm gevuld met het lineaire verloop en ga naar Effect> Stileren> Slagschaduw. Voer de eigenschappen in die getoond worden in het linkervenster (in de volgende afbeelding), klik OK en ga opnieuw naar Effect> Stileren> Slagschaduw. Voer de eigenschappen in die in het rechtervenster worden weergegeven (in de volgende afbeelding) en klik op OK.
Schakel de Klik op raster (Beeld> Uitlijnen op raster). De ... gebruiken Rechthoekgereedschap (M), Maak een 1 x 3px vorm en vul het met R = 215 G = 215 B = 215. Plaats deze kleine rechthoek zoals weergegeven in de volgende afbeelding en ga naar Effect> Vervormen en transformeren> Transformeren. Voer de onderstaande eigenschappen in en klik op OK.
Selecteer uw "palmHandCursor"groep, ga naar Object> Uiterlijk uitbreiden en klik op de Verenigen knop van de verkenner paneel. Selecteer de resulterende vorm, verhoog de ondoorzichtigheid naar 100% en focus op de Verschijning paneel (Venster> Uiterlijk). Verwijder de kleur uit de vulling, voeg een toe 1pt streek en selecteer het. Zet de kleur op R = 70 G = 70 B = 70, lijn het uit naar binnen en controleer de Ronde Join knop van de Beroerte paneel. Als je klaar bent ga je naar Object> Pad> Contourlijn.
Kies het Rechthoekgereedschap (M), maak er twee, 1 x 8 px vormen en een 1 x 7px vorm. Vul alle vier de vormen met R = 70 G = 70 B = 70 en plaats ze zoals getoond in de derde afbeelding. Grijp de Direct selectie gereedschap (A), focus op de bovenkant van de linker rechthoek, selecteer het linker ankerpunt en sleep het 1px omlaag. Als u klaar bent, selecteert u alle vormen gemaakt in deze stap en klikt u op de Verenigen knop van de verkenner paneel.
Stel scherp op de handcontour die u in de vorige stap hebt gemaakt en herhaal de technieken en effecten die voor de cursor van de aanwijzer worden gebruikt. Uiteindelijk zou het eruit moeten zien in de volgende afbeelding.
Selecteer uw "fistHandCursor"groep, ga naar Object> Uiterlijk uitbreiden en klik op de Verenigen knop van de verkenner paneel. Selecteer de resulterende vorm, verhoog de ondoorzichtigheid naar 100% en focus op de Verschijning paneel (Venster> Uiterlijk). Verwijder de kleur uit de vulling, voeg een toe 1pt streek en selecteer het. Zet de kleur op R = 70 G = 70 B = 70, lijn het uit naar binnen en ga naar Object> Pad> Contourlijn.
Kies het Rechthoekgereedschap (M), maak er drie, 1 x 4 px vormen en een 1 x 2 px vorm. Vul alle vier de vormen met R = 70 G = 70 B = 70 en plaats ze zoals getoond in de derde afbeelding. Grijp de Direct selectie gereedschap (A), focus op de bovenkant van het midden 1 x 4 px rechthoek, selecteer het linker ankerpunt en sleep het eenvoudig 1px omlaag. Ga naar rechts 1 x 4 px rechthoek, focus op de bovenkant, selecteer het juiste ankerpunt en sleep het 1px omlaag. Als u klaar bent, selecteert u alle vormen gemaakt in deze stap en klikt u op de Verenigen knop van de verkenner paneel.
Concentreer u op de handcontour die u in de vorige stap hebt gemaakt en herhaal de technieken en effecten die worden gebruikt voor de andere twee handcursors. Uiteindelijk zou het eruit moeten zien in de volgende afbeelding.
Hier is hoe het eruit zou moeten zien. Ik hoop dat je deze tutorial leuk vond en deze technieken kunt toepassen in je toekomstige projecten.
Als je geïnteresseerd bent in het maken van de knop Abonneren, bekijk dan deze handige tutorial over het maken van een knop met slechts een regel tekst in het deelvenster Uiterlijk!
Accentsconagua