Category Archives: Design

got ds106?

3 Replies

Oh boy… did I have fun with the DS106 Daily Create tdc671. We were to make a poster for a new DS106 ad campaign, ‘got ds106?’, based on the ‘got milk?’ milk industry campaign started back in 1993. [Wikipedia article].  I created the DS106 DesignAssignment1234 to share the fun with future DS106ers. 

got-ds106-superman

Super Hero Alan Levine assuring us DS106 helps build creativity that soars.

got-milk-supermanI did a quick search of Google Images for ‘got milk?’ posters and had a plethora of great images pop up.  I was immediately drawn to the Superman poster.  Employing the Google once again I located the Phoenix American font used for the original campaign.  The link will take you to a free downloadable non-licensed version.

I deleted the original text, then copied a section of the remaining blue sky to paste and stretch to fill the empty space.  Using the newly downloaded Phoenix American font I changed a few words to customize it for our ‘got ds106?’ campaign.

Super.
That’s how milk DS106 makes you feel.
The calcium fun helps bones creativity grow strong,
so even if you’re not from Krypton  Strawberry, AZ
you can have bones of steel creativity that soars.
got milk DS106?

 I could’ve just replaced the text , but what would be the fun and challenge in that?

alan-levine

Alan Levine

Photoshopping Alan (a ds106 instructor at Cogdog Blog) Levine’s head onto Superman’s body was a must, and turned out to be much simpler than I thought it would be. (These techniques are “simple” now, but it’s taken lots of practice and perseverance to learn them.) Choosing a good picture with the right composition was important.  I wanted him to be facing to the left and tilted similarly to Superman’s.  It didn’t take me but a few minutes to find a nice photo with another Google Image search, this time for Alan Levine.  Amazingly, the lighting was even a close match.  How lucky was that?

Using the quick selection tool in Adobe Photoshop Elements 12 for the Mac, I selected and deleted everything but Alan’s head, neck and hat. (I thought the hat added another layer of giggle-able absurdity to the mashed image.) Another bit of serendipity was that Alan’s brown jacket blended well with Superman’s cape. Yippeee!  But I needed to do a little rebuilding of the top of his hat since it was cropped in the photo.  This required copying a piece of it from the top, duplicating it a couple of times, reducing the size to align these little ridges on his hat, and then erasing the outside edges of each layer to produce a rounded head effect. I merged all of the layers and used the clone tool to blend them.  His neck was a little trickier. I started with the Spot Healing Brush, then found two new tools today, Smudge and Blur. I was quite pleased with the results. As a finishing touch I used the blur tool again around the edges of his hat and face to give a more blended effect against the sky.

The DS chest plate was pretty simple too.  I used the clone tool to erase the “S”, and produce a blank yellow background in the process. Then cut out a “DS” from the DS106 logo. By adjusting the hue and saturation of the DS layer I was able to approximate the red color of the original “S”.  Resizing and transforming the layer with the skew and distortion effects was employed. And the final adjustment was to reduce the opacity just a tad.

After I uploaded the new poster to flickr I noticed that Superman’s belt also has an “S” on it.  Ooops….. Oh well… it’s not about being perfect here in DS106.  It’s about the creating, trying, learning, and giving it your best…. wherever you’re at.

UPDATE November 24, 2013

Superhero Alan Levine has been GIFfed!

GotDS106_Animate

DS106 Superhero Alan Levine has creativity that soars!

How do you make a micrograph “pop”? (3M-DS106 Repost)

1 Reply
This is a repost from an internal 3M blog by “WS”, 3M-DS106 Salon member

How do you make a micrograph “pop”?

3MMMI’ve been in electron microscopy for over 10 years (my first class on the subject was in 2000), and something that took me a while to figure out is “how can I present my images?”

You’d think this is a simple solution, just throw them in PowerPoint and send them off.  But let me ask you this…what background color should you use to give the best appearance to your images?

Take a look below:

BugMicrograph

As seen, some colors help make portions of the micrograph image stand out while some make them appear ‘washed out’.  When I have a choice, I usually opt for a dark blue background.  It’s a personal choice.

But what about identifying items within your micrograph?  What color then???

Bug_FontColor

Font color legibility test.

Again, above shows some options.  What color do you use?  I generally like yellow or red depending on the features darkness in the image.  Sometimes white and black can get lost in features within the image.  The best answer is trying it out.

WARNING: If you are presenting – make sure, make sure, make sure, to test your images on the projector first.  Your PC screen is not like most projectors regardless of the color used.  Take the extra time to test your images on the projector and make sure the brightness and contrast levels on your images make them easy to view and follow.  Just my $0.02.

Note: The original nanoparticle image used for the internal 3M post could have been considered proprietary.  Rather than take the risk, we have substituted a public domain image of a bug from the Dartmouth College electron microscopy images gallery.

3M Comment from “HC”

It has been a long time since I sat down at a EM instrument and I had never thought to put a border around the image – very thought provoking. Would it also make sense to change the gray scale palette into a sepia one – kind of like false colour? It would at least stand out more than just regular EM images.

Another thing that one has to consider in identifying things in the image is also the font in addition to the colour. Since you are going to ‘overwrite’ something with the text, would it make sense to put a small background so the text pops through?

From Academia to Industry, from Bench to Plant. [3M-DS106 Repost]

2 Replies

 

Originally posted Oct 4, 2013 on an internal 3M blog by “HC” a 3M-DS106 Salon member

From Academia to Industry, from Bench to the Plant. (3M-DS106 Repost)

HCHeadlessGIF

“HC” 3M-DS106 Salon Member

This week one of my friends from Australia finally landed an industry position in the US after many years.  He did his masters degree where I was doing my postdoctoral research and that was when our path first crossed.  He later moved interstate to another university to do his doctorate (when I started working at 3M).  He finished his research and then went to Virginia Commonwealth University for his postdoctoral research.  As his project is winding down, he asked if 3M was hiring any inhalation scientists and at that time, we unfortunately weren’t.  Found out this week that he got into PPD (Pharmaceutical Product Development) in Middleton, Wisconsin and one of his first comments was that “Industry is so different from Academia!”

I agree with that statement, and now that I have about the same experience in industry (5 years at 3M vs 4 years as a research only academic) I see some similarities and a lot of differences.  Some people prefer the deep understanding that being in academia can get you while some prefer taking that knowledge and commercialise into products.  Academics live off grants (unless they get tenure, but even then, grants are still good), while in industry we use internal grants to fund research/development on projects that interest us and could lead to success for the business and company.  There are plenty of articles comparing the two ‘worlds’ and I probably won’t add too much wisdom to that body of work.

Having said that, one thing that my academia friends might not get to see is the manufacturing plants (or even those friends in Silicone Valley).  It is a complex facility that also require ‘magic’ to get products out.  This is where 3M also excels in, taking development from the bench and scaling it up in manufacturing.  Currently I am working through scale-up of one of the products that I am the project lead on and looking at the manufacturing path on how we can make the products.  We typically draw a schematic of the process flow but what if we can animate it to understand the flow better?

One of the DS106 assignments had a topic that is “Spreadsheet Invasion“, where you use a spreadsheet (in this case, Microsoft Excel) to do your animation on.  I decided to do a rough schematic that is kind of realistic (probably 80 % close) but not exactly the process I am using..

Spreadsheet Invasion - Example Manufacturing Scheme

This shows how complex the manufacturing process can be, with multiple inputs at different site locations.  It is also something we like to show how much work our Product Engineers do such that the end user does not notice any change in performance of the final product – that particular information has been animated using PowerPoint in a presentation and will not be shown here as it does show real actual manufacturing processes and the number of input materials as well as test standards to maintain.

Do most people know how complex manufacturing can be when they were still studying?

—-

Animated GIF notes:

  1. Planned the images to draw and the sequence
  2. Coloured the cells for the frame, do a screen capture of everything.
  3. Paste As New Layer in GIMP
  4. Save as GIF, as an animation.

Technology is Great! (When it works.)

6 Replies
Servers_Unicorn_Rainbow

Tim Owens (@timmmmyboy) and Alan Levine (@cogdog) – DS106.us heroes

Servers_Unicorn_Rainbow

Keeping the DS106 server happy.

Technology is great… when it works. And keeping the DS106.us site up and running has been a labor of love and a real pain at times – especially this week.  So Talky Tina’s August 2013 Animated GIF Challenge #9 was to make an animated GIF celebrating the behind the scenes work that keeps the ds106.us server happy. Giving some love and recognition to the folks behind the scenes that keep the web servers and internet tubes running. Tim Owens and Alan Levine were on the battlefield this week.

