Expanding & Scrolling IM Letters - Tutorial 13

Elastic Trail Script


Screenshot

By LismibaebisCreations
3 February 2011 - Revised October 2014

Tutorial Image: ©Samantha Robinson
Used with Group Permission

The Elastic Trail Script is by Philip Winston and available through DynamicDrive, you can download the slightly adjusted lesson code here.

Skill Level: Intermediate/Advanced



Needed

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


Image
Tube of choice


Mask
Mask009ms, available here


Dingbat Font
You can easily find a dingbat font of your liking through a Google search.
Some examples:
Animal Dingbats, available here
Floral Dingbats, available here
(I used Destiny Little House)


Filters
I.C.Net Software > Filters Unlimited 2.0, available here ****
Simple Filters, available here

**** Filters Unlimited is a "to pay for filter".
If you do not have it, you can use a Texture of choice instead


Code
Your personalized expanding code ExpandingLBAug2014.txt (Lesson 3)
OR:
your personalized scrolling code ScrollingLBAug2014.txt (Lesson 9)


Script
ElasticTrailScript.txt, available here


Performance Notes
This tutorial is in 7 parts:
- Preparation
- Background for LC
- Tile
- Slicing
- Cursor Image
- Change Coding
- Make new 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

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


Preparation

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

2) Download, unzip and save ElasticTrailScript.txt to your Lesson Folder

3) Start > Documents

4) Open your Scrolling Letters Folder

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

6) Download mask and open in PSP
Download (if necessary) a Dingbat Font of choice and open
You might have to install the font to make it visible in PSP, simply click on "Install"
(The Dingbat Font will be used to make the cursor image)

7) File > Open
Open image of choice

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

9) Dropper Tool (E)
Left click to choose a light Foreground color
(I chose #f6e1cc)
Right click to choose a dark Background color
(I chose #293e0c)

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

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

12) Edit > Copy


Background

13) File > New
Settings:
Width = 200 Pixels
Height = 200
Resolution = 72.000 Pixels / Inch
Raster Background = Checked
Transparent = Checked

14) Flood Fill Tool (F)
Settings:
Match mode = None
Use all layers = Not checked
Blend mode = Normal
Opacity = 100

15) Right click to flood fill with Background color

16) Effects > Plugins > I.C.Net Software > Filters Unlimited 2.0 > Paper Textures > Hemp Paper 2
Settings:
Intensity = 128
Lightness = 110

17) Effects > Plugins > Simple > Top Left Mirror

18) File > Export > JPEG Optimizer
Settings:
Set compression value to = 20
Chroma subsampling = YCbCr 1x1 1x1 1x1 (None)
Save Exif data = Not checked
File name = bgLC
Do NOT close

This will be known as Pattern for the rest of the tutorial


Tile

19) File > New
Settings:
Width = 800 Pixels
Height = 640

20) Flood Fill Tool
Left click to flood fill with Foreground Color

21) Effects > Plugins > I.C.Net Software > Filters Unlimited 2.0 > Paper Textures > Hemp Paper 2

22) Layers > New Raster Layer

23) Flood Fill Tool
Left click to flood fill new layer with Foreground color

24) Layers Palette
Reduce opacity to 34
(or a setting of your liking)

25) Layers > New Raster Layer

26) Flood Fill Tool
Right click to flood fill new layer with Background color

27) Layers > New Mask Layer > From Image
Settings:
Source window = Mask009ms.jpg
Source luminance = Checked
Invert mask data = Not Checked

28) Layers > Merge > Merge Group

29) Effects > 3D Effects > Drop Shadow
Settings:
Vertical & Horizontal = 5
Opacity = 30, Blur = 10.00
Color = Black
Shadow on new layer = Not checked
(or a setting of your liking)

30) Edit > Paste As New Layer
(tube)

31) Move Tool (M)
Move tube to the top left

32) Layers > Duplicate

33) Image > Mirror

34) Layers > Merge > Merge Down

35) Effects > 3D Effects > Drop Shadow

36) Text Tool (T)
Add Text of your liking
(Optional)

37) Materials Palette
Change Foreground to Pattern
Settings:
Pattern: Your Background pattern
Angle = 0, Scale = 50
Texture = Not checked

38) Image > Add Borders
Settings:
Symmetric = Checked
Size in pixels = 1
Color = Black or darker shade of your Background color

39) Image > Add Borders
Settings:
Size in pixels = 12
Color = Any color not in image

40) 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

41) Select new border

42) Flood Fill Tool
Left click to flood fill new border with Pattern

43) Effects > 3D Effects > Inner Bevel
Settings:
Bevel = #2, Width = 10
Smoothness = 7, Depth = 7
Ambience = -10 (Minus)
Shininess = 12
Color = White, Angle = 315
Intensity = 32, Elevation = 50

44) Selections > Select None

45) Image > Add Borders
Settings:
Size in pixels = 1
Color = Black or darker shade of your Background color

46) Layers > New Raster Layer

47) Add © of Artist and any other info according to artist TOU

48) Layers > New Raster Layer

49) Add your watermark

50) File > Save As
Settings:
Save as type = .PSPIMAGE
Save in layers, so that you can make changes later if necessary

51) Window > Duplicate

52) Close the file you just saved


Slicing

53) Layers > Merge > Merge Visible

54) Make your top.jpg, middle.jpg and bottom.jpg files according to Lesson 4

The "marching ants" show where to slice my image:
Below the Tube and Drop Shadow for the Top Slice and at the bottom of the straight line for the Bottom slice:

Screenshot

55) Write down the height of your slices and decide on padding-left and padding-right.


Cursor Image

56) File > New
Settings:
Width = 200 Pixels
Height = 200

57) Text Tool (T)
Settings:
Font = Your Choice
Size = 90, Units = Points
Stroke width = 0
Create as = Vector
(You might have to adjust the settings depending on the font you chose)

58) Use letter of choice

59) Objects > Align > Center in Canvas

This is how mine looks:

Screenshot

(I added my watermark and a 1 px black border for better visibility)



divider

Or
You might prefer to use:
Preset Shape Tool (P)
Settings:
Shape of choice
Retain Style = Not Checked
Anti-alias = Checked
Create as Vector = Checked
Line style = Your choice
Width = Your choice
Draw the chosen shape

Example:

Screenshot

divider

60) Layers > Convert to Raster Layer

61) Layers > Merge > Merge Visible

62) File > Export > PNG Organizer
Settings:
Colors:
16.7 Million Colors (24 Bit) = Checked
Transparency:
Alpha channel transparency = Checked
Existing image or layer transparency = Checked
Gamma:
Gamma = 45455
Format:
Non-Interlaced = Checked
File name = cursor


Change Coding

63) Make your LC file according to instructions in Lesson 5

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

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

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

Screenshot

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

67) Open either the expanding or scrolling letter code

68) Edit > Select All

69) Edit > Copy

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

71) Make changes to the Flavor.htm code according to instructions in Lesson 3 in the Footer area and
- Expanding letter: Lesson 6 to add the slices, determine the padding and change text background color, text and link colors.
- Scrolling letter: Lesson 9 to add the slices, determine the padding-right and change text background color, text and link colors.

72) Open ElasticTrailScript.txt

73) Edit > Select All

74) Edit > Copy

75) HTML-Kit:
Look for this area in the code

Screenshot

Edit > Paste
Screenshot


Make new .imf letter

76) Make new .imf file according to instructions in Lesson 9


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


Link to previous Lesson Lesson Plan Link to next Lesson