Home > Photoshop Tutorials, Tutorials > Tutorial: Create High-Quality Glossy E-commerce Website Buttons. Part 1.

Tutorial: Create High-Quality Glossy E-commerce Website Buttons. Part 1.

Today’s websites increasingly require high quality UI elements, such as buttons, for a richer user experience.  In part 1, of a 3-part series, here’s how to use Adobe Photoshop to create a series of glossy, Web 2.0 style buttons for common E-commerce site functions.

The final single button.

The final single button. Next week how to create variants, and rollover effects.

This tutorial assumes a moderate degree of competency with Photoshop.

  1. Create a new Photoshop document, 400 x 200 pixels @ 72 ppi. We’re going to be creating 5 buttons each with a rollover effect, in a grid with each button occupying 100 x 40 pixels.

    An empty, new Photoshop Document

    New Photoshop Document, 400 x 200 pixels. 1 vertical guide at 100 px

  2. Create a vertical guide at 100 pixels. We’ll create the other guides later, this is a guide for creating the first button.
  3. Create a new layer, and name it “Background”. Fill it with white.
    • Tip: This makes the button easier to see. Don’t make the layer a background layer, as we’ll be turning if off later.
  4. Create a new Group, and name it “BUTTON BASE”. Select this group to use it. We’ll be creating the button elements within this group, to make it easy to clone the group to make the other buttons in the series.
    • Tip: Naming groups in block capitals makes them easier to find when right-clicking with the Select Tool.
  5. Pick a base colour for the buttons, for example #75879D.
    • Tip: Mid to low saturation colours work best for overlaying the gradient and highlight effects that we’ll be using.
  6. Using the Rounded Rectangle Tool, set the radius to 12px, and create a shape anywhere 24px high by 150px wide.
    • Tip: If you have the Info Palette open, it’s easy to create objects with exact measurements.
  7. Centre the shape on the 100px vertical guide.
    photoshop-tutorial-glossy-buttons-2
  8. Name the shape “Button Background”
  9. To this shape, add a drop shadow effect:
    • Blend Mode: Multiply
    • colour: #081f3d (very very dark blue)
    • Opacity: 26%
    • Angle: 120° (set as Global Angle)
    • Distance: 3
    • Size: 4
  10. Add an Outer Glow effect: This provides a more subtle outline than using Stroke.
    • Blend Mode: Normal
    • Opacity: 57%
    • Colour: #11407c (dark blue)
    • Spread: 0
    • Size: 1
    • Range: 42%
  11. Add an Inner Glow effect:
    • Blend Mode: Vivid Light
    • Opacity: 21%
    • Colour: White
  12. Turn off this Inner Glow effect for now, it’ll be used later for the rollover version of the button.
  13. Add the following subtle Bevel and Emboss Effect settings:

    Forground and Background colours: white and black.

    Foreground and Background colours: white and black.

  14. Finally, for this layer, add a Gradient Overlay Effect:
    • Blend Mode: Colour Burn
    • Gradient “Black, White” Preset.
    • Scale 91%
  15. Save your work. Your background button component should now look like this:

    Background button layer, with effects applied.

    Background button layer, with effects applied.

  16. Set the foreground colour to #2e7c1e, a darkish medium to high saturation green.
  17. Create a new Rectangular Shape overlapping the left-hand edge of the button, as follows:
    photoshop-tutorial-glossy-buttons-5
  18. Make this layer a Clipping Mask by ALT-clicking between this and the Button Background Layer. Clear any automatically applied Effects for this layer. You may need to nudge the green area left or right. Try to keep it approximately square (about 25 pixels wide inside the button):
    photoshop-tutorial-glossy-buttons-6
  19. Name the green layer “Green Action Zone”.
  20. Add an Inner Glow Effect, changing only the following:

    • Blend Mode: Color Burn
    • Opacity: 75%
    • Colour: black
    • Size: 1
  21. Add a Drop Shadow Effect:
    • Blend Mode: Color Burn
    • Opacity: 49%
    • Angle: 35° (untick Global)
    • Colour: black
    • Distance: 1
    • Size: 13
  22. Remember to Save. The button should now look like this:

    photoshop-tutorial-glossy-buttons-7

  23. Creating the Highlight or Gloss Layer: First, duplicate the Button Background layer, and drag it to the very top of the layer sequence. Clipping masks will break, don’t worry we’ll fix them in a moment.
  24. Name this top layer “Button Highlight”, and *clear any Effects* it has.
  25. Add Clipping Masks between the Button Highlight and Green Action Zone Layers, and between Green Action Zone and Button Background layer. Ie both upper layers are clipping masked over the button background layer. Your layer palette should now look something like:
    photoshop-tutorial-glossy-buttons-8
  26. Zoom in on your button a couple of times (300%)
  27. Select the Button Highlight Layer’s Vector Mask (click on the grey thumbnail immediately to the left of the words Button Highlight in the Layer Palette.)
  28. Select the Direct Selection Tool (keyboard shortcut: A)
  29. Press CTRL-T or Select Edit – Free Transform Path, and drag the bottom middle drag handle up to the middle of the image (it should snap automatically when your near):
    photoshop-tutorial-glossy-buttons-9
  30. Press Enter to commit changes.
  31. We’re now going to perform a few simple path edits. With the Direct Selection Tool, click on the black border around the path. The path edit drag handles should appear:
    photoshop-tutorial-glossy-buttons-10
  32. Click on the left-middle grab handle, then nudge it vertically down by 10 pixels (Shift + Arrow-Down):
    photoshop-tutorial-glossy-buttons-11
  33. Now click on the drag-adjust handle vertically above the node you’ve just moved. Drag this up, vertically in a line (hold down the Shift key and drag upwards) so that the top is in line with the top of the button:
    photoshop-tutorial-glossy-buttons-12
  34. Repeat steps 32 and 33 for the right side of the image so that the lines are symmetrical.
  35. With the Color Sampler Tool, sample the colour right in the centre of the button. (approx #5a6f8a).
  36. Set the Background Colour to White.
  37. Zoom back to normal size.
  38. For the topmost Button Highlight Layer, add  a Gradient Overlay layer effect with “Foreground to Background” gradient (should be the blue you selected, to white at the top).
  39. Set the Button Highlight Layer’s transparency to 65% Normal
  40. Remember to Save. Your basic button is now complete, and ready to add some text and symbols.

    The styalistically complete button, awaiting text and symbols.

    The stylistically complete button, awaiting text and symbols.

  41. Select the Text tool, and a sans-serif font, such as Myriad Pro (which comes bundled with Adobe Acrobat Reader 7 and 8 (but not 9).
  42. Select a font style of “Semi Extended”. If this isn’t available, set a font such as Arial will do.
  43. Set the foreground colour of white, and a font size of 12pt. Check that font tracking is set to 0.
  44. Set font anti-aliasing to Sharp
  45. Click over the button and type the text “ADD TO BASKET“.
  46. Highlight the word “Add” and change the font style to “Semi Bold Semi Extended”
  47. Position the text carefully, centred relative to the blue area of the button:
    photoshop-tutorial-glossy-buttons-14
  48. The text can be made to stand out slightly, by the use of a very subtle, non-offset drop shadow. Use the following drop shadow effect on the text layer:
    • Blend Mode: Color Burn
    • Colour: Black
    • Opacity: 45%
    • Distance: 0
    • Size: 1
  49. Select the Type Tool, with a font of Myriad Pro, Bold, 22pt, Sharp and type a + sign.
  50. Give this the same drop shadow effect as the Add to Basket text.
  51. Position this centrally over the green highlight area:

    The finished button design

    The finished button design

We now have a base button that we can use to build further items for the set.

In part 2, we look at creating the remaining buttons, look at some variants on the theme, and rollover effects. We’re going to be using an “image sprite” made up of a grid of 5 buttons, each with a rollover state, giving us 10 buttons in a single image.

In the mean time, you can check out some of Memoryweaver’s other Photoshop Tutorials.

Advertisements
  1. studiowebdesign
    August 21, 2009 at 10:37 pm

    Nice clear button and easy to follow tutorial – will recommend this to our users. Thanks. Interesting how button design as evolved over the years.

  1. September 4, 2009 at 4:19 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: