creating banner/header images?

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

Hi guys,

looking for some help on how to create a banner image for a website. Ideally it'll have words and pics in it so is it just a matter of doing it in MS Paint and sizing in properly?

A second question that's sort of tied into the first - when adding the banners to web page, are they always given fixed properties, ie; 300x50 pixels so they don't stretch depending on user's screen resolutions?

Thanks in advance,

Damo

 

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

I wouldn't do it in MS Paint, if you do it is going to be an incredibly dull image.

Website Header:

You could have a horizontal strip at the very top of your page, that will expand and contract with monitor and browser window size. It is just a repeat-x image.

Website Banner:

Could be your Text in PNG format with transparency, set to display at the very top of your page OVER the Website Header, the transparency means that whatever image you overlay has a background of the website header.

In reality, there are more and more ways to do it,

Use a Container for all your code that is set to 800px width, for example, then another DIV at the top of the Container DIV, that way your banner and any other content will never stray and the only thing that needs to be changed to align your entire webpage is the container DIV.

Think of it as Boxes inside Boxes

You have 1 big box with several smaller boxes, regardless of the size of the smaller boxes, the big box (The container) is always going to be in the same position in the room, the same width and the same depth etc.

If you wanted to move the contents of the Big Box (The container) somewhere, then instead of relocating all the smaller boxes, you edit 1 thing, and that is the big box, non of the contents can ever exceed the dimensions of the container. So in effect, you have your website banner with a margin: 0 Auto setting it will be centred at the top of your container.

It's a bit hard to explain.

PS*****

Use Photoshop or Fireworks for you're website graphics.

 

Wow, cheers for the really indepth answer - it's not as straight forward as i thought!!

Thanks again

 

You will find the hardest part of building a website is not making it look how you want, but is making it look right to everyone else, on every different monitor, in every browser, at every resolution, with every text size and with every zoom size.

It just gets tedious.
HTML

Code:

<div id="Container> 
<div id="header"> image/content here
</div>
REST OF SITE
</div>

CSS

Code:

#Container {
Width: 800px;
margin: 0 auto
}

#header {
width: ---px; (whatever the width of your banner is)
height:---px (same as above but width)
background-image: images\header.png; (or wherever your image is)
margin: 0 auto;
}

Add whatever else properties you feel etcetera, just have a good old play around, don't quote me on the above, like the dashes between properties with 2 words. lol but it's a base for you to work off.


CREATING A BANNER.

Download a trial of Photoshop and just have a play around with it, remember to compromise between Quality and Size. save as .png

If you have a couple of quid to spare go to http://themeforest.net/ and spend about a fiver downloading a complete web page, it's cheap but gives you an entire website upon which you can learn from, all valid and standardised, so you will be able to open it up in dreamweaver and just see what effects what, see what changes to AS they happen, revert back, and just learn a lot from a decent ready made design.

http://nettuts.com/

Has some nice, quality tutorials, will teach you alot of small handy stuff.

Let me know how you get on

 

Thanks Westernkings,

I was thinking there'll be a whole of CSS involved alright!

 

Believe me, get started on CSS now. It makes everything a whole lot easier afterwards.

 

A general design/css question for you - when you're starting a new site, do you design 1 page and use it as a template and create you style sheet or create all the pages, then the style sheet?

Thanks again

 

Create a single page then duplicate it,

You could create a page with 2 style sheets, one for the LAYOUT and one for the TYPE AND TEXT.

The type and text is onyl needed once as font styles remain consistant throughout, for create a new style sheet for each page if the layouts differ greatly.

If your happy with just having 1 page duplicated then you only need a single style sheet.

So either, one style sheet for entire website (each page is just a copy of the first page)

or a text style sheet that every page is linked too, and then each page has an individual style sheet that defines the layout (if each page has a vastly different layout.