Fractured Iterations

Still continuing with some iterations of the FRACTURED animated poster.

To see where this started.

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.

reverese2

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.

 

Snap, Crackle, FRACTURE

DESIGN: Create an animated movie poster

unitfiveposter600_2

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.

From feedback received – a tweaked iteration in which the build is reversed.

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.

@cogdog screencast: https://www.screenr.com/Lcos (can’t get this to embed – any suggestions?)

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.

T
hanks 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.

posteranimateunit5

 

GIF Mania on Nightmare Alley

nightmare3xcf
Doing this again I would constrain to jus tthe head movement and cut the frames of the hands.

Nightmare Alley 

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.

tyrone
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.

one
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.
output_AOIcVd
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.

What strategies have you begun to make a habit?

Assignment: Say it Like The Peanut Butter   and is 3 STAR

Glitched the Favre & Carve Way

Glitch Art    Unit 3 AssignmentSTARSTAR

Superbowl Sunday is coming up and WIX is promoting it’s website tool with former NFL stars with the slogan “It’s that easy”.

output_2sCbtvA Wisconsin born girl – my blood runs green and gold. Brett Farve even with the controversy is still one of the greatest Packer players. The Farve and Carve  spoof website has already drawn lots of views. True to #ds106 it employs audio, video, visual, writing – a nice example in itself.

For this visual assignment I made an animated GIF that is Glitch.  VisualAssignments1239

Glitch art is a genre of art based around digital artifacts. A digital artifact is the unexpected result of when a technology breaks. An artifact could be sound of a CD skipping or pixilation on a highly compressed Youtube video. Glitch has been called the “art of the artifact” and stretching the intended use of a device or file.

This is done with the assistance of a coders tool from the glitch generator. Running the original picture thru the generator and downloading the different results.

I then imported them into gifmaker and rearranged to create the gif. It probably would have been good to add another untouched picture in the loop to give the viewer a little more time to see the image before it gets glitchy.

For some chuckles take a listen to the product pronunciation page in which audio clips are placed saying items “the Brett Way”. And as one looks at this set up  – it is a digital story with a lot of nice techniques to keep in mind for future creations of my own.

Thoughts?

It’s a Wonderful ds106 Life

This Say it Like Peanut the Butter assignment post 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.

sayitlikepb
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.

http---makeagif.com--media-1-19-2015-MVqrgc
#2 – short and looped – probably the best for the assignment. Other tools could provide a less jerky movement.
http---makeagif.com--media-1-19-2015-d7oxyM
#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.

Toutput_ThglMAhis 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.

css.php
%d bloggers like this: