Category Archives: Tutorials

Tending to My Cherry Red

 

 

DJBDay1_ChildMuseum_thumb3_edited-1Once again I’m employing my DS106 time saver maxim to Reduce – Reuse – Recycle by creating a video that takes a close look at the food we eat (for DS106 daily create TDC 633) with photos and footage I had already taken. This time it’s with my favorite birthday cake which has made several appearances in daily creates and other digital storytelling projects. 

This beauty had to make another repeat appearance since fellow DS106er Stephanie Jeske was unable to view the time lapse video of me frosting my cake a few weeks back.  I use a small section of ZZ Top’s Cherry Red as the sound track and YouTube in Germany has blocked it because of copyrighted content.  I’m using an even longer section this time, but I’ve uploaded the video directly to my website, so no autobot is going to block it.

UPDATE 11/2/13: Just discovered there’s a video assignment for this type of project VideoAssignments1024.  Yay! Yet another Reduce-Reuse-Recycle for this one.

How it was made.

There are a number of sections to this video that was assembled in Adobe Premiere Elements 12: Intro GIF, Time Lapse, Still Photos, Outro GIF.

The GIF at the beginning of DJ licking the frosting off of the number 2 that was on his cake was made with two photos taken fairly close together.  They weren’t close enough to make a smooth GIF right away.  I ended up doing some work in photoshop to adjust the size and skew of the photos so that they blended more when flashed from one to the other.

Using the Lapse It Pro app I photographed myself frosting the cake.  In reality it took about 20 minutes (551 frames) that was reduced to 46 sec when all was said and done.  The app did all the work.  I just set my iPhone up on a tripod and went to work using the default settings since this was my first time out using this app.

IMG_1213

2 yr old’s beauty

The cake really did look beautiful when I had finished, just like the one I made for DJ’s second birthday.  But I made a fatal error by frosting the cake while it was still warm.  I was in a hurry to get to my birthday massage and for some reason was driven to take the time lapse photography right then and there.  Why I couldn’t wait is a mystery to me now that a little over a month has past since I made it.

 

Melted Cake

Aaahhh! It melted!

When I returned from my massage, I removed the cake from the refrigerator and this is what it looked like. To my horror my beautiful cake had melted.  I briefly thought about throwing it out and starting all over again. But I didn’t want to do all that work again.  It was my birthday and I wanted to play, enjoy myself, go get my hair done….. While I was running around having fun I came up with a brilliant idea on how I could pass off this monstrosity as something creative- if nothing else.

 

Cake_51

At 51 you’re showing your age.

My guests are accustomed to this gluten-free birthday cake and had just a few weeks earlier joined in the celebration of DJ’s second birthday.  Of course a 2 year old’s cake would look fresh and new, no wrinkles or bags, or cracks showing through.  But a 51 year old’s cake? Now that’s a different story.  They all laughed and dug in. It still tasted just as good and moist as it always does.  And really…. by the time I get it on their plates it’s a mess anyway.

 

Cake51_PS_GIFpsd_Small

51 in all her glory. No shame required.

The final GIF segment of the video clip was made with a series of still photos as I turned the cake slowly around in a circle.  For a first time effort, it’s not too bad. (Note to self… Next time have a marker of some sort on the counter top so I can line up the placement of the object from shot to shot.) The photos were uploaded to Photoshop, assembled as separate layers into one file and turned into an animated GIF.

Music Attribution:

ZZTop_AntennaHead

I certainly will give credit where credit is due though, and wish to express my appreciation to ZZ Top for making such good music.  You can buy “Cherry Red” on

Bygone Backyard Photo Safari

Rochelle Graduation, May 1990

June 1990: Ready to move into a new home.

I went out this morning to capture images in my backyard during a time of day I knew would avail interesting shadows and lighting for a DS106 Photo Safari.  What I didn’t expect was that through the process of my editing and choosing the photos, a story of my life as the mother of two now grown daughters, and the ex-wife of a gardener would reveal itself.  The images tell of a time well past: A child’s swing set neglected and overgrown with weeds and trees, a prolific garden abandoned and no longer tended to, a bleached antler reminding me of the 9 foot electrified fence my ex-husband erected to provide a barrier to free meals for the herd of deer traveling through our backyard, discarded odds and ends left behind when a family dissolved. While this phase of family life has past, a new chapter has begun as an over-joyed “Nana” of a vivacious two-year old grandson. And who knows what stories my backyard will tell 10 years from now.

 

THE MAKING OF….

All photos were taken with my iPhone using the Camera+ app.  It is a powerful app that can do a lot if you know what you’re doing, which I don’t yet.  I experimented with setting the white balance and selecting a focus zone.  Neither of which proved to be successful.  I think it’s time to read and watch some tutorials.  Next, I uploaded the photos to my desktop with the Photo Transfer app.  I love this little app.  I can very easily upload and download photos and videos over WiFi or bluetooth to any of my Apple devices or even my PC.

Fallen Fence

Fallen Fence – Photo too cluttered.

I had taken almost 90 photos, and challenged myself to get it down to 5. With a quick look at the images I could see most of them weren’t all that great.  The lighting was bad.  The images were cluttered and/or blurry. Some just weren’t interesting at all. I then opened them up in Photoshop Elements 12 for a closer look and to do a little photo editing if needed.

 

Mossy Log Shadows- interesting to look at, but no story

 

As I worked I noticed a set of photos emerging with single objects dominating the image.  I also had some very interesting natural environment shots with neat shadows and lighting, but they didn’t tell a story.  They were just nice to look at like this one of a mossy log that had been used to frame the sand box under the swing set.  I’m pleased with the results of reducing my photo safari down to the best seven photos with the single object focus, and leaving out the nature only shots.

Writing the intro paragraph was an additional unexpected challenge.  In my head it sounded simple to put my thoughts down on paper, but that wasn’t the case. I struggled for quite awhile as to what and how I would share the memories and stories embedded in the photos.

Finally, I used the WordPress Slideshow plugin to add them to my blog post.  Then by editing the HTML code in the text view the borders and shadow effect of the final two images were created.  Learn how here.

Tiptoeing thru HTML to Make Borders

Thanks to a recent post by John Johnston “Flicking a Five Card Story”  I brushed aside my anxiety, took the leap and dived into the HTML. Well, let’s be real… I just dipped my toes in the shallow end… but I did it. I created borders around all of my images in my 5 Card Flickr Story post,  5 Card Poetry – Sharing My Story YAY!!!!!!!

I’d been wanting to do this since my first WordPress based blog post.  It was very easy to do when I was programming my websites using RapidWeaver.  I just clicked on a picture formatting box, chose my style,  and it was all done for me.  That hasn’t been the case with this blog.  Maybe I just haven’t located the right WordPress widgets and plug-ins yet.  But I agree with John (and Alan Levine) that it is good to know how to work directly with the code.  What was it Alan said? “Code or Be Coded”. Let me show you what I did.  And then you can give it a try too.

I wanted to take this image I had taken in February 2010 outside a small cafe in Salisbury England, and give it a border and a shadow to produce a more finished 3D look.

EnglandRainChair

By opening the text editor tab, I located the code that inserts this image into my post.

<a href=”http://rockylouproductions.com/blog_wp/wp-content/uploads/2013/09/EnglandRainChair.jpg”><img class=”size-medium wp-image-2841 alignnone” alt=”EnglandRainChair” src=”http://rockylouproductions.com/blog_wp/wp-content/uploads/2013/09/EnglandRainChair-300×225.jpg” width=”300″ height=”225″ /></a>

What I needed to do was to add an extra bit of HTML code to add some STYLE to the image. I found a quick tutorial on-line on how to create borders around stuff at:  http://wpbtips.wordpress.com/2009/10/14/borders-pt-1/

For a border around an image, you insert a style definition between the img and the src tags of the image code: <img style=”border:1px TYPE #HEX;” src=[etc. etc.]

  • TYPE refers to the border type (solid, double, dashed, dotted, outset, inset, groove, ridge).  You can see examples here.
  • #HEX is your color. I used this easy Hex Color Picker site to grab the code.

Then I opened John’s post so that I could view his source coding.  He did things a bit differently by doing something with the CSS code I think, but I haven’t touched that yet. I could still locate where he added the HTML code to create a shadow though.

