Web design people help pls

Okay I am trying to design a background and also another logo. How do I know what size to make the images? I mean like literally. Like five inches long by two inches high? I don't get it. I can't figure out how you guys know what size canvas to open up and where to place things.... I don't even know if this question is making sense.
I absolutely love the background I have now. (links below) but dear lord it's HUGE (SLOW SLOW loading for most ppl) When I optimize it, it looks like garbage. So I am trying to figure out how to make my own and can't even figure out what size to make anything. Any help is greatly appreciated. I searched here, and googled, and WOW, i have been reading for hours. And STILL have found no concrete answer on how to determine size of things. TIA

ETA: I have a FAST internet connection and I have to hit reload like THREE times to get the background and tables to show up on my main site. :(

You asking very complicated questions first you have to find out about the opportunities of Adobe Photoshop and optimization of files.

Second one is how to work with CSS files the files that are placed in template/yourtemplatefolder/CSS folder and find out what you can do search in the forum how to work with CSS files.

and you have to set your size of background image to 1024x768
like this one attached try to put it over your current background

When I'm designing images for viewing on a screen, I never think in terms of units such as inches or mm. I always work in pixels. Important things to know are that about 60% of web users have screens set to a resolution of 1024 x 768 pixels. The rest are split roughly equally between bigger resolutions and smaller resolutions. Very few user will have screen resolutions as large as the 2040 x 1632 size of your current background image, and even the few that do are unlikely to allocate more than a small proportion of it to their browser window.

Unless it is absolutely essential that every pary of the background look different, I look for repeats in the image and take advantage of them. On your site for example, I see enough of a repeat for it to be worthwhile looking at a background image consisting of a vertical column of tiles, with all other images laid over the top, either as normal images, or as background images to divs within your design.

Here is an example of this at work. This has been done by taking a single column of tiles from your image, though an aesthetically better result could be produced by taking more columns and repeating.

As sicness said above, optimisation is also important. Generally gifs are good for images with large blocks of uniform color, jpgs are better at handling tonmal variations, eg. in photos. I saved the column of tiles as a .jpg file at low resolution. So, whereas your background file is 717KB in size and slow to load, my jpg is just 4KB. It also repeats horizontally, so no matter how wide the users browser window gets, it will never run out of background.

Height is a different issue for an image like yours. In my example I created an image with height 1024px which would be sufficient for most users, but also cut off the bottom for many. The image could instead be made smaller and then blended into a sandy color which is also used as the background color for those users with tall browsers.

wow very cool!

sic- your right, I really do need to work with the CSS. I was thinking from the perspective of doing what I can and getting things ready, and then learning the css, and then putting it in action... I guess I'm just frustrated feeling like I don't know how to do anything to get my store design moving forward so I can go live and get going.

Kuroi- That background is awesome!! I hope you don't mind I right clicked it and saved it. I'm going to try using that as a background, BUT optimizing it first then putting the text overlay on it. The text actually has to be a part of the background gif, otherwise horrendous transparency problems ensue for me.

I will keep at it!

p.s. what about the size of the logo in the header of zencart? how do I learn how to make that size banner/header size rectangle? please don't :bangin: :unsure:

ugh NM about the text being part of the background gif. Blah. I HATE this transparency thingy. What's with the bright white highlighting behind the dropshadow... Even when I don't use a drop shadow but make my own with a lighter copy of the text... still no dice. I just need to give up on my site looking this way, and go with something NOT light years above my head :(

transparency doesn't work well with drop shadows ...

As discussed in an earlier thread, gifs have a very limited range of colors and so as the drop shadow fades into the transparency background, the whole border area is approximated by white.

As a designers there comes a time when we have to decide which is more important to us: a touch of drop shadow, or designing sites that work for people not sitting in their web hosts data center with a direct line into a high speed pipe :no: (print is so much less restrictive :yes:)

Any other effect that does not fade into the transapency is still available to you, including, bevelling, inner shadows, gradient overlays, inner glows, and strokes.

well I got something working, put it together, much smaller... and now I cannot figure out how to get it to show up.
I tried to use a stylesheet to set the page background color and center the other thing. Thing being: what was created in Fireworks and exported.

Click on the link and you'll see what I mean (homepage link).
If I remove the stylesheet, the rest of it shows up fine, but aligned all the way left and with a large white column of page showing through on the right side. Not very attractive. :(

I validate the stuff as I rework it as was getting nothing showing up as invalid code, or code-in-wrong-spot. Ho hum. I am going to leave it as it for the moment and go back to w3C.

The image is much smaller which is good, but the reason that you have the gapon down the right hand side is (I suspect) because you have used not just the images but also the HTML that Fireworks has produced for you. This results, not in a repeated and flixible background image, but in a fixed width, foreground image, chopped up and displayed in a table, that will show whitespace if the viewer's browser window is bigger, and get cut off if it is smaller.

Yeah the index file it created for me is totally incomprehensible by me. I don't have the first clue where to put code in that would at least center it for the viewer. I don't mind white on either sides of it. I increased the output size and it fits perfectly in my screen, easy to read etc.

BUT there we go with my limited vision... NOT everyone is looking at what I am... :blush:

So I can make the output smaller... BUT how on earth do I center it? I give up on a nice blue color for the page background. White is fine... but the centering for any viewer would be the finishing touch!!! Can you help? I'll send the index.html file to anyone that thinks they can do it.. looks hopefull

Centering should be easy. Find the line that reads > <table border="0" cellpadding="0" cellspacing="0" width="1536">and change it to> <table align="center" border="0" cellpadding="0" cellspacing="0" width="1536">(Would still recommed against this approach however - you'd be much better off using a background image, ideally a small one that repeats)

I'm not actually using a background image.
See I created this thing in Fireworks using the smaller form of my zencart background (the attached pic above in the thread)
I added the tables, hotspots etc. then exported the whole thing after optimizing it as small as possible w/out sacrificing minimal readability.

So I guess you could say the whole entire thing IS the background image? I don't know LMAO!

I will try the center thingy you posted. But I'm telling you, that index file is rediculously weird. It doesn't even look like HTML. But hey, it is working somewhat so... :laugh: