February 5th, 2008 by Nick
1. Make a 560×560 Photoshop document and then make a rounded rectangle with a radius of 15 pixels

2. Make a smaller brown rectangle for the content area

3. And a thing light brown one for the menu bar

4. A light grey rectangle for the header

5. Choose the custom shape, with the arrow pointing to it

6. Create a red version of the shape behing the brown rectangle, and you’ve finished!
Posted in web-layouts | 1 Comment »
November 17th, 2007 by Nick
1. With this photoshop tutorial, you will learn how to draw an evil looking smiley. The 1st thing to do is to create a 100 by 100 pixel sized document in Photoshop, with black background. Create a yellow circle (#FFDD2D) on a new layer, with the elliptical marquee tool. While the selection is still active, fill it with a yellow/brown (#97831E) Feather the selection by 7 pixels, by going to select / feather, and then contract it, by going to select/modify/contract.

2. Set the foreground colour to a light yellow (# E8D676), create a new layer and then choose the gradient tool. Go to the gradient editor and set the gradient to ‘foreground to transparent’. Create an oval selection and then drag from the top of it to the bottom, to create a gradient like in the 4th image below.

3. Create a black oval on a new layer, and then use the elliptical marquee tool to to cut out part of it, to create the smile.

4. Zoom in to 300% magnification aand create a white oval. Again, use the elliptical marquee tool to cut part of it out, like in the 2nd image below. Duplicate the layer and then rotate it by 180 degrees, by going to edit / transform / rotate 180 degrees. Duplicate the white teeth several more times, placing them like in the 4th image below.

5. To create the eye, make a black circle on a new layer and then zoom back to 300%. Use the polygonal lasso tool to cut diagonally across the the black circle, deleting the selected area. Then make a sleection of the black semi-circle, contract it by 2 pixels and fill it with white. Create smaller black cricle for the pupil, duplicate the eye layer and flip it horizontally, by going to edit / transform / flip horizontal. Use the polygonal lasso tool to create an eye brown, and also make a duplicate of it for the right hand side.

6. Hopefully you will now have something like in the image below, and that’s the end of this tutorial to create an evil smiley in photoshop.
Posted in drawing | No Comments »
March 7th, 2007 by Nick
1. With this photoshop tutorial, you will learn how to create a button with a herringbone texture. The 1st thing to do is to zoom in to 200% magnification and make a selection, using the rectangular marquee tool. Create a new layer and c hoose the gradient tool. Set it to reflected gradient, set the foreground colour to a light grey (#CBCACA) and the background colour to a darker tone (#686868).

2. Create another new layer and a thinner rectangular selection. Now set the foreground colour to an even white (#) and the background to light grey (#AEAEAE).

3. Put the light gradient layer below the 1st gradient, in the layers panel. Set the gradient tool to linear gradient and create a new layer. Create a thin rectangular selection at the bottom edge of the darker gradient. Set the foreground colour to grey (#A0A0A0) and the background colour to a lighter tone (#F4F4F4). Change the gradient ool back to reflected gradient and create another new layer. Set the foreground colour to light grey (E7E7E8) and the background colour to a darker tone (AEAEAE) and then create teh gradient, like in the 2nd image below.

4. Now we’re going to create the herringbone pattern, so go to layer > layer style > pattern overlay, and choose herringbone for the pattern.

5. Create a rounded rectangle with a radius of 10 pixels. Make a selection using it and use it to delete part of the herringbone layer.

6. Apply a drop shadow, by going to Layer > Layer Style > Drop Shadow, to the layer, using the settings shown in the first image below.

7. Create some text using the settings shown in the first image.

8.And lastly add a slight drop shadow to the text.

That’s the end of the Photoshop tutorial to create a herringbone button!
Posted in buttons | 1 Comment »
January 1st, 2007 by Nick
1. With this photoshop tutorial, you will learn how to create marble style text. The 1st thing to do is to fill the background with a light cream colour (#EBE4D6). Make some large, light grey (#EDEDED) thick text. I’ve used a font called Faktos to give it a bit of style.

2. Apply the drop shadow style(layer / layer style /drop shadow) to the text, using the settings shown in the first image below.

3. Apply the bevel and emboss style (layer / layer style /bevel and emboss) to the text, using the settings shown in the first image below.

4. Lastly, apply the pattern overlay style (layer / layer style /bevel and emboss) to the text, using the wrinkles pattern and the other settings shown in the first image below. That’s all there is to creating a marble text effect in Photoshop!
Posted in text-effects | No Comments »
December 17th, 2006 by Nick
1. With this photoshop tutorial, you will learn how to create some abstract text. The 1st thing to do is to make some large, thick text, using something like Arial Black / 150pt, and with a pale pink colour (#BEA2A0). Next apply the extrude filter (filter / stylize / extrude) using the settings in the first image.

2. Adjust the levels (Image / Adjustments / Levels) bringing the pointer on the left inwards, making the text a bit darker.

3. Use the emboss filter (filter / stylize / emboss), setting the angle to 45 degrees, height to 36 and the amount to 500%. You should end up with something like in the 1st image below. Next go to Image, Adjustments, Hue / saturation, setting the saturation to -180, hue to 70 and the lightness to 30.

4. Duplicate the layer and then apply Gaussian blur ( Filter / blur / gaussian blur) on it, with a radius of 4. Change the blending mode of the layer to screen.

5. Make a selection of the text, expand it by 2 pixels (select / modify / expand) and fill a new layer below the othes with #535C5C. Make a selection of the text again.

6. Create a new layer at the top and then fill it with #3A4141. Feather (select / feather) the selection by 6, contract (select / modify / contract) it by 7 and then delete the select part of the dark grey layer.

That’s the end of the Photoshop tutorial to create abstract text!
Posted in text-effects | No Comments »
December 7th, 2006 by Nick
1. With this photoshop tutorial, you will learn how to create a water bubble themed text effect. First of all create a Photoshop document. Make the background black and create a new layer apply the clouds filter using light (#C5F7FF) and dark blue (#003B46), by going to filter / render / clouds. Then apply the ocean ripple filter, by going to filter / distort ocean ripple, using the settings shown in the 3rd image below.

2. Next create some temporary thick text, using something like Arial Black, 200 pt. Use it to make a selection and then use layer via cut on the ocean ripple layer. Delete the delete the ocean ripple part of the layer surrounding the text cut out. Also delete the white text, leaving you with the 2nd image below.

3. Next adjust the levels to the settings shown in the 2nd image below, by going to image / adjustments / levels

4. Create a new layer below the ripple text shape and then make a selection of it. Expand the selection by 5 pixels, by going to select / modify / expand , and then fill the layer with dark blue (#1E4250). Make a new layer above the ripple layer, expand a selection of the ripple layer by 1pixel, and then fill it with a dark blue (#08323C). Feather the selection (selec / feather) and contract it by 7 and then delete the dark blue part that’s selection.

5. Now we’re going to create a large bubble inside of the text. Zoom in to 400%, create a new layer and a selection with the elliptical marquee tool. Set the foreground colour to #00ACBE and the background colour to #0094B2 and then create a radial gradient. Create antoehr new layer and then make a light blue (#DFFBFF) circle to the right. Use the same selection to delete part of it.

6. Then use the eraser tool to shape it like in the 1st two images below. Make another new layer and then create a circular selection.

7. Set the foreground colour to a bright aqua colour such as #04F6F9, and then set the gradient to “foreground to transparent”. Create a linear gradient by dragging from top to bottom in the selection. Merge the layers of the bubble and then move the layer below the feathered outline above the ripple layer. Duplicate the the bubble a couple of times and scale one of them to 50%, by going to edit / transform /scale.

8. Make several more duplicates and then copy the large one again. Scale it to 30% and then duplicate this one also. That’s the end of this tutorial to create bubble themed text in Photoshop!
Posted in text-effects | 2 Comments »
November 5th, 2006 by Nick
1. With this photoshop tutorial, you will learn how to draw a cute teddy bear. The 1st thing to do is to create a 250 by 250 pixel sized document in Photoshop, with white background. Create a brown circle, using the elliptical marquee tool and on a new layer, and then fill the selection with a darker brown on another new layer.. Feather the selection by 10 pixels, by going to select/feather. Contract the selection by 10 pixels, by going to selection/modify/contract. Now delete the area, of the darker brown layer, that’s selected. You should end up with a puffy dark brown border. Make another new layer and then create a white circle on it for the left eye. Zoom in to 300% and set the foreground colour to light grey and the background to black. Create an oval selection and then make a radial gradient, completing the left eye. Zoom back out and then duplicate the layer, moving it over to the right.

2. Set the foreground colour to a light brown and the background colour to a darker tone and then create a large radial gradient for the snout. Zoom in to 300% again and set the foreground colour to a dark grey and and the background to black. Create a radial gradient for the nose. Make a black circle to the left of the nose, nudge the selection to the left and up by 2 pixels and then and then delete the selected area.

3. Eraser any parts of the curved line that’s overlapping the nose or outside of the snout area. Duplicate the curved line and flip it horizontally, by going to edit/flip/horizontal, and then move it to the right hand side. Create the left sided ear by creating a subtle radial gradient and then a smaller one using peach colours. Move the ear slightly under the head, duplicate it and move it over to the right hand side.

4. Next create a large, subtle radial gradient on a new layer, for the body. For the left paw, create a dark brown oval, and then a rectangle about half way down the oval. Use the same peach colours to create the palm and then use the transform tool to rotate layer.

5. Duplicate the left paw move it to the bottom and then use the elliptical marquee tool to create a curved ending

6. Finally, duplicate each paw again, flip them horizontally and move them over to the right. And now hopefully you will have drawn a cute teddy bear with this Photoshop tutorial!
Posted in drawing | No Comments »
October 5th, 2006 by Nick
1. With this photoshop tutorial, you will learn how to create a clean looking web layout. The 1st thing to do is to create a 600×600 sized document in Photoshop, with white background. Make a selection on left hand side like the one in the image below.
2. Choose the gradient tool and open up the gradient editor at the top left of photoshop. Make the the middle pointer white and the left and right pointers a very pale grey, such as F8F8F8.

3. Drag from left to right to create the gradient on a new layer. Duplicate it and move it over to the right side. In teh gradient editor change the preset back to “foreground to background”. Set white for the foreground and a darker grey for the background, such as E4E4E4. Make a new layer and then create a reflected gradient in a rectangular selection, by dragging from the center of the selection to the bottom of it. You can see the progress in the second image below.

4. Create a new layer and set the gradient tool to linear gradient. Set the foreground to a darker grey, such as DDDCDC, and the background to white. Create a selection, like in the first image below, and then drag from from bottom to top of the selection. Next duplicate it the layer, flip it vertically by going to edit / transforms /flip vertical, and then move it below like in the 2nd image below.

5. Now we’re going to create the content area. Make a new layer and then create a large linear gradient, using white for the foreground and a darker grey for the back such as ECECEB. Drag down to create the gradient. Next create a white rounded rectangle, with 10 pixel radius corners.

6. Create some smaller rounded rectangles at the top, of the larger rounded rectangle, for the tabs.

7. Choose the custom shape tool and select “flower 3?, by opening the drop down menu at the top of Photoshop. Create a white version of the shape to the right of the tabs

8. Create a lerge versions just above and overlapping it, and then a light grey one at the bottom left of the layout.

9. And now hopefully you will have created a clean layout with this Photoshop tutorial!
Posted in web-layouts | No Comments »
September 29th, 2006 by Nick
1. With this photoshop tutorial, you will learn how to create a summer themed web layout. The 1st thing to do is to create a 700×450 sized document in Photoshop, with a light, mint green coloured background. Use the rectangular marquee tool to create a blue rectangle at the top for the header and set the background colour to white. Use difference clouds, by going to filter – render – difference clouds.

2. Choose the grass brush and set the foreground to a dark green, such as 158223, and the background to a light green, such as ADE48C.

3. Sweep the brush left and right to produced a concentrated grass affect. Then make a selection, that covers the content area, to delete the overlapping grass.

4. Duplicate the grass layer and change it’s layer blending mode to multiply.

5. Change the hue of the duplucate layer to -24, by going to image – adjustments – hue saturation. Apply a gaussian blue of 1.2, by going to filter – blur – gaussian blur.

6. Now create a yellow circle on a new layer. Expand the selection by 5, feather it by 9 and then fill a new layer below the solid circle.

7. Using the custom shape tool, create a yellow butterfly. Rasterize the shape, make a selection out of it and then create a linear gradient across the shape, using a light and dark yellow.

8. Duplicate the butterfly a few times, changing the hue and resizing some with the transform tool (edit – transform – scale).

9. Create a long rectangle just above the content area using a dark, grey/green, and reduce it’s opacity to 50%.

10. Create a darker toned rectangle over the content area. Make a rounded rectangle over it and then make a selection using it. Make the rounded rectangle invisible and use the selection to delete the area of the darker toned layer.

11. That brings us to the end of this Photoshop Tutorial! 
Posted in web-layouts | No Comments »
September 24th, 2006 by Nick
Posted in drawing | 3 Comments »