Going back to some animated GIFfing as some creative pieces for project. It looks like the near future I will be creating different components that will fit together as one.
I went back to Photoshop to create the animated GIF. I started with my own photos: Cloud/Sky, 2 dog pics, hat, sunglasses, storefront. Each was manipulated and created into new images.
At first I had each part as a layer and it got overly confusing in trying to figure out which layer on or off and order. Duh! Finally dawned on me to create groups and then merge the groups. I ended up with 9 frames instead 27. I created the photos with text to insert by copying the image before it.
I also referred to another ds106 4Life YouTube tutorial by Michael Smith that helped with some of the details and location of features in Photoshop.
The tutorial was helpful in understanding the different choices when saving so that I could reduce the size of the file without changing my intent. Instructions were clear and very helpful
The next challenge was where to store animated GIFs to save on space in my WP media gallery and not use up storage. I decided to try my Google Photos and when accessing found that my account has been flipped to Photos in Google Drive! YEAH! So now I can get share links and embed codes for things I save in my Google Drive. One more storage well to use. Skor!
I want to try the cut out GIF, but haven’t figured out what I would use yet and how it will fit into my story thread. More things to create – I can see why this would be a good collaborative project and not independent. Lots on the list!
The Boys and 4LC Staff are available for some side jobs – we don’t have a drop dead deadline to meet like #noir106. Or open #ds106 collaboration opportunities considered too. If you have a need for some temp help – Fill out the contact form and we will get back to you.
From feedback and suggestions I reversed the build. I still want to go in next and change some of the text will be more group specific.
Also found the feature to create a gallery. Here is the Fractured Gallery starting with the first attempt to the most recent. Still working on how to title and make this smoother. Right now this feature is rather clunky – you have to click an image>go to a page> click on image to get it to run. Too much effort for a visitor. Working on it.
Lesson learned was saving final GIF in several sizes for different uses. When I first saved this it was huge (see at end of post). In order for it to run in the blog the file has to be inserted as a full size. Which then means if you want it to present nicely (design!) you need to have options of different size files to insure they will run, unlike a photo which you can resize within wordpress itself for different design considerations. How to video embedded below.
I chose this assignment for the following reasons:
4 stars to challenge and stretch
Theme of movies seemed in alignment with #noir106
Having to use PhotoShop for more than a quick image manipulation.
To be successful in figuring out PhotoShop animation at an entry level.
I first searched for NOIR movie posters. Several options came up including several “100 Best Noir Movie Posters”. I ended up on a site with posters from the 40’s-today. (I will put the link here when I find it in my history).
There were several posters that text, color, placement- the design elements this unit is focusing on, were prominent. But they were not great candidates for pushing my current animation skill level or too complex. I was looking for something that would give me a chance to learn animation, but also give the chance to apply principles of design.
My next step was to narrow a choice down to interest and forms and shapes that would challenge me, yet be proper for using in photoshop animation. For this first attempt I wanted the pieces of the poster to build the and not try to create movement within an image like a leg kicking or gun firing. That attempt will be the next creation. I decided to do “Fractured”. It is actually a newer movie, but does come up as Noir. I will gladly wait for comments to tell me how it is not Noir. Not taking a full noir slant to ds106 I do have license to be as Bond has stated – a heretic. 🙂
Using the resource links from the UMW instructors for #noir106 I came across a screencast created by Alan Levine from a poster for the movie Bridge over the River Kwai. It was helpful in pointing out Photoshop had an animation feature and that it built upon the concepts of layers. Seems that Shrek’s reference to life is better as an onion – it has lots of layers is a key in this creation process for digital media.
I began with making the segments. Lots of do overs, and using blurs, cuts, smudges. With the pieces completed, it was time to find the animation. The screen cast was an earlier version of Photoshop so a few queries on Google and I found where the location in my version. Some time spent in things being grayed out, etc. Finally got the slides and timing to an acceptable point. It was then time to Google how to save as a gif.
How DESIGN was a part of this assignment
Design considerations were a big part in this assignment. While the poster already designed for effect, taking it apart to animate also had design considerations.
What order should pieces become visible to show design and story?
At what speed and duration for each piece?
How much of the original picture should stay static?
Are there pieces that should be cut?
One part I did have was the tag line coming before the title of the movie. Tendency is for one to read or view left to right for comprehension, but for visual interest how would the pieces coming in take the viewer’s eye from one place to another?
I began with the left upper piece – to start as this would be what the eye and brain would expect. I then jumped to the right to pull the eye across and then top center to join. This gives the viewer activity, yet in a flow. The static background becomes the canvas. Once 3 top pieces are in place the form or the man becomes visible and the viewer knows it is a person – but not who until the end.
At this point I was bringing in the tag line. Again following convention of reading top to bottom. When finished it just didn’t feel right or flow. It looked okay and ran – but design wise it wasn’t at the mark yet.
Back to the order and animation. I had to start over with the timeline because I couldn’t figure out how to put the correct stops in again after changing a layer in the original. Not a big deal – I was getting faster at doing it and it reinforced what the steps were so that I can do this again.
This time I switched up the middle sequence and brought the 3 parts of the title in then the tagline. So much better. It emphasized the title and made more sense to me now. I liked the flow and order.
Looking at each part as an object and not content provided the mindset needed to do this as design.
Settings complete. Saved and it works when I open it in a browser.
My next try at this will be to add position – flying in or out etc. as well as some actual builds of the visuals coming in view thru opacity levels rather than as full picture at once. With this poster, the abruptness of entry I thought was appropriate to the feeling of fracture.
Assignment Prompt: http://assignments.ds106.us/assignments/animated-movie-posters/ This assignment was rated 4 stars.
Thanks to @mdvfunes, @cogdog, @phb256, for help on getting the graphic to run. The solution is to insert as a Full file not smaller in word.press. Which then is the new lesson to save and create the gif in a size that is right for posting within a blog or other space. I will go back to the file and save again in a smaller canvas.
Right in the ds106 handbook!!!
Thanks to the ds106 community. Feedback and critical friend comments ease frustration and help growth at exponential rates!
Way too big for good use in publishing here – this was the first save. Also note: The following had a white band across the background layer as a fix for the wording. Design wise it detracted. So more tweaking and corrections were made to get to the version at the beginning of this post.
The animated GIF process needed more practice for me to begin to get a better feel for how it can create message and meaning. The first one I did in Unit 2 was accidental in that I didn’t do much more than click, fumble and go “ahhh – okay!”. So with this next unit focusing on visual I am opting for a few of the assignments and paths from #noir106 and the Burtis prompt to create a Noir animated gif, along with my open course challenges. Finding some Noir films on YouTube, I settled on Nightmare Alley with Tyrone Powers. Mostly because I new his name and that he was considered a hunk of a man for the time.
I chose this section because I just liked the way his eyes bug out and he goes from talky to serious.
This time around the download software didn’t work – so I needed to find a new app that was free. It worked! From there I used the Jim Groom tutorial as a guide and used the Streamclip editor and Gimp. I LOVE GIMP! While I do have Photoshop, it keeps needing upgrades, has far too many features it will take me a life time to explore and I believe in open source and sharing as a business and cultural premise. So using GIMP and finding it as developed as it is was wonderful.
I feel more accomplished after these 4 animated GIFs and their outcomes and ready to move on to another visual assignment task. I am most excited about moving forward with my own content and applying the methods.
Trying to capture just the blinking – but with this one still couldn’t figure out how to retain the speed I set it to before exporting.This one I pulled what I had in the other tools and then went to the gifmaker app and was able to slow down the speed, but not crop the picture.
But do you want to know the real eye opener? This creates a really loaded up desktop!
I need to establish some habits for creating folders and spaces for saving, uploading, etc. instead of using my desktop as I usually do. This process creates tons of files! And for someone who tends to save rather than toss – I won’t be successful if I keep trashing my desktop and then lasso it all and put it in a folder called “To Be Filed”. Some of the learning in this #ds106 #4life experience is to learn strategies for efficiency and organization so that time is spent creating – not following the elephants in the parade. The tagging, the blog structures, categories – all help as habits so that focus is on creation. Thanks #ds106er’s for sharing.
This Say it Like Peanut the Butter assignmentpost will have a few iterations because now that I have gotten this far….. I WANT TO BE ABLE TO CREATE A REALLY COOL ONE WITH A MESSAGE!
As part of Unit 2 in ds106, the challenge assignment is to create an animated gif from a favorite or unfavorite movie. The bigger challenge is to find resources to help you learn how to create one. The assignment was created 4 years ago and it seems things have gotten a whole lot easier to pull out a clip and make a short animated gif. So easy in fact that I am not sure I learned too much on the first attempt other than I can cut down on a lot of time by using some of the tools available.
Attempt 1 – too long
The movie I selected was “It’s a Wonderful Life”. This scene is where George realizes he does exist because his mouth is bleeding. Other scenes considered were him running up the stairs and the finial coming off, and the end where the bell rings for Clarence.
#2 – short and looped – probably the best for the assignment. Other tools could provide a less jerky movement.#3 I like the tongue starting the movement – but still a frame or two too soon.
I have to admit – it took me a while to start to do this part of the unit because all I could think of was the early days of web page design and how blinking pages were the rage and then everyone settled down and they became the “what not to do” for good design. I think the animated gifs can be appropriate and useful communication in digital stories if done with purpose and intent. So as with most creation and art – if it has purpose and meaning it will be good and of value. That being said – the exploratory gifs that come out of this assignment within the viewpoint of seeing if you can find resource, help, and the new ideas for your own learning and then share with others on the same journey is right on target and wonderful to see.
I have seen some pretty killer animated gifs in the ds106 Google+ community and some other places linked from ds106 so this first attempt is more the proof of looking for resources and trying them out to see if something can be created and to research and read about what animated gifs are and why to use them.
I found Jim Groom’s tutorial page and started to download the tools. In doing so the gif creator just showed up and made a gif for me when I thought I was downloading the video. ! I wasn’t able to eliminate frames. I would have liked to have taken about the first 7 out so that the hand motion was just the animation. When putzing with some duplicates – the gif would run once but not loop, I have my version 1.0 done so far.
This gif is the “cheater”, easy way out. but it really did spark the creative juices and desire to master the finer details. Using other tools to make it smoother, make it my own iteration so it doesn’t have a tool watermark, and some content of meaning to me. I want to get to Gimp and to Photoshop to try the creation. So I will continue to work on this assignment and create another more extensive gif. Stay tuned!
For this gif I used Makeagif.com and basically just had to put in a start time and choose 1-5 seconds and click a button. I came across this from downloading the Fastest youTube Downloader app. The movie didn’t download -but the make a gif button showed up – from there it was all dumb luck. It also has a Chrome plugin so that you can make a gif on the fly.
This is actually my first attempt (or warm up attempt) before finding a movie. If using my own photos, I would improve by using a tripod so that the background and perspective stayed aligned. He was a good sport! This was a user end tool as well – Gif Maker – upload your pics, rearrange and click the button. It doesn’t allow for tweaking or details – more wysiwyg. These tools are great for the fast and dirty kinds of things in everyday work or in creating concept drafts. Learning the finer skills is desirable for a more complete end product or combing several media together.
his is actually my first attempt (or warm up attempt) before finding a movie. If using my own photos, I would improve by using a tripod so that the background and perspective stayed aligned. He was a good sport! This was a user end tool as well – 