Quick Tips: Hvordan Forbedre en Vector Bilde med Photoshop
Salt og Pepper, penn og papir, cookies og melk, selv om de er alt bra på egenhånd, disse tingene arbeide sammen for å få frem det beste i hverandre. Adobe Illustrator og Adobe Photoshop er ikke noe unntak. I dag vil jeg vise deg hvordan du bruker Illustrator til å utforme en play-knappen og hvordan du kan forbedre dine vektorer med bruk av Photoshop. Denne teknikken er spesielt nyttig for folk som ønsker å lage ikoner og UI design. La oss komme i gang!
Trinn 1
Start med å lage et nytt dokument i Illustrator (jeg har gjort det 800 x 800 piksler). Velg " Avrundet rektangel Tool " (med hjørnet radius på 100px) og lage en figur som ser ut som en avrundet knapp. Deretter velger " rektangelverktøyet ", opprette et rektangel og sentrer den til avrundet rektangel. Dette vil være for play-knappen
Trinn 2
Arbeidet med andre rektangel (" spille " rektangel).. Gå til Effect > Forvrenge & Transform > Pucker & Bloat å gjøre rektangelet buet. Fyll opp boksen i vinduet (jeg har brukt 6%) og trykk OK, etter det gå til Objekt > Utvid Utseende
Trinn 3
For å lage ". Spille " ikonet, velg " Stjerne Tool ", åpner Star Tool dialog og angi følgende innstillinger
Nå lage ". neste " og " tidligere " ikoner. Først duplisere play-ikonet ved å Tilvalg + klikk + Drag (hvor du vil), og deretter gjøre det samme, men denne gangen dra den til høyre (du kan holde Skift-tasten for å holde flytte objektet i en rett linje). Velg de to trekanter, klikk på " Legg til Shape område " knappen og klikk " Utvid ", endre størrelse og flytte.
Lag " Forrige " ikonet ved å gå til Objekt > Transform > Reflektere > Vertikal og klikk " Copy ". Flytte den på plass og du har nettopp gjort deg noen player buttons.
Trinn 4
Legg fargene til knappene. &Quot; Spill " knappen har et fyll av # 506670 et lykke # 2C515E. &Quot; Neste " og " Forrige " knappene har et fyll av # 85D4D6 og et strøk av # 27A0A0
Trinn 5
For å lage bunnen skyggen du har å duplisere knappen med ". Avrundet rektangel Tool " (med de samme innstillingene) skape den samme formen, men litt større. Velg dette rektangelet og den du duplisert og klikk på " Trekk fra form området " og " Utvid ". Gjør det svart og gi den 20% opasitet og sette blending mode til Overlay.
Bruk bunnen skygge til å skape toppen glans. Velg bunnen skyggen, gå til Transform > Reflektere. Når du har gjort innstillingene klikk " Copy ". Flytte den på plass, omorganisere ankerpunktene slik at det blir tynnere og gjør den hvit (la opasitet og blandingsmodi som de er).
Bruk samme teknikk på play-knappen.
Trinn 6
Etter endt formen spilleren eksport det som en PSD å legge til noen detaljer i photoshop.
Trinn 7
Opprett en ny fil i Photoshop (jeg har brukt 800 x 800 px) og bringe i filen du eksporterte fra Illustrator (mini-spiller). Velg " store knappen " lag, få opp " Layer Styles " vindu, ved å dobbeltklikke på høyre side av laget, og begynne å legge følgende stiler som jeg gjorde. (du kan følge bildene)
Skjul alle lagene unntatt ". store knappen " lag, " bunnen skyggen " lag og " topp skinne " lag. Velg " bunnen skyggen " lag, gå til Filter > Blur > Gaussian Blur, gi den en 4 px radius og klikk deretter på OK. Gjør det samme i " topp skinne " lag.
Deretter lage et nytt lag, Command + Klikk på " store knappen " lag tommelen, for å gjøre et utvalg av at form, da, med den " mangekantede lassoverktøyet ", kuttet ut den øvre halvdelen av utvalget. Fyll den opp med en farge (spiller ingen rolle hvilken farge som vi vil gi det 0% fill) og legge en Gradient Overlay lag stil
Trinn 8
Gjør det ". Play Button " synlig (inkludert bunnen skyggen og topp skinne). Velg " Play Button " lag og legge de to lagstiler (Gradient Overlay og indre glød). Velg " bunnen skyggen " lag og gå til Filter > Blur > Gaussian Blur, gir det et 5 px radius og klikk på OK. Gjenta denne handlingen til " topp skinne " lag.
Lag et nytt lag, lage en rektangulær markering og med " Gradient Tool " (G) lage en gradient. Ctrl + D for å fjerne markeringen. Sett blending mode til " overlegg " og 20% på opacity.
Lag et nytt lag under play-knappen laget og gjøre et valg for knappen skygge. Fyll den opp med svart og gå til Filter > Blur > Gaussian Blur og gi den en 1,5 px radius. Sett blending mode til " Color Burn " . og 40% på opacity
Velg " Eraser Tool " (E) angir diameteren til 125 px og hardheten til 25% og horisontalt sveip over midten av skyggelaget.
Step 9
Velg " neste og forrige " ikoner lag og fylle dem med denne fargen; # 0096A4. Etter det åpne opp " Layer Styles " . vindu og begynne å legge de samme stilene som jeg gjorde
Gjør det samme med den " play-ikonet " lag. Men denne gangen bruke denne fargen som bakgrunnsfarge: # FFDB94
Step 10
Bruk " Linje Tool " å lage et flott glans effekt. Plasser linjen under " Play Button " lag og og lage en horisontal linje (1 px) på bunnen av " store knappen " lag. Gjør figuren fylle 0% og legge til en " Gradient Overlay ".
Lag et nytt lag bak " Play Button " lag. Ctrl + Klikk på " store knappen " lag tommelen, for å gjøre et utvalg av den formen, og deretter gjøre en enkel svart gradient til venstre. Still " overlegg " som blending mode og 60% dekkevne. duplisere lag, snu den horisontalt og flytte den til høyre
Bruk ". Ellipse Tool " å lage en oval på venstre side av " store knappen ". Omorganisere det slik at det ser ut som på bildet under (bør plasseres på øvre venstre side av " store knappen "). Gjør fyllet 0% og legge til en " Gradient Overlay " . style
Dupliser lag og plassere den på nederste høyre side av " store knappen " legge til andre " Gradient Overlay " . style
Trinn 11
Lag et nytt lag over " Play-knappen " lag. Ctrl + Klikk på " Play Button " lag tommelen, for å gjøre et utvalg av den formen, så gå til Velg > Endre > Kontrakt og kontrakt utvalget av 3 px. Etter alt dette ta " Gradient Tool " og lage en liten diagonal gradient i øverste venstre hjørne. Still lagene blending mode til " overlegg " og opacity til 40%.
Lag et nytt lag over den du nettopp laget. Foreta et valg på venstre side av " Play-knappen " (som på bildet). Fyll den opp med hvilken farge du vil, så vi vil sette fyllet på 0%. Tilsett " Gradient Overlay " stil og glans effekt er fullført. . Duplisere dette laget, snu den horisontalt og flytte den til høyre side
Velg halvdel av " Play-knappen " og på et nytt lag ved å bruke " Gradient Tool " (G), lage en gradient (med svart som farge). Etter det satt overgangsmodusen til " Color Burn " og opacity til 10%. Bruke samme teknikk til " play-ikonet " (det eneste som endres er det lag plassering - over " play-ikonet " laget - og tettheten av laget - 20%).
Step 12
Opprette " Play Button " teksturen er meget enkel. Når du har opprettet et nytt lag over " Play Button " lag Control (Command på Mac) + klikk på " Play Button " lag tommelen, fyll den med svart, går du til Filter > Noise > Legg Noise, må de angitte innstillingene, og trykk " OK ".
Med utvalget fortsatt aktiv gå til Filter > Blur > Motion Blur og bruke innstillingene angitt. Oppheve valg, og sett Blending mode til " overlegg " . og opacity til 45%
Legg noen små detaljer i " play-ikonet ". På et nytt lag du vil gjøre, med " Elliptical Marquee Tool " (M), tilfeldige store sirkler inne i " play-ikonet ". Gjør dem svart, fjerner du merket og gå til Filter > Blur > Gaussian Blur, etter å ha lagt innstillingene bare sette overgangsmodusen til " Color Burn " og opacity til 15% og du er ferdig.
Opprett et lag og gjøre akkurat det samme. Det eneste å endre er fargen på tilfeldige sirkler (jeg har laget sirklene hvit).
Trinn 13
Begynne å lage bakgrunnen. Velg bakgrunnslaget og fyll den med # 363D41 og legge til en " Gradient Overlay " stil. Bruke " Elliptical Marquee Tool " (M) lage en oval på et nytt lag og fyll den med hvitt. Etter det gå til Filter > Blur > Gaussian Blur, angi innstillingene og trykker ok. Endre Blend Mode til " overlegg " og gi det en 65% dekkevne.
Begynne å lage skyggen for mini-spilleren. Gjør et nytt lag ved å bruke " Elliptical Marquee Tool " (M) lage en oval under spiller og fylle den med svart. Gå til Filter > Blur > Gaussian Blur og foreta de nødvendige innstillingene. Velg " Eraser Tool " (E) og gjøre disse innstillingene: Diameter - 150px; Hardhet - 0%; Opacity - 10%, deretter bruke den til å slette en liten del av de skyggesider. Sett blending mode til " Color Burn " og sett opacity til 60%.
Gjør en hel knapper utvalg. Vet at ved Command + Klikk på " store knappen " lag deretter trykker du Command + Shift + Klikk på " Play Button ". Med det aktive valget opprette et nytt lag og fylle den med svart. Flytte den opp og gå til Filter > Blur > Gaussian Blur og gjøre innstillinger som på bildet. Bruk " Free Transform " (Kontroll + T) for å forvrenge tilbake skygge. Bruk " Eraser Tool " (E) med følgende innstillinger: Diameter - 150px; Hardhet - 0%; Opacity - 10%, for å slette skyggen på sidene. Juster opacity til 50%.
Konklusjon
Mini Player-ikonet er nå klar. Mange av disse teknikkene kan gjenskapes å være 100% vektor, dette er bare en annen måte å gjøre ting som benytter Photoshop evner. Igjen, dette er en spesielt nyttig tutorial for folk som ønsker å lage elementer for bruk i web og UI design som de er ofte allerede ved hjelp av Photoshop.
Håper du likte denne opplæringen, og at det var nyttig.
Flere ressurser
Webdesigntuts + Guider og artikler på nettstedet Elements
PSDTUTS + Guider og artikler om Icon Design
Vectortuts + Guider og artikler om Icon Design