Tiger Skin Photoshop Tutorial

Related Articles

This tutorial demonstrates how to make a website with a realistic tiger skin texture.

Open up Photoshop, make a new image, and follow along with this tutorial.

Create some black diamond shapes

1 - Creating some Diamonds

New layer tool Make a new layer.

Select tool Select a rectangular area, as shown in diagram [a].

Fill tool Fill the area with black.

Press Ctrl+T to Transform the selection. Move the cursor near the bottom right of your rectangle, so it turns into a curved arrow. This arrow allows you to rotate the object. Rotate your rectangle slightly, as shown in diagram [b].

While holding Ctrl and Alt, drag the rightmost point upwards, until the shape resembles a diamond (no need to be exact), as in diagram [c]. (Holding Ctrl allows you to move one corner by itself, and Alt mirrors your actions, which moves the leftmost point downwards in this case.)

Press Enter to confirm the changes.

Replicate the diamond shapes

2 - Replicating the Diamonds

Move tool With the Move Tool selected, hold down Alt, and drag your diamond somewhere else. This makes a copy of the diamond. Make about five copies of the diamond this way.

Once you've made your copies, press Ctrl+T to transform the current diamond. Drag its corner a bit, to make it different in some way.

Move tool Hold Alt and use the Move Tool to make copies of your new diamond. Arrange all your diamonds in an irregular line, as shown. Vary the position of the diamonds a bit, but try to keep the bottoms of the diamonds all at around the same height.

Turning diamonds into tiger stripes

3 - Turning the Diamonds into Tiger Stripes

Merge all your diamonds onto one layer. Do this by clicking on a layer in the layers list and pressing Ctrl+E to merge it with the layer below it. (Don't merge anything into the Background layer.)

Press Ctrl+T to transform the diamonds. You may need to Zoom out (Ctrl -) at this point.

Elongate the selection, by dragging the bottom down and the top up. Drag the whole selection upwards, so you can only see the bottoms of the diamonds, as shown in the diagram. Grab the corner and rotate the stripes slightly.

If you're not happy with your stripes, click on the History tab, undo some steps, move your diamonds around, and try again.

Add a wave to the stripes

4 - Adding a Wave to the Stripes

Click Filter, Distort, Wave.

Number of Generators: 1
Wavelength: 120 (both sliders)
Amplitude: 15 (both sliders)

Click "Randomize" a couple of times, until you get some nice curves.

Click OK.

Color gradient

5 - Setting up a Colour Gradient

Gradient fill tool Select the Gradient Tool. In Photoshop 5.5, this is a tool on its own. In Photoshop 6.0 and 7.0, you'll need to hold down on the Paint Bucket Tool to see it.

Click on the visual representation of the Gradient at the top left of the screen. (If you're not using Photoshop 6.0 or 7.0, you'll need to click on the Options tab, and click "Edit" instead.)

Set up brown, orange, and white tabs as shown.

Create the tiger fur

6 - Creating the Tiger's Fur

Gradient fill tool Click on your Background layer, then click and hold down the Gradient Tool at the top of your image. Move the cursor downwards, and then release the mouse button.

To give the fur a realistic texture, click Filter > Noise > Add Noise. Put in 5% worth of Monochromatic, Gaussian noise.

Click Filter > Blur > Motion Blur. Set the Distance to 5, and choose a diagonal angle.

Brush tool To give the image a smooth transition from fur to blank white area, use the Brush Tool, with a soft brush about 45 pixels in size. Brush across the bottom of the image. Hold Shift while you do this, to keep the line straight.

Shadow text header

7 - A Shadowy Text Header

Text tool Use the Text Tool to Type in your heading in black. I've used Palatino Linotype font here. Make the first letter bigger, and increase the letter spacing by putting a space between each letter (you can increase the Tracking instead, if you have the option.)

Right-click on this new text layer, and Duplicate it. Change the font colour to white.

Move tool Choose the Move Tool, and press Up Arrow, Left Arrow. This moves the white text, so that only a small part of the black text is visible, which makes it look like a shadow.

You could use Blending Options to do this instead, but this method is easier, and can be done in any version of Photoshop.

Click File > Save For Web, and save your image as a Quality 60 Jpeg.

Rotate canvas to make a footer

8 - Recycling the Header to Make a Footer

Click the eyeball next to each of your text layers to hide them.

Click Image > Rotate Canvas > 180?

Move tool with the Move tool selected, move the black stripy layer down, so only the tips of the stripes are visible.

Click on the "fur" layer, and Press Ctrl+T. Drag the top of the selection down, to make it narrower.

Slection tool  Use the Selection Tool to select the area you want, and click Image > Crop. This trims off the unwanted white space at the top.

Click File > Save For Web, and save your image as a Quality 60 Jpeg.

Finished Photoshop image

Tigerskin Photoshop Training
We are experts in the field of graphic design training. We specialise in Adobe Photoshop, and run regular Photoshop tutorial classes.

Student Portfolios
Feel free to browse the web design and graphic design portfolios of our students.

Legal Disclaimer
We're not real tigers. We can't be held liable for any biting or clawing incidents that may occur.

Tiger skin footer

9 - The Finished Product - Example

In your web editor, insert the images. I'd recommend using the font colours and styles I've used in this diagram. I'd also recommend that you make up your own text. :)


Publication Date: Sunday 12th October, 2003
Author: Daniel Piechnick View profile

Related Articles