Share
I den følgende opplæringen lærer du å lage en grungy startknapp. Du lærer hvordan du lager en 3D-stilknapp og en industriell leter bakgrunn med noen enkle teknikker, noe vektortekstur. La oss begynne!
Opprett et 700 til 700 px dokument, og velg deretter Rektangulærverktøyet (M). Lag en 256 x 256 px firkant, fyll den med hvitt og navnet den "Grid".
Aktiver gridet (Vis> Grid) og Snap to Grid (Vis> Snap to Grid). Deretter trenger du et rutenett hver 5px. Gå til Rediger> Innstillinger> Guider og rutenett, skriv inn 5 i Rutenettlinjen hver boks og 1 i Retningslinjene underdelinger. Du kan også åpne Info-panelet (Vindu> Info) for et forhåndsvisning med størrelsen og plasseringen av figurene dine. Ikke glem å bytte måleenheten til piksler fra Rediger> Innstillinger> Enhet> Generelt. Alle disse alternativene vil øke arbeidshastigheten betydelig.
Velg rektangulærverktøyet (M) og opprett en form av 15 ved 395 px. Fyll det med R = 255 G = 222 B = 23 og dupliser det deretter. Velg denne kopien, flytt den 15px til høyre og fyll den med svart. Velg begge rektangler og gå til Objekt> Forvreng & Transform> Transform. Skriv inn 12 i boksen "Kopier" og 30px i boksen Flytt horisontal, klikk deretter OK og gå til Objekt> Utvid utseende.
Velg figurene som ble gjort i forrige trinn, roter dem og legg dem over formen som ble gjort i første trinn (som vist på bildet nedenfor). Pass på at du dekker hele torget. Velg den gule formen og gå til Objekt> Sammensatt sti> Velg deretter de svarte figurene og gå igjen til Objekt> Sammensatt sti> Lag.
Lag to kopier av "Grid". Velg den gule formen sammen med en kopi av "Grid" og klikk på Intersect-knappen fra Pathfinder-panelet. Velg de resulterende figurene og gå til Objekt> Sammensatt sti> Lag. Velg den svarte formen sammen med den andre kopien av "Grid" og klikk på Intersect-knappen fra Pathfinder-panelet. Velg de resulterende figurene og gå til Objekt> Sammensatt sti> Lag.
Velg den opprinnelige "Grid" -formen og Ta den til Front (Shift + Control +)). Fyll det med ingen, legg til en 15px, justert til innvendig strekk (R = 255 G = 222 B = 23) og gå til Objekt> Utvid Utseende. Velg den resulterende formen sammen med de andre gule figurene og klikk på Unite-knappen fra Pathfinder-panelet.
Velg den gule formen, legg til en ny fylling (fra flytmenyen til Utseendepanelet) og bruk den lineære gradienten som vises i det andre bildet. Ta en nærmere titt på graden, den gule teksten står for Opacity og den hvite teksten står for Location. Legg til en tredje fyll, gjør den svart, senk dens opasitet til 5% og endre blandingsmodusen til Multiply. Velg denne fyllingen (fra Utseendepanelet), gå til Effekt> Kunstnerisk> Filmkorn, skriv inn dataene som vises under bilde nr. 3, og klikk OK. Til slutt legger du til en 2px, justert til innsiden. Gjør det hvitt og senk dets opasitet til 15%.
Velg Ellipseverktøyet (L), hold Shift og opprett 150 px 150 px form. Dobbelklikk på den (i lagpanelet) og kaller det "Knapp". Dupliser denne formen (Control + C> Control + F), velg deretter kopien og gå til Objekt> Sti> Offset Path. Skriv inn en -5px Offset og klikk OK. Velg den resulterende formen sammen med kopien og klikk på Minus Front-knappen fra Pathfinder-panelet. Velg rektangulærverktøyet (M), opprett en 150 x 150 px form og legg den som vist på det fjerde bildet. Ta tak i Slett ankerpunktsverktøyet (-) og klikk på nederste, høyre ankerpunkt. Velg den resulterende formen sammen med tynn form og klikk på Minus Front-knappen fra Pathfinder-panelet. Navn denne nyopprettede formen "Høyre".
Lag en annen kopi av "Knapp". Velg denne kopien og gå til Objekt> Path> Offset Path. Skriv inn en -10px Offset og klikk OK. Velg den resulterende formen sammen med kopien og klikk på Minus Front-knappen fra Pathfinder-panelet. Velg rektangulærverktøyet (M), opprett en 150 x 150 px form og legg den som vist på det fjerde bildet. Ta tak i Slett ankerpunktsverktøyet (-) og klikk på det øverste, venstre ankerpunktet. Velg den resulterende formen sammen med tynn form og klikk på Minus Front-knappen fra Pathfinder-panelet. Navn denne nyopprettede formen "Venstre".
Velg form "Knapp" og fyll den med R = 190 G = 30 B = 45. Velg fyllingen (fra Utseende panelet) og legg til Inner Glow-effekten (Effekt> Stylize> Inner Glow) vist under bilde # 1. Legg til en ny fylling for denne formen og bruk den radiale gradienten som vises nedenfor. Velg denne andre fyllingen og senk dens opasitet til 75%.
Velg "Venstre", fyll det med den lineære gradientvisningen i det første bildet, senk dets opasitet til 80%, og legg deretter til en 5px Gaussian Blur-effekt (Effect> Blur> Gaussian Blur). Velg "Høyre", fyll den med den andre lineære gradienten, senk dens opasitet til 30%, og legg deretter til en 5px Gaussian Blur-effekt. Deretter må du maskere disse to figurene. Grupper dem (Control + G) og åpne transparentpanelet. Dupliser "Knapp". Velg denne kopien, ta den til forsiden (Shift + Control + Høyre kvadratkonsoll) og fyll den med hvit (fjern ekstra fyll og effekter). Velg denne hvite formen sammen med gruppen, åpne flytmenyen til gjennomsiktighetspanelet og klikk på Make Opacity Mask. Nå skal gruppen din se som vist i fjerde bilde.
Velg figurene som ble gjort i de siste fire trinnene, og plasser dem som vist i bildet nedenfor. Lag en ny kopi av "Knapp" og flytte den under den opprinnelige formen (i Lagpanelet). Velg denne kopien, flytte den flere piksler ned og til høyre og fyll den med svart og legg til en 10px Gaussian Blur-effekt. Velg Ellipseverktøyet (L), lag en mindre sirkel, og sett den som vist i det andre bildet. Fyll den med svart, senk dens opasitet til 80%, og legg til en 15px Gaussian Blur-effekt.
Velg Typeverktøyet (T), klikk på Artboard og legg til den hvite "Start" -teksten. Bruk informasjonen som vises i tegnpanelet, og gå til Objekt> Utvid. Velg den resulterende gruppen, legg til Oppblåsingseffekten (Effekt> Varsel> Oppblås) og gå til Objekt> Utvid utseende. Velg de resulterende figurene og gå til Objekt> Sammensatt sti> Lag.
La oss nå legge til en grungeeffekt for teksten. Åpne panelet Pensler (Vindu> Pensler). Åpne flytmenyen og gå til Open Brush Library> Artistic> Artistic_ChalkCharcoalPencil. Plukk pennverktøyet (P), tegne en horisontal bane (som vist på det første bildet), klikk på Kalkbørsten, og gå til Objekt> Utvid utseende. Velg de resulterende figurene, fyll dem med svart og gå til Objekt> Sammensatt sti> Lag. Åpne gjennomsiktighetspanelet. Velg teksten sammen med den svarte banen, åpne flytmenyen til gjennomsiktighetspanelet, klikk på Make Opacity Mask, og fjern deretter merket for Utklipps-boksen. Til slutt velger du denne maskerte formen og senker dens opasitet til 80%.
Velg Ellipseverktøyet (L), tegne en 35by35px-form og plasser den som vist på det første bildet. Fyll den med hvit, senk dens opasitet til 90%, og gå til Effekt> Uklarhet> Gaussisk uskarphet. Skriv inn en 15px radius og klikk OK. Velg Ellipseverktøyet (L) og trekk en form 15by15px. Plasser den som vist i det andre bildet, senk opaciteten til 40% og legg til en 5px Gaussian Blur-effekt.
Grupper alle former som er opprettet så langt (Control + G), og ta tak i rektangulærverktøyet (M). Tegn en form på størrelsen på tavlen din (700 ved 700px) og send den til baksiden (Shift + Control + Left Square Bracket). Velg dette rektangelet sammen med gruppen, velg seleksjonsverktøyet (V), klikk på grensen til rektangelet (det bør legges vekt på), og klikk deretter på Horisontale justeringssenter og Vertikale justeringssenterknapper fra Juster-panelet (Vindu> Juster ). Nå bør gruppen din plasseres i midten av tavlen din.
Dupliserer gruppen som ble gjort i forrige trinn. Velg den og klikk på Unite-knappen fra Pathfinder-panelet. Velg den resulterende formen sammen med større rektangel og klikk på Minus Front-knappen fra Pathfinder-panelet.
Velg formen som ble gjort i forrige trinn, fyll den med R = 40 G = 40 B = 40 og legg til en ny fylling. Velg denne andre fyllingen, gjør den svart, senk dens opasitet til 10%, endre blandingsmodus til Multiply, og gå deretter til Effect> Artistic> Film Grain. Skriv inn dataene som vises nedenfor, og klikk deretter OK. Til slutt legger du til en 4pt, justert til innsidenslag (R = 100 G = 100 B = 100) og en 2pt, svart, justert til innsiden.
Velg gruppen som ble gjort i det sekstende trinnet, flytt det øverst i lagpanelet og gå til Effekt> Stylize> Drop Shadow. Skriv inn dataene som vises nedenfor, klikk OK, og du er ferdig.
Nå som knappen er fullført, kan du bruke den til en rekke bruksområder, for eksempel ikoner, webdesign eller brukergrensesnitt. Du kan til og med bruke teknikkene du har lært i denne opplæringen, for å lage flere ikoner og elementer for et ganske kult utseende webdesign.
Accentsconagua