Tim Bennett's Blog

Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.

This tutorial will show you how to create a stripy abstract wallpaper from scratch in just a few steps. It will look like this:

The wallpaper in this tutorial will be 800 x 600 but it will work in any size. Simply change the canvas size in step 1.

1. Create a new canvas 800 pixels in height and 600 pixels in width.

2. Now you set the 2 base colours for the wallpaper. The example uses #1B5484 and #FFFFFF – any two differing colours will work however. Set your foreground colour to #1B5484 and your background colour to #FFFFFF. Choose Filter > Render > Clouds. Your canvas will look like this:

3. Next choose Image > Adjustments > Brightness/Contrast… and set the Contrast to +50. It will create this:

4. Now choose Filter > Distort > Ocean Ripple; set the Ripple Size to 11 and the Ripple Magnitude to 15. It will look like this:

5. Now to create the stripy effect – choose Filter > Blur > Motion Blur. Set the angle to 90° and the distance to 225.

6. Finally, choose Filter > Sharpen > Sharpen. Hold down Ctrl and press F to repeat the filter. This brings some subtle clarity to the wallpaper.

Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.

You are going to make a tinted glass thumbnail like this:

1. Create a new canvas 100 pixels wide and 100 pixels in height with a background colour of #818181.

2. You need an image for the thumbnail. You can use any image you like – you may use the one this example uses. Whatever image you decide you use you need to get it into Photoshop. Save the file you need to use to your local hard drive and then choose File > Open. Find the image and you want to use and click Open.

3. Now you need to shrink your thumbnail image down to the size of a thumbnail. Choose Image > Image Size and enter a smaller size. If you are using the image from the example enter 100 pixels for the width and 75 pixels for the height.

4. Put both your open canvas side by side like the image below and drag the thumbnail into the blank canvas.

5. Close down the canvas you dragged from. In the remaining canvas position the thumbnail thus:

6. Choose the Rectangular Marquee Tool, hold down Shift and drag a square over the thumbnail layer like this:

7. Choose Select > Modify > Smooth and enter 5 pixels. Then choose Select > Inverse and press Delete. You will be left with your thumbnail:

8. Now we will add some layer styles. First of all add these Stroke settings:

9. Your thumbnail will now have an outline like this:

10. Add these Bevel and Emboss settings:

11. Your thumbnail should now have a darkened bottom edge to it:

12. Now add these Inner Glow settings:

13. The white colour dodge glow bleaches the colour of the image. Once the rest of the changes have been applied this will help give the image the effect of glass.

14. Now add these Outer Glow settings.

15. Your canvas will look like this:

16. Now to give the image more depth add a Drop Shadow layer style like this . . .

17. . . . to give this effect:

18. Now to add the tint: choose Image > Adjustments > Brightness/Contrast and set the Brightness to -25:

19. Now to add the reflection: create a new layer above the thumbnail layer. Hold down Ctrl and click the thumbnail layer; this will select the layer’s transparency. Now choose Select > Modify > Contract and enter 2. Set the foreground colour to #FFFFFF; choose Edit > Fill – ensure the Use is set to Foreground Colour and the Blending Mode is set to Normal. Set the opacity to 20% and click Ok. It will now look like this:

20. Now select the Rectangular Marquee Tool and press the up arrow until the selection is around halfway up the thumbnail:

21. Choose Select > Invert. Press Delete and you will be finished!

Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.

In this tutorial you will create selected and deselected voting stars so you can create a rating interface like this:

1. Create a new canvas 75 pixels wide and 75 pixels in height with a background colour of #222222.

2. Choose #F9F109 as your foreground colour and select the Polygon Tool; set sides to 3.

3. Hold down Shift and drag the cursor upwards to draw a triangle like this:

4. Right-click the layer and choose Rasterize Layer.

5. Right-click the layer and choose Duplicate Layer; choose Edit > Free Transform and enter 72° in the Set Rotation field (the star will have five points so each point needs to be rotated by 72°, i.e. 360° / 5). Position the new layer thus:

6. Do the same with the new layer: right-click the new layer and choose Duplicate Layer; choose Edit > Free Transform and enter 72° in the Set Rotation field. Position the new layer thus:

7. Select the top layer and press Ctrl + E twice – this puts all three layers into one.

8. Select the Rectangular Marquee and drag over the left-hand side of the canvas like this:

9. Press Delete to remove the selection:

10.Right-click the layer and choose Duplicate layer; choose Edit > Transform > Flip Horizontal. Keep pressing the left arrow key to nudge the new layer to this position:

11. Press Ctrl + E to merge both layers into one; choose the Paint Bucket Tool, set Tolerance to 0 and ensure Anti-Aliased and Contiguous are checked. If your foreground colour is not #F9F109 set it to #F9F109. Click in the center of the star so that it looks like this:

12. The shape of the star is there but it needs tidying up. Holding down Ctrl, click on the layer to select its transparency; choose the Paint Brush Tool and set the brush size to 30px, the Hardness to 100%, the Mode to Normal and the Opacity to 100%. Paint repeatedly over the star until the colour is consistant all over:

Note: If at this point your star in not properly centred, align your star using the arrow keys – in the example the star was nudged up by 2 pixels.

13. Add these Inner Glow settings:

14. Your canvas will look like this:

15. Add these Outer Glow settings:

16. Your canvas will look like this:

17. Add these Stroke settings:

18. Your canvas will look like this:

19. Create a new layer above the star layer. Hold down Ctrl and click once on the star layer; choose Select > Contract and enter 3px. Set your foreground colour to #FFFFFF and use the Paint Bucket Tool to fill the new layer:

20. Set the opacity of the new layer to 60%:

21. This is a selected star – to create a deselected star simply select the star layer and choose Image > Adjustments > Hue/Saturation and set the Saturation to -40:

22. You can use these two type of stars to create a rating interface, for example this is three stars out of five:

Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.

You are going to make some glossy metal text like this:

1. Create a new canvas 85 pixels wide and 45 pixels high with background colour #CCCCCC.

2. Change the foreground colour to #DCDCDC and choose the font for your text. I’ve chosen BankGothic Md BT but most fonts will work (the bolder the better – try to avoid light fonts). Set the font size to 36pt and the anti-aliasing to Strong. Type DQ onto the canvas.

3. Add an Outer Glow layer style like this:

4. Your canvas should look like this:

5. Add an Inner Glow layer style like this:

6. Your canvas should look like this:

7. Add a Gradient Overlay layer like this:

8. Your canvas will look like this:

9. Add a Stroke layer like this:

10.Your canvas should look like this:

11. Right-Click the DQ layer and choose Duplicate Layer… Name the layer to Outline and click OK. In the layer panel drag the Outline layer so it is underneath the DQ layer but above the Background layer. Right-click the Outline layer and choose Clear Layer Styles. Set the Fill of this layer to 0%.

12. Add an Outer Glow layer style to the outline layer like this:

13. Your canvas should look like this:

14. Add a Stroke layer style to the outline layer like this:

15. Your canvas should look like this:

16. Create a new layer above the DQ layer and name it Highlight. With the Highlight layer selected hold down Ctrl and left-click the DQ layer to select the layer’s transparency. The canvas will look like this:

17. Set the foreground colour to #FFFFFF and select the Fill tool. Fill the selected area of the Outline layer and set the layer opacity to 50% so it looks like this:

18. Select the Rectangular Marquee Tool and select the bottom half of the Highlight layer like this:

19. Press Delete. It is now finished and should look like this: