Site Links

Home

Creating rollovers

Adding rollovers in Dreamweaver

Masks, Adjustment layers

Clipping two layers together

Paste into

Adding filters (noise, texture)

Integrating Adobe's Photoshop & Dreamweaver

(and some tricks you can try)

I highly recommend purchasing a good design book like Photoshop 6/ImageReady 3 H.O.T. Hands-On Training book by Jan Kabili, ISBN #0-201-72796-x, or the Classroom in a Book series by Adobe for useful tips and personal reference. It helps a great deal. The tutorials below are meant as an assist for my classroom lectures. Tutorial last revised: September 5, 2009

Creating layers and a rollover graphic in Adobe's Photoshop:

Open up Photoshop and create a new document (File > New)

Create a graphic anywhere between 200 pixels and 400 pixels width. Don't make it any higher than 480 pixels, which is one full screen, no scrolling, on a monitor set at 800 x 600 resolution.

All graphics for the web are set at a resolution of 72 ppi and RGB color.

Open the Layers palette (Window > layers). Making your graphics with layers and saving as a .psd is a key to making interactive web sites. This first tutorial will create a rollover graphic, using the "eye" on the layer to create two or more web graphics from one .psd. Right now, you probably only have one layer, as in the graphic below:

At this point, you should also have your tools open ( Window > Tools).

Select your shapes tool...it will be hiding behind the Rectangle tool on your tool bar and you can access it by clicking on the small triangle in the lower right of the icon:

Remember that many tools are "behind" other tools in the tool palette.

In Photoshop, when you click on a tool the Options palette (Window > Options), the top of your document window will change, according to the tool. It's here that you can select a shape to draw onto your first layer. Click and drag the chosen shape to fill your first layer, Layer 1. It's a good idea to name your layers, btw, when you create large .psd's. To do this, either right click (pc) or cmd+click the layer for a shortcut menu to appear, or just double-click quickly on the text, and you should be able to type a more descriptive name.

There's another small triangle upper right that can append more shapes.

Now add a new layer (Layer > New > layer) using the drop down menu above, or by clicking on the Create New Layer icon at the bottom of the layers palette.

Tip: You can create a duplicate of any layer by dragging (click and drag) any layer to the Create a new layer icon.

With two layers, you can see what happens when you turn the eye on and off by clicking it. These are layers and it is what you see in the document window that determines the finished graphic, not what is on all of the layers.

Select your text tool and type your name on the second layer. That means make sure you first select Layer 2, then type in the document window.

Although I have typed my name, I can't see it in the document window.

Instead of the shape, you could use a graphic you have already created. First save the graphic under a different name, then double-click the Background layer to open the New Layer dialog box. By changing the name of the Background layer, you have unlocked it and can now move it around, or change its properties. Try turning down the opacity to 75% in the layers palette. This will cause the graphic to fade more into the background - an effect to consider if your focus will be another object in the foreground.

Save the graphic (with your name hidden) for web by File > Save For Web & Devices. The next dialog box helps you determine whether the graphic should be saved as a .gif or a .jpg. Since this .psd has few colors and uses a solid color background with text, it should be saved as a .gif. Had it had a lot of colors or subtle tonal variations, like a photograph, then it would have been saved as a .jpg.

Tip: I choose No Dither so the edges of my graphics and text will be crisp in appearance, when I work with .gif's.

Once you hit the Save button, and named and saved the graphic, you will be returned to the original .psd. Click on the eye of the second layer to show the text on top of the first layer, and again File > Save For Web. You probably can use the same settings as the first saved graphic, so just click on the Save button. Name the new graphic showing the image plus text as the same name of the first graphic, but add "RO" to the end of the name. This will alphabetically put the two images next to each other and make them easier to find. The "RO" stands for rollover - the second image is going to be what happens to the first image when the user rolls over the image on your web site!

Tip: good naming conventions will save you time (a lot!) when you create web pages.

Inserting your graphics in Dreamweaver to create a rollover:

In Dreamweaver, instead of inserting your image as usual, insert a rollover image. You can do this either by Insert > Image Objects > Rollover Image, or by clicking the icon in the Common palette.

The dialog box that will appear will ask for two graphics. The first one (just use the Browse button to find) will be what your audience sees when the page first comes up. The second image is what appears when the mouse is rolled over.

Here is an example of the rollover:

Did you notice that some text also appeared when you rolled over this image? That's the alternate text, or alt tag, that you should add as well. If you like, you chould choose to link this graphic to another web page.

Instead of the simple graphics I used, experiment with the other tools in Photoshop to create your logo with a second, slightly different rollover. Grab a brush and write something across the layers, or paint over parts, or decorate it with doodles...whatever, just notice how using layers can let you play with an image without hurting content. Just add another layer before drawing so you don't affect a layer when you don't wnt.

You can link layers together so they can move in unison by clicking directly to the left of the layer thumbnail. You will see the Link icon appear (note the top linked layer will have the paintbrush showing and is the one the others below are linked to.)

Tip: Use the Lock: to lock a layer that you don't want to accidentally overwrite.

To align linked layers, click the Align left edges button in the Options bar to align vertically. Click Distribute top edges to distribute vertically.

Tip: The Options bar in Photoshop is similar to the Properties Inspector in Dreamweaver. You use them to change the properties, or attributes, of the selected item.

Remember to use sets/groups (located at the bottom of the toolbar) to organize your layers.

Return to top of page

Masks, Adjustment layers

By selecting a layer and clicking the New Layer Mask icon, we can remove or replace content on a graphic by using the paint brush. First, click on the New Layer Mask icon (fig.1), then select the paint brush. You should see a mask instead of the usual paint brush on the layer in the layer palette (fig 2). Make sure you see the layer mask thumbnail and that it is highlighted before proceeding.

Select the layer mask icon on the bottom of the layers palette (fig.1)

Look at the baby's hand on the computer. I'm painting it out on the mask, using the paint brush (fig. 2)

You can use your paint brush to remove content (by painting with BLACK as the foreground) or replace content (WHITE as the foreground color.) Using a large hard-edged Brush, and black as your color, paint a line above the mountain range (on the sky.) You will see the layer below start showing through.

Option+click (Mac) or Alt+click (Win) on the layer mask thumbnail in the layers palette will cause the mask to appear and the image turned off for ease if you want. You can then use the paint bucket to pour black into the entire top area, and then just touch up with the paintbrush. Option+click (Mac) or Alt+click (Win) on the layer mask thumbnail in the layers palette to return the image layer.

You can use an Adjustment Layer to make some more changes, without affecting the content. Select the other_clouds layer and click on the black-and-white New Fill or Adjustment Layer icon at the bottom of the layers palette. Choose Color Balance from the pop-up menu. Change the color levels and then click OK.

Try adding an adjustment layer to the mountain layer. Then try Levels, Hue, Saturation, Posterize, or any others you want. Once you've made an adjustment layer, you can always turn it off to return to the original image.

Clipping groups

Open babycomputer.psd and move the baby layer above the computer layer in the layers palette. Hold down Option (Mac) or Alt (Win) and move the cursor to between the two layers on the layers palette. When the clipping icon appears, click and the photograph will appear inside the type. You can use the Move tool to move the photograph around independently. You can also add a layer style by clicking on the type layer and clicking on the f icon at the bottom of the layers palette.

After I "clipped" the two layers together, it appears that the computer is inside of the baby.

On your own, try reversing the layers and then clipping them together. Or try typing something in block letters and clipping those together.

Another way to "paste inside"

1. Type a letter within a new document. Scale it large using Edit > Transform > Scale.
2. Activate a layer in the same file, or choose one from another. Select > all, then Edit > copy.
3. Activate the image that contains the type layer, then Ctrl+click/Cmd-click the type layer.
4. Edit > Paste Into
5. With the thumbnail for the new layer selected, choose the Move tool and drag to move the pasted image inside the text. Then link the two layers so they can't be moved without unlinking.

Return to top of page

To apply a texture using a layer mask:

1. With an image open, create a new layer and fill with white.
2. Create a layer mask, then apply Filter > Noise > Add Noise
3. Apply another filter to the mask. Try a Texture filter, or try Artistic.
4. You can also intensify the filter by applying Distort > Twirl or Ripple, or Stylize > Wind. To fade a filter effect, try Edit > Fade. Also try adjusting the Opacity of a layer.

Turn a photograph into a painting or a drawing:

1. Open an image and duplicate the layer.
2. Choose Filter > Stylize > Find Edges
3. With the duplicate layer active, add a mask
4. Paint with black at <100% to reveal parts of the layer below. Or try lowering the opacity of the duplicate layer.
5. Try clicking the layer thumbnail, then choosing Image > Adjust > Invert or try Filter > Other > Minimum (Radius 1 or 2)
6. Or you can make the duplicate layer into a watercolor. Try Filter > Noise > Median. Move the Radius slider to between 2 and 8. Click OK.
7. Choose Filter > Other > Minimum and set the Radius slider to 1 - 3. Click OK.