Adobe Systems Incorporated

Illustrating Instruction: Tad Carpenter Creative

Tad_CCLogo

When the Creative Cloud Learn team decided to create in-app tutorial content for Creative Cloud members (a highly visual audience with equally high expectations), it knew that the accompanying imagery would have to be as compelling as the instruction.

The team turned toward its long-standing relationships with the designers, illustrators and artists who use Creative Cloud and asked a group of them to illustratively-interpret a handful of the features in Adobe’s applications—content that would tell the story of what was being taught but that would also stand on its own. They were staggered by the results. This five-part series is a close-up look at the artists and their approach to crafting this conceptual art:

First up is Tad Carpenter, a Kansas City, Missouri-based illustrator and designer who runs design and branding studio Tad Carpenter Creative.
Tad_Logo

Tell us a bit about your studio and what you love most about being in a creative profession.
I’ve been working professionally as a designer for ten years and opened the studio five years ago—with a focus on creating brand identities, packaging and illustrative-based design. We bring messages to life through smart, strong and honest work for a wide range of clients. What I love most about what we do: Our work is our play, and our play is our work.

Illustration often involves the conceptual interpretation of a concrete idea (a story, a product, an event); was it any different creating art to define a feature in an application?
No. I actually approached this project very much as an editorial-based job. I was given several feature topics and my job was to interpret them, in literal or abstract ways, in design form. It was a blast. Some of our concepts I think are easier to piece together with the topic and others take some thought…but that’s what made this project so fun.

Do you remember the art direction you received from the Learn team? Was it hands-off? Or hands-on?
Very hands off. They showed great trust in my ideas and overall concepts. They of course had input and ideas but ultimately they allowed me to paint the picture that supported their product.

Were you aware of the Creative Cloud Learn content before starting this project?
I’m embarrassed to say I wasn’t. But since working on it I’ve watched and read a lot of content in the Learn section. Adobe’s tools are so deep and keeping up with upgrades and additions can be difficult but Adobe’s made it easier than ever to learn new tricks and pick-up on things you’ve never used before.

What features were you commissioned to illustrate?
For Adobe Illustrator CC: New Document, Auto-trace and Resolution, and Arrowheads. For Adobe Muse CC: Master Pages, Hyperlinks, and Site Set-up.

Master Pages in Adobe Muse

Master Pages in Adobe Muse

Of the illustrations you created, which is your favorite? Why?
That’s a hard choice but I have to say the image for Master Pages in Adobe Muse. When I think about developing interactive content and how best to illustrate that, it starts to hurt my head: Designing a website entails creating an entirely new experience for someone, with the involvement of a lot of moving parts, structures, and collaborators all working toward one common goal. Looking at it that way, Adobe Muse starts to sound a little like a musical conductor… leading a group that’s working together to create one beautiful experience, but not just musicians create this experience… shapes, colors, abstract thought, ideas, are what it takes to build and make an interactive experience. It’s what designers and developers do everyday.


Hyperlinks in Adobe Muse

Hyperlinks in Adobe Muse

Of the topics you created illustrations for, which was the most problematic? How did you solve it?
For sure the Hyperlinks in Adobe Muse was the most difficult. My approach was to show a whimsical vehicle that takes people where they need to go. It’s a very literal approach to what a link actually does but the vehicle has lots of wires and buttons and a space-age look—as if it were traveling through tubes and wires inside a device.


Where does  your creative process begin? On paper? Or screen?
Every single project I work on starts out with pencil and paper. I start by creating a bunch of thumbnails. I move quickly with a bunch of scenarios for the illustration. I don’t worry about accuracy, or anything else for that matter, and focus purely on concept and idea generation. I then pick out a couple I think are the most successful and refine them as sketches.

Technically speaking I scan in my final pencil sketch and use that as a guide by placing it on a layer and using it as a guide to start creating my final piece. I include a lot of hand-painting textures, lines and splatters but make those separately based on the project and bring them into Illustrator CC.

Tad_6_SiteSetupMuse_S

In one word describe how you feel when staring at that blank canvas.
Anxious.

Do you feel like your art could change how people perceive the features in Creative Cloud and/or aid their interpretation of how to use them?
Ultimately what I hope is people see my interpretation of each CC feature and it inspires them to dig deeper into the content—either because they responded to my piece, hated my piece, or were just interested in the content. Regardless I hope my illustration intrigues users enough to keep learning about the features in Creative Cloud.

Did the Learn content entice you to try applications you’d never used before?
Absolutely. After watching and reading content in the Learn section I immediately began exploring and playing with applications I’d used before and others for the first time.

Spoiler Alert: Like reading the last page of a book, hearing how a movie ends, or learning the answer to a hard-to-solve puzzle… Tad was gracious enough to offer insight into the concepts behind his art:

New Document in Illustrator CC

New Document in Illustrator CC

New Document in Illustrator CC: I landed where I did because I like the concept that what we create takes over our worlds. I know when I start a new project it’s all I can think about. All the sketches, paint textures, and notes from meetings literally cover my desk. When we create a new file in Illustrator CC it takes over our world, seeping out of us and into the software. We are what we make.


Auto-tracing and Resolution in Illustrator CC

Auto-tracing and Resolution in Illustrator CC

Auto-trace and Resolution in Illustrator CC: When I was given this topic I immediately liked the idea of emphasizing the heightened resolution Illustrator CC now offers in auto-tracing. I very rarely use auto-trace but I do understand its purpose and how important resolution is to the people who use it. I wanted to show this in a simple manner. Showing how everything else might have looked one way but when using what Adobe now offers it can look so much better and different.


Arrowheads in Illustrator CC: Arrowheads are often forgotten in the large amount of tools Illustrator CC offers. Simple in nature they’re often used as accents. But arrowheads, and simple, strong, support shapes like them, can really bring creations to life. When I first started pencil sketching ideas, I really liked the idea of creating an image made entirely of arrowheads—not as a support players but as the stars. I love the mid-century feel a lot of the arrowhead shapes naturally have and wanted to play this idea up more in my color choices and overall layout. I drew some of the arrowheads but many of them are provided in Illustrator CC.


2:23 PM Comments (0) Permalink

Adobe Premiere Pro CC and The Evolution of The NLE

Al_Mooney_1

An interview with Premiere Pro CC product manager Al Mooney.

Al Mooney, senior product manager for Premiere Pro CC, has a long history in digital video editing and has played his part in the evolution of the NLE. Mooney grew up in the Southwest of England and studied music and sound recording at the University of Surrey. Starting out as a broadcast engineer, he went on to work for Digidesign (part of Avid Technology) and then Apple in the UK in sales and business development work. Mooney has been product manager of Premiere Pro since 2010.

With the launch of the 2014 versions of the Creative Cloud applications, I sat down with Al to talk about video editing and the past, present, and future of Premiere Pro CC.

How did you get into the world of film and broadcast production?
The original plan was to be an audio engineer in music. I studied audio engineering and, as part of my degree, worked a year for a German broadcaster as a sound designer. While there, it became pretty obvious that working in recording studios wasn’t for me—in part because I quite like things like daylight and eating. So when I finished my studies I went to work as a music product specialist at Digidesign. My interests evolved from there: I first got excited about audio for pictures, and then pictures themselves.

You’ve been the Premiere Pro product manager since CS 5.5. What were your objectives for the application when you were overseeing that release?
It was pretty clear to me—and I don’t think I was alone in this—that we had a great engine but a pretty ugly car. I wanted to make driving Premiere Pro delightful; I wanted to make people swoon when they looked at it.

Adobe Premiere Pro CC product manager Al Mooney takes to the stage at 2013 NAB Supermeet. (Photo courtesy PF Bentley.)

Adobe Premiere Pro CC product manager Al Mooney takes to the stage at 2013 NAB Supermeet. (Photo courtesy PF Bentley.)

Where are we today in the evolution of the NLE?
In terms of professionals, there are a number of big themes we’re seeing. More and more editors need to work with higher-resolution footage, most notably 4K but sometimes higher than that. Editors expect to be able to sit in front of their NLE and cut 4K, or even 5K, just like they do with SD or HD. And they should be able to do that! Making it work should be our problem, not theirs. Whenever an editor has to think about the technology, rather than the creative task, I think we’ve failed.

Another interesting theme is color, which has become such an important part of the entire workflow, and no longer something that people just think about at the end. Editors expect to be able to work creatively with color from the very beginning of the process.

Aside from the needs of established professionals, there’s also a whole new group of people becoming creative with video who aren’t necessarily using NLE software to do it. I think the way people express themselves with software like Vine and Instagram is fascinating. So while I think there will always be a place for high-end, deep video editing apps, we’re seeing exciting changes in the way people use video in general.

Where do you see the 2014 release of Premiere Pro CC in terms of that bigger picture?
We’ve been focusing on higher resolution workflows for a very long time, and we make improvements every release. Alongside new format support, we’re always working on providing our customers with the best performance possible. Like I said, editors expect to be able to cut 4K just like they can HD, and the addition of the GPU debayer for RED media enables editors to cut RED incredibly fluidly.

In terms of color, we also made big improvements to Direct Link, which allows editors to dip into a powerful grading application at any point during the edit, without relinking or exporting anything. You can just open the project in SpeedGrade CC and work with it. I’m really proud of what we did with that workflow.

Al presenting Adobe SpeedGrade CC at the 2013 NAB Supermeet.

Al presenting Adobe SpeedGrade CC at the 2013 NAB Supermeet.

There’s been a lot of talk about the tighter integration with After Effects CC with new features like Live Text templates and Masking and Tracking. Why was this important?
We care a great deal about listening to and engaging with editors, and we heard loud and clear that there are certain effects-related tasks that editors often need to do many times a day. The Dynamic Link workflow between After Effects CC and Premiere Pro CC is extremely powerful but for things you need to do often and quickly it can be too much effort to go back and forth between applications. It wastes time and takes you out of the “editing mindset.” Also not every editor knows their way around After Effects CC. Editing text in AE comps is something many editors wanted to be able to do in the NLE. And it’s the same with masking and tracking—we heard that blurring of faces and license plates was hugely important, so that’s what we focused on.

I’m hugely proud of the way our engineers built Masking and Tracking into Premiere Pro CC. While we knew that blurring was crucial, our teams put the new functionality at the core of our effects engine so that the feature is capable of so much more than just blurring things out.

Masking and Tracking, powered by After Effects CC, was introduced in the 2014 release of Adobe Premiere Pro CC.

Masking and Tracking, powered by After Effects CC, was introduced in the 2014 release of Adobe Premiere Pro CC.

Are there any other features in the 2014 release that you are excited about?
I think the ability to have multiple Media Browser panels might be one of the best sleeper features. You can have as many as you need, browsing to your media directories, or, perhaps even more usefully, browsing to different projects. It’s a bit like having the Project Panel of another project open in a Media Browser, and as such you start to see a pretty powerful multiple project workflow. We also added Favorites to the Media Browser which I think a lot of people will find very helpful.

What are some of the other highlights for you in the most recent release of the Adobe video applications?
I mentioned improved Direct Link and I think that’s a huge feature for editors. I want them to be really comfortable in SpeedGrade CC and it’s really getting to a stage where SpeedGrade feels like an extension of Premiere Pro. Also I’d be crazy not to point out the spill suppressor technology in After Effects CC, which has caused many jaws to hit the floor during demos.

From a product development point of view, what do you think of Creative Cloud so far?
It’s so much fun, to be honest! This is really about the evolution of software itself. Changes come so fast these days and Creative Cloud gives us a framework to continually develop the tools, rather than being limited to a rigid twelve- or eighteen-month schedule. Now we can release features when they’re ready—and when our users need them.

How do you feel the Creative Cloud model has worked for users?
Professional users need tools that keep up with their world. In a fast moving industry, the Creative Cloud model has been an ideal fit for Premiere Pro—well all our video apps, really. Creative Cloud brings us much closer to our customers and product development is closely tied to user feedback. It’s much more of a partnership now with a lot more ongoing contact than we used to have.

Overall Creative Cloud membership is growing faster than we expected. Video pros in particular have been upgrading to Creative Cloud at an incredible rate. I’m really proud of that.

You’ve had plenty of personal experience with competing NLEs. Why should users consider switching to Premiere Pro CC now?
There are so many reasons! Our industry-leading native format support. Our amazing integration with other Adobe apps like Photoshop CC, After Effects CC, SpeedGrade CC. Our rich, diverse third-party ecosystem. Our speed of innovation. My cat. The list goes on!

Al often jokes about his beloved cat Cloud (yes, that’s her real name) and is famous for wearing cat T-shirts during presentations.

Al often jokes about his beloved cat Cloud (yes, that’s his real name) and is famous for wearing cat T-shirts during presentations.

What do you love most about your work now?
I love how engaged we are with the community. I adore speaking at user group events, showing off what we’ve been working on and gathering feedback from editors. I also have to call out the amazing team I work with—the amount of skill and knowledge in the Premiere Pro team is mind boggling. I’m so lucky to be part of this group of people.

Where do you hope to take Premiere Pro CC in the future?
To infinity and beyond! I want this product to be synonymous with video production. I’m jealous that Photoshop has become a verb—I want people to say, “I Premiere Pro’d it!”

Get a free trial of Premiere Pro CC


11:51 AM Permalink

After Effects for Editors

AskAPro_AE_1This Ask a Video Pro was recorded June 19, 2014

The big Creative Cloud launch on June 18 (previewed at NAB 2014) introduced several After Effects CC-powered features in Premiere Pro CC that have reignited interest in Adobe’s motion graphics and visual effects powerhouse.

To many video editors, After Effects CC seems complex and, perhaps, somewhat intimidating: They’d like to add it to their skillset, but don’t know where to begin. That’s why Ask a Video Pro presented “After Effects for Editors” with master trainer Rich Harrington.

In the session, Rich gave a lot of great examples of how After Effects CC can aid editors in their work. Most importantly, he explained that the application is like a Swiss army knife…that editors don’t need to use every part of it in order to add a lot of power to their workflow.

The new Masking and Tracking feature in Premiere Pro is fantastically helpful to editors because it makes it easy to blur out faces, license plates, or product logos as they move through a shot. Rich demonstrated how to expand on that feature in After Effects CC, adding multiple blurs that move in and out behind objects (this alone is worth the price of admission; just kidding, Ask A Pro sessions are free). Then, in addition to how to animate type—handy for creating Live Text templates for use in Premiere Pro CC, Rich also introduced a number of other features:

  • Dynamic Link between Premiere Pro and After Effects
  • Animating still images
  • Keying to remove image elements from their backgrounds
  • Speed ramping
  • Camera tracking

Watch the recorded session.

About the presenter
Rich Harrington is the founder of RHED Pixel, a visual communications company based in Washington, DC. A graphic design and new media expert, Rich has written several books, including An Editor’s Guide to Adobe Premiere Pro and is a popular trainer and presenter at digital media events across the US and around the world.

11:41 AM Permalink

Crafting the perfect image: From camera to color grading

Crafting_02

This Ask a Video Pro was recorded February 6, 2014

What used to be done with chemicals and film in a lab can now be done digitally on a laptop. Today’s filmmakers need tools and techniques that allow them to shape their images with artistry and precision. Will Read’s first film project was spoiled by bad telecine work and even worse color grading. He vowed then and there to never again let someone else ruin his images. Today he’s in high demand as a can-do filmmaker with a reputation for delivering stunning image quality.

This presentation covers:

  • Moving beyond online/offline to simplify your pipeline
  • Best practices for organizing a video project
  • Using Direct Link in an integrated editing/grading workflow
  • An introduction to the SpeedGrade CC color tools

Watch the recorded session.

About the presenter
William H.W. Read is a filmmaker and colorist based in London, England, and works in commercials, TV and film. His work can be seen at www.whwread.com.

11:56 AM Permalink

Optimizing your system for peak performance

Optimization-01

This Ask a Video Pro was recorded February 27, 2014

If you’re building or upgrading a system for editing or motion graphics work with Adobe After Effects CC and Premiere Pro CC, this online seminar will help you understand your options, and get the best performance out of your software.

The session covers:

  • How CPU, GPU, and RAM affect performance
  • The types of graphics cards you should you be looking at
  • The platform-specific considerations you should be aware of
  • Running these Adobe applications on the new Mac Pro

Download our performance white paper for more information on system optimization.
Watch the recorded session.

About the presenters
Todd Kopriva is a quality engineer on the After Effects CC team and Steve Hoeg is the engineering manager on the Premiere Pro CC team.

11:56 AM Permalink

Sometimes the Hardest Thing to Get is the Easiest Thing to Give

Encouragement_1.5

One of the benefits of social media is that it allows us to keep up with what our friends, colleagues, and mentors are working on. But, one of the consequences of having constant access to an almost unlimited stream of inspiration is that it can make us feel self-conscious about our own productivity or creative ambitions.

Whether it’s a series of illustrations or photographs, a mural, a short film, or a new blog or podcast, just about everyone I know has had trouble getting started on some kind of creative project, or has left one unfinished.

There are an infinite number of reasons for putting the things we’re passionate about on hold—from a lack of time and energy, to insecurity and fear of failure—but there’s one thing that seems, universally, to help get people going: encouragement.

At Adobe, we build the tools and services that help creatives express themselves. But having access to the latest tools and technology isn’t always the answer; new features and more intelligent algorithms are great, but sometimes what we need, more than anything else, is to know that someone is in our corner, with all the reasons why we can do something instead of all the reasons why we can’t. And that’s exactly what we’re going to do:

A group of us at Adobe got together and decided that one of the most meaningful (and, quite frankly, fun) things we could do for our community is help as many of you as possible either start a creative project you’re passionate about, or finish a project that you’ve already started. If that describes you or someone you know, send your name, mailing address (anywhere in the world), and a description of the project to act@adobe.com. Let us know what your challenges are, and what obstacles are getting in your way. Obviously we can’t work miracles, but what we can do is send you a little encouragement, and let you know that there are people at the finish line cheering you on.

1:58 PM Permalink

3D Printing: A Beginner’s Guide for Creatives

PaulBegnr_1

I’m always looking for new ways to exploit my creativity through technology—video, interactive, and mobile—but 3D printing is on an entirely new level. The fact that I can now do it in Adobe Photoshop CC is a huge bonus (watch this video to learn how). We’re able to create physical objects that never existed before; we’re inventors, a sculptors, and artists. It’s enough to give someone a god complex. If you’re anything like me, the ideas have already started flooding in; before you jump in let’s take a step back and get a general understanding of how it all works.

Additive Manufacturing

3D printing is considered additive manufacturing. It’s an amazingly simple process that consists of layers of material (plastic, wood, metal, sand, sugar, or even chocolate) being laid down in a pattern, one layer at a time, until the 3D object is created. There are three major types of 3D printing: Fused Deposition Modeling,  Stereolithography, and Laser Sintering. Each method has its advantages and disadvantages.


Fused Deposition Modeling (FDM)

The most common type of additive manufacturing, FDM is easy, affordable, and can be used with many different materials. The process involves feeding a spool of filament into an extruder where it’s melted down (like a hot glue gun) and “drawn,” one layer at a time, to create a 3D shape.

PaulBegnr_2

FDM Printer
$1,000 – $5,000

Pros
Low cost with affordable filament
Large variety of materials
Fairly easy to maintain and replace parts
Fast

Cons
Nozzle clogging is common
Supports can be tough to clean
Layers can be visible (striping)

Materials
PLA plastic (starch based, 100% biodegradable)
ABS plastic (petroleum based, not safe for cookware)
Wood filament


Stereolithography (SLA)

Stereolithography is a fascinating process in which a beam of UV light draws a pattern over a photosensitive pool of liquid resin. When the light hits the liquid it hardens. Once that layer is complete the base then moves to make room for the next layer, until the 3D object is made. SLA can be really good for designers looking for extra detail, with the potential for mass production, or for anyone who wants to cast their art in bronze or some other metal.

PaulBegnr_3

SLA Printer
$3,000 – $7,000

Pros
Detail down to 25 microns (thinner than a sheet of paper)
Smooth surface details
Great for casting/molding and models

Cons
Nozzle clogging is common
Resin can be messy
Materials are limited and more brittle
3D printers are more expensive

Material
Liquid resins


 

Laser Sintering (SLS)

SLS works much like Stereolithography, but with a powder instead of a liquid. When the laser hits the powder, it hardens; the powder surrounding the object being printed acts as a support so there are no additional supports or scaffolding to break off as with the other processes. The powder is then removed leaving just the solid object, which can be plastic, metal, ceramic, or even full-color sandstone (the metal and full-color sandstone options are particularly exciting). Although there’s not a consumer printer option available, objects can be sent to Shapeways.com for printing.

PaulBegnr_4

SLS Printer
$50,000+ (although prices could drop)

Pros
Detail down to 16 microns
No support structures
Higher model flexibility since parts can be completely suspended
Working mechanical parts can be printed with no assembly required

Cons
Powder requires some work to remove
No desktop printer options

Materials
Nylon plastic
Aluminum / Steel
Silver
Full-color sandstone


 

Which is best?

SLS is the best option—despite the $50K cost of a printer—because from within Photoshop CC you can send your models directly to Shapeways.com who will print them and send them to your house. Curious about cost? A fancy iPhone case like this one cost me about $25.

Interested in buying your own? Well right now the FDM printers are the most widely available and their quality is getting really good. I personally like the Makerbot Replicator, 5th generation. Makerbot was one of the first companies to make 3D printers commercially and they are arguably the industry standard, with profiles built into Photoshop CC. I also like the Ultimaker 2 because it just feels more designer/Mac friendly and it’s open source. But what I REALLY want is the Formlabs Form 1 Stereolithography printer. It provides lots of detail, and you don’t see any of the layering lines. Plus the objects just look cool coming out of the liquid resin

9:33 AM Permalink

Print 3D with Photoshop CC

PS_Learn

Modeling and printing 3D objects can seem like daunting tasks but in this new Adobe Learn tutorial, I’ll show you how Photoshop CC simplifies the process. Not only will it get  you into the exciting field of 3D design and printing but, best of all, you won’t even need your own 3D printer.

Watch three short videos, practice and print with the sample file included in the tutorial, and you’ll be designing and printing your own 3D objects in no time.

In the first video of the series, you’ll see how easy it is to convert a simple 2D pendant design into a 3D model, then customize the design to change the depth and size of the object for print.

In the second, I’ll walk you through the process of choosing different materials for your object and uploading your model from Photoshop CC to Shapeways.com, for printing; you’ll also learn how Adobe’s partnership with this 3D printing service makes it easy to upload and print 3D models and get lightning-fast delivery of your objects.

Once you’re ready to show off your designs, or get inspiration from other designers, watch the third video to learn how to share your 3D models on Behance or your own website.

Now… Grab the tutorial files and give it a try.

More tutorials from Adobe Learn.

7:52 AM Permalink

Keep Your Evenings Free in February

Because… It’s Creative Cloud Training Month at KelbyOne.

KO_843x403 (1)

With the breadth of digital tools available in Creative Cloud, our members have access to applications they’ve never used before… or never even thought to try. Maybe you’re a web designer interested in learning to use our pro video tools; maybe you’re an illustrator who finally wants to learn to use our digital imaging software; or maybe you just want to get the most out of Behance and Typekit.

No matter what you want to learn, or why you want to learn it, now’s the time to try the Adobe tools you’ve never tried before:

February is Creative Cloud Training Month at KelbyOne and they’re offering a different video course every weekday. Free.

The 30- to 90-minute courses will be available from 3:00pm to 6:00pm PST (6:00pm to 9:00pm EST and 11:00pm to 2:00am GMT). The courses are free to the general public for three hours and available on-demand to KelbyOne members.

So block off your weekday evenings in February. Then decide whether you’d like to learn more about Typekit, Illustrator CC and InDesign CC; Photoshop CC, Premiere Pro CC and After Effects CC; or Behance, Muse CC and Camera Raw. And, finally, remember to head over to KelbyOne on Mondays to check on the courses for the week.

Week One

Monday February 3
Photoshop CC Basics for Photographers with Matt Kloskowski

Tuesday February 4
Illustrator CC Basics with Pete Collins

Wednesday February 5
Premiere Pro CC Basics with Brandon Ford

Thursday February 6
InDesign CC Basics with Terry White

Friday February 7
Adobe Typekit with Corey Barker

 

Week Two

Monday February 10
Getting Started with Acrobat CC with RC Concepcion

Tuesday February 11
Adobe After Effects CC Basics with Corey Barker

Wednesday February 12
Getting Started with Bridge CC with Mia McCormick

Thursday February 13
Illustrator CC: Beyond the Basics with Corey Barker

Friday February 14
Lightroom 5 Basics for Photographers with Matt Kloskowski

 

Week Three

Monday February 17
Premiere Pro CC for Photographers with Terry White

Tuesday February 18
The Essentials of Typography with Scott Kelby

