Break On Through To The Other Side

May 5, 2007 at 5:21 pm (How to make a gif animation) (, , , , , , , , , , , )

The weeks of school are passing at lightning speed. My days are spent wedging technical data into the crevices of my brain. Technical data and theory, data and technical theory, ad infinitum, ad nauseum. The constant repetition has caused me to somehow get stuck in a ‘left brain’ rut. I can’t seem to shift gears back to ‘right brain’ mode in order to regain access to my creative thinking. It’s as though a valve has been choked off and I find myself trapped in a compartment filled with data, calculations, tags, hyperlinks, greyscale values, channels and other odd assortments, all rattling around inside my skull. I can’t locate the switch that will enable me to cross back over to my creative side. This strange phenomenon comes at the worst possible time. I have an impending deadline for a series of digital illustrations I am working on for a children’s book. I must figure out a way to shift mental gears, to cross from left and back again to right with ease. At the moment it feels as though I have a bad case of writer’s block, or more aptly, illustrator’s block. Agggghhhhh! Must find doorway! Must locate gear box! Must claw my way back to right cerebellum. Must break on through to the other side!

Last night I studied for several hours, and again this morning. My brain was filled to the brim with code, tags, hypertext, links, and HTML. I decided to take a much needed break. I opened Photoshop and began playing with distortions of butterfly wings, which I saved on a background set to the same color as this blog template’s background. I then assembled 4 images as a gif animation, which can be done in Image Ready, but I used an old standby gif animation software from Ulead (Ulead Gif Animator). I’m not certain if WordPress allows animated gifs to be viewed in the body of a blog. I’m about to find out …

Holy cryptonite! It worked! I’ve finally succeeded in clawing my way back to the other side! My creative brain regained! This warrants a celebration, or at least a better explanation of how I made this gif animation:

  • Open an image of a butterfly in Photoshop.
  • Extract one wing, using either a Mask or your preferred selection tool. More on Masking
  • Fill the background layer with the same color as the background from your Blog. Do this by taking a look at the CSS code for the WordPress template document to find out the exact numerical value of the color. (All that technical jargon from class is beginning to sink into my ‘left brain’). 🙂
  • Duplicate the extracted Wing Layer 3 times.
  • Using Edit/Transform/Distort, begin distorting the wing to make it appear as though it is beginning to close. Make sure to move the ‘anchor point’ of the distortion box to the inner-center of the wing. This will become the central pivot point from which the wings open and close.
  • Do the same with the other duplicated wing layers, but with each layer distort the wing angle a little further on each subsequent layer, in order to make it appear as though each wing layer is closing more tightly. Be sure to set the ‘anchor point’ on each subsequent layer to exact point you chose for the first distorted layer.
  • Link all the wing layers and drag to a ‘New Layer Set’ folder, which can be found at the bottom of the Layers Palette
  • Duplicate this entire layer set folder.
  • With the entire copied layer set chosen (highlighted) in the Layers Palette, choose Edit/Transform/Flip Horizontal. Then continue using the Transform feature, rotating the second set of wings into place so that they exactly meet at the center of first set of wings, in order for it to appear as though the butterfly is now ‘whole’.
  • Add a new layer just above the background layer. With a small brush, paint antennae. Add a subtle drop shadow.
  • Now add drop shadows to all the Wing layers in the original layer set. Then click and drag these drop shadows, which will copy them onto the corresponding Wings in the duplicated layer set. You will notice that the drop shadows in the copied set need to be dragged to a new location in order for them to appear convincing. Do this by double clicking on the drop shadow in the Layers Palette, when the Drop Shadow Option Box appears, Turn OFF “Use Global Light” and drag the shadow with your mouse to the desired locations.
  • In both layer sets, on the Layers Palette, turn on the eyeball (make visible) the background layer, plus the matching wings in both sets of the layers palette. Turn on only one set of matching pairs at a time. Begin to save these images into the .jpg format, naming them some sequence like Wing1, Wing2, etc. Do this for each set of wings against the background layer.
  • Now you can compile all 4 images into your preferred gif animation software, set the timing for the opening and closing of the wings, and save to a .gif format. Voila!

Visit my main website: The Graphic Groove
I also have many new digital illustrations on Flickr

Return To Gale’s Home Page


  1. Val Gregory said,

    I’m glad you were able to access your creativity again. Gorgeous butterfly.

  2. lollicherries said,

    Beautiful website. I followed the links. I like the tutorials. Thank you for sharing your knowledge with others.


  3. becky cooper said,

    it is so comforting to hear someone else say that all the “learning” graphics can actually cause the brain to stop the creative process. I thought it was just me!

  4. weGIF said,

    congratulations Gale! you’ve done a cool job… i am also into GIF animation and i really like your work… if it is okay i can feature it up on
    Gif Photo Animation

  5. DW said,

    Wonderful job! Well done.
    And thanks for the tutorial.
    I wonder if you’d mind if I post the image and the link to your post at my Blog.


  6. Sera Khan said,


  7. David SmithDragonRider said,

    I am an Administrator on a Forum Site and I just posted the link for this on our Forum and on our Forums FaceBook Page! The Staff and Membership of say “Thank you very much!”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: