Share
In deze snelle tip zullen we een reeks webknoppen maken met behulp van 3D-effecten in Adobe Illustrator. Waarom? Omdat we op deze manier verschillende penselen en effecten kunnen gebruiken voor het toevoegen van hooglichten en schaduwen en we dit in één stap kunnen bereiken door gebruik te maken van de beschikbare lichtinstellingen en schuine vormen. Laten we beginnen!
Laten we beginnen met de basisvorm voor deze webknop, dus neem het gereedschap Afgeronde rechthoek en klik ergens op uw tekengebied om het venster Afgeronde rechthoek te openen. Daar voert u de getoonde cijfers in en krijgt u de vorm die we nodig hebben. Selecteer lichtgrijs als vulkleur.
Als deze rechthoek is geselecteerd, ga je naar Effect-menu> 3D> Extrude & Bevel. Aan de rechterkant van de afbeelding hieronder ziet u de standaardinstellingen, alleen de rotatiecoördinaten zijn gewijzigd. Ik zou graag de Bevel-vormen vaker gebruiken, maar soms genereren ze niet de resultaten die ik wil. Als u in dit geval Tall-Round als de Bevel-vorm kiest, is de verandering meer dan duidelijk. Je krijgt de afgeronde rand en je hoeft je later ook geen zorgen te maken over de hoogtepunten en schaduwen.
Als u de waarde Height verhoogt, wordt de afgeronde rand dikker.
Druk in het venster Extrude & Bevel-opties op de knop Meer opties om het volledige dialoogvenster te openen en de aandacht op het onderste gedeelte te richten. Als u de linkerbovenhoek wilt markeren, beweegt u het licht naar links zoals hieronder aangegeven of naar beneden als u de rechteronderhoek wilt markeren.
Ten slotte zijn hier de instellingen die ik heb gebruikt. Wijzig de coördinaten, kies Tall-Round als de Bevel-vorm, verhoog de hoogte van 4 pt naar 6 pt en verplaats het licht enigszins naar links.
Terwijl de 3D-knop is geselecteerd, ga je naar het menu Object en kies je Uiterlijk uitvouwen. Gebruik nu het gereedschap Direct selecteren (A) om de binnenste afgeronde rechthoek te selecteren en vul deze met de weergegeven lineaire helling. Stel de hoek in op 90 graden. Als deze rechthoek is geselecteerd, dubbelklikt u op Inhoud (omdat deze vorm zich in een groep bevindt) in het Vormgevingspaneel en ziet u op deze manier de bestaande kenmerken. Ga vervolgens naar Effect-menu> Stileer en pas het effect Inner Glow toe met behulp van de getoonde instellingen.
Nadat de bestaande vulling is geselecteerd in het Vormgevingspaneel, klikt u onderaan op het pictogram Geselecteerd artikel en krijgt u een tweede vulling. Verander het verloop naar het verloop dat wordt weergegeven met wit en zwart en stel de hoek in op 50 graden. Wijzig de overvloeimodus in scherm (zwart wordt transparant) en verminder de dekking tot 75%.
Dupliceer deze tweede vulling zoals je eerder deed en behoud dezelfde gradiënt. Stel de hoek in op 140 graden en verhoog de dekkingsterkte van 75% naar 90%.
Selecteer nu met behulp van het gereedschap Direct selecteren (A) de binnenste rechthoek en kies Kopiëren en plakken op voorgrond in het menu Object. Sleep in het deelvenster Lagen de nieuwe rechthoek buiten de knopgroep omdat we deze daar niet willen. Verwijder de bestaande kenmerken en geef deze een zwarte lijn. Terwijl deze rechthoek is geselecteerd, gaat u twee keer naar Object> Pad> Ankerpunten toevoegen om extra punten toe te voegen. Neem vervolgens het Schaargereedschap (C) en klik op de twee aangegeven punten om de vorm te snijden en verwijder vervolgens het pad vanaf de onderkant.
Je hebt nu een kunstpenseel nodig. Ik heb uitgelegd hoe je het moet doen in deze snelle tip bij stap 9. Het enige verschil is dat ik deze keer begon met een ellips van 100 x 3 px in plaats van 200 x 5 px. Nadat u het naar het deelvenster Penselen hebt gesleept om het als een nieuwe penseel te bewaren, gebruikt u dit om het pad vanaf de bovenkant te aaien. Stel het gewicht in op 2 pt.
Kopieer en plak weer vooraan de binnenste rechthoek en sleep deze voor de rand van de knopgroep. Verwijder de bestaande verschijningen en geef deze een zwarte vulling (1). Kopieer en plak nu de zwarte rechthoek op de voorgrond en verander de vulkleur, zodat je ze kunt onderscheiden. Verplaats de rode rechthoek iets omhoog door twee keer op de pijl-omhoog op je toetsenbord te drukken (2). De toetsenbordvergroting moet worden ingesteld op 1 px (menu Bewerken> Voorkeuren> Algemeen).
Selecteer beide vormen en kies Aftrekken van vormgebied> Uitvouwen vanuit het deelvenster Pathfinder. De resulterende dunne vorm moet een zwarte vulling hebben (3). Wijzig de overvloeimodus in Vermenigvuldigen en verminder de dekking tot 20% (4).
Gebruik vervolgens het gereedschap Pen (P) om een pad over de knop te tekenen, zoals in de onderstaande afbeelding. Kopieer en plak weer vooraan de binnenste rechthoek, verwijder de bestaande verschijningen en geef het een zwarte lijn. Selecteer deze rechthoek en ook het blauwe pad en klik op Delen in het deelvenster Pathfinder. Kies in het menu Object de optie Groep opheffen en verwijder de vorm onderaan.
Vul de vorm op die is verkregen met een lineaire gradiënt van wit naar zwart en stel de hoek in op minus 90 graden. Wijzig de overvloeimodus in Scherm (zwart wordt transparant) en verminder de dekking tot 30%.
Laten we doorgaan met de tekst. Typ met het Type Tool (T) "NU PROBEREN" met een lettertype genaamd Anja Eliane, afmeting van 35 pt. Je kunt het lettertype hier vinden. Kies uit het menu Object de optie Uitvouwen en vul de tekst met het weergegeven lineaire verloop. Zet de hoek op min 45 graden. Ga vervolgens naar Effect-menu> Stileer en pas het effect Slagschaduw toe met de onderstaande instellingen.
Typ nu "30 DAGEN PROEF" met Arial Bold, met een grootte van 15 pt en selecteer vervolgens Uitbreiden in het menu Object. Vul de tekst met wit en pas opnieuw het slagschaduweffect toe met behulp van de getoonde instellingen.
Ga via het deelvenster Symbolen (Venster> Symbolen) naar het menu Symboolbibliotheken en zoek in de categorie Pijl pijlen naar pijl 24. Sleep het naar je werkgebied en druk op het pictogram Koppel aan symbool onder aan het paneel. Maak de groepering twee keer los en ga vervolgens naar Effect menu> Stileer> Ronde hoeken en pas een straal van 3 px toe (1). Vul de pijl met de getoonde lineaire helling en geef het een 0,5 pt Stroke met de aangegeven kleur (2).
Verplaats de pijl op de knop en ga vervolgens naar Effect-menu> Stileer en pas het effect Slagschaduw toe.
Als deze pijl is geselecteerd, kiest u Uiterlijk uitvouwen in het menu Object om de twee toegepaste effecten uit te vouwen. Ga vervolgens naar Object-menu> Transformeren> Schaal, kies 80% en druk op Kopiëren. Je krijgt de kleinere pijl. Leg ze in de afbeelding en zorg ervoor dat ze horizontaal zijn uitgelijnd. Selecteer ze allebei en ga vervolgens naar Object-menu> Transformatie> Reflecteren. Kies Verticaal en druk op Kopiëren. Leg de twee nieuwe pijlen aan de rechterkant en de knop is klaar.
Het enige wat ontbreekt is een schaduw onder de knop. Pak het ellipsgereedschap (L) en teken een platte ellips onderaan en selecteer zwart als vulkleur (1). Stuur deze ellips achter de knop en ga vervolgens naar Object menu> Pad> Offset pad en pas een minus 7 px offset toe. Je krijgt een kleinere ellips in het midden (2). Zet de dekking voor de grotere ellips op 0% en selecteer ze vervolgens beide en ga naar Object-menu> Blend> Mengopties. Selecteer daar 25 Specified Steps en ga terug naar Object-menu> Blend> Make (3). Verklein de dekking voor de resulterende blend-groep tot 75% en als u de knop op een bepaalde achtergrond zet, wijzigt u ook de overvloeimodus in Multiply.
Hier is de laatste webknop:
Vanaf deze knop kunt u veel andere kleurvariaties verkrijgen. Het enige dat u hoeft te doen is een kopie van de knop maken en een paar dingen wijzigen. In de afbeeldingen hieronder ziet u drie voorbeelden: blauw, groen en paars. Alle vormen die zichtbaar zijn in de onderstaande afbeelding zijn niet gewijzigd. Houd ze zoals ze zijn. Degenen die zijn verborgen, betekent dat ze zullen worden aangepast en we zullen elk afzonderlijk nemen.
Laten we beginnen met de afgeronde rechthoek. Selecteer het met het gereedschap Direct selecteren (A) en bekijk het uiterlijkvenster. Wijzig de eerste verloopvulling met het nieuwe verloop weergegeven en behoud alle andere kenmerken zoals ze zijn. Doe hetzelfde voor de groene en paarse knoppen op het web.
Wijzig voor de tekst eenvoudig de middelste stop van het verloop van lichtoranje naar lichtblauw respectievelijk lichtgroen en lichtpaars. "30 DAY TRIAL" blijft hetzelfde.
Selecteer nu de pijl en verander de verloopvulling en vervolgens de lijnkleur zoals aangegeven. De effecten blijven hetzelfde.
Ten slotte, selecteer zoals u bij stap 10 deed, Uiterlijk uitbreiden en schaal daarna de pijl om de kleinere te verkrijgen. Reflecteer de twee en je bent klaar.
Dit is de definitieve afbeelding en hier zijn de vier webknopen klaar om gebruikt te worden. Als je ze wilt opslaan voor het web, bekijk dan een andere tutorial van mij waarin ik uitleg hoe dit in detail te doen.
Accentsconagua