Lag et sett med Pixel perfekt hånd Markører i Adobe Illustrator

Create et sett med Pixel perfekt hånd Markører i Adobe Illustrator

I de følgende trinnene vil du lære å lage et sett med piksel perfekte hånd pekere i Adobe Illustrator. For det første vil du lære hvordan å forberede det nye dokumentet og hvordan sette opp en enkel rutenett. Deretter bruker rektangelverktøyet, Ellipse Tool og Pen Tool sammen med avrundede hjørner effekten vil du lære å lage figurene som utgjør hånden pekere. Flytte på, ved hjelp av grunnleggende vektor form byggeteknikker, et enkelt slag, en lineær gradient, noen Drop Shadow effekter og et enkelt transformere effekt du vil lære hvordan du legger farge, høydepunkter og skyggelegging for den siste hånden pekere.



1. Opprett et nytt dokument og oppsett et rutenett

Hit Ctrl + N for å opprette et nytt dokument. Skriv inn 600 i boksen Bredde og 300 i høyde boksen klikk deretter på knappen Avansert. Velg RGB, Screen (72ppi) og sørg for at Align nye objekter være Pixel Grid er merket før du klikker OK.

Aktiver Grid (View > Vis rutenett) og Fest til rutenett (View > Fest til rutenett). Du trenger et rutenett hver 1px, så bare gå til Rediger > Preferanser > Guides > Grid, skriv en i linjenettet hver boks og en i underinndelinger boksen. Du bør også åpne infopanelet (Vindu > Info) for en live forhåndsvisning med størrelsen og plasseringen av figurer. Ikke glem å sette måleenheten til piksler fra Rediger > Preferanser > Units > General. Alle disse alternativene vil øke arbeidshastigheten.

2. Lag start Shapes

Trinn 1

Velg den rektangelverktøyet (M) og fokus på verktøylinjen. Fjerne fargen fra slaget velg deretter fyll og sette farge på rød (R = 237 G = 28 B = 36). Flytt til Artboard, bare lage en 4 x 15 pikslers rektangel og senke Opacity til 30%. Senking tettheten av formen vil gjøre det lettere for deg å se rutenettet i ryggen som vil gjøre det lettere for deg å forstå nøyaktig posisjonering for hver figur. Kontroller at rektangelet er fortsatt valgt og gå til Effect > Stylize > Avrundede hjørner. Skriv en 2 piksler radius, og klikk OK.

Kontroller at rektangelverktøyet (M) forblir aktiv, skape en 6 x 10px form, legg den som vist i det andre bildet, senke Opacity til 30% og trykke Shift + Ctrl + E for å legge til at samme 2px avrundede hjørner effekt. Lag en 6 x 9px form, legg den som vist i tredje bildet, senke Opacity til 30% og trykke Shift + Ctrl + E. slutt oppretter en 6 x 7px form, legg den som vist i fjerde bildet, senke opacity til 30% og trykke Shift + Ctrl + E.

Trinn 2

Bruke Ellipse Tool (L), opprette en 4px sirkel, fyll den med den samme røde (R = 237 G = 28 B = 36), plasser den som vist i følgende bilde og senke Opacity til 30%. Bytt til rektangelverktøyet (M), opprette en 8 x 10px form, legg den som vist i følgende bilde og senke Opacity til 30%.

Trinn 3

Fokus på høyre side av rektangelet og velge Pen Tool (P). Sett fyllfarge på svart, senk Opacity til 30% og lage en " L " bane som vises i det første bildet. Sørg for at denne nye banen forblir valgt, legge til et fjerde ankerpunkter som vist i det andre bildet og dra håndtakene 2PX opp og 1px til høyre. Flytt opp, legge til en femtedel forankringspunkt som vist i tredje bildet og dra håndtakene 2 piksler opp. Hold Alt-tasten på tastaturet, klikk på denne femte forankringspunkt så bare klikk på startforankringspunkt for å lukke banen.

Trinn 4

Fokus på venstre side av rød firkant, plukke Pen Tool (P) og lage en bane som vist i det første bildet. Sørg for at denne nye banen forblir valgt, legge til et fjerde ankerpunkter som vist i det andre bildet og dra håndtakene 2PX opp og 1px til venstre. Flytt ned, legge til en femtedel forankringspunkt som vist i tredje bildet og dra håndtakene 4px ned. Hold Alt-tasten på tastaturet, klikk på denne femte forankringspunkt så bare klikk på startforankringspunkt for å lukke banen. Til slutt, sørg for at formen gjort i dette trinnet er fylt med svart og senke Opacity til 30%.

Trinn 5

Velg alle figurene laget så langt og konsernet dem (Control + G). Flytt til Lag-panelet (Vindu > Layers), dobbeltklikk på denne nye gruppen og gi den navnet " pointerHandCursor
". Kopiere denne gruppen (Ctrl + C > Ctrl + F), velge kopi og og dra den til høyre, som vist i det andre bildet. Gå tilbake til Lag-panelet og kalle denne nye gruppen " palmHandCursor
". Hold fokus på denne andre grupper, velger de fire avrundede rektangler og bare slette dem

Trinn 6

Fokus på ". palmHandCursor
" gruppe og plukke rektangel Tool (M). Opprett en 4 x 13 piksler form og legg den som vist i det første bildet. Fyll den med rød, senke Opacity til 30% og gå til Effect > Stylize > Avrundede hjørner. Skriv en 2 piksler radius, og klikk OK. Kontroller at rektangelverktøyet (M) forblir aktiv, lage et 4 x 14 piksler form, legg den som vist i det andre bildet, senke Opacity til 30% og trykke Shift + Ctrl + E.

Opprett en andre, 4 x 14 piksler form, legg den som vist i tredje bildet, senke Opacity til 30% og trykke Shift + Ctrl + E. slutt lage et 4 x 11px form, legg den som vist i fjerde bildet, lavere er opacity til 30% og trykke Shift + Ctrl + E. Fokus på Lag-panelet, velger de fire avrundede rektangler gjort i dette trinnet og bare dra dem inn i " palmHandCursor
" gruppe

Trinn 7

Duplicate (Ctrl + C > Control + F). " palmHandCursor
" gruppe, velger du kopiere og og dra den til høyre, som vist i det andre bildet. Gå tilbake til Lag-panelet og kalle denne nye gruppen " fistHandCursor
". Hold fokus på denne tredje grupper, velger de fire avrundede rektangler sammen med 20px sirkel og bare slette dem

Trinn 8

Fokus på ". fistHandCursor
" gruppe og ta tak i Ellipse Tool (L). Lag en 6PX sirkel, fyll den med rød, senke Opacity til 30% og plasser den som vist i det første bildet. Plukk rektangel Tool (M). Opprett en 4 x 9px form og legg den som vist i det andre bildet. Fyll den med rød, senke Opacity til 30% og gå til Effect > Stylize > Avrundede hjørner. Skriv en 2 piksler radius, og klikk OK. Kontroller at rektangelverktøyet (M) forblir aktiv, lage et 4 x 10px form, legg den som vist i tredje bildet, senke Opacity til 30% og trykke Shift + Ctrl + E.

Opprett en 4 x 9px form, legg den som vist i fjerde bildet, senke Opacity til 30% og trykke Shift + Ctrl + E. slutt lage et 4 x 7px form, legg den som vist i den femte bildet, senke Opacity til 30% og trykke Shift + Ctrl + E. Fokus på Lag-panelet, velger de fire avrundede rektangler og 6PX sirkel som er gjort i dette trinnet og bare dra dem inn i " fistHandCursor
" gruppe.

3. Lag den viktigste Pointer Håndmarkør Former

Trinn 1

Velg " pointerHandCursor
" gruppe, gå til Object > Utvid Utseende åpne Pathfinder-panelet (Vindu > Pathfinder) og klikk på Unite-knappen. Velg den resulterende form, øke Opacity til 100% og fokus på utseendet panelet (Vindu > Utseende). Fjerne fargen fra fyllingen, legge til en 1pt slag og velg den. Sett farge på R = 70 G = 70 B = 70, justere den til innsiden og åpne Strek-panelet (Vindu > Stroke). Fokus på Corner delen og bare sjekke den runde knappen Bli med. Når du er ferdig går du til Object > Sti > Outline Stroke.

Velg den rektangelverktøyet (M), lage to, 1 x 3px former, en 1 x 4 piksler form og en 1 x 5px form. Fylle alle fire former med R = 70 G = 70 B = 70 og plassere dem som er vist i den fjerde bilde. Når du er ferdig, velger du alle former laget i dette trinnet, og klikk på Unite knappen fra Pathfinder-panelet.

Trinn 2

