Tutorials

Using a dotty brush, a rainbow gradient, and lots of distortion, this tutorial goes through the steps to creating a swirly, glittery website layout.

In the Channels window, click the Create New Channel button. If the Channels window isn't visible, click Window > Channel.

The area should now be black. This is your blank channel.

Use the Selection Tool, and select an area like the one shown in the diagram. Hold Shift when you make each selection. This adds the area to your selection, instead of making a new selection.

Fill the area with white.

If you plan on making a website from the results of this tutorial, you'll need to make sure the graphics end in a logical way at the edge of the image (i.e. they don't just stop suddenly.) One way to achieve this is to make this white area end before the edge of the window. Another method is to make the image 1600 pixels wide, so you can set it as the background of a 100%-wide table in your web editor.

Click Filter > Blur > Gaussian Blur, and enter a Radius of around 15 pixels. This turns your jagged square corners into a blurry mass.

To re-solidify this mass, press Ctrl+L to bring up the Levels window. In this window, there should be a graph with three sliding arrows underneath it. Drag the left and right arrows in, so that they're very close to the central arrow.

This technique is useful for creating all kinds of irregular-shaped elements.

In the Channels list, Ctrl+Click on the "Alpha 1" layer, to select its outline. This is the curvy layer you created in the last step.

Go back to the Layers window, and create a new layer.

Choose a light yellow colour, and fill the area.

Remember to keep the area selected. If you deselect the area at any time, you can Ctrl+Click its layer to select it again.

Choose the Brush Tool. At the top left of your screen, you should see the word "Brush". Click the drop-down arrow next to it, and scroll down about a tenth of the way. Try to find the dotty brush that has a size of 46. (In Photoshop 5.5, you'll need to click Window > Show Brushes.)

Change the brush's mode from Normal to "Color Burn", and start dabbing away with it on your image. The idea is to make dots. Press Undo (Ctrl+Z) if you accidentally make a big smear.

Press Ctrl+D to Deselect the area.

In the Layers window, create a new layer.

Choose the Gradient Tool. (Remember that it might be hidden under the Paint Bucket Tool.) A little coloured bar, representing the gradient, will appear at the top left of the screen. Click on it. (In Photoshop 5.5 or earlier, click Options Tab > Edit.)

Add black and white tabs across the bar at the bottom of the screen, such that the gradient alternates between black and white. There's definitely no need to be precise here, as this gradient is going to be mangled in the next step. :)

Press Ok, and apply this gradient from the top of the screen to the bottom.

The main purpose for creating the gradient in the previous step, is that it's a good source of dark and light areas. As big bands of black and white, the gradient isn't appropriate here, but after a bit of mangling, it can start to look very nice.

Click Filter > Distort > Wave. Play around with the sliders until you get a reasonable wave. (Not a tidal wave or a ripple.)

Press Ok. Your gradient should be wavy. Repeat this process several times, by pressing Ctrl+F. If you're not happy with how it turns out, Undo all your waves, and click Filter > Distort > Wave again, to get a new wave.

Change the Gradient from Normal to Overlay.

In the Layers window, create a new layer.

Select the Gradient Tool, and edit the gradient as before, but instead of putting in black and white tabs, just choose the rainbow-coloured gradient. Press Ok and apply it diagonally across the image. Change this layer's Mode from Normal to Difference.

You may notice that both your gradients extend over the edge of your curved menu area. To cut them back, Ctrl+Click on your yellow base layer in the Layers list. This will select its outline.

Click Select > Inverse. This selects the opposite of the selection you just had.

In the Layers list, click on the rainbow layer, and press Delete. Then click on the swirly layer and press Delete again.

To add some Effects, right-click the base (yellow) layer, and click "Blending Options".

Add a Bevel and a Drop Shadow.

At the end of most Photoshop projects, I usually play around with the Hue/Saturation slider (Ctrl+U) to see if I can improve the colours. In this case, I reduced the Saturation as low as it can go. The colours look much softer now.

I've used Palatino Linotype for the font here, and given it a Bevel and Stroke (Outer Glow for your 5.5ers out there.)

The white bars under the text are set at 65% Opacity. I've cut off their ends, so that they're flush with the curved edge. To do this, Ctrl+Click on the base (yellow) layer and then Invert the selection (Select > Invert). Then press Delete.