10
Feb

Vista Styled Button

February 10th, 2008

If you're looking for a clean custom web design, then visit the incredible team over at Captain Marketing Thanks for visiting!


Step 1

Like usual we are going to start off with filling the background with a radial gradient from a light grey to a darker grey. Light grey: #3e3d3d. Dark grey: #151515.

order cialis

/vista-styled-button/step1.jpg” alt=”" />

Step 2

Create a new layer (Layer > New > Layer) and using the rounded rectangle tool make a fixed shape of 300 by 50 pixels in the middle of the document.

Right click the shape and click make selection.

Select the gradient tool and set the style to reflected gradient. Set the foreground colour to #1c3f47 and the background colour to #2a6976. Left click in the middle of the selection and drag to the bottom of the selection and release. This will provide us with the base of the button.

Step 3

Now we are going to be adding some layer styles to our button to make it vista styled.

Layer > Layer Styles > Outer Glow

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Gradient Overlay

Now your button should be looking like this.

Step 4

Now we are going to be adding a reflection to our button. On a new layer select the area of your base layer (ctrl + click layer) and fill the selection with white (#ffffff).

With the rectangular marquee tool selected move it down below the button.

Go Edit > Transform > Perspective and drag the bottom right box towards the right while holding down the shift key (this pulls the other side out too so it keeps it even).

Add a layer mask and add a gradient from white to black within the reflection – this will fade it out.

Set the blend mode of the layer to Soft Light and lower the opacity to 15%.

Step 5

Last of all we are going to be adding some text. Choose a nice crisp and clean font for this.

Posted by PSFreak! at 02:02 on February 10th, 2008 in Buttons

29 Responses to Vista Styled Button

  1. Dale Hay says:

    Very nice and clean. I like it a lot.

  2. James says:

    Hello,
    I start doing this tutorial but i stop in middle because step 2 and 3 are incorrect, nothing will come out like your preview.
    Thanks

  3. MsG says:

    Nice tut mate!

  4. James says:

    James, what bit of steps 2 and 3 are you having trouble with? Making the rounded rectangle or filling it with a gradient?

  5. John says:

    When you have completed step 3 it does not look like the: “Now your button should be looking like this”.

    Step 2 is flawed. “Right click the shape and select make selection.” Had to fiddle with this as I couldn’t right click.

    I am using CS2 on a PC.

  6. AJ says:

    How about you tell people how to do step 1?

  7. Lynsey says:

    Hi!
    I have the same problem as james!
    it wont let me fill the button bit with the gradient! it says it cant do it or sumert…xx

  8. James says:

    John, the right button is the one next to the left button on your mouse (or has your mouse only got one button in which case I’m not sure how you could get the right button function)? Make sure that the settings for your Rounded Rectangle Tool are set to Paths, and once you have made the path then right click like in this screenshot and select “Make selection”.

    AJ, select the Gradient Tool, set your foreground colour to the light grey and the background colour to the dark grey. Select radial gradient style (top left of photoshop). Left click near top left and drag to bottom right and release.

    Lynsey, hopefully I’ve explained it above, otherwise can you take a screenshot or something of where you are at?

  9. Steve Adams says:

    The only problem I had with the tutorial is that the colors you didnt include what colors you used for the inner and outer glow.

  10. James says:

    Steve, they are just white and black respectively. I don’t bother saying what the colours are if they are the default or clearly white or black :)

  11. Dale Hay says:

    James,

    If a mouse has one button, like a MAC, then holding down SHIFT while pressing your mouse button does the right click. (I think)

  12. AmIstupid? says:

    Im not really sure ive done right because im using another version of PS. But when i try color the button with the gradient tool it just says:

    Could not use the gradient tool because the content of teh layer isnt directly editable.

    What should i do?

  13. James says:

    Can you take a screenshot and upload it somewhere & link to it so I can see? I’m not really sure how you got that error if you followed the tutorial closely but I should be able to figure it out if I can see your screen (maybe your on a text layer or something odd).

    What version of Photoshop are you using? I should think this tutorial would work with 7.0 (I havn’t used previous versions) and newer.

  14. AmIstupid? says:

    Im using Photoshop CS2 and im completly a newbie. I followed the steps the best i could. But maybe i missed something. Anyway heres a screenshot:

    http://hem.bredband.net/d456563/screen1.jpg

  15. Miguel says:

    AmIStupid,

    NO I don’t think you are stupid, I had the ame problem using the CS3 extended version. I solved the problem conveting the layer to a rasteder layer. Afen some search on google I found this … http://forums.neverside.com/thread/91060/

    Hope you this can help you.

    By the way, James, your tutorias are very nice. thank you very much.

  16. AmIstupid? says:

    Thanks alot its working now ;)

  17. HikariMisako says:

    well, i have problems making the gradient overlay at step 3.
    i dont see how to make it that way. any chance you could upload the gradient?

  18. James says:

    Hikari, left click and drag the little boxes along to where you want them.

    I’ve uploaded all the PSDs (they have the gradients in them) and made it available on the PSD Pack page.

  19. Denis says:

    Nice tutorial photoshop))))

  20. WFGeppetto says:

    Nice tut! I had all the same problems, but now I’ve gotten it worked out. I think that it’s the difference between whatever you’re using and CS3 extended. I stumbled around until I got it working, now I just need to figure out how to crop to selection properly, so I can extract the button for use.

    Nice site, keep em coming. If you had more tuts, and catagories, this would be a huge hit.