Web Design and Production.

 

EXPORTING GRAPHICS FOR THE WEB USING PHOTOSHOP 5.5

Whether creating a new document or working with an existing image, set up the image as follows:

  1. Convert the image dimensions to Pixels (rather than Cm's or Inches)
  2. Resolution for the Web is always 72 pixels per inch - PPI (or dots per inch - DPI)
  3. Image mode = RGB colour
  4. Background transparent (as required)
new image.
When you have created the image that you want in Photoshop and it is the right size for your web page, you will need to OPTIMIZE the image for the Web - that is, save it in the right format (either GIF or JPG) and reduce the file size without loosing too much quality - to speed download times.

Go to the FILE menu and choose SAVE FOR WEB

From the Tabs at the top of the window, choose the 4-UP view - this allows you to compare up to four different sets of settings for the final image - essential for making the choice between file size (and therefore download speed) and image quality.

For GIF Images (Flat colours, cartoons, logos etc.) :

  • SETTINGS: Choose from a variety of pre-set settings
  • GIF: Choose either JPG (for Photos and gradients) or GIF ( for flat colours, cartoons, logos etc.)
  • ADAPTIVE: this setting will choose the best colour match from the colours contained in the image for export.
  • DITHER: sets how colours in a limited palette will blend into each other - DIFFUSION is a good general setting
  • TRANSPARENCY: For a transparent background
  • INTERLACED: For GIF images allows download in multiple passes
  • COLOURS: Choose the least amount of colours while retaining image quality to reduce file size
  • MATTE: The background colour of the web page the image will be inserted into - sets the dithering colours around transparent edges

For JPEG Images (photographs, gradients etc.):

  • QUALITY: Expressed as a percentage - allows loss of image quality for reduced file size - again make a choice balancing the two
  • PROGRESSIVE: Allows download in multiple passes for JPEGs
  • NOTE: JPEG images cannot have a transparent background

 

 

GIF export.

jpg export.

When you are satisfied with your settings, select OK and give the new file a name. It is a good idea to save the optimised image directly into your web site's IMAGES folder.

Also don't forget to save the original Photoshop image in case changes need to be made - do not save the photoshop version in your IMAGES folder - make another folder outside of your web site ROOT FOLDER to save your original graphics.
HOME :: INFORMATION ARCHITECTURE :: PHOTOSHOP GRAPHICS :: GIF vs. JPG
FIREWORKS INTRO :: F/W ROLLOVERS :: F/W GIF ANIMATION
DREAMWEAVER INTRO :: D/W TABLES :: D/W SITE BUILDING #1
D/W SITE BUILDING #2 :: D/W SITE BUILDING #3 :: D/W FRAMES
D/W LAYERS :: D/W FTP

:: TOP OF PAGE ::

© Rory OBrien 2001