Welcome to Fredricz.com. Here you will be able to learn photoshop, CSS and HTML, directly from tutorials. You can also watch some designs and graphics that I've created.

Step 1

To start, select "new" and then choose 'pixles'. Width: 400px - Height: 200px

Step 2

At first we need to create a symbol. We can do that with the 'Rectangle Tool'. Select it,



Select "rounded" -rectangle tool. Because we need the corners to be rounded. Then set the radius to 2mm. This sets the corners to 2mm radius.

Step 3

When you have selected to tool, you need to make a symbol. Just click and draw. Something like this:

Step 4

Now when we got the symbol, we need to makes some effects to it. The easiest way to do this is with 'Blending options'. Right click on the layer and select that.



When the window 'Blending options' comes up, you need to select 'Gradient Overlay'.



In 'Gradient Overlay' settings you are able to change the gradient to what you want. But in this tutorials, we are just going with the standard settings. Except of the colors. Click on the color bar.



Then you need to select the colors: #2b6dd0 to the left. And to the right: #5a9bfc



Now when we got the gradient color, We need to add a stroke around the symbol. Select 'Stroke'.



When the settings comes up, you need to set the stroke to 1px, and when the color: #2e6ac5

Step 5

Wow, now we got a pretty good start. Now you need to create a new layer. (CTRL + SHIFT + N)



Then just paint the layer white. Everything white (inside the new layer).



Set the Opacity to 13%. This makes the layer a bit transparent.



Now we need to delete some of the layer. So you need to select 'Elliptical Marquee Tool'. Here;



Then just click draw. Til you think it looks good... Something like this:



All you need to do now is to press 'Delete' button (on your keyboard). And then, it should look like this:

Step 6

Great job! At a bit text or an image and you got an awesome button or whatever you want to use it for!