Create rollover images using new layers

With this method, you will create new layers where you want to create the rollover effect. Again, we will create the two sets of images necessary to put together our rollovers in Dreamweaver.

  1. open your completed comp in photoshop, make sure that this is your original PSD file
complete comp
  1. make sure that your slices or guides are visible, then use the rectangular marquee to draw a selection around the slice where you wish to create the rollover (you must do this for each rollover, so you will need to move or redraw the marquee for each one)
  1. you will now create new layers that contain your rollover images (in this example, I placed them in a layer group titled background)
  2. there are tons of different ways to do this, I will give you two examples:
    1. use part of the images and change it using adjustments, filters, etc (in this example, I selected the layer that contained the nav bar image)
      1. using the rectangular marquee, select the pixels you want to copy and then paste in to new layers.
      2. with the new layer selected, add a filter, adjustment, etc
      3. make sure you leave the visibility for these layers turned on
    2. fill the selection with a color, pattern or a gradient (you must create a separate layer for each rollover)
    3. when you are finished, your layers pallete should look something like this:

Note: I have a separate layer for each of my rollovers: about, gallery, and contact

  1. you should now see the effects you created on your image

Note: I added a chalk and charcoal filter to the layers

Here is an example of the effect

Previous - Next