Archive for January, 2012

Deke’s Techniques: Creating movie-poster credits in Illustrator

Published by | Tuesday, January 31st, 2012

This week, Deke’s free technique shows you how to use a secret Asian-language text setting (revealed to Deke by our own Mordy Golding) to create authentic-looking movie credits in Illustrator. The trick is exploiting the Warichu feature which is designed for stacking characters within a single line of type. In this technique, Deke reveals how the feature allows you to gracefully stack two words one on top of another, adjust the size, create a character style that saves those settings, and then apply your character-style down the line to all the people who helped make your imaginary movie possible.

Any designer or budding movie promoter who’s obsessed with typesetting (and doesn’t that include most of you?) knows that the standard movie credits in a promotional poster stack the two-word job title before the linear presentation of each contributor’s name. So text that initially looks like this…

…ends up looking like this:

If you were inspired by Deke’s Designing an Indiana Jones-style logo technique from December 2011, then this technique will allow you to create some credits at the bottom of your poster that will convince your audience that you know how to properly hype your latest entirely theoretical but professionally promoted cinematic endeavor. And if you’d like specific instruction on putting the two techniques together, check out the Two ways to place a pixel-based image movie from the Illustrator and Photoshop chapter (chapter 21) of Deke’s Illustrator CS5 One-on-One: Advanced course.

See you back next week with another free technique from Deke!

Interested in more?
• the entire collection of Deke’s Techniques on
• All Illustrator courses on
• All courses by Deke McClelland on

Suggested courses to watch next:
• Up and Running with Illustrator
• Illustrator CS5 One-on-One: Advanced
Illustrator CS5 Essential Training
 Photoshop for Designers: Type Essentials

View Source series introduction: Adding breadcrumbs and custom URLs to WordPress websites

Published by | Saturday, January 28th, 2012

Most of the tools and languages we use online are constantly changing. HTML itself is in constant flux, a new version of Firefox releases every six weeks, and who knows what’s going to happen next with video formats. It’s enough to drive you crazy. Suffice it to say that the web design and development industry demands people who are learners by definition.

Sometimes the hardest part about any new learning commitment is getting started. If your pile of work is not getting any smaller, and you’ve only got a few minutes to learn something new, then View Source may be the series for you.

View Source, which is named after the view source browser-function that allows you to see a web page’s underlying code, is a new series that offers 10-minute intermediate and advanced web design projects. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique.

view source example
At its core, View Source is about being curious and developing an attitude for learning with limited time.

This week, I’ll show you how to add WordPress breadcrumbs to your pages, per Google’s recommendations (see Google’s SEO Starter Guide).

I love WordPress, but sometimes it doesn’t behave how you need it to and it’s easy to see that it started out as a blogging platform. On the positive side, the awesome thing about WordPress is that it’s easily customizable with HTML, CSS, JavaScript, and PHP, so if you know how to work with those languages, it’s quite easy to make WordPress do your bidding. In Adding breadcrumb links to your WordPress sites I show you how to incorporate breadcrumbs into your WordPress website by adding a function to your functions.php file.

Another thing Google recommends in its SEO Starter Guide is generating more meaningful URLs that are rich with keywords. By default, your WordPress links probably look something like:

Since this is not very descriptive, it would be better to have a category and the name of the article in the URL. Maybe something like this:

In my second View Source installment, Creating a custom URL in WordPress, I show you how to easily modify the look of your URLs by changing your Permalinks settings, which can be found in the admin section of WordPress under the Settings menu. The default options WordPress gives you emphasize organizing things by date, but I also show you how to apply Custom Structure options in my tutorial. More information about how to further modify your WordPress permalinks is also available in the Using Permalinks WordPress documentation.

In the next View Source installment, I’ll show you how to use Content Delivery Networks when calling your JavaScript Libraries, which can speed up how quickly your sites load, and I’ll also discuss how to build an Image Rotator using a jQuery plug-in.

See you in two weeks with more View Source!

Interested in more?

• The entire View Source series
• All developer courses on
• All courses from Ray Villalobos on

Suggested courses to watch next:
• CMS Fundamentals
WordPress 3 Essential Training
Foundations of Programming: Fundamentals
Social Media Marketing with Facebook and Twitter

InDesign FX: Simulating carving and chiseling

Published by | Friday, January 27th, 2012

In this week’s free InDesign FX video, I show you how to combine Bevel and Emboss with Inner Shadow to create the illusion of cutting into a surface. (You can often achieve the best results by combining two or more of InDesign’s effects in a strategic manner.)

I start with a simple example, applying both Bevel and Emboss to some text. The bevel simulates the visible edges of the material being cut. The depth of the bevel becomes the thickness of the material. The inner shadow adds to the effect by creating darkened corners inside the letter shapes.

Carving text with InDesign's Bevel tool

Once you get the hang of carving and chiseling, you can take it a step further by overlapping multiple copies of an object to blend different fill colors and effects. In the video I show how you can simulate carving into stained wood by using two copies of an object, both set to the Hard Light blending mode. One copy is filled with gray and has effects applied to it. The other copy has a fill color that simulates unstained wood.

InDesign Chiseling effect

When they’re overlapped you get a nice carved effect.

InDesgin carved effect

I also show how you can add a third ingredient, Directional Feather, to simulate a weathered-stone chiseling effect. By varying the opacity and feathering, you can change the age of your chiseling from recent to ancient with just a few clicks.

InDesign weathered-stone chisel effect

For members, I have another new video this week in the Online Training Library® that discusses a key concept for mastering blending modes and effects, Understanding transparency blend space:

Examples of InDesign's transparecy blend space

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 CS5 Essential Training
 InDesign Secrets
• Creating Long Documents with InDesign
InDesign Styles in Depth

CINEMA 4D logo lighting and texturing basics

Published by | Wednesday, January 25th, 2012

A lot of folks get started in motion graphics creating 3D logos and logo animations. It’s how I got started all those years ago. When I look back on that animation now, I cringe. The clients loved it, but the lighting was terrible. Luckily, I’ve learned a lot since then, and in this week’s Design in Motion, I’ll share some key logo-lighting tips with you.

First and foremost is the idea of lighting through the camera. The 3D world is based entirely on the idea of perspective, and the only valid perspective is the angle that your artwork will be viewed from. That view is your render camera. Positioning your lights from the angle of the render camera ensures that you are only adding information that your viewers will actually see. This will take all the guesswork out of the process, and make it faster and more efficient.

The second step is to create an environment for your reflective logos to help give them a textured, dynamic look that can make them feel like they’re moving even when they’re not. Remember, the standard 3D space that surrounds your logo is just black, so even if you turn the reflection up past 100 percent, if there isn’t anything there to reflect, your logos will look dull and lifeless. Use the Material Manager and the Luminance channel to start creating an environment sphere for your logo, then you can apply and edit gradients to tweak your environment to your liking. Once you have your environment surrounding your object and texturing your logo just how you want it, it’s important to remember to apply a Compositing tag, which allows you to show only the transparency, reflection, and refraction of your environment sphere to the render camera—not the environment sphere itself.

Lastly, the color of your reflections has a big impact on the look and feel of your surfaces. The default color values for reflections in CINEMA 4D are white, and that’s just fine if you’re creating something like white enamel or tiles. But, if you’re making a gold surface, then a white reflection will make your logo feel washed out. By coloring your reflections to match your surface color, your logos will have a richness and saturation that really makes them pop off the screen.

For more on how CINEMA 4D works with lights and textures, I recommend checking out chapters six and seven of my CINEMA 4D R12 Essential Training course next.

Interested in more?
• The full Design in Motion series on
• All 3D + animation courses on
• All by Rob Garrott on

Suggested courses to watch next:
CINEMA 4D R12 Essential Training
CINEMA 4D: Rendering Motion Graphics for After Effects
After Effects CS5 Essential Training
CINEMA 4D and After Effects Integration

Deke’s Techniques: Creating type in Photoshop that inverts everything behind it

Published by | Tuesday, January 24th, 2012

You’ve probably been there. You’re working with a high-contrast photo or composition, with lots of lights and darks, and it’s your job to lay text over it. Readable text. So, do you choose dark text or light? Either one risks becoming unreadable when it hits an object behind it that doesn’t provide enough contrast. And please, whatever you do, don’t compromise with that medium gray text that’s completely unsatisfying no matter where it lands.

Enter this week’s free technique from Deke that shows you how to conveniently set up your type so that it automatically inverts everything behind it. By setting up your text this way, you no longer have to make the compromised choice to leave the text in some state of questionable readability, or the tedious choice to stop and manually reset text color as you move it around. By using a blend mode and a couple of well-placed adjustment layers to mathematically tell Photoshop what you want it to do when, you’ll create automatically reversing yet entirely editable text.

Example of automatically-inverted Photoshop type

And for members of the Online Training Library®, Deke has an exclusive movie this week, Creating auto-inverting line art, in which he shows you how to do the same inverse effect with line art (in this case a signature). The steps in this technique are similar to those discussed in Deke’s free tutorial, but require you to additionally separate and invert the lines that make up the image.

Example of automatically-inverted Photoshop line art

We’ll be back next week with another free technique from Deke.

Interested in more?
• The entire Deke’s Techniques collection on
• Courses by Deke McClelland on
• All Photoshop courses on

Suggested courses to watch next:
• Photoshop CS5 One-on-One: Mastery
• Photoshop Masking & Compositing: Advanced Blending
• Photoshop for Designers: Type Essentials

A #NAMMchat reminder, plus a two-minute audio summary

Published by | Friday, January 20th, 2012

The audio channel at is making a lot of noise at the NAMM show this year. NAMM (short for National Association of Music Merchants) is a massive conference and convention for all music-related products and services. In other words, it’s a giant toy store for musicians!

From January 19-22 will be on-site at NAMM unveiling our expanded audio course offerings, meeting new audio folks, connecting with industry leaders, and checking out all the new gear.

If you’re at the show, please come by our booth (#4711) to say hi. If you can’t make it, check out this short demo of what the audio team has been up to:

After the NAMM show, we’ll also be doing several twitterviews (interviews on twitter) with two of our audio authors, Brian Lee White and Bobby Owsinski. We’ll discuss key trends, the coolest news from NAMM 2012, and we’ll answer any questions you might have about NAMM, music technology, or the business in general.

Follow us on twitter @lyndadotcom, and join in on the conversation at these times:

January 24 from 12:30-1:30 PST: Brian Lee White  @brianleewhite
January 25 from 12:30-1:30 PST: Bobby Owsinski   @bobbyowsinski

Simply tweet your questions or comments to @brianleewhite, @bobbyowsinski, or @lyndadotcom with the hash tag #NAMMchat on 1/24 and 1/25.

*Editor’s Note: On January 11th and January 20th the blog mistakenly reported the #NAMMchat dates as January 23 and January 24. The dates of the #NAMMchat will be January 24 and January 25, both at 12:30pm PST as mentioned above. Associates will be standing by to assist any audio lovers who may tune in on January 23rd. Please pardon our error!

Interested in more?
• All audio courses on
• All Logic Pro courses on
• All Pro Tools courses on

Suggested courses to watch next:
Audio for Film and Video with Pro Tools 9
• Audio Mixing Bootcamp
iTunes 10 Essential Training
Digital Audio Principles

InDesign Secrets: Making your own motion path for CS5 animations

Published by | Thursday, January 19th, 2012

This week’s free InDesign secret features Anne-Marie Concepcion showing you how to manipulate the animation paths that control your moving objects in InDesign CS5 (and later). If you’ve tried setting motion paths in InDesign before, you know there are some pre-fabricated paths provided for you. Anne-Marie starts by demonstrating how you can easily change those paths with the standard path manipulation tools, namely the Pen tool and Direct Selection tool (aka the “white arrow” tool). Drag out lines to cover more area, add curves and swoops, express yourself in path format, then watch as your designated object dances to life across the screen.

Anne-Marie also discusses how to import a vector-based Bézier curve from another program, like Illustrator, and how to draw your own path from scratch using InDesign

Getting started as a programmer and what language to learn first

Published by | Wednesday, January 18th, 2012

It scares me to say this, but I’ve just celebrated a big anniversary: I’ve been a software developer for 25 years. My first programming language was something called PAL. It stood for Paradox Application Language, and was a part of Paradox, a popular DOS-based database application that was in many ways the Microsoft Access of its time. Over the ensuing years, I’ve learned and forgotten many languages as I moved into different areas of the software development world. But I found that each language was progressively easier to learn. Once I understood the fundamentals, I was able to apply lessons learned so far to the new challenges facing me.

No one was around in the beginning to tell me that programming was difficult. I had some work I needed to do, and with the help of sample code and tutorials, I figured out how to do it. It was only later that I learned how intimidating programming sounds to some folks. But it doesn’t have to be painful at all, and I believe that by finding and using the right learning resources, and moving forward in small incremental steps, anyone can learn to code.

We’ve been hearing from our members for the last few years that programming has become more important to you, and so in 2011 we responded by publishing a series of courses on some of the world’s most popular programming languages. In this post, I’m going to describe what you need to know to get started as a programmer and how to select a first programming language to learn.

If you’ve never done a lick of programming, you might want to start with staff author Simon Allardice’s course Foundations of Programming: Fundamentals. As in many industries, software developers have their own lingo. Words like statement, function, method, and property have very specific meanings, and some of these meanings can differ from one language to the next. Simon explains the language of languages, and compares many of the most popular programming languages with each other. Examples are provided in JavaScript, Java, C#, and many others.

The next step is to choose your first language. Which language you choose will depend largely on what you want to accomplish. You might use one language for building web pages, another for creating applications designed for cell phones and tablets, and so on.

The most popular programming language course in the Online Training Library® is, unsurprisingly, the most recent edition of our ever-popular JavaScript Essential Training, also authored by Simon Allardice. JavaScript is so popular because it’s the programming language of the modern web. It’s the language that “glues” other web technologies together, such as HTML and CSS. It’s supported in all modern browsers, and is at the core of many popular web frameworks such as jQuery. Looking beyond the browser, JavaScript is also used in many other software development environments, including Titanium, a set of tools for building cross-platform mobile applications, Node.js, a recent entry in the world of server-side web application development, and Unity, a package that enables building games for many platforms.

If you want to build native apps for mobile devices, you might choose Objective-C to build apps for iPhone and iPad. Objective-C Essential Training will help you get started, and then you can move on to our other courses on building apps for the iOS operating system. Java Essential Training with David Gassner (yes, that’s me) teaches the language that’s used to build native apps for Android and BlackBerry devices, and C# Essential Training with Joe Marini will help you get started with building Silverlight and XNA apps for Windows Phone 7. And once you learn either Java or C#, you’ll be able to build not just mobile apps, but also applications for the web (client- and server-side) and much more.

In addition to the courses we added in 2011, the Online Training Library® offers lessons on other languages that you can use for a variety of tasks. These include tutorials on Perl and Python with Bill Weinman, PHP and Ruby with Kevin Skoglund, and one of my own personal favorites, ColdFusion Markup Language with David Gassner (me again).

So regardless of which language you want to learn, you should be able to find some valuable tools in the Online Training Library® to help you get started. I really believe that if you have something you want to accomplish that requires a bit of programming, you can learn it. That’s’s new motto, and it absolutely applies to the world of software development.


Interested in more?
• All developer courses on
• All courses from David Gassner on

Suggested courses to watch next:
Foundations of Programming: Fundamentals
JavaScript Essential Training (2011)

Objective-C Essential Training
C# Essential Training

Java Essential Training