Layered Background header

Now to create the layered background header.

Initially I created all of the elements of header as separate layers:


The 2 images for bg_hills_back look identical, but one is the full height of the header image, and the other is only the height of the element.  I wanted to see if an increase in the empty transparent area created a bigger file, as it would make positioning much easier if all layers were identically sized.  I found that it did indeed slightly increase the file size (4.02kb to 4.76kb) so I decided to keep the size of the layers as the size of the image they each contain and positon them accordingly.

When I started to compose the montage in Dreamweaver I soon realise that my plan as it stood was flawed.  It was all very well creating individual layers, but I would never be able to place the sun behind a background-image.

My next plan is to create a single flat layer for the background, but position an additional hill over the area where the sun rises from.  My concern is that this may be tricky to position to accommodate all screen sizes.

First I brought the non-layered into the header of the site.  I noticed that the hills were still not lining up properly so went back to the illustrator image to correct.  At fist, I added grids to the background which I initially though was really useful for zooming in on and lining up left > right precisely, then I realised that by recording the y-axis point that the left hill transects the border, I can use the Direct Selection Tool on the anchor point on the right hand side hill > border transect, and punch in the measurement to the y-position box at the top – it should now be pixel-perfect!





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s