Snap, Crackle, FRACTURE

DESIGN: Create an animated movie poster

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.

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.