Expanding & Scrolling IM Letters - Tutorial 4

Making Images for Expanding Letter

screenshot

By LismibaebisCreations
3 July 2014

Art for Tutorial image: © Nicole Jahan
Used with Group Permission

Skill Level: Intermediate/Advanced

The PSP instructions are my own creation, any resemblance to another tutorial is purely coincidental

Program shortcuts will be given in parentheses



Needed

Paint Shop Pro - I used X2
Tutorial will work with other PSP versions, some adjustments might be necessary)
Free 30 day PSP trial from Corel, available here


Image
Tube of choice
(width greater than height)


Performance Notes
This tutorial is in 5 parts:
- Preparation
- Background for LC
- Background for Footer
- Tile
- Slicing

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) Start > Documents
Click "New folder"
Name = Scrolling Letters

Screenshot

2) Open your new Folder

3) Click "New folder"
Name = Expanding Letter 1

Save all the images and files you will create to this folder

4) File > Open
Open tube of choice

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

6) Image > Resize
Settings:
Resample using = Smart Size
Lock aspect ratio = Checked
Resize all layers = Checked
Resolution = 72.000 Pixels / Inch
Width = 600 Pixels
Height = Will self adjust

7) If necessary:
Adjust > Sharpness > Unsharp Mask
Settings:
Radius = 1.00, Strength = 47
Clipping = 5
Luminance only = Checked
(or a setting of your liking)

8) Dropper Tool (E)
Left click to choose a dark Foreground color
(I chose #6b4a1b)
Right click to choose a light Background color
(I chose #fbdaab)

9) Edit > Copy

10) Window > Duplicate Minimize



Background

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

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

13) Left click to flood fill new layer with Foreground color

14) Adjust > Add/Remove Noise > Add Noise
Settings:
Uniform = Checked
Noise = 16%
Monochrome = Checked

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

16) 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 Background



Background for Footer

17) File > New
Settings:
Width = 10 Pixels
Height = 10

18) Flood Fill Tool (F)
Right click to flood fill new layer with Background color

19) Effects > Image Effects > Seamless Tiling

20) Layers Palette
Reduce opacity to your liking
The lower the opacity, the more of your background will shine through

21) File > Export > PNG Organizer
Settings:
Colors:
16.7 Million Colors (24 Bit) = Checked

Screenshot

Transparency:
Alpha channel transparency = Checked
Existing image or layer transparency = Checked

Screenshot

Gamma:
Gamma = 45455

Screenshot

Format:
Non-Interlaced = Checked

Screenshot

File name = bgfooter.png



Tile

22) Materials Palette
Change Foreground Color to Pattern
Settings:
Pattern = The one you created in Steps #11 - #15
Angle = 0, Scale = 100
Texture = Not checked

23) File > New
Settings:
Width = 600 Pixels
Height = 350

24) Flood Fill Tool
Left click to flood fill with Pattern

25) Paste > Paste As New Layer

26) Move Tool (M)
Move image to the top

27) Effects > 3D Effects > Drop Shadow
Settings:
Vertical & Horizontal = 3
Opacity = 50, Blur = 7.50
Color = Black or Foreground Color
Shadow on new layer = Not checked
(Or a setting of your liking. If you have used a misted image, you might wish to leave this step out)

28) Activate Bottom Layer

29) Rectangle Tool (G)
Settings:
Mode = Draw Rectangle
Show Nodes = Checked
Draw On Vector = Checked
Style Line = Diamond
Width = 3.00

Start at the bottom of your tube and about 15px from the left.

Draw to the right bottom corner, about 15px from right and bottom

30) Object > Align > Center in Canvas

31) Layers > Convert to Raster Layer
This is the Textbox

32) Move Tool (M)
Move Textbox to a position of your liking using the Up and Down keys on your keyboard.

33) Effects > 3D Effects > Drop Shadow
Settings:
Vertical & Horizontal = 1
Opacity = 50, Blur = 1.00
Color = Black
Shadow on new layer = Not checked
(Or a setting of your liking)

34) Effects > 3D Effects > Drop Shadow
Settings:
Vertical & Horizontal = -1 (Minus)

This is how mine looks (I have made the artist information bigger for this example, so that it is clearly visible).

screenshot

35) Layers > New Raster Layer

36) Layers > Arrange > Bring to Top

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

38) Layers > New Raster Layer

39) Add your watermark

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

41) Window > Duplicate

42) Close the file you just saved



Slicing

43) Layers > Merge > Merge Visible
(the duplicated image from Step #38)

44) In order to do the Slicing and later define the Paddings, you need to take the measurements for Top, Bottom, Left and Right

Find the location of the inside of the Textbox minus any Image, Drop Shadow and Cutout.
To show you where to look, I have turned on the PSP Magnifier (View > Magnifier) for the Screenshots.

Write your numbers down!
(You will need these values for Left and Right in Lesson 6 only)

Top = 175
Screenshot

Bottom = 332
Screenshot

Left = 17
Screenshot

Right = 582
Screenshot



divider

Optional:

Instead of using Custom Selections for the slicing, you can use the Image Slicer Tool.
Instructions are available here.



divider

45) Selection Tool > Custom selection
Settings:
Top = 0
Left = 0, Right = 600
Bottom = Your Top number plus 5
(mine is 175+5 = 180)

46) Edit > Copy

47) Edit > Paste As New Image

screenshot

48) File > Export > JPEG Optimizer
File name = top.jpg

49) Close image

50) Activate Tile
Selection Tool > Custom selection
Settings:
Top = Above Bottom value (mine is 180)
Bottom = Your Bottom number minus 5
(Mine is 332 - 5 = 327)

51) Edit > Copy

52) Edit > Paste As New Image

screenshot

53) File > Export > JPEG Optimizer
File name = middle.jpg

54) Close image

55) Activate Tile
Selection Tool > Custom selection
Settings:
Top = Above Bottom value (mine is 327)
Bottom = 350

56) Edit > Copy

57) Edit > Paste As New Image

screenshot

58) File > Export > JPEG Optimizer
File name = bottom.jpg

59) Close all images

We are going to need the bgLC.jpg, top.jpg, middle.jpg and bottom.jpg files for the next lesson!



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



Link to previous Lesson Lesson Plan Link to next Lesson