free hosting   image hosting   hosting reseller   online album   e-shop   famous people 
Free Website Templates
Free Installer







Stylish Web Title - Shadow

With this tutorial we will create a title for your web pages with little more than a few techniques in creating lightning, and blending and editing layers properly. You should learn plenty of things from doing this and it might get quite difficult on some parts of it if you are a beginner, but it does show you some vital techniques in creating good designs.

Create a new document (Ctrl + N) of 600 pixels x 150 pixels. Set the Mode to RGB and the contents to transparent. This of course can be changed according to the size of your title. Press "D" to default the colours to black and white, then using the fill tool "G" (unless the gradient tool is selected, then hold down the gradient button and select the fill tool), fill in the layer. Create clouds by going on Filter->Render->Clouds, then Filter->Pixelate->Crystallize. Set the cell size to 24 and you should have an effect that looks like a contour:

Next to find the edges of these, go to Filter->Stylize->Glowing Edges.
Edge Width: 2
Edge Brightness: 12
Smoothness: 1
To make this a bit more exciting go to Filter->Distort->Polar Coordinates: Polar to Rectangular. Go to the move tool "V" and make sure the is checked and drag the top dot upwards - about the same height as the image itself if you’re using my size image. This just gets rid of the excess black at the top of the curve. Now you should be here:

Then duplicate this layer (right click on the layer then "duplicate layer" - call it whatever you want as long as you remember it). Then go on Edit->Transform->Rotate 90degrees CW. This will give you another layer but half the width.

These next few steps will try and make the top layer stretch across the whole width. If you are using an image size that is the same width as is height, then you can skip these, but otherwise follow them carefully.
1) Using the move tool again "V", press Shift at the same time as dragging the whole image to the right. It should automatically jump there once you’re near enough. But do not resize the image, move it.
2) Then again duplicate this layer (right click on the layer -> "duplicate layer"). Then drag this one over to the other side and flip it with Edit->Transform-> Flip Horizontally
3)Then you might want to hide the original layer with the eye in the layers palette - . Then because of the difference in height and width, there should be a small gap in between the two top layers so using the move tool "V", resize them until they fit.
4)Select the top layer and press Ctrl + E to merge them together.

Then with the top layer selected, change the blending mode to screen and you should be here:

Merge these two layers (Ctrl + E) and then we’re going to add some randomness to it!
Go on Filter->Distort->Wave and put in these settings

Then press "Randomize" a few times. Put some more life into it with Edit->Distort->Twirl. Put a setting between 20 and 30 (or -20 and -30). I had 23.
Add some filling with Filter->Stylize->Wind.
Method: Wind
Direction: Right.
Then do it the other way - direction: Left. (if you do that again, it spreads it out a bit more).
Add some colour by pressing Ctrl + U. Check the "colourize" box in the bottom right hand corner.
Hue: 200 (Between 180 and 200)
Saturation: 100
Lightness: 10 (gives it more filling)
Now you should be roughly where I am (don’t worry if you’re not exactly right, the wave and twirl technique will have been quite random):

The next effect that I will show you is a lightning bolt effect that we can put through the title. Create a new layer using the "layer" button on the bottom right hand corner of the layers palette and select the gradient tool (hold the fill button down in the tools menu). Make sure the first gradient is selected - should be black to white - and drag from the top to the bottom pressing the shift key.

Now there should be a nice gradient of black on the top to white on the bottom. Do Filter-> Render->Difference Clouds. Invert the image (Ctrl + I), and you should be able to see the lightning appear. If the bolt is not in the centre, go back by pressing Ctrl + Alt + Z to where you did the gradient and do it again (try to get more of the black on top). To make the bolt stand out more, go on Image->Adjust->Levels, then drag the middle grey arrow to the end (or near to the end depending what you like). Set this blending mode to Screen and change its colour by pressing Ctrl + U again. Try and get a lighter blue this time.
Hue: 190
Saturation: 50
Lightness: 0
You should now be here:

We will now create the text. Select the bottom layer - it should be the background blue layer. Then click on the Type Tool "T" and drag a box that fills the whole width. Type in your text and make it about 36pt, depending on your text, I used Copperplate Gothic as my font. While doing this you might want to hide the lightning so you can see what you’re doing. For this demonstration I’m going to type Shadow. If you have to make your text size smaller, you will probably also have to shrink your lightning a bit with the Move Tool "V" (I have done so).

Then double click the text layer and the effect options should come up.
Give it a Gradient Overlay with the colours going from #0000FF up to #00FFFF. If you want you can do a colour overlay instead with a solid colour.
Give it a Stroke of 2 pixels, colour #000099
Give it an Inner Glow of #6666FF, Choke: 18 and Size: 8
Then change the opacity of the layer (in the top-right of the layers palette) to about 75%. Duplicate the Top Layer which should be the lightning and drag it down between the text and the background. Delete some of the extra lightning bits where the extra layer has brought them out too much.
You should now be here:

To create some "generators" for the lightning, select the square tool in the tool box and draw a thin black rectangle down the lef-hand-side of the image. This should be a thin black strip on the side. Click the tick and draw another rectangle in the centre of that so it is potruding outwards (make sure its on a seperate layer. Make sure it is not too big. If using my image size, do it about 1/5 of the strip. Then using the Move Tool "V", pressing Ctrl + Shift, drag the "handle" downwards so it points inwards like this:

Then double-click on the layer to bring up the effect options and put a colour overlay of #CCCCCC and a bevel and emboss like this:
Style: Inner Bevel
Technique: Smooth
Depth: 100
Size: 5
Soften: 1
Angle: -45
Then duplicate this layer and pressing shift (must hold shift otherwise your picture will look wonky if it is not straight) and drag it to the other side. Then Edit->Transform->Flip Horizontally. Move it into place and you have your sides!

These look a bit dull and not too realistic, so to make it a bit better, create a new layer on top of them all (above the sides!) and fill it with black. Then create a lens flare Filter->Render->Lens Flare of about 45 above where the side meets the electricity. You can do it for either side. Then either do it again on that layer, by Filter->Render->Lens Flare on the same layer, or by duplicating the layer and flipping it. Then change the Blending mode to screen. This can be finished here like this:

But if you wish, you can select the text by Ctrl + then make sure the top lightning layer is selected and press delete. This will make sure the text is totally uncovered but there will be nice glows around the text where the lightning passed through it.
You are now finished. I hope you learned from this tutorial. If you have any comments or questions, please register and ask them below.