#fivecards{height:320px;width:500px;} #fivecards p{text-align:center;; } #fivecards img{max-width:500px;max-height:300px;border:solid 1px;padding:10px;box-shadow: 5px 5px 2px #888888;margin:5px} #fivecards a{color:#000}

The final additional code I needed to insert within the text editing view was:

style=”border: 8px ridge #FC0356; box-shadow: 5px 5px 2px #888888;”

This told my blog post to format the picture with…

  • an 8px border around the image
  • formatted as a ridge
  • with a red color variation identified as #FC0356
  • Add a box-shadow (Link to explanation of box shadow properties.)
  • with offset dimensions 5px horizontal shadow, 5 px vertical shadow, and a 2px blur spread
  • with a greyish color identified as #888888

NOTE: It’s very important you get all of the quotation marks, commas, and semi-colons exactly right.

The final HTML code looks like this:

<img class=”alignnone size-medium wp-image-2841″ style=”border: 8px ridge #FC0356; box-shadow: 5px 5px 2px #888888;” alt=”EnglandRainChair” src=”http://rockylouproductions.com/blog_wp/wp-content/uploads/2013/09/EnglandRainChair-300×225.jpg” width=”300″ height=”225″ />

Giving me this beautifully red bordered and shadowed image.

EnglandRainChair

or alternately by changing the Hex color number to #6E6E6E I can produce a dark grey border.

EnglandRainChair

If you are really ambitious and want to learn how to program with HTML and CSS I found this site http://www.w3schools.com/ helpful a few years back when I was just starting out.  Once I started “programming” with RapidWeaver I didn’t feel I had a need for it until now.

Engineering Headless Rockylou

UPDATED POST:

I can’t believe I didn’t hear some smack talk with respect to my originally published version of this GIF.  What was I thinking? Not including DS106? I’ve fixed it!!!!

Headless_Rockylou_3_GIF_Final_500

DS106 Headless Rockylou is Cool

TalkyTina Hulka has given the Headless ds106 Fall 2013 participants an animated GIF challenge for the month of August.  Her first “assignment” was for us to create an animated GIF to show our headless self. [Link to TalkTina’s example] Headless_Rockylou_3I took pieces from three different photos to make the final GIF. (See below) I like my yellow & blue dress, but I don’t have any good photos of me wearing it.  I knew, however, that I had one of the dress hanging up and used that instead.  I used the quick selection tool in Adobe Photoshop Elements 11 to grab the dress and my head and neck from the photo of me with my daughter Jenny at her PhD graduation this May.  The final, “engineering is cool!” photo was taken from a set of photos I had from a 3M Visiting Wizards demonstration day at a local children’s interactive museum, “The Works” here in the Twin Cities. [Link to video I created about the fun of the day.] Headless_dressphoto GraduationHead EngineerFun The trickiest part of this GIF was getting my chest from the graduation picture to be as broad as the neckline on the yellow/blue dress.  I copied a piece of my chest, duplicated it and placed it on either side of my original neckline, merged the layers, and used the bandaid tool to blend them. Since there are no arms with the dress, I had to strategically crop the final GIF images so that you wouldn’t notice that.  The head fades with 100%, 80%, 60%, 40%, 20%, 0% layer opacity.  Then everything was merged onto a purple background slide.

Rockylou_Headless

Version 1: Headless & Neckless Rockylou – first GIF attempt

I made two three versions of my headless GIF. Here is the first version that had my entire neck and head disappear.  This looked especially creepy, and not the effect I was going after.  It looks like I am disappearing rather than just becoming headless.

Headless_Rockylou_2_500

Version 2: Engineering is Cool.  But where is DS106?

UPDATED POST: Version 2 had only the head disappearing.  Nice but still not right after I sat with it a little longer. Yes, I work in the 3M R&D labs and think engineering is cool.  But this GIF is supposed to be about Headless DS106.  What was I thinking?     ds106_edited-1 VERSION 3: I really needed to replace “engineering” with the DS106 logo from the website. I selected & copied the purple area above engineering to create a new layer.  I then stretched it and used the bandaid & clone tools to delete the unwanted text but keep the purple wall.  I had to do some merging of layers, cloning, and applying more bandaids to get it to look nice. You’ll notice the upper right wall is still a little mottled. I’m going with it gives more interest to the photo… and that’s my story and I’m sticking with it!

