Web Design
ENG 330

• Photoshop/graphics site of the day from: PJ and Andrew.

Today’s topic is more on Photopshop and Web images, specifically GIFs and JPEGs. We’ll walk through making a textured background tile as a demonstration of GIFs. Note that making the graphic (appear to) tile only on the y-axis can also be accomplished with CSS-P as a background: (see HTML & CSS Chapter 16). Then we'll optimize a JPEG in Photoshop's Save for Web and Devices.

Try this as a sample:

This uses a background tile I made in Photoshop that’s OK, but more patterned than seamless. Here is a Transparent gif with matte color that we can make from the 3ducks files: 3ducks.pct and 3ducks_bg.gif. The difference is subtle, but compare that matted GIF to one that has no matte color. (Remember to look at the GIFs in the browser.)

There are lots of prepared backgrounds and some hard-to-find tutorials at the Web Developer’s Virtual Library, a good place to know in any case. Everyone should check out the Photoshop tutorials (formerly Pankpages) at teamphotoshop.com and also those at DocOzone and Absolute Cross .

Site maintained by John Beatty