Watch out for the Trunk! #giffight

http://konarheim.tumblr.com/post/137264082420/duhtakes-me-a-while-forgot-that-the-original


This was just calling out too much fun! But by the time I got to it – so many had created and done such awesome solutions that it was intimidating to attempt and hard to think of something that might be different. BUT that is giving up and remembering this is fun and play and competition is with myself fueled by the ideas and work of others.

I am heavy into baby shower planning and creating for my daughter and first grandchild. Elephants are the theme around our parts now – so after creating invitations and book labels I moved on to this GIF, but continued the elephant theme.

I found a short clip, pulled it into PS and it came out to 327 frames. I scanned for a part that had movement and stayed as much in one spot in the frame as possible. Got down to 17 frames. Cut the cowpoke out of the image for the gif fight and put him on the elephant in different angles. I was able to get rid of 10 more frames as the movements were too small to make a difference. Added a horizon to the top of the frames after things were set so that it was the same and went into each frame. Final was to make each frame B&W and play with the timings.

This was fun. And also raises questions about Westerns on the plains of Africa???

The Trail of the making of Riding #Western106 Gif

Getting back into the rhythm of ds106 thru #western 106. I created a GIF as sort of a promo and then remembered – “document the process for self and others”  I am a little rusty- falling into some unfavorable avoidance lately – but here we go in trying to get back to better practice habits.

The ability to embed and respond with GIFs across social media and publishing platforms has delivered an abundance of tools to quickly churn out a GIF through generators such as imgur.com or giphy.com and many more. (Google it )

My wife tells me on Christmas I’m gonna be a daddy.

You can get some really great things from video and it is something to get excited about! It’s fun! And you can spend endless hours watching videos and searching for the right frames or looking at work other have done. I have handouts from first trainings I did on web design and html. One of the “no” things was anything blinking of moving – it was considered bad design. And yes it was at 72 pixels and clip art or light bulb “under construction” text. Things have gotten a lot slicker and its almost mandatory to have moving parts to capture interest. There are still levels of taste and best use. I do hate going to a page and things pop up every time I move my mouse and start playing…but a good GIF you can just watch over and over again.  So the quest is to create the one that does that for viewers.

But there is are still some highly creative and solid reasons to create animated GIF art from still pictures or non-video. When you need a GIF to communicate a thought, idea, a message and not just a witty response or comment it is time to get down to building. DS106 has many GIF artists of all levels of skill and the cool thing is how this community learns and builds and moves to next levels by working from each others work as well as responding with new creations.

A real idea bright shiny object to chase is ds106 GIF TV set up by @johnjohnston. You can watch for hours all the created GIFs and get ideas as well as levels to to try to achieve.

ds106tv http://johnjohnston.info/ds106giftv/

Creating a Simple GIF from Still Pictures with Static Background

redrock1secbanner

Disclaimer: I have tried to be as close to each detail as possible -but in creating there are lots of re-dos and fits and starts that one just has to work thru in their own way. Hopefully I have given enough to help someone along. Things get a little fuzzy as the process goes on -but hope not too confusing.

Tool used was PhotoShop Creative Cloud. I have used GIMP as well and most of the steps could be done in the open source tool but how to get to certain functions will be PS specific in this write up. I do have the luxury of having PhotoShop obtained as retirement gifts so use it.

The #western106 GIF is a basic creation was made from 5 layers and the animation is 3 frames.
3 images to move, and a background and a text layer which become merged.