Wednesday February 19
Getting Started with Audition CC with RC Concepcion

Thursday February 20
On Using Behance with Pete Collins

Friday February 21
Premiere Pro CC Beyond the Basics with Brandon Ford

 

Week Four

Monday February 24
Muse CC for Photographers with Terry White

Tuesday February 25
Camera Raw Basics with Scott Kelby

Wednesday February 26
Getting Started with Kuler with Pete Collins

Thursday February 27
Getting Started with Prelude CC with RC Concepcion

Friday February 28
Photoshop CC for Designers with Corey Barker

 

12:09 PM Permalink

Motion graphics in a mobile world

The spectacular popularity of mobile devices means interactive designers need to extend their skills beyond the desktop to embrace the universe of HTML5. Among mobile devices, including tablet computers, smartphones, and interactive books and magazines, HTML5 is the common denominator.

With HTML5 comes the need to find new ways to integrate interactive media. Specifically built to meet web standards, Adobe Edge Animate provides a way to create interactive and animated content using HTML, CSS, and JavaScript with confidence that it will look and behave how you want it to no matter what device you’re using.

Now I know there are a lot of people who don’t think HTML animation is very robust. They imagine type and div boxes animating and fading in and out, which I agree is less than optimal. But when you start combining that functionality with CSS3 and some of the styling and imagery, it starts to get compelling— you’re only limited by the browsers. Android and iOS devices have latest CSS3 capabilities that support features such as blurring, so it’s possible to offer a more sophisticated animation experience on these devices.

Animated illustrations in HTML5

Recently I created a course for the annual conference of the Association of Medical Illustrators that covered how to simulate illustrations in HTML for use in iBooks and digital magazines or for viewing on websites or mobile devices. While the subject matter experts were all medical illustrators, the session itself focused on making content today—easily digestible to readers—something that spans across industries. How do you capture your consumers’ attention with animation, and across various devices?

figure_01

Interactive project for Association of Medical Illustrators deigned and created by Chris Converse.

 

For the class, I created an animated interactive graphic that compares a healthy eye to an eye with glaucoma. The illustration shows how an eye with glaucoma can’t properly drain fluid, and includes a vision simulator that displays the effect of this condition on a person’s vision. The animated droplets are actually a series of nested animated symbols that create the constant, flowing effect. Edge Animate is able to replace a time and labor intensive coding process with one that is both easy and affordable.

One of the keys to easily creating interactive components in Edge Animate is how the symbols talk to each other via targeting. You can associate an interactive element, such as a click, with a symbol. In the glaucoma example, the user clicks the words Affected by Glaucoma, which then tells another symbol (in this case, the sunset photograph) to change its state. It is this ability to combine the functions and the order of symbols—each with their own timelines—that enables us to create these engaging animations. In the relatively short two hour class with 20 participants, it was exciting to see how quickly attendees were able to create their own animation projects using Edge Animate.

Animation is fun again

A few years ago, the web was full of animations and cool interactions, but those faded away as more attention turned to offering content that behaved consistently across devices and platforms. But people are starting to get excited again about adding it back into projects, and with Edge Animate we can combine styling and imagery with cascading style sheets and simple animation to once again create content that is exciting, engaging, and fun.

Watch a Demo

This 10-minute video demonstrates the power of nesting symbols in Edge Animate, and shows how I achieved the fluid, seamless, animation in this medical illustration. Learn more about this project in the December Issue of Adobe Inspire Magazine, titled Creating interactive illustrations with Adobe Edge Animate.

Learn the essentials of Edge Animate

Learn even more about Edge Animate with Chris Converse on lynda.com with a free 7-day trial for:
Edge Animate Essential Training.

 

 


chris_converse_colorChris Converse is a partner at Codify Design Studio, which has a unique focus on both design and development. Chris develops across such languages as PHP, ActionScript, HTML, CSS, and JavaScript, making his design execution optimal across various media. Chris is a featured speaker at various industry conferences, including the How Design and Interactive Conferences, AIGA, Adobe MAX, and EMERGE. Chris has also written, designed, and hosted video training titles on lynda.com, Udemy.com, Amazon.com, and HOW Design University, and Adobe KnowHow. Chris graduated from Rochester Institute of Technology with a BFA in graphic design.

11:25 AM Permalink