Topic: Need some understanding concerning graphics

Question 1).  I have downloaded example web design templates and have seen that most use very small images for dividers,  buttons,  pics etc.  I was wondering what kind of graphics do they use that are so small and are also able to expand to the size needed for a web template?

Question 2).  Also i see web sites with rounded corner design on their bg and images;  are these best done by using css or by rounding the images?

Question 3).  What is the most used foramt for images for optimization?

I'm sorry for all these questions and appreciate all your help deeply!!!!  I do not have the luxury of attending school as i'm disabled and cannot sit in school on a day by day basis;  so i'm trying to learn the best way i can!  Sorry for the multitude of questions!!!  Thanks in advance!!!!
                                                           The *WORD* to live by:  To live is *CHRIST*;  to die is gain!

Last edited by Dwayne Whitley (2009-02-25 10:15:56)

Re: Need some understanding concerning graphics

Well, typically if you have a continual background it's easiest to just make it repeat rather than stretch. To do that you would just use it as a background image in CSS like so: background: url(images/whatever.jpg) repeat-x; You could also use repeat-y, no-repeat or repeat depending on which direction the image needs to go.

Rounded corners, on the other hand, are typically created in something like PhotoShop or Fireworks. Personally, I'm using some CSS3 declarations to make things round. That doesn't work in older browsers, or even some of the newer ones. But I prefer to do that than to use images. If you were to use images, you just include them as background images in your CSS. Here are some tutorials on that: … -with-css/

Image formats depend on what you need to do. If your image is a photo or something with a lot of detail you're probably going to want a JPG. If it's an icon or something that doesn't really have a lot of color depth you'll probably just want a GIF. GIFs and PNGs are the only two image types that handle transparency. So, if you need to layer things together those are likely the two you'll want to use. Transparent PNGs won't work well with Internet Explorer 6, it'll give you a lovely blue space where there should have been transparency. There are some JavaScript techniques you can use to apply filters to your PNG images, but that's often a pain. PNGs are also sometimes larger than other image types, depending on the image. It's just something you'll have to play around with while watching the image sizes.

Hope that helps!

Re: Need some understanding concerning graphics

luz cannon,  Thanks!  I've used css some and i have the student/ non-profit verson of Adobe web premium cs 3.  I just need to learn some techniques!  One thing that i wonder is this;  when i have downloaded example web templates,  all of the images, buttons, dividers etc. look very small in the images folder;  but when you view the home page they make up the site!  What do they use that makes the images so small and able to expand to the size needed when the page is loaded?

I like the site you suggested as well!

Thanks very much for your help!!!!
                                                    The *WORD* to live by:  To live is *CHRIST*;  to die is gain!

Last edited by Dwayne Whitley (2009-02-25 13:41:53)