Perfect Week to Make Homemade Biltong

Sainsbury’s have their Beef Roasting joints half price again, over the Easter Period, so it’s a perfect time to grab yourself some, and knock up some delicious home-made biltong.

I wrote this recipe a couple of years ago, based on extensive research, before making my own biltong for the first time — it was a massive success, and made absolutely perfect biltong — I’ve made it several times since then, and haven’t had to alter the recipe a bit.

The real things to keep an eye on, are don’t leave it in the salt mix for a minute longer that required, make sure the salt is thoroughly rinsed off with the re-used vinegar solution, and keep an eye on the drying times.

I use a fan-assisted oven, that will run at very low temperature — monitored with a room thermometer — keeping the temperature around 32 degrees C, and no more than 35. The door is left an inch or so ajar, for better ventilation. I only run the oven in the evenings and at night, leaving it off during the day. It takes about 6 days of this to dry it out — it should be *just* a little soft when you squeeze it — not rock hard. Don’t be afraid to cut pieces open and look at them. It really depends on how dry you like your Biltong — it’s really difficult to cut when completely dry, but no less delicious.

Hearty Beef, Mushroom and Ale Stew with Fluffy Dumplings

Winter is upon us, the nights are short, the days are cold. It’s the perfect time for a warming, tasty and cheap to make stew. I’m including approximate costings, based on Sainsbury’s prices (plus beef from the local farmers’ market) at time of writing.

These quantities will make about 10 or 11 portions. Serve with hot buttered mashed potato, or parsnip and potato mash.

Preparation time: 45 minutes. Cooking time: 30 minutes + 2 hours in the oven, Gas 2 / 150 °C / 300 °F

Special Equipment:

1 large heavy casserole dish, approx 6 litre. The 28cm round cast iron Le Creuset is ideal, or any other large heavy oven proof pan or dish.

Ingredients:

For the Stew:

