Sharing to Learn – Learning to Share

Reposted from a June 24, 2014 3M-DS106 Salon Blog Post.  All proprietary information has been deleted from this public version.


Internal 3M Spark Post to R&D Community:

Rochelle Aug_07_Hand

Sharing to Learn – Learning to Share
Posted by 3M-DS106 Salon Patroness Rochelle Lockridge

The @3mds106salon continued our June topic discussion on data visualization.  Having a bit of fun I showed up and shared a chart I’d made for the children’s story “Goldilocks and The Three Bears”. The chart was harder to make than I expected.  Receiving feedback and hearing what others would have done provided a tremendous amount of learning directly relevant to my job.  Check out the original & revised version as well as an animated GIF heat map by @Justin.  Play is good!


Today’s 3M-DS106 Salon was visited by 4 of us:  Rochelle, Justin, Tony  & Sharon

We continued our discussion on data visualization which was our topic of focus for June.  (See list of links below.) As the patroness/host of the 3M-DS106 Salon I had been pondering how I could more effectively bring the digital storytelling aspect into our group. (After all, that’s what the DS stands for. :)) I knew from my experiences with the external DS106 that I had learned a tremendous amount of very relevant digital literacy skills by playing and having fun with the DS106 community  But it’s a tough sell these days to get people to play here at 3M.  We feel play is a waste of time.  That we should be doing something more productive with our time.

  “Anthropologist Gregory Bateson believed that the fixation on making everything productive and rational cuts us off from the world of the spontaneous that is home to real knowledge..Play isn’t a character defect; it’s the builder of character, developing persistence, competence, mastery and social skills that take us beyond perceived limitations.” [Source] 

I am here to report that my supposedly non-productive activity (even I was questioning it.) of creating a data visualization for Goldilocks and The Three Bears was not a waste of time -for me or today’s Salon attendees.  Sure I learned more about struggling with Excel and formatting a slide that was informative and attractive. (See my process below.) When I shared it with my colleagues I learned even more as they easily shared their suggestions on how to improve my slide by limiting the amount of text, making things more visually simple so that at a glance a viewer can get most of the information and changing from a solid fill to an image fill on my bars.  However, it wasn’t until the rest of the group started to share how they would visualize the data and story that a deeper layer of learning emerged.  I got it that DS106 and the 3M-DS106 version we’ve been building isn’t just about creating digital artifacts and sharing them with others, it is also about the learning that occurs when others share with us.

When I heard how Sharon might adjust the bar chart, how Tony would display the data as a color coded cross table, and Justin’s idea for a heat map and an animated GIF, Well I was blown away.  Wow.  This is where the power is.  I was “playing” to learn more about a subject I was interested in – In this case data visualization and effective Power Point slides. I bravely shared what I had made with the group. Because of the relationships we have been building there was a comfort to continue sharing thoughts and suggestions with one another. I learned how they would do things differently than me, and knew  that I would use that knowledge the next time I had a 3M project that required data visualization.  I also walked away today with a deeper understanding of why I created the 3M-DS106 Salon; why I continue to do the assignment preparation work; why I hold meetings every Tuesday;  and why I attempt to write a summary post following our gatherings.  I am promoting a safe place for others to learn to share and their sharing is helping us learn more  together.  It’s all good for 3M.

Amenity/Hospitality Ratings for The Three Bears Cottage

What I assumed to be a slam dunk creating a chart in no time at all, turned out, when I actually set down to make it,  to be quite a bit more difficult than I had imagined.  I had several variables and labels:

  • The three bears- Poppa Bear, Mama Bear, Baby Bear;
  • Porridge- Initially too hot for all three bears then: Too hot, too cold, just right;
  • The chairs and beds:- too hard, too soft, just right.

