Graphic blog, Webdesigns tip&tricks, Photoshop tutorials

In this tutorial, I`m going to show you how to create a modern, good-looking 3D button for Twitter. Nowadays, CSS3 gives us the possibility to build awesome 3D buttons, using only CSS code, therefore, I want to show you how you can do such a button in Photoshop.

What we`ll be doing today:

Like for any design project, open Photoshop and create a new file with the canvas of 600×400px. Paint the canvas with a light blue color (#f0f5f9) .

Select the Rounded Rectangle Tool(U) and with a radius of 10px, draw a big button of 295×58px.

Now apply the next layer`s styles, by double-clicking the layer.

We`ve just obtain a nice button silhouette, but hey, is not 3D yet. Let`s make it 3D!

Duplicate the button`s layer and place the new layer just under the original one. Then go to Edit->Transform->Scale or just hit Ctrl+T and drag with the mouse the bottom line until the button reaches 64px in height.

Clear the layer style because it has the same styles from the original layer. The button looks great as it is now, but I want to make it awesome. To clear the layer styles, just right-click on the layer and hit “Clear Layer Style”. Then, apply this new layer styles:

Now the button`s silhouette looks awesome:

Before adding some text, let`s add another detail, a lighter area. Ctrl+Click on the big button layer to select the entire area of the button.

Create a new layer above all of the layers and grab the Brush Tool.Choose a Soft Round Brush of 250px and paint with white 1-2 times at the bottom of the selection. You`ll notice that the button is getting lighter at the bottom and this is a cool effect.

The button silhouette is ready. The next step is to add some text and a twitter bird. For the text I used Arial font of different sizes. Download this twitter bird and add it to the project. Resize the bird to 32×23px.

Apply the next layer styles to the text and bird:

I have to say that this button is finished. I like what we`ve obtained and hope you like it too. This is a great button, with a modern look and ready to be coded. If you have any feedback for us, drop us a comment. Till then, take a look at what we`ve done today:

Related posts:

1. How to do a glossy and animated jQuery button 1/2 Photoshop part
2. How to Design a Clean and Beautiful Login Form in Photoshop
3. How to Design a Sleek Progress Bar in Photoshop
4. How to Design A Big Good-Looking Button in Photoshop
5. How to Design a Flip-Clock Countdown in Photoshop