Web Graphics Primer

[samo1215]

I have been learning html and css and while I have found a decent book and a couple of great links that discuss the code part, I'm struggling quite a bit with the graphics portion. First, and foremost, now a days what is the target screen resolution and then say I wanted a header to span that entire section, how wide would it be?

Also, I understand the programs like photoshop and gimp make bitmap files and illustrator makes vector images. What I don't get is often I see people taking images and then resizing them with code. Don't vector images scale better than the gifs and jpegs people are using? So should images be made to be the size that you want them displayed on the screen and then how do you plan for that?

Any assistance or direction on creating graphics for the web would be greatly appreciated.

 

[InLikeALion]

I don't have any resources to link to. Others will probably post one before I finish my response.

1. Resolution: The screen res is still 72dpi. As far as I know, this will still be the norm for quite a while.

2. Width: You have to determine who your target market is. If your site needs to accommodate visitors of all types, including those who have old browsers and small monitors, then you would want to code for a view of 800px wide (for 800x600 displays).

If this is a site where you assume your viewers are on modern displays, the current standard is 1024 wide (for 1024x768) - which is the dpi of stard 4:3 aspect 15" screens.

With creative coding, you can make fluid designs that still hold together but expand to fit any width of screens.

3. Image type: You're right in saying vectors scale better, but unless you are using flash, web browsers cannot handle vector images. You are also correct in saying you should make images be the size you want them to display on screen.

You plan for that by making your images at 72dpi in Photoshop and viewing them at 100%.

Letting scripts resize your images add to the processing required to display your site. The results may also not be the same in different browsers, or as pretty as you'd like, so making a separate thumbnail and full-sized images makes sense.

Just wait for others to link some better resources/tutorials.

 

[MegaMan1311]

I would say that the MINIMUM target resolution is 800x600. I wouldn't go out of my way to design for anything less than 800x600 (excluding mobile). I used to use a target resolution of 800x600, but now I work with a target resolution of 1024x768.

To make a header span across the screen, I would use width: 100% in css. I think that is what you are asking.

Yes, photoshop and gimp make bitmap (nowadays, they can also make limited vectors) and illustrator makes vectors. Yes, vectors scale better. The problem is is that vectors and the web don't play nicely. Vectors are often large files and not all browsers support them. Instead, we use our vector images to get the image size we want and save that resized vector image as a bitmap.

One more note here. Vectors are not necessary to create images. You can make bitmaps by themselves and not have a vector copy to resize. The only problem with it is if you want larger or smaller versions of the exact same image.

So, yes images should be made to the size you want them (in most cases. There are certain cases where you need a larger image to be resized, but it isn't common in straightfoward html and css.)

You plan for it by knowing your minimum screen resolution (I recommend 800x600 or 1024x768) and planning and sketching your site out in advance so you can decide how big or small you want the image.

I recommend that you get a bitmap program (photoshop, gimp, ect.) and THEN get a vector program (fireworks, illustrator, ect.). Fireworks is one of the better vector programs for the web. Illustrator is more for books and things.

Also, design your site in your bitmap / vector program of choice before you start coding your site, so that you can get the site proportioned and designed correctly before coding.

Next, read some tutorials for your image program of choice on how to make different effects and images.

I hope this helps. If you have any questions, just ask. I hope the other posts pick up on things that I missed.

 

[samo1215]

Thank you both for your help, I really appreciate it. One question I forgot to ask is how to deal with text in headers and navigation bars. Where do you get your fonts or are some of you actually creating the text our of bitmaps and vectors?

 

[InLikeALion]

Can you describe in more detail what you mean? What do you mean "get our fonts?" Do you mean, fonts used in the design/logo? Or "fonts" in menus/navigation?

 

[angelwatt]

Screen resolutions with 1024 width are the majority these days (http://www.w3schools.com/browsers/browsers_display.asp), but you also have to consider that there's a good number of us who don't run our browsers at full screen. I once read something on the statistics for that, but can't find them currently. You should aim for a fairly fluid design though to accommodate as many browser sizes as possible. Also think about people using mobile devices like the iPhone.

On graphics, you can design in vectors graphics, which will have that benefit of being able to be rescaled nicely, but like another poster stated you won't be able to use that specific vector file on your web page. You can however export the vector image in a web compatible format (jpg, gif, png, etc.) while still keeping the vector file in case you want to resize it later.

I only use the fonts that come with the OS. I know MS Office installs a number of fonts when you install it. There's a number of sites that you can download. Just remember that some fonts that people make are only good at certain sizes, just something to watch for. Personally though, I use standard web fonts rather than using a graphic depiction of a font. Though if you do graphical text, make sure to supply alt text for the image to give the same text for accessibility purposes.

 

[samo1215]

Can you describe in more detail what you mean? What do you mean "get our fonts?" Do you mean, fonts used in the design/logo? Or "fonts" in menus/navigation?

Sorry I'm being really general here. What I'm trying to ask is, a lot of times I see headers that have really neat text in them. When I look at the source code of the page, I see that the text is indeed in part of the image. I have downloaded some free fonts and played around with many of the ones preinstalled on my computer and they all look pretty boring.

Also, sometimes in menu navigation bars that aren't CSS, it appears that the text is actually part of the image (like the apple one I think). I was just wondering what fonts people were using or if they were actually making their own fonts. Thanks again for everyone's help I'm really learning alot.

 

[InLikeALion]

We collect them. You can buy them from places like Veer.com (good but expensive) or run across the occasional free sets given out by font creators.

Stylish fonts either come from the above methods, or are created by hand in vector programs like Illustrator for a more individual or branded look.

The good fonts are boring. Good fonts for web application are good, simple san-sarifs like Arial, Helvetica, Verdana, Geneva, and a few others like Myriad Pro which Apple uses (iirc), and some sarifs, like Times, Times New Roman, and Georgia.

 

[MegaMan1311]

I just thought of something that you should know if you don't already. If you want to use a non-generic font (anything other than arial, helvetica, times new roman, ect.), you need to put that text in an image.

I like to use the font Myriad Pro for example. Not everyone has that font (most people don't), so I put it in an image. Text in an image can be viewed even if you do not have the font, but standard text in the page cannot be viewed if you do not have the font. If you do not have the font in a page, an alternate, generic, font will be used.

I think that makes sense... Does it?

We get our fonts from many places. Some free from websites, some from promotions, some we purchase from font places, and some we get from other weird places...

If you have anymore questions, just ask.

 

[InLikeALion]

If you use fonts in images, though (as MegaMan pointed out), you should make sure to supply alt text for the image for accessibility, as well as read up about image/text replacement methods, in-case your images become unavailable or are un-usable by the visitor's browser - you want your site to still exist if the images don't load.