EngineerFun

Skewed Text On The Wall

To add the DS106 text, I have a png version of just the lettering (A png file maintains transparency unlike a jpeg.) that I made awhile back and keep on-hand just for these types of occasions. Oops… I couldn’t just add it directly onto the image.  If you look close, the way I took the original photo resulted in a skewing of the lettering on the wall.  Nice effect for a photo, but when I want to hack my photo and add new text, I have an issue.

DS106_WallText_500px

Skewed DS106

The problem was solved by adjusting the DS106 layer with the Image=>Transform function. I placed the DS106 layer over the original text and adjusted it until it looked about right tapering down from left to right. I hadn’t done this before so it took some trial & error.

One last change to version 3 was to make a continuous fade of my head in and back out.  Whereas versions 1 & 2 only faded out.  That made for a jumpy transition that I wanted to fix.  I simply duplicated the fading head layers and extended my loop.  I would suspect that there is an easier way to do this with the full version of Photoshop, but I only have Photoshop Elements. The final version is below.

Headless_Rockylou_3_GIF_Final_500

Version 3: DS106 Headless Rockylou

DS106 PNG Files for download

ds106

ds106_Black

Chicken Heart Terror – Behind the Scenes

"It's going to eat you up!!"

“It’s going to eat you up!!”

The It’s Going to Eat You Up! animated GIF [DS106 AnimatedGIFAssignment1162 ] was definitely fun to create. It combines two very fond childhood memories: The old campy Batman & Robin television show and the Bill Cosby comedy routine Chicken Heart . But the bulk of the project time and energy was put into on-line research to locate and link the images, audio files, and relevant websites that provide the story behind the story. Here are the Why’s and How’s of producing the GIF.

Arch Oboler recording "Lights Out".

Arch Oboler recording “Lights Out”.  (Photo Source)

During audio week of the UMW DS106 summer 2013 on-line course in Digital Storytelling, I was introduced by our audio mentor Scottlo to the Arch Oboloer The Devil and Mr. O radio plays.  As I started listening late one night I found that Oboler had created the “Lights Out” radio play Chicken Heart, which inspired the infamous comedy routine by Bill Cosby from his Wonderfulness album that my little sister and I would recreate playing inside an old gutted radio cabinet.

Excited by my find, I eagerly began what turned out to be a fruitless quest to locate the original 1937 Oboler recording. Sadly, I discovered it was one of his lost episodes. 🙁 Recordings of the original radio play and rebroadcasts in 1938 and 1942 are lost or unavailable, although he later recreated the episode for a record album in 1962 – which I couldn’t locate.  There is an 8 min abridged version that many mistake for the original.  And amazingly while researching this blog post, I actually came across a December 31, 2008 recreation of the entire Chicken Heart radio play by the Post Meridian Radio Players.

From Wikipedia:  Arch Oboler made effective use of atmospheric sound effects, perhaps most memorably in his legendary “Chicken Heart,” a script that debuted in 1937 and was rebroadcast in 1938 and 1942. It features the simple but effective “thump-thump” of an ever-growing, ever-beating chicken heart which, thanks to a scientific experiment gone wrong, threatens to engulf the entire world. Although the story bears similarities to an earlier Cooper episode (about an ever-growing amoeba that makes an ominous “slurp! slurp!” sound), Oboler’s unique choice of monster was inspired by a Chicago Tribune article announcing that scientists had succeeded in keeping a chicken heart alive for a considerable period of time after its having been removed from the chicken. Recordings of the original radio broadcasts are lost or unavailable, although Oboler later recreated this episode for a record album in 1962.

Credits & Notes:

To create the GIFs and other images I first downloaded:

 

Listening to Bill Cosby's Chicken Heart.

Imagination at work…

Using Photoshop Elements 11 for the mac I created a composite image of a little girl listening to the radio by using the magic wand tool to copy out representative chicken heart images from the cartoons.  I then adjusted the transparency of the cartoon images to 80% to give the impression of an imaginative mind at work before I merged the layers.

 

Scenes from the Fat Albert and the Cosby Kids "Fish Out Of Water" cartoon

