How å lage 3D Knapper i Illustrator

I det følgende opplæringen vil du lære å lage skinnende, 3D-knapper i Adobe Illustrator. Vi dekker en komplett arbeidsflyt og hvert skritt å ta for å skape denne høykvalitets designelement. Disse teknikkene kan brukes til å lage andre grafikk også, og er spesielt nyttig for å lage web design ikoner og grafikk.

Trinn 1

Lag en 300 x 300px dokumentet . Først aktivere Grid (View > Grid) og Fest til rutenett (View > Fest til rutenett). Deretter trenger du et rutenett hver 10px. Gå til Rediger > Preferanser > Guides & Grid, skriv "10" i "Uten kraftlinjer hver" boksen og "en" i "Underinndeling" boksen

Du kan også åpne infopanelet (Vindu > Info). For en live forhåndsvisning med størrelsen og plasseringen av dine figurer. Ikke glem å bytte måleenheten til piksler fra Rediger > Preferanser > Unit > General. Al disse alternativene vil øke arbeidshastigheten.

Trinn 2

Velg den Pen Tool (P) og lage en figur som vist i det første bildet. Ta en nærmere titt på nettet for å forstå sin eksakte størrelse. Fest til rutenett vil lette arbeidet ditt. Fylle denne form med R = 209 G = 211 B = 212 og velg rektangel Tool (M), opprette en 90px av 20px form og legg den som vist i det andre bildet. Nok en gang vil Fest til rutenett komme til nytte. Fyll den med R = 0 G = 104 B = 56.

Trinn 3

Velg former laget i forrige trinn og trykke Command + G for å gruppere dem. Velg denne gruppen og gå til Effect > 3D > Revolve. Tast inn dataene vist i følgende bilde, klikker du på OK og gå til Objekt > Utvid Utseende.

Trinn 4

Nå bør du ha en enkel gruppe figurer i Lag-panelet. Bore ned i denne gruppen, fjerne klippemasker deretter dele opp (Shift + Command + G) alle grupper og undergrupper. Hold de seks figurene vist i det andre bildet og sletter resten.

I det tredje bildet skilte jeg disse figurene, slik at du kan skille dem fra hverandre. Dobbeltklikk på hver av disse figurene (i Lag-panelet) og navngi dem fra "1" til "6" som vist nedenfor. Det vil være lettere for deg å finne dem når jeg henviser til dem i løpet av opplæringen.

Trinn 5

Deaktiver Grid og Fest til rutenett. Velg form "1," åpne flyout menyen i Utseende-panelet og klikk på Legg til ny Fill. Dette bør legge til en annen fylling for de valgte former. Velg denne nye fill (fra Utseende panel) og bruke lineær gradient vist nedenfor bilde 1.

Marker på nytt shape "1", legge til tre nye fyllinger og bruke de andre lineære gradienter vist i følgende bilder. Ta en nærmere titt på de graderinger og du vil merke de gule nuller plassert over noen av graderings glidere. Det står for Opacity. Dette betyr at du må velge de gradient slider og dårligere Opacity til 0%.

Trinn 6

La oss gå å forme "2." Velg den, legge til tre nye fills deretter bruke lineær og de radiale gradienter vist nedenfor.

Trinn 7

Fokus på Lag-panelet. Klikk på den lille sirkelen som ligger på høyre side av form "1" og dra over sirkelen ligger på høyre side av form "3." Dette vil kopiere egenskapene til form "1" for form "3." Bruker samme teknikk for å kopiere egenskapene til form "2" for form "4."

Trinn 8

La oss fortsette med formen "5." Velg den, legge til fire nye fyllinger og bruke de lineære gradienter vist nedenfor. Ikke glem å senke opacity av glidebryterne.

Step 9

Velg shape "6" legge til en ekstra fyll og bruke radial gradient vist i følgende bilde.

Trinn 10

Gå til Rediger > Preference > Generelt og skriv "1" i Tastatur verdiboksen. Velg form "1." Først traff Command + C, deretter traff Command + F to ganger. Denne kommandoen vil lage to eksemplarer av "1" plassert på samme sted. Velg den øverste kopien og traff pil opp tre ganger (for å flytte den 3px opp).

Marker på nytt begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Velg resulterende formen, gå til Utseende panel, slette fire av de fem fyllingene, og velg deretter de rester fylle, gjør det svart og senke Opacity til 5%.

Trinn 11

Gjør to kopier av form "2", velg den øverste kopiere, deretter traff pil ned og pil høyre (for å flytte den 1pt ned og 1px til høyre). Reselect disse to eksemplarer og klikk på Minus Front knappen fra Pathfinder-panelet.

Du bør få to tynne figurer. Fyll dem begge med svart og fjerne de ekstra fyllinger fra Utseende panel. Velg den øverste og senke Opacity til 10%, deretter velger den andre og senker Opacity til 25%

Step 12

Gjør ytterligere to eksemplarer av form "2." Velg den øverste kopien deretter traff pil opp tre ganger og venstre pil fem ganger (for å flytte den 3pt opp og 5px til venstre). Reselect disse to eksemplarer og klikk på Minus Front knappen fra Pathfinder-panelet. De resulterende figurer skal se ut som det andre bildet.

Fyll bunnen ett med hvit og den øverste med R = 35 G = 31 B = 32. Reselect både former og senke deres Opacity til 25%. Ikke glem å fjerne de ekstra fyllinger fra Utseende panel.

Step 13

Igjen, lage to kopier av "2." Velg den øverste kopien og traff pil opp. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Du får to tynne figurer. Fjern den øverste, og velg deretter de resterende en og fylle den med lineær gradient vist i det andre bildet (fjerner de ekstra fills).

Trinn 14

Lag to kopier av form "4 ", velg den øverste kopien deretter flytte den 1pt ned og 1px til høyre. Reselect disse to eksemplarer og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll de resulterende figurer med svart og fjerne de ekstra fyllinger fra Utseende panel. Velg den øverste formen og senke Opacity til 10%, deretter velge nederste form og senke Opacity til 25%.

Trinn 15

Gjør ytterligere to eksemplarer av form "4." Velg den øverste kopien, og deretter flytte det 3px opp og 5PX til venstre. Reselect disse to eksemplarer og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll resulterer form bunnen med hvit og topp form med R = 35 G = 31 B = 32. Reselect både former og senke deres Opacity til 25%. Igjen, ikke glem å fjerne de ekstra fyllinger fra Utseende panel.

Step 16

Igjen, lage to kopier av "4." Velg den øverste kopien og traff pil opp. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Du får to tynne figurer. Fjern den øverste, og velg deretter de resterende en og fylle den med lineær gradient vist i det andre bildet (fjerner de ekstra fills).

Trinn 17

Lag to kopier av "6. " Velg den øverste kopiere og flytte den 3px ned og 5px til høyre. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Velg resulterende formen, ta av andre fyllet fra Utseende panel, deretter fylle den med R = 24 G = 90 B = 52. Gjør ytterligere to eksemplarer av "6." Velg den øverste kopien, og deretter flytte det 3px opp og 5px til venstre.

Marker på nytt begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Velg resulterende formen, fyll den med R = 141 G = 198 B = 63 og senke Opacity til 25%. Ikke glem å fjerne andre fyllet.

Step 18

Igjen, lage to kopier av "6." Velg den øverste kopien og traff pil opp. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Velg resulterende formen og fyll den med lineær gradient vist i det andre bildet (fjerner de ekstra fills).

Trinn 19

Re-aktivere Grid og Fest til rutenett, så gjør en kopi av form "1." Velg rektangelverktøyet (M) og lage en figur som den røde vist i det første bildet. Velg denne nye formen sammen med kopi av "1", og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll den resulterende formen med hvit og senke Opacity til 20%.

Lag en annen kopi av "1", velg deretter Pen Tool (P) og lage en figur som den røde vist i tredje bildet. Reselect både former og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll formen resulterer med svart og senke Opacity til 5%.

Trinn 20

Duplicate form "3", velg deretter rektangel Tool (M), og skape en form som den røde som er vist i det første bildet. Velg denne nye formen sammen med kopi av "3", og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll formen resulterer med hvit og senke Opacity til 20%.

Lag en annen kopi av "3", velg deretter Pen Tool (P), og skape en form som den røde vist i tredje bilde . Reselect både former og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll formen resulterer med svart og senke Opacity til 5%.

Trinn 21

Duplicate form "5", velg deretter rektangel Tool (M), og skape en form som den røde som er vist i det første bildet. Velg denne nye formen sammen med kopi av "5", og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 141 G = 198 B = 63, og senke Opacity til 25%.

Lag en annen kopi av "5", velg deretter Pen Tool (P), og skape en form som den røde en er vist i det tredje bildet. Reselect både former og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll den resulterende formen med svart og senke Opacity til 10%.

Trinn 22

Deaktiver Grid og Fest til rutenett. Plukk Ellipse Tool (L) og klikk på Artboard. Ellipsen boksen skal vises. Skriv inn 264 i bredden boksen og 134 i høyden, og klikk deretter OK. Velg denne nye formen, fyll den med R = 65 G = 64 B = 66 og legge en 1pt, justert til utenfor hjerneslag (R = 147 G = 149 B = 152). Send det til Bakside (Shift + Command + Venstre Bracket nøkkel), deretter plassere det som vist i følgende bilde.

Trinn 23

Til slutt kan du endre fargen på knappen. Velg den øverste, grønne former og gruppere dem (Command + G). Plukk Selection Tool (V), velg denne gruppen klikk deretter på Recolor Artwork ikonet plassert på den øverste linjen. Først klikker på Rediger. Deretter klikker du på Harmony farger ikonet Link å gjøre glidere flytte proporsjonalt. Nå kan du spille med sensoren og Lysstyrke justerer til du får den ønskede farger.

Konklusjon

Du kan endre fargene som du ser passer. Det siste bildet er nedenfor. Anmeldelser