In the Template Designer go to Background > click in the background image > Upload Image, and upload the background. Make sure you set the alignment to the top (does not matter which one) and to only scroll horizontally.

The result, is visible right now, I uploaded the background I made in the tutorial just for you guys! Aint I sweet.

You can use it elsewhere too, just make sure to only repeat in x though.

woensdag 9 maart 2011

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

maandag 7 maart 2011

We now have a nice stripy colorful background. We want to make it fade into black, and make it a little less jarring to the eyes, as to improve readability and usability, for as far that is applicable in such a random design ;)

In short, what we are going to do is fill a new layer, add a mask with a gradient and then spice it up with some web 2.0-style diagonal lines.

Lets get crackin!!

First, make a new layer. You can do this by going Layer -> New -> Layer, using the hotkey (Shift+Ctrl+n) or by using the icon on the lower right of your screen.

Now, if you have modified your Foreground and Background colors, reset them to black and white by by using the Default Foreground/Background Colors shortcut (D). After you do that use the Fill Foreground Color shortcut (Alt+Backspace) to fill the entire layer with the foreground color.

Your entire canvas is now black!!! No worries, that what we want. Now lets do something with it!

Under your Layers panel, there is a little icon, looks like this:

This is the New Layer Mask button. Click it now, with the black filled layer still selected.

Nothing apparent will have changed, except there is a weird rectangle next to the layer thumbnail in the Layers panel.

That is your mask. As the name implies this will mask parts of your layer. Where that picture will be black, it will make the layer 100% transparent, where it is white the layer will be opaque.

Now Foreground Fill the mask layer (Ctrl+Backspace) and there are your stripes again! Select the Gradient Tool (G) and drag it from the bottom of the image to the top.

Make sure you have set it from the Foreground Color to Transparent, instead of Foreground to Background. You can change that in the top left, as seen in the screenshot.

Blammo!! We have a gradient!! If you are not happy with it, feel free to add to it. You can drag the gradient bigger that the picture, smaller, make it transparent, etc. If you hit Switch Foreground/Background Colors (X) and you drag from top to bottom, you can remove some black where wanted.