Web Design Graphics

Tutorial#1: Using Photoshop to create Vista Style Website Buttons

Step#1: Open a new document in Photoshop. Go to file>New or press CTRL+N.

 

Step#2: It will open a box where you can mention the width and height for your navigational menu. I have chosen 360 (width) x 360 (height) pixels at a resolution of 72 pixels/inch. Mode is RGB and background is transparent although you can choose white as well. Name of the file is Button-1.

Step#3: It Now choose a new layer and change your foreground color to #3e3d3d (light Gray) and background color to #151515 (Dark Gray). Choose the Gradient Tool and choose Radial Gradient. Use the gradient tool from left top to right bottom. This is how it will look:

 

Step#4: Create another new layer

 

Use the Rounded Rectangle Tool t o create a shape of 300 by 50 pixels in the middle of the document.

 

Step#5: Now change the foreground color to #1c3f47 and the background color to #2a6976. Now click at the center of the layer and the rectangle will form automatically.

 

Step#6: Choose the Gradient Tool and then choose reflected Gradient. Select the rectangle and use the gradient from the center of the rectangle to the bottom.

 

Step#7: To make it a Vista Style button, we will have to add some layer styles. Go to Layer>Layer Style>Outer Glow. Use the following parameters.

 

Now choose Layer>Layer Style>Inner Glow. Use the following parameters.

 

Now choose Layer>Layer Style>Gradient Overlay

 

 

Now your button should look like this

 

Step#8: Now to make it look more attractive, I have used a reflection. For this, first select a new layer and then select the rectangle by using CTRL + Click on the rectangular layer. Now fill your selection with #FFFFFF (White).

 

Now move the white layer below the previous (blue) layer using the Move Tool .

 

Step#9: Go to Edit >Transform > Perspective.

 

Drag the white rectangular box more towards your right while holding down the shift key.

 

Step#10: Go to Layer >Add a Layer Mask. Then Use Linear Gradient with a Black and White combination. Black will be your foreground color and white will be your background color. Half of the white box will fade out.

 

Step#11: Go to Layer>Layer Style>Blending Options. Blend Mode will be soft light and Opacity will be 15%

 

 

Step#12: All you need is some text. Use a nice font.