LET'S GET MOVING! {the tutorial for making animated gifs that i promised... and the first "moving pictures" link-up challenge}

{{{...a small UPDATE...}}}

NOTE: if you have photoshop version cs5 or later {i now have 5, but had version 2 when i first wrote this},

see bottom of this post for a quicker easier way of saving your file out as an animated .gif file.

you'll still need to follow several of the steps in the first portion of this tutorial... such as the layering steps and those that explain using the animation palette in photoshop. but the saving out steps are simpler and fewer, so again... see bottom of post for that change.

original post starts here...

okay... here we go. i've never done a tutorial with screen captures and such. so i hope this is easy to follow. this was so much work to put together, but i had SO much fun doing it! it's a gorgeous, warm day here, but i managed to get in some tutorial-composing time while the little squirt was napping. so...

as promised, here are instructions for making an animated GIF {or .gif file} in Photoshop, using your own photos. keep in mind, i use Photoshop CS2, but the instructions should be the same for any version you may have. i am not familiar with Photoshop Elements, but i've heard the animation capabilities are more limited with that software. if you are wanting to make a somewhat basic animation, it should still be flexible enough to use... and i would think the steps are similar.

well, without further ado...

actually, before i get into the technical specifics, here are some tips for setting up your shots that you will use in your animation. like i did for my dinosaur animation, it's a good idea to anchor your camera {using a tripod or by setting it on a sturdy surface} so that it does not move from shot to shot. that will give your animation a more realistic effect. sometimes, however, you may want your camera to move with you as you take the shots... to create a moving effect of not just the subject in the photos, but of the photographer {or viewer} too. in other words, if you want your viewer to have a sense of being fixed while the subject is moving, keep your camera fixed {which will make the moving subject more fluid}. but if you want the viewer to have a sense that they are moving as well as the subject in the photos, let the camera move around as you take the various shots for the animation.

to illustrate, see below...

this "flying bird mobile" animation i made is an example of when my camera {or myself} was not fixed in one place... i moved slightly between each shot. the subject {in this case, birds} was moving as well.

in this "flickering window blurry sunlight bokeh" animation, i and my camera were fixed so that the only movement in the animation is the subject {the wind-blown leaves that were creating ever-changing positions of filtered sunlight, and thus, ever-moving bokeh}.

•  •  •

okay...  so now for the technical stuff. these steps are based on the assumption that you have a working knowledge of how Photoshop layers work... and the Photoshop software in general. if you don't yet know layers, e-mail me, and i'd be happy to reply to try to help you better understand the functionality of layers.

JUST TO WARN YOU... this is long. but it's really VERY simple. don't let the length of my tutorial scare you off. some of these steps are explained in great detail, as i don't know the knowledge level of all who will read here, and i want to include as much as i can for any readers who might not be as familiar with Photoshop.

if you are feeling intimidated by making one of these for the first time, start small... make a short animation that has only three frames... or even just two {like an eye winking... one photo with the eyelid open and one with it shut}. as a general rule of thumb, the number of frames you want in your animation is the number of shots you want to take with your camera. so if you want a short simple animation, take three pictures. you will then combine those three images in photoshop by following these steps...

~one~

open the photo that you want to be your last frame in the animation... the one that you want to be seen at the end of the loop. {if you choose to have your animation continuously replaying, it won't technically be the last image, as all the images will keep playing on a loop, giving no apparent start or end. but you will be able to change the amount of time that each frame is seen in the animation, so you can give the illusion that it is the last frame by choosing a longer frame time for that last image... we'll get to that in a bit.}

anyway, in the case of my animation from yesterday, i wanted this shot to be the last frame in my animation...

so that is the image i opened first and used as my base for building the animation {or, the image that i built the other layers on top of}.

~two~

open all the other images that you want to use for the animation. {it may be easiest to open them one at a time, working backwards in the order you want them to appear.} just as you opened the image for the last frame first, you next want to open the photo that will be your second-to-last frame, etc.

with that next file open, select the entire image, or "Select All" {apple-A or alt-A} and "Copy" {apple-C or alt-C}. then, go back to your base file {the one you opened first} and "Paste" {apple-V or alt-V} that image you just made a copy of. this will now become a new layer in your original file, appearing in the layers palette right above the base layer.

keep doing this with each of the images you want to appear in your animation. each time you paste a new layer made from these other photo files onto your first {base} image, the new layer will get added to the top in the layers palette. each one automatically gets named by number {"Layer 1", "Layer 2"...} chronologically in the order you that paste them. but as each new layer appears at the top of the layers palette, your layer numbers will be ordered from the highest {or newest} at the top, down to the lowest {or oldest} at the bottom. the original file you opened {which is your last frame image} will be on what is called "Background" {your base layer}. 

as you see above, i have all four layers {or frames} now in the file. with all layers turned on, what you would see in the file's image window is the top-most layer {which i added last and which will show first when the animation is playing}.

you can change your "Background" base layer name to "Layer 0" if you want... just so it is less confusing and it matches the naming convention of the other layers. actually, you can change any layer name to whatever you want. but for simplicity, i would just rename the base layer {"Background"} to be like the other layer names. just keep this in mind... the higher the layer position, the higher the number in the name. the lower the layer number {and position}, the later the frame appears in the animation. {or, the higher the number and position of a layer, the sooner it appears in the animation.}

i know that sounds like a lot of explanation, but i wanted to drive that home, because it might seem like it makes more sense to choose the image that you want to appear first in your animation as you base image, and then go in that order from there. but if you do that, your animation will play in a backwards order. and it might seem counterintuitive for your earlier animation frames to have higher layer numbers. but if you start renaming all the layers, it can get confusing, especially if you have several. you could also move layers around... but again, it could get rather messy if you do that. i'm trying to limit the steps and keep it as simple as possible. so i think it's best to just let Photoshop number them as you add them and leave them as is.

okay... that's the longest part of the my tutorial. thanks for hanging in there! i promise... from here out, it will be more brief. bam, bam, bam. *wink*

~three~

after you have added all the images you want in your animation as layers onto your base image in reverse order, go to the "Window" menu and choose "Animation" to bring up the animation palette.

in the animation palette, click on the little arrow in the top right corner of the palette box and select "Make Frames From Layers".

this will automatically make a frame for each layer in your file, putting the frames in the same order from beginning to end as the layers are from top to bottom. so your top layer {with the highest number in its name} will be your first frame, and your lowest layer, both in number and position in the Layers palette {which should be your base layer and was originally called "Background"}, will be your last frame.

now that all your frames are added in the correct order, you can choose how much time you want to allocate to each one. click on the down-arrow that is on the lower right corner of each frame and choose how many seconds you want to assign it. 

if you want to assign a number that is not shown, choose "Other" and type in the amount you want. 

if you want all frames {or more than one frame} to have the same amount of view time, hold the shift key down and click each frame you want to assign a global amount to. then click that same arrow on any one of the frames you have selected and assign the time, which will take effect on all highlighted {or selected} frames. 

if you want the animation to appear as one continuous loop with no apparent beginning or end, assign the same amount of time to all frames. if you want the animation to have an obvious beginning or end {like what you see with dino making his apprehensive entrance below}, make the view time of your first and last frames a little longer. {here, i put a longer time on the second frame to create a pause... making it appear as if the dinosaur stopped to check and see if the coast is clear before he crosses. just one example of the ways you can get creative and have fun with it.} 

if you're not sure how much time to give your frames, just experiment. you can always change it. and you can keep testing your experimenting by pushing the play button in the animation palette. 

if it doesn't look right when you test it, keep experimenting.

~four~

when you have it the way you want it, you are ready to save the layered Photoshop .psd file as a .gif file. {don't forget to save your layered file as a .psd file first, though... so you have the original to go back to if you want to make changes.}

as shown in the screen capture above, click on the "File" menu and choose "Edit in ImageReady". this will open your layered file in ImageReady {a sub-application that is bundled with Photoshop that allows you to save images that are optimized, or ready, for the web}. it's important to export to .gif this way, rather than exporting out of Photoshop. i tried doing it right from the Photoshop Save-As menu, and i got undesirable results... it changed the quality of the image and things got all wacky. {of course, i may not have been doing it correctly, but i figure, if it works out of ImageReady, i'll stick with it.}

just like in Photoshop, you can change your image size in ImageReady to be the size you want it to appear in your blog post. 