Steps:

  1. silhouette of 3 riding cowboys opened as NEW in PS.
  2. Size was set to 400 pixels to start at a reasonable size for a GIF at the end of creation to avoid some of the inevitable tweaking for size condensing etc.
  3. The original picture had a solid white background. I only wanted the black silhouettes of the riders.
  4. Using the Magic Wand Tool (fourth down from the top of the tool tray use control to switch between quick select and magic wand) I selected white background areas and hit delete. You will need to “unlock” the layer to delete background. TIP – I usually go up to Layer>Duplicate Layer so that I have the original layer just in case I overdo, delete too much or decide later in a process that I need to add another layer of a differently tweaked original. You can use Edit>step backwards – but sometimes that is just not enough. I continue one section at a time until all of the white background is gone. TIP – If the image seems too small to work with or the areas seem tight go to the bottom of your window and increase the size to 300% or more. Return down to a % that fits in the window when you are done.
  5. After the background was deleted. I selected the remaining image with the Quick Selection tool – same place as magic wand -but switch it back by using control.  I then positioned the image in the frame where I thought it was going to look best.
  6. Go to Layer>duplicate layer or keyboard Command J. Do this 4 times. You can name the layers anyway that works with your thought processes.
  7. I started with layer 1. Using the Rectangular Marquee Tool, I selected around the image.
  8. With the second layer also in view (turn layers on with the eyeball icon left of the layer name in the layer panel on the right of the screen) Go to EDIT>Transform>Rotate.
  9. Hold the shift key while rotating the image left or right. This is also the step in which if you want to change perspective, scale, skew etc.
  10. Click on the check mark in the upper bar of your window to set in place.
  11. You can now turn the eyeball off and on from either layer and see how it moves. Adjust as necessary.
  12. Move to layer two and rotate and position.
  13. Move to layer three and rotate and position.
  14. You now have your moving image and action and will go forward in creating your static background.
  15. Before you bring in your background – go to WINDOW>Timeline
  16. When the Timeline Panel opens there is a menu in the upper right corner of the small window.
  17. Choose Make Frames From Layers.
  18. Go back to Menu and make sure New Layers Visible in All Frames is checked. I also check Create New Layer for Each New Frame.
  19. Locate the image you want to use for your background. It helps to have it as close to the same size as you can. With this project I used a download from my sister-in-laws Flickr page at the medium size – so it was just slightly bigger than the 400pixel square. I knew I was going to play with size and point of view to get the right amount of sky, foreground and horizon in the spot I wanted.
  20. TIP: Save yourself lots of futzing. While it seems excessive it is easier in the end. Open a new project and set the canvas to the same size as your GIF – do the steps below and all your adding of text etc. and tweaking and merge it down to one layer. Copy the layer and then paste it into your GIF project. OR do a SAVE AS and you have a duplicate project – create your background using similar steps below and then export out as a quick JPEG, open, copy and paste into your original project.
  21. To create your background – There are several ways to bring the picture in -the easiest have found is that I open the photo on my machine select all>copy. I then go to PS click in the window and PASTE. A new layer is created automatically. Since it is the background move the layer to the bottom of your Layer list.
  22. In this project I add text so there was another futzing around to do. You could eliminate this futzing if you created your background exactly as you wanted it and then brought it in – Which I strongly encourage. Using the Text Tool (The “T” in the tool bar) and then click on your background and insert a text box.   I edited my text worked with the font, size and color and then also used the Word Art Feature to make it a WAVE form to lay over the mountains in a better perspective so it didn’t look pasted over the top. When I had this the way I wanted I selected the background and the text layer. Went to Layer>Merge Layers. It then becomes one. 
  23. After pasting your background into your project (remember it is now a new layer and should be put at the bottom of the layer list) Adjust scale and position to where you want it. You can click on one of the other layers to see where things fall. you are only actively working in the layer you have selected (background)
  24. Click the check mark and set in place.
  25. You will see the background now added to the each frame in the timeline – You did it!
  26. Now just set your timings for each frame the default is no delay – very fast. This takes lots of tries depending on your creative make up and decision making skills – me I like to see lots of options and tend to try many and save multiple versions until I find one that really sticks with me.
  27. Set the loop to FOREVER. Use the play and stop buttons to view.
  28. Go to File>Export> Save for Web (Legacy) and work with the file size if needed by adjusting colors etc.
  29. Save and then upload to wherever you are going to view or open via the file menu of your browser.

THEN if you want to get really spiffy – add sound! @mdvfunes added sound to this GIF–  it adds a whole other realm to the outcome-  love it. Read how to add sound from @johnjohnston on his blog.

Here is the PSD File if you want to see it or use it. You can also download a GIF and open it in PS or GIMP and see layers that were created. This helps me in dissecting and trying to figure out how someone else may have created something. Sometimes the most fancy really are the simple ones and others – NO WAY can I figure them out even with dissecting! But I will keep trying. 🙂

LINKS I have used to GIF learn (no particular order of preference):

GIMP

Inspiration Links:

  1. http://gifitup2015.tumblr.com/
  2. http://gifadog.tumblr.com/
  3. http://jjgifs.tumblr.com/
  4. http://mbransons.com/
  5. http://iamtalkytina.com/category/ds106/assignments/animated-gif/august-2013-gif-challenge/
  6. http://rockylouproductions.com/blog_wp/
  7. @RonaldL who posts in the G+ Community and Twitter

 

Loose Toulouse….

Loose ends getting tied up – well at least some in this game of life.

When I started going through the archives for the GIFItUp2015 I had bookmarked this Toulouse Lautrec poster as a possible subject to GIF. I have always liked the style of Lautrec and I could see the confetti flying. I just wasn’t sure how to do it. I need to remember that GIFs allow for the eye and brain to fill in the “in-between” and every hair of movement isn’t necessary. The mind is a wonderful and amazing thing.

