How to make a Web 2.0 button or badge in Photoshop

No comments - This post in romanian

Recent years evolution in graphics and images for Web pages has led to the definition of Web 2.0 style. It is used to make a cool logo or other visual elements (buttons, menus, badges) for the Web site.  The style is characterized by:
- using intense and vivid colors that attract attention to a particular element or visual symbol
- applying glow, emphasizing, reflection, glossy or mirroring effects to add visual details
This example is for a Web 2.0 button or badge and it is made in Adobe Photoshop CS4 or CS3.1. Add a new layer called Button (double click the layer’s name to rename it), to separate the background element (later you could change the background color as you like).

Add new layer

Add new layer

2. To draw the button it is used a rectangle with rounded corners. It is drawn on the layer added at the previous step

Draw button

Draw button

Before drawing the button shape you must set the type of the  form (we want a fill pixels type ; we do not want a shape layer) and the size of the angle for corners (let’s say 15 degrees).

Button options

Rounded rectangle settings

3. To highlight the borders of the button we will make an inside edge effect. We will select the button shape using its layer. Holding down the Ctrl key, left-click on the layer’s button (on its icon). After that we have the selection of the button shape.

Button selection

Button selection

4. The selection is changed by reducing its size. Using the Select -> Modify -> Contract menu option, the selection is reduced by 5 pixels.

Selection options

Selection options

5. Selection is copied into a new layer via copy (Ctrl + C or Edit-> Copy) and paste (Ctrl + V or Edit-> Paste). The new layer is called Interior.

6. Select the layer created in the previous step, Interior, and add a Stroke effect.

Stroke effect

Stroke effect

Options for the Stroke effect are: Size: 2 px, Color: White, Blend Mode: Normal, Opacity: 70%

Stroke effect options

Stroke effect options

7. Also on the Interior layer add a Gradient Overlay effect between 2 colors: #052a61(dark blue) and #2c77e7 (light blue)

Gradient effect options

Gradient effect options

8. To generate the spot of light effect on the button, make an elliptical selection on the Interior layer using Elliptical Marquee Tool

Elliptical marquee

Elliptical marquee

The selection is made only on a part of the button.

Button ellipse selection

Button ellipse selection

9. The selection is copied into a new layer via copy (Ctrl + C or Edit-> Copy) and paste (Ctrl + V or Edit-> Paste). The new layer is called Light. If the copied selection, is out of position with other layers, rearrange it using move tool.

Buton Web 2.0

Buton Web 2.0

10 On the last created layer, Light, apply a Color Overlay effect with these settings Blend Mode: Soft Light, Color: White, Opacity: 65%

Color overlay effect

Color overlay effect

11. Add a new layer for the text of the button. Using Horizontal Type Tool add the text “Click me” using Font: Lucinda Sans, Stil: Demibold Roman, Size: 72
12 On the text layer add a Drop Shadow effect (compared to default settings I modified Opacity: 45%) and a Outer Glow effect  with the settings Opacity: 25% Size: 51px, Color: White.

Drop shadow effect

Drop shadow effect

Outer glow effect

Outer glow effect

13 To enhance the button, apply a Bevel and Emboss effect, on the initial layer, called Button.

Emboss effect

Emboss effect

14 The obtained Web 2.0 button is

Web 2.0 Button

Web 2.0 Button

15 By altering the shape of the button, this technique will generate badges or other Web 2.0 symbols for your Web site.

Source project is available here

Other resources
•    Adobe Photoshop CS3 documentation at http://livedocs.adobe.com/en_US/Photoshop/10.0/

,


  1. No comments yet.
(will not be published)

  1. No trackbacks yet.