Archive for May, 2012

Building your web development core skills, and adapting a cross-language approach

Published by | Saturday, May 19th, 2012

Mac Keyboard image.

One question I encounter a lot is whether it’s best for a developer to dabble in a lot of new technologies like SASS, Node, and Rails, or if it’s a better route to specialize in a smaller number of technologies to the point of perfection. Sometimes it feels like the vast number of front- and back-end technologies make it impossible to keep up. This feeling can be especially daunting when you’re looking for a job and it seems like potential employers only want to hire Web Sifus who, on top of having mastered both front-end and back-end technologies, also come with design, video editing, and page layout skills. (If you know that person, or if you’ve encountered a job description like this that only wants to hire Superman—comment below.)

Like all extremes, trying to learn too much, and focusing on too little, are both wrong approaches. Plain and simple, trying to keep up with every language and library is impossible. The goal is not to be miserable trying to learn everything, but to focus on your core and then cross train on skills rather than languages.

Building your Core

For a web developer, a good foundational group of skills to start with are:
1. Setting up and managing a server
2. Building a semantic page structure
3. Mastering page styles
4. Building interaction with the front end
5. Using databases to customize a visitor’s experience

It doesn’t matter whether you’re learning PHP, Python, Ruby, or any other  language you prefer. Learning that some problems are better solved by languages on the server and some on the client is essential. In the end, it’s more important to be proficient at solving problems than slightly more fluent in a specific development language.

After building on your core, it’s essential to make sure you approach projects with a cross-language attitude that stays focused on using the languages you’re comfortable with, and also learning to use different technologies when they make the most sense—not because you feel like you “have to.”

Cross-Language Cross-Training

Cross training in web development means that no one language is an island. You almost never use PHP by itself, or try to solve every problem on a page with JavaScript. Sometimes, the best solution is figuring out how you can combine languages together, and how to decide which language is right for the task at hand.

Recently while working on a Facebook application, I noticed that although there is an SDK (Software Development Kit) for PHP and JavaScript, trying to use just one SDK is silly. It’s better to use both since every language has strengths and weaknesses. For me, web development cross training means taking advantage of that balance and using the best tool for the job.

In the latest episode of View Source, I show you how to use HTML, PHP, and jQuery to upload images to a server and display them on a page as they are loaded. This is a good example of cross training, or, using a combination of skills to accomplish a task. In the video, I use HTML to allow people to upload files, then I use PHP to read the files uploaded to a directory, and jQuery to update the page as soon as a new photo is uploaded so the image uploader can see whether the upload was successful.

Remember, balance is critical to any job. Don’t spread yourself too thin, but also don’t limit your learning so you find yourself struggling with cross-language development. Build your core, then work on your cross-training. While this exercise routine won’t bring you any closer to having six-pack abs, it will make you a better problem solver, and a stronger developer, which will bring you two steps closer to landing your dream job.


Interested in more?
• The full View Source weekly series on
• All web + interactive courses on
• All courses from Ray Villalobos on

Suggested courses to watch next:
• Create an HTML5 Video Gallery with jQuery
PHP with MySQL Essential Training
Dreamweaver CS5 with PHP and MySQL

iPhoto and Photoshop integration: Editing iPhoto images with Adobe Camera Raw

Published by | Friday, May 18th, 2012

After watching our popular Photoshop CS5 Essential Training course, and hearing all about the photo-developing power of Adobe Camera Raw, one of our members wanted to know how to open her JPEG files in Adobe Camera Raw directly from within iPhoto. With a few Preference-setting hoops to jump through, it is entirely possible to set up iPhoto and Photoshop so that you can use iPhoto as your Photo organizing database of choice and still use Camera Raw in Photoshop to edit your JPEGs. Here’s a quick video tutorial that shows you the path of least resistance:

Note that for quick one-way edits (meaning you don’t have any need to go back to iPhoto with your newly edited image), you can set the Photoshop preferences as shown in the video, then simply drag an image from your iPhoto preview window onto the Photoshop icon in your dock  and the image will open in Adobe Camera Raw (ACR). Also note, while I recorded this in Photoshop CS5, the preference settings are identical in Photoshop CS6. As a bonus, if you’re already using Photoshop CS6, expect to see some improvements to ACR developing, too.

Please keep the feedback and the thoughtful questions coming, we appreciate it. Do you have any follow-up questions you’ve noted after completing a course? We’d love to hear them!


Interested in more?
• All Design courses on
• All Photoshop courses on

Suggested courses to watch next:
Photoshop CS6 Essential Training
Photoshop CS5 Essential Training
Photoshop and Bridge CS5 for Photographers New Features
Photoshop CS6 for Photographers: Camera Raw 7

InDesign FX: How to simulate a ripped background

Published by | Thursday, May 17th, 2012

In this week’s free InDesign FX video, I demonstrate how to simulate a hole or rip in the background of a design. It’s a quick, fun effect that opens up creative possibilities as you imagine what might lurk beneath the page.

Simulating a ripped page in InDesign.

Similating a ripped text page in InDesign.

The three key ingredients of the rip effect are the Pencil tool, Inner Shadow, and Paste Into. The first step is to draw a jagged shape with the Pencil tool (and drawing jagged shapes are the Pencil tool’s forte). Next, apply an inner shadow to make the shape seem like it’s under, rather than over, the other objects in your design. Finally, paste a photo or another text frame into the jagged shape, and, Voila, a rip!

InDesign technique that simulates a rip with text showing through.

For members, I also have another new video this week in the library called Creating a Breakthrough Effect. In that video, I show you how to take the rip effect one step further by adding an element that looks like it’s coming through the hole in the page.

Creating an InDesign rip effect with an object coming through the rip.

Watch out, those tusks are sharp!

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 CS5 Essential Training
InDesign CS5 New Features
Deke’s Techniques

How to use XRefs in CINEMA 4D, and why they’re a good idea

Published by | Wednesday, May 16th, 2012

Efficiency and flexibility are not just marketing terms, they’re what make motion graphics achievable. Creating moving images is incredibly labor intensive, and once all that labor is done, you still have to hit the render button and wait to preview the result. Being efficient is crucial to meeting deadlines.

Creating a workflow that allows you to swap and modify key elements at any point in the production process is what XRefs are all about. An XRef is a special object that points to a scene file much in the same way a print program, like Illustrator, points back to a master image and uses the original file from the hard drive for printing. Visually, the XRef appears to you as a single object, but it actually represents all the objects in the scene that it’s pointing back to. This means that you can make changes to that scene file, and any XRef that points back to it will automatically update. This also means, since R13 XRef objects allow you to reference a CINEMA 4D file as a single object, that you can manipulate an XRef from an entirely different scene, thus allowing for distributed workflows where one person is modeling while another person animates. This makes for a very flexible way to work.

In this week’s Design in Motion video, I’ll show you how to add an XRef into your animation, and I’ll show you a real-life scenario where having XRefs set up allows me to easily swap two cars in a chase scene, with two completely different cars—all without having to update my animation. If you’re new to XRefs, this tutorial quickly breaks the process down to help you get started. XRefs have made last-minute director swaps quick and easy for me many times, and they can save you, too!

The overall XRef experience has been significantly improved in CINEMA 4D R13. To learn more about those improvements, check out my full CINEMA 4D R13 New Features course on If you are a member, make sure to check out chapter five, where I discuss R13 workflow additions, including a specific video on the Xrefs format rewrite.


Interested in more?
• The full Design in Motion weekly series on
• All CINEMA 4D courses on
• Courses by Rob Garrott on

Suggested courses to watch next:
CINEMA 4D R12 Essential Training
 CINEMA 4D R13 New Features
After Effects CS5 Essential Training
CINEMA 4D: Rendering Motion Graphics for After Effects

Deke’s Techniques: Making a model emerge from water in Photoshop

Published by | Tuesday, May 15th, 2012

This week’s Deke’s Techniques tutorial demonstrates how to take an otherwise land-locked model and make her appear to emerge from water. The key to this deceptively simple technique is to create a properly aligned, reflected version of the model’s image, that is based on a common smart object so that any changes to the original are reflected in the duplicate.

