Archive for June, 2012

Deke’s Techniques: Adding a stroke (or fill) to a photographic image in Illustrator

Published by | Tuesday, June 19th, 2012

This week’s free Deke’s Techniques shows you how to add a border to a photographic image that has been prepped in Photoshop and placed inside Illustrator—a feat that, at times, can seem impossible if you don’t know the right steps. To make up for not teaching you how to fly (this will make sense once you’ve watched the video or if you’re a regular fan of Deke’s absurdity), Deke also demonstrates in this week’s free tutorial how to add a fill to the same image, which is great if you want to give your image a nice purple tint, as we see in the dinosaur example below.

Adding a fill color to an image in Illustrator using the Effect menu.

Adding a fill color to an image using the Effect > Convert to Shape > Rectangle command.

Adding a fill and a border may sound like simple tasks, but in this case both are reliant on one unintuitive maneuver—using the Effect menu to convert your photograph into a rectangle shape Illustrator can see (Effect > Convert to Shape > Rectangle). Apparently, until you perform this unintuitive move, Illustrator does not understand that the placed object (in this case, the photo) exists. Not convinced? Try using the Attributes panel to create a stroke or a fill and see for yourself—nothing happens no matter how fat, bright, and presumably visible you make the stroke or fill. You have to use the Effect menu to “explain” to Illustrator that there is a rectangle in order to apply a suitable stroke or fill. At the heart of it, it’s all about knowing how to talk to Illustrator in its own language.

For members of, Deke also has an exclusive video this week called Two ways to crop in Illustrator that demonstrates how to crop an image placed in Illustrator, which, in the vein of this week’s theme, is another unintuitive feat.

See you back next week when Deke will return with another reality-tweaking technique.


Interested in more?
• The entire Deke’s Techniques weekly series on
• All Illustrator courses on
• All Design courses on
• All courses by Deke McClelland on

Suggested courses to watch next:
• Illustrator CS6 One-on-One: Fundamentals
• Illustrator CS5 One-on-One: Fundamentals
 Illustrator Insider Training: Rethinking the Essentials

Introducing the new AutoCAD Essentials series

Published by | Sunday, June 17th, 2012

If you haven’t noticed, we’ve been releasing a number of short AutoCAD courses lately. These AutoCAD series courses are part of a new series we’ve developed called AutoCAD Essentials, which is designed to break up a traditional Essential Training course into smaller, more modular chunks. Shorter, frequently posted courses allow us to be more flexible in how we present the essentials of a large software package like AutoCAD. It’s also a way for us to offer you a more flexible way of learning.

Throughout the AutoCAD Essentials series, Jeff Bartels walks you through a modular approach to the massive AutoCAD application, touching on everything from 2D and 3D CAD design, to architectural drawing and engineering projects. The learning path is broken up into six small courses, each with a duration lasting no longer than an hour or two. Those who want to learn everything can simply start at the first course and work their way through to the end. Those who are specifically interested in learning one small, or specific, part of AutoCAD, can choose to jump in at anytime and watch the course that matters to them the most.

Right now, we have three of the six AutoCAD Essentials courses in the library. The first course, AutoCAD Essentials 1: Interface and Drawing Management, begins with a tour of AutoCAD’s interface and the tools used to view drawings. After that, AutoCAD Essentials 2: Drawing Fundamentals goes through the basics of actually creating your own drawings from scratch. Our third installment in the series, AutoCAD Essentials 3: Editing and Organizing Drawings, concentrates on the Autodesk AutoCAD tools and features dedicated to organizing and editing geometry.

In this video titled Creating a rotational array from chapter three of AutoCAD Essentials 3: Editing and Organizing Drawings, Jeff shows you how to how to copy geometry in a rotational pattern using the Polar Array command.

We have three more AutoCAD Essentials courses on the way, and if the six course series is well received, we could easily add a few more modules and keep going. We hope you enjoy this new format and find it easy to use. We’re going to be exploring this format for other large software packages as well, so feedback is always appreciated. Let us know what you think in the comments section below, or by using the site feedback button at the bottom right of every single page.


Interested in more?
• All AutoCAD courses on, including the AutoCAD Essentials series
• All 3D + animation courses on
• All courses by Jeff Bartels on

Suggested courses to watch next:
• AutoCAD Essentials 1: Interface and Drawing Management
• AutoCAD Essentials 2: Drawing Fundamentals
• AutoCAD Essentials 3: Editing and Organizing Drawings

• AutoCAD 2011 Essential Training

Adobe Edge Preview 6: New features, and why you’ll love the Pin tool

Published by | Saturday, June 16th, 2012

One of the new projects from Adobe Labs I’m really excited about is Adobe’s interactive Animation tool for the web, Adobe Edge. It’s already in it’s 6th Preview Release, which means that although it’s not a fully developed product, it is a solid tool for building web animations that are compatible will all devices.

Adobe Edge uses web standards like HTML5, JavaScript, and jQuery to allow you to build animations that can be controlled through JavaScript. If you’re familiar with CSS or Flash, then Edge will be extremely easy to pickup. As a matter of fact, it’s a great tool for visualizing how CSS works. When you create elements in Edge, they are automatically Document Object Model (DOM) elements with properties like position, background color, borders, etc.

Animating toward a resting point with the Pin tool

I had an opportunity to meet with the Edge engineers during the last Adobe Max Conference and I found out that one of the exciting things about Edge is the way it reimagines the workflow for building web animations, and makes animation work easier and quicker.

When I create animations, I start by visualizing a resting point for my animation. In other words, a point that my animation’s elements will move towards, rest at on-screen for a few seconds, and then animate out of.

It’s generally pretty easy to design an animation resting point, but using a software like Flash, it can be challenging to animate to that point and then away from that point. The Adobe Edge Pin tool changes this by letting you complete a layout, and then pin or lock down the position of the elements in that layout, which allows you to then easily animate towards or away from that pinned position. It’s one of those things that takes a bit of an adjustment in your thinking to understand, but once you’ve mastered it, using traditional un-pinned keyframes seems like an outdated process.

Adobe Edge interface with Pin tool in timeline highlighted.

The Pin tool can accessed in several ways. Here we see the Pin tool highlighted as an icon within the timeline.

Adobe Edge Pin tool entry and exit animation.

In this image, within the red highlight box, you can see the Pin tool in action with the teal timeline areas representing entry animation, and exit animation—both created using the Pin tool to establish a "resting place" in the center of the animation.

Five note-worthy new Adobe Edge features

There are many new and cool Adobe Edge features worth mentioning, but here are five that I find particularly note-worthy:

• With the release of Preview 6, Edge has included the addition of symbols that can be exported and imported into new documents through Edge’s new .eglib format and, accordingly, allow you to reuse elements in animations.

• Edge can now be scripted with JavaScript or jQuery so you don’t have to learn a new language to build interactivity.

• A new Edge code editor allows you to quickly access any code in the timeline or attached to elements.

• You can now easily bring in custom fonts from an external library like Google Web Fonts.

The Preloader stage makes it painless to create custom preloaders from animated Edge clip-art, image assets, and text to be displayed in browsers when a user is experiencing connection or download delays.

Ready to check out Edge?

If you’re ready to give Adobe Edge Preview 6 a try, make sure to check out my Edge First Look Preview 6 course on to learn more about how to use the Adobe Edge timeline-based interface to create and build interactivity into your motion content.


Interested in more?
• The full Edge First Look Preview 6 course on
• All web + interactive courses on
• All Adobe Edge courses on
• All courses from Ray Villalobos on

Suggested courses to watch next:
• Edge First Look
 CSS: Core Concepts
• HTML5 First Look
• jQuery Essential Training

Using the new WordPress 3.4 Theme Customizer

Published by | Friday, June 15th, 2012

Of the many great reasons for using WordPress to create your web site or blog, one of the most important ones is that WordPress is an ever evolving platform. That means with every new version release you can expect to see either security and usability upgrades, or the addition of whole new features. In the case of the latest WordPress evolution—version 3.4, released for and WordPress for self-hosting—we see both regular security hole fixes and code patches, as well as some cool new features for site owners and developers. One feature in particular that is worth special mention is the new Theme Customizer.

Using the WordPress 3.4 Theme Customizer The major update of 3.4 is the introduction of the Theme Customizer. This new feature makes it possible for an administrator to change most theme-related elements of a WordPress site in a live environment and see how those changes look before publishing them to the live site. Previously these customization features were found under several different sections in the admin area, and to apply them you had to make one change at a time and then open the site in a different window to see the result. The Theme Customizer is a one-stop-shop for theme customization, and depending on what theme you are using, you’ll be able to change everything from the site title and description, to menus, what is displayed on the front page, background colors, header images, and more. Once logged in as an administrator you can access the Theme Customizer both from the front end and the Admin panel on your site. From the front end you’ll find the Theme Customizer on the WordPress menu under your site name.

Theme Customizer on the WordPress menu under your site name.

In the Admin panel you can activate the Theme Customizer for the site’s current theme by going to Appearance > Themes and clicking Customize. Activating the WordPress Theme Customizer from the Admin panel.

In either case, you are taken to the Theme Customizer for the current theme which consists of a collapsible left-hand sidebar with all the customization features and your site in preview mode on the right.

WordPress Theme Customizer screenshot.

Theme Customizer with editing options displayed in the left sidepanel, and a preview of your changes displayed in real-time in the full, right-side view.


Screenshot of the collapsible left-hand Theme Customizer sidebar with all the customization features.

Zoomed in view of the collapsible left-hand Theme Customizer sidebar with all the customization features.

Using the Theme Customizer is really very easy. To get started simply open the feature you want to change in the sidebar, for example Site Title & Tagline, or, as seen below, Header Image, and make your changes. As you make changes to the different elements, the live site preview will change on the right to reflect these changes.

Changing the Header Image in the Theme Customizer left-hand sidebar.

Changing the Header Image in the Theme Customizer left-hand sidebar.

The addition of that Theme Customizer sidebar itself takes care of a bit of JavaScript that I can’t quite wrap my head around. While that unto itself is very cool, what’s even cooler is that you can navigate your site as you make these alterations and see what your customizations look like on different pages—all in real-time without your visitors being aware of what’s going on. Very, very cool.

Once you’ve made your customizations and you’re happy with how the theme looks, go to the top of the customizer and click the Save & Publish button and your new settings will be activated on your site. If you don’t like your customizations, simply click Cancel and you are back to the Admin panel without any trace of anything having ever happened. Since this is a brand spanking new feature most themes only have support for the regular functions right now, but expect the Theme Customizer to showcase some pretty snazzy features once theme developers dive into the code for real.

Other WordPress 3.4 updates of note
WordPress 3.4 has two other cool updates under its sleeve:

1. If the theme allows it, you are no longer restricted to a specific size for the header image. As an example, that means you can upload a full-height image in the Twenty Eleven theme and have it take up most of your page if you want. I’m not sure that’s a good idea, but the option is there if you want to try it out. My recommendation is you try it in the Theme Customizer to see what it looks like first.

2. Image captions now allow HTML elements, so you can make fancy captions with text that has bold or italic emphasis, links, and all sorts of other interesting HTML touches.

To find out more
Now that you know what’s new and what’s possible, go test out the Theme Customizer, try some HTML captions, and check out the new and improved WordPress 3.4 for yourself. If you want to see the full list of goodies under the hood of WordPress 3.4 take a look at the version 3.4 article. If you need some extra help, visit to check out my full collection of WordPress courses.


Interested in more?
• All web + interactive courses on
• All WordPress courses on
• All courses from Morten Rand-Hendriksen on

Suggested courses to watch next:
• WordPress Essential Training
• WordPress 3: Creating and Editing Custom Themes
• WordPress 3: Developing Secure Sites
• Creating and Managing a Blog Network with WordPress


Three things you didn’t know about Google Calendar

Published by | Friday, June 15th, 2012

If you have a Gmail account or a Google Apps account you can use Google Calendar to schedule meetings and tasks, and to share your calendar with friends or coworkers. While calendar may seem like one of the more straightforward applications in the Google Apps suite, Google has developed some new features for Calendar in the past year that you may have missed.

1. Appointment slots
You can now block off certain times on your calendar called appointments. When you block off an appointment slot, Google Calendar will generate a special URL that can be shared with friend and colleagues.  Those individuals can then view your open timeslots and book a meeting with you. This is great for teachers, managers, and service providers.

If you’re a member, check out the Creating appointment slots video in chapter three of my Google Calendar Essential Training course.


2. Publishing your Google Calendar on your web site
If you run your business or organization with Google Calendar you may want to post a public calendar for your customers or the community to view. Using the Google Calendar publishing feature you can generate html code so that you can publish your calendar on your business or organization’s web site. Then, whenever you make changes to the events in Google Calendar, the events will automatically update on the site where you published your calendar. This is a great tool if you want to publish an events calendar, an open-house schedule, a class schedule, or your office hours.

If you’re a member, check out the Publishing a calendar video in chapter 11 of my Google Calendar Essential Training course to learn more about publishing a calendar to a web site.


3. Booking shared resources with Google Calendar

Do you have shared resources like digital cameras, laptops, or cars within your organization? If you use Google Apps you can schedule these resources from within Google Calendar by using the Google Apps Administrator to enter a listing of your shared assets into the control panel of your Google Calendar. Then, when you want to book a resource, you can just select the Rooms tab from within the Event Details screen and you will see a listing of all the available shared resources. If the resource is available you will see a green sqaure, if it’s unavailable you will see a red square. Once you book the resource, it will be unavailable to others during that time. If you’re a member, check out the Booking a resource or room video in chapter five of my Google Calendar Essential Training course to learn more about inputting and  booking shared resources.

Although we just finished completely rerecording our Google Calendar course to incorporate the latest 2012 updates, keep an eye out as we will continue to update it frequently as changes and updates emerge.


Interested in more?
• The full 2012 Google Calendar Essential Training course on
• All business courses on

InDesign FX: Simulating stickers and tape

Published by | Thursday, June 14th, 2012

In this week’s InDesign FX tutorial, stickers and tape both rely on one key ingredient: a teeny tiny drop shadow.

Clear tape effect created in InDesign.

Why is that the key ingredient? Let’s think it through.

For both stickers and tape, we’re simulating a very thin sheet of material stuck directly on a surface. Since stickers and tape have almost no thickness, the shadow has to be very small, dark, and cast evenly in all directions. In the Effects dialog box, this means you should apply a high opacity value, an offset of zero, and in some cases, a size of one pixel. Yup, one lousy pixel. That can be the difference between “yeah!” and “meh.” In the video, I use a slightly larger value (5 pixels), but I doubt you’d want to go higher than that for any sticker or tape effect.

You can make a sticker out of almost anything including a photo or illustration, a piece of text, or even a single glyph. Take for example this little silly superhero.

Tiny orange superhero from dingbat font DF Keebats.

He’s just a glyph from the dingbat font DF Keebats, but he seems rather confident that he’d make a fun sticker.

The first step in the process is to place him on top of a background image and apply a thick stroke in a very light tint of black. So light, in fact, that it’s nearly white. Why not just use white? Because we’re trying to simulate paper with some degree of realism, and even the whitest paper isn’t pure white. So avoid using InDesign’s Paper color swatch if you want to simulate real paper. Shocking, I know. Just remember, you heard it here first.

Orange superhero sticker created in InDesign.

This example also illustrates your options for dealing with stroke joins (the points where two segments of a stroke meet). Being a naturally pointy character, our hero has some extreme spikes jutting out from his ears, elbow, cape, and feet. To chop off those sharp points, you can decrease the miter limit in the Stroke panel, or, even better, simply use a bevel join or a rounded join as shown here.

using a rounded join in the InDesign Strokes panel.

And finally, add the teeny tiny drop shadow.

Sticker effect with drop shadow applied in InDesign.

See what a difference a pixel can make?

In this week’s free InDesign FX video (seen above and for free on I also show a variation on this technique where I use a plain rectangle with a teeny tiny drop shadow and reduced opacity so you can see through it. Volia, instant clear tape!

Clear tape effect created in InDesign.

For members, I also have another new member-exclusive video this week in the library called Creating Burnt Edges. In that video, I show you how to make objects that look like they’ve been singed by flames. It’s hot stuff. (Yes, I went there.)

See you here again in two weeks with another InDesign effect!

Interested in more?
• The complete InDesign FX course
• All InDesign courses on
• All courses by Mike Rankin on

Suggested courses to watch next:
• InDesign Secrets
• InDesign CS6 Essential Training 
• InDesign CS6 New Features 
 Deke’s Techniques on Adobe + exclusive car photo shoot

Published by | Thursday, June 14th, 2012

The last week of May 2012, cleared out a Salvation Army warehouse, set up some lighting, pulled up some cool cars (including a Mercedes SLS, a BMW 135M, and an Aprilia motorcycle) and invited 130-plus employees and friends from and Adobe to spend the day photographing cars, and learning about Adobe Photoshop CS6.

A recent blog from shares a brief recap of the event experience from Adobe’s perspective.

This week’s featured five: Creating, tweaking, and listening to audio

Published by | Wednesday, June 13th, 2012

Over the past several months our growing Audio segment has been adding key courses that aim to teach both the foundations of good audio practices as well as important audio software skills. This week’s featured five free movies were compiled with some help from our content manager for Audio, and go-to Pro Tools author, David Franz, and focus on movies that are all centered around a very specific theme: improving the way you interact with your music, and the quality of the sound you create.

Audio soundwave


1. Recording audio in Pro Tools
In this excerpt from chapter four of Pro Tools 10 Essential Training, the aforementioned David Franz shows you how to create a new audio track in Pro Tools. While David takes you step-by-step through the process, you’ll also hear his real-world practical reasons for why one might choose one setting over another. Bonus: You get to hear David play the guitar.