Creating Graphics for the Web

by Becky Davis

File Types and Formats and How to Save Them

Save for Web vs. print

When preparing images for the web and other online media, you often need to compromise between image display quality and the file size of the image.

That statement is straight out of Adobe’s help files and is really the heart of this discussion. A perfect picture in size and quality for the most part is too big (physically and in file size) to be useful on the web. Compromises must be made. This subject can go on for days, but here are some simple things to memorize.

  • Print – 300-600 dpi (dots per inch, printer resolution)

    Pixel Demo

    Pixel Demo

  • Web – 72 ppi (pixels per inch, monitor resolution)

This link has a great overview description http://www.wisegeek.com/what-is-dpi.htm

When saving an image for use in print, use Save As and save the file as a PSD, in 300 dpi or higher. The higher the dpi, the image will be sharper but also SMALLER. The number of pixels should not change.

When saving an image for use on the web, use Save for Web. This will optimize the image at 72 ppi and will give you a variety of choices for file size, dimensions and quality. Later on I’ll go through a work flow demo for creating and saving graphics and photos.

GIF

GIF

  • GIF – Save files as gifs when they are flat color graphic images – like a logo.
PNG - transparent sky

PNG - transparent sky

  • PNG – Another option like GIF, can be better at handling transparencies.
  • JPG – Save files as jpegs when they are photographs.

File Conventions – batch rename in Bridge

A single site can easily have hundreds of images associated with it. Finding what you need and linking it correctly does not need to be a nightmare if you follow some basic naming conventions before you get started.

  • Case Matters – A folder named Images is different from a folder named images. An image named photo.jpg will not show up if your tag reads <img src=”images/photo.JPG” />. It doesn’t matter which way you name the file, but it does matter that how you refer to the folder and image names later. Setting a convention early (eg. all file names are lower case, all images go into the images folder, all thumbnails go into the images/thumbnail folders, etc.) is critical. What ever conventions you set up, they must remain consistent!
  • Many Images – If you’re dealing with a product site with hundreds of images, going further with your convention will save your sanity. If all hat images begin with hat_ and all sweater images begin with sweat_ , you’ll have a much easier time down the road dealing with finding things and adding new ones. Again consistency is key! hat_1.jpg is not the same file as hat-1.jpg, nor will it necessarily flow in the correct order.
  • Automate it – If you are dealing with hundreds of files and they all start with DSC000, then the batch rename function in Bridge is for you. Select the files you want to rename and then go to Tools>Batch Rename.
    Bridge - Batch rename

    Bridge - Batch rename

    From there, you can give the selected files the same beginning (hat_) and then a sequence number (hat_001.jpg) or other choices. This is a great way to deal with the raw photographs. Batch rename them into a different folder, now you have copies to edit without ever destroying the originals. After you’ve competed your color corrections and cropping, if you need thumbnails and larger versions, you could take the renamed files and run them through the Photoshop web photo gallery automation (File>Automate>Web photo gallery) and voila, now you have all the large files and thumbnails created in consistent sizes of your choice and with consistent names.

    Photoshop - Web Gallery

    Photoshop - Web Gallery

Photographs

Cropping & Correcting color

How you alter a photograph depends entirely on what the end desire is, but there are some fairly simple basics that you can follow that will almost always give you a better one than you started with, while still looking natural.

Keystone

Keystone

I always do my cropping first, just because I like to get the image down to what I want before I do any other correcting. When you crop, don’t forget the wonderful Perspective checkbox in the contextual tools area. If you have an image that has been keystoned in any way, this is where you can correct that. Be careful when using this, great for a doorway or square product, will distort a human.

  • Levels – This is the 1st and most basic correction to do. Levels will even out levelsthe tonal range and color balance. Layer>New Adjustment Layer>Levels, or clicking the black and white circle at the bottom of the layers pallet will create a new layer for levels. At this point you basically want to “follow the mountain”, adjusting the sliders to follow the beginning middle and end of the mountain.

  • Curves – This is the next correction, one that can add some nice depth and saturation to an image, but one that is easy to over do.

    Photoshop - Curves

    Photoshop - Curves

    Here you want to pay attention to the mountain (the histogram is not visible in CS2 and lower versions) but not necessarily follow it. I find that almost any photograph improves with the dark end being decreased a bit and the mid or light end being increased, causing a slight S shape.


  • Workflow (This will be a demo at the meetup)

