Expanding & Scrolling IM Letters - Tutorial 16

Tables

By LismibaebisCreations
14 October 2014

I have used one of my own photographs for this tutorial

Skill Level: Intermediate/Advanced

Needed

Programs
Paint Shop Pro - I used X2
Letter Creator
PeaZip
HTML-Kit
Power Archiver

Image
Image of choice, width greater than height

Plugin
Simple, available here
AAA Frame, available here

Code
Table_LBOct2014.txt, available here

Performance Notes
This tutorial is in 7 parts:
- Preparation
- Main Image
- Background 1 (for LC)
- Background 2 (Text Background)
- Background 3
- Change Coding
- Make new .imf letter

The settings for different Tools and Effects will stay the same throughout the tutorial, unless new setting instructions are given

Don't forget to save your work often

Click on the arrow and drag it to mark the progress on this page.

Preparation

1) Download and install filter if necessary
(If you install filters you need to restart PSP afterwards)

2) Start > Documents

3) Open your Scrolling Letters Folder

4) Make a folder for your new letter
Save all the images and files you will create to this folder

5) Download, unzip and save Table_LBOct2014.txt to your Lesson Folder
You might wish to personalize and save the code for future use

Main Image

6) File > Open
Open image of choice

7) Window > Duplicate (Shift + D)
Close original

8) Image > Resize
Settings:
Resample using = Bicubic
Lock aspect ratio = Checked
Resize all layers = Checked
Resolution = 72.000 Pixels / Inch
Width = 670 Pixels
Height = Will adjust itself

9) Adjust > Sharpness > Unsharp Mask
Settings:
Radius = 2.00, Strength = 10
Clipping = 5
Luminance only = Not checked
(Or a setting of your liking)

10) Dropper Tool (E)
Left click in image to choose a light Foreground color
(I chose #f8fbf2)
Right click in image to choose a dark Background color
(I chose #74786a)

11) Window > Duplicate (Shift + D)
Minimize one copy

12) Edit > Copy

13) Image > Add Borders
Settings:
Symmetric = Checked
Size in pixels = 35
Color = Any color not in image

14) Magic Wand Tool
Settings:
Mode = Replace
Match mode = RGB Value
Tolerance = 0
Use all layers = Not checked
Contiguous = Checked
Feather = 0
Anti-alias = Checked
Outside

15) Select new border

16) Edit > Paste Into Selection

17) Selections > Select None

18) Effects > Plugins > AAA Frames > Foto Frame
Settings:
Width = 35, Brightness = 0
Stroke = 0, Matte
Red = 0, Green = 0, Blue = 0
Opacity = 100 %
Negative = Not checked, More Shadow = Not checked
Default = Checked

19) Layers > New Raster Layer

20) Add Watermark(s)

21) File > Export > JPEG Optimizer
Settings:
Set compression value to = 20 - 30
Chroma subsampling = YCbCr 1x1 1x1 1x1 (None)
Save Exif data = Not checked

Background 1 (for LC)

22) Activate the second copy of the image
Crop Tool (R)
Settings:
Width = 100, Height = 100
Units = Pixels

23) Click on the middle of the square, hold down with left-click mouse and move to area of choice for background.
Release mouse-left click briefly and double click to crop

24) Effects > Plugins > Simple > Pizza Slice Mirror

25) Effects > Image Effects > Seamless Tiling
Settings:
Default

26) File > Export > JPEG Optimizer
File name = bg1.jpg

27) Window > Duplicate

Background 2 (Text Background)

28) Image > Resize
Settings:
Width = 50 Pixels
Height = 50

29) Layers > New Raster Layer

30) Flood Fill Tool (F)
Settings:
Match mode = None
Sample merged = Checked
Blend mode = Normal
Opacity = 100

31) Left click to flood fill new Layer with Foreground Color

32) Layers Palette
Reduce opacity of layer to 73
(or a setting of your liking)

33) File > Export > JPEG Optimizer
File name = bg2.jpg

Background 3

34) File > New
Width = 10 Pixels
Height = 10
Resolution = 72.000 Pixels / Inch
Raster Background = Checked
Transparent = Checked

35) Flood Fill Tool
Right click to flood fill with Background Color

36) Layers > New Raster Layer

37) Paint Brush Tool (B)
Settings: (Default)
But:
Change Size = 6
Left click once

38) Effects > Edge Effects > Enhance

39) File > Script > CenterLayer.PspScript
I use this script very often and have it available like this. You might have to do instead:
File > Script > Run > Scripts-Restricted > CenterLayer.PspScript

40) File > Export > JPEG Optimizer
File name = bg3.jpg

Change Coding

41) Make your LC file according to instructions in Lesson 5, using bg1.jpg as your background

42) Extract the files according to instructions in Lesson Lesson 5

43) HTML-Kit:
File > Open Flavor.htm

44) Delete all code starting with the first
(The text below the pink line)

Leave the code above the pink line (yours will look different to mine) intact

45) Open the Table_LBOct2014.txt code

46) Edit > Select All

47) Edit > Copy

48) Again in HTML-Kit:
Edit > Paste
(into the area you deleted)

49) Look for:
borderColor="#005900" and change 005900 to a color of your liking

50) Look for:
bgColor="#a60000" and change a60000 to a color of your liking

51) Look for:
img src="...image name..." width="740" height="450" border="0" alt=""
- Change ...image name... to the name of your main image
- Change 740 to the width of your main image
- Change 450 to the height of your main image
- Optional: Add description and/or © to the alt tag. If you add any text in the alt tag, it will then appear when somebody moves the mouse over the main image. My alt tag for this lesson is:
and looks like this in the letter: Screenshot

52) Change the names of bg1.jpg, bg2.jpg and bg3.jpg if you have named your backgrounds differently.

53) Look for:
font-size:18pt; if want to change the font size.

54) At the very top of the code:
- Adjust text color (COLOR, text and SIGCOLOR)
- Adjust the link color (link, vLink, aLink)
- Adjust email text background color (bgColor)

55) Footer Code:
Personalize and adjust the code
You can use the footer code from the scrolling or expanding codes if you prefer

Make new .imf Letter

56) Make new .imf file according to instructions in Lesson 9
Make sure that you have all backgrounds and the main image included

If you have any questions, please email Lismibaebi at gmail.com.