After you flip the duplicate upside down, your first step is to create a soft transition between the two images. In this video, Deke shows you how to set up a gradient transition in the intersection between the rightside-up and upside-down versions, so that no seams are visible between the two. Once you reduce the opacity of the reflection and add a water layer (adjusted to taste with a color overlay), you’ll arrive at the refreshing effect on the left below.

Girl reflected in water in Photoshop.

To make the properly wavy reflection on the right above, members of can watch this week’s exclusive movie titled in which Deke shows you how to create a progressive ripple pattern that you can use for any Photoshop image.

See you back here next week when Deke will return with another versatile, reflective technique.


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

Suggested courses to watch next:
• Photoshop CS6 One-on-One: Fundamentals
• Photoshop Masking & Compositing: Fundamentals
 Photoshop CS6 Essential Training featured in Three Models of Distance Learning article from

Published by | Tuesday, May 15th, 2012

A recent article on, the web site for School Band & Orchestra magazine, featured in an article on distance learning, and the role technology plays in education today. The article begins by stating that “technology is changing how we deliver education,” and continues to identify and discuss three models for technology-based distance learning. Read the whole article, Distance Learning: Music Technology Courses & Workshops, at


This week’s Featured Five: Choosing your Photoshop course

Published by | Monday, May 14th, 2012

For this week’s featured five new tutorials, I have a sampling of movies from five different Photoshop courses we offer in the library, each with a slightly different approach, scope, or focus. With the announcement of CS6, we’ve updated three of our mainstay Photoshop training courses, and when you combine that with our existing content, it can be overwhelming if you don’t know where to start or which course is right for your needs. Here are some quick descriptions and free movie samples of five of our Photoshop offerings, from the encyclopedic to the specific, to help you figure out which one is right for you in your current state of expertise and interest.

Are you looking for more direction on where to start with Photoshop? Let us know what you’re looking to accomplish below in the comments section, and we’ll share our ideas about where to begin.


1. Photoshop CS6 Essential Training
In general, Essential Training courses at are designed to give you comprehensive knowledge of a software application and a solid foundational overview of the product from a real-world perspective. In the case of Photoshop CS6 Essential Training, this means author Julieanne Kost stays focused on the most important tools for photo editing and compositing, with just the right pairing of ‘how does this tool work’ and ‘why you want to use it and when.’ Essential Training courses are great for watching start-to-finish for the big overview, or if you need focused instruction on a tool, or set of tools, you don’t quite understand. For example, in this excerpt, you’ll see how Photoshop’s Liquify tool can be used judiciously in a variety of different real-world portrait retouching scenarios:

Note, if you’re working with an earlier version of Photoshop, there are Photoshop CS5 and CS4 essential training courses available in the library as well.


2.  Photoshop CS6 One-on-One: Fundamentals
The fundamentals course from the Photoshop One-on-One series also covers the core concepts of working in Photoshop, but veteran Photoshop instructor Deke McClelland approaches his training as though he were your private one-to-one tutor. Photoshop CS6 One-on-One: Fundamentals is great if you’re looking for more insight into how tools integrate with one another, or if you prefer to learn through “mini-project” examples that develop over the course of a movie or a chapter. In this excerpt from chapter four of the course, you’ll see a six-minute lesson on blending, and, specifically, how to work with three distinct features: Opacity, the History panel, and blend modes:

Deke has been creating a version of the One-on-One Fundamentals course in the library for several years, so if you’re working with an earlier version you can find this specifically tailored instruction for Photoshop CS3, CS4, and CS5 as well.


3. Photoshop CS6 for Photographers
Using Photoshop can mean different things to different people and this course is notable for it’s focus on the needs of a particular set of Photoshop students—photographers. In this course, Chris Orwig, a noted photographer and photography teacher, details the features and techniques surrounding photo enhancement and retouching, preparation for print and online publishing, and much more. He also teaches some of the foundational science behind digital photography, including this discussion of pixels and bit depth:

Chris has been teaching this photography-centric Photoshop course for several versions of Photoshop, including Photoshop CS3 for Photographers, Photoshop CS4 for Photographers, and Photoshop CS5 for Photographers. He has also created several in-depth courses on photography-critical topics including portrait retouching and creative effects.


