Mycket enkel men tilltalande knapp och ikon handledning skapa för nästan alla med minimal eller nästan ingen Photoshop erfarenhet. Syftet med den här guiden är inte bara visa tricket och teknik för att skapa en knapp, men också uppmuntrar dig att vara kreativ och fantasifull för att göra dina egna knappar i framtiden.


En av de viktiga hemligheten i något kreativt arbete är förmågan att se resultatet långt innan du har börjat genomföra. Det finns många sätt att uppnå det, för mig det bästa sättet är nära mina ögon och försöka se vad jag tänker skapa. När jag har något intressant att försöka ta en bild i mitt minne, innan jag öppnar mina ögon och omedelbart dra den på ett papper innan jag glömmer. Det är en övning du kan göra och gör regelbundet kommer att öka din förmåga att se klarare.

Låt oss säga att detta är vad jag har sett när jag slöt mina ögon, nu hur kan jag köra det i Photoshop?

Ikon motion rita på papper

Steg 2: Du kan fortsätta bakgrund som vita eller använda någon utjämning textur om du föredrar, jag bara snabbt skapat några textur med textur bibliotek.

Skapa textur i Photoshop

Steg 3: Lägg till ett nytt lager och ge ett namn, skapa rundade hörn rutan val (135px X135px) och göra hörnet avståndet till 20px. Det finns många sätt att skapa rundade rutan, är en av ett enkelt sätt: Rita en fyrkantig låda först och välj "Select -> Modify -> Smooth" från övre menyn och välj 20px radie.

skapa rundad box hörnrutan

Steg 5: Nu är det dags att utforska en viss effekt,
Klicka på "Lägg ett lager stil" längst ner i ditt lager fönstret, och i Lagerstil fönster kolla bara "Drop Shadow" kryssrutan. Följ provet bilden nedan.

Steg 6: Kontrollera nu "yttre glöd" kryssrutan. Gör som visas i bilden nedan.

Lägg till ett lagerstil Ytterglöd

Steg 7: Nästa kontroll "inre glöd" kryssrutan. Gör som visas i bilden nedan.

Lägg till ett lagerstil inre glöd

Och här är din sista stil effekt.

Lägg till ett nytt lager effekt i Photoshop

Steg 8: Lägg ett nytt lager och välj "Stroke" från "Edit"-menyn överst och ge grönt, 6px innanför gränsen. Följ prov bild.

Använd stroke för att skapa ram från Redigera-menyn.

Steg 9: Nu har du en bild som denna. Ändra stil från toppskiktet panelen till "Screen" ger en transparent effekt.

Använd lager för att skapa ram från Redigera-menyn.

Steg 10: Lägg nytt lager och rita en rundad rektangel box som visas i bilden nedan. Det är samma som "steg 3" jag beskriver tidigare.

Rita en rundad rektangel box

Steg 11: Välj "Lägg till lagermask" från botten ikoner bar i lager fönstret och välj "Gradient ikonen" från "Tools"-fönstret. Nu klicka och dra musen på den rundade rektangeln rutan för att gälla från topp till botten och du bör se liknande resultat så här.

Lägg till lagermask och Gradient ikon för ljuseffekt

Steg 12: Nu lägga till ytterligare ett lager och rita en cirkel som bilden nedan och ändra "Opecity" från skiktpanelen till ca 50%.

Opecity att använda effekten Markera

Steg 13: Nu dags att dra en ikon som du vill du placera eller så kan du använda någon befintlig ikonen från din samling. Jag drar bara en kamera snabbt.

Rita kamera i photoshop

ljuseffekt på knappen

När du har knappen redo, är det dags att skapa så många du vill på bara några minuter. Jag har nu Ljud spela, lyssna, Audio Device, Equalizer, DVD, CD, mikrofon, inspelning, Video, Tape, volymkontroll och kamera.

Ljud spelas, Lyssna, Audio Device, Equalizer, DVD, CD, mikrofon, inspelning, Video, Tape, Volymkontroll och kamera