I tried creating bubble charts, x-y scatter plots, different styles of bar charts.  I finally settled on a basic horizontal bar chart.  Defining which data would represent the series and which simply data was tricky.  I kept ending up with the data points on top of one another.  It was frustrating that I couldn’t get it.  I don’t know if I was just tired or what.  Once I had the basic chart I wanted to make the slide readable and appealing. I added an informative title,  I increased the font size on the axis labels to 18pt. I found some graphics on the web to illustrate the amenities being rated. With the addition of a text box on the side, “Baby Bear was Just Right”, I wanted to communicate the final result of the “data analysis”.   My final touch was the addition of evaluation comments for each bar, such as Too Hard, Too Soft, Just Right.. I agree with the group that adding the individual evaluation comments was too much for this slide.

Tony suggested uncluttering with the replacement of the solid fill on the bars to images- for example 6 beds for Baby Bear’s ratings and 1 bed for Mama Bears.

Select data point bar => right click => Format Data Options => Fill => Picture or Texture Fill =>Insert picture from computer  file => Choose file from computer => Stack and scale with 1 unit per picture.

This would allow for removal of redundant text.  I’ve revised the slide with their comments in mind and created a new version below with more graphics and less text. Also using color coding more effectively by matching the clothes of the bears to the amenities.

Then Justin showed us quickly how he would make a GIF that could illustrate more of the unfolding story as well.  Take a look at it below.  And he’s posted the how and why of making the GIF on his blog too. How might you create an effective data visualization for Goldilocks and The Three Bears.  If you actually make something, you might learn a bit yourself. If you do, I’d really appreciate it if you’d share it with us so we can learn from you too.

VERSION 1:

Goldilocs-ThreeBears-Small

REVISED

Less text, more graphics, color coding, removal of axis. I’m still not sure if this works yet or not.  Is it clear that I am using a 1-6 rating system, with 6 being the best?

goldilocksratings_revised

Justin’s Animated Heatmap Example:

3m-ds106_goldilocks_quick_gif_concept_


Comments: 

I had another commitment and was not able to attend. I hope the following is useful. Looking at either of the two slides above, I found myself struggling with confusion interpreting the length of the bar chart, or the number of objects (representing hardness or temperature). I started out with the idea that the charts showed the hardness or temperature of the objects, rather than the goodness of fit.

To me, it would have been much easier to interpret a chart that put the ‘value to the customer’, or ‘match to Goldilock’s preference’ as a dependent variable on the Y axis and the independent variables (hardness, temperature) on the X axis, and you could even estmate a bell-shaped value curve to show the ‘sweet spot’ where she preferred to be. If I get time later today, I may try to give an example, but perhaps the text is sufficient.

Hoping this input is as welcome as you usually are to my thoughts. . .

BD

Here are the charts referred to in my comment on Rocky’s earlier post re Goldilocks.

GoldilocksCharts_BDower


JUNE DATA VISUALIZATION TOPICS AND LINKS

Data Visualization:

Writing References. YUCK!

 

OER14 3M-DS106 Trailer

Collaboratively writing a paper and presenting at a conference with two people I’d never met in person was a fantastic learning experience from start to finish. It is totally amazing to me what can be accomplished within the digital realm I’ve landed in with the DS106 community.  I didn’t really experience anything different from doing something like this in person, except that when my ego or perfectionistic habits flared up I had a chance to step back, breathe and get myself focused back to what was best for the paper.  I’m sure each of us had that experience at one time or another, and our higher selves always won out. (The time zone differences helped with that too. 😉 ) I can’t express my appreciation enough to my co-authors Alan Levine and Mariana Funes for their skills, professionalism, creativity, and sense of adventure we’ve shared the last 6 months.

“This case study explores how DS106 tools, methodology and philosophy were adapted into the corporate world at 3M to build community, collaboration, and effective global communication skills. Our hypothesis was the pedagogy and assignments of the DS106 open course could be modified for delivery on a corporate intranet, using internal creation and communication tools standard for 3M employees. We hoped to learn how the course experience could work within cultural and technological constraints of a corporate environment.”

Lockridge, R., Levine, A & Funes, M. (2014). A DS106 Thing Happened on the Way to the 3M Tech Forum. In Proceedings of OER14: building communities of open practice. Newcastle upon Tyne, England.

