You can begin to see the various pieces of your website taking shape; you've thought about who will use your site, what they might ask, and have begun to think in detail about how to answer the questions a visitor poses. Your goal after the first two lectures is to produce a map of your web site, or more generally, a framework within which to answer users' questions, and the answers to those questions. You do not necessarily have to "finish" each step in order to proceed to the next, as many of these things can be done in parallel. You can (as the title suggests) begin to produce graphics for your site before you've finished your text, and you can work on a site map as you work on your text and your graphics. This is particularly true for relatively small sites (a dozen or so pages, as opposed to hundreds or thousands), where you largely know what you're likely to want on your site already.
A web site does not have to have any graphics; it's not a requirement. I tend to think sites look better with some graphical content, but I think images should convey information to the user, rather than simply look nice. It's important to note that there are many formats for graphic images on the web, including GIF, JPEG, PNG, FLASH, VRML, and more. All we will be discussing are GIF and JPEG, both of which are image compression formats.
By far the best in-depth resource for web graphics is the excellent book Designing Web Graphics by Lynda Weinman, whose web site is :
For high level overview of things graphic and web, also see my article:
The first step is to gather the images you'd like to present on your site. These can be physical images that you'll scan, from a CD ROM of graphic images, or images you glean from the web. To use an image you find on the web, right-click on the image, and choose "save image." Again, be certain that it's OK for you to use this image (it's from a library of images, or you've checked with the publisher).
This is a good time to begin organizing your web files. It's best if your entire project is within its own project folder. You can organize that folder any way you like, but you should at the least create a separate folder for the web site itself. This last folder should at this point be empty - it will ultimately contain *only* HTML files, and images for the site. I recommend a separate folder for images within the site folder, but this isn't necessary. Again, the images and text you're gathering now should *not* go in your web folder, but in your project folder. Here's one possible arrangement:
~/web project/
images/ (images you have now)
research/
working text/ (your site content)
storage/ (a place to put files you're done with, but dont want
to throw away)
site/
images/ (gifs and jpegs)
.html files here
In order to create images for the web, you need an image manipulation program. Photoshop is by far the best; if you don't have it, you can rent computer time at an e-coffee house, or Kinkos. Also, if you have a scanner, many scanners come with Photoshop Lite Edition, which will do the trick. You may have or use another program of course; the key is that the software you use allow you to save a working image as either .GIF, .JPEG, or "for the web."
Some quick notes on software:
The trick to creating images for the web is balancing information depth with file size (and thus transfer speed). Unfortunately, it's generally best to design for the lowest common denominator on the web (in order to reach the most people). Since it's best to therefore assume that users will have only a modem, you must limit your graphic and overall page size, both in viewable size, and in file size. It's best to assume the end user will have a screen size of 800 wide by 600 high, and make certain your overall design fits within this framework. Your images should therefore be correspondingly smaller. I recommend keeping the overall page size to < 40K for quick downloads, and up to 150K for pages that have a lot of content (and are therefore, we hope, "worth the wait.") Bigger than this, and you're inviting people to leave.
Usually, the HTML for a small page is < 5K, which leaves about 35K - 45K for graphics. When creating web-based images, I recommend keeping one "original" of the image of high quality, as a .PSD (photoshop RGB file) or a .TIFF (what most flatbed scanners produce. Scale your image to the actual size you want it to be on the web. Make sure your image is being displayed at 100% if you're using photoshop. You may need to flatten the image, and I usually recommend RGB over CMYK, as the web is entirely RGB (CMYK is for print). You should always keep your image at a high bit depth and in RGB until you're ready to rip it for the web - don't scale and work with GIFS and JPEGs, as they have been compressed, and are very grainy.
As a general rule, GIFs work best for line art, illustrations, and simple color patterns. JPEGs are best when compressing photos and similarly complex images. Both compression types have multiple settings for quality. JPEGS range from 1 - 10 in the quality of the compression (I like 3-4 for the web), GIFS can be 2,4, 8, 16, 32, 64, 128 an 256 bit. In both cases, the lower the number, the greater the compression, the grainier the image. Compress it as much as you can without making it look bad. Again, you're shooting for the smallest file size, so try multiple options in both formats if you're unsure.
This should give you a good start towards getting the images you want on your site into a web format. The final GIF or JPEG goes into your ~/project/site/images/ folder. Drag the image into a web browser to know exactly what it will look like on the final page.
Clearly, this discussion is about images. You will also want to create graphics and illustrations for the web - perhaps some buttons, or a nice header, background images - whatever. Although you can work towards this latter goal if you like, the intention is to get your actual site content in order, and ready to go into a website. Combined with a site map, you'll have all the pieces you need to create the site itself. The next stage would be to create a design for the site, and we'll get to that in the next couple of lectures.