What size to make my logo?

[dman76]

I am in the process of setting up a store, and before I pay someone to make a nice custom template for me, I want to see how it does. So I found a free template that looks ok, but I want a logo, and found a couple people that will design logos for a reasonable price. What I am wondering is, when I see a store and there is a logo at the top of the store that covers the entire width, is that a logo or a header? The logo designers said they would make it any size I want, so should they be made 800 pixels wide? If so, then when the screen resolution is higher, would that be shrunk? How can you do it so it goes across the whole width of the screen no matter what the resoultion is set at?

[gjh42]

A "logo" design, as such, will be whatever width you make it. (And a logo for an 800px screen should be smaller - say 760px or so - because of the trim on the sides of the window.)

You can design a logo so it will sit in one position in the header, and have a blending background color around or to the side that expands to fill whatever size window you have (no extra logo work required beyond making one or more edges smooth and "blendable").

You can also design a logo that will have left and right side parts anchored to the edges of the window, and possibly a central part floating in the middle, that will appear to expand and contract with the window - these actually work like sliding doors. Google "sliding door method" for a full explanation.

The more versatile the logo is, the more it will likely cost to have made.
Also, the smaller the logo or other image is (in file size), the faster it will load.

[dman76]

Thank you Glenn. So for an example, can you tell me how you have the logo on your site? Is just the part that says Future Relics timless creations in precious metals the logo? And is it a rectangular shape with no border and just that same color background as the rest of layout to blend in? What are the dimensions? I see some that are distinct logos with borders around them, and some that just blend in. So are you saying to blend it in, there are actually two things: the logo, and then an assigned background color just to the header area? Is that something that would need to be changed in the stylesheet? (I don't know anything about CSS except changing simple things what I have read on here if they tell me what to do!)

Thank you.

[gjh42]

My logo on store pages is a 190x127px gif, with a transparent background so the mainwrapper parchment texture shows through between the lettering. The home page logo is 550x110px.

To set the background color for the whole header, you would add

#headerWrapper {
background-color: #3399ff;
}

to your /includes/templates/your_template/css/stylesheet.css, adjusting the 3399ff to make whatever color you want.

[Kim]

The 'rule of thumb' is that the header (top part of the page) is usually no taller than 150 pixels. There are of course huge variations in this. When you have your logo made be sure to get a high resolution version to use in print work, i.e. your business cards and stationery, and a low res version for the web.

[dman76]

Ok I think I get it. So if I want it to blend, just have them make it with a transparent background? Thanks a lot for your help.

[gjh42]

It depends on how you want your logo to blend.
If you want it on top of another color or pattern/image, then a transparent background will do it. If you want it to stretch seamlessly off to one side, then having the logo fade to a smooth color on that side would be the right thing.

[dman76]

Ok, I will figure out what I want to do with it. I appreciate your help, just one more question! I got how you said to change the background color for the header area. If I wanted to put and image up there instead of just a color, what would I put in the stylesheet to do that and where would I put the image file? Thanks again in advance.

[gjh42]

background-image: url(../images/yourimage.gif);

and save the image in /includes/templates/your_template/images/.

You may also want
background-repeat: no-repeat;
background-position: top center;

(choose from top/center/bottom and left/center/right)

[BBellPhoto]

I made mine 800pixels wide by 100pixels tall. I need to shave it down to about 770 or 780 in width and will get to that soon. But in the meantime, it's working for me.

http://bobbellphotography.com/catalo...php?main_page=

BBell