Share
Salt och peppar, penn och papper, kakor och mjölk, även om de är alla bra på egen hand, fungerar dessa saker för att få fram det bästa i varandra. Adobe Illustrator och Adobe Photoshop är inget undantag. Idag ska jag visa dig hur du använder Illustrator för att designa en spellknapp och hur du kan förbättra dina vektorer med hjälp av Photoshop. Denna teknik är särskilt användbar för personer som vill skapa ikoner och UI-design. Låt oss börja!
Börja med att skapa ett nytt dokument i illustratorn (jag har gjort det 800 x 800 px). Välj "Avrundad rektangelverktyg" (med hörnradie 100 px) och skapa en form som ser ut som en rundad knapp. Välj sedan "Rektangelverktyget", skapa en rektangel och centrera den till den avrundade rektangeln. Detta kommer att vara för uppspelningsknappen.
Arbeta på den andra rektangeln ("play" rektangeln). Gå till Effect> Distort & Transform> Pucker & Bloat för att göra rektangeln böjd. Fyll i rutan i fönstret (jag har använt 6%) och tryck på OK, därefter gå till Objekt> Expand Utseende.
För att skapa ikonen "play", välj "Star Tool", öppna Star Tool dialog och ange följande inställningar.
Skapa nu "nästa" och "tidigare" ikoner. Först duplicera spelikonet med Alternativ + Klicka + Drag (var som helst du vill), gör detsamma men den här gången dra det åt höger (du kan hålla Shift-tangenten för att flytta objektet i en rak linje). Välj de två trianglarna, klicka på "Add to Shape Area" -knappen och klicka sedan på "Expand", ändra storlek och omplacering.
Skapa ikonen "Föregående" genom att gå till Objekt> Transformera> Reflektera> Vertikal och klicka på "Kopiera". Flytta den på plats och du har just skapat dig några spelarknappar.
Lägg till färgerna på knapparna. "Play" -knappen har en fyllning av # 506670 en stroke på # 2C515E. Knapparna "Nästa" och "Föregående" har en fyllning av # 85D4D6 och en stroke på # 27A0A0.
För att skapa den nedre skuggan måste du duplicera knappen och sedan med "Rounded rectangle Tool" (med samma inställningar) skapa samma form men lite större. Välj den här rektangeln och den du duplicerade och klicka på "Subtract from shape area" och "Expand". Gör det svart och ge det 20% opacitet och sätt blandningsläget till Overlay.
Använd den nedre skuggan för att skapa den bästa glansen. Välj den nedre skuggan, gå till Transform> Reflektera. Efter att ha gjort inställningarna klickar du på "Kopiera". Flytta den på plats, omforma ankarpunkterna så att den blir tunnare och gör den vit (lämna opacitet och blandningslägen som de är).
Använd samma teknik på spelknappen.
Efter att ha avslutat formen på spelaren exporterar den som en .PSD för att lägga till några detaljer i Photoshop.
Skapa en ny fil i Photoshop (jag har använt 800 x 800 px) och ta in filen du exporterade från Illustrator (minispelare). Välj lagret "Stor knapp", höj upp fönstret "Layer Styles" genom att dubbelklicka på höger sida av lagret och börja lägga till följande stilar som jag gjorde. (du kan följa bilderna).
Dölj alla lager utom det "stora knappen" lager, "botten skugga" lager och "topp skina" lager. Välj skiktet "bottenskugga", gå till Filter> Blur> Gaussian Blur, ge det en 4 px radie och klicka sedan på OK. Gör detsamma med "top shine" -skiktet.
Därefter, skapa ett nytt lager, Kommandot + Klicka på tummen "Stor knapp" för att göra ett urval av den formen, så klippa ut den övre halvan av valet med "Polygonal Lasso Tool". Fyll det upp med en färg (spelar ingen roll vilken färg som vi kommer att ge den 0% fyllning) och lägger till ett överlagringslager.
Gör "Play Button" synlig (inklusive bottenskugga och toppsken). Välj "Play Button" -lagret och lägg till de två lagerstilarna (Gradient Overlay och Inner Glow). Välj "bottom shadow" -lagret och gå till Filter> Blur> Gaussian Blur, ge det en 5 px radie och klicka på OK. Upprepa denna åtgärd till "toppsken" -laget.
Skapa ett nytt lager, gör ett rektangulärt urval och med "Gradient Tool" (G) gör en gradient. Kontroll + D för att avmarkera. Ställ in blandningsläget på "Overlay" och 20% på opaciteten.
Skapa ett nytt lager under Play-knappen och gör ett val för knappens skugga. Fyll det med svart och gå till Filter> Blur> Gaussian Blur och ge den en 1,5 px radie. Ställ in blandningsläge till "Färgbränning" och 40% på opacitet.
Välj "Eraser Tool" (E), sätt in diameteren till 125 px och hårdheten till 25% och svep horisontellt över mitten av skuggskiktet.
Välj "nästa och föregående" ikoner lager och fyll dem med denna färg; # 0096A4. Därefter öppnar du fönstret "Layer Styles" och börjar lägga samma stilar som jag gjorde.
Gör detsamma med "play icon" -laget. Men den här gången använder du denna färg som bakgrundsfärg: # FFDB94
Använd "Linjeverktyget" för att skapa en bra glans effekt. Placera linjen under "Play Button" -lagret och skapa en horisontell linje (1 px) längst ner på "big button" -laget. Gör formen fylla 0% och lägg till en "Gradient Overlay".
Skapa ett nytt lager bakom "Play Button" -laget. Kontroll + Klicka på tummen "Stor knapp" för att göra ett urval av den formen, gör sedan en enkel svart gradient till vänster. Ställ in "Overlay" som blandningsläge och 60% opacitet. duplicera skiktet, vrid det horisontellt och flytta det till höger.
Använd "Ellipse Tool" för att skapa en oval på vänster sida av "big button". Ombilda det så att det ser ut som bilden nedan (ska placeras på den övre vänstra sidan av den stora knappen). Gör fyllningen 0% och lägg till en "Gradient Overlay" -stil.
Duplicera skiktet och placera det på den nedre högra sidan av den "stora knappen" och lägg till den andra "Gradient Overlay" -stilen.
Skapa ett nytt lager ovanför "Play button" -laget. Control + Klicka på "Play Button" -lagret tummen, för att välja ett urval av den formen, gå till Välj> Ändra> Kontrakt och kontrakta valet med 3 px. Ta allt efter "Gradient Tool" och gör en liten diagonal gradient längst upp till vänster. Ställ in lagrets blandningsläge på "Överlagring" och opacitet till 40%.
Gör ett nytt lager över det du just gjorde. Gör ett urval på vänster sida av "Play-knappen" (som på bilden). Fyll upp den med vilken färg du vill ha, eftersom vi ställer in fyllningen med 0%. Lägg till "Gradient Overlay" -stilen och shine-effekten är klar. Duplicera detta lager, vänd det horisontellt och flytta det till höger.
Välj hälften av "Play-knappen" och på ett nytt lager med hjälp av "Gradient Tool" (G), gör en gradient (med svart som färg). Därefter sätter blandningsläget på "Färgbränning" och opacitet till 10%. Använd samma teknik till "play icon" (det enda som ändras är lagplaceringen - ovanför "play icon" -laget - och lagrets opacitet - 20%).
Att skapa "Play Button" -texturen är väldigt enkel. Efter att ha skapat ett nytt lager ovanför "Play Button" -lagret Control (Command på Mac) + klicka på "Play Button" -lagret tummen, fyll det med svart, gå till Filter> Buller> Lägg till brus, gör de angivna inställningarna och tryck på "Ok".
Med valet som fortfarande är aktivt går du till Filter> Blur> Motion Blur och använder de angivna inställningarna. Avmarkera och sätt blandningsläget till "Overlay" och opaciteten till 45%.
Lägg till lite liten detalj på "play icon". På ett nytt lager kommer du med "Elliptical Marquee Tool" (M), slumpmässiga cirklar inom "play icon". Gör dem svarta, avmarkera och gå till Filter> Blur> Gaussian Blur, efter att du har lagt till dina inställningar, ställer du bara in blandningsläget till "Color Burn" och opacitet till 15% och du är klar.
Skapa ett annat lager och gör exakt samma sak. Det enda som ska ändras är den slumpmässiga cirkelns färg (jag har gjort cirklarna vita).
Börja skapa bakgrunden. Välj bakgrundsskiktet och fyll i det med # 363D41 och lägg till en "Gradient Overlay" -stil. Med hjälp av "Elliptical Marquee Tool" (M) skapar du en oval på ett nytt lager och fyller det med vitt. Därefter går du till Filter> Blur> Gaussian Blur, anger dina inställningar och trycker på ok. Ändra blandningsläget till "Overlay" och ge det 65% opacitet.
Börja skapa skuggan för minispelaren. Skapa ett nytt lager, med hjälp av "Elliptical Marquee Tool" (M) skapa en oval under spelaren och fyll i den med svart. Gå till Filter> Blur> Gaussian Blur och gör de nödvändiga inställningarna. Välj "Eraser Tool" (E) och gör dessa inställningar: Diameter - 150px; Hårdhet - 0%; Opacitet - 10%, använd sedan den för att radera en liten del av skuggsidorna. Ställ in blandningsfunktionen på "Färgbränning" och ställ in opaciteten till 60%.
Gör ett helt knappval. Gör det med Command + Klicka på "big button" -laget och tryck sedan på Command + Shift + Klicka på "Play Button". Med det aktiva valet skapar du ett nytt lager och fyller det med svart. Flytta upp det och gå till Filter> Blur> Gaussian Blur och gör inställningarna som på bilden. Använd "Free Transform" (Control + T) för att snedvrida bakskuggan. Använd "Eraser Tool" (E) med följande inställningar: Diameter - 150px; Hårdhet - 0%; Opacitet - 10%, för att radera skuggan på sidorna. Justera opaciteten till 50%.
Mini Player-ikonen är nu klar. Många av dessa tekniker kan återskapas till att vara 100% vektor, det här är bara ett annat sätt att göra saker som använder Photoshops möjligheter. Återigen är det här en särskilt användbar handledning för personer som vill göra element för användning i webb- och UI-mönster, eftersom de ofta använder Photoshop.
Hoppas du njöt av denna handledning och att det var till hjälp.
Accentsconagua