Animated GIFS and drop shadows PHP
15
Animated Gifs and Drop Shadows www.prodigyview.com
-
Upload
prodigyview -
Category
Technology
-
view
3.379 -
download
0
description
Learn the how to create animated gifs using images and text. Also learn how to add a drop shadow to an image.
Transcript of Animated GIFS and drop shadows PHP
OverviewObjective
Learn the how to create animated gifs using images and text. Also learn how to add a drop shadow to an image.
Requirements
Understanding of Image Basics
Installed version of Imagick
Estimated Time
10 minutes
www.prodigyview.com
Follow Along With A Code Example
1. Download a copy of the example code at www.prodigyview.com/source.
2.Install the system in an environment you feel comfortable testing in.
3.Proceed to examples/avi/ImageAnimationsandShadows.php
http://www.prodigyview.com
Animated Gifs
Animated gifs are multiple images comprised in one gif file. To begin this tutorial, we are going to create multiple images of a circle at different degrees.
1. Create an array to store the gifs in 2.Create an ellipse with different end angles
3. Add the return location of the ellipses to the images arraywww.prodigyview.com
Gif ImagesIf you were to take a second and look at the images created, you should have 10 images in your file system that look something like below.
Creating The Animation
Those 10 image locations are in the array we created. Now we can pass that array into PVImage::animateImage and we will get a gif of a completing circle.
1. The array of images
2. The newly created gif
www.prodigyview.com
Text Gifs
We can create animated gifs not only with images, but with text also. The process is very similar, create an array with text at different index.
www.prodigyview.com
GIF Options
This time we are going to customize the gif creation process some by creating an array of options
www.prodigyview.com
Animate The TextThe array of string and the options are passed into PVImage::animateText() and we get an animated gif.
1. The array of text 2. Options
3. Location of the new gif
Drop ShadowCreating a drop shadow is pretty easy. All we need is an image to add the drop shadow too and then pass the location of that image into PVImage::drawDropShadow.1. The location of the image
2. Pass the image in3. Returns a path to the image
Drop ShadowIt’s not much, but we’ve manage to add a small drop shadow in the image.
A tiny drop shadowwww.prodigyview.com
Drop Shadow OptionsWe can do a little better with that drop shadow. Let’s add some options in to make the drop shadow a little more apparent.
1. Set the options to change to position of the drop shadow
2. Pass the options to create the drop shadow
Better Drop ShadowThere, that’s more of a drop shadow now. A little tweaking and the drop shadow position and color can be changed.
A better drop shadow
www.prodigyview.com
Review1. Create an animated gif with images using
PVImage::animateImage()
2. Create an animated gif with text using PVImage::animateText()
3. Create a drop shadow on an image using PVImage::drawDropShadow()
www.prodigyview.com
API ReferenceFor a better understanding of the image manipulation, check out the api at the two links below.
PVImage
www.prodigyview.com
More Tutorials
For more tutorials, please visit:
http://www.prodigyview.com/tutorials
