Share
Salt og pepper, penn og papir, kaker og melk, selv om de er alle gode alene, fungerer disse sammen for å få det beste ut i hverandre. Adobe Illustrator og Adobe Photoshop er ikke noe unntak. I dag vil jeg vise deg hvordan du bruker Illustrator til å designe en spilleknapp og hvordan du kan forbedre vektorer med bruk av Photoshop. Denne teknikken er spesielt nyttig for folk som ønsker å lage ikoner og UI-design. La oss komme i gang!
Start med å lage et nytt dokument i illustrator (jeg har gjort det 800 x 800 px). Velg "Avrundet rektangulærverktøy" (med hjørneradius på 100px) og opprett en form som ser ut som en avrundet knapp. Velg deretter "Rektangelverktøy", opprett et rektangel og senter det til det avrundede rektangel. Dette vil være for spillknappen.
Arbeid på det andre rektangelet ("spille" rektangel). Gå til Effect> Distort & Transform> Pucker & Bloat for å gjøre rektangelet buet. Fyll opp boksen i vinduet (jeg har brukt 6%) og trykk OK, og deretter gå til Objekt> Utvid Utseende.
For å lage "play" -ikonet, velg "Star Tool", åpne Star Tool dialog og skriv inn følgende innstillinger.
Opprett nå "neste" og "forrige" ikoner. Først dupliser spilleikonet ved å velge + Klikk + Dra (hvor som helst du vil), gjør det samme, men denne gangen drar du det til høyre (du kan holde Shift-tasten for å flytte objektet i en rett linje). Velg de to trekanter, klikk på "Add to Shape Area" -knappen og klikk deretter "Utvid", endre størrelse og reposisjon.
Opprett ikonet "Forrige" ved å gå til Objekt> Transform> Reflektere> Vertikal og klikk "Kopier". Flytt den på plass, og du har nettopp laget deg noen spillerknapper.
Legg fargene til knappene. "Play" -knappen har en fylling på # 506670 et slag på # 2C515E. Knappene "Neste" og "Forrige" har en fylling på # 85D4D6 og et slag på # 27A0A0.
For å lage den nederste skyggen må du duplisere knappen, og deretter med "Avrundet rektangulærverktøy" (ved hjelp av de samme innstillingene) opprette samme form, men litt større. Velg dette rektangelet og det du dupliserte og klikk på "Subtract from shape area" og "Expand". Gjør det svart og gi det 20% opacity og sett blandingsmodus til Overlay.
Bruk den nederste skyggen for å skape den øverste glansen. Velg nederste skygge, gå til Transform> Reflektere. Etter å ha gjort innstillingene, klikk "Kopier". Flytt den på plass, omarrangere ankerpunktene, slik at den blir tynnere og gjør den hvit (la opasiteten og blandingsmodusene som de er).
Bruk samme teknikk på avspillingsknappen.
Etter å ha fullført formen på spilleren, eksporter den som en .PSD for å legge til noen detaljer i Photoshop.
Opprett en ny fil i Photoshop (jeg har brukt 800 x 800 px) og hent inn filen du eksporterte fra Illustrator (minispiller). Velg "big button" -laget, hent vinduet "Layer Styles", ved å dobbeltklikke på høyre side av laget, og begynn å legge til følgende stiler som jeg gjorde. (du kan følge bildene).
Skjul alle lagene unntatt lagret "stort knapp", "nederste skygge" og "toppskinn" -laget. Velg "nederste skygge" -laget, gå til Filter> Blur> Gaussisk uskarphet, gi det en radius på 4 pek og klikk deretter OK. Gjør det samme til "top shine" -laget.
Deretter skal du lage et nytt lag, Kommandoen + Klikk på tommelen "Stor knapp", for å gjøre et utvalg av den formen, så kutte du den øvre halvdelen av valget med "Polygonal Lasso Tool". Fyll det opp med en farge (spiller ingen rolle hvilken farge som vi vil gi den 0% fyll) og legg til en Gradient Overlay lag stil.
Gjør "Play Button" synlig (inkludert nederste skygge og topp skinne). Velg "Play Button" -laget og legg til tolagsstiler (Gradient Overlay og Inner Glow). Velg "nederste skygge" -lag og gå til Filter> Uklarhet> Gaussisk uskarphet, gi den en 5 px radius og klikk OK. Gjenta denne handlingen til "top shine" -laget.
Opprett et nytt lag, gjør et rektangulært utvalg og med "Gradient Tool" (G) gjør en gradient. Kontroll + D for å fjerne markeringen. Sett blandemodus til "Overlay" og 20% på opaciteten.
Lag et nytt lag under spillknapplaget, og velg et valg for knappens skygge. Fyll det opp med svart og gå til Filter> Blur> Gaussian Blur og gi den en 1,5 px radius. Still blandemodus til "Fargeforbrenning" og 40% på opasiteten.
Velg "Eraser Tool" (E), sett diameteren til 125 px og hardheten til 25% og sveip horisontalt over midten av skyggelaget.
Velg «neste og forrige» ikonlag og fyll dem med denne fargen; # 0096A4. Deretter åpner du vinduet "Layer Styles" og begynner å legge til de samme stilene som jeg gjorde.
Gjør det samme med lagikonet. Men denne gangen bruker du denne fargen som bakgrunnsfarge: # FFDB94
Bruk "Linjeverktøyet" for å skape en god glanseffekt. Plasser linjen under "Play Button" -laget og og lag en horisontal linje (1 px) nederst på "big button" -laget. Gjør formen fylle 0% og legg til en "Gradient Overlay".
Lag et nytt lag bak "Play Button" -laget. Kontroll + Klikk på tommelen "Stor knapp" for å gjøre et utvalg av den formen, og gjør en enkel svart gradient til venstre. Sett "Overlay" som blandemodus og 60% opacity. dupliser laget, vri det horisontalt og flytt det til høyre.
Bruk "Ellipse Tool" til å lage en oval på venstre side av "big button". Omorganisere det slik at det ser ut som bildet nedenfor (bør plasseres øverst til venstre på den store knappen). Gjør fyllingen 0% og legg til en "Gradient Overlay" -stil.
Dupliser laget og plasser det nederst til høyre på den store knappen, og legg til den andre "Gradient Overlay" -stilen.
Lag et nytt lag over "Play button" -laget. Kontroll + Klikk på "Play Button" -laget, for å gjøre et valg av den formen, og velg deretter Velg> Endre> Kontrakt og kontrakt utvalget med 3 px. Etter alt dette ta "Gradient Tool" og lage en liten diagonal gradient i øverste venstre hjørne. Still lagsmixemodus til "Overlegg" og opasiteten til 40%.
Lag et nytt lag over det du nettopp har laget. Velg et valg på venstre side av "Play-knappen" (som i bildet). Fyll det opp med hvilken farge du vil ha, da vi vil sette fyllingen på 0%. Legg til "Gradient Overlay" -stilen og skinneeffekten er fullført. Dupliser dette laget, vri det horisontalt og flytt det til høyre.
Velg halvparten av "Play-knappen" og på et nytt lag, ved hjelp av "Gradient Tool" (G), gjør en gradient (med svart som farge). Deretter stiller blandingstilstanden til "Fargeforbrenning" og opaciteten til 10%. Bruk samme teknikk til "play icon" (det eneste som endres er lagplasseringen - over lagikonet) og lagets opasitet - 20%)..
Å lage "Play Button" tekstur er veldig enkelt. Etter å ha opprettet et nytt lag over "Play Button" -laget Control (Command på Mac) + klikk på "Play Button" -laget tommel, fyll det med svart, gå til Filter> Støy> Legg til støy, lag de angitte innstillingene og trykk "Ok".
Med valget som fortsatt er aktivt, går du til Filter> Blur> Motion Blur og bruker innstillingene som er angitt. Fravelg, og sett blandemodus til "Overlegg" og opaciteten til 45%.
Legg til litt liten detalj på "spillikonet". På et nytt lag vil du lage, med "Elliptical Marquee Tool" (M), tilfeldig størrelse sirkler inne i "play icon". Gjør dem svarte, avmarker og gå til Filter> Blur> Gaussian Blur, etter at du har lagt inn innstillingene, må du bare sette blandemodus til "Color Burn" og opaciteten til 15%, og du er ferdig.
Lag et nytt lag og gjør akkurat det samme. Det eneste du må endre er fargen på tilfeldige sirkler (jeg har gjort sirklene hvite).
Begynn å lage bakgrunnen. Velg bakgrunnslaget og fyll det med # 363D41 og legg til en "Gradient Overlay" -stil. Bruk "Elliptical Marquee Tool" (M) til å lage en oval på et nytt lag og fyll det med hvitt. Deretter går du til Filter> Blur> Gaussian Blur, skriver inn innstillingene dine og trykker ok. Endre blandemodus til "Overlegg" og gi den en 65% opasitet.
Begynn å lage skyggen for minispilleren. Lag et nytt lag, ved hjelp av "Elliptical Marquee Tool" (M) lag en oval under spilleren og fyll den med svart. Gå til Filter> Blur> Gaussian Blur og foreta de nødvendige innstillingene. Velg "Eraser Tool" (E) og foreta disse innstillingene: Diameter - 150px; Hardhet - 0%; Opacity - 10%, bruk deretter den til å slette en liten del av skyggesidene. Still blandemodus til "Fargeforbrenning" og still inn opasiteten til 60%.
Lag et helt utvalg av knapper. Gjør det ved Command + Klikk på "big button" -laget, og trykk deretter på Command + Shift + Klikk på "Play Button". Med det aktive valget lag et nytt lag og fyll det med svart. Flytt den opp og gå til Filter> Blur> Gaussian Blur og gjør innstillingene som i bildet. Bruk "Free Transform" (Control + T) for å forvride bakskyggen. Bruk "Eraser Tool" (E) med følgende innstillinger: Diameter - 150px; Hardhet - 0%; Opacity - 10%, for å slette skyggen på sidene. Juster opaciteten til 50%.
Mini Player-ikonet er nå klart. Mange av disse teknikkene kan gjenskapes for å være 100% vektor, dette er bare en annen måte å gjøre ting som utnytter Photoshops evner. Igjen, dette er en spesielt nyttig opplæring for folk som ønsker å lage elementer til bruk i web- og UI-design som de ofte bruker Photoshop.
Håper du likte denne opplæringen og at det var nyttig.
Accentsconagua