Sketchy Dr. Groom on Assignment

Learning By Design

Turn ideas into pictures!

Visualize a blog post, TED Talk, Class lecture or even dense text from a book- through drawing. Use the pictures to symbolically represent & concretize abstract concepts, and to make connections between ideas. Try to use words sparingly and only to reinforce your imagery.

Doodle it in your notebook, use your tablet, or scribble it on the back of a napkin. Just be sure to digitize it and then blog about the process, including citing where your inspiration came from.

I decided to follow another ds106er path (that”s you @spencer_cscott) and take an assignment and tweak and create it into an assignment of my own. Learning by Design is creating a doodle or sketch of a complex topic and making it into a visual with design principles.

I have been interested in sketchnoting and been reading the work of Sylvia Duckworth. (Sketchnotes for Beginners) And for years now RSA style videos have fascinated and tempted me to discover how to create. The next thing that came into play was all the mystery around Dr. Groom this week. It is hard to not want to jump in as you are doing the assignments. The adventure actually creates a thread of connectedness in the community. (Probably designed that way don’tcha think!). As we each explore digital media and how to use it, a common thread helps as we approach our own content in learning new ways of creating and expression.

PROCESS

After reading about sketchnoting and downloading a few apps for my iPad. I settled on Paper 53. I liked the way it handled and the quality of the sketch. It makes scribbles, and bumps and jumps, look like a style and intended.

At first I thought I would use video and make it more of an RSA kind of presentation. I used an IPEVO document camera which captured my sketching in video format. It is cool and it worked and I will definitely go back to it for another assignment or creation. For my intent here, the distraction of my hand drawing (it looked HUGE) was not an example of thinking of design.

I refocused on the topic of the week – design and then decided to use photo shop instead, but add the audio and animation features as well. So here is the tweak – I did a design, of still images with audio to produce a video. To keep it manageable and an assignment not a project – I used only a part of the weekly videos to sketchnote. The reasons were that this was not to actually create a product of the content and it will be old in another few days. I wanted to understand the steps and process and create something short enough for feedback from others.

I downloaded the Groom Week 4 Video and the Intro to Week 5 video to extract audio. This was a good follow-up to week 4 and pushed me to stay with Audacity and audio editing. Another plus to continue with audio from last week and build.

I worked on the audio portions that I wanted to include in my story. From there I needed to now listen and do my sketchnote of those portions. I used the Paper 53 and created a full image just as the original assignment had suggested.

Sketchnote

After saving as a JPEG I moved to Photoshop and opened the image.

The next steps:

  1. Create 22 duplicate images and name each in sequence of sketchnote graphic and context.
  2. Create a first layer of a white background to act as the whiteboard.
  3. Start with the first of the sequence and erase all but the one image.
  4. Continue with the next 21 layers.
  5. Export from Audacity and then Import the edited mp3 into Photoshop
  6. Use the Timeline feature of PS and set all images at END of audio clip. I needed the story to stay within the audio so I worked backwards first to prevent running out of room at the end and having to continuously go back and move all the layers around.
  7. Added transitions to layers when needed.
  8. Locked position on each so that they would float in without jumping.
  9. Created and added a last image for closure and identification, then added it to the timeline.
  10. When satisfied with placements and flow I went to RENDER VIDEO and exported as mp4.

So sounds not too bad. BUT – I had to do this more than once – I stopped counting after #3. The first time I started on my desktop machine. As evening rolled around, I decided to switch to my laptop and at least be in the same room as my family and a little more comfortable. By this time it was mostly just the grunt work of moving layers a fraction of a space etc. Thought all was going great – it played in preview just great! I rendered and when I opened it NO AUDIO.

Okay – go back and try again. But then I found that after rendering and saving – the timeline turns into something flat and you really can’t go in and change much. So I had to get rid of the timeline and replace all the layers before rendering again.

Done –  rendered – NOW IT HAS AUDIO BUT IMAGES ARE TWISTED! I needed to redo again! And this time I stressed out my laptop and it ran out of memory and froze up! Now I had to do machine maintenance and repair. Time for bed!

The next morning – I just went right to my desktop and worked there. I had saved some copies- but basically they had too many edits in them and it was faster to begin again. I had this down now – back to the Next steps above. Followed them and YEAH!!! It rendered and it came out fine!!!

LESSON LEARNED: Before exporting or doing a major change to the file – save at least 2 copies. This way I will have a master copy of a place in time to go back and not have to start completely over. I will need to remember to update that file as I go along as well. Next would be to get rid of all the copies that won’t make a difference anymore if you have to back so that I am not eating up memory and storage.

The original assignment was 3.5 stars. I am bumping it up to 5 stars on my chart – but I’m not tracking stars as an open course participant anyways. 🙂

I will cover design principles in a later post.

 

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

 

