Making of the Background, Part III

Part 3!!


PART   I - In the beginning.
PART  II - Masks!
PART III - Stripe on strip action.
PART IV - Putting it to work.


I'm going to be honest here, you did not really need the mask in part 2. But I did it anyway, it was good practice for whats to come!!

We have a nice fade to black, but lets add some spiffy web 2.0 stripey things on top of the stripes!!!

Make a new canvas by going File > New (Ctrl+N). Make it 8 by 8 pixels.

We made a new small canvas. Why, you ask? We are going to deffine a pattern so we can fill an entire space with just once click instead of having to draw a whole crapload if lines!

You can zoom in with the Zoon Tool (Z) or you can use the scroll wheel when holding Alt.

Press and hold the Brush Tool (Ctrl+B) and select the Pencil tool. Now draw a diagonal line over the canvas. When happy, go to Edit > Define Pattern, give it a name and hit OK.

  

We have now made a pattern that will show diagonal lines when repeated. You can add a shadow or other fancy stuff, but be sure to remember that you need to draw the line in the blank corners too when making a line more than 1 pixel thick!

Go to your background file. Layer > New > Layer (Shift+Ctrl+N) and use the Paintbucket Tool (G) to fill the layer with the pattern you just made. Also set the overloay mode to Multiply.

  

If you cant find the Paintbucket Tool, click and hold the Gradient Tool to see it.

Now, repeat the layer process you did in Part 2. Click the Add Layer Mask button, fill it with either black or white using the Foreground and Background Fill Tools and make it fade to transparent with the Gradient Tool.

  

It's done!! You can spice it up if you want, but I'm going to leave it here. I wanted something simple yet different and not too hard on the eyes.

Lets save it propery!! We only need one slice of this image.

Go to  Image > Canvas Size. Make the image 8 pixels wide, the same width as our pattern. Now save it as an PNG in order to prevent JPEG compression artifacts that would fudge up the effect.

 You are basicly done now. However, join me in the fourth and last part of this tutorial where we will look at some places to use this image!!

Take care.