Basic scrolling stationery tutorial


You need Front Page or other HTML Editor. An Archiver that creates .cab files.

Here's a LINK to a free older version of Power Archiver. Click the actual version NOT the large download button
Version 6.11 is the last free one. This does not work well with Vista but Izarc is a free one that does (so I'm told) You will need to Google it
Make a new folder in documents or desktop and name it.

Download the Code .txt file and save to desktop

♥♥♥♥♥♥♥♥
Open new raster 850x550. Open a tube (use a tube that is taller than wider). Pick out two colours from this tube.
Copy the hex of these two colours and note them down. (I copy and paste to notepad)


Flood fill the new with one of the colours, copy and paste tube as new layer and position to the left.
swap colours on the palette so the fill is in the background palette. Close this palette off.


Select rectangle tool and draw a rectangle to the right of the image. Click on the vector layer then double click on the New Rectangle layer and open up the property box.
From here you can change the thickness of the border or even change to a dotted line or whatever you like.
When your happy with your rectangle, right click on vector layer and convert to raster.


You can add little decoration but do not go too far in both the sides or top and bottom.
If you want to crop your image do it now but don't crop too much.
Go to Image/add borders. Change to colour to the one you used for the rectangle border. Add borders of 4 symmetric.
Go to file/export/image slicer. Place your cursor on the bottom right corner and draw it out a little.
Change the format to .jpg If doing transparent this needs to be .gif but then you need to optimise cell but I am not covering that in this tutorial.
Click on the little grid icon, then click on the image showing in the slicer window.
In the little box that opens put rows3 columns1.
Now click on the arrow and lower the zoom until you can see the whole image
(you can maximise this window if you need to)

You now have the grid lines.
Click on the top vertical grid line and holding down your mouse draw it towards the top border of the text area. Do the same with the bottom grid line.
See my image for a rough idea of where to place the lines but you'll soon find your ideal.


Go to save as (see image) and save to your folder.



Because we are doing a plain coloured background there is no need to do a background tile.
You have now finished with PSP so that can be closed

♥♥♥♥♥♥♥♥
In your folder you should now have the following.......
image?_1x1
image?_2x1
image?_3x1
and the html. You can delete the html as we won't need it.

♥♥♥♥♥♥♥♥
Now open Letter Creator.
Under the header tab take one of the image slices (this is just to get the background colour. and text colour if you want to match it) Go to the Body tab and, Set the font, font size and colour and the link colour.
Go back to the header tab and clear the image you took in (if any)
Go to the effects tab and add effects if wanted.
Go to the finish tab and name your stationery and collection name.
Save to your folder, do not add it Incredimail


Go to your folder and open the .imfile with winrar or whatever extractor you use.
Extract it to the folder with your images. You will now have these in the folder.


Now to your html editor (I use front page)

Open your Flavor File in Front Page or your HTML Editor and go to the code view.
Find the <TABLE id=INCREDIMAINTABLE cellSpacing=0 cellPadding=0 width="100%" border=0> This will be after the name and collection name
you gave your stationery.
Highlight this, and all below it and delete.
Open the txt file with notepad and select all, copy then go back to your html editor, place the cursor where you deleted and paste.
Looks complicated but theres just a few changes.
The first.
<table id="INCREDIMAINTABLE" cellSpacing="0" cellPadding="0" border="0" align="center" width="850"> change this 850 to the width of your image
To find this out hold your cursor over your image in the folder.

Find the yourimage_2x1.jpg and change the yourimage to whatever your image is named ie image1
Change the font size 12 to whatever you set it in LC.
There are 6 height figures all the same, change these 6 to the height of your 2x1 image. At the end of the code you see width:000px; We cover this later.



The scrollbar can be customised but this is why we saved our hex colours.
Just replace the colours with the ones you want. Here's a little picture showing the areas.


Now go to your design Tab
click inside the first table (with the red x) and go to insert picture.
Navigate to your folder and click on image 1x1 and insert.
Do the same with the bottom red x and insert image 3x1
Now click on the middle slice and you see the little black squares. These form the text area so they need to be brought in to the text box.

Do this by altering the numbers, padding-left:365px;padding-right:40px Keep the right ones nearer the text box border as the scroll bar will go there.
For this you may need to keep switching from code tab to design tab.

Now the width 000px

If you are doing this tutorial in Front Page or other html editor this number will change as you set the text area to give you a scrollbar at the bottom, but you must hold your cursor on one of the text box dots and draw it out a little then back. Check the 000 has changed. This scroll bar will not show unless anyone adds anything wider than the allocated area.

This will stop the stationery splitting if the latter does happen.

If you are using hand code, you need to add the width of the text area. Keep the width just below the actual area.

It's a good idea to use an on screen ruler if you are hand coding and here's a link to a free one.

ON SCREEN RULER


The text is set for the centre but you can change it by changing the ;text-align:center to ;text-align:left.
In the code tab, go to the bottom and change the font "Arial" to the one you used for the main body.
i.e. Comic Sans MS.
Now under the Design tab delete my name (Letter by Carol©) and add your own links.
When you are satisfied close and save changes to Flavor.
Nearly finished......
Open your folder and you'll have the 3 images, the flavor file and the content file (if you did a background tile this would also be in here)
Highlight (select) all files and right click on one. You should have the option to compress... select that and check the cab box. Hit OK.
You now have the cab file. Right click and rename it to whatever you named your stationery in LC but add .imf to the end. i.e.tut.imf Now right click on that and open with...
if you have Incredimail content importer showing, click that and it'll go into your IM style box.
If you don't have the option click on browse and navigate to your Incredimail in programme files and find the content importer icon and click on that.
You will now have that option every time you do one.

Here you can find a tutorial for the changes needed to make the Expanding box stationery

♥♥♥♥♥♥♥♥


The Paint Shop Pro section of this tutorial is my own. As is the actual written tutorial.
The Code that is needed to do this tutorial is common HTML and is freely available to everyone.


♥♥♥♥♥♥♥♥

 

My Web Pages for some of my Stationery

My Stationery Group

Email Me