I thought Puppet warp would be the way to go – as now that I tried it I think I should use it for everything. WRONG. After many attempts it turned out to get this to work I needed to scale back and get simple. A frame with eliminating some of the hands, and then adding the confetti and words in a waterfall motion down the page. I used the pencil tool and the dry brush setting for the confetti sections.

A little more care could have gone into removing the center for work. I used the clone tool -but didn’t attend to all the gradations in color and one frame is quite a bit lighter and sort of glitches out. My goal was to see the confetti fly and finish a vision to an outcome. I will save it for another day and tweak when the time is right.

The other attempts of GIFs for the challenge are here.

Giffing it….

The GIFitUP2015 event has started and many in #4life and #ds106 folks are working on GIFs for submission.

WOW! the submissions are fantastic and very intimidating. But at the same time, it does promote creations. I am not even in the farm league in this thing. I started to work on some things but gave up. But true to the ds106 world others were having ups and downs and the connections allowed for feeling good and being inspired – to sweat through the frustrations and finish something. The power of community and peer pressure to try your best. Shows what being connected can do for someone – keeps you going when the going gets tough.

@mdvfunes shared her ups and downs – but also support. By responding to her trials – she found a way to suggest to me – a true give and take and give. Mariana finished a wonderful GIF. RonaldL and JohnJohnston have been active and by sharing their work they opened the doors and windows to continue. The power of just a short comment is so powerful. It really shows the wonderfulness of simple courtesy and good will can move mountains.

By sharing my drafts suggestions made that took away the heavy frustration of not being able to make my visions reality. But the cool part is sharing the visions -others got it and saw it too and then offered some tangents to follow.

The result was I got to a point of finishing a submission  – although very rudimentary – and a good baseline for improving over the year and doing better next year.

My attempts were to create the hats in a ferris wheel motion – have not accomplished yet. This one is just in the files as practice.

The second was to have the icons play with a balloon. First attempt ….

and the result after being introduced to Puppet Warp and attempting FireWorks…. the submission:

http://gifitup2015.tumblr.com/post/132355357358/gif-it-up-2015-entry-from

I also did a couple of birthday GIFS on the fly this week….short and not polished – but to celebrate.

So a GIFFY week of practice!

and I still have a vision of a Toulouse Lautrec poster floating in glitter….it may happen. :-

Processes:

Did not do well at tracking development. Lots of erasing, cutting merging layers at first. Then Puppet warp to make the hands move in the balloon gif –  I used this tutorial.

I used the grid lines in the Hats to keep the images in the same place in each frame.

For the most part – the standard steps that suggested tutorials cover until I got to puppet warp.

Fireworks – all by the seat of my pants. States are a math problem for me and the preview frames seemed to go slower than they really came out when exported. But I did like how FW smooths things out. Too bad it is a historical app now.

An additional attempt with a Toulouse LaTrec poster….

http://gifitup2015.tumblr.com/post/132382388773/gif-it-up-2015-entry-by-kathy-onarheim-of

Not a Hulk- but a Hunk! Giffing #6 B Cing U

Working on GIFs again during this week of self directed learning.

I have been wanting to figure out how to put two layers of action going on and sound. I also was very impressed with the Hulk GIF by Jim Groom and wanted to figure out how to do one similar – but not quite into the comic book genre yet.

I struggled with the two different movements by thinking of them as two different movements. Working with the layers I figured out that I would need to blend the two actions into one to create not blend them after creating.

I captured the b-cing-u footage from The Prisoner with MPEG Steamship and made a GIF. Capturing left it a little dark so for the active frames I adjusted the Brightness/Contrast throught the Auto option so  that they changed as needed rather than trying to set each one at the same ratios. Same ratios would have been jumping instead of fluid. This time Auto was a good choice.

I captured a still of  Number 6 in his handsome pose.

I then split the handsome No. 6 and ended up with a right and a left.

I create a background with text  – sorta of a poster or book cover fashion using the Village font.

The b-cing-u gif I cut down to 12 frames.

It was then creating a layer for each with the split handsome portrait in different spacing to look like it was cut in half and opening.

I then reversed the process to have it look like it was closing. Having the first ones done, I was able to have them in the background and recreate the handsome face closing with the new b-cing-u gif background. Happened upon that by accident  – a good accident!

I set the timing so the full version was longer to loop from end to beginning. I also lengthened the time of the gesture of the B at the forehead to be longer. All other frames were set a the same rate.

Lots of repetition – but worked.

I haven’t got around to figuring out masks yet and not sure if they could have been applied to this rendition.

My next challenge is to add sound to the GIF. another next is to make the image behind to be something different……….

I again used Photoshop because as long as it is paid for and I have it – I might as well use it! I also want to drop it into Fireworks and see if that produces something different.

 

css.php
%d bloggers like this: