Transparent GIF

 

VIDEO 1   

 

Open PSP.
By clicking on the folder icon, open your principal file.
Add a new folder. Name it: 5save_gif.
Select the 4ins_gif folder and open it.
Select the image 4a and open it.

Under Windows: Click Duplicate.
Close the image 4a by clicking on X.

Save the new image in the 5save_gif folder and
name it 5a.
Save

We will draw a banner on a transparent background.
Open a new image of 300 by 150 Pixels.
Raster Background, Transparency: notched.
OK

Save the image and name it: banner.
Save

We will reduce the size of the image 5a so that it can fit
in the banner.
Select the image : 5a
Select tool: Zoom.
A click on: Zoom
-
Repeat the Zoom
-  to arrive at 30 %.
Notice that this percentage is perfect for the banner.
Zoom : Actual Size.

Under Image: choose: Resize.
Resample using,  Checked Pixel Resize.
“Lock aspect ratio” and “Resize all layers“: checked.
Centimeters.   Pixels / Inch.
In this case : Percent Dimension : Width: 30%.
OK

Copy the image 5a and paste it, Paste As New Layer
in the image: banner.
Close image 5a by clicking on X.
In the warning window: Save changes to image? : no


We have in the Layers Palette:
Raster 1, which is transparent.
Raster 2, our image, centered.
Change the name of the Layer 2 and name it: image
OK

Zoom to 200 % to see the work well.

With Dropper tool:
A left click on the blue sky.
The foreground took this color.
A right click on another color.
The background took this color.
Alternate, right and left.

Open a Vector Layer and name it: ring
Notice the difference in the icon between a vector
layer and a raster layer.

In Materials : Close background.

With Tool Ellipse, Mode: Draw Circle,
Show Nodes and Create On Vector: Checked
Line style : simple, Width: 4 Anti-alias: Checked
Note: the Tool option is divided in two, when needed.

Drawing a circle.

It is a question of precision.
You will probably have to start over again to achieve perfection!
The circle must cover the edge of the image.
Like this: the thickness of our circle is 4, it must have the width
of 2 there on the image and of 2 which overlaps it.
The image should not go beyond the ring.

It is a difficult exercise to get acquainted with vector.

Note: the circle has 4 nodes. (Will study We them later ;))


Right click on the layer: ring. Convert to Raster layer.
Right click on the layer : ring. Merge: Merge Down.

With Move Tool move the image to the left.
Select the layer: Raster1 to make it active.

Ho! HO! To be continued!

 

 

 

VIDEO 2  

 

Open a new Vector layer and name it : rectangle. OK

In materials: Foreground: blue, Background: white.

With Rectangle Tool : Mode: Draw rectangle.
Show Nodes and Create On Vector: notched.
Straight : line,    Width: 4.00    anti-alias : notched.

Draw a rectangle.

A right click on the layer : rectangle.
Convert to Raster Layer.

With Move Tool, one can move each image.

Under Layer : Add a New Raster Layer and name it: text. OK

With Text Tool , click on the rectangle. Type a short text.
Important: Highlight the text to modify the configurations.

Swap colors and close the foreground.
Choose one Font of your choice. Increase or decrease the Size!
Try out Kerning.
Apply.
Selection : Select None

With Move Tool, center the text.

Under Effect: 3D Drop Shadow.
V: 2 H2 Opacity 30, Blur 3.00, Color: Black.
Shadow on new layer : Not notched.
OK

Save Image

Select the layer “text” with a right click and choose:
Merge: Merge Visible.

Zoom, Actual size.

 

Under View: Preview in Web browser.
Choose GIF . Background color: Gray, OK
Preview, Existing image or layer transparency: notched.
Use Wizard.
Existing : notched
Next
Here, Gray.
Next, Better image quality.
Next,  choose the best colors: notched.
Next,  Finish.

Visualize the GIF.
Close Window Preview.

Optimize the GIF on a color background. For example with the red color.

Under View: Preview in Web browser.
Choose GIF Background color: red  OK
Preview Existing, image or layer transparency: notched
Use Wizard.
Existing: notched
Next, What is the color of your background? red OK
Next, Better image quality.
Next, No, choose the best colors, notched.
Next, Finish.

The secret is this:
Always use Use Wizard And answer this question carefully!!!
(What is the color of your background?)

Surrounding a GIF, there remain semi-transparent pixels.
Thus, they will be supported by the selected background color.
Nothing is more important than saving in GIF format correctly!

Example: here, I save in GIF for a white background.

Under, File, Export, GIF
Use Wizard,  Existing: Notched
Next, What is the color of your background? White.
Next, Better image quality
Next, No, choose the best colors: notched
Next, Finish.

Save the GIF in 5save.gif folder  and name it : banner_gif

 

Here is the result.

Good

Bad

White optimized GIF,
for a background: white.  

GIF, optimized white,
on a red background.


Pink optimized GIF,
for a background: pink


GIF, optimized pynk,
on a green background.

Black optimized GIF,
for a background: black.

GIF, optimized white,
on a dark blue background.

Blue optimized GIF,
for a blue 
design

 

Gray optimized GIF 
for a  gray design

 

 

Index

Return to PSP

Next : Animation