Archive for September, 2009

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

homemade biltong update…

September 16, 2009 Leave a comment

The biltong, made two weeks ago, is now almost all eaten. It was absolutely delicious, much much better than I was expecting.

In all, it took five nights in the electric fan oven, running at between 30 and 35°C overnight. I left the oven off, with the door ajar during the day, and ran it from 18:00 to 07:00 each night. A few of the slightly thinner pieces dried quicker, and I removed them when I couldn’t squash them with my fingers.

I wanted the biltong really dry, so allowed a longer drying time. The resulting taste is amazing, far superior to the rather bland shop-bought stuff.

Overall yield was approximately 750g of dried biltong from1,750 g raw meat.

The only problem is it’s quite difficult to slice. A large knife and a steady chopping board are needed to produce wafer-thin slices across the strips.

The next time I catch some beef on offer, I’m definitely doing this again.

Categories: Recipes Tags: , , ,

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.