First off we need to open a new image of choice. I chose this mystical one below. if you would like to use this one you may. here is the dings unzip them to your tube folder within psp.

 

 

Next click on edit, go down to image information and see what the width and hiegth is. use those sizes and add about 100 pixils to both and open a new transparent image.

Now click on the image you chose, go to edit, copy, click on the transparent image go to edit paste as new layer. So now your image should look like this.

 

 

Now, open your ding bars, chose one you like that would compliment the image. Copy and paste to the image as you did earlier. Place it at the top of the image being sure it lines up nicely. You may need to use your deformation tool to resize. NOTE: Be very careful in selecting a ding that has no dropshadow to it.

 

Now copy and paste another one on there, this time click on image, flip, this will be placed at the bottom as shown here.

 

 

Now repeat the above steps again, this time since were adding the left and right sides, you will need to click on image and rotate 90 degrees. resize if need as you did above.

 

 

Do this one more time this time rotate 90 degrees, then mirror. once all four sides are done your image will now look like this.

 

The reason we don't use a drop shadow on these images is to preserve the transparent image. You can however use a drop shadow if you intend to add another raster layer and floodfill with color. These fancy frames make nice two layer scrolling stationery. Which I have included the script below. Just copy and paste to your email, save your complete image to your C:\program files\common files\microsoft shared\stationery folder. Do not textureize the background on the image. You need to click on file, scroll down to export image, export as gif. be sure the color in the color selector is the color in which matches the color of the background color you chose then click ok, give it a name. Now, open another new transparent image 100 by 100 pixils flood fill with the same color chosen for the image you saved, this time you can add your texture of choice and save in the same folder as earlier. now onto the script. just make changes where it is red highlighted.

here are a couple screenshots of transporting as a transparent gif. Remember you must floodfill with the same color as the backgroud without texturizing it. for this to work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<STYLE>
body {font-family: "Comic Sans MS";font-size: 14pt;margin-left:50;font-weight:bold;background-color: #ffffff;color: #20a020; background-repeat: repeat-y}
</STYLE>
<!-- An optional background image can be used but it will not scroll -->
<META content="MSHTML 5.00.2722.2800" name=GENERATOR></HEAD>
<BODY
background="file://C:\Program Files\Common Files\Microsoft Shared\Stationery\wdaisysmall.gif"
bgProperties=fixed>
<P>Delete this text.</P><!-- THIS IS THE SCROLLING IMAGE - YOU MUST ENTER THE ACTUAL HEIGHT AND WIDTH --><IMG
id=bkg
src="file://C:\Program Files\Common Files\Microsoft Shared\Stationery\butterflies_brdr.gif"
style="HEIGHT: 469px; LEFT: -1800px; POSITION: absolute; TOP: 0px; WIDTH: 200px">
<!-- This is the "fake" background made up of a SPAN inside a DIV - DO NOT CHANGE OR MOVE THE FOLLOWING -->
<DIV id=frm
style="FILTER: BlendTrans(Duration=0); HEIGHT: 600px; LEFT: -1800px; POSITION: absolute; TOP: 0px; WIDTH: 800px; Z-INDEX: -1"><SPAN
id=b0
style="HEIGHT: 800px; POSITION: absolute; WIDTH: 800px"></SPAN></DIV><BGSOUND
loop=99
src="file://C:\Program Files\Common Files\Microsoft Shared\Stationery\Sunshine Day (Osibisa).mid"><!-- Scrolling left border full post height version -->
<SCRIPT language=VBScript>
REM Edgar V. Poirier
REM moomoo@nbnet.nb.ca
REM Thanks to Gerard Ferrandez for the idea ;-)
REM Revised Nov 11, 1999
Dim w, wW, wH, wx, myTimer, borders, pW, pH, bP
Dim y, yD, bT, bL, Res, BB
Dim picX, picY, bH, bxW, bxH, bW
Dim numPics, chkPics, scrollDirection

Set w=document.body

REM Set scroll Direction
yD=-1

REM Set the width of the BODY background image here
BB=15

REM Initialize
sub setUp()
REM ** POSITION THE FIXED BORDER **
bgL=pW
w.style.backgroundPositionX = bgL
REM ** SET THE LEFT MARGIN **
w.style.marginLeft=pW+BB+5
REM Get window dimensions
REM No more window size changes allowed after this.
wW=w.clientWidth
wH=w.clientHeight
wW=w.clientWidth
wH=w.clientHeight
sH=w.scrollHeight
bL=0
bT=0
bH=wH
if sH>wH then bH=sH
chkPics=numPics
REM Adjust number of pics for message length
if int(bH/pH)>numPics then
chkPics=int(bH/pH)+4
data=""
for j=numPics+1 to chkPics
data=data&"<IMG src='"&bkg.src&"'>"
next
document.all("b0").insertAdjacentHTML "BeforeEnd", data
end if
REM Initial position
y=0
REM Set the visible limits
frm.style.height=bH
frm.style.width=bW
frm.style.left=bL
frm.style.top=bT
REM Start the scroll.
SF
end sub

REM universal scrolling routine.
sub SF()
ClearTimeOut(myTimer)
y=y+yD
if yD>0 and y>=0 then y=-pH
if yD<0 and y<-pH then y=0
REM Position the background image.
document.all("b0").style.top = y
REM repeat (larger numbers give slower scroll below)
myTimer=SetTimeOut("SF",16)
end sub

REM Everything starts here
sub Window_OnLoad()
REM Get window dimensions
wW=w.clientWidth
wH=w.offsetHeight
wW=w.clientWidth
wH=w.offsetHeight
sH=w.scrollHeight
REM Get users screen resolution
wx=window.screen.width
REM and adjust font size to match.
Res=INT(wx/128)
w.style.fontSize = 14+Res
REM Set the scrolling border Width
bW=bkg.style.posWidth
REM Get dimensions of background image.
pW=bkg.style.posWidth
pH=bkg.style.posHeight
REM Calculate the size of the background
REM Number of images
picY=INT((wx*.75)/pH)+4
if (sH>wH) then picY=INT((wH+sH)/pH)+4
picX=1
REM Width of background
bxW=picX*pW
REM Height of background
bxH=picY*pH
document.all("b0").style.width=bxW
document.all("b0").style.height=bxH
REM Calculate required number of images
numPics=picX*picY
REM "Tile" the background (NOTE: Image is not positioned.)
for j=1 to numPics
data=""
data="<IMG src='" & bkg.src & "'>"
document.all("b0").insertAdjacentHTML "beforeEnd", data
next
REM Lets get started.
setUp
end sub

REM This runs if the window size is changed.
sub Window_OnResize()
setUp
end sub

</SCRIPT>
</BODY></HTML>

Back to Tutorial Archives