
	School of Medicine Home » Dean's Office » IRT » Web & New Media Services » Training » Photoshop 1

PHOTOSHOP LEVEL 1

Home

Basics

Palettes

Tools

Menus

Hands-on I: Button

Hands-on II

Output

PHOTOSHOP LEVEL 2

Home

Rotate, Crop, Clone

Tower Stands Alone

Canvas, Color Bar

Text

Pen, Path, Bird

Fly Free

IRT Information

IRT Home

Getting Help...

A Fistful of Pixels: Some Basic Ideas

Pixels

Photoshop is what is what is called a "raster" graphics program. This is a twenty-dollar word for the idea that it manipulates "pixels" of information. Each pixel, and there can be thousands of them in a graphic, is a square set to a particular color value.

Colors

On the web, we work with Grayscale, RGB colors or "Index colors," which I'll explain later. For now, keep in mind that when you are creating or editing an image in Photoshop, always be sure you are working in either RGB or Grayscale, as indicated in the "Image/Mode" menu. If you open a GIF image in Photoshop, be sure to switch to RGB, because Index color images (the mode used by GIFs) get really junky when you change size or resolution.

Take a look at these two birds. The one on the left was scaled down while still in Index color mode. Notice how choppy it’s gotten. The one on the right was scaled in RGB mode, and is much cleaner.

Grayscale means black & white, with continuous gradations of tone. Each color can have up to 256 different levels from white to solid. Multiply that by 3 colors (Red, Green and Blue or RGB) and you get millions of possible colors. "Web Safe" colors are colors that are known to display properly on both Macs and PCs. You don’t need to worry about this with photos, but it’s a good idea to stick to web safe colors for text and large areas of color.

Layers

Web graphics are "flat." This means that any given pixel is either one color or another, or in some cases transparent, so the background shows through some areas. The only way to change the graphic is to directly edit its pixels. Within Photoshop, we can build layers of information, much like overlays on an overhead projector, or like drawing with a pad of tissue paper. This allows us to move things around, to keep track of all the pieces separately, and to add special effects.

Transparency

Within Photoshop, each pixel has not only a color value, but also a transparency value. Transparency means that each pixel can be completely opaque or completely transparent, and any degree in between. Completely transparent areas viewed in Photoshop often reveal a distinctive grey/white checkerboard pattern behind them that is special to Photoshop.

Some people say he's transparent

Feathering: The edge of a selection has a smooth transition from opaque to transparent. It allows us to create more life-like graphics

Anti-alias: Objects, such as text or pixel selections, can be anti-aliased to add a small amount of feathering. The purpose is to give them a smoother, more natural look. Compare these two letter Ts: The left one has anti-alias, the right doesn't.

Resolutions not just for New Year's anymore

You only need to remember one number for the resolution of Photoshop graphics for the web: 72 ppi (pixels per inch, not centimeter). Why this number? Because that's the typical resolution of computer screens. No matter what resolution you set your graphic to, it will be displayed so each pixel takes up about 1/72 of an inch on most monitors. If you zoom in on any Photoshop image until the top of the window says "100%," you will be seeing roughly what it will look like on the web.

Another thing to keep in mind: Avoid scaling an existing image to a larger size, if possible. It’s always better to make a larger image smaller than the other way around. When a large image is scaled down, Photoshop removes data and makes the smaller image smooth. Photoshop can't create new data when you scale up, so it does the best it can, but it seldom looks very good. Take a look at these pictures of President Clinton. The left one looks ok, if a bit small. See how the larger one, which was enlarged in Photoshop, looks junky.

Image size

The size of graphics that will fit on a web page varies from page to page. Many web sites are set to about 600 or 700 pixels wide. It will be rare that you will have an image wider than this. A banner logo in the School of Medicine site is typically about 300 to 350 pixels wide, or smaller. Some graphics, like little arrows and such, can be as small as 7 or 10 pixels wide. Most high-end digital cameras take photos that are 1200 pixels or more wide. You could put such an image on your Web page and scale it down to a postage stamp. But you would be forcing every user to download the entire file, increasing the waiting time.

Optimization

Designing for the web is a constant struggle between making it look good, and having the page load fast. So, always keep file sizes in mind and work towards making each image look as good as necessary (in other words, so you can read and understand it) while taking up the least space. There are some tricks I'll show you later to squeeze even more information (optimization) out of your graphics. Every graphic should be as small as possible and still look good. The real issue is something called "image load," or the total amount of image data on a web page. If you only have one graphic, it's ok for it to be a little larger.

File Formats

There are many file formats, and Photoshop can handle pretty much all of them. This is a good thing for when you go out and buy clip art, or take digital pictures. But when it comes to putting graphics on the web, there are only two formats you can use: JPEG and GIF

JPEG takes all the pixels and figures out what can be left out and still rebuild the image, a process called compression. Pixels start out and end up with RGB values, but some information (and therefore quality) is lost. This format is best for photos, illustrations, anything with gradations of color, and usually, anything large

GIF uses a mode called "Index Color" and also compresses information. Index color means that each pixel is assigned a value from a set table of colors. So, if the graphic has fewer colors in its "index," its file size is smaller. Lots of colors = larger file size. GIF is the format of choice for anything with sharp edges, hard lines or flat colors, such as text and line drawings. It's also usually the best choice for anything small, and if you want any of your background to show through the graphic, you must use GIF.

Saving Files

It's important to save your documents frequently, in case of mistakes or computer crashes. It's also smart to save a different version of the document each time you make major progress, or every 15 or 30 minutes, adding a number to the document each time. You end up with "document1.psd," "document2.psd," "document3.psd," and so on. This ensures that if you mess up, you can always go back a step and start over. Make this your mantra: "Save Early and Often."

File Names

Most of our servers can read and store files with long names and with upper and lower case letters. Out in the larger world, some servers have severe limitations on how files are named. Servers are also very literal … if your file is called "ImportantStuff.html" and you type in "importantstuff.html" you may get an error message. It’s a good idea to develop the habit of simple file names. Remember to tag the file with the appropriate format, i.e. ".jpg" or ".gif" or ".psd" if the program doesn’t do it for you. Always use lower case letters. Avoid special characters, like "&" and "%." If you must make a file name long, try to break it up with underscores: "this_is_a_long_filename.jpg".

Previous | Home | Next