Today's Question:  What's your opinion about Alibaba mooncake incident?        GIVE A SHOUT

Technical Article => Software =>  PhotoShop Design

Create rounded corner buttons in photoshop using gradient

  Sachin Khosla      2011-10-10 14:04:33      7,390    0    0

Hi People,

I should rather call you photoshop lovers, right ? We are going to create a very simply yet eye catching but sober buttons in photoshop. They are simple light in weight and can be used the way you want. You can also add some glossy look if you wish to. But these days not many people like website with those glossy looks. Here is the final output which you will get after reading this tutorial.

rounded corner buttons Create rounded corner buttons in photoshop using gradient

However many web-developers, webmasters, designers do not like to use images as buttons, but these can be used if you design them wisely on a website, for eg. embedding them on a image-sheet or sprite. Now lets not waste your time and let me show you how quickly you can create these buttons.

1) Open photoshop and create a new document with width 600 and height 400. I like wider workspace, but it depends on your preference.

2) Give background layer black color or white (if transparent), so that you can see clearly the borders etc.

3) Now pick the Rounded Rectangular Tool(U) from the tool box and with paths as selected action & radius 10px. Draw a wide rectangle with an estimate to what your button should look like.

rec tool Create rounded corner buttons in photoshop using gradient

4) Right click inside the rectangle and choose make selection, as shown in the picture below.

screen1 Create rounded corner buttons in photoshop using gradient

5) Now create a new layer and pick the Gradient(G) Tool from the toolbar. Please use the following configuration for the gradient tool setting and draw the gradient in the vertical direction (upside-down).

screen2 Create rounded corner buttons in photoshop using gradient

6) Now there are times when you want to create more than just one button. So you can use the same selection as above to maintain the size and structure of the button.Todo so, create another layer and select the Marquee Tool(M) and then move the selection downwards.

screen3 Create rounded corner buttons in photoshop using gradient

7) Now repeat the above step to create the gradient, this time I am going to fill it with different color as shown below.

screen4 Create rounded corner buttons in photoshop using gradient

8 ) Now let us add some text to it. You can also use these images as background using CSS property and then can have dynamic text for a single image. But if you want a text with some effects, then you can choose the settings from either of the two shown below. Right click on the layer and choose Blending options, this will popup the layer effect menu. If you want to choose the effect as shown in blue button, use the settings for layer as 2 (notice the red colored 2 in the picture below). However if you like the shadow and more effects that use the effects of both layers 1 + 2.

screen5 Create rounded corner buttons in photoshop using gradient

You can always add more effects to it using filters, can also add glossy finish using another layer. But I really liked this output and decided to suffice myself with these. Hope you create something more beautiful.

Stay Digified !!
Sachin Khosla

Source:http://www.digimantra.com/tutorials/create-rounded-corner-buttons-in-photoshop-using-gradient/

DESIGN PHOTOSHOP ROUNDED BUTTON GRADIENT

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

Do not touch any of these wires

By sonic0002