i make all my images, animations or videos to be 640 pixels wide in my posts, so that they are the same width as my text column. but as you may have different specs for your blog page, you will want to change your image width accordingly.

keep in mind, all the steps i described prior to bringing the file into ImageReady {the steps done in Photoshop} can also be done in ImageReady, as you have all the same menus and palettes... just like you can change your image size in Photoshop first {before you bring it into ImageReady}. but i have found that this step sequence works best for me.

now that you have changed your image size to the desired amount for your post, you are ready to save it as a .gif file. click on the "File" menu and choose "Save Optimized As..." which will bring up the "Save Optimized As" window. 

there, you will name the file how you want it and choose the settings shown below. 

then, just click save.

voila!... you have an animated gif!

you can't upload .gif files into flickr, so adding it to your blog post will require that you upload the animation gif directly from the drive that you saved it to.

•  •  •

i know that was long! sorry 'bout that. i tend to be overly-thorough sometimes. but i do so with the thought that there might be some who are less familiar with the software than others and need more detailed explanation.

i hope it all makes sense. again, if something does not seem clear and you want further explanation, leave a comment with your question or e-mail me. i'd be happy to help you figure it out. also, if i gave some bad information inadvertently, please let me know so i can correct it. {thanks!}

okay... now for those of you who don't have photoshop... before i realized i could make a good-quality .gif file in photoshop, i was using this website to make mine. it's very simple and user-friendly, as all you have to do is upload the photos you want in your animation {in the order you want them to appear} and click "Create animation". but you are limited to ten frames and to a less-than-high-quality size/resolution for your animation. so you may want to invest in a software that allows you to make them yourself.

if you use Elements, here is a very basic set of instructions on how to make an animated gif. 

well, thank you for your patience and diligence if you read this whole tutorial. hopefully i got it posted in time for you to be able to read the whole thing AND still have time to watch the celebrity apprentice tonight. *wink*

tomorrow morning, i'll post a new "moving picture" with a button that you can grab to put in your post, as well as a button for you to link-up if you are feeling ambitious enough to join in the fun and make one too. i know mondays can be busy, so i'll leave it open all week for anyone to participate as they get to it. communities like that are fun... they are a great way to discover new blogs and let others discover yours. i've made many new friends via the link-up parties that i have participated in elsewhere. i hope you'll join in! even if not this week, there will be more opportunities, as i'll do it again each monday that follows.

i hope your weekend was great! 

now let's get those photos moving!

•  •  •

one small ***UPDATE*** ...thanks to lissa for her comment about the most recent version of Photoshop {CS5}. she wrote...

"i use Photoshop CS5 and it does not have ImageReady,  

but you can go to 'File' and choose 'Save for Web & Devices...' as gif."

good to know! {see? i told you my computer and software are archaic!} thank you, lissa! 

recipe for a vintage tree

...for the inquiring minds that want to know {eh-hem, meri}

the way i created the below image was this:

i took a plain old photo {not a very good original shot
as far as lighting and exposure and aperture and focus
and all that other technical stuff goes} and i opened it in photoshop.
then i added a levels layer and played with it a bit to get a better contrast.
{in my sooc shot, the sky was a pretty dark grey
so it did not make the tree stand out}.
with levels, i lightened the sky a bit and darkened the tree.

next, i added copied a florabella texutre of this vintage photo paper.
{you can get all ALL KINDS of free textures like this on flickr and elsewhere.}
i left that layer on "normal".
then above that, i duped the base layer {original photo}
and set it to "overlay" leaving the opacity at 100%.

above that layer, i added a gradient map layer {black and white},
a brightness/contrast layer, and a photo filter layer {sepia}...
all of which i left on "normal" at 100% opacity.
i fiddled with the brightness contrast layer until i got what i wanted,
and i set the sepia filter layer to 25% density.

there you have it!
=)

as promised, a text tip

this is for my friend, susan... and anyone else who was wondering.

i'm sorry it took me so long to get this posted... but as promised, i'm writing to share my technique of how i get text in my photos to appear as if it is behind an object{s } in the photo. this post includes a couple of examples of this technique that i have used in the past. the photo in my last post is also an example of this.

there are probably numerous ways to achieve this visually, and my way may not be the best, but it works well for me.