D'Arcy Norman - Hero Too

D’Arcy Norman – DS106 Hero

UPDATE: Just found out from Alan (see comment below) that Tim and D’Arcy Norman (Twitter @dlnorman) are doing all the heavy lifting to get and keep the DS106 servers up and running. This thank you GIF is for D’Arcy too.

This was also an assignment before there was an Animated GIF category — found hiding in the Design Assignments category as @cogdog‘s wonderful Design Assignment 842: Rainbows and Unicorns in the Server Room. Make an animated GIF of a server room that includes both rainbows, unicorns, and a message of thanks. The cheesier the better. Bonus points for elves and pink ponies.

WOW! What a difference.  Making the GIF this time around I discovered the wonders of the full version of Photoshop CS5. No more manually merging the layers before I can take a test drive, and I can easily change the animation screen time for each image seperately.  In Photoshop Elements you don’t have that flexibility. I’ve had to use the brute force method of saving several versions of files with the individual layers, different merged images, etc. so I could go back to them when I wanted to make a change. A few of my past blog posts walk you through this time consuming painful experience.

Yes. Technology is great…. when it works.  And I can tell you, the full version of Photoshop works! No wonder some of the DS106ers can crank these animated GIFs out in no time.

Images:

A few other server images you might enjoy

DS106: Hot Off The Tabloid Press

4 Replies

After writing my own and reading the other fun submissions for the 7/15/13 DS106 Daily Create:  “Write a tabloid headline for ds106 and the opening sensational paragraph” I was inspired to take the assignment a step further and layout the sensational front page of The DS106 Daily Create Tabloid. Which then led to submitting today’s daily create tdc575.

DS106_Tabloid_071513_GIF

First Things First:
Not wanting to fall into the same attribution trap that I found myself in with my last project (TalkyTina – Sweet As Tupelo Honey) I immediately documented my tracks as I gathered my media and placed the important information and links into a draft blog post.  Boy did that save time and reduce the tedium of going back and trying to figure out exactly where I found things – much better plan of action this time around.

Creating the Front Page:
I started with a Google search to locate a tabloid template that I liked.  I found this one at CLEO – Cumbria & Lancashire Education.  Then came the quandary over which of the 7/15/13 DS106 Daily Create submissions should I use? The template allowed space for 2 stories and 3 images. And of course I wanted to use my own submission “Headless DS106 Mysteriously Runs Itself“. Story 1, Image 1. And the talk of the day had been all about @IamTalkyTina ending her ds106 role and being placed back into her cardboard box.  [Read the headline story here.] So that would be Story 2, Image 2. That left the 3rd image to be filled from the remaining tabloid entries.  I had a few I could choose from, but the image of ruby red lips with a snappy headline would be entertaining, eye catching, match the color scheme – and most importantly, the easiest to produce.

Story 1: “Headless DS106 Mysteriously Runs Itself“

Amidst a culture of cost-cutting and outsourcing of education to corporate massive open online courses (MOOCs) a small yet determined group of passionate educators have “organized” a digital storytelling course that can run itself. There is no official leader, although there is a syllabus that can be followed. No one is in charge, but there are plenty of opportunities for any of the global on-line participants to step-up and volunteer to facilitate the focus material of the week during the 15-week course. There are no deadlines or grades, instead suggested assignments and opportunities provided to collaboratively work and learn from others, share their work, and receive feedback to help improve their digital story telling skills.

Some suspect the Illuminati to be supporting this small underground group – encouraging the DS106 group’s subversive tactics with the intent to overthrow the big MOOCs. A secret source was heard to say…“The education system is and has always been ours. The MOOCs have gotten out of control and we need to clip their wings. It’s time to unleash the headless DS106!”

My creative inclusion of a suspected involvement of the Illuminati was to help fulfill the sensationalism and tabloid aspect of the assignment and was serendipitously supported by a statement from @PuppetMaster106 in his guest post on @IamTalkyTina’s blog.

This talk of a ‘headless ds106′ this fall is all well and good, but you know that someone, somewhere, needs to be always at work behind the scenes, keeping things ticking, poking and prodding, feeding the unicorns, and all. And since I’m experienced with webs and scenes, and strings and such, there’s certainly a role for me in the coming months — whether it’s visible to the ds106 community, or not so visible, and rather behind the scenes.

My Fair Tina

@PuppetMaster106 pulling the strings

Wikipedia Reference for Illuminati:

“…refers to various organizations…alleged to conspire to control world affairs by masterminding events and planting agents in government and corporations to establish a New World Order and gain further political power and influence. Central to some of the most widely known and elaborate conspiracy theories,

the Illuminati have been depicted as lurking in the shadows and pulling the strings and levers of power in dozens of novels, movies, television shows, comics, video games, and music videos.”

Image 1: As is usually the case in ds106, I wasn’t the only one riffing on the work of others, and I was more than pleased to use a great image created by Todd Conaway to perfectly complement my story as well as tie-in to the Talky Tina saga. Todd just couldn’t get the thought of Alan Levine’s proposed “headless” DS106 course for the Fall of 2013 out of his head either.

HeadlessDS106_Tweet

 

Back_In_the_Box

@IamTalkyTina is “Back in The Box” Three Layers Deep

Story 2 & Image 2: The talk of the day had been all about @IamTalkyTina ending her ds106 role and being placed back into her cardboard box.  [Read the headline story here.] The guest blog post created by @PuppetMaster106 [Read full story here.] included a wonderful GIF of @IamTalkyTina in her cardboard box being encased in ice and finally Carbonite.

It appears now that Talky Tina has acquired a new PsychicSiri App for her iPhone and is once again interacting with DS106 with animated GIF challenges in preparation for the August 26th, 2013 start of the “Headless” DS106 course.  Although the original post was drafted back in July, my “psychic” inclusion of the GIF fits right in. This all begs for another news breaking tabloid front-page.

 

Image 3 Attributions:

 

 

Up, Up, And Away

3 Replies

 

Animated Movie Poster GIF

Meet Rochelle from Pixar’s movie “Planes”.

Still enamored with creating GIFs, I stayed up way too late last night creating this animated movie poster from the movie Planes by Pixar to be released in theaters August, 2013. (DesignAssignments313)

Let me give you a little background on why I chose this particular movie poster. My name is Rochelle, and it’s not a very common name in the United States.  I met only one other Rochelle growing up, and that was in High School.  I’ve met maybe 5 others my whole life. So when a Facebook friend posted on my timeline that Pixar would be introducing a new character in their upcoming movie about planes, I was beaming,

 “I have a cartoon character named after me?”  

Now this assignment would give me the opportunity to create something out of a real movie poster that had my name on it.  How cool is that? If I liked it, I could see using it in other circumstances around the web. I do like my final product, so you might see it popping up again.

Keeping with this week’s design theme, I studied the poster to understand what is being conveyed in the image.  Since the movie isn’t even out yet, I read the Pixar synopsis of the movie and more specifically the plane character, Rochelle. (voice of by Julia Louis-Dreyfus)

Excerpt from Pixar site:

Rochelle

Pla rochelle rolloutimage v3-0simp

(voice of Julia Louis-Dreyfus)

Rochelle is a tough racer and the pride of the Great White North. Always confident and capable, she got her start running mail to small towns in Quebec, picking up home remedies for mechanical maladies along the way. She also developed a knack for fast travel that ultimately inspired her to give air racing a try. Rochelle never looked back (this competitive contender doesn’t need to). She is relentlessly pursued by charmer El Chupacabra, but steadfast Rochelle is much too focused on winning the race to return his affections.[20]

I would also need to keep in mind the file size limitations of a GIF, how many frames I’d be allowed in my photo editing software, and since I didn’t want this project to consume my life for days, the number of frames I’d actually have to create.  I decided that the important elements of the poster to focus on would be that this is a plane, and then illustrate something about Rochelle’s personality.  My first overly ambitious thoughts were to have her fly on the poster.  Moderating my initial exuberance with a dose of reality, I admitted to myself the work required to make the plane actually fly in or out of the poster was way too complicated to pull off.  My rational, although still very creative self, went with animating the propeller props, and giving her a wink.  I’m not totally at peace with the symbolism of her winking, since the character synopsis says she is steadfast and much to focused on winning the race to return another plane’s affection, but I’ve seen the blinking effect used in a lot of other GIF projects (Ben’s “The Colorized Zone” was a big inspiration), so why not give it a try.

