Snabbtips Skapa en plastbrytare i Photoshop

I denna snabba tips handledning kommer vi att förklara hur man skapar en plastomkopplare i Photoshop som du kan använda i din gränssnittsdesign. Låt oss börja!


Skapa bakgrunden

Skapa en ny fil. Ställ in bredd till 400 och höjd till 300 och upplösningen till 72 PPI.

Gör nu en ny grupp och namnge den Bakgrund. Använda rektangelverktyget (U) rita en form som är större än duken, precis som i exemplet. Ställ färgen till vit #ffffff och använd lagstilarna.


Skapa knappen

Skapa en ny grupp och namnge den Base. Använda Pen Tool (P) rita en form precis som i exemplet. Ställ färgen till en mörkgrå # 242424 och använd lagstilarna. Nu är vår basform gjort.

Skapa en ny grupp och namnge den knappen. Använda Pen Tool (P) teckna en form som den i exemplet. Ställ in färgen till # ada397 och använd lagstilen.

Nu lägger du till lite volym och detalj på knappen. Inuti Button-gruppen skapar du ett nytt lager ovanför knappformen och använder borstverktyget (B), ställer förgrundsfärgen till svart # 000000, borstens storlek till 11px och hårdheten till 0 och ritar en kort linje längst ner En del av knappen, som ses i exemplet. Överför det laget till en klippmask genom att hålla ner ALT-tangenten och tryck mellan de två skikten eller helt enkelt högerklicka på det sista laget och välj Skapa klippmask.

Skapa ett nytt lager, och använd Pen Tool (P) teckna en svart # 000000-form precis som i exemplet. Gå till Filter> Blur> Gaussian Blur, sätt Radius till 1,5 px och använd filtret. Använd Eraser Tool (E) för att ställa in storleken till 58 och hårdheten till 0 och borsta bort den vänstra sidan av den suddiga formen (den röda formen i exemplet markerar platsen). Ställ lagerets opacitet till 18% och gör det här laget till en klippmask. Gör nu ett nytt lager, välj Borstverktyg (B), ställ in storleken till 15px och hårdheten till 0, sätt färgen till # 92897f och dra en rak linje precis som i exemplet. När du är klar omvandlar du det här skiktet till en klippmask också.

Skapa ett nytt lager, välj Pen Tool (P), sätt färgen till # c8b7a5 och rita en form som den i exemplet. Gå till Filter> Blur> Gaussian Blur, sätt Radius till 1,5 px och använd filtret. Använd Eraser Tool (E) genom att ställa in storleken till 58 och hårdheten till 0 och borsta bort den vänstra sidan av den suddiga formen (den röda formen i exemplet markerar platsen). Välj nu borstverktyg (B), ställ in storleken till 13px och hårdheten till 0, sätt färgen till # c8b7a5 och dra en rak linje precis som i exemplet. Gör detta lager en Clipping Mask.

Skapa ett nytt lager och använd pennverktyget (P), sätt färgen till svart # 000000 och dra en form som den i exemplet. Gå till Filter> Blur> Gaussian Blur, sätt Radius till 1,5 px och använd filtret. Använd Eraser Tool (E) för att ställa in storleken till 58 och hårdheten till 0 och borsta bort den vänstra sidan av den suddiga formen (den röda formen i exemplet markerar platsen). Ställ nu blandningsläget för skiktet på överlagring och opacitet till 80% och omvandla skiktet till en klippmask.

Gör ett nytt lager, och använd borstverktyget (B), sätt in storleken till 10px, hårdheten till 0%, färgen till svart # 000000 och dra ett par linjer runt den nedersta och den högra delen av knappen, vilket ses i exemplet . Omforma det laget i en klippmask och skapa en ny. Använd borstverktyg (B) med samma inställningar som tidigare och dra några fler rader på höger sida av knappen. Nu måste vi kopiera Vector Mask-miniatyrbilden i knappen form till vårt lager. Håll ner ALT-tangenten genom att klicka och dra vektormaskens miniatyrbild från vår knappform till det här lagret exakt som i exemplet. Vi kommer inte att göra detta lager eller några framtida lager Clipping Masks.

Vi kommer att skapa ett nytt lager. Använda Pen Tool (P) rita en annan svart # 000000-form precis som i exemplet. Gå till Filter> Blur> Gaussian Blur, sätt Radius till 1,5 px och använd filtret. Ställ skiktets opacitet till 20%. Skapa ett nytt lager, och med hjälp av borstverktyg (B) lägger vi till några höjdpunkter. Ställ in storleken till 2px och hårdheten till 0%, sätt färgen till # d5c8b5 och gör en liten punkt nära knappens vänstra övre hörn. Gör ett annat lager, och med hjälp av Pen Tool (P) lägger vi till några fler detaljer. Ställ färgen på #dbcebe och rita tre olika former som den som ses i exemplet. Dessa höjdpunkter hjälper till att ge mer volym och realism till vår knapp.

Skapa en ny grupp och placera den under Base Group. Namnge det Skugga. Använda Pen Tool (P) ställa in färgen till # 000000 och rita en form som den i exemplet. Gå till Filter> Blur> Gaussian Blur, sätt Radius till 1,5 px och använd filtret. Ställ opaciteten i skiktet till 20% och använd Eraser Tool (E), sätt storleken till 58px och hårdheten till 0% och borsta bort den nedre högra delen av vår form (röd cirkel anger området i exemplet).


Slutlig bild