You can set up your workflow any way that makes sense to you or for the job at hand, but this is the way I like to make things work.  It gives me a consistent place to locate files for each project I work on as well as good consistent results for my photographic images.

  1. Set up folder for the project at hand, add several sub-folders – original photos, design files, etc.
    File Structure example (Windows)

    File Structure example (Windows)

  2. Raw photos from client or camera get put into the Original Photos folder
  3. Batch-rename the raw photos, so that all the “like” images are grouped together (hat_001, hat-002 etc.)
  4. Open the photos into Photoshop
  5. Crop as needed
  6. Create new adjustment layer for levels and correct
  7. Create new adjustment layer for curves and correct (if the batch were all taken under similar lighting, it may be possible to write an action script for these 2 steps, saving considerable time.)
  8. Create new adjustment layers for any special tweaking that may be needed.
  9. Resize the image for print; Image>Image size, set the resolution to 300, make sure the Resample Image box is UNchecked. We’re
    Photoshop - Image size

    Photoshop - Image size

    making the image physically smaller, but do not want to get rid of pixels.

  10. Save As – Save the unflattened PSD file into the Print Images folder
  11. Save for Web – save the file to the size you’ll need for the site. (If it’s something where you will need a large and thumbnail version of each pic, then run the Automate>Web photo gallery from the print images folder. Save the results to your desktop and then move the large images to the www/images folder and the thumbnails to the thumbnails folder. (Then clean up your desktop and get rid of everything else that the automate process created.)
  12. Close the original files you opened, but DO NOT save them. That way you will always have the original if you need it.

This method creates 3 images (or 4 if you have a thumbnail) for every image, but now you’re prepared for anything AND they all have similar file names. So, whether you need to have hat_001 for a postcard, or an html newsletter, you know where to find the right one for that purpose.

Creating sets for rollovers (inserting rollover in DW) (Meetup Demo)

Rollovers can be a nice touch to a site and easier to do than flash. There is only one real rule for creating images that will sit on top of each other. They must be the same size! If they are not the same size then one of the images will be distorted.

Dreamweaver - Rollover Image

Dreamweaver - Rollover Image

  1. Prepare and save for web, 2 images that are identical in size.
  2. In DW, Open the file you want to place the rollover in.
  3. In the Common tab, select the picture icon and choose rollover image.
  4. In the dialog box, give the image a name (much easier to find later) 
  5. Browse for the original image (will show up without mouse over) and rollover, be sure to add alt text and link it if desired.

Photos that “grow” with liquid layout

If you’re using a liquid layout where you want the photos or images to grow and shrink when a browser is re-sized, then you need images that will accomodate that. Begin with images that are much wider than the “standard” window, so that they can grow. It’s also a good plan to include a minimum width so they stop shrinking at a certain acceptable point.

Graphics

Creating Buttons – Both of these links have good tutorials on creating gradient buttons.

Creating a Favicon –  Favicons are the lovely little graphic that shows up in the url address bar in browsers and when you bookmark a site. Every site should have one! Before working on the graphic, make sure you have the favicon plug-in installed in PS, so that you can save the file in the correct format.  http://www.telegraphics.com.au/sw/

  • Once you have the plugin installed, open up the graphic you want to save as an icon. Favicons need to be 16x16px. That’s really tiny!
    Saving a file as an ICO

    Saving a file as an ICO

    Use a graphic that’s going to read at that size. Keep it simple.

  • Either crop the graphic to 16px or re-size the image and then Save As. One of the drop-down choices will be ICO. Save as favicon.ico
  • Put the file in the root of your web folder (same as the index file). Add this line of code before the </head> tag of each document for the site – <link rel=”Shortcut Icon” href=”/favicon.ico” /> (If you’re using PHP includes then you only have to do this once for the entire site, right?)

CSS tabbed navigation – of course there are a million ways to make tabbed navigation, but when I found this FREE program, I stopped sweating it. Pick a style, generate code, alter to your tastes – repeat. http://www.highdots.com/css-tab-designer/

Background files – Sometimes you want your site to have a background color or gradient.

Sample backgrounds

Sample backgrounds

To keep the site light you want that file to be as small as possible and then just repeat across the back. Most of the time it’s a simple matter of creating a simple gif file that is very skinny, but as long as you want the color to last. In other cases, you might want something more complicated like the sunset steaks shown. Make sure the ends blend together! In Dreamweaver, you would make these the background image for the <body> tag. The CSS might look like this:

  • body  {
    background-image: url(images/bg_main.jpg);
    background-repeat: repeat-x;
    }
Advertisements

3 responses to “Creating Graphics for the Web

  1. timstiffler

    Thanks for the info…looking forward to the meeting (will be my first) tomorrow. In dealing with images in PS for the web – do you tend to save as” or use “Save for the Web” more? Why? Also – if you have a “master file” – let’s say a PSD that you have made a .gif out of – do you save that for future use – and if so – do you save it in your root folder, or do you create a “support folder” outside of the root folder to place all of these kind of files that you might need to come back to? If you will address these types of issues in the meeting tomorrow – don’t bother to answer here. Thanks!!!

  2. We will go over this at the meeting tomorrow, but to answer briefly:
    -Images for the web should always be “saved for the web”. This will give the the options to balance quality vs. file size and the correct resolution.
    -I always keep a “design files” folder for each project. Original PSDs go there, you never know when you might need it again.

  3. timstiffler

    BDGardenGirl,

    THANKS! I have been using save for web, but as we both know in PS there are 7 different ways to skin a cat…just trying to find the best way. I look forward to meeting / hearing what you have to say tomorrow.
    Thanks -Tim

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s