[An illustrated detailed process of creating this animation will be documented and posted as a tutorial eventually. Until then, you can view a tutorial example with only one animation zone.] 

A summary of the process using PhotoShop Elements 11 for the Mac:

1. I used the lasso tool to grab an image of each of the propellers and the eyes/windshield of the plane. This was pretty painstaking while I experimented with which parts of the propeller would work best to create the rotating effect.  I then duplicated the propeller images and rotated them 30deg and 60 deg. I ended up with 3 different propeller images for each side of the plane.

2. For the winking eye I used the lasso tool again to capture just the left half the windshield image.  Then started stretching, erasing, copying, pasting, aligning… until I had something that looked right.

3. Once all of the individual image layers were created, it was time to merge the appropriate layers to create new combined images that would animate correctly.  Oh my was this a chore as it became closer and closer to midnight.  I was creating a total of 3 animation zones?! My brain just wasn’t working as well anymore and I was having a hard time following tracking of what went where.  And remember that ambitious enthusiasm I spoke about? Well I added in an additional challenge to have each of the propellers appear to be spinning a little differently. And believe you me, it was no walk in the park to properly align everything so that those parts that were supposed to be still remained still.  I didn’t want any distracting jumping around of the animation.

4. The timing of the animation sequence was also important.  I didn’t want her constantly winking, yet I wanted the propellers to be moving at a quick rate to provide a better spinning illusion. I was able to create the effect I wanted by duplicating more of the image layers for the propellers and sandwich the winking effect in the middle. All-in-all I ended up with a total of 14 frames: 8 propeller frames + 2 winking frames + 4 propeller frames, all running at 0.2 seconds per frame.

As I mentioned above, this post only gives a high level synopsis of creating this GIF.  The tutorial will have much more detail with screen shot images and examples at each stage as I move through the creation process.

 

Go Daddy…. Wheeeeeeee

11 Replies
DaddyDJSlide_GIF_Short

Grandson and son-in-law having fun last summer at the park.

Our only required DS106 assignment this week was to create an animated GIF from a Twilight Zone episode.  Me bad… I didn’t use a Twilight Zone clip…  But according to Talky Tina, who gave us the assignment, my GIF fulfills most of the other requirements. It’s B&W.  And it’s capturing a really nice childhood moment.

“But that’s okay, because a black-and-white sequence makes for a smaller GIF anyway! Can you help me relive my childhood (and perhaps your childhood, or that of your parents?) with some nice, friendly b&w animated GIFs From The Twilight Zone and Beyond?  Try to capture all of the really nice childhood moments! You know the really, really best and funnest parts!

I’ve never created a GIF before, so this was a bit of an adventure.  I had to first figure out what these things were all about.  Luckily my daughter was over for family Sunday dinner tonight and she pointed me to some fun examples at James Vander Memes.  It turned out after doing some research on the web and viewing a few tutorials on YouTube that my Mac versions of Adobe Premiere Elements 11 and Photoshop Elements 11 software would work.

The clip I’m using was taken from a video of my grandson and son-in-law called “Playtime With Daddy” that I created and posted to YouTube at the beginning of the year.  At the time I was acquainting myself with new video editing software and was having fun trying out new effects like changing the speed of the video and adding in an old news reel effect.

I had some trouble figuring out which format to publish the video clip so that it would turn into sequenced images. Publish+Share => Computer => Image (use for exporting still image) => open the advanced menu and choose “export as sequence” under the video heading, then save.  My next glitch showed up as I was moving each of the still images into a single Photoshop file.  For some reason my Photoshop Elements wasn’t letting me easily copy and paste the layers between files like I had done with earlier versions.  I found a work around. Again, after some trial and error, when saving it to the web as a GIF I needed to check the sequence box.  Then it would only play in reverse?  What the ….??? After trying, without success, to manually reorder the layers I finally found a checkbox that said reverse on it, and I was on my way. Only to be stymied one last time when I previewed my blog entry and the original Flickr link didn’t work correctly.  I ended up just inserting my own media.  I’ll update my post if I get it working correctly.

I enjoyed this assignment and am looking forward to learning more about what others have done with a GIF.  I wonder how I’ll be using this form of story telling in the future?

Daddy Slides for DJ