DIV Layout Tutorial Part One

You will need:

Photoshop (or something similiar)

An image or images of your choice

Patience

Note:

This tutorial is for use on Photoshop 7.0 and onwards. I am assuming that you will have a basic understanding of Photoshop functions. This tutorial is based on the layout Dissension.

Step 1 )

Open a new file on Photoshop - File  > New. I usually make my dimentions to be 900 pixels wide by 800 high so I can get a good full idea of what my main banner image will look like compared to the rest of my blog body. You will need the presets to be RGB Color and you must have a Transparant Background setting.

Step 2)

New Layer.

Import your image of choice. You can either open your image of choice in MS Paint and Select All > Copy and then paste your image as a new layer on your Photoshop canvas; or open your image up in Photoshop File > Open. This will give you a 'background image' layer which you will need to double click on to make it a normal layer. You are then able to drag that layer onto your blank canvas.

Step 3)

New Layer (under the image)

Decide upon a background color for your image. If your image has a lot of grey/green in it (like my example) then use your Eyedropper Tool on your tools palette to select a color from your image and then use the Paint Bucket Tool to fill the layer with color. Make sure this layer is situated behind your image layer; or your image won't show! You can easily drag layers around using the layers tab.

If you want, you can even adjust your image to match your background more precisely. In the thumbnail below, I right clicked on my image layer and chose Blending Options. This then allowed me to set my Blend Mode to Luminosity. Try playing around with different blend modes to get the effect you want.

TIP: You can even layer images by Right Click > Duplicate Layer and then choosing a different blend to go on top of your Luminosity blend. This is an awesome effect that I use a lot.

Step 4)

After you've chosen a few different blends, it's time to add your text! Be creative with text; it adds more to a layout then you might first think. Dafont.com have a lot of free texts for you to download and use. Experiment. You can also start experimenting with brushes; but be frugal at first - too many brushes spoil an image.

TIP: Be sure to use lots of different layers - this way if you mess up, you only have to redo one layer and not your entire work!

Step 5)

Start adding extra text and detail to your layout. I decided to use another copy of my image and up the color a bit more. I also chose to do my trademark 'boxing in' of the image.

TIP: Remember to find your own style. It's okay to get inspiration from other designers, but in time you'll find you get your own style and way of doing things. Spend lots of time getting things perfect.

Step 6)

Start planning where your blog and modules will be. You can do this earlier on in the design; but I prefer getting my banner image right first.

Step 7)

If you think your image is too plain, add some more! Here I used several layers and implemented the Blend feature - using a low Opacity Setting so that my images of Sephiroth and Cloud blend in with the main banner. You can use the Smudge Tool and the Blur Tool to smooth away any unsightly corners.

Add your copyright stamp to an innocuous part of the layout and tidy things up.

TIP: Your copyright stamp must be discreet. Noone wants to use a layout that has your name scrawled all over it.

You're done! Congratulations on designing your first DIV banner image! If you have any questions or problems, feel free to leave a comment and I'll get back to you as soon as possible.

If you found this tutorial useful to you, I would appreciate a link.

Now comes the hard part - coding your DIV Overlay.

\\  COMING SOON  //

S. Majere x