Vista Styled Button
Learn how to make a vista styled button by using lots of different layer styles, tools and techniques.
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.
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.
Dale Hay
February 11th, 2008
Very nice and clean. I like it a lot.
James
February 11th, 2008
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
MsG
February 11th, 2008
Nice tut mate!
James
February 11th, 2008
James, what bit of steps 2 and 3 are you having trouble with? Making the rounded rectangle or filling it with a gradient?
John
February 12th, 2008
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.
AJ
February 12th, 2008
How about you tell people how to do step 1?
Lynsey
February 12th, 2008
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
James
February 12th, 2008
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?
Steve Adams
February 13th, 2008
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.
James
February 13th, 2008
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
Dale Hay
February 14th, 2008
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)
AmIstupid?
February 16th, 2008
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?
James
February 16th, 2008
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.
AmIstupid?
February 17th, 2008
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
Miguel
February 17th, 2008
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.
AmIstupid?
February 19th, 2008
Thanks alot its working now
HikariMisako
February 20th, 2008
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?
James
February 20th, 2008
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.
Denis
April 13th, 2008
Nice tutorial photoshop))))
WFGeppetto
June 9th, 2008
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.
Andrew
July 4th, 2008
You may have problems making a selection with the Rounded Rectangle Tool because you have it set to Fill Pixels or Shape Layers, instead of paths.
Nice tutorial, by the way.
cjrocks
July 8th, 2008
Hi James
Nice tut btw, I think I know why some people have trouble with Paths. First, when they select the rounded rectangle tool (U) they need to make sure the middle button (Path) is selected on the top of the paths menu. Many ways to get the same job done. I like your choice of styles, however, one step seems to be missing which gives it the upper semi-gloss. I know how to do so it’s no biggy here, but others might stumble.
Thanks again,
CJ
http://i201.photobucket.com/albums/aa128/cjrocks_photos/vistastyledbutton.jpg
Jr
July 18th, 2008
I was unable to complete this, there seems to be steps left out, I also could not set the color values for the gradient tool.
The instructions are very vague, not everyone trying this are super advanced hi tech completely geeked out users. Some of us are just normal everyday people tying to figure this out.
Signed;
Disappointed.