Bruke rektangelverktøyet (M), lage en 21 x 26px rektangel, fyll den med hvit, plasser den som vist i det første bildet og sende den til å sikkerhets (Shift + Control + [). Velg denne hvite rektangelet sammen med hånden kontur og klikk på Divide knappen fra Pathfinder-panelet. Sørg for at den resulterende gruppen er valgt og bare trykke Shift + Ctrl + G løse opp det. Velg den ytre hvit form og slette det og velger den indre hvite formen og sett den hvite med lineær gradient som vises i det endelige bildet.

4. Legg Høydepunkter og skyggelegging for Pointer Håndmarkør

Trinn 1

Deaktiver Fest til rutenett (Vis> Fest til rutenett) og deretter gå til Rediger> Innstillinger> Generelt og sørge for at tastaturet Økning er satt til 1px. Reselect formen fylt med lineær gradient og lage to kopier foran (Ctrl + C > Ctrl + F > Control + F). Velg den øverste kopien og traff høyre piltast én gang for å flytte den 1PX til høyre. Reselect både kopier og klikk på Minus Front knappen fra Pathfinder-panelet. Velg den resulterende gruppe av former, slå den inn i en sammensatt bane (Control + 8 eller Object > sammensatt bane > Lag) og angi fyllfargen på R = 205 G = 205 B = 205

Step. 2

Velg det form fylt med lineær gradient og gjør ytterligere to eksemplarer foran (Ctrl + C > Ctrl + F > Control + F). Velg den øverste kopien og traff venstre pil en gang for å flytte den 1PX til venstre. Reselect både kopier og klikk på Minus Front knappen fra Pathfinder-panelet. Velg den resulterende gruppe av former, slå den inn i en sammensatt bane (Control + 8 eller Object > sammensatt bane > Lag). Og angi fyllfargen på hvitt

Trinn 3

reselect formen fylt med lineær gradient og gå til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i det venstre vinduet (i følgende bilde), klikk på OK og gå igjen til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i vinduet til høyre (i følgende bilde) og klikk OK.

Trinn 4

Aktiver Fest til rutenett (Vis> Fest til rutenett). Bruke rektangelverktøyet (M), opprette en 1 x 3px form og fylle det med R = 215 G = 215 B = 215. Plasser denne lille rektangel som vist i følgende bilde og gå til Effect > Forvrenge & Transform > Transform. Skriv inn egenskapene som vises nedenfor og klikk på OK.

5. Lag Palm håndpekeren

Trinn 1

Velg " palmHandCursor
" gruppe, gå til Object > Utvid Utseende og klikk på Unite knappen fra Pathfinder-panelet. Velg den resulterende form, øke Opacity til 100% og fokus på utseendet panelet (Vindu > Utseende). Fjerne fargen fra fyllingen, legge til en 1pt slag og velg den. Sett farge på R = 70 G = 70 B = 70, justere den til inne og sjekke Round Bli knappen fra Strek-panelet. Når du er ferdig går du til Object > Sti > Outline Stroke.

Velg den rektangelverktøyet (M), lage to, 1 x 8 piksler former og en 1 x 7px form. Fyll alle fire figurer med R = 70 G = 70 B = 70 og plassere dem som vist i tredje bildet. Grab Direct Selection Tool (A), fokus på oversiden av venstre rektangelet, velg venstre forankringspunkt og bare dra den 1px ned. Når du er ferdig, velger du alle former laget i dette trinnet, og klikk på Unite knappen fra Pathfinder-panelet.

Trinn 2

Fokus på hånden kontur gjort i forrige trinn, og gjenta teknikker og effekter som brukes for pekeren hånd markøren. Til slutt ting skal se ut i følgende bilde.

6. Lag Fist Håndmarkør

Trinn 1

Velg " fistHandCursor
" gruppe, gå til Object > Utvid Utseende og klikk på Unite knappen fra Pathfinder-panelet. Velg den resulterende form, øke Opacity til 100% og fokus på utseendet panelet (Vindu > Utseende). Fjerne fargen fra fyllingen, legge til en 1pt slag og velg den. Sett farge på R = 70 G = 70 B = 70, justere den til inne og gå til Object > Sti > Outline Stroke.

Velg den rektangelverktøyet (M), opprette tre, 1 x 4 piksler former og en 1 x 2 piksler form. Fyll alle fire figurer med R = 70 G = 70 B = 70 og plassere dem som vist i tredje bildet. Grab Direct Selection Tool (A), fokus på oversiden av midten 1 x 4px rektangel, velger du venstre forankringspunkt og bare dra den 1px ned. Flytt til høyre 1 x 4px rektangel, fokus på oversiden, velge riktig ankerpunkt og bare dra den 1px ned. Når du er ferdig, velger du alle former laget i dette trinnet, og klikk på Unite knappen fra Pathfinder-panelet.

Trinn 2

Fokus på hånden kontur gjort i forrige trinn, og gjenta teknikker og effekter som brukes til de andre to hånd pekere. Til slutt ting skal se ut i følgende bilde.

Gratulerer! Du er ferdig!

Her er hvordan det skal se ut. Jeg håper du har hatt glede av denne opplæringen, og kan bruke disse teknikkene i din fremtidige prosjekter.

Hvis du er interessert i å lage Abonner-knappen, sjekk ut denne kjekk liten tutorial på å lage en knapp med bare en tekstlinje i Utseende-panelet!