• 1.2 Kg / 2.5 lbs Shin of (or other stewing) Beef (preferably good quality, aged beef) (£ 7.68)
• 2 Large Onions, diced or sliced. (£0.50)
• 1 Kg / 2.2 lbs Carrots, peeled and chopped into 1 inch (2 cm) lengths (£ 1.00)
• 25 g pack Merchant Gourmet Mixed Dried Mushrooms (£ 1.60)
• 1×250 g pack Chestnut Mushrooms, quartered. (£1.08)
• 1 litre / 2 pints of your favourite Brown Ale (not too bitter — I used Mann’s Brown Ale, 2 x 500 ml bottles, total cost (£ 3.00);
• 3 Good Quality Beef Stock Cubes (such as Kalo Organic) (£ 0.48)
• 4 tablespoons Geo Watkins Mushroom Ketchup (£0.42)
• 1 rounded tablespoon Dark Brown / Muscavado Sugar
• Good sprinkle Thyme.
• 4 Bay Leaves
• Plain Flour for coating the beef pieces.
• Vegetable oil for frying the meat and vegetables.

Total Stew cost: £15.76. You should get 10 or 11 portions out of this.

For the Dumplings (makes 10 small dumplings. double up if you want more):

2 oz (60 g) Self Raising Flour (£ 0.10)
2 oz (60 g) Fine White Breadcrumbs (about 4 slices of bread, crusts removed) (£ 0.20)
2 oz (60 g) Shredded Beef Suet (£ 0.15)
1 Medium Free Range Egg (£ 0.26)
A little water to mix
Salt, Pepper and thyme (or any other chopped herbs you fancy) to season.

Dumplings cost: approx 71p for 10.

Method:

Soak the dried mushrooms in half a pint of boiling water and leave for at least half an hour, while you prepare the other ingredients.

Cut the Beef into approx 3cm / 1.5 inch chunks, and trim any larger pieces of fat from the meat. The connective tissue will break down during cooking, so only remove any particularly large pieces.

Add a good splash of oil to the casserole dish, and place on a medium-high heat. While the pan is heating, thoroughly coat the pieces of beef in seasoned plain flour. Brown in small batches in the casserole, adding more oil if necessary. This should take a couple of minutes per batch, and require about 3 batches. You’re trying to get a good outer colour on the meat, without actually cooking it too much.

Set the browned meat aside on a plate. Add some more oil to the pan, and add the chopped onions, carrots and chestnut mushrooms. Lightly fry to get some colour into them.

Once they’re browned off, turn the heat down to low, and add the liquid ingredients — both bottles of ale, the soaked dried mushrooms (plus their soaking liquid). Add the thyme, bay leaves, brown sugar, stock cubes, and beef pieces and stir thoroughly. Add enough water to cover everything.

Bring gently up to simmering point on the hob (should take about 15 minutes). Meanwhile, begin to preheat the oven to Gas 2 / 150 °C / 300 °F.

Once the stew is simmering gently, transfer to the oven, on a middle shelf. Cover with a lid, and cook for 1 and a half hours.

After 1 and a half hours, remove the lid, give a brief stir and add the prepared dumplings, cook for a further 30 minutes.

Skim off any fat that’s risen to the surface, and serve with mashed potatoes. Parsnip and potato mash is particularly good with this. An interesting addition to the stew is to put in some green anchovy-stuffed olives just before serving.

Dumplings:

This recipe makes 10 or 11 light, fluffy dumplings. If you prefer heavy stodgy ones, follow the recipe on the Atora Suet packet.

Grate the slices of bread or crumb in a machine until you have fine crumbs.

Combine all ingredients, add enough water (a few tablespoons) to make into a stiff, but quite wet, dough.

Roll in the palm of your hands into walnut sized balls (it helps if you wet your hands first to help stop the mixture sticking) and add to the stew 30 minutes before the end of the 2 hour cooking time, so that the dumplings get half an hour cooking.

Depending on portion size, the whole meal should come out at £1.50 to £1.80 per portion. It will keep for a good few days in the fridge, and can be frozen in individual portions for your own home-made ‘ready’ meal. Compare with supermarket ready meals, where you’re eating salty processed junk, and paying heftily for the privilege.

Biltong Update: Sainsbury’s half-price beef offer on again

Quick heads-up, Sainsbury’s have currently (and probably for about about a week) got their large beef Silverside vac-packed joints on offer, at half price (£4.49 per Kilo).

Bought myself one of these at the weekend, and am going to do another batch of biltong this week.

Review: Opticron Trailfinder II Monocular. Small is beautiful.

I’ve been using the Opticron Trailfinder II Monocular for a few months now, and it’s really impressed me.

When out and about, walking, I was finding my compact binoculars were just too heavy — they’d often get left at home and forgotten. Hence my search for something lightweight, water proof and cheap, that I could sling in my pocket. I immediately disregarded the ultra-cheap binoculars, I’ve used a really cheap pair and, frankly, you could hardly see through them.

A bit of searching on the internet, and I stumbled upon a recommendation for buying one of these monoculars — I didn’t even know they existed. The advantage of a monocular is it immediately cuts half the weight of a comparable binocular. The disadvantage is a narrower field of view, but I can easily live with that for the sheer convenience.

I bought a 10×25 unit from Sherwoods Photo, for £30 (free delivery is always a selling feature!) Neither too cheap, or too expensive. The monocular arrived in a couple of days.  Once the extra tie-on end cap and strap were fitted, you’re ready to go.

Weighing in at a featherweight 125 grams, with a rubberised case, the build feels solid, and should resist knocks and water. They’re supplied with a case, but it’s frankly a pain to get them in and out of, and rather defeats the ‘grabbable’ purpose. The lens caps fit tightly, defending them from dust and splashes.

Optically, the unit is pretty impressive, with good clarity. Focus is a bit tricky, as it’s by means of a lever arrangement, rather than a wheel. This tends to stick if you haven’t used it for a while, stopping you focussing with one finger. A tiny bit more force, with two fingers, frees it up and then it works very well. The technique I use is to put both middle fingers either side of the lever, allowing a fine degree of control. Focus can still be tricky, but you soon get used to it.

The monocular has a twisting eyepiece, to accommodate spectacle wearers, and this must be twisted out for non-spectacle use. It helps to have fixed the ‘drop-down’ lens caps at the right rotation (see top photo), so that they both hand down when the unit is untwisted.

The neck strap is adequately long, and adjustable. It’s a bit thin, but perfectly usable. The monocular slips nicely into your shirt pocked, with the strap around your neck, for convenient access.

In all, very good value for money and very easy to take out on walks to provide that bit of extra magnification.

Overall, 8/10. Definitely recommended.

Do you drive the Default Car? Why run the Default Browser?

My colleague likes Internet Explorer. There, I’ve said it. It’s probably not his fault, he likes Windows 98 too. Crucially, he doesn’t develop websites, but software drivers. He uses the web as a tool to find information, for entertainment, etc, just like an ordinary user. He doesn’t like Firefox, Chrome, Safara, Opera or any of the other browsers, as IE is the dominant market force. He thinks there’s no point in coding for anything else, as ‘Most people use IE as it’s the default browser’.

As a company, we are developing an increasing number of Web Applications. We need to use technologies such as Ajax, Javascript, JSON, XML, etc to power these systems, and like to give the users a rich user interface, nicely designed, with subtle animation effects that help guide them to choices, respond to them, and generally make their life easier.

Internet Explorer *has* to work for them. Even IE6. This makes twice as much work for us. Nice transparent .PNG file overlays, subtle smooth animations, etc are all impossible in IE. Yes, you can replace the .PNG files with .GIFs for IE6, and yes the animations will work in IE, but you get horrible black borders, the font smoothing breaks and has to be restored after the animation, and the layout gets broken unless you shove in a myriad of custom tweaks for IE6, IE7 and IE8. Great, three versions of the thing to have to cope with.

In the mean time, Firefox, Safari, Chrome, etc are advancing in leaps and bounds. Chrome and Safari now support native CSS3 animation effects, with Firefox bound to catch up in the next version. IE… Nothing. Nope. Can’t do. Load a few hundred K of Javascript and you can get it going. Rounded corners in IE, no problem. Simply code a few tens of lines of Javascript, CSS, create custom image files for every type, poke their layout until it hurts, after a few hours coding per case, there you go. Easy. Oh, you want them against a blue background now? Fine, no problem, I’ll just go and create a new set of images, redo the layout, rewrite half the code…

Firefox and Safari? Er. Really hard. You have to put in a whole one line command in the stylesheet. That takes at least 10 seconds.

Imagine you wanted to buy a new car. You go to SuperCars Showroom where they sell every possible make and model of car. You go in and say “Here’s my money, give me the ‘default’ car”. Ludicrous, in yet that’s what millions of users happily do with Internet Explorer. Large corporations stick to the tried and tested Default Car, because it took them so long to get it working 5 years ago, and they’ve developed lots of highly custom roads to meet its special needs.

Your ‘Default Car’ isn’t bad, it does 0-60 in about 15 seconds, has ‘reasonable’ fuel economy, and handles okay. You need three keys to unlock it, and a code to start the engine, because it’s been made ‘more secure’. Occasionally, whilst driving down a new road, the car will stop and demand several more keys are used to continue. It’s that secure. However, in the bad parts of town, you’re innocently driving along when the car takes control of itself, and drives you straight to the nearest brothel, casino or porn shop. But that’s fine, these things happen, it works most of the time.

Hopefully, as Microsoft’s browser market share continues to fall, Microsoft might be forced to do something. Javascript acceleration, HTML5, CSS3 anyone?

Either that, or every web developer like me will tell Internet Explorer to run Google Chrome Frame and suddenly it’ll work perfectly.

Photoshop Colour Scheme Picker and Automatic Colour Palette Generator

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

Features:

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

Instructions:

• 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: http://www.taupo.co.uk/colourdesign.html

Technical:

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…

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.

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

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

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.
6. Repeat steps 4 and 5 for the names: “CONTINUE SHOPPING”, “PROCEED TO CHECKOUT”, “UPDATE QUANTITIES” and “BEGIN SECURE PAYMENT”.
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.

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.
   

   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.

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.

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.

Homemade do-it-yourself biltong recipe: part 1, preparation.

Biltong is an absolutely delicious dried beef snack, originating from South Africa. It is, however, very expensive to buy and I’ve been wanting to have a go at making it for a while.

Sainsbury’s helpfully put their Silverside roasting joints on offer at half price, which was too tempting to ignore.

Next problem was locating a suitable recipe – there are a great deal of vague and differing recipes out there. About the only thing that they can seem to agree on is to cut the beef into 1 inch, square cross section, strips along the line of the grain of the meat. Also that coriander, salt, pepper and vinegar are involved.

After distilling them down, here’s the recipe and process followed.

Preparation time: about an hour of work. Three hours of curing time. 2-5 days of drying time.

Rough Ingredients

(doesn’t need to be exact quantities):

• 1.7 Kg Silverside Beef Roasting Joint
• The Marinade:
  • 300 ml Cider Vinegar
  • 300ml White Wine Vinegar (I decided to mix the two, to tone down the strong cider vinegar taste)
• The Cure:
  • 500 g Course Sea Salt
  • 200g Demorara Sugar
  • 1 tsp Bicarbonate of Soda
• The Coating:
  • 1 large handfull Black Peppercorns
  • 1 large handfull Whole Coriander Seeds

Total cost of ingredients about £11.00, largely thanks to the half-price beef joint.

Equipment Needed:

• Large, sharp knife.
• Large glass or plastic chopping board
• Grinder / blender / pestle and mortar
• Plastic containers to cure the meat in
• Paperclips (for hanging the strips)
• Kitchen towel.
• drying aparatus / very cool, ventilated oven. Approx 35° C

Preparation:

Blend the Salt, Sugar and Bicarbonate of Soda together.

Pre-grind / crush / mortar the peppercorns and coriander to a course consistency:

Crushed coriander seeds

Crushed black pepper

Cut the beef joint into 1 inch (2.5 cm) thick slices, along the length of the grain of the meat:

Then cut these slices, again along the lines of the grain of the meat, into approximately 1 inch (2.5 cm) cubic cross-section ‘long chunks’. Trim off any obvious fat or sinew:

The trimmed pieces of meat, ready for curing.

Place the strips of meat into a plastic container, and cover with the blended white-wine and cider vinegars leave for 30 minutes to steep. The vinegar helps to sterilise the meat, and tenderise it.

The strips of beef marinading in the vinegar mixture.

After soaking, take the strips of meat out of the vinegar keep the remaining vinegar back, as we’ll be using it again later.

From left to right, the Salt Curing mixture, the spice mixture, and the beef ready to be rolled.

Lightly roll in the peppercorn and coriander mixture. Shake off any excess, and keep the remaining spice mixture  for use later too.

Spread a thin layer of the cure (salt/sugar/bicarb mixture) in the bottom of a plastic dish, then lay the strips of meat on top, forming a single layer.

The first layer of spiced and salted strips

Cover the layer of meat with more of the cure, ensuring it covers the ends and sides of the meat, then place alternating layers of meat and cure, with a final covering of cure.

All the meat strips, tightly packed and covered with the curing mixture.

Cover the contaner with clingfilm, place it in a shallow tray, to catch any overflowing juices, and place a board or lid on top, and apply some gentle weight — 4 tin cans should be enough.

Leave to cure for 3 hours (do not leave longer than this or the meat will be too salty).

After this time, remove the meat from the cure, and scrape off most of the salt and spices sticking to the meat. Rinse the meat with the retained vinegar mixture, to remove all of the salt.

The discarded curing mixture, and cured strips of meat. Notice how dark the meat now is.

Place the meat between pieces of kitchen towel, or a clean tea towel, and dry it thoroughly.

Roll each strip of meat in the remaining spice mixture, pressing it into all the surfaces of the meat.

Take some paper clips, and give them a single ‘unbend’ to a tight S shape, as shown. You could also use wire or string to suspend the meat by. I used plastic coated paper clips to prevent any metal touching the meat.

Bent paperclips make the perfect meat hooks

Hook the larger end of the S-shape through the meat, at the thinner end (carefully avoiding poking a paper clip through your fingers), about 1.5 to 2 cm down the strip, to ensure a good hold.

Carefully hook the spiced meat strips onto the paperclips.

Hook all of the meat onto paper clips, then hang them carefully in your drying apparatus.  My electric fan oven runs happily at about 35°C in ‘defrost mode’, indicated by a * symbol. I used an electric thermometer to test the temperature. Any hotter than 40°C and the meat will cook rather than dry. There are instructions, elsewhere on the internet, for various drying mechanisms, involving fans and electric light bulbs.

The slices hooked onto a metal oven shelf.

I added a tray of dishwasher (or water softener) salt, previously baked for 20 minutes at 200°C, and cooled. This is placed at the top of the over, to help absorb any moisture.

The strips in the oven, ready to begin drying

Place a tray under the strips to catch any drops, or bits of spice that fall off, and start the drying process. Leave the oven door about 1 inch/2cm ajar, to let out any evaporated moisture. I’m running the oven at 35°C all night, and in the evenings, leaving it turned off when I’m at work. It should take about 3-4 days. I’ll post back with progress. It’s done when ‘not squidgy’ to the touch, and feels completely dry and hard.

I started the meat in the oven at 16:00 yesterday, and stopped at 07:00 this morning. The meat felt very dry on the outside, but was quite yielding when pressed. Still needs a fair bit of drying.

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

   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:
    

    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.

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

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.