Simple Design: Create a basic button
If you are in the web design game, it is a sure bet that sooner or later you are going to want to add an element of interactivity to your site.
And once you start down that road, there is one thing you simply cannot do without: the humble button.
Surf the internet for a few minutes and you are guaranteed to see dozens, if not hundreds, of different styles of buttons; from the humble Windows or Macintosh default grey, to multi-coloured flashing varieties. The best website buttons are designed to merge seamlessly in with their surroundings and their site brand, and we’re going to demonstrate a simple method for creating an eye-catching button that you can adapt to fit any site.
This tutorial assumes that you are using Adobe Photoshop.
Step 1: Background
First we are going to create a custom background for our button. Start Photoshop, and create a New image measuring 5×5 pixels with a transparent background:
Zoom in to maximum magnification, reset the colours to default (D) and select the Pencil Tool (B). Now colour the pixels in a diagonal line from bottom-left to top-right:
Now we are going to save that simple pattern; go to Edit, Define Pattern to save the image – give it a simple name, e.g. “5×5” – and click ‘OK’. The pattern is now available in the Patterns list. You can close the file now as we won’t be needing it again (Ctrl+F4).
Step 2: The button
Now we are going to create the actual button. Create a new file, giving yourself enough space to play with (300×300 pixels should be enough). Using the Paint Bucket Tool (G), fill the canvas with the same background colour as your website (we will use white in our example).
Set the default colours and then reverse them (hit D then X) so that the foreground colour is white:
Now we are going to draw our button. Create a new layer (Ctrl+Shift+N) and name it “Button”. Select the Rounded Rectangle Tool (U) and set the radius to a relatively low number (e.g. 5px). Making sure that ‘Anti-aliased’ is checked, draw a rectangular rectangle to the required size. Ours will be 150px wide by 50px high.
Step 3: Blending
It’s not particularly stunning yet – in fact if you’re using a white background, there’s nothing there at all! It’s time to apply some styling to our button, using Photoshop’s ‘Blending Options’.
Double-click the “Button” layer to open the Blending Options dialog box. We are going to set four styles: ‘Color Overlay’, ‘Gradient Overlay’, ‘Pattern Overlay’ and ‘Bevel and Emboss’.
First, let’s colour our button – select ‘Color Overlay’. For this demonstration we will make a red button; you will want to choose a colour that fits with the overall colour scheme of your own website. Use the palette tool to select a fairly deep hue of your chosen colour, and set the Opacity to 80:
We can give our button a little more visual interest by adding gradient and pattern effects. Select ‘Gradient Overlay’ with an Opacity of 80 – you can change the gradient style if you wish, or leave the default settings:
Now we will use our custom pattern that we created earlier. Select the ‘Pattern Overlay’, and click the arrow next to the default pattern to access the other stored patterns:
The pattern we created previously is now at the end of the list – select it, and set the Opacity to 80.
Finally, let’s define the borders of our button a little better by giving it an inset look. Select ‘Bevel and Emboss’ and change the Style to ‘Pillow Emboss’. You might like to play with the Shading settings if the button has to fit in with other lit elements on the page:
The final result
That’s all there is to creating simple, stylish buttons – all that is left now is to add some text in a clean sans-serif font:
And there you have it! A button with just enough visual flare to stand out from the crowd, but subtle enough to still blend with your website’s overall character.
Try experimenting with different radius corners – larger figures will give a lozenge-shaped button – and the various types of bevel available. If you are using a lighter background colour, reduce the Opacity of the gradient and pattern so that they don’t overwhelm the base colour.