Hey guys back-to-back Photoshop Tutorials. I denna tutorial jag ska lära dig hur du skapar I-Phone Like Button i Photoshop. Detta är mycket enkel och mycket effektiv handledning. Jag hoppas att ni kommer att njuta av den här guiden.

Final Preview

Detta är vad vi gått gör idag

Steg 1

Öppna Photoshop och skapa ett nytt dokument, är min 550 × 398px med en vit bakgrund.

Steg 2

Fyll färgen i bakgrunden lager, är min färg # 333333.

Steg 3

Skapa ett nytt lager namn lagret Stripe lutning. Välj den rektangulära Marquee Tool och skapa vit rand.

Styling strecket Layer dubbelklicka på strecket lagrets miniatyrbild på panelen Lager att öppna lagerstilar dialogrutan kommer vi att använda en vertikal gradiant effekt för din bakgrund. Klicka sedan på C olor lutning till höger lutningen möjlighet att öppna färggradienten Editor.

Dubbelklicka på vänster-color-stop och ange färgvärde # aaaaaa, dubbelklicka på vänster-center-color-stop och ange färgvärde # cccccc, dubbelklicka på höger-center-color-stop och ange färgvärde # dddddd, dubbelklicka sedan på höger-color-stop och ange färgvärde # ffffff.

Skulle se ut så här.

Steg 4

Markera Rounded Rectangle Tool och skapa knapp, är min radie 90X40px.

Nu gäller viss effekt

Gradient Overlay

Styling knappen dubbelklicka på knappen lagrets miniatyrbild på panelen Lager att öppna lagerstilar dialogrutan kommer vi att använda en vertikal gradiant effekt för din knapp. Klicka sedan på färggradient till höger om lutningen möjlighet att öppna färggradienten Editor.

Dubbelklicka på vänster-color-stop och ange färgvärde # 000000, dubbelklicka på vänster-center-color-stop och ange färgvärde # 222222, dubbelklicka på höger-center-color-stop och ange färgvärde # 444.444, dubbelklicka sedan på höger-color-stop och ange färgvärde # 666666.

Avfasning och relief

Nästa tillämpa Avfasning och relief lager stil. Ändra stil på Yttre Fasning än att ändra värdena på djup, storlek och mjuknar. Jag väljer att ställa det djup på 100%, Size på 1px och mjuka på 10px

Viktig del av denna Handledning: Håll vinkel vid -90 ^o, höjd 40 ^o

Highlight läge: Jag väljer att ställa Opacitet på 100%.

Shadow läge: Jag väljer att ställa Opacitet på 100%.

Stroke

Slutligen kommer vi att tillämpa Stroke. Först ändra värdena storlek. Jag väljer att ställa in storlek på 1px. Ändra positionen på Inside

Jag väljer att ställa Opacitet till 80%.

Ändra färgar från standard till # 222222

Skulle se ut så här.

Steg # 5

Välj text verktyget och skriva text på framsidan.

Vi kommer att tillämpa en viss effekt för text.

Avfasning Relief

Dubbelklicka på textlagret miniatyr på panelen Lager att öppna lagerstilar dialogrutan. Vi kommer att tillämpa Avfasning relief, först ändra formatet för Outer Bevel och teknik för att Chisel Soft, än att ändra värdena på djup, riktning, storlek och mjuka. Jag väljer att ställa det djup på 130%, riktning fallande storlek på 1px och mjuka på 0px

Viktig del av denna Handledning: Vinkeln vid 90 ^o, höjd 30 ^o

Highlight läge: Jag väljer att ställa Opacitet till 0%.

Shadow läge: Jag väljer att ställa Opacitet 50%.

Final Preview

Sist har vi gjort den här guiden.

Detta är vad vi gått gör idag

Ladda ner källfilen

Om du vill kontrollera ditt arbete, kan du hämta PSD fil för den här läraren.

iPhone-like-buttons.rar (21,3 kB)

Filed under: Photoshop, Tutorials av admin