Scenes from the Fat Albert and the Cosby Kids “Fish Out Of Water” cartoon: Fast forward to 10:20 for the Chicken Heart segment.

It took more steps in the process than I was expecting to create the background image for the Chicken Heart.  It was important to make it clear that it was terrorizing the city.  In order to do that I had to shift the Batman & Robin images from the original center to the far right…

BnR_base BnR_Right

… and move the original Chicken Heart image to the far left. This resulted in a blank area on the right hand side of the image that was corrected by duplicating the Chicken Heart graphic as a new layer and sliding it over to right. 

ChickenHrt_Bkgrnd

GIF Background modified from original

At one point I had the blue car mysteriously hanging in mid air, which I promptly fixed. And the color mismatch you see above on the street is hidden behind Batman & Robin, but I had to be careful and align things properly.

BnR_ChickenHrt_01Sec

Once I had the background completed, it was time to merge it with each of the 13 provided Batman & Robin image layers.  For the full version of PhotoShop there is no need to merge the individual layers.  If there’s a way to do that in elements, I’d be oh so grateful if you’d share it with me.

To produce the final GIF:

  • File=> Save for Web.  
  • Check the animate option box on the top right hand menu
  • Change the default 0.2 sec frame delay to 0.1 seconds – Otherwise, as I found out, they’ll run too slow, and it’s not as funny.
  • Click save and give it a file name.
  • To view your GIF, right click on the file name and open it with a web browser.  

SaveGIFWindow

 

TA! DA!  Batman & Robin terrorized by the Chicken Heart.

"It's going to eat you up!!"

“It’s going to eat you up!!”

 

Reflecting on DS106

