Welcome to the first of my tutorials on how to create a full HTML tech site using Photoshop and
Dreamweaver. This tutorial is how to create the banner that will go on the top of your page. The page I
will make in a later tutorial will be 800x600, so the banner will be about 800x175 with all the other
settings left at default.

Ok, the first step is to choose what color scheme you want on your tech site, usually a blue/grey is good
for this. I chose color #65778B, feel free to use this or anything you want as the scheme.

Ok now that we have a color set for the background, look for a nice render to go behind it. It doesnt
matter what color the render is because we will set the blend mode to luminosity. I happen to like this
piece I made a while ago, so I am going to use that. Just copy and paste it, and if you need to resize
it, resize it to take up the whole stretch of your banner like so. (note, for my example I had to paste
it multiple times so that it did not overstretch, I advise using a different picture for your first time.

Now that that is done, it is time to do your text. Your text can be done thousands of ways, theres no
real way to say the correct way to do it. For me, I am going to use just a simple phrase and my name,
again though it can be done however you want. In doing so I found that my text looked bad with such a
contrasted background, so I lowered the opacity on the luminosity part of my background to 80 so it could
be seen better.

Now that we have the locations of our text, its time to give it a nice look. Again there is no one way to
do this, so experiment with it a lot. In this tutorial, I will be doing some nice newage underlines. To
to this, select a size 2 or 3 hard white brush under your brush palette, then go to your pen tool (set to
path mode) and draw a line underneath your text.
(Useful tip: Holding shift with the pen tool will give you a perfect 90 degree angle in the direction you
choose.)

Make a new layer. With this layer selected, right click your path and choose Stroke Path. Check the
simulate pressure button and then hit ok. It should look similar to this.

I repeated this process with Carrigan, only I overlined it instead of underlining it.

Almost done. Now alls we need is a nice source of lighting. You can use a white grid or a multitude of
things, but for this I am choosing the picture of a circuit board that I like. I got this picture off of
http://www.morphet.org.uk/images/ferro/ferro-log7service/circuit-150-16.gif . Once you get it, open it,
use the rectangular marquee tool to select a chuck of it you like, then copy and paste it to a new layer
on your banner. Right now it should look like its on top of everything and black lines with a white
background, which is the opposite of what we want. Invert the colors to it and set the blending mode to
lighten. Also fool around with the opacity, set it to your likings. Heres my result.

Now apply a layer mask to this and using a black brush, remove anything you dont like. In mine, I liked
the entire overlay so I didn't touch it. Now just do some tweaking to it, whatever your imagination
fancies. A good idea is some tech brushes. Stay original.

Carrigan

1