Social Bookmark Thisdel.icio.us Digg it Earthlink Furl iFeedReaders ma.gnolia Maple.nu Netvouz Netscape RawSugar reddit Scuttle Shadows Simpy Spurl StumbleUpon Wink Yahoo MyWeb

After reading Photoshopit’s excellent site seal tutorial, I decided to make one of my own with the addition of a mouse over effect for thatadded sheen!

To start with we need to create the website seal which we are going to apply our mouseover effect.

The Image

1) Open up Photoshop and create a new document. I made mine 350px by 350px. Fill the background layer with a dark colour of your choice. I used #333300

2) Create a new layer and call it ’seal’ and then go into the Phososhop custom shapes menu and select the seal shape.

3) Make sure the custom shape tool is set to fill pixels. Whilst holding down shift, drag this shape from the top left corner to the bottom right corner of your document, so that it fills the canvas.

4) Whilst holding down ctrl click on the ’seal’ layer to select it. Then go to select > modify > contract and contract the selection by 1 pixel. Next, create a new layer and call it ‘grad’

5) Select the linear gradient tool and open the gradient options pallette. using the following options. (the green I used is #669933)

6) With your selection still highlighted on the ‘grad’ layer, click and drag the gradient tool from the bottom right corner into the middle of the seal and let go. You should now have something like this.

7) With your selection still highlighted create a new layer and call it ‘white’.

With the ‘white’ layer selected, select the Eliptical Marquee Tool. Hold down shift+alt and drag an oval shape over the top third of the seal shape. Fill this selection with white and change the layers opacity to 20% and then deselect (ctrl + d). It should now look like this.

9) To finish the image off I put a drop shadow on the ’seal’ layer and added some text on top (font: impact, size: 36px strong). I then applied an inner shadow to the text.

10) You should now have something that roughly resembles this

11) Save a copy of this as a .gif called ’static seal’ (you’ll see why later)

The Animation

11) The next step is to produce the ‘added sheen’ animation using Imageready. Before we can start we need to prepare the Photoshop document to be exported. To start with merge all the layers in the composition except the background layer. Now unlock the background layer (double click the layer) and call it ‘canvas’ .

12) Now create a new layer called ’stripe’ and place it at the top of the layers pallete. Using the ‘rectangular marquee tool’ create two vertical stripes from the top to the bottom of the canvas and fill them with white like so.

13) Change the opacity on the ’stripes’ layer to 20% and rotate the stripes 45 degrees clockwise (on my finished version I added an outer glow to this layer using the blending options) and then export the PSD into Adobe Imageready (Shift+Ctrl+M).

14) Once you are in image ready, lock the ‘canvas’ layer and the merged ’seal’ layer leaving the ’stripes’ unlocked. Position the stripes layer at the top left of the compostion like so.

15) Before we create the individual frames that are going make up the animation we need to mask the canvas as we do not want the animation to affect this layer. To do this right click on the ‘merged seal’ layer and click ‘Set Selection to Transparency Mask’. Now select the ’stripes’ layer and click on the ‘Add a Mask’ button in the layers pallete. Finally click the link symbol between the ’stripes’ layer and the mask we just created. Your layers pallete should look like this.

16) Animation time! select the first frame of the animation in the animations pallet and duplicate it. Now select the second frame and move the ’stripes’ layer from the top left to the botom right. You should now have two frames. One with the ’stripes’ start point and one with the ’stripes’ end point.

17) We now need to tween these layers. Select the first layer and click the tween button. Use these settings.

18) Set the first and last frame to a 1 second duration and all the other frames to 0.1 seconds in the animation pallet.

19) Nearly done. All we have to do now is extend the canvas height by 350px to leave a square space above the animated seal. Open th ’static-seal.gif’ which we saved earlier and place this image in the space we just created. Save the compostion as an animated gif and you should have this.

The Code

Lets put it in a website! I used the following:

CSS

#seal{
height: 350px;
background: url(../images/master-copy.gif) no-repeat;
}

#seal a{
background: url(../images/master-copy.gif) no-repeat;
height: 350px;
display: block;
}

#seal a:hover{
background-position: 0 -350px;
}

XHTML

<div id="seal">
<--put your link in here-->
</div>

The Result

With a little bit of luck you should now have an impressive website seal with added sheen! Enjoy

Next post