Dreamweaver CS6 Illustration

Some of you may know, some of you may not, but my full-time employment is working as the Design Team lead for the post-production office of LearnKey, an eLearning company. There is a lot that I and my Design Team do there, and one of the most exciting parts is the visual development of  eLearning courses. One of the biggest projects that we have is providing eLearning training for many of the Adobe programs, and we always enjoy these because the emphasis is on creativity and the possibilities of using these programs.

The first Adobe CS6 program that we are developing is Dreamweaver. For all the CS6 programs, we have developed a style that we have dubbed “Geometric Surrealism.” For Dreamweaver, there was a lot of room to play when you take the idea of surrealism, dreams, and weaving them together…ba-dum chish! (Har har) So without going into too much detail, here is the process that I put into creating the illustration and then animating elements of it.

I began with a mockup, I took ideas that I had and ideas from my team, then searched for images and roughed out a photo composite in Photoshop of what I wanted to do. Do you recognize the famous landscape that I’ve chopped up and added too?  You’re a severe nerd if you do.

Next was the hard part, really roughing out the illustration in PS, coming up with all those angles is a real challenge, but a rewarding one. Once I finished this rough, I knew that the rest was gonna be a-okay.

Then came the final illustration. Drawn and colored all in PS, I layered and folder-ed this illustration a ton, so that I could then take elements into Flash for animation, and then composite the whole thing in After Effects for a motion graphic set-piece.

I animated a few elements in flash, the hand-gliding Rhino, the “sorry” game piece, and the blinking on the female face. Then took those animations into After Effects along with the flat image elements, did a bit of animation and camera work, and Voila! Here is a Demo of the motion graphic set-piece that is used for when the host of the course is presenting in a “head shot” format.

Visit LearnKey for more info on the eLearning courses available, and check out the LearnKey Blog.

Leave a comment