[soundcloud url=”http://api.soundcloud.com/tracks/96139137″ params=”” width=” 100%” height=”166″ iframe=”true” /]

Prompted by comments and discussions with scottlo, our DS106 audio mentor, I’ve taken the time to reflect upon and record my thoughts and impressions with the University Mary Washington open online course in digital story telling.

I find that the open, collaborative, and sometimes chaotic nature of the course allows for a tremendous amount of creativity to be unleashed, and I feel inspired by the quality of work put out there by the entire ds106 community.

There is something different going on here. We are learning from and teaching each other: Teacher to student, student to teacher, mentor to teacher, teacher to mentor, mentor to student.   Bringing our “A” game, which inspires others to do the same.  It’s not just happening in closed classrooms, but globally, across generations, synchronously and asynchronously.

[DS106ers can submit their own self-reflection here.]

 This is what the future of education can be.

DS106 Log0

UMW Open Online Course in Digital Storytelling

Note: The background music is a self-recorded version of “Can’t Find My Way Home”, written by Steve Winwood. (Often attributed to Eric Clapton.) I like the song, especially the way it sounds when I play it in on my 12-string guitar, but I don’t feel inspired by the original famous lines:

But I’m near the end and I just ain’t got the time
And I’m wasted and I can’t find my way home.

  My version, “Findin’ My Way Home”, changes the lyrics to something I can get behind and sing from my heart:

Near the end and I just ain’t got the time
To be wasted cause I’m findin’ my way home.

Have a Rockin’ Birthday

I wanted to give my my son-in-law a special birthday card this week.  AnimatedGIFAssignments1086 was just the thing.

Make someone a special birthday card, but make it extra special by including a GIF!!  Try to make the design unique to them (it’s THEIR birthday, after all!).

Animated Birthday Card

‘Shakin’ It Up’ for a special birthday card

I’m starting to get good at this now with all the practicing I’m doing with my new GIFing skills.  I use Photoshop Elements 11 for the Mac as my image editing tool, and here’s my tutorial on the making of this GIF.

Original Birthday Card Image

Original Card

Step 1: For this project I started with an image I found on-line from a free create-your-own birthday card site.  I chose this image because it had a solid white background which makes it much easier when you get to the point of merging the layers.  And that was important because on this card I wanted to make the guy dance, but keep the text still.  I also wanted to add a little something extra to personalize it.

Lasso Tool Selection

Selecting Image with the Lasso Tool

 

Step 2: Use the lasso tool to capture only the guitar player as illustrated above.  Copy and paste it into a new layer with a transparent background.  Then grab the image of the “Have a rocking Birthday” text and do the same thing.  Then you’ll end up with two pieces of the image on two different layers, with transparent backgrounds.

Making Music on the Computer

Step 3: To personalize the card create another layer with your text or a special image.  I used this free clipart icon of a man sitting at a computer making music as my son-in-law, Michael, has just taken up a new hobby learning how to create music on the computer.  I think he might be using Audacity even.

Guitar Player Images

Step 4: Create Guitar Player Image Layers

Step 4: Duplicate the guitar player to create three identical layers.  Rotate two of the images +5deg and -5deg.  You now have 3 guitar players, one leaning forward, one leaning back and one in the middle.

Step 5: For the border I made a rectangle with a transparent fill in PowerPoint (I know my way around the program very well, and it was just easier to do it there.) and saved it as a picture in the .PNG format.  This allows you to maintain the transparency of the images.  We’ll also need a solid white layer. You should end up with 7 unique layers at this point. But we’ll need to make duplicates of layers 4-7 below to be used during the layer merging process.

1. Guitar Player tilted backward (1)

2. Guitar Player in the center (1)

3. Guitar Player leaning forward (1)

4. “Have a Rockin’ Birthday” text (x3)

5. The computer guy icon (x3)

6. The border with a transparent middle (x3)

7. A solid white layer (x3)

Step 6:If you haven’t already, duplicate layers 4-7 so that you have 3 of each as noted above.

Step 7: Now it’s time to start merging the layers together so that you end up with only the guitar player moving and everything else remaining still.  These new merged layers are what will be used to create the actually GIF. Make sure you save your work often and I’d highly recommend saving the work you’ve done creating the individual image layers as its own file at this point – just in case you make an error during the merge process, you have something to go back to.  You really don’t want to start all over again do you?

Note: The white layer should go at the bottom of your stack.  It is supposed to be the background.  Otherwise when you merge the layers you’ll end up with only a white image.

Rockin B-day Final Image

Final merged image

Merged Layer 1: Guitar player tilted back =  1 + 4 + 5 + 6 + 7

Merged Layer 2: Guitar player in center =  2 + 4 + 5 + 6 + 7

Merged Layer 3: Guitar player leaning forward =  3 + 4 + 5 + 6 + 7

Duplicate merged layer 2 (the guitar player in the center) so he’ll rock forward and backward evenly. Ta Da!  You now have the four layers you’ll need to create your GIF.  Center => Forward => Center => Backward. If you’ve done it right you’ll only see the guitar player rockin’.

Step 8: In PhotoShop Elements 11 you select “Save For Web” to preview your GIF. On the right hand side menu, select GIF, Transparency, Animate, and set your speed in the “Frame Delay” box at the bottom. The default delay of 0.2 seconds works for most projects. Click on preview over at the bottom left and you can watch your masterpiece in action.

SaveForWebWindow_8in

Step 9:  If you like what you’ve done, save it as a GIF.  To view the file once it’s on your computer you’ll need to open it with your browser.  On my Mac I right click the file, select ‘Open With’ Google Chrome.

Obruni Arrives in Africa – Sound Effect Story (Slight Variation)

[soundcloud url=”http://api.soundcloud.com/tracks/94573148″ params=”” width=” 100%” height=”166″ iframe=”true” /]

Amber arrives in Ghana, Africa. The new “Obruni”, or white person, both delights and scares the young children of Takoradi, and she soon discovers the way music can transcend cultural divides. Listen to the original full length podcast episode the sound effects were taken from at http://rockylouproductions.com/2010/10/18/obruni-take-it-up/

Audio editing is not for the faint of heart.  Especially if you can be a perfectionist or have a tendency towards OCD. [Guilty as charged…]  You can fiddle around and fine-tune forever.  (Note: The audio clip attached happens to be an updated version from what I posted earlier this morning.  I didn’t like that the car racing by in the beginning was inaudible on my iPhone. So I fixed it!)  But it can really be worth it when you come back months later to a piece you created and go, “Wow, I did that?”  

Inspired by LoDown episode 8, I jumped in to create my own sound effect story – Audio Assignment 70 with a slight variation of having a bit of spoken and sung text.  The assignment asks us to create a 90sec or less story with at least 5 sound effects.  I decided to use sound effects I had from a podcast I had created with my daughter, Amber, in the fall of 2010.  We really didn’t know what we were doing back then at moving her stories off the written page and making them audible.  I didn’t have any experience with sound editing software, and I didn’t even know what a Podcast was.  Amber had to suggest listening to StoryCorps and WYNC’s RadioLab to help me become familiar with the genre we were embarking upon. 

I’m a big Apple fan and went with GarageBand as my sound editing tool.  I wasn’t up to the VERY steep learning curve for the more professional stuff. (And I hadn’t heard about Audacity. I’ll have to check it out at some point during the course.)  I have plans for a future blog post (possibly a series or a LoDown co-hosting gig) that will go through the creation process for the entire podcast episode, but for this post I’m going to stick to the sound effect story.

A story needs to have a beginning, middle and end- now doing that in 90 seconds can be a challenge.  Finding the right sounds, keeping in mind copyright issues, [link to my YouTube playlist on copyright and creative commons] is also a big challenge.  We used freesound.org, pulled sounds off of creative commons YouTube videos, and even created some of our own sound effects if we couldn’t find what we wanted. But again… that’s a story for another blog post.  My storyline for my sound effect story could be an audio trailer for the larger podcast.  The over arching story is about how the people of Takaradi, Ghana reacted to this new white person in their midst and how she responded.

Let me take you through at least a portion of my process. Below is a screen shot of the final GarageBand file. I like to build my layers (technically called tracks) from the bottom up when possible. That way I know where I’m at, and it makes sense to me as I layer on my sounds. So that’s how I’ll be referring to them as I move along.

GarageBand Screen Shot

GarageBand Screen Shot of sound effect tracks only

Setting the Scene (track 1 & 2) To set the scene we used a lively chaotic market place sound effect that is actually a combination of two different sound effects grabbed from freesound.org.  (Called Market Place 1 and Market Place 2 above.) Neither of them sounded right alone, but the combination was just what we wanted.  Experimenting with different combinations is a great way to find just the right sound you are looking for.

The first “event” in the story was the addition of a car racing by on track 3. Remember I’m counting from the bottom up. If you listen with headphones or good speakers you’ll be able to hear the stereo effect as the car goes whooshing by.  There are things happening in and around the market place.

Our story gets more personal when track 5 brings in the children laughing, while track 3 changes over to shouting out “Obruni”.  Both of these effects were pulled from YouTube videos. So… why you might ask don’t I put each sound effect on its own separate track? (Track 3 has 3 different effects.) Because it’s a visual nightmare when you have to keep scrolling the screen to see where you are at. I try to limit the number of tracks I need to what can fit on my computer screen.  For our big podcasts that almost never happens -but we try. And labeling your larger tracks with something you understand, as well as the individual clips, is a good practice.  All things we learned the hard way!

With track 4 we hear a child crying and Amber fading in, softly humming “Amazing Grace”, to soothe the little one on track 6. Track 6 continues and morphs into Amber actually singing. With track 7 the choir joins in. Amazingly we found this little, slightly off key (just what we wanted) choir with a YouTube search. A set of congo drums joins the party on track 8.  Then it’s back down to track 3 with the audience applause.  Our final track 9 brings the story toward a close with Amber singing alone again.

I very purposely chose segments of the sung lyrics to coincide with an event in the story or a feeling I wanted to impart. The child is crying, Amber hums then sings, “that saved a wretch like me.” Amber is then saved by the choir joining in. I could have used the humming again at the end, but concluding on “Amazing Grace, how sweet the sound…” was just too much to pass up.  Like a good poem, there are many layers of meaning that can be interpreted by a listener.

At the very end the market place sounds coming back into auditory focus to take front and center stage.  Life continues on with one final master fade out.

Fine Tuning: But least you think we are finished… Oh No… you would be wrong.  You can consider this version of the audio file a rough draft.  But at least these aren’t just end-to-end clips. I’ve talked about some layering here. How these sounds are in relationship to one another is a big deal.  Blending one sound effect into another and adjusting the volume balance between clips can add a lot to your story.  Panning the sound effect into one ear or the other or the stereo effect like the car racing by are nice details to add.  You have to be careful with this though.  You don’t want to end up making your listener dizzy because what they are listening to doesn’t make sense. With the screen shot below I’ve opened up the track volume areas so you can actually see what I’m talking about.

GarageBand Screen Shot

GarageBand file with volume track shown

Track 1 & 2 market sounds fade in at the very start. We don’t want to alarm our listeners with an abrupt beginning. The idea is to create and maintain a listening experience that someone wants to join and hang-out in. If it feels “chunky” (as Amber & I refer to it) anywhere in your audio file your listeners will pick it up.  Maybe not consciously, but they’ll know something isn’t quite right.  Choke back the false pride and fix it!  You’ll be glad you did.

I made sure the track 3 car sound effect faded out nicely so you knew the car was fading into the distance. And the clip we used for the kids laughing on track 5 had an erratic volume level.  It was too soft at the beginning, so I bumped it up and brought it back down toward the end of the clip.

When the child is upset and crying (track 4) at seeing this person with a different color of skin than her own, she cries full on.  Then her effect begins to trail off as Amber’s humming effect on track 6 crosses over.  At this same time I reduce the background market audio (tracks 1 & 2) so that the listener is able to focus on the next event in the story.  But since my story takes place in a market place, I don’t want to mute it completely.

As Amber is singing (track 6) the people in the market place gradually join in (track 7) and then someone fades in with a beat on drums (track 8).  I get a sense of a subliminal cadence that I follow to get the timing just right.  (When that “chunky” feeling pops up that I mentioned above, I’m most likely out of step with the piece and keep tweaking till it feels right.) We then linger here just a bit on this climactic moment of the story before the the audience claps. (Back down to track 3.)

The clapping trails off, and Amber returns alone,(track 9) but this time with a more ethereal sounding tone. That’s why this clip was placed onto track 9 instead of remaining on track 6 with the other Amber clips.  I wanted to modify the basic sound effect to give the feeling of a dream or fade away into the distance.

There is more mixing and “Mastering” of the final audio that happens next to give your audio file more life, but I’ll save that for another post. As well as going into how to export your file so that you aren’t shocked at the low sound quality that you disappointingly ended up posting.  Scott Lo and I are contemplating a LoDown episode for audio week 3 entitled, “How come what I posted doesn’t sound like what I made?” Any interest in that topic? In short it has to do with the audio file compression you need to do so people can download and listen to them on your mobile device.  This 90 sec story uncompressed (AIF) is 23 MB, while the compressed MP3 that you listened to above is only 2.9 MB.  And it could be even lower if I used the standard bit rate compression of 192 KB rather than 256KB which I prefer.

192KB MP3 Compression Settings

Typical “High” quality compression rate settings for GarageBand.

Okay… That’s going to wrap up this post.  It’s time for bed.  Let me know if you have any questions or would like me to explain in more detail how I did something.  Hopefully I’ll have the time to write up more posts on the subject.

Splish Splash

Musician at Work

DS106 Visual Assignment 340 asked me to emphasize details- remove all color from a photo, and then restore the original color to a single object. Here’s one of my favorite examples from a project I did a few years back along with a printable 1-page directions handout.

My partner is a singer/songwriter who also plays bass and guitar. He’s been a great sport letting me experiment with new digital story telling tools over the last couple of years.  One day while in the recording studio laying down new tracks for his latest CD, he agreed to let me take photos of him in action. The original color image I use in this example is nice enough. It tells a story of a musician hard at work in the studio. But I wanted something that would really grab your attention.  I decided to highlight the bass by leaving it in living color and tone done the rest of the photo by making it black & white.  This was especially powerful when you see his black & white hands holding the colored bass. Talk about a SPLASH.

The trickiest part to accomplishing this effect using Photoshop Elements 11 is the use of the Lasso Tool.  You can pretty easily select the bulk of the object you want to leave in color- or make it a B&W object for another perspective. The hard part to making this look nice is the fine tuning you need to do while using the Lasso Tool.  I had to zoom in very close and use the add more and subtract options alternately to select only what I wanted. You then copy and paste the selection into a new layer.  As long as you don’t move any of the images in the individual layers themselves they will all align properly.

ColorSplashDemo_8X11