Quickguide to Creating web images

Quickguides for Creating Web Images

Size—sizes  vary, but here are some typical sizes (in pixels) for common types of images. You may need to add or subtract or tweak the ratios slightly depending on where you are placing the images (e.g. different themes in Drupal may use different banner sizes).

Banner/Header: 760 Width x 132 Height (about a 5:1 ration)

Logo: 200 x 200

Thumbnail: 90 x 90

Feature Image: 400 x 400

Resolution—depending on whether your image is for the web or for print, you might need to give your image a different resolution. Screens use the ppi measurement (pixels per inch). If you see dpi, this is referring to resolutions used by printers (dots per inch).

72 ppi (pixels per inch) is lowest resolution. This should be fine for most images that will be appearing on most screens.

150 ppi is medium

300 is highest. Higher resolutions mean bigger files, so unless you really need super-high resolution, 72 or 150 is usually fine.

Color—when setting up a new document in some Adobe programs, you may be asked to choose between color modes.

RBG: Red, blue green. This mode is for images that are meant to be displayed on a screen.

CMYK: Cyan, Magenta, Yellow, Key Black. This mode is used for images meant to be printed on a page.

File Type—some file types work better in print and some, again, on screen.

GIF: best if you need to maintain transparency in an image.

PNG: similar to GIF but supports more colors.

JPG: a compression mode better for print than screen.

http://viz.dwrl.utexas.edu/files/InDesignInstructions_0.pdf

Recent comments