Bumpin’ up

Radio Bumper

This was fun, yet time-consuming. Audio is a lot of tweaking and eventually you still don’t think it is exactly as you thought you wanted it.

I chose a favorite artist, Steve Earle and his song Satellite Radio to take some of the runs from it. I used the sound from YouTube – but one version of the bumper I completed came up with copyright infringement on Soundcloud. Time for me to go back and check fair use and copyright language.

When I started I thought I might go the #noir route. Searching for different music I ended up the Getty site. I even registered. Must have been the late night hour that I wasn’t thinking clearly. After finding some really killer tracks I wanted to explore and use I went to check out. Wasn’t thinking these were pay for files and filled out the license use forms. Was I surprised! If I would have completed the transaction my bill would have been $8900. HA!! Yep – not for me. Disappointed. But it did force me to re-think and find something and I am glad Steve Earle came to mind.

This version may disappear as well – but we will see. If so – I just can’t share officially my assignment, but the activity helped me in working on using Audacity again.

I did this assignment after a Sound Effects Story I called Winter Wreck, so was feeling more comfortable again with Audacity. SO GLAD I finally remembered to use the space bar for playing clips! One of the many useful time savers that can make you feel like a pro.

This clip only ended up consisting of two layers. The content of the song fit in well and I just needed to get ds106 radio into it somehow. I hate listening to my voice! Looking back at transcripts, a college professor identified my voice as didactic. Funny that person probably still does not realize how that was not helpful feedback. So – it was time to figure out how to alter my voice. I opened several tracks with the same recorded phrase and just started applying effects. Came up with some good sounding ones, but not necessarily right for this until I hit on one. The preview sound option is critical – but you can spend a long time changing things back and forth. I could have kept going and trying more -but it is the hazard of any of this creative work – when is it enough and when to accept and move on. I accepted and moved on.

Lessons learned (or re-learned!):

  • Save often – my workstation froze up and lost about an hour’s worth of work. The lucky thing-  Audacity recovered the file but better to be safe than sorry in the future.
  • Before finalizing make a duplicate project. This helps in case it doesn’t export correctly, you forget to close a track you didn’t want – or missing selecting all the tracks you did want.
  • Review copyright use and find the correct versions of things to use.

 

Messy Winter Wreck

Unit 4 Audio Assignment – Sound Effect Story

Back to Audacity after being away for a long while. I think if it was completely new I might catch on faster, but instead I ended up with former version shortcuts etc. needing unlearning. It was the simple things right in front of me. For the what seemed like eternity, I was staring at grayed out menu items and thinking I installed incorrectly. The help page, while detailed seemed like too much info to absorb, so I headed to Lynda.com for some tutorial help. DUH! I trapped in play mode so I couldn’t do anything. One click of that yellow button and I was finally on my way!

Using freesound.org, I drifted into lots of listening and searching trying to think of a story to tell with sounds in 60-90 seconds. With the current winter weather and storms every other day lately the winter wreck was the way to go for this assignment.

I chose 11 different sounds for this creation to portray the winter storm, leaving the house and walking to the car, trying to start the car, out on the road and then the crash ending with the rolling hub cap. I layered sounds and not linear so that the car starting and crashing were background by the wind. Some fades and lots of cutting unwanted parts of clips. I had selected a female vocal that I originally laid into the background to give it a cinematic feel but it seemed too much and detracted for this assignment.

A better path would be to think of a story first then look for sounds. I chose sounds to spark ideas in this attempt which may have limited me to one idea too quickly.

Happy to be back and working with audio. Creating clips for layering with visuals will be exciting in the future units. Spending time on the parts before the really helps in tuning up how important each is in an effective final story.

So does anyone have solutions for headset hair?

Audio Assignment70 3.5 Stars

Tell a story using nothing but sound effects. There can be no verbal communication, only sound effects. Use at least five different sounds that you find online. The story can be no longer than 90 seconds.

Sound Files used from freesound.org

  • 36831__csproductions__car-leave-3.wav
  • f50910__rutgermuller__in-car-driving.wav
  • 72914__jobe55__car-keys-and-start.mp3
  • 73199__snardin42__hubcap2.wav
  • 126042__mhtaylor67__getting-into-car-and-starting-it.wav
  • 131385__musicmasta1__carstartskidcrash.wav
  • 136629__smmassuda__crashing.wav
  • 262321__klankbeeld__fence-storm-hydrophones-150111-0498.flac
  • 262680__ylearkisto__henkiloauto-tyonnetaan-kayntiin-a-car-push-start-in-the-winter-footsteps-on-the-snow-car-rolling-motor-starts-steps-motor-stops-saab-900.wav
  • 262699__mamos2__walking-on-snow.wav
  • 262705__pfranzen__opening-a-heavy-door-and-bounding-in.ogg
css.php