Share
In de volgende tutorial leer je een grungy startknop te maken. Je leert hoe je een knop in 3D-stijl en een industrieel ogende achtergrond maakt met een paar eenvoudige technieken en een paar vectortexturen. Laten we beginnen!
Maak een document van 700 bij 700 pixels en selecteer vervolgens het gereedschap Rechthoek (M). Maak een vierkant van 256 bij 256 pixels, vul het met wit en noem het "raster".
Schakel de Grid in (View> Grid) en de Snap to Grid (Beeld> Snap to Grid). 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.
Kies het gereedschap Rechthoek (M) en maak een vorm van 15 bij 395 px. Vul het met R = 255 G = 222 B = 23 en dupliceer het dan. Selecteer deze kopie, verplaats deze 15px naar rechts en vul hem met zwart. Selecteer beide rechthoeken opnieuw en ga naar Object> Vervormen en transformeren> Transformeren. Voer 12 in het vak "Exemplaren" en 30px in het vak Move-Horizontal in en klik op OK en ga naar Object> Uiterlijk uitbreiden.
Selecteer de vormen gemaakt in de vorige stap, draai ze en plaats ze boven de vorm gemaakt in de eerste stap (zoals te zien in de afbeelding hieronder). Zorg ervoor dat je het hele vierkant bedekt. Selecteer de gele vorm en ga naar Object> Samengestelde baan> Maken en selecteer vervolgens de zwarte vormen en ga opnieuw naar Object> Samengestelde baan> Maken.
Maak twee exemplaren van "Grid". Selecteer de gele vorm samen met een kopie van "Grid" en klik op de knop Kruispunt in het deelvenster Pathfinder. Selecteer de resulterende vormen en ga naar Object> Samengesteld pad> Maken. Selecteer de zwarte vorm samen met de andere kopie van "Grid" en klik op de knop Kruispunt in het deelvenster Pathfinder. Selecteer de resulterende vormen en ga naar Object> Samengesteld pad> Maken.
Selecteer de originele "Rooster" vorm en Breng het naar voren (Shift + Controle +]). Vul het met niets, voeg een 15px toe, uitgelijnd met de binnenlijn (R = 255 G = 222 B = 23) ga dan naar Object> Uiterlijk uitvouwen. Selecteer de resulterende vorm samen met de andere gele vormen en klik op de knop Unite in het deelvenster Pathfinder.
Selecteer de gele vorm, voeg een nieuwe vulling toe (in het vervolgmenu van het deelvenster Uiterlijk) en gebruik de lineaire verloop die wordt weergegeven in de tweede afbeelding. Bekijk het verloop van dichtbij, de gele tekst staat voor dekking en de witte tekst staat voor locatie. Voeg een derde vulling toe, maak deze zwart, verminder de dekking tot 5% en verander de overvloeimodus in Vermenigvuldigen. Selecteer deze vulling (vanuit het deelvenster Vormgeving), ga naar Effect> Artistiek> Filmkorrel, voer de gegevens in die onder afbeelding # 3 worden weergegeven en klik op OK. Voeg ten slotte een 2 px toe, uitgelijnd met de binnenlijn. Maak het wit en verminder de dekking tot 15%.
Kies de Ellipse Tool (L), houd Shift ingedrukt en maak een 150 bij 150 px vorm. Dubbelklik erop (in het deelvenster Lagen) en noem deze "Knop". Dupliceer deze vorm (Ctrl + C> Ctrl + F) en selecteer vervolgens de kopie en ga naar Object> Pad> Offsetpad. Voer een -5px-offset in en klik op OK. Selecteer de resulterende vorm samen met de kopie en klik op de knop Minus voorzijde in het deelvenster Pathfinder. Kies het gereedschap Rechthoek (M), maak een 150 bij 150 px vorm en plaats deze zoals getoond in de vierde afbeelding. Pak het Delete Anchor Point Tool (-) en klik op het onderste, juiste ankerpunt. Selecteer de resulterende vorm samen met de dunne vorm en klik op de minusknop aan de voorzijde in het deelvenster Pathfinder. Noem deze nieuw gemaakte vorm "Rechts".
Maak nog een kopie van "Knop". Selecteer deze kopie en ga naar Object> Pad> Offsetpad. Voer een -10px offset in en klik op OK. Selecteer de resulterende vorm samen met de kopie en klik op de knop Minus voorzijde in het deelvenster Pathfinder. Kies het gereedschap Rechthoek (M), maak een 150 bij 150 px vorm en plaats deze zoals getoond in de vierde afbeelding. Pak het gereedschap Ankerpunt verwijderen (-) en klik op het bovenste, linker ankerpunt. Selecteer de resulterende vorm samen met de dunne vorm en klik op de minusknop aan de voorzijde in het deelvenster Pathfinder. Noem deze nieuw gecreëerde vorm "Links".
Selecteer vorm "Knop" en vul deze met R = 190 G = 30 B = 45. Selecteer de vulling (in het deelvenster Vormgeving) en voeg het effect Inner Glow toe (Effect> Stylize> Inner Glow) dat wordt weergegeven onder afbeelding # 1. Voeg een nieuwe vulling toe voor deze vorm en gebruik de hieronder weergegeven radiale kleurovergang. Selecteer deze tweede vulling en verminder de dekking tot 75%.
Selecteer "Links", vul het met de lineaire verloopshow in de eerste afbeelding, verminder de dekking tot 80% en voeg vervolgens een 5px Gaussiaans vervagingseffect toe (Effect> Vervagen> Gaussiaans vervagen). Selecteer "Rechts", vul het met de tweede lineaire gradiënt, verlaag de dekking tot 30% en voeg vervolgens een 5px Gaussiaans vervagingseffect toe. Vervolgens moet je deze twee vormen maskeren. Groepeer ze (Control + G) en open het paneel Transparantie. Dubbele "knop". Selecteer deze kopie, Breng hem naar voren (Shift + Control + Rechter vierkante haak) en vul hem met wit (verwijder de extra vullingen en effecten). Selecteer deze witte vorm samen met de groep, open het vervolgmenu van het paneel Transparantie en klik op Dekkingsmasker maken. Nu zou je groep eruit moeten zien zoals in de vierde afbeelding.
Selecteer de vormen gemaakt in de laatste vier stappen en plaats ze zoals getoond in de volgende afbeelding. Maak een nieuwe kopie van "Knop" en verplaats deze onder de oorspronkelijke vorm (in het deelvenster Lagen). Selecteer deze kopie, verplaats deze meerdere pixels naar beneden en naar rechts en vul deze met zwart en voeg een 10px Gaussiaans vervagingseffect toe. Kies de Ellipse Tool (L), maak een kleinere cirkel en plaats deze zoals getoond in de tweede afbeelding. Vul deze met zwart, verminder de dekking tot 80% en voeg een 15px Gaussiaans vervagingseffect toe.
Kies het gereedschap Tekst (T), klik op je tekengebied en voeg de witte tekst "Starten" toe. Gebruik de info die wordt weergegeven in het deelvenster Teken en ga vervolgens naar Object> Uitbreiden. Selecteer de resulterende groep, voeg het Inflate-effect toe (Effect> Warp> Inflate) en ga vervolgens naar Object> Uiterlijk uitvouwen. Selecteer de resulterende vormen en ga naar Object> Samengesteld pad> Maken.
Laten we nu een grunge-effect voor de tekst toevoegen. Open het deelvenster Penselen (Venster> Penselen). Open het vervolgmenu en ga naar Open penseelbibliotheek> Artistiek> Artistic_ChalkCharcoalPencil. Kies het gereedschap Pen (P), teken een horizontaal pad (zoals in de eerste afbeelding), klik op de krijtpenseel en ga naar Object> Uiterlijk uitvouwen. Selecteer de resulterende vormen, vul ze met zwart en ga naar Object> Samengesteld pad> Maken. Open het paneel Transparantie. Selecteer de tekst samen met het zwarte pad, open het vervolgmenu van het deelvenster Transparantie, klik op Dekkingsmasker maken en schakel vervolgens het vakje Clip uit. Selecteer ten slotte deze gemaskeerde vorm en verminder de dekking op 80%.
Kies de Ellipse Tool (L), teken een 35by35px-vorm en plaats deze zoals getoond in de eerste afbeelding. Vul het met wit, verminder de dekking tot 90% en ga vervolgens naar Effect> Vervagen> Gaussiaans vervagen. Voer een straal van 15 px in en klik op OK. Selecteer het Ellipsgereedschap opnieuw (L) en teken een vorm van 15by15px. Plaats het zoals weergegeven in de tweede afbeelding, verminder de dekking tot 40% en voeg een 5px Gaussiaans vervagingseffect toe.
Groepeer alle vormen die tot nu toe zijn gemaakt (Control + G) en pak het gereedschap Rechthoek (M). Teken een vorm ter grootte van uw tekengebied (700 bij 700 px) en verzend deze naar achteren (Shift + Control + linker vierkante haak). Selecteer deze rechthoek samen met de groep, kies het selectiegereedschap (V), klik op de rand van de rechthoek (deze moet worden benadrukt) en klik vervolgens op de knoppen Horizontaal uitlijnen en Verticaal uitlijnen in het deelvenster Uitlijnen (Venster> Uitlijnen ). Nu moet uw groep in het midden van uw tekengebied worden geplaatst.
Dupliceer de groep die in de vorige stap is gemaakt. Selecteer het en klik op de knop Unite in het deelvenster Pathfinder. Selecteer de resulterende vorm samen met de grotere rechthoek en klik op de knop Minus voorzijde in het deelvenster Pathfinder.
Selecteer de vorm gemaakt in de vorige stap, vul deze met R = 40 G = 40 B = 40 en voeg een nieuwe vulling toe. Selecteer deze tweede vulling, maak deze zwart, verminder de dekking tot 10%, verander de overvloeimodus in Vermenigvuldigen en ga vervolgens naar Effect> Artistiek> Filmkorrel. Voer de onderstaande gegevens in en klik vervolgens op OK. Voeg ten slotte een 4pt toe, uitgelijnd met de binnenlijn (R = 100 G = 100 B = 100) en een 2pt, zwart, uitgelijnd met de binnenlijn.
Selecteer de groep die in de zestiende stap is gemaakt opnieuw, verplaats deze naar de bovenkant van het deelvenster Lagen en ga naar Effect> Stileren> Slagschaduw. Voer de onderstaande gegevens in, klik op OK en u bent klaar.
Nu de knop is voltooid, kunt u deze toepassen op verschillende soorten gebruik, zoals pictogrammen, webontwerpen of gebruikersinterfaces. Je kunt zelfs de technieken gebruiken die je hebt geleerd in deze tutorial om extra pictogrammen en elementen te maken voor een vrij cool ogend webontwerp.
Accentsconagua