i will just give a brief overview under the assumption that those who are reading have a working knowledge of the adobe photoshop software, which is what i use to add text to my photos. if you don't have photoshop, this may not make any sense to you. and even if you do have it, but don't have a working knowledge of layers and text and some of the tools i will be talking about, then feel free to e-mail me or comment on this post requesting a more detailed explanation of the process. i would be happy to explain.

so... here goes. after i add a type layer with the text that i want on my photo, i fine-tune it so it is the exact font, size, color and shape i want and in the exact position that i want it to be. when i am quite certain i have it where and how i want it, i duplicate the layer, turn off the original layer, click on the duplicate layer and rasterize it. rasterizing a text layer is just a fancy term for converting it from being editable text to being pixels that will not be editable... at least not with a cursor and keyboard. you can still change the look of the text, but at that point, the letters are pixels, just like the base layer {original photo }.

the reason i do this is because when the text is still editiable text {or what's called vector }, you can not erase portions of letters... you can only delete whole letters, and this would make it difficult to make the text appear as if it is going behind something in the photo.

anyway, now that the text is converted to pixels, i can select my eraser tool and click/drag over the areas of text i want to erase... which would be the areas where i want the text to appear as though it is behind the object. for instance, in the photos above and below, i would erase the letters over these areas: the grassy hill and trees and the tree branch, respectively. in the magnolias photo that is in my post below, i erased over the area where the magnolias are so that the text appears to flow behind the tree. does this make sense?

i know there is a way to do this using photoshop paths, but i found this is the quickest and easiest way. i make my eraser brush size as small as i can, so that i can get in close to the edge of the object... i also zoom way in while doing this. this allows for more detailed manipulation and makes it more "realistic" and effective.

well, i hope this made sense and explains it well enough for you to figure out and try for yourself, should you be interested. if it did not make sense, like i said... feel free to let me know. and if you try it, let me know. i'd love to see what you do.

playing with curves

{click on image to see better}

this piano once sat {or is it stood?} in my parents' home. now it resides in my twin sister's living room. i just now realized, everyone in my family of seven except for my father played {or still plays} the piano in some fashion. it's not that my dad was not musical. he was. but he played the trumpet. still, he loved the piano and had great appreciation for those who could play. he loved jazz pianists, marian mcpartland and oscar peterson. his favorite classical pianist was vladimir horowitz. his all-time favorite pianist was my mom. and i think he was very proud of his five kids' playing, as well as his granddaughter's.

i have fond memories of my dad playing trumpet while my mom played the piano in our home or at church. we almost always had a piano in the houses i grew up in. sometimes an upright, sometimes a console, and sometimes baby grands like this one.

my mom did not have room for this one in her new place after my dad died. so my twin sister took it, and it is perfect for the large, open corner of her living room. i'm so glad she has it. the last couple of times i was there, she was playing it while i sat in the guest room on the laptop. it brought me back to a very long time ago when all seven of us were together and my siblings and i would fight for a chance to sit at the bench and push down those ivories to make music. i also think of the times that all seven of us gathered around the piano to sing––whether at christmas or to practice for the song we were to sing at church on sunday or just for fun. good, good times.

trust me––my family was not perfect. so very far from it. but i would say that the strongest unifying cord between us––beside our faith––was music. i believe it is why it is still such a great love for each of the five children as adults. and of course, it continues to flow from my mother who is still writing music and still playing the piano, even after her partner has gone.

although i love the shape and the curves in the body of a baby grand piano, the title of this post actually came from something else. the interesting look that i achieved with this photo was arrived at by opening it in photoshop and playing with the curves. instead of doing a normal s-curve, i curved it way outside the norm, and sort of "blew out" the background until i got a really neat look that i liked.

this was not something i set out to do. it's something i achieved by playing around. it does not work with just any image––i know because i tried. but it happened to work well with the background and foreground of this shot. maybe it's not for everyone's taste, but i liked what i saw.

did you grow up in a musical family? was there a central spot for you where this music took place? was there a specific instrument or instruments that were/are special to your family? and if not music, was there some other pastime that was a sort of glue? i'd love to hear some about it.

and now, to end this post––an inside joke for any of my family members that are reading this... "here we are by the piano."