Preparing Banners for this website:
These instructions are designed to make it easier for you to produce Banner Images for this website in particular. You cannot take these instructions and apply them to any other website because it just will not work. This website enjoys a responsive design. This means it can be viewed on many different devices (Phone, tablet, Computer) with different screen sizes, and the page will do its best to adapt to the new environment. One of the effects that this has; is to crop a part of the Banner off the top and bottom at different resolutions; so if your banner image has important elements at the top or bottom of the image they may well get lost in some instances.
One way to remedy this is to apply a padding to the top and bottom of the image that will 'get lost' in the greater scheme of things. The background colour of the pages on this site is black, so a bottom margin that is black will help in most cases. The header colour has a color code of #c4dbeb. This colour code can be used in the colour picker of Photoshop to ensure you get an exact match.
The following samples (on a white background so you can see the black padding) show a couple of examples used on this site. The important bit is that the total image size is 2500px x 800px.
On these images I have given the picture 600px hight and the top and bottom padding 100px each. In total then the height is 100 + 600 + 100 pixels and the width is 2500 pixels.
This gives the whole banner the opportunuty to expand and contract slightly allowing the main image to remain intact. This does not work in all instances though. If you look at the website, full screen on a high resolution 27 inch monitor you will get some cropping. But it is a small price to pay in order to have a responsive design.
Enjoy making the Banner Images and remember, there will be many members who will be able to help you if you are not able to do this yourself. I hope to be inundated with Banners so that we can rotate them on a regular basis.
Open the template and the file you want to add.
Select the picture you want to add and using the move tool drop it onto the open template file
The picture will appear on a layer, move it to be the middle layer (pick up the layer icon and move it between the other 2 layers)
Adjust the size of your picture using edit-transform-scale. (use the shift key to keep picture proportions correct.
If there is spare space at the sides of your picture adjust the bottom layer to an appropriate colour. (use paint bucket)
Merge the layers using Layer-flatten image
Save and send to Trevor