Share
Idag visar jag dig hur man designar en något annorlunda, men väldigt fin knapp i Photoshop. Även om det kan se ganska enkelt har det fortfarande något annat knappar saknar; Det är en dropdown-knapp. Är du redo? Nu kör vi!
Starta Photoshop. Skapa ett nytt dokument, jag använder ett dokument som är 600x350px.
Välj "Avrundad rektangelverktyg" och använd en Radius på 2. Detta ger knappen en skarp look med en ren rundkant. Hur stor du väljer att göra det spelar ingen roll, men se till att du inte har det för stort, eftersom det kanske slutar titta på plats. Min knapp är 104px i bredd och 30px i höjd.
Låt oss nu lägga till någon styling på knappen. Vi börjar med "Gradient Overlay" för att ge den en viss dimension. Här är den inställning vi ska använda:
Fortsätt att lägga till en "Stroke" till den, vi måste ge den en sorts ram för att betona det. Använd dessa inställningar och färgen # F8F8F8 för att göra det pop.
Nu lägger vi till ett "Inner Glow" för lite mindre polering av knappen. Använd dessa inställningar:
Så här ser knappen ut, efter att du har lagt till lite text:
Låt oss titta på den blå rullgardinsmenyn, det här steget är mer komplicerat eftersom vi använder "Pen Tool" för att anpassa formen lite. Om du inte är bekant med "Penverktyget", läs noga så att du inte saknar något.
Du kan antingen kopiera knapplagret eller skapa ett nytt lager. Jag skapar ett nytt lager med samma verktyg som tidigare (Avrundad rektangelverktyg). Men den här gången borde den vara lite mindre än tidigare, helst inte bredare än 100px, eftersom vi vill att den här formen ska klistra in under knappen själv. Fyll det här skiktet med färgen # 57A0FA. Här är vad du borde ha nu:
Låt oss gå vidare till "Penverktyget" och anpassa formen lite. Se till att du använder "Add Anchor Point Tool" och välj lagret. För att göra det enklare för nybörjare använder jag guider för att få placeringen rätt. Du vill se till att du har en guide i mitten av knappen, och lägg sedan en extra guide på vardera sidan av den. Så här ska det se ut:
Zooma in och välj det senaste lagret med "Add Anchor Point Tool" och placera ankarpunkterna på styrningarna. Ta tag i mittankeret och dra det ner till önskad storlek. Bara några pixlar kommer att göra som vi vill att det ska vara en subtil effekt.
För att göra rullgardinsmenyn ännu vackrare lägger vi till ett hål i det (fortsätt zooma in eftersom det är lättare att se var du ska placera hålet). För att göra detta klickar du bara på "Lägg till lagermask" på det senast lagade laget och välj "Elliptical Marquee Tool" för att göra ett urval. Slå backspace och ta bort den delen från fliken. Så här ska det se ut.
För att hjälpa fliken att se bra ut och matcha knappen lägger vi nu till en styling till den. Börja med "Stroke" och använd dessa inställningar:
Gå vidare till "Innerskuggan" och använd följande inställningar för att städa upp det lite och för att få lite djup i fliken:
Om allt är gjort korrekt borde du ha ett resultat som ser ut så här, om inte, då måste du ha gjort något fel!
För att skapa rullgardinsmenyn, dubbelkopiera du det normala tillståndet, öka dess höjd och använd samma teknik som tidigare. Lägg till lite text och du är klar!
Så här ser Dropdown-knappen i olika färger, fest dina ögon på dessa godsaker!
Snabba och raka framåt, jag hoppas att du haft den här designen Quick Tip!
Accentsconagua