Quick Tips: Lag Bright Web knapper du bruker 3D-alternativer i Illustrator
Dette innlegget er en del av en serie kalt Web og grensesnittdesign Med Vector.Quick Tips: Hvordan lage en Glossy Web stil Avrundet ButtonUse Adobe Illustrator for å lage et rent Nettstedet Layout
i denne raske spissen vi vil skape et sett av web knapper ved hjelp av 3D-effekter i Adobe Illustrator. Hvorfor? Fordi på denne måten kan vi glemme å bruke forskjellige børster og effekter for å legge høylys og skygger, og vi kan oppnå dette i et enkelt trinn, drar nytte av de lysinnstillinger og Bevel former tilgjengelig. La oss begynne!
Trinn 1. Knapp Shape
La oss starte med det grunnleggende formen for web-knappen så ta Avrundet rektangel Tool og klikk hvor som helst på artboard til åpne Avrundet rektangel vinduet. Det skriver du inn tallene som vises, og du vil få den form som vi trenger. Velg lys grå som fyllfargen
Trinn 2. 3D Innstillinger
Å ha dette rektangelet valgt, gå til effektmenyen >.; 3D > Extrude &Bevel. I høyre side av bildet under kan du se standardinnstillingene, er det bare de rotasjons koordinatene endret. Jeg ville elske å bruke Bevel former oftere, men noen ganger er de bare ikke genererer de resultatene jeg ønsker. I dette tilfellet, hvis du velger Tall-Round som Bevel forme endringen er mer enn tydelig. Du vil få den avrundede kanten og også du ikke trenger å bekymre deg for høylys og skygger senere.
Hvis du øker Høyde verdi avrundet kant blir tykkere.
I Extrude &bevel Options vinduet trykker du på knappen Flere alternativer for å åpne hele dialogen og fokus på den nederste delen. Hvis du ønsker å fremheve det øvre venstre hjørnet flytte lyset til venstre som vist nedenfor eller mot bunnen hvis du ønsker å fremheve nederst i høyre hjørne.
Trinn 3. 3D Button
endelig, her er de innstillingene som jeg har brukt. Endre koordinatene, velger Tall-Round som Bevel form, øke høyden fra fire punkter til 6 pt og flytte lyset litt til venstre.
Trinn 4. Color Button
Mens 3D-knappen er valgt, gå til Object-menyen og velg Utvid Utseende. Nå bruker Direct Selection Tool (A) for å velge den indre avrundet rektangel og fyll den med lineær gradient vist. Still inn vinkelen til 90 grader. Med dette rektangelet valgt, dobbeltklikk på Innhold (fordi denne formen er i en gruppe) i Utseende Panel og på denne måten vil du se de eksisterende attributter. Deretter går du til effektmenyen > Stilisere og anvende den indre glød effekt med de innstillingene som vises.
Trinn 5. Legg Shine
Å ha den eksisterende fylle valgt i Utseende Panel, klikk på Duplicate Selected ikonet element i bunnen og du vil få en ny fyll. Endre gradient til den som er vist ved hjelp av hvit og svart og stille inn vinkelen til 50 grader. Endre Blending Mode til Screen (svart blir gjennomsiktig) og redusere Opacity til 75%.
Duplicate denne andre fyllet som du gjorde tidligere, og beholde samme gradient. Angi vinkelen til 140 grader og øke Opasitet verdi fra 75% til 90%.
Trinn 6. Bruk en Art Brush
Nå velger å bruke Direct Selection Tool (A) den indre rektangel og fra Object-menyen velger du Kopier og lim i Front. I Lag-panelet drar den nye rektangelet utenfor button-gruppen fordi vi ikke vil ha den der. Fjern eksisterende egenskaper og gi det en svart strek. Mens dette rektangelet er valgt, gå til Object > Sti > Legg ankerpunkt to ganger for å legge til noen ekstra poeng. Deretter tar den saks Tool (C), og klikk på de to angitte punkter for å kutte formen deretter slette banen fra bunnen.
Nå trenger du en Art pensel. Jeg har forklart hvordan du gjør det i denne raske tips på Trinn 9. Den eneste forskjellen er at denne gangen jeg startet fra en 100 x 3 px ellipse istedenfor 200 x 5 px. Når du drar den inn i Børster Panel å lagre det som en ny art pensel, bruke den til å stryke banen fra toppen. Sett vekten til 2 pt.
Trinn 7. Legg Shadow
Kopier og lim foran igjen den indre rektangel og dra den utenfor button-gruppen, foran den. Fjern den eksisterende skinn og gi det en svart fill (1). Nå Kopier og lim inn Forsiden svart rektangel og endre fyllfargen, slik at du kan skille dem. Flytt den røde firkanten litt opp ved å trykke pil opp-tasten på tastaturet to ganger (2). Tastatur Økning bør settes til 1 px (Rediger > Innstillinger > Generelt).
Velg begge former, og velg Trekk fra form området > Utvid fra Pathfinder Panel. Den resulterende tynne form bør ha en svart fyll (3). Endre Blending mode til Multipliser og redusere Opacity til 20% (4).
Trinn 8. Glans
Deretter bruker Pen Tool (P) tegne en bane over knappen som på bildet nedenfor. Kopier og lim inn foran igjen den indre rektangel, fjerne eksisterende opptredener og bare gi det en svart strek. Velg denne rektangel og også den blå banen og klikk Divide i Pathfinder Panel. Fra Object-menyen velg Del opp gruppe slett form fra bunnen.
Fyll formen oppnådd med en lineær gradient fra hvitt til svart og stille inn vinkelen til minus 90 grader. Endre Blending mode til skjerm (svart blir gjennomsiktig) og redusere Opacity til 30%.
Trinn 9. Text
La oss fortsette med teksten. Med Type Tool (T) skriver " prøve nå " med en skrift som heter Anja Eliane, størrelse på 35 pt. Du kan finne fonten her. Fra Object-menyen velger Utvid deretter fylle teksten med lineær gradient vist. Still inn vinkelen til minus 45 grader. Deretter går du til effektmenyen > Stilisere og bruke Drop Shadow effekt ved hjelp av innstillingene fra nedenfor.
Nå skriver " 30 dagers prøve " bruker Arial Bold, størrelse på 15 pt velg deretter Utvid fra Object-menyen. Fyll tekst med hvit da gjelde igjen Drop Shadow effekt ved hjelp av innstillingene vist
Trinn 10. Piler
Fra Symboler Panel (menyen Vindu > symboler). Åpne Symbol biblioteker Meny og i Arrows kategorien finner Arrow 24. Dra den inn i arbeidsområdet og trykk på Bryt kobling til symbolikonet nederst i panelet. Dele den to ganger og deretter gå til effektmenyen > Stylize > Runde hjørner og påfør et 3 px Radius (1). Fyll pilen med lineær gradient vist deretter gi den en 0,5 pt Stroke med fargen som er angitt (2).
Beveg pilen på knappen og deretter gå til effektmenyen > Stilisere og bruke Drop Shadow effekt.
Å ha denne pilen valgt, velger du Utvid Utseende fra Object-menyen for å utvide de to effektene som er brukt så gå til Object-menyen > Transform > Scale, velger 80% og trykke Kopier. Du vil få mindre pilen. Ordne dem som i bildet, og sørge for at de er vannrette. Velg dem begge så gå til Object-menyen > Transform > Reflektere. Velg Vertikal deretter traff Kopier. Ordne de to nye piler på høyre side og knappen er klar.
Trinn 11. Shadow
Alt som mangler er en skygge under knappen. Ta Ellipse Tool (L) og tegn en flat ellipse nederst og velg svart som fyllfarge (1). Send denne ellipse bak knappen og deretter gå til Object-menyen > Sti > Offset Sti og påfør et minus 7 px Offset. Man vil få en mindre ellipse i midten (2). Sett Opacity for større ellipse til 0% deretter velge dem begge og gå til Object-menyen > Blend > Blend alternativer. Det velger 25 Spesifiserte trinn og gå tilbake til Object-menyen > Blend > Gjør (3). Reduser Opacity for den resulterende blanding gruppen til 75%, og hvis du setter på knappen på en bestemt bakgrunn, også endre Blending mode for å formere seg.
Her er den endelige web-knappen:
Trinn 12. Andre farger
Starter 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 under kan du se tre eksempler: blå, grønn og lilla. Alle figurene som er synlige på bildet under har ikke blitt endret. Hold dem som de er. De som er skjult betyr at de vil bli endret, og vi vil ta hver for seg.
La oss starte med avrundet rektangel. Velg den med Direct Selection Tool (A) og ta en titt på Utseende Panel. Endre første graderingsfyllet med den nye gradient vist, og holde alle andre attributter som de er. Gjør det samme for de grønne og lilla web knapper.
For teksten, bare endre midten stopp av gradient fra lys oransje til lys blå henholdsvis lys grønn og lys lilla. &Quot; 30 dagers prøve " forblir den samme.
Nå velger du pilen og endre gradient fyller deretter strøkfargen som angitt. Effektene er de samme.
Til slutt, som du gjorde i trinn 10, velger du Utvid Utseende deretter skalere pilen for å få den mindre. Reflekter to, og du er ferdig.
Final Bilde
Dette er det siste bildet og her er de fire web knapper klar til å brukes. Hvis du ønsker å lagre dem for web, sjekke ut en annen tutorial av meg der jeg forklare hvordan du gjør dette i detalj.