4. Photoshop for Designers
In the Photoshop for Designers series, talented designer Nigel French digs deep into Photoshop with a specific focus on the needs of graphic designers. The series is broken up into five full-length courses, each exploring a particular aspect of Photoshop including textures, colors, type essentials, Shape layers, and layer effects. Often, when you’re using Photoshop for graphic design, you’re starting with a blank canvas and creating artwork out of pure pixels, which is the case in this excerpt from chapter one of the Photoshop for Designers: Color course which covers how to create a color wheel using Photoshop’s blend modes and layer effects.


5. Photo Restoration with Photoshop
In this course, professional photo restorer Janine Smith describes how to use Photoshop specifically to restore, retouch, and enhance old or damaged photos. In addition to covering methods for fixing everything from exposure, to stains, colorcast, scratches, and tears, Janine also shares how to evaluate damaged photos before beginning the restoration process. A course that offers lessons through exploration of an example project, this course includes a hands-on photo restoration that takes an image from a damaged start to a restored finish. In this video from chapter nine of the course, you’ll see a before and after of the course project restoration, and a run-down of the improvements Janine will help you tackle, including, the restoration of a major crack through the subject’s face, color alteration, and the removal of several major damage spots:

The course was recorded in CS5 but it’s real strength is the best-practices approach that Janine takes to photo restoration, so you should find valuable information here even if you’re still working in CS4, or if you’ve just forayed into the brave new world of Photoshop CS6.

Photoshop is a complicated program that can be used in infinite ways for a variety of creative endeavors. The team at is dedicated to making sure you can find a course (or maybe three) that really provides the depth of coverage, level of context, and variety of specific interest that you need. Are you looking for a place to start with Photoshop? Let us know here, and we’ll share our ideas about where to begin.


Why you should learn PHP after HTML, CSS, and JavaScript

Published by | Saturday, May 12th, 2012
PHP in Action using my iPad

PHP in Action using my iPad

Earlier in my design career I read an insightful book by Roger Black called Websites that Work. One of his rules of design was that after black and white, red was the third color. White is the brightest color, and black has the most contrast to white, but red is the color that gives you the most bang for the buck if you’re looking to get your text noticed. That three-color premise makes me think back to development languages—specifically, which are important, why they are important, and in what order they should be approached.

I’m a big fan of PHP, and much like red, I think it’s the language that will give you the biggest bang for your learning buck. I propose that after you learn HTML/CSS, the next thing you should learn is JavaScript, and the third thing you should learn is PHP. You might argue that HTML and CSS are two different things, but I see them as the key semantic and layout combination of the web, so I consider them one item bundled together.

So what is PHP, and why should I learn it third?

PHP is a server-side language with files that are processed before they are sent to a client computer. It’s easily available in even the cheapest shared hosting servers and runs some of the biggest web sites on the Internet including Facebook. PHP also serves as the engine for most blogging platforms, including WordPress.

Some may argue that learning something like node.js is an easier transition from JavaScript, and I will admit, the superior object-oriented structure of Python and the MVC frameworks like Rails might be tempting, but to me, PHP is a the language for getting things done. If you already know JavaScript, the syntax is eerily similar so you can get going quickly.

If you’re into an MVC structure, there are plenty of frameworks available for the PHP language. To get started, I’d recommend checking out Drew Flakman‘s PHP frameworks course, MVC Frameworks for Building PHP Web Applications.

Using PHP hands-on

In this week’s episode of View Source, I wanted to show you a technique that I use often with PHP—creating a folder where people can drop photos, and then using PHP with jQuery to build a slideshow of the photos dropped into that folder. When it’s done, all you have to do is drop a new photo into a folder to update your slideshow, and your site will automatically update with the new content. It’s how I update the photos on the blog for View Source, and I’ve used the same technique to add elements like audio and PDF links to web sites before. With this technique, you can easily teach someone how to update a web site by simply dropping files into a folder.


Interested in more?
• The full View Source weekly series on
• All web + interactive courses on
• All courses from Ray Villalobos on

Suggested courses to watch next:
PHP for Web Designers
• Create an Interactive Video Gallery with jQuery
PHP with MySQL Essential Training
Dreamweaver CS5 with PHP and MySQL