Share
I dette raske tipset vil vi lage et sett med webknapper ved hjelp av 3D-effekter i Adobe Illustrator. Hvorfor? Fordi vi på denne måten kan glemme å bruke forskjellige børster og effekter for å legge til høydepunkter og skygger, og vi kan oppnå dette i ett enkelt trinn, dra nytte av lysinnstillingene og tilgjengelige fasadeformer. La oss begynne!
La oss begynne med den grunnleggende formen for denne webknappen, så ta det avrundede rektangelverktøyet og klikk hvor som helst på tavlen din for å åpne vinduet Rundet rektangel. Der, skriv inn tallene som vises, og du vil få den formen vi trenger. Velg lys grå som fyllfarge.
Når du har valgt dette rektangelet, går du til Effektmeny> 3D> Ekstruder og kommando. På høyre side av bildet nedenfor kan du se standardinnstillingene, bare rotasjonskoordinatene endres. Jeg vil gjerne bruke kommandoformene oftere, men noen ganger genererer de ikke bare resultatene jeg vil ha. I dette tilfellet, hvis du velger Tall-Round som Form-formen, er endringen mer enn åpenbar. Du får den avrundede kanten, og du trenger ikke å bekymre deg om høydepunktene og skyggene senere.
Hvis du øker høydeverdien blir den avrundede kanten tykkere.
I vinduet Ekstruder og kommandoalternativer trykker du på knappen Flere alternativer for å åpne hele dialogboksen og fokusere på bunnen. Hvis du vil markere øverste venstre hjørne, flytt lyset til venstre som angitt nedenfor eller mot bunnen hvis du vil markere nederste høyre hjørne.
Til slutt, her er innstillingene jeg har brukt. Endre koordinatene, velg Tall-Round som Form-form, øk høyden fra 4 pt til 6 pt og flytt lyset litt til venstre.
Mens 3D-knappen er valgt, går du til Objekt-menyen og velger Utvid utseende. Nå, bruk Direct Selection Tool (A) til å velge det indre avrundede rektangelet og fyll det med den lineære gradienten som vises. Still vinkelen til 90 grader. Med dette rektangelet valgt, dobbeltklikk på Innhold (fordi denne formen er i en gruppe) i Utseendepanelet, og på denne måten vil du se de eksisterende attributter. Deretter går du til Effect-menyen> Stylize og bruker Inner Glow-effekten med de viste innstillingene.
Hvis du har den eksisterende fyllingen valgt i Utseendepanelet, klikker du på Duplicate Selected Item-ikonet nederst, og du får en ny fylling. Endre gradienten til den som vises med hvit og svart og sett vinkelen til 50 grader. Endre blandemodus til skjerm (svart blir gjennomsiktig) og redusere opaciteten til 75%.
Dupliser denne andre fyllingen som du gjorde tidligere og hold samme gradient. Still vinkelen til 140 grader og øk Opacity-verdien fra 75% til 90%.
Nå, velg ved å bruke Direct Selection Tool (A) det indre rektangelet og fra Objekt-menyen, velg Kopier og lim inn foran. I panelet Lag drar du det nye rektangelet utenfor knappegruppen fordi vi ikke vil ha det der. Fjern de eksisterende attributter og gi det et svart slag. Mens dette rektangelet er valgt, går du til Objekt> Sti> Legg til ankerpoeng to ganger for å legge til ekstra poeng. Deretter tar du saksverktøyet (C) og klikker på de to angitte punktene for å kutte formen og deretter slette banen fra bunnen.
Nå trenger du en kunstpensel. Jeg har forklart hvordan du gjør det i dette raske tipset i trinn 9. Den eneste forskjellen er at denne gangen startet jeg fra en 100 x 3 px ellipse i stedet for 200 x 5 px. Etter at du har trukket den inn i børstepanelen for å lagre den som en ny kunstbørste, bruk den til å berøre banen fra toppen. Still vekten til 2 pt.
Kopier og lim inn foran det indre rektangelet igjen og dra det utenfor knappegruppen foran den. Fjern eksisterende utseende og gi den en svart fylling (1). Nå, Kopier og lim inn foran det svarte rektangelet og endre fyllfargen slik at du kan skille dem. Flytt det røde rektangelet litt opp ved å trykke to ganger opp pilknappen på tastaturet (2). Tastaturøkningen skal settes til 1 px (Rediger-meny> Innstillinger> Generelt).
Velg begge figurene og velg Subtract fra formområde> Utvid fra Pathfinder Panel. Den resulterende tynne formen skal ha en svart fylling (3). Endre blandingsmodus til Multiply og reduser Opacity til 20% (4).
Deretter tegner du en bane over knappen som i bildet nedenfor ved hjelp av pennverktøyet (P). Kopier og lim inn foran rektanglet igjen, fjern de eksisterende utseendet og bare gi det et svart slag. Velg dette rektangelet og også den blå banen og klikk på Divide i Pathfinder Panel. Fra Objekt-menyen velg Ungroup, og slett deretter formen fra bunnen.
Fyll formen oppnådd med en lineær gradient fra hvitt til svart og sett vinkelen til minus 90 grader. Endre blandingsmodus til skjerm (svart blir gjennomsiktig) og reduser opaciteten til 30%.
La oss fortsette med teksten. Med Type Tool (T) type "TRY NOW" ved hjelp av en skrift som heter Anja Eliane, størrelse på 35 pt. Du kan finne skriften her. Fra Objekt-menyen velger du Utvid, og fyll deretter teksten med den lineære gradienten som vises. Still vinkelen til minus 45 grader. Deretter går du til Effect-menyen> Stylize og bruker Drop Shadow-effekten ved hjelp av innstillingene nedenfor.
Skriv inn "30 DAY TRIAL" ved å bruke Arial Bold, størrelse på 15 pt og velg deretter Utvid fra Objekt-menyen. Fyll teksten med hvit og bruk deretter Drop Shadow-effekten igjen med de viste innstillingene.
Fra Symbol-panelet (Vindu-meny> Symboler) åpner du menyen Symbolbibliotek og i pilen-kategorien finner du pil 24. Dra det inn i arbeidsområdet og trykk på ikonet Break Link to Symbol nederst på panelet. Opphev det to ganger, gå til Effektmeny> Stylize> Round Corners og bruk en 3 px Radius (1). Fyll pilen med den lineære gradienten som vises, og gi den en 0,5 pt Stroke ved å bruke den angitte fargen (2).
Flytt pilen på knappen og gå til Effect-menyen> Stylize og bruk Drop Shadow-effekten.
Når du har valgt denne pilen, velger du Utvid utseende fra Objekt-menyen for å utvide de to effektene som er brukt, gå til Objekt-menyen> Transform> Skala, velg 80% og klikk Kopier. Du får den mindre pilen. Ordne dem som i bildet og sørg for at de er horisontalt justert. Velg dem begge og gå til Objekt-menyen> Transform> Reflektere. Velg Vertikal, og klikk deretter Kopier. Ordne de to nye pilene på høyre side og knappen er klar.
Alt som mangler er en skygge under knappen. Ta Ellipseverktøyet (L) og tegne en flat ellipse nederst, og velg deretter svart som fyllfarge (1). Send denne ellipsen bak knappen, og gå til Objekt-menyen> Sti> Offset-banen og bruk en minus 7 px Offset. Du får en mindre ellipse i midten (2). Sett Opacity for den større ellipsen til 0%, velg dem begge og gå til Objekt-menyen> Blend> Blend Options. Der velger du 25 angitte trinn og går tilbake til Objekt-menyen> Blend> Lag (3). Reduser Opacity for den resulterende blandegruppen til 75%, og hvis du legger knappen på en bestemt bakgrunn, endrer du også Blandingsmodus til Multiply.
Her er den endelige webknappen:
Fra denne knappen kan du få mange andre fargevariasjoner. Alt du trenger å gjøre er å lage en kopi av knappen og endre noen ting. I bildene nedenfor kan du se tre eksempler: blå, grønn og lilla. Alle figurene som er synlige i bildet nedenfor, er ikke endret. Hold dem som de er. De som er skjulte betyr at de vil bli modifisert, og vi vil ta hver for seg.
La oss starte med det avrundede rektangel. Velg den med Direct Selection Tool (A) og ta en titt på Utseendepanelet. Endre den første gradientfyllingen med den nye gradienten som vises, og hold alle de andre attributene som de er. Gjør det samme for de grønne og lilla webknappene.
For teksten, endrer du mellomstoppet av gradienten fra lysorange til lyseblå, henholdsvis lysegrønn og lyselilla. "30 DAGSPRØVE" forblir det samme.
Nå velger du pilen og endrer gradientfyllingen og strekkfargen som angitt. Effektene forblir de samme.
Til slutt, som du gjorde i trinn 10, velger du Utvid utseende og skala pilen for å oppnå den minste. Reflekter de to, og du er ferdig.
Dette er det endelige bildet, og her er de fire webknappene klar til bruk. Hvis du vil lagre dem for web, sjekk ut en annen veiledning av meg der jeg forklarer hvordan dette gjøres i detalj.
Accentsconagua