advanced photoshop

Create a web badge

Posted in:
Tips & Tutorials, by Adam Smith

Use Photoshop CS6’s new vector shapes to create web assets

Set your document

Select File>New and choose Mobile & Devices from the Preset drop options. From these options set size 1536 x 2048, retina display resolution. You can either leave Resolution at 72 ppi, hitting OK, or swap this out for 300ppi by selecting Image>Image Size, activate Resample Image and altering Resolution value. We’ve set ours at 300 ppi, as we need to present the print example to you in the magazine after all. Now it’s time to establish colour.

Create a web badge

Colour consistency

Tones that repeatedly clash on your pages can simply look ugly or have more serious consequences like impairing text legibility, for example red type on black background, or greying on blue. What you should do is make sure that your colours contrasts enough with the background to achieve clear readability. Also stick to several colours rather than loads, for a slick look. We’ve supplied you with a coordinated swatch. Load the Web badge colour swatch.aco by choosing Window>Swatches, selecting Load Swatches from the panel fly out options.

Create a web badge

Header backdrop

Set some rough guides to establish your header areas, and draw out your header backdrop using the Rectangle shape tool in a white colour. Add a Drop Shadow from the Layer Stye (fx) options, setting colour to black, Opacity between 20% and 30%, Blend Mode to Multiply, Angle at 90 degrees, Distance between 25px and 35px, Size at around 20px. Also add a White Stationary Pattern Overlay, from the Color paper presets in the Pattern fly out options. Set scale at around 540%, Blend Mode to Linear Burn, Opacity at 100%.

Create a web badge

Sub menu

Similarly create your menu bar below your header layer, using the Rectangle shape tool in a ‘button green’ colour. Apply a Gradient Overlay from the Layer Style (fx) options to this menu layer, setting a black to transparent gradient style. Also set Opacity at 15%, Angle at 90 degrees and Scale at 20%. You can position the gradient in real time, placing it at the foot of your shape to mimic a drop shadow, creating a 3D effect when the two layer effects fall into place.

Create a web badge

Base badge shape

Select the Polygon shape tool and in the overhead options set Sides value to 20, activating Smooth Corners, Star and Smooth Indents. Also Set the Indents Sides By option to 10%. Now draw out a shape that’s size fits inside the borders of your header backdrop layer, using a ‘button charcoal’ colour. Duplicate this shape and rescale holding Shift, increasing size by 7%. Centralise this copy shape and select the Shape tool, activating options. Set your Fill shape options to No Color.

Create a web badge

Add badge stroke

Duplicate your copy badge layer and increase size once more, centralising. Deactivate the attached Inner Shadow layer style, active the Shape tool and set a ‘button green’ colour Stroke. In the Stroke Options set a dotted style, Setting Align to Outside, Gap at 3 and a 2pt size. Activate your original badge shape and rotate by 8.5 degrees creating a more diverse pattern as all badge shape layers combine. Activate the Ellipse shape tool and draw out a ‘button green’ colour circle, holding Shift in the centre of your badge.

Create a web badge

Badge centre

Activate the Shape tool options, applying a solid style 8pt ‘button grey’ colour Stroke. Apply a Drop Shadow from the Layer Styles, setting Blend Mode to Multiply, Opacity at 30%, Angle at 90 degrees, Distance at 10px, Size at 40px. Select the Rectangle shape tool and draw your shape so the edges fall into your Ellipse shape stroked edges. Rotate this shape layer -15 degrees, counter clockwise. If any of the edges should fall outside of the stroked edge, activate the Move tool, hold Cmd and manually transform corners.

Create a web badge

Badge centre part II

Select the Ellipse tool and draw a smaller ‘button grey’ colour circle, between 7cm and 8cm in size, in the middle of your badge. Place this new layer beneath your Rectangle shape. Duplicate this circle shape and decrease size by around 10%. Activate the Shape tool options. Apply a ‘button green’ solid style Stroke at a 1.5pt size. Hold Shift and activate all badge-related layers and select New Group from Layers from the Layers panel fly out menu.

Create a web badge

Create texture

You can use your own textures but we’re going to create ours using one of Photoshop’s presets. Open another 1536 x 2048, 300 ppi document and select Pattern Overlay from the Layer Style (fx) options. Select the Patterns preset from the Pattern fly out option, applying the Waffle pattern, setting Scale at 100%. Rasterize this layer (Ctrl-click layer) and desaturate (Cmd/Ctrl-U>saturation -100). Select Edit>Define Pattern and call this new pattern ‘web badge texture’. You can now add this from your Layer Style>Pattern Overlay presets.

Create a web badge
Quick Tip: As you’re working with vectors in CS6 you can change resolution size without the fear of pixelation, even creating a new document, simply dragging, dropping and resizing elements to match the right output.

Apply texture

Back in your web header project, activate your ‘button green’ badge layer. Select Style>Pattern Overlay and add the ‘web badge texture’. Set Blend Mode to Luminosity, Opacity at 55%, and Scale at 190%. Activate your ‘button green’ menu layer and apply the same Pattern Overlay style and settings, accept for Scale, which we’ve set to 150% instead. This is simply an aesthetic choice and we felt effects looked better at that setting.

Create a web badge

Option dividers

Still working with the menu layer, we know want to create dividers to create separate menu buttons. Drag and place guidelines at 9cm, 18cm and 27cm in your image, effectively mapping 3 button spaces from left to right. Zoom in at 50%, activate the Rectangle shape tool and choose a ‘button green’ colour. Draw out a thin rectangle shape the height of your menu shape. Duplicate this layer, activate the original and change its blending mode to Luminosity, setting Opacity at 50%. Select the Move tool and click the right arrow key twice.

Create a web badge

Make a button

Activate both divider layers (Shift-click) and duplicate, subsequently placing these over our previously placed guidelines. Place these all into a separate group folder titled ‘Dividers’. Select the rounded Rectangle tool and set a Radius of 30 px from the overhead options. Set your foreground colour to ‘button orange, background colour to ‘button yellow’ (Tool Bar>Color Picker). Set your Shape Fill options to Gradient and draw out your box, fitting this within your menu layer, to the right. Also apply a ‘button orange’ 1px solid style Stroke. Set Stroke Options>Align to inside.

Create a web badge

Type hierarchy

When working with white space like in our badge, varying type size, weight and colour fonts can create visual interest. More importantly this can highlight the most important content. In this case your brand name, which should be largest and central. We’ve applied a mock name and applied this with a Georgia font at a 65 pt size. This is reinforced with more decorative type styles, using Arial and Times New Roman fonts. We’ve also applied other shapes to create visual interest.

Create a web badge

Add noise

We’ve also applied Arial font type to create button links in our menu bar, applying subtle Drop Shadow effects from the Layer Style options. Now you have your layout essentials. But we want to add a more tangible sense to our elements. Just duplicate the menu and ‘button green’ colour badge layers, deleting any attached layer styles and Stroke settings. Select Filter>Noise>Add Noise, apply an Amount up to 6%. Drop Fill to 50%.

Create a web badge

Sharpen elements

As we are working with vectors we can rescale at any time, but now we have raster noise layers its safer to group elements into Smart Objects when de-scaling. Applying Smart Objects is also great at allowing you to apply non-destructive sharpening. Photoshop CS6 can add this externally to a Smart Object without having to rasterize, much like a Layer Style. All visual details inside the Smart Object layer stays as before. As we’re also working with vectors you can also easily change out colour values if you wish, using the Shape tool>Fill options.

Create a web badge


  • Samantha27

    Hi Adam! This is such a great tutorial. I really enjoyed and learned so much about the creation of web badge. Thanks