But what I wasn’t planned on learning, and wished that I could take back those 6+ hours of tedious OCD inducing labor back in February, was how to write the required (and admittedly very important) references for our OER14 paper to conform to the styles of the Publication Manual of the American Psychological Association (http://www.apastyle.org).  What kind of sick personality makes these things up?

Conform to the styles of the Publication Manual of the American Psychological Association (http://www.apastyle.org). Citations in the text appear in parenthesis as (Author, year) or (Author, year: page). If the author’s name appears in the text, as Author (year) or Author (year: page). Full citation of literature referred to should be given in References. Arrange the references alphabetically by first author’s name, rather than by the order of occurrence in the text. Punctuate and capitalize as in References of this document. Do not use numbered references or footnotes. References should use the style “reference-list”.

Ku, G. (2008). Learning to de-escalate: The effects of regret in escalation of commitment. Organizational Behavior and Human Decision Processes, 105(2), 221-232.

For further examples see a summary of APA guidelines provided at http://www.library.cornell.edu/resrch/citmanage/apa 

Seriously

******************

From: Rochelle Lockridge 
Date: Wed, Feb 26, 2014 at 11:48 AM
Subject: Re: attached are my final edits.
To: Mariana Funes 
Cc: Alan Levine

Spent another 4 hours formatting those stupid references according to the American Psychological Association, 6th ed.  What kind of personality makes this stuff up? By the time I do this again it will probably be outdated and everything I’ve learned this morning will be a waste of time.  GRRR!  I’ve actually compiled the links to the references I used to learn how to create the references. Do I need to make references to those in our paper too. <maniacal insane laughter>

  • When and when not to use italics (boy is that a can of worms)
  • In-text citation verses reference formats (Those commas, periods, spaces, & semicolon placements are a bitch to get right.)
  • Formats for different media, e.g. video, blog posts, newspaper articles, on-line articles, publications by corporations, websites,   (Still a little fuzzy on the formatting for the DS106 website. I say put it back into the text of the document.  We know how to use it correctly there.)
  • The new addition says they favor [blog post] over [weblog post]
  • Citing a personal communication. “DO NOT include in reference list, only in text”
  • Do not include retrieval date unless the source material will change over time (like a wiki page) or it’s a link to a corporate website that doesn’t have a date listed on the source page.
  • Citing & alphabetizing multiple references in the same year from one author.
  • Multiple references from the same author but different years do not use the a, b, c designation.  The year is all you need.
  • Retrieved from not From

Link to paper A DS106 Thing Happened on the Way to the 3M Tech Forum. Do me a big favor and at least read a couple of the painstakingly formatted citations at the end of the paper.  I need to know that someone out there found them of value, other than the entertainment value had by the person or persons who create these insane style formats.

 ****************

Here you go. My links to references about formatting references in case you ever, like me, naively decide to write an academic paper that requires the apa style format.

Postlude:

After doing all this work and whining about it to my daughter, she tells me there are computer programs out there that will do this type of formatting for you in a snap.  And once you have the basic information entered, you can very easily ask it to reformat for another style, say the Harvard Reference Style for example. She just happens to have a quality paid version on her computer that I could’ve used had she known what I was doing.  AAAHHH!!!!

Gah

GIFing with Jean-Claude

JCVD-Sheep_ShootSlink

“Oh Sheep! This is gonna look bad.” – The directors cut.   (Created by Rochelle Lockridge  for the JCVD #GIFFight)

My latest round of creativity induced OCD started with a new GIFFight challenge from Michael B Smith (@mbransons)

There’s also a DS106 Animated GIF Assignment 1190 for any of the GIFFight projects to post to.

After downloading 1.1GB of short .mov clips of Jean-Claude Van Damme from Funny or Die JCVD Make My Movie Challenge there was no turning back.  I was riding the dopamine wave.  There were some new learnings and tricky bits with the Adobe Elements software I was using that I’ve included below in the process portion of this post.

My first GIFs used downloaded images from the Tate Collectives which I had been introduced to through a previous GIFFight Challenge. Animate the crap out of 1840’s Tate Artworks as part of the Tate Museum 1840’s GIF Party. (There’s also a DS106 Animated GIF assignment 1248 for this too.)

Two of my Tate 1840’s GIF Party entries:

 

JCVD-Vesuvius

JCVD Erupts With Mt. Vesuvius

Vesuvius In Eruption from the Tate Collectives

JCVD-TatePastPresent

JCVD To The Rescue. “I’ll protect you.”

Past and Present No. 1 from the Tate Collectives

The continued ride on that dopamine wave resulted in me making the following JCVD gifs to give a few of my DS106 mates a giggle.

Wanting to celebrate John Johnston’s hitting 106 likes on his JJGifs Tumblr site I searched through his posts and found a GIF of sheep running past that I thought would work well. Due to Tumblr size restrictions I was forced to shorten the “directors cut” version you see at the top of this post.  I just thought having him shooting the place up then realizing it was just sheep passing by added another layer of absurdity. The shortened version below is still funny watching JCVD slink away with the sheep though.

JCVD-SheepSlink_Short

“Oh Sheep! This is gonna look bad.” Shorter version due to Tumblr size restrictions

Sheep GIF from JJGIFs

The GIFaChrome corporation recently posted that Colin’s new body guard, Jean-Claude Van Damme may need to tone down his enthusiasm somewhat.  He’s going to scare everybody off…. not just the bad guys.

JCVDRun_ColinToy

JCVD is the new bodyguard for Colin the Dog (@GIFaDog). The GIFaChrome mascot.

A crazed Jean-Claude Van Damme freaked out on Twitter. His overactive testosterone levels blinded him to the fact that DS106 doesn’t need protecting from @clhendricksbc.

JCVDRun_Christina

Jean-Claude freaks out over @clhendricksbc Twitter thumb.

Remember the DS106 Headless ’13 Riff-a-GIF spontaneous collaboration Riffs Sprouting Up Overnight? Which started out as a doctored photo of my grandson “DJ at Stonehenge“, Glad Jean-Claude wasn’t in the picture back then “protecting us”.

JCVDRun_DJStonehenge

Stonehenge under attack – “Run for your lives! I’ll cover you!”

The How I Did It portion

I’m thinking it would be helpful if I were to create a screen cast tutorial for this process.  Like I said above, it’s a little tricky and has taken a fair bit of effort on my part to learn how to do it. Future project……

  1. Downloaded the 1.1GB (yes Gigabytes) of .mov clips from Funny or Die JCVD Make My Movie Challenge.
  2. Imported the clips into Adobe Premeire Elements 12 and added them to the time line.
  3. Added the still image onto a track under the JCVD clip. Premiere Elements knew that the movie clip was formatted so that it should have a transparent background and automatically created a video merge effect.
  4. Render, Publish+Share as Computer files => Scroll down to choose JPEG
  5. => Advanced => Basic Settings Click “Export as Sequence”
  6. To easily make the GIF in PSD from many images without having to drag and drop each. (A very painful process when you have 82 frames.)  The easy way…. File=>Place
  7. File => Save for web => make sure to check the “image sequence”.  Check for compliance with Tumblr size restrictions max 500px wide and must be less than 1MB

Going one step further, so that I or others (or me :-) ) could use the JCVD transparent images for their projects I produced a GIF and accompanying layered PSD file.

To create transparent background of JCVD for use in PSD files.

  1. Added JCVD movie clip to time line.
  2. This time our background will be a solid color that we can delete when it gets into Photoshop.
  3. Open project assests => New Item => Color Matte => pick color (I used green screen)
  4. Render, Publish+Share as Computer files => Scroll down to choose JPEG
  5. => Advanced => Basic Settings Click “Export as Sequence”
  6. Save
  7. Open jpg series in Photoshop Elements with File=>Place.
  8. click on layer changing it from background to layer
  9. Select a portion of the green. Select Similar. Select Inverse.
  10. Refine Edge. Output decontaminate Colors – amt 100% – Output to New Layer
  11. Smart Radius = 2.1 , Smooth = 1
  12. Edit => Cut (or ctrl-X)
  13. Delete original layers with the green background
  14. File => Save for web => make sure to check the “image sequence”.  Check for compliance with Tumblr size restrictions max 500px wide and must be less than 1MB.

JCVDRun_Template

 

20 Steps Til He!! Freezes Over

20 Steps til He!! Freezes Over At least that’s all it takes in Minnesota this year.

20StepsTilHe!!Did you know that your iPhone will shut down if it’s out in 8°F for less than 10 minutes? I do… For DS106 Daily Create TDC 780 it was easy for those of my fellow DS106ers to create a video by stringing together 20 clips taken every 20 steps.  That it was a little harder for me to complete this vimeo weekend challenge in the middle of winter in Minnesota would be an understatement. (We have 20″ of snow on the ground this year.) While I wasn’t able to do a 20-20 I did end up with 14 clips. Half of which were taken inside the house before I even opened the door to the arctic winter wonderland called Rochelle’s front driveway.  

Not only did my phone shut down, my freezing fingers were close to frost bite by the time I made it back into the house.  I  think it’s time for me to invest in a pair of those cool gloves that let you use your touch screen controls.  BRRRR!!!!! Once I safely made it back in, my fingers warmed, and my poor little phone came back to life, I downloaded my video clips with the Phototransfer app. There I imported them into Adobe Premeire 12 for video editing.  I had talked about doing this project last night with my daughter Amber who recommended the song I used…

I’ve Got My Love to Keep Me Warm” by Ella Fitzgerald and Louis Armstrong

It took some creative problem solving to use all 20 seconds of each of the clips and end up with a completed video sequence that was only 3:20 min verses 4:40 min. The trick was to use the time stretch effect.  I kept a few clips inside the house at normal speed. The outside clips were sped up by 150% to 200%. From experience taking panoramic shots by hand, I knew I how to pan relatively smooth and slow.  So when the video sequence was sped up you didn’t feel like “hurling” from motion sickness.

And I learned a new technique today.  To reverse the video you put in -100%.  That allowed me to create a better flow of the camera pan to be in one direction instead of the back and forth way that I had taken the original video. I chose not to talk while shooting the video.  Glad I did.  I was able to add two sound effects at the right places: Footsteps in Snow and Arctic Wind Blizzard Snow Whistle made available for easy use with the in program audio effects on Premiere Elements.

That’s it.  Post completed while I waited for the video to render and upload to YouTube.  I apologize to those of you, like Stefanie Jeske in Germany, who won’t be able to see the video because I chose this time around to use a third-party copyrighted song.  I rarely go that route, but the song fit so well.  It gave me a giggle and having my little dog Abby be my love keeping me warm put me over-the-top.

DS106 Rocks!

DS106 ROCKS! 3M-DS106 Salon Patroness admiring the work of her co-collaborators for their OER14 paper.

If you’ve been following my communications out to the world over the last few days you know that the OER14 paper, “A DS106 Thing Happened on the Way to the 3M Tech Forum” that Alan Levine, Mariana Funes and I were writing was joyfully submitted on 2/27/14.  We’ll be presenting our 3M-DS106 Salon work at the end of April in Newcastle, UK. (Link to keynote speakers and panel members) For more see my post 3M+DS106+P2PL=OER14+M2M,  which includes a video I created from interviews with the 3M participants and the original abstract for the paper.


The Art used for making the “art”:

With my focus on writing the paper (and my paying job at 3M that is making all of this possible) I haven’t taken much space to create something just for fun.  As soon as the paper finished I jumped back into the “art” game and used the opportunity to show my appreciation for my ‘partners in crime’:  Alan Levine, Mariana Funes, and Giulia Forsythe. (Who at our hopeful request in the final week, does what she does best, doodled a wonderful image to capture the paper beautifully.)

OER14-GiuliaForsythe

“A DS106 Thing Happened on the Way to the 3M Tech Forum” illustrated by Giulia Forsythe (@GiuliaForsythe on Twitter)

As usual, ideas emerged and morphed as I was in creation mode.  The first image created was of the three of us enjoying our time in the Salon. It was sparked by an innocent comment from Mariana on the final draft of the paper and the resulting Twitter DM exchange.

MF: This is now icing on cake – but did you not have a wonderful photo of the Patroness in the days of yore in one of your posts? Could we add it here? And gif it? No. Kidding.”

RL: Thx for final comments. Especially reference comments at end. Are you truly serious about inserting the Salon GIF into our paper?

MF: I would love it. You think it is too much? It would be still for printing but could be a lead in to gif 4 work? or the 1 with work process? would be nice to have something stand out in the dull dull proceedings :) it is a work thing for u so yr call!

There were many layers and tools used in re-making the paintings.  All were produced in Adobe Photoshop CS5.  The more advanced transformation tools available over Photoshop Elements allowed me to do things like warp the little red 3M on the envelope on the side table and Giulia’s doodle seen in the lap of the Salon Patroness, Madame de 3M106 .

I was fortunate to already have Colin the Dog (seen at our feet), and our three heads cut out from previous projects. The biggest issue that took A LOT of time futzing around was matching the color and texture of the new heads to the rest of the painting.  With these two projects I’ve (rather painfully) moved beyond the novice stage of applying layer mask effects. It’s easy once you get it – sort of like making a GIF. But up to this point it was more of an accident than a purposeful action.  See that little check box (Which pops up when you are creating a new layer.) next to “Use Previous Layer to Create Clipping Mask”? We are now best friends.

LayerMaskWindos

Not yet totally familiar with all of the layer effects and filters, I just kept trying stuff out until it looked sort of like I wanted.  I’m not 100% satisfied with the results, but it’s a long way from when I first started. (Nana-Tina-Little Alan REDOI still need more practice.  Look closely and you’ll also find DS106 on the back of the couch on the left side of the portrait and an OER14 on the right side of the mantle. 

But I really like the efffect of the rocking DS106.  This was one of those instances of serediptity.  I wanted to turn the still image into a GIF.  Nothing in the new image stood out as a piece that could be GIFed without what looked to me a lot of work.  I decided to try making the DS106 flash.  Again, playing around with the layer style effects I ended up with some modified images that would give the original flashing illusion I was intending. But stepping back and taking another look, I noticed something I wasn’t expecting. It turned out that creating the animation frames by turning off and on the layer effects of drop shadow, satin and emboss, it gave the DS106 the illusion of rocking in 3D behind my head. I love it when these things happen.

Mariana explains this well in an early draft of our OER14 paper.  (We had to reduce the word count from 6,000 down to 3,500. A lot of good stuff was left on the cutting room floor.)

Default open cultures generate the environment needed for innovation and creative thought. Zweig (2011) suggests that generating an environment that enables ‘structured serendipity’  may help us be more creative. From a cognitive perspective, Funes (2003) research suggests creative thought has at its core ‘bridging’ activity; creativity happens at the point of discontinuity when bridging from one domain to another. DS106 teaches bridging through an environment of structured serendipity via its focus on what Rheingold (2014) describes as ‘product orientation’ but is referred to in the DS106 open community as ‘Just make art, damn it!’

Credits for DS106 ROCKS!

Original painting: ‘Madame de Pompadour’ by François Boucher

Wall Painting Riff:

I cut out the center section of this original painting by Jean François de Troy (Paris 1679 – Rome 1752), “Reading from Molière” around 1728 found on Salon (gathering) Wikipage

Jean François de Troy (Paris 1679 – Rome 1752), “Reading from Molière”

I use a riff of this painting as the 3M-DS106 thumbnail image.

DS106 walkers small

Side Note:

I was formatting references for the paper for 6+ hours all told.  I’m going to get as much mileage out of that tediously boring work as I can.

 

Headless ’13 – The End

DJ-Headless-V1Without an instructor how would we know when to stop? When would we see “The End”?  Thanks to Mariana Funes for realizing that the UMW Fall semester ended on Friday, December 13th, 2013, the DS106 Headless ’13 course was given an end date. #DS106 is #4Life, but the Fall 2013 DS106 “headless” experience came to as close to an official close as a headless course can on 12/13/13.

The final project specs asked Headless ’13 DS106 participants to produce a story around a character that explores at least three of the media forms we’ve investigated this semester: visual/design, audio, video, web, remix/mashup, with the idea of creating a narrative arc for a character that is played out in the products of ds106 Assignments, and woven together with context and writing as a standalone blog post.

GAC-Poster

As per the DS106 culture (The ‘DS’ stands for Digital Subversives, right?), we went rogue and our final project turned out to be a collaborative creation of a GIFaChrome Camera which included a website, blog posts , “employee” profiles that included links to DS106 projects they created during the semester, prototype images, and a live product launch on DS106 Radio. For me it provided an opportunity to showcase the work done by all of us. Mariana captured what she could in her Storify Collection.  And this whirlwind adventure culminated my own intense 6 month learning curve in digital storytelling on the web. In less than two weeks my part in our final project had me practicing and honing my skills with everything I’d learned – and then some. Fortunately, I had a week’s vacation that I needed to use or lose.  I used it!

A few examples:

I’ve been trying to finish and post my wrap-up comments for the course for over two months now, without success.  If it ever gets done it’s entitled ‘GIFaChrome – A DS106 Practicum’.  This “abstract” of that post is really being written so that I can publish my fun little animated GIF at the top of this post, DS106 Headless ’13 – The End.

Making the GIF:

Using Photoshop CS5 I used the selection tool to copy and cut out the DS106 foam letters, which were individually placed into seperate layers.  I then used the clone, band-aid, and blur tools to cover up the holes left behind and make the back one continuous layer.  The additional text, Headless ’13 and The End, used the Stencil font which I’ve found is pretty close to the font used on the DS106 site.  With the animation feature in the full version of Photoshop it was easy to add the letters and text without the need to merge layers.  This allowed me to play around with a couple of different scenarios before I settled on the version posted above.  The final touch was to add drop shadow layering effects to the letters and text.  Increasing the distance for the text lines made them stand out even more- giving the GIF a bit of a 3D look.

Ewww Brain… Now in 3D!

My DS106 maxim of Reduce, Riff & Recycle has once again resulted in a fun, creative morning project.  Ewww Brain… Now in 3D!

3DGIF_SharkBoy_Lines-fb

Last August,  DS106’s Talky Tina created daily GIF challenges to keep our creative juices flowing while we were waiting for the DS106 Headless ’13 course to begin.

Talky Tina’s DS106 animated GIF challenge August 2013 GIF Challenge #10: Monster Chiller Horror Theatre 3D Style GIF  was to:

…look for a part of a scene in a 3D type movie where the thing comes right out of the screen at you.  Find a way to emphasize the moving of the thing out of the screen and into your face in a GIF.

 Ewww…Brain! was my answer to the challenge taken from a  Sharkboy & Lava Girl- May The Best Dream Win movie clip on YouTube. (Link to original blog post for the ‘how it was made.’) Today while trolling my Twitter home stream a DS106 exchange about how to make a 3D GIF with the use of white lines caught my eye. (See twitter feed below.) The illusion reminded me of John Johnston’s GIFaChrome Layercake technology  that I hadn’t tried yet. I decided to give it a go andd watched the video tutorial recommended by Mariana Funes.

Using the original Photoshop CS5 file from the Talky Tina challenge I created one white (two seemed excessive) mask line.  I’ll be honest.  I’m not sure how I managed to create a layer mask instead of the intended solid white line demonstrated in the video tutorial.  But who’s going to complain? It made things much easier in the Studio B production department this morning.  Lucky me!

Next, all I had to do was erase the portion of the line where the brain was popping out of the screen. Hmmm…. What to do with the brain goo as the brain slides down the screen?  That presented a creative challenge all its own. It looked way cooler if I adjusted the erasing opacity to 50% instead of 100% to enhance the illusion of sliding down a glass surface.  One final visual feature was to use the lasso tool to cut out a brain and have it slide down over the black border of the movie trailer clip.

Looking forward to using this technique in the future.  Below is the Twitter conversation that sparked this project.