Archive for the ‘Tutorials’ Category

Photoshop Colour Scheme Picker and Automatic Colour Palette Generator

September 23, 2009 Leave a comment

Download a free Photoshop .psd file which generates 4 colour schemes from a single base colour.

As a web designer and developer, I’m constantly on the lookout for simple and effective (and free!) ways of viewing possible colour schemes for a new design, often based on a single ‘key’ colour — eg a company’s logo colour.

This Photoshop file will simultaneously show you four different colour schemes, based around a single chosen colour. Each colour scheme also shows tint and shade variants.


» Download: PhotoshopColourBar.psd


  • Pick a single colour to generate 4 colour schemes — Analogous, Triad, Monochromatic and Complementary.
  • Each colour scheme has two tint/shade variants.
  • Simple Photoshop File — compatible with Photoshop CS, CS2, CS3 and CS4.
  • Small footprint — keep it open whilst you work on you main project.


  • Unzip the compressed file somewhere convenient. I keep it in the root of my Clients folder.
  • Load the PhotoshopColourBar.psd file into Photoshop.
  • Double click on the square solid colour ‘Layer Thumbnail’  labelled ‘Pick a Colour’ , and choose a base colour — either directly or from sampling an image, logo, etc.
  • Important: Select the top layer to be able to sample the colours, otherwise Photoshop won’t allow you to use the Eyedropper tool correctly.

A colour-wheel version is available at:


Colour adjustments are made using successive masked Hue/Saturation adjustment layers.

The tint-shade variants rely on a couple of ‘Reset’ layers to turn any selected shade into the ‘normal’ brightness, fully saturated version. These are then used to generate tinted versions (vertical bars).

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

September 4, 2009 1 comment

In Part 1, we looked at setting up the Photoshop document and creating the first button. In Part 2, we’ll look at duplicating and modifying this button, for other functions.

  1. Open the previously created Photoshop document, containing the single button created in part 1.

    The finished button design from Part 1

    The finished button design from Part 1

  2. Create 4 new horizontal guides, 40 pixels vertically down from the top at 40px, 80px, 120px and 160px. Move your first button 1pixel down and one pixel in from the top left corner, leaving a single pixel of white space above and to the left of the button. Tip: zoom in for fine-positioning.
  3. Create a New Group, named “OFF”. Add the first button’s group to it, renaming the first button group to ADD TO BASKET“.
    Tip: putting group names in block-caps makes selecting them easier.
  4. Duplicate the ADD TO BASKET group, and name it with the next button’s name: “CONTINUE SHOPPING”.
    Tip: Use Layer – Duplicate Group (CTRL-ALT-J) to duplicate, you will be prompted for the new group’s name.
  5. Nudge this new group down by 40 pixels. Tip: Press V to bring up the Move Tool, then SHIFT-Click on the down arrow key 4 times.
  7. Using the Type Tool, click on the text in each of the buttons, and set the text to read the same as the group names. Use a bold font variant for the words CONTINUE, PROCEED, UPDATE and SECURE. The text won’t all fit in the boxes, we’ll fix that later.

    Don't worry if the text disappears from the right hand edge of the buttons, we'll fix that in a moment.

    Don't worry if the text disappears from the right hand edge of the buttons, we'll fix that in a moment.

  8. Enlarging the buttons to the correct size. With the Direct Selection Tool (A), click in the lower half of the button you wish to alter. The outer path of the button will appear, and it’s layer will automatically be selected. Shift-Click on the three drag handles on the right hand edge of the button to select all of them.

    Hhift-Click where shown

    Shift-Click where shown

  9. Nudge these points right, using the right-hand arrow key, until all the text is visible, and approximately 10 pixels of margin is left. Count the number of nudges/shift nudges. I’ve used 30 (3 shift nudges). We need to repeat this number of nudges for the highlight layer.

    Notice the highlight layer has been left behind. We'll fix that next.

    Notice the highlight layer has been left behind. We'll fix that next.

  10. From the Layers Palette, select the button’s highlight layer. Click near the top of it with the Direct Selection Tool to edit it, then Shift-Click on the three right-hand drag points shown below:
  11. Nudge these 3 points right by the same amount as the button’s edge (30 px). The highlight should now align with the edge of the button.
  12. Repeat steps 8,9,10 and 11 for the remaining buttons:
  13. Changing the button symbols and positions. It seems more appropriate for the “PROCEED TO CHECKOUT” and “BEGIN SECURE PAYMENT” buttons to have it’s action zone on the right, as it indicates moving forward. For these two buttons, select the “Green Action Zone” layer and move it to the right-hand side, as shown.
  14. Nudge the text back over to the left, and remove the + sign.
  15. Set foreground colour to white, and sing the Polygon Shape Tool, set Sides to 3 and create a small triangle.
    Tip: Hold down the shift key to constrain it’s angle whilst creating it. You’ll have to create it pointing down at first, then rotate the resulting shape so that the triangle points right.
  16. Repeat steps 13, 14 and 15 for the “BEGIN SECURE PAYMENT” button.
  17. For the “CONTINUE SHOPPING” Button, change the colour of the green overlay to red (double click on the shape layer, and change the hue value to 0). Remove the + sign, and add a triangle, this time, pointing left.

    The buttons are nearly finished.

    The buttons are nearly finished.

  18. The “UPDATE QUANTITIES” button requires another symbol. Remove the + sign and select the font Windings 3. Type a capital “P” which should give a rotating arrow. Rotate this 45° clockwise into the position shown.

Update: here’s the .psd file, to download, of where we’ve got to so far: buttons.psd

The main buttons are now complete. In Part 3, we’ll look at simple rollover effects, and creating CSS entries for displaying the buttons and rollovers.

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

August 21, 2009 2 comments

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.
  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:
  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):
  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:


  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:
  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):
  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:
  32. Click on the left-middle grab handle, then nudge it vertically down by 10 pixels (Shift + Arrow